From: Bill Erickson Date: Mon, 7 Apr 2014 21:06:12 +0000 (-0400) Subject: web staff : more griddy bits X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=b83c70b93c83a6522696e5a69ffc9f53691dcbb1;p=working%2FEvergreen.git web staff : more griddy bits Signed-off-by: Bill Erickson --- diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index c524fa0423..38dc7e419b 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -211,7 +211,12 @@ table.list tr.selected td { padding-right: 1px; } -.eg-grid-col-drag, .eg-grid-col-drag:active { +.eg-grid-column-move-handle:hover { + cursor: move; +} + +.eg-grid-column-move-handle-active, +.eg-grid-column-move-handle-active:active { /* similar to label-primary, sans padding */ background-color: rgb(66, 139, 202); color: #fff; @@ -223,21 +228,19 @@ table.list tr.selected td { color: #fff; } -.eg-grid-column-drag-handle { - width: 1px; - margin-left: 2px; +.eg-grid-column-resize-handle { height: 100%; } -.eg-grid-column-drag-handle:hover { +.eg-grid-column-resize-handle:hover { cursor: col-resize; - width: 3px; - border: 1px dashed rgb(66, 139, 202); } -.eg-grid-column-drag-handle-west { +/* for these to be useful, they would have to be applied + * to the dragover targets. not yet done */ +.eg-grid-column-resize-handle-west { cursor: w-resize; } -.eg-grid-column-drag-handle-east { +.eg-grid-column-resize-handle-east { cursor: e-resize; } diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 index f5e4868a5a..3dca865304 100644 --- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 +++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 @@ -141,14 +141,19 @@ ng-show="grid.columnsProvider.visible[col.name]">
-
- {{col.label}} +
+ +
+
{{col.label}}
+
 
+ class="eg-grid-column-resize-handle"> 
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 a76d6f67fd..eb64e7a899 100644 --- a/Open-ILS/web/js/ui/default/staff/services/grid.js +++ b/Open-ILS/web/js/ui/default/staff/services/grid.js @@ -31,14 +31,14 @@ angular.module('egGridMod', // and managed externally. itemsProvider : '=', - // if true, hide the sortPriority options in the - // grid configuration UI. This is primarily used by - // UIs where the data is ephemeral and can only be - // single-display-column sorted. - disableSortPriority : '@', + // comma-separated list of supported or disabled grid features + // TODO: examples + features : '@', + + initialOffset : '=', // optional primary grid label - mainLabel : '@' + mainLabel : '@', }, // TODO: avoid hard-coded url @@ -60,7 +60,7 @@ angular.module('egGridMod', var grid = this; grid.init = function() { - grid.offset = 0; + grid.offset = $scope.initialOffset || 0; grid.limit = 25; grid.items = []; grid.selected = {}; // idField-based @@ -74,9 +74,13 @@ angular.module('egGridMod', // default flex values for the index and selector columns grid.indexFlex = 1; grid.selectorFlex = 1; + grid.features = ($scope.features) ? + $scope.features.split(',') : []; grid.columnsProvider = egGridColumnsProvider.instance({ - idlClass : grid.idlClass + idlClass : grid.idlClass, + defaultToHidden : (grid.features.indexOf('-display') > -1), + defaultToNoSort : (grid.features.indexOf('-sort') > -1) }); if ($scope.autoFields) { @@ -92,7 +96,10 @@ angular.module('egGridMod', // provider's revision changes $scope.$watch( function() { return grid.dataProvider.revision() }, - function() { grid.collect() } + function(newVal, oldVal) { + // hmm, why is this check necessary? + if (newVal != oldVal) grid.collect(); + } ); } else { @@ -206,6 +213,17 @@ angular.module('egGridMod', } } + // inform the data provider that a selection has been made + grid.informSelection = function() { + var items = []; + angular.forEach(Object.keys(grid.selected), + function(index) { + items.push(grid.items[grid.indexOf(index)]); + } + ); + grid.dataProvider.select(items); + } + // returns true if item1 appears in the list before item2; // false otherwise. this is slightly more efficient that // finding the position of each then comparing them. @@ -251,38 +269,41 @@ angular.module('egGridMod', } else if ($event.shiftKey) { // shift-click + if (!grid.lastSelectedItemIndex || index == grid.lastSelectedItemIndex) { - // no source row, just do a simple select grid.selectOneItem(index); grid.lastSelectedItemIndex = index; - return; - } - var selecting = false; - var ascending = - grid.itemComesBefore(grid.lastSelectedItemIndex, item); - var startPos = - grid.indexOf(grid.lastSelectedItemIndex); + } else { + + var selecting = false; + var ascending = grid.itemComesBefore( + grid.lastSelectedItemIndex, item); + var startPos = + grid.indexOf(grid.lastSelectedItemIndex); - // update to new last-selected - grid.lastSelectedItemIndex = index; + // update to new last-selected + grid.lastSelectedItemIndex = index; - // select each row between the last selected and - // currently selected items - while (true) { - startPos += ascending ? 1 : -1; - var curItem = grid.items[startPos]; - if (!curItem) break; - var curIdx = grid.indexValue(curItem); - grid.selected[curIdx] = true; - if (curIdx == index) break; // all done + // select each row between the last selected and + // currently selected items + while (true) { + startPos += ascending ? 1 : -1; + var curItem = grid.items[startPos]; + if (!curItem) break; + var curIdx = grid.indexValue(curItem); + grid.selected[curIdx] = true; + if (curIdx == index) break; // all done + } } } else { grid.selectOneItem(index); grid.lastSelectedItemIndex = index; } + + grid.informSelection(); } // Builds a sort expression from column sort priorities. @@ -425,14 +446,11 @@ angular.module('egGridMod', // asks the dataProvider for a page of data grid.collect = function() { grid.items = []; - grid.selectedItems = {}; - grid.dataProvider.get( - grid.offset, - grid.limit, - function(item) { - if (item) grid.items.push(item) - } - ); + grid.selected = {}; + grid.dataProvider.get(grid.offset, grid.limit) + .then(null, null, function(item) { + if (item) grid.items.push(item) + }); } grid.init(); @@ -454,11 +472,19 @@ angular.module('egGridMod', name : '@', // required; unique name path : '@', // optional; flesh path label : '@', // optional; display label - flex : '@', // optional; default flex width - display : '=' // optional; hide column by default + flex : '@' // optional; default flex width }, template : '
', // NOOP template link : function(scope, element, attrs, egGridCtrl) { + + // boolean fields are presented as value-less attributes + angular.forEach( + ['visible', 'hidden', 'sortable', 'nonsortable'], + function(field) { + if (angular.isDefined(attrs[field])) + scope[field] = true; + } + ); egGridCtrl.columnsProvider.add(scope); } }; @@ -471,6 +497,8 @@ angular.module('egGridMod', cols.columns = []; cols.visible = {}; cols.idlClass = args.idlClass; + cols.defaultToHidden = args.defaultToHidden; + cols.defaultToNoSort = args.defaultToNoSort; cols.showAllColumns = function() { angular.forEach(cols.columns, function(column) { @@ -532,15 +560,22 @@ angular.module('egGridMod', path : colSpec.path, flex : Number(colSpec.flex) || 2, sort : Number(colSpec.sort) || 0, - datatype : colSpec.datatype, + sortable : colSpec.sortable, + nonsortable : colSpec.nonsortable, + visible : colSpec.visible, + hidden : colSpec.hidden, + datatype : colSpec.datatype }; if (!column.name) column.name = column.path; if (!column.path) column.path = column.name; - if (colSpec.display !== false) + if (column.visible || (!cols.defaultToHidden && !column.hidden)) cols.visible[column.name] = true; + if (column.sortable || (!cols.defaultToNoSort && !column.nonsortable)) + column.sortable = true; + cols.columns.push(column); if (fromIDL) return; @@ -633,7 +668,7 @@ angular.module('egGridMod', queryFields[col.name] = col.path; }); - egNet.request( + return egNet.request( 'open-ils.fielder', 'open-ils.fielder.flattened_search', egAuth.token(), gridData.idlClass, queryFields, @@ -642,9 +677,6 @@ angular.module('egGridMod', limit : count, offset : index } - ).then( - null, null, - function(item) { onresponse(item) } ); } @@ -713,12 +745,14 @@ angular.module('egGridMod', egGridCtrl.dragColumn = attrs.column; egGridCtrl.dragType = attrs.dragType || 'move'; // or resize egGridCtrl.colResizeDir = 0; - angular.element(e.target).addClass('eg-grid-col-drag'); + angular.element(e.target).addClass( + 'eg-grid-column-move-handle-active'); }); element.bind('dragend', function(e) { if (egGridCtrl.dragType == 'move') - angular.element(e.target).removeClass('eg-grid-col-drag'); + angular.element(e.target).removeClass( + 'eg-grid-column-move-handle-active'); }); } };