From e7fb08fe800101d51f5a586381d278d17d33dd58 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Fri, 28 Mar 2014 16:56:10 -0400 Subject: [PATCH] web staff : grids Signed-off-by: Bill Erickson --- Open-ILS/src/templates/staff/css/style.css.tt2 | 9 ++- Open-ILS/src/templates/staff/parts/t_autogrid.tt2 | 44 +++++++++---- Open-ILS/src/templates/staff/t_base_js.tt2 | 1 + Open-ILS/web/js/ui/default/staff/services/grid.js | 79 +++++++++++++++++++++-- Open-ILS/web/js/ui/default/staff/services/list.js | 7 ++ 5 files changed, 117 insertions(+), 23 deletions(-) diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index 8ed9c7005c..16ddf28cd2 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -91,6 +91,11 @@ table.list tr.selected td { * Grid * ---------------------------------------------------------------------- */ +.eg-grid-primary-label { + font-weight: bold; + font-size: 120%; +} + /* odd/even row styling */ .eg-grid-content-body > div:nth-child(odd):not(.eg-grid-row-selected) { background-color: rgb(248, 248, 248); @@ -108,10 +113,8 @@ table.list tr.selected td { .eg-grid-action-row { border: none; - justify-content:flex-end; /* i.e. float right */ - /* margin should not have to be this large; something's up */ - margin-bottom: 15px; + margin-bottom: 12px; } .eg-grid-header-row { diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 index 29d73b2798..6a0f57b73e 100644 --- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 +++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 @@ -4,6 +4,9 @@ This sits above the grid and contains the column picker, etc. -->
+
+
{{gridLabel}}
+
@@ -38,9 +41,19 @@
- +
[% l('No Items To Display') %]
@@ -55,26 +68,29 @@
-
[% l('#') %]
-
-
+
+
[% l('#') %]
+
+
+
+ +
- {{column.label}} -
- foo - -
+ {{column.label}}
-
+
[% l('Expand') %]
[% l('Shrink') %]
[% l('Sort') %]
@@ -108,11 +124,11 @@
-
{{$index + 1 + list.pageOffset}}
-
+
diff --git a/Open-ILS/src/templates/staff/t_base_js.tt2 b/Open-ILS/src/templates/staff/t_base_js.tt2 index 094baf0cbd..3a5c80bc0e 100644 --- a/Open-ILS/src/templates/staff/t_base_js.tt2 +++ b/Open-ILS/src/templates/staff/t_base_js.tt2 @@ -39,3 +39,4 @@ + diff --git a/Open-ILS/web/js/ui/default/staff/services/grid.js b/Open-ILS/web/js/ui/default/staff/services/grid.js index 5b32df01ce..118a0a6b16 100644 --- a/Open-ILS/web/js/ui/default/staff/services/grid.js +++ b/Open-ILS/web/js/ui/default/staff/services/grid.js @@ -38,7 +38,10 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap' // grid configuration UI. This is primarily used by // UIs where the data is ephemeral and can only be // single-display-column sorted. - disableSortPriority : '@' + disableSortPriority : '@', + + // optional primary grid label + mainLabel : '@' }, link : function(scope, element, attrs) { @@ -51,14 +54,18 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap' templateUrl : '/eg/staff/parts/t_autogrid', // TODO: avoid abs url controller : // TODO: reqs list - function($scope, $timeout, $modal, egIDL, egAuth, egNet, egList) { + function($scope, $timeout, $modal, $document, $window, egIDL, egAuth, egNet, egList) { var self = this; - // setup function, called at the end of the controller + // setup function. called at the end of the controller this.init = function() { self.limit = 25; self.ofset = 0; + $scope.indexFlex = 1; + $scope.selectorFlex = 1; + $scope.gridLabel = $scope.mainLabel; + if (!$scope.query) { console.error("egGrid requires a query"); return; @@ -170,12 +177,16 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap' */ this.compileAutoFields = function() { if ($scope.list.allColumns.length) return; + var idlClass = egIDL.classes[$scope.idlClass]; - $scope.idField = $scope.idField || - egIDL.classes[$scope.idlClass].pkey; + $scope.idField = $scope.idField || idlClass.pkey; + + if (!$scope.gridLabel) { + $scope.gridLabel = idlClass.label; + } angular.forEach( - egIDL.classes[$scope.idlClass].fields.sort( + idlClass.fields.sort( function(a, b) { return a.name < b.name ? -1 : 1 }), function(field) { if (field.virtual) return; @@ -361,6 +372,27 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap' ]; } + this.onColumnDrag = function(col) { + // track which column we're dragging + self.dragColumn = col; + } + + // if the target column does not match the source column, + // increase the size of the source column. + this.onColumnDragOver = function(target) { + if (angular.isUndefined(target)) return; + if (target == self.dragColumn) return; + if (self.dragColumn == '+index') { + $scope.indexFlex += 1; + } else if (self.dragColumn == '+selector') { + $scope.selectorFlex += 1; + } else { + var column = $scope.list.findColumn(self.dragColumn); + $scope.modifyColumnFlex(column, 1); + } + $scope.$apply(); // needed + } + this.init(); } }; @@ -389,6 +421,41 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap' }; }) +/** Simplified dnd directives for grid column controls. + * Extract these out if the can be made generic enough + */ + +.directive('egDragSource', function() { + return { + restrict : 'A', + require : '^egGrid', + link : function(scope, element, attrs, egGridCtrl) { + angular.element(element).attr('draggable', 'true'); + element.bind('dragstart', function(e) { + var col = angular.element(e.target).attr('column'); + egGridCtrl.onColumnDrag(col); + }); + } + }; +}) + +.directive('egDragDest', function() { + return { + restrict : 'A', + require : '^egGrid', + link : function(scope, element, attrs, egGridCtrl) { + element.bind('dragover', function(e) { + console.log('dragover'); + e.stopPropagation(); + e.preventDefault(); + //e.dataTransfer.dropEffect = 'copy'; + var col = angular.element(e.target).attr('column'); + egGridCtrl.onColumnDragOver(col); + }); + } + }; +}) + /** * Translates bare IDL object values into display values. * 1. Passes dates through the angular date filter diff --git a/Open-ILS/web/js/ui/default/staff/services/list.js b/Open-ILS/web/js/ui/default/staff/services/list.js index d40f1d60c0..b3ce709b01 100644 --- a/Open-ILS/web/js/ui/default/staff/services/list.js +++ b/Open-ILS/web/js/ui/default/staff/services/list.js @@ -50,6 +50,13 @@ angular.module('egListMod', ['egCoreMod']) // {index => true} map of selected rows this.selected = {}; + this.findColumn = function(name) { + for (var i = 0; i < this.allColumns.length; i++) { + if (name == this.allColumns[i].name) + return this.allColumns[i]; + } + } + this.indexValue = function(item) { if (angular.isObject(item)) { if (item !== null) { -- 2.11.0