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);
+ };
};