From 58579e840f471109abae23b28aa85a7c35ff992b 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 it's easier for users to track
the movement of a column.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
---
 .../src/templates/staff/css/style.css.tt2     |  4 +++
 .../src/templates/staff/share/t_autogrid.tt2  | 31 +++++++++++++++++-
 .../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 eff1037b0d..bfde50081b 100644
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -358,6 +358,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.43.2