diff --git a/frontend/app/services/query-service.js b/frontend/app/services/query-service.js index 3f8b1a33b4..7c7f57350e 100644 --- a/frontend/app/services/query-service.js +++ b/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) { diff --git a/frontend/app/templates/work_packages/modals/columns.html b/frontend/app/templates/work_packages/modals/columns.html index a643b5d4ba..4a747a22eb 100644 --- a/frontend/app/templates/work_packages/modals/columns.html +++ b/frontend/app/templates/work_packages/modals/columns.html @@ -10,7 +10,8 @@ {{$item.title}} - +
diff --git a/frontend/app/work_packages/controllers/dialogs/columns.js b/frontend/app/work_packages/controllers/dialogs/columns.js index 9d88ae00e3..d3ed7ae523 100644 --- a/frontend/app/work_packages/controllers/dialogs/columns.js +++ b/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 getColumnName(column) { + return column.name; + } + function getColumnNames(arr) { - return _.map(arr, function(column) { - return column.name; - }); + 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); + }; };