web staff : grid column re-ordering

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

diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2
index 36ccfc5..b0faaa0 100644 (file)
--- a/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2
+++ b/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2
@@ -128,6 +128,9 @@
       </div>
     </div>
     <div class="eg-grid-cell"
+        eg-grid-column-drag-source 
+        eg-grid-column-drag-dest
+        column="{{col.name}}"
         ng-repeat="col in grid.columnsProvider.columns"
         style="flex:{{col.flex}}"
         ng-show="grid.columnsProvider.visible[col.name]">

diff --git a/Open-ILS/web/js/ui/default/staff/services/grid2.js b/Open-ILS/web/js/ui/default/staff/services/grid2.js
index 9d5c152..87455a5 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/grid2.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid2.js
@@ -312,6 +312,35 @@ angular.module('egGridMod',
                 }
             }
 
+            grid.onColumnDrag = function(col) {
+                // track which column we're dragging
+                grid.dragColumn = col;
+            }
+
+            grid.onColumnDrop = function(target) {
+                if (angular.isUndefined(target)) return;
+                if (target == grid.dragColumn) return;
+                var srcIdx, targetIdx, srcCol;
+                angular.forEach(grid.columnsProvider.columns,
+                    function(col, idx) {
+                        if (col.name == grid.dragColumn) {
+                            srcIdx = idx;
+                            srcCol = col;
+                        } else if (col.name == target) {
+                            targetIdx = idx;
+                        }
+                    }
+                );
+
+                if (srcIdx < targetIdx) targetIdx--;
+
+                // move src column from old location to new location in 
+                // the columns array, then force a page refresh
+                grid.columnsProvider.columns.splice(srcIdx, 1);
+                grid.columnsProvider.columns.splice(targetIdx, 0, srcCol);
+                $scope.$apply(); 
+            }
+
             // asks the dataProvider for a page of data
             grid.collect = function() {
                 grid.items = [];
@@ -530,6 +559,41 @@ angular.module('egGridMod',
     }
 ])
 
+.directive('egGridColumnDragSource', function() {
+    return {
+        restrict : 'A',
+        require : '^egGrid',
+        link : function(scope, element, attrs, egGridCtrl) {
+            angular.element(element).attr('draggable', 'true');
+            element.bind('dragstart', function(e) {
+                egGridCtrl.onColumnDrag(attrs.column);
+            });
+        }
+    };
+})
+
+.directive('egGridColumnDragDest', function() {
+    return {
+        restrict : 'A',
+        require : '^egGrid',
+        link : function(scope, element, attrs, egGridCtrl) {
+            element.bind('dragover', function(e) {
+                e.stopPropagation();
+                e.preventDefault();
+                e.dataTransfer.dropEffect = 'copy';
+            });
+
+            element.bind('drop', function(e) {
+                e.stopPropagation();
+                e.preventDefault();
+                egGridCtrl.onColumnDrop(attrs.column);
+            });
+        }
+    };
+})
+
+
+
 /**
  * Translates bare IDL object values into display values.
  * 1. Passes dates through the angular date filter