web staff autogrid; flex stuff

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 8e871bf..1c6a925 100644 (file)
--- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
@@ -1,6 +1,7 @@
 
 <style>
   /* TODO: move me */
+/*
   .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; }
@@ -8,21 +9,19 @@
   .eg-grid-header-cell, .eg-grid-content-cell { overflow: hidden }
   .eg-grid-content-row:nth-child(even) {background-color: rgb(248, 248, 248);}
 
-
-  /* yanked from Bootstrap docs CSS */
   .eg-grid-content-row.selected {
-    border: 1px solid rgba(86,61,124,.2);
-    background-color: rgba(86,61,124,.15);
+    border: 1px solid rgb(86,61,124,2);
+    background-color: rgb(86,61,124,15);
     color: rgb(51, 51, 51);
   }
+*/
 </style>
 
+<!--
 <div class="container-fluid eg-grid" ng-class="{'eg-grid-scroll' : isScroll}">
 
-  <!-- import embedded eg-grid-field defs via no-op transclude -->
   <div ng-transclude></div>
 
-  <!-- row of actions (column picker, etc.) -->
   <div class="row eg-grid-action-row">
     <div class="col-md-1 col-md-offset-11 text-right">
       <div class="btn-group text-left">
@@ -31,7 +30,6 @@
     </div>
   </div>
 
-  <!-- column header -->
   <div class="row eg-grid-header-row">
     <div class="col-md-1 eg-grid-header-cell">
       <div class="col-md-6">[% l('#') %]</div>
@@ -49,7 +47,6 @@
     </div>
   </div>
 
-  <!-- data rows -->
   <div class="row eg-grid-content-row" 
     ng-repeat="item in dataList.items"
     ng-click="applyRowSelection($event, item)"
@@ -69,5 +66,87 @@
     </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-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">
+  <!-- import embedded eg-grid-field defs via no-op transclude -->
+  <div ng-transclude></div>
+
+  <div class="eg-grid-action-row">
+    [% INCLUDE 'staff/parts/column_picker.tt2' listname='dataList' %]
+  </div>
 
+  <div class="eg-grid 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>    
+    </div>
+    <div class="eg-grid-cell eg-grid-cell-2" 
+        ng-repeat="column in dataList.allColumns"
+        ng-show="dataList.displayColumns[column.name]">
+      <a href="javascript:;" ng-click="sortOn(column.name)">{{column.label}}</a>
+    </div>
+  </div>
+  <div class="eg-grid" 
+      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">
+      {{$index + 1 + dataList.pageOffset}}
+    </div>
+    <div class="eg-grid-cell eg-grid-cell-1">
+        <span ng-if="itemIsSelected(item)">&#x2713;</span>
+    </div>
+    <div class="eg-grid-cell eg-grid-cell-2" 
+        ng-repeat="column in dataList.allColumns"
+        ng-show="dataList.displayColumns[column.name]">
+      {{dataList.fieldValue(item, column.name) | egGridvalueFilter:column}}
+    </div>
+  </div>
+</div>
 

diff --git a/Open-ILS/src/templates/staff/test/t_autogrid.tt2 b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
index 92d4844..d4102ec 100644 (file)
--- a/Open-ILS/src/templates/staff/test/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
@@ -27,7 +27,6 @@
 </eg-grid>
 
 <!--
-
 <h1>AutoGrid w/ Auto Fields</h1>
 
 <eg-grid
@@ -37,5 +36,5 @@
   sort="testGridSort"
   query="testGridQuery"
   auto-fields="true"/>
-
 -->
+

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 74cfe81..532af6f 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/autogrid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/autogrid.js
@@ -49,7 +49,11 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
             // limited to (currently) 12 visible columns at a time.
             // One of those is occupied by the shared ow count / 
             // selector column
-            this.maxFieldCount = 11; 
+            this.maxFieldCount = 24; 
+
+            // TODO
+            this.limit = 20; 
+            this.ofset = 0;
 
             $scope.dataList = egList.create();
 
@@ -240,15 +244,15 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
                     egAuth.token(), $scope.idlClass, queryFields,
                     $scope.query,
                     {   sort : $scope.sort,
-                        limit : 20, // TODO
-                        offset : 0 // TODO
+                        limit : self.limit,
+                        offset : self.offset
                     }
                 ).then(null, null, function(item) {
                     $scope.dataList.items.push(item);
                 });
             }
 
-            $scope.applyRowSelection = function($event, item) {
+            $scope.handleRowClick = function($event, item) {
                 var index = $scope.dataList.indexValue(item);
                 if ($event.ctrlKey || $event.metaKey /* mac command */) {
                     $scope.dataList.toggleOneSelection(index);