Merge pull request #2674 from 0xF013/sortable-and-accessible-ui-select

19025 Sortable and accessible ui select

app/assets/stylesheets/content/ui_select.sass

@@ -0,0 +1,7 @@
+// keep this rule if you want ui-select drag-n-drop to work properly
+.ui-select-match .ui-select-match-item *
+  pointer-events: none
+
+// I think this rule should be global
+.select2-display-none
+  display: none

app/assets/stylesheets/default.css.sass

@@ -48,6 +48,7 @@
 @import content/context_menu
 @import content/forms
 @import content/choice
+@import content/ui_select
 @import content/flash_messages
 @import content/notifications
 @import content/calendar

frontend/app/templates/work_packages/modals/columns.html

@@ -6,7 +6,7 @@
 
     <div cg-busy="vm.promise" class="columns-modal-content">
       <label for="selected_columns">{{ I18n.t('js.description_selected_columns') }}</label>
-      <ui-select multiple ng-model="vm.selectedColumns" theme="select2" id="selected_columns">
+      <ui-select multiple sortable="true" ng-model="vm.selectedColumns" theme="select2" id="selected_columns">
         <ui-select-match>
           {{$item.title}}
         </ui-select-match>

frontend/app/work_packages/controllers/dialogs/columns.js

@@ -32,18 +32,19 @@ module.exports = function($scope, $filter, columnsModal, QueryService, WorkPacka
   this.closeMe = columnsModal.deactivate;
   var vm;
   $scope.vm = vm = {};
-  vm.availableColumns = [];
   vm.selectedColumns = [];
   vm.oldSelectedColumns = [];
+  vm.availableColumns = [];
 
-  var selectedColumnNames = getColumnNames(QueryService.getSelectedColumns());
+  var selectedColumns = QueryService.getSelectedColumns();
 
   // Available selectable Columns
   vm.promise = QueryService.loadAvailableColumns()
     .then(function(availableColumns){
       vm.availableColumns = availableColumns;
-      vm.availableColumns.forEach(function(column) {
+      var availableColumnNames = getColumnNames(availableColumns);
-        if (_.contains(selectedColumnNames, column.name)) {
+      selectedColumns.forEach(function(column) {
+        if (_.contains(availableColumnNames, column.name)) {
           vm.selectedColumns.push(column);
           vm.oldSelectedColumns.push(column);
         }

frontend/bower.json

@@ -27,9 +27,9 @@
     "hyperagent": "manwithtwowatches/hyperagent#v0.4.2",
     "lodash": "~2.4.1",
     "foundation-apps": "1.0.2",
-    "ui-select": "0xF013/ui-select#1a67dea0f6076e8f33354bf573bf5482539f289f",
+    "bourbon": "~4.2.1",
-    "mousetrap": "git://github.com/ccampbell/mousetrap.git",
+    "ui-select": "0xf013/ui-select#c7bef79e24cbeab977635c7a94d8f9504d4ee2e2",
-    "bourbon": "~4.2.1"
+    "mousetrap": "git://github.com/ccampbell/mousetrap.git"
   },
   "devDependencies": {
     "mocha": "~1.14.0",