web staff : grid column move improvements; adding column conf back in

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 16ddf28..46263d4 100644 (file)
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -185,21 +185,35 @@ table.list tr.selected td {
   padding-right: 1px;
 }
 
+.eg-grid-col-drag, .eg-grid-col-drag:active {
+  /* similar to label-primary, sans padding */
+  background-color: rgb(66, 139, 202);
+  color: #fff;
+}
+
+.eg-grid-col-hover {
+  /* similar to label-success, sans padding */
+  background-color: rgb(92, 184, 92);
+  color: #fff;
+}
+
 /* 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
    calculate the width instead. */
+/*
 .eg-grid-scroll > .eg-grid-header-row, 
 .eg-grid-scroll > .eg-grid-conf-row { 
   padding-right: 15px;
 }
 .eg-grid-scroll > .eg-grid-content-body {
   overflow-y:scroll; 
-  height: 600px; /* TODO: configurable */
+  height: 600px; 
 }
+*/
 
 /* ----------------------------------------------------------------------
- * Grid
+ * /Grid
  * ---------------------------------------------------------------------- */
 
 [%# 

diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2
index b0faaa0..b9f9499 100644 (file)
--- a/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2
+++ b/Open-ILS/src/templates/staff/parts/t_autogrid2.tt2
@@ -131,15 +131,47 @@
         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 href='' ng-click="grid.quickSort(col.name)">{{col.label}}</a>
+        <a column="{{col.name}}" href='' 
+          ng-click="grid.quickSort(col.name)">{{col.label}}</a>
     </div>
   </div>
 
-  <div class="eg-grid-content-body">
+  <!-- Inline grid configuration row -->
+  <div class="eg-grid-row eg-grid-conf-row" ng-show="grid.showGridConf">
+    <div class="eg-grid-cell eg-grid-cell-conf-header" 
+        style="flex:{{grid.indexFlex + grid.selectorFlex}}">
+      <div class="eg-grid-conf-cell-entry">[% l('Expand') %]</div>
+      <div class="eg-grid-conf-cell-entry">[% l('Shrink') %]</div>
+      <div class="eg-grid-conf-cell-entry">[% l('Sort') %]</div>
+    </div>
+    <div class="eg-grid-cell"
+      ng-repeat="col in grid.columnsProvider.columns"
+      style="flex:{{col.flex}}"
+      ng-show="grid.columnsProvider.visible[col.name]">
+      <div class="eg-grid-conf-cell-entry">
+        <a href="" title="[% l('Make column wider') %]"
+          ng-click="grid.modifyColumnFlex(col,1)">
+          <span class="glyphicon glyphicon-fast-forward"></span>
+        </a>
+      </div>
+      <div class="eg-grid-conf-cell-entry">
+        <a href="" title="[% l('Make column narrower') %]"
+          ng-click="grid.modifyColumnFlex(col,-1)">
+          <span class="glyphicon glyphicon-fast-backward"></span>
+        </a>
+      </div>
+      <div class="eg-grid-conf-cell-entry">
+        <input type='number' ng-model="col.sort" 
+          title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
+      </div>
+    </div>
+  </div>
 
+  <div class="eg-grid-content-body">
     <div ng-show="grid.count() == 0" 
       class="alert alert-info">[% l('No Items To Display') %]</div>
 

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 87455a5..f72278c 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/grid2.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid2.js
@@ -1,5 +1,5 @@
 angular.module('egGridMod', 
-    ['egCoreMod', 'ui.bootstrap'])
+    ['egCoreMod', 'egUiMod', 'ui.bootstrap'])
 
 .directive('egGrid', function() {
     return {
@@ -99,6 +99,10 @@ angular.module('egGridMod',
                 $scope.grid = grid;
             }
 
+            grid.onContextMenu = function($event) {
+                var col = angular.element($event.target).attr('column');
+            }
+
             grid.page = function() {
                 return (grid.offset / grid.limit) + 1;
             }
@@ -219,6 +223,13 @@ angular.module('egGridMod',
                 return -1;
             }
 
+            grid.modifyColumnFlex = function(column, val) {
+                column.flex += val;
+                // prevent flex:0;  use hiding instead
+                if (column.flex < 1)
+                    column.flex = 1;
+            }
+
             // handles click, control-click, and shift-click
             grid.handleRowClick = function($event, item) {
                 var index = grid.indexValue(item);
@@ -312,11 +323,6 @@ 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;
@@ -400,6 +406,18 @@ angular.module('egGridMod',
             cols.visible = {};
         }
 
+        cols.indexOf = function(name) {
+            for (var i = 0; i < cols.columns.length; i++) {
+                if (cols.columns[i].name == name) 
+                    return i;
+            }
+            return -1;
+        }
+
+        cols.findColumn = function(name) {
+            return cols.columns[cols.indexOf(name)];
+        }
+
         cols.compileAutoColumns = function() {
 
             var idl_class = egIDL.classes[cols.idlClass];
@@ -565,8 +583,15 @@ angular.module('egGridMod',
         require : '^egGrid',
         link : function(scope, element, attrs, egGridCtrl) {
             angular.element(element).attr('draggable', 'true');
+
             element.bind('dragstart', function(e) {
-                egGridCtrl.onColumnDrag(attrs.column);
+                egGridCtrl.dragColumn = attrs.column;
+                angular.element(e.target).addClass('eg-grid-col-drag');
+            });
+
+            element.bind('dragend', function(e) {
+                console.log('dragend');
+                angular.element(e.target).removeClass('eg-grid-col-drag');
             });
         }
     };
@@ -577,16 +602,30 @@ angular.module('egGridMod',
         restrict : 'A',
         require : '^egGrid',
         link : function(scope, element, attrs, egGridCtrl) {
-            element.bind('dragover', function(e) {
+
+            element.bind('dragover', function(e) { // required for drop
                 e.stopPropagation();
                 e.preventDefault();
                 e.dataTransfer.dropEffect = 'copy';
             });
 
+            element.bind('dragenter', function(e) {
+                e.stopPropagation();
+                e.preventDefault();
+                angular.element(e.target).addClass('eg-grid-col-hover');
+            });
+
+            element.bind('dragleave', function(e) {
+                e.stopPropagation();
+                e.preventDefault();
+                angular.element(e.target).removeClass('eg-grid-col-hover');
+            });
+
             element.bind('drop', function(e) {
                 e.stopPropagation();
                 e.preventDefault();
-                egGridCtrl.onColumnDrop(attrs.column);
+                angular.element(e.target).removeClass('eg-grid-col-hover');
+                egGridCtrl.onColumnDrop(attrs.column); // move the column
             });
         }
     };

diff --git a/Open-ILS/web/js/ui/default/staff/services/ui.js b/Open-ILS/web/js/ui/default/staff/services/ui.js
index 3670b53..66c2fa1 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/ui.js
+++ b/Open-ILS/web/js/ui/default/staff/services/ui.js
@@ -137,9 +137,9 @@ function($timeout, $parse) {
 /*
  * http://stackoverflow.com/questions/15731634/how-do-i-handle-right-click-events-in-angular-js
  */
-.directive('ngRightClick', function($parse) {
+.directive('egRightClick', function($parse) {
     return function(scope, element, attrs) {
-        var fn = $parse(attrs.ngRightClick);
+        var fn = $parse(attrs.egRightClick);
         element.bind('contextmenu', function(event) {
             scope.$apply(function() {
                 event.preventDefault();