web staff : column resizing, mostly there

Signed-off-by: Bill Erickson <berick@esilibrary.com>

diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2
index 838f837..38d31b6 100644 (file)
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -222,6 +222,25 @@ table.list tr.selected td {
   color: #fff;
 }
 
+.eg-grid-column-drag-handle {
+  width: 1px;
+  margin-left: 2px;
+  height: 100%;
+}
+.eg-grid-column-drag-handle:hover {
+  cursor: col-resize;
+  width: 3px;
+  border: 1px dashed rgb(66, 139, 202);
+}
+
+.eg-grid-column-drag-handle-west {
+  cursor: w-resize;
+}
+.eg-grid-column-drag-handle-east {
+  cursor: e-resize;
+}
+
+
 /* hack to make the header columns line up with the content columns
    when the scroll bar is visible along the right side of the content
    columns. TODO: if this varies enough by browser, we'll need to

diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
index 03b3f44..a9726a7 100644 (file)
--- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
@@ -128,15 +128,23 @@
       </div>
     </div>
     <div class="eg-grid-cell"
-        eg-grid-column-drag-source 
         eg-grid-column-drag-dest
         column="{{col.name}}"
         eg-right-click="grid.onContextMenu($event)"
         ng-repeat="col in grid.columnsProvider.columns"
         style="flex:{{col.flex}}"
         ng-show="grid.columnsProvider.visible[col.name]">
-        <a column="{{col.name}}" href='' 
-          ng-click="grid.quickSort(col.name)">{{col.label}}</a>
+
+        <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>
+          <div eg-grid-column-drag-source 
+            drag-type="resize" column="{{col.name}}" 
+            class="eg-grid-column-drag-handle">&nbsp;</div>
+        </div>
     </div>
   </div>
 

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 9a81f3d..034c521 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/grid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid.js
@@ -200,7 +200,7 @@ angular.module('egGridMod',
             // false otherwise.  this is slightly more efficient that
             // finding the position of each then comparing them.
             // item1 / item2 may be an item or an item index
-            grid.comesBefore = function(itemOrIndex1, itemOrIndex2) {
+            grid.itemComesBefore = function(itemOrIndex1, itemOrIndex2) {
                 var idx1 = grid.indexValue(itemOrIndex1);
                 var idx2 = grid.indexValue(itemOrIndex2);
 
@@ -251,7 +251,7 @@ angular.module('egGridMod',
 
                     var selecting = false;
                     var ascending = 
-                        grid.comesBefore(grid.lastSelectedItemIndex, item);
+                        grid.itemComesBefore(grid.lastSelectedItemIndex, item);
                     var startPos = 
                         grid.indexOf(grid.lastSelectedItemIndex);
 
@@ -586,11 +586,14 @@ angular.module('egGridMod',
 
             element.bind('dragstart', function(e) {
                 egGridCtrl.dragColumn = attrs.column;
+                egGridCtrl.dragType = attrs.dragType || 'move'; // or resize
+                egGridCtrl.colResizeDir = 0;
                 angular.element(e.target).addClass('eg-grid-col-drag');
             });
 
             element.bind('dragend', function(e) {
-                angular.element(e.target).removeClass('eg-grid-col-drag');
+                if (egGridCtrl.dragType == 'move')
+                    angular.element(e.target).removeClass('eg-grid-col-drag');
             });
         }
     };
@@ -605,26 +608,79 @@ angular.module('egGridMod',
             element.bind('dragover', function(e) { // required for drop
                 e.stopPropagation();
                 e.preventDefault();
-                e.dataTransfer.dropEffect = 'copy';
+                e.dataTransfer.dropEffect = 'move';
+
+                if (egGridCtrl.colResizeDir == 0) return; // move
+
+                var cols = egGridCtrl.columnsProvider;
+                var srcCol = egGridCtrl.dragColumn;
+                var srcColIdx = cols.indexOf(srcCol);
+
+                if (egGridCtrl.colResizeDir == -1) {
+                    if (cols.indexOf(attrs.column) <= srcColIdx) {
+                        egGridCtrl.modifyColumnFlex(
+                            egGridCtrl.columnsProvider.findColumn(
+                                egGridCtrl.dragColumn), -1);
+                        if (cols.columns[srcColIdx+1]) {
+                            // source column shrinks by one, column to the
+                            // right grows by one.
+                            egGridCtrl.modifyColumnFlex(
+                                cols.columns[srcColIdx+1], 1);
+                        }
+                        scope.$apply();
+                    }
+                } else {
+                    if (cols.indexOf(attrs.column) > srcColIdx) {
+                        egGridCtrl.modifyColumnFlex( 
+                            egGridCtrl.columnsProvider.findColumn(
+                                egGridCtrl.dragColumn), 1);
+                        if (cols.columns[srcColIdx+1]) {
+                            // source column grows by one, column to the 
+                            // right grows by one.
+                            egGridCtrl.modifyColumnFlex(
+                                cols.columns[srcColIdx+1], -1);
+                        }
+
+                        scope.$apply();
+                    }
+                }
             });
 
             element.bind('dragenter', function(e) {
                 e.stopPropagation();
                 e.preventDefault();
-                angular.element(e.target).addClass('eg-grid-col-hover');
+                if (egGridCtrl.dragType == 'move') {
+                    angular.element(e.target).addClass('eg-grid-col-hover');
+                } else {
+                    // resize grips are on the right side of each column.
+                    // dragenter will either occur on the source column 
+                    // (dragging left) or the column to the right.
+                    if (egGridCtrl.colResizeDir == 0) {
+                        if (egGridCtrl.dragColumn == attrs.column) {
+                            egGridCtrl.colResizeDir = -1; // west
+                        } else {
+                            egGridCtrl.colResizeDir = 1; // east
+                        }
+                    }
+                }
             });
 
             element.bind('dragleave', function(e) {
                 e.stopPropagation();
                 e.preventDefault();
-                angular.element(e.target).removeClass('eg-grid-col-hover');
+                if (egGridCtrl.dragType == 'move') {
+                    angular.element(e.target).removeClass('eg-grid-col-hover');
+                }
             });
 
             element.bind('drop', function(e) {
                 e.stopPropagation();
                 e.preventDefault();
-                angular.element(e.target).removeClass('eg-grid-col-hover');
-                egGridCtrl.onColumnDrop(attrs.column); // move the column
+                egGridCtrl.colResizeDir = 0;
+                if (egGridCtrl.dragType == 'move') {
+                    angular.element(e.target).removeClass('eg-grid-col-hover');
+                    egGridCtrl.onColumnDrop(attrs.column); // move the column
+                }
             });
         }
     };