web staff : more griddy bits
authorBill Erickson <berick@esilibrary.com>
Mon, 7 Apr 2014 21:06:12 +0000 (17:06 -0400)
committerBill Erickson <berick@esilibrary.com>
Mon, 7 Apr 2014 21:06:12 +0000 (17:06 -0400)
Signed-off-by: Bill Erickson <berick@esilibrary.com>
Open-ILS/src/templates/staff/css/style.css.tt2
Open-ILS/src/templates/staff/parts/t_autogrid.tt2
Open-ILS/web/js/ui/default/staff/services/grid.js

index c524fa0..38dc7e4 100644 (file)
@@ -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;
 }
 
index f5e4868..3dca865 100644 (file)
         ng-show="grid.columnsProvider.visible[col.name]">
 
         <div style="display:flex">
-          <div style="flex:1">
-            <a column="{{col.name}}" href='' 
-              eg-grid-column-drag-source
-              ng-click="grid.quickSort(col.name)">{{col.label}}</a>
+          <div style="flex:1" class="eg-grid-column-move-handle">
+            <div ng-if="col.sortable">
+              <a column="{{col.name}}" href='' 
+                eg-grid-column-drag-source
+                ng-click="grid.quickSort(col.name)">{{col.label}}</a>
+            </div>
+            <div ng-if="!col.sortable">
+              <div column="{{col.name}}" eg-grid-column-drag-source>{{col.label}}</div>
+            </div>
           </div>
           <div eg-grid-column-drag-source 
             drag-type="resize" column="{{col.name}}" 
-            class="eg-grid-column-drag-handle">&nbsp;</div>
+            class="eg-grid-column-resize-handle">&nbsp;</div>
         </div>
     </div>
   </div>
index a76d6f6..eb64e7a 100644 (file)
@@ -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 : '<div></div>', // 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');
             });
         }
     };