Merge pull request #2821 from machisuji/fix/duplicate_available_columns

only allow adding unused columns

frontend/app/services/query-service.js

@@ -164,12 +164,17 @@ module.exports = function(Query, Sortation, $http, PathHelper, $q, AVAILABLE_WOR
 
     loadAvailableUnusedColumns: function(projectIdentifier) {
       return QueryService.loadAvailableColumns(projectIdentifier)
-        .then(function(available_columns) {
-          availableUnusedColumns = WorkPackagesTableHelper.getColumnDifference(available_columns, QueryService.getSelectedColumns());
+        .then(function(availableColumns) {
+          availableUnusedColumns = QueryService.selectUnusedColumns(availableColumns);
           return availableUnusedColumns;
         });
     },
 
+    selectUnusedColumns: function(columns) {
+      return WorkPackagesTableHelper.getColumnDifference(
+        columns, QueryService.getSelectedColumns());
+    },
+
     loadAvailableColumns: function(projectIdentifier) {
       // TODO: Once we have a single page app we need to differentiate between different project columns
       if(availableColumns.length) {

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

@@ -10,7 +10,8 @@
         <ui-select-match>
           {{$item.title}}
         </ui-select-match>
-        <ui-select-choices repeat="column in vm.availableColumns | filter: { title: $select.search }">
+        <ui-select-choices repeat="column in vm.unusedColumns | filter: { title: $select.search }"
+                           refresh="updateUnusedColumns($select.selected)" refresh-delay="0">
           <div ng-bind-html="column.title | highlight: $select.search"></div>
         </ui-select-choices>
       </ui-select>

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

@@ -35,13 +35,16 @@ module.exports = function($scope, $filter, columnsModal, QueryService, WorkPacka
   vm.selectedColumns = [];
   vm.oldSelectedColumns = [];
   vm.availableColumns = [];
+  vm.unusedColumns = [];
 
   var selectedColumns = QueryService.getSelectedColumns();
 
   // Available selectable Columns
   vm.promise = QueryService.loadAvailableColumns()
     .then(function(availableColumns){
-      vm.availableColumns = availableColumns;
+      vm.availableColumns = availableColumns; // all existing columns
+      vm.unusedColumns = QueryService.selectUnusedColumns(availableColumns); // columns not shown
+
       var availableColumnNames = getColumnNames(availableColumns);
       selectedColumns.forEach(function(column) {
         if (_.contains(availableColumnNames, column.name)) {
@@ -55,10 +58,12 @@ module.exports = function($scope, $filter, columnsModal, QueryService, WorkPacka
     return _.difference(vm.selectedColumns, vm.oldSelectedColumns);
   }
 
-  function getColumnNames(arr) {
-    return _.map(arr, function(column) {
+  function getColumnName(column) {
     return column.name;
-    });
+  }
+
+  function getColumnNames(arr) {
+    return _.map(arr, getColumnName);
   }
 
   $scope.updateSelectedColumns = function() {
@@ -77,4 +82,22 @@ module.exports = function($scope, $filter, columnsModal, QueryService, WorkPacka
 
     columnsModal.deactivate();
   };
+
+  /**
+   * When a column is removed from the selection it becomes unused and hence available for
+   * selection again. When a column is added to the selection it becomes used and is
+   * therefore unavailable for selection.
+   *
+   * This function updates the unused columns according to the currently selected columns.
+   *
+   * @param selectedColumns Columns currently selected through the multi select box.
+   */
+  $scope.updateUnusedColumns = function(selectedColumns) {
+    var used = _.map(selectedColumns, getColumnName);
+    var isUnused = function(col) {
+      return !_.contains(used, col.name);
+    };
+
+    vm.unusedColumns = _.filter(vm.availableColumns, isUnused);
+  };
 };