From: Bill Erickson <berick@esilibrary.com>
Date: Sat, 22 Mar 2014 18:23:00 +0000 (-0400)
Subject: web staff autogrid; conf stuff
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=1f26b33ccb76a7349ad34c90c14f79db73f83c13;p=working%2FEvergreen.git

web staff autogrid; conf stuff

Signed-off-by: Bill Erickson <berick@esilibrary.com>
---

diff --git a/Open-ILS/src/templates/staff/parts/column_picker.tt2 b/Open-ILS/src/templates/staff/parts/column_picker.tt2
index c690de689d..4359284e52 100644
--- a/Open-ILS/src/templates/staff/parts/column_picker.tt2
+++ b/Open-ILS/src/templates/staff/parts/column_picker.tt2
@@ -14,6 +14,12 @@ dropdowns, etc. to the btn-group
     data-toggle="dropdown"> <span class="caret"></span>
   </button>
   <ul class="dropdown-menu pull-right">
+    <li><a href='' ng-click="showGridConf = !showGridConf">
+          <span class="glyphicon glyphicon-wrench"></span>
+          [% l('Configure Columns') %]
+      </a>
+    </li>
+    <li role="presentation" class="divider"></li>
     <li ng-repeat="col in [% listname %].allColumns">
       <a href='' ng-click="[% listname %].displayColumns[col.name] = 
           ![% listname %].displayColumns[col.name]">
@@ -35,9 +41,11 @@ dropdowns, etc. to the btn-group
         [% l('Hide All Columns') %]
       </a>
     </li>
+    <!--
     <li class='disabled'>
       <a href='' ng-click="">[% l('Save Columns') %]</a>
     </li>
+    -->
   </ul>
 </div>
 
diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
index 1c6a9253de..2b9a72b09f 100644
--- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
@@ -1,118 +1,34 @@
-
 <style>
   /* TODO: move me */
-/*
+  .eg-grid > div:nth-child(odd) {background-color: rgb(248, 248, 248);}
   .eg-grid-scroll {overflow-y:scroll; height: 600px}
-  .eg-grid-scroll > .row { margin-left: 0; margin-right: 0; }
-  .eg-grid-header-row { font-weight: bold; }
-  .eg-grid div.row {border-bottom: 2px solid #ddd}
-  .eg-grid-header-cell, .eg-grid-content-cell { overflow: hidden }
-  .eg-grid-content-row:nth-child(even) {background-color: rgb(248, 248, 248);}
 
-  .eg-grid-content-row.selected {
-    border: 1px solid rgb(86,61,124,2);
-    background-color: rgb(86,61,124,15);
-    color: rgb(51, 51, 51);
+  .eg-grid-header-row { font-weight: bold; }
+  .eg-grid-row {
+    display: flex;
+    width: 100%;
   }
-*/
-</style>
-
-<!--
-<div class="container-fluid eg-grid" ng-class="{'eg-grid-scroll' : isScroll}">
-
-  <div ng-transclude></div>
-
-  <div class="row eg-grid-action-row">
-    <div class="col-md-1 col-md-offset-11 text-right">
-      <div class="btn-group text-left">
-        [% INCLUDE 'staff/parts/column_picker.tt2' listname='dataList' %]
-      </div>
-    </div>
-  </div>
-
-  <div class="row eg-grid-header-row">
-    <div class="col-md-1 eg-grid-header-cell">
-      <div class="col-md-6">[% l('#') %]</div>
-      <div class="col-md-6">
-        <a href='javascript:;'                                             
-          ng-click="dataList.toggleSelectAll()">&#x2713;</a>    
-      </div>
-    </div>
-    <div ng-repeat="column in dataList.allColumns">
-      <div ng-show="dataList.displayColumns[column.name]"
-            class="col-md-1 eg-grid-header-cell">
-        <a href="javascript:;" 
-          ng-click="sortOn(column.name)">{{column.label}}</a>
-      </div>
-    </div>
-  </div>
-
-  <div class="row eg-grid-content-row" 
-    ng-repeat="item in dataList.items"
-    ng-click="applyRowSelection($event, item)"
-    ng-class="{'selected' : itemIsSelected(item)}">
-
-    <div class="col-md-1 eg-grid-content-cell">
-      <div class="col-md-6">{{$index + 1 + dataList.pageOffset}}</div>
-      <div class="col-md-6">
-        <span ng-if="itemIsSelected(item)">&#x2713;</span>
-      </div>
-    </div>
-    <div ng-repeat="column in dataList.allColumns">
-      <div class="col-md-1 eg-grid-content-cell"
-        ng-show="dataList.displayColumns[column.name]">
-          {{dataList.fieldValue(item, column.name) | egGridvalueFilter:column}}
-      </div>
-    </div>
-  </div>
-</div>
--->
-
-<style>
-    .eg-grid {
-      /*display: inline-flex;*/
-      display: flex;
-      width: 100%;
-    }
-    .eg-grid-action-row {
-      display:flex;
-      justify-content:flex-end;
-      width:100%;
-    }
-    .eg-grid-cell {
-      border: 1px solid #ccc;
-      padding: 2px;
-      overflow: hidden;
-    }
-    .eg-grid-cell-1 {
-      flex: 1;
-    }
-    .eg-grid-cell-2 {
-      flex: 2;
-    }
-  /*
-  .eg-grid-row-selected {
-    border: 1px solid rgb(86,61,124,2);
-    background-color: rgb(86,61,124,15);
-    color: rgb(51, 51, 51);
+  .eg-grid-action-row {
+    display:flex;
+    justify-content:flex-end;
+    width:100%;
+  }
+  .eg-grid-cell {
+    border: 1px solid #ccc;
+    padding: 2px;
+    overflow: hidden;
+  }
+  .eg-grid-cell-1 {
+    flex: 1;
   }
-  */
-
   .eg-grid-row-selected { 
     color: rgb(51, 51, 51);
     background-color: rgb(86,61,124,15);
     border: 1px solid rgb(86,61,124,2);
   }
-
-  .eg-grid-scroll {overflow-y:scroll; height: 600px}
-  /*.eg-grid-scroll > .row { margin-left: 0; margin-right: 0; }*/
-  .eg-grid-header-row { font-weight: bold; }
-  /*.eg-grid div.row {border-bottom: 2px solid #ddd}*/
-  .eg-grid-container > div:nth-child(even) {background-color: rgb(248, 248, 248);}
-
 </style>
 
-<div class="eg-grid-container">
+<div class="eg-grid">
   <!-- import embedded eg-grid-field defs via no-op transclude -->
   <div ng-transclude></div>
 
@@ -120,30 +36,61 @@
     [% INCLUDE 'staff/parts/column_picker.tt2' listname='dataList' %]
   </div>
 
-  <div class="eg-grid eg-grid-header-row">
+  <div class="eg-grid-row eg-grid-header-row">
     <div class="eg-grid-cell eg-grid-cell-1">[% l('#') %]</div>
     <div class="eg-grid-cell eg-grid-cell-1">
-        <a href='javascript:;'                                             
-          ng-click="dataList.toggleSelectAll()">&#x2713;</a>    
+      <input type='checkbox' ng-click="dataList.toggleSelectAll()"/>
     </div>
-    <div class="eg-grid-cell eg-grid-cell-2" 
+    <div class="eg-grid-cell"
         ng-repeat="column in dataList.allColumns"
+        style="flex:{{column.flexWidth}}"
         ng-show="dataList.displayColumns[column.name]">
       <a href="javascript:;" ng-click="sortOn(column.name)">{{column.label}}</a>
     </div>
   </div>
-  <div class="eg-grid" 
+
+  <div class="eg-grid-row eg-grid-header-row" ng-show="showGridConf">
+    <div class="eg-grid-cell eg-grid-cell-1">
+    </div>
+    <div class="eg-grid-cell eg-grid-cell-1">
+    </div>
+    <div class="eg-grid-cell"
+      ng-repeat="column in dataList.allColumns"
+      style="flex:{{column.flexWidth}}"
+      ng-show="dataList.displayColumns[column.name]">
+      <div style="display:flex;background-color:#EEE;padding:5px;border-bottom:2px solid #ccc">
+        <div style="flex:1">
+          <a href="javascript:;" 
+            ng-click="column.flexWidth = column.flexWidth - 1">
+            <span class="glyphicon glyphicon-step-backward"></span>
+          </a>
+        </div>
+        <div style="flex:1">
+          <a href="javascript:;" 
+            ng-click="column.flexWidth = column.flexWidth + 1">
+            <span class="glyphicon glyphicon-step-forward"></span>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="eg-grid-row" 
       ng-repeat="item in dataList.items"
-      ng-click="handleRowClick($event, item)"
       ng-class="{'eg-grid-row-selected' : itemIsSelected(item)}">
-    <div class="eg-grid-cell eg-grid-cell-1">
+    <div class="eg-grid-cell eg-grid-cell-1" 
+      ng-click="handleRowClick($event, item)">
       {{$index + 1 + dataList.pageOffset}}
     </div>
     <div class="eg-grid-cell eg-grid-cell-1">
-        <span ng-if="itemIsSelected(item)">&#x2713;</span>
+      <!-- ng-click=handleRowClick here has unintended 
+           consequences and is unnecessary, avoid it -->
+      <input type='checkbox' ng-model="dataList.selected[dataList.indexValue(item)]"/>
     </div>
-    <div class="eg-grid-cell eg-grid-cell-2" 
+    <div class="eg-grid-cell"
+        ng-click="handleRowClick($event, item)"
         ng-repeat="column in dataList.allColumns"
+        style="flex:{{column.flexWidth}}"
         ng-show="dataList.displayColumns[column.name]">
       {{dataList.fieldValue(item, column.name) | egGridvalueFilter:column}}
     </div>
diff --git a/Open-ILS/web/js/ui/default/staff/services/autogrid.js b/Open-ILS/web/js/ui/default/staff/services/autogrid.js
index 532af6f8c9..356ac79948 100644
--- a/Open-ILS/web/js/ui/default/staff/services/autogrid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/autogrid.js
@@ -1,5 +1,5 @@
 
-angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
+angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap'])
 
 .directive('egGrid', function() {
     return {
@@ -42,7 +42,7 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
 
         templateUrl : '/eg/staff/parts/t_autogrid', // TODO: avoid abs url
 
-        controller : function($scope, $timeout, egIDL, egAuth, egNet, egList) { // TODO: reqs list
+        controller : function($scope, $timeout, $modal, egIDL, egAuth, egNet, egList) { // TODO: reqs list
             var self = this;
 
             // If we stick w/ Bootstrap grids for display, we're 
@@ -91,6 +91,7 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
                 if (!field.path) field.path = field.name;
                 field = self.absorbField(field);
                 $scope.dataList.addColumn(field);
+                field.flexWidth = 2; // TODO:
             }
 
             /**
@@ -266,6 +267,26 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
                     $scope.dataList.indexValue(item)
                 ];
             }
+
+            /*
+            $scope.openGridConfDialog = function() {
+                $modal.open({
+                    templateUrl: '/eg/staff/parts/t_autogrid_conf', // TODO: avoid abs url
+                    controller: [
+                        '$scope', '$modalInstance', 'dataList',
+                        function($scope, $modalInstance, dataList) {
+                        $scope.dataList = dataList;
+                        $scope.ok = function() {$modalInstance.close()}
+                        $scope.cancel = function() {$modalInstance.close()}
+                    }],
+                    resolve : {
+                        dataList : function() {
+                            return $scope.dataList;
+                        }
+                    }
+                }).result.then(function() {});
+            }
+            */
         }
     };
 })