egGrid column picker dialog WIP
authorBill Erickson <berickxx@gmail.com>
Tue, 7 Nov 2017 20:32:33 +0000 (15:32 -0500)
committerBill Erickson <berickxx@gmail.com>
Tue, 7 Nov 2017 20:32:33 +0000 (15:32 -0500)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/templates/staff/css/style.css.tt2
Open-ILS/src/templates/staff/share/t_autogrid.tt2
Open-ILS/src/templates/staff/share/t_grid_columns.tt2 [new file with mode: 0644]
Open-ILS/web/js/ui/default/staff/services/grid.js

index 74cf439..b20f720 100644 (file)
@@ -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;
 }
index e8f94d7..e8861a1 100644 (file)
           [% l('Print Full Grid') %]
         </a></li>
         <li role="presentation" class="divider"></li>
+        <li>
+          <a href ng-click="showColumnDialog()">
+            <span class="glyphicon glyphicon-print"></span>
+            [% l('Configure Column Visibility') %]
+          </a>
+        </li>
+        <li role="presentation" class="divider"></li>
         <li ng-repeat="col in columns">
           <a href title="{{col.idlclass}}" ng-click="toggleColumnVisibility(col)">
               <span ng-if="col.visible" 
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..3e355b4
--- /dev/null
@@ -0,0 +1,23 @@
+<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 Column Picker') %]</h4> 
+  </div>
+  <div class="modal-body eg-grid-columns-modal-body">
+    <div class="row grid-header-row">
+      <div class="col-md-1">[% l('Visible') %]</div>
+      <div class="col-md-4">[% l('Column Name') %]</div>
+    </div>
+    <div class="row" ng-repeat="col in columns" ng-class="{visible : col.visible}">
+      <div class="col-md-1">
+        <input type='checkbox' ng-model="col.visible"/>
+      </div>
+      <div class="col-md-4" title="{{col.idlclass}}">{{col.label}}</div>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <input type="submit" class="btn btn-primary" 
+      ng-click="ok()" value="[% l('Close') %]"/>
+  </div>
+</div>
index fab8679..b4e2c1e 100644 (file)
@@ -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,28 @@ angular.module('egGridMod',
                 });
             }
 
+            $scope.showColumnDialog = function() {
+                return $uibModal.open({
+                    templateUrl: './share/t_grid_columns',
+                    backdrop: 'static',
+                    controller: ['$scope', '$uibModalInstance',
+                        function($dialogScope, $uibModalInstance) {
+                            // Passing the columns object directly into
+                            // the dialog means any changes are applied
+                            // directly to the column configs.  If we need
+                            // to support a "cancel" option, where applied 
+                            // changes are ignored, then angular.copy()
+                            // the columns into the dialog then pull the
+                            // values back out when saved.
+                            $dialogScope.columns = $scope.columns;
+                            $dialogScope.ok = function() {
+                                $uibModalInstance.close()
+                            }
+                        }
+                    ]
+                });
+            },
+
             // generates CSV for the currently visible grid contents
             grid.generateCSV = function() {
                 return grid.getAllItemsAsText().then(function(text_items) {