From b527c483e6f5ee692d08b354fe4e8909c9fa748b Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 18 May 2017 15:17:51 -0400
Subject: [PATCH] LP#1691801 Webstaff grid column move controls

Add options to grid "Configure Columns" interface for moving a column
left or right by one, all the way left, and all the way right.

Most recently modified column is styled so its easier for users to track
the movement of a column.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 Open-ILS/src/templates/staff/css/style.css.tt2    |  4 +++
 Open-ILS/src/templates/staff/share/t_autogrid.tt2 | 31 +++++++++++++++++++++-
 Open-ILS/web/js/ui/default/staff/services/grid.js | 32 +++++++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2
index bdfd64dd5a..74de877521 100644
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -381,6 +381,10 @@ table.list tr.selected td { /* deprecated? */
   cursor: e-resize;
 }
 
+.eg-grid-column-last-mod {
+  background-color: #78FA89;
+}
+
 .eg-grid-menu-item {
   margin-right: 10px;
 }
diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index acf3b5cd41..cf5ac460a2 100644
--- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
@@ -218,6 +218,7 @@
     </div>
     <div class="eg-grid-cell"
         eg-grid-column-drag-dest
+        ng-class="{'eg-grid-column-last-mod' : lastModColumn==col.name}"
         column="{{col.name}}"
         eg-right-click="onContextMenu($event)"
         ng-repeat="col in columns"
@@ -247,6 +248,10 @@
     <div class="eg-grid-cell eg-grid-cell-conf-header">
       <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('Left') %]</div>
+      <div class="eg-grid-conf-cell-entry">[% l('Right') %]</div>
+      <div class="eg-grid-conf-cell-entry">[% l('Far Left') %]</div>
+      <div class="eg-grid-conf-cell-entry">[% l('Far Right') %]</div>
       <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">[% l('Sort') %]</div>
     </div>
     <div class="eg-grid-cell"
@@ -256,15 +261,39 @@
       <div class="eg-grid-conf-cell-entry">
         <a href="" title="[% l('Make column wider') %]"
           ng-click="modifyColumnFlex(col,1)">
-          <span class="glyphicon glyphicon-fast-forward"></span>
+          <span class="glyphicon glyphicon-resize-full"></span>
         </a>
       </div>
       <div class="eg-grid-conf-cell-entry">
         <a href="" title="[% l('Make column narrower') %]"
           ng-click="modifyColumnFlex(col,-1)">
+          <span class="glyphicon glyphicon-resize-small"></span>
+        </a>
+      </div>
+      <div class="eg-grid-conf-cell-entry">
+        <a href="" title="[% l('Move column left') %]"
+          ng-click="modifyColumnPos(col, -1)">
+          <span class="glyphicon glyphicon-backward"></span>
+        </a>
+      </div>
+      <div class="eg-grid-conf-cell-entry">
+        <a href="" title="[% l('Move column right') %]"
+          ng-click="modifyColumnPos(col, 1)">
+          <span class="glyphicon glyphicon-forward"></span>
+        </a>
+      </div>
+      <div class="eg-grid-conf-cell-entry">
+        <a href="" title="[% l('Move column far left') %]"
+          ng-click="modifyColumnPos(col, -10000)">
           <span class="glyphicon glyphicon-fast-backward"></span>
         </a>
       </div>
+      <div class="eg-grid-conf-cell-entry">
+        <a href="" title="[% l('Move column far right') %]"
+          ng-click="modifyColumnPos(col, 10000)">
+          <span class="glyphicon glyphicon-fast-forward"></span>
+        </a>
+      </div>
       <div class="eg-grid-conf-cell-entry" ng-if="!disableMultiSort">
         <div ng-if="col.multisortable">
           <input type='number' ng-model="col.sort"
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 f85872b71f..7cbf9f29de 100644
--- a/Open-ILS/web/js/ui/default/staff/services/grid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid.js
@@ -747,9 +747,40 @@ angular.module('egGridMod',
                     column.flex = 1;
             }
             $scope.modifyColumnFlex = function(col, val) {
+                $scope.lastModColumn = col.name;
                 grid.modifyColumnFlex(col, val);
             }
 
+            grid.modifyColumnPos = function(col, diff) {
+                var srcIdx, targetIdx;
+                angular.forEach(grid.columnsProvider.columns,
+                    function(c, i) { if (c.name == col.name) srcIdx = i });
+
+                targetIdx = srcIdx + diff;
+                if (targetIdx < 0) {
+                    targetIdx = 0;
+                } else if (targetIdx >= grid.columnsProvider.columns.length) {
+                    // Target index follows the last visible column.
+                    var lastVisible = 0;
+                    angular.forEach(grid.columnsProvider.columns, 
+                        function(column, idx) {
+                            if (column.visible) lastVisible = idx;
+                        }
+                    );
+                    targetIdx = lastVisible + 1;
+                }
+
+                // Splice column out of old position, insert at new position.
+                grid.columnsProvider.columns.splice(srcIdx, 1);
+                grid.columnsProvider.columns.splice(targetIdx, 0, col);
+            }
+
+            $scope.modifyColumnPos = function(col, diff) {
+                $scope.lastModColumn = col.name;
+                return grid.modifyColumnPos(col, diff);
+            }
+
+
             // handles click, control-click, and shift-click
             $scope.handleRowClick = function($event, item) {
                 var index = grid.indexValue(item);
@@ -859,6 +890,7 @@ angular.module('egGridMod',
                     $scope.showGridConf = true;
                 }
 
+                delete $scope.lastModColumn;
                 $scope.gridColumnPickerIsOpen = false;
             }
 
-- 
2.11.0