web staff autogrid

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

diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
index 4091ab4..0e575c2 100644 (file)
--- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
@@ -21,7 +21,6 @@
 
   .eg-grid-header-row { 
     font-weight: bold; 
-    border-top: 1px solid #ccc;
   }
 
   .eg-grid-header-row > .eg-grid-cell {
@@ -35,6 +34,9 @@
   }
 
   /* in config display, make cells more obvious */
+  .eg-grid-as-conf .eg-grid-row {
+    border: 1px solid #777;
+  }
   .eg-grid-as-conf .eg-grid-cell {
     border-right: 1px solid #777;
   }
@@ -53,19 +55,22 @@
     width:95%;
     text-align:center;
   }
+
   .eg-grid-conf-cell-entry:not(:first-child) {
     border-top:1px solid #ccc;
   }
 
-</style>
+  .eg-grid-conf-row {
+    background-color: #dff0d8;
+    border-color: #d6e9c6;
+  }
 
-<div ng-if="showGridConf">
-  <!-- when the grid conf row is visible, give all cells a 
-      border so that vertical alignment is easier to visualize 
-      TODO: move this into an .eg-grid-cell-bordered class and
-      apply use ng-class on each cell instead -->
-  <style>.eg-grid-cell {border-right: 1px solid #888}</style>
-</div>
+  .eg-grid-conf-row:first-child {
+    /* alignment fix; account for one missing border */
+    padding-right: 1px;
+  }
+
+</style>
 
 <div class="eg-grid" ng-class="{'eg-grid-as-conf' : showGridConf}">
   <!-- import embedded eg-grid-field defs via no-op transclude -->
@@ -84,7 +89,7 @@
     </div>
     <div class="eg-grid-cell"
         ng-repeat="column in list.allColumns"
-        style="flex:{{column.flexWidth}}"
+        style="flex:{{column.flex}}"
         ng-show="list.displayColumns[column.name]">
       <a href="javascript:;" ng-click="sortOn(column.name)">{{column.label}}</a>
     </div>
@@ -92,7 +97,7 @@
 
   <!-- ====================== -->
   <!-- grid configuration row -->
-  <div class="eg-grid-row" ng-show="showGridConf">
+  <div class="eg-grid-row eg-grid-conf-row" ng-show="showGridConf">
     <div class="eg-grid-cell eg-grid-cell-2">
       <div class="eg-grid-conf-cell-entry">[% l('Wider') %]</div>
       <div class="eg-grid-conf-cell-entry">[% l('Narrower') %]</div>
@@ -100,17 +105,17 @@
     </div>
     <div class="eg-grid-cell"
       ng-repeat="column in list.allColumns"
-      style="flex:{{column.flexWidth}}"
+      style="flex:{{column.flex}}"
       ng-show="list.displayColumns[column.name]">
       <div class="eg-grid-conf-cell-entry">
         <a href="" title="[% l('Make column wider') %]"
-          ng-click="column.flexWidth = column.flexWidth + 1">
+          ng-click="modifyColumnFlex(column,1)">
           <span class="glyphicon glyphicon-fast-forward"></span>
         </a>
       </div>
       <div class="eg-grid-conf-cell-entry">
         <a href="" title="[% l('Make column narrower') %]"
-          ng-click="column.flexWidth = column.flexWidth - 1">
+          ng-click="modifyColumnFlex(column,-1)">
           <span class="glyphicon glyphicon-fast-backward"></span>
         </a>
       </div>
@@ -139,7 +144,7 @@
     <div class="eg-grid-cell"
         ng-click="handleRowClick($event, item)"
         ng-repeat="column in list.allColumns"
-        style="flex:{{column.flexWidth}}"
+        style="flex:{{column.flex}}"
         ng-show="list.displayColumns[column.name]">
       {{list.fieldValue(item, column.name) | egGridvalueFilter:column}}
     </div>

diff --git a/Open-ILS/src/templates/staff/test/t_autogrid.tt2 b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
index 1a8aa84..a7546e3 100644 (file)
--- a/Open-ILS/src/templates/staff/test/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
@@ -11,19 +11,19 @@
     eg-grid-field's require closing tags; not sure why 
     you can also do <div eg-grid-tag attrs..></div>
   -->
-  <eg-grid-field name="shortname" label="[% l('Shortname Manual Label') %]"></eg-grid-field>
-  <eg-grid-field name="name"></eg-grid-field>
+  <eg-grid-field name="shortname" label="[% l('Shortname') %]"></eg-grid-field>
+  <eg-grid-field name="name" flex="5"></eg-grid-field>
   <eg-grid-field name="id"></eg-grid-field>
   <eg-grid-field name="depth" path="ou_type.depth"></eg-grid-field>
-  <eg-grid-field name="billing_addr" path="billing_address.street1"></eg-grid-field>
+  <eg-grid-field name="billing_addr" flex="3"path="billing_address.street1"></eg-grid-field>
   <eg-grid-field name="opac_visible"></eg-grid-field>
   <eg-grid-field name="phone"></eg-grid-field>
   <eg-grid-field name="email"></eg-grid-field>
-  <eg-grid-field name="type" path="ou_type.name"></eg-grid-field>
+  <eg-grid-field name="type" path="ou_type.name" flex="3"></eg-grid-field>
   <eg-grid-field name="can_have_vols" path="ou_type.can_have_vols"></eg-grid-field>
   <eg-grid-field name="can_have_users" path="ou_type.can_have_users"></eg-grid-field>
   <eg-grid-field name="parent_ou_id" path="parent_ou.id"></eg-grid-field>
-  <eg-grid-field name="parent_ou_name" path="parent_ou.name" label="[% l('Parent Org') %]"></eg-grid-field>
+  <eg-grid-field name="parent_ou_name" path="parent_ou.name" flex="5" label="[% l('Parent Org') %]"></eg-grid-field>
   <eg-grid-field name="parent_ou_depth" path="parent_ou.ou_type.depth" label="[% l('Parent Depth') %]"></eg-grid-field>
   <eg-grid-field name="parent_ou_shortname" path="parent_ou.shortname" label="[% l('Parent SN') %]"></eg-grid-field>
 </eg-grid>

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 36d4b97..e7f74bd 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/autogrid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/autogrid.js
@@ -97,6 +97,13 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap'
                 });
             },
 
+            $scope.modifyColumnFlex = function(column, val) {
+                column.flex += val;
+                // prevent flex:0;  use hiding instead
+                if (column.flex < 1)
+                    column.flex = 1;
+            }
+
             $scope.toggleGridConf = function() {
                 if ($scope.showGridConf) {
                     $scope.showGridConf = false;
@@ -120,13 +127,13 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap'
                     name : fieldSpec.name,
                     label : fieldSpec.label,
                     path : fieldSpec.path,
+                    flex : fieldSpec.flex,
                     datatype : fieldSpec.datatype,
                     display : (fieldSpec.display !== false)
                 };
                 if (!field.path) field.path = field.name;
                 field = self.absorbField(field);
                 $scope.list.addColumn(field);
-                field.flexWidth = 2; // TODO:
             }
 
             /**
@@ -215,6 +222,7 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap'
                     name : field.name,
                     label : field.label,
                     path : field.path || field.name,
+                    flex : field.flex || 2,
                     display : (field.display === false) ? false : true
                 };
 
@@ -318,7 +326,7 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap'
         require : '^egGrid',
         restrict : 'AE',
         transclude : true,
-        scope : {name : '@', path : '@', label : '@'},
+        scope : {name : '@', path : '@', label : '@', flex : '@'},
         template : '<div></div>', // NOOP template
         link : function(scope, element, attrs, egGridCtrl) {
             egGridCtrl.addColumn(scope);