LP#1730752 Webstaff grid column batch config dialog

Adds a new "Manage Columns" grid action which opens a batch grid column
configuration dialog.  In the dialog, users can show/hide multiple
columns at once.  The column position actions
(left/right/far-left/far-right) and sort priority settings have also
been moved to this new UI.

The existing 'Configure Columns' action has been renamed to 'Managed
Column Widths' and now only supports making columns wider and narrower.

Signed-off-by: Bill Erickson <berickxx@gmail.com>
Signed-off-by: Kathy Lussier <klussier@masslnc.org>

diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2
index 74cf439..b20f720 100644 (file)
--- a/Open-ILS/src/templates/staff/css/style.css.tt2
+++ b/Open-ILS/src/templates/staff/css/style.css.tt2
@@ -473,6 +473,23 @@ table.list tr.selected td { /* deprecated? */
   height: 25px;
 }
 
+.eg-grid-columns-modal-body {
+  max-height: 400px;
+  overflow: scroll;
+}
+
+.eg-grid-columns-modal-body .row {
+  padding: 2px 0px 2px 0px;
+  border-bottom: 1px solid #aaa;
+}
+
+.eg-grid-columns-modal-body .visible {
+  color: rgb(51, 51, 51);
+  background-color: rgb(201, 221, 225);
+  border-bottom: 1px solid #888;
+}
+
+
 eg-grid-field {
   display: none;
 }

diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index e8f94d7..941aa63 100644 (file)
--- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
@@ -158,9 +158,15 @@
         <span class="caret"></span>
       </button>
       <ul class="pull-right eg-grid-column-picker" uib-dropdown-menu>
+        <li>
+          <a href ng-click="showColumnDialog()">
+            <span class="glyphicon glyphicon-wrench"></span>
+            [% l('Manage Columns') %]
+          </a>
+        </li>
         <li><a href ng-click="toggleConfDisplay()">
-          <span class="glyphicon glyphicon-wrench"></span>
-          [% l('Configure Columns') %]
+          <span class="glyphicon glyphicon-resize-horizontal"></span>
+          [% l('Manage Column Widths') %]
         </a></li>
         <li><a href ng-click="saveConfig()">
           <span class="glyphicon glyphicon-floppy-save"></span>
@@ -253,11 +259,6 @@
     <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"
       ng-repeat="col in columns"
@@ -275,36 +276,6 @@
           <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"
-            title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
-        </div>
-      </div>
     </div>
   </div>
 

diff --git a/Open-ILS/src/templates/staff/share/t_grid_columns.tt2 b/Open-ILS/src/templates/staff/share/t_grid_columns.tt2
new file mode 100644 (file)
index 0000000..4393446
--- /dev/null
+++ b/Open-ILS/src/templates/staff/share/t_grid_columns.tt2
@@ -0,0 +1,64 @@
+<div>
+  <div class="modal-header">
+    <button type="button" class="close" 
+      ng-click="cancel()" aria-hidden="true">&times;</button>
+    <h4 class="modal-title alert alert-info">
+      [% l('Grid Columns Configuration') %]
+    </h4> 
+  </div>
+  <div class="modal-body eg-grid-columns-modal-body">
+    <div class="row eg-grid-header-row">
+      <div class="col-md-1">[% l('Visible') %]</div>
+      <div class="col-md-3">[% l('Column Name') %]</div>
+      <div class="col-md-1">[% l('Move Up') %]</div>
+      <div class="col-md-1">[% l('Move Down') %]</div>
+      <div class="col-md-1">[% l('First Visible') %]</div>
+      <div class="col-md-1">[% l('Last Visible') %]</div>
+      <div class="col-md-1" ng-if="!disableMultiSort">
+        [% l('Sort Priority') %]
+      </div>
+    </div>
+    <div class="row" ng-repeat="col in columns" 
+      ng-class="{visible : col.visible}">
+      <div class="col-md-1" ng-click="toggle(col)">
+        <span ng-if="col.visible" class="label label-success">&#x2713;</span>
+        <span ng-if="!col.visible" class="label label-warning">&#x2717;</span>
+      </div>
+      <div class="col-md-3" ng-click="toggle(col)">{{col.label}}</div>
+      <div class="col-md-1">
+        <a href title="[% l('Move column up') %]"
+          ng-click="modifyColumnPos(col, -1)">
+          <span class="glyphicon glyphicon-arrow-up"></span>
+        </a>
+      </div>
+      <div class="col-md-1">
+        <a href title="[% l('Move column down') %]"
+          ng-click="modifyColumnPos(col, 1)">
+          <span class="glyphicon glyphicon-arrow-down"></span>
+        </a>
+      </div>
+      <div class="col-md-1">
+        <a href title="[% l('Make first visible') %]"
+          ng-click="modifyColumnPos(col, -10000)">
+          <span class="glyphicon glyphicon-open"></span>
+        </a>
+      </div>
+      <div class="col-md-1">
+        <a href title="[% l('Make last visible') %]"
+          ng-click="modifyColumnPos(col, 10000)">
+          <span class="glyphicon glyphicon-save"></span>
+        </a>
+      </div>
+      <div class="col-md-1" ng-if="!disableMultiSort">
+        <div ng-if="col.multisortable">
+          <input type='number' ng-model="col.sort"
+            title="[% l('Sort Priority / Direction') %]" style='width:2.3em'/>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <input type="submit" class="btn btn-primary" 
+      ng-click="ok()" value="[% l('Close') %]"/>
+  </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 fab8679..e85171d 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/grid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid.js
@@ -119,10 +119,10 @@ angular.module('egGridMod',
         controller : [
                     '$scope','$q','egCore','egGridFlatDataProvider','$location',
                     'egGridColumnsProvider','$filter','$window','$sce','$timeout',
-                    'egProgressDialog',
+                    'egProgressDialog','$uibModal',
             function($scope,  $q , egCore,  egGridFlatDataProvider , $location,
                      egGridColumnsProvider , $filter , $window , $sce , $timeout,
-                     egProgressDialog) {
+                     egProgressDialog , $uibModal) {
 
             var grid = this;
 
@@ -1077,6 +1077,27 @@ angular.module('egGridMod',
                 });
             }
 
+            $scope.showColumnDialog = function() {
+                return $uibModal.open({
+                    templateUrl: './share/t_grid_columns',
+                    backdrop: 'static',
+                    size : 'lg',
+                    controller: ['$scope', '$uibModalInstance',
+                        function($dialogScope, $uibModalInstance) {
+                            $dialogScope.modifyColumnPos = $scope.modifyColumnPos;
+                            $dialogScope.disableMultiSort = $scope.disableMultiSort;
+                            $dialogScope.columns = $scope.columns;
+                            $dialogScope.toggle = function(col) {
+                                col.visible = !Boolean(col.visible);
+                            }
+                            $dialogScope.ok = $dialogScope.cancel = function() {
+                                $uibModalInstance.close()
+                            }
+                        }
+                    ]
+                });
+            },
+
             // generates CSV for the currently visible grid contents
             grid.generateCSV = function() {
                 return grid.getAllItemsAsText().then(function(text_items) {