web staff: autogrid experiments

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 981723d..8e871bf 100644 (file)
--- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
@@ -5,8 +5,16 @@
   .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-column { overflow: hidden }
+
+
+  /* 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);
+    color: rgb(51, 51, 51);
+  }
 </style>
 
 <div class="container-fluid eg-grid" ng-class="{'eg-grid-scroll' : isScroll}">
@@ -26,53 +34,39 @@
   <!-- 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>
       <div class="col-md-6">
-        <input type='checkbox'/>
+        <a href='javascript:;'                                             
+          ng-click="dataList.toggleSelectAll()">&#x2713;</a>    
       </div>
-      <div class="col-md-6">#</div>
     </div>
-    <div ng-repeat="columnGroup in dataList.groupedColumns">
-      <div class="col-md-1 eg-grid-header-cell">
-        <div ng-repeat="column in columnGroup">
-          <div class="eg-grid-content-column" 
-                ng-class="{'col-md-6' : columnGroup.length > 1}">
-              <a href="javascript:;" 
-                ng-click="sortOn(column.name)">{{column.label}}</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>
 
   <!-- data rows -->
   <div class="row eg-grid-content-row" 
-    ng-repeat="item in dataList.items">
+    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">
-        <input type='checkbox'/>
+        <span ng-if="itemIsSelected(item)">&#x2713;</span>
       </div>
-      <div class="col-md-6">{{$index + 1}}</div>
     </div>
-    <div ng-repeat="columnGroup in dataList.groupedColumns">
-      <div class="col-md-1 eg-grid-header-cell">
-        <div ng-repeat="column in columnGroup">
-          <div class="eg-grid-content-column" 
-                ng-class="{'col-md-6' : columnGroup.length > 1}">
-            {{dataList.fieldValue(item, column.name) | egGridvalueFilter:column}}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!--
-    <div class="col-md-1 eg-grid-content-cell" 
-          ng-repeat="column in dataList.allColumns"
-          ng-show="dataList.displayColumns[column.name]">
-      <div ng-class="{'col-md-6' : column.shared}">
-        {{dataList.fieldValue(item, column.name) | egGridvalueFilter:column}}
+    <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>
 

diff --git a/Open-ILS/src/templates/staff/test/t_autogrid.tt2 b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
index 7355272..92d4844 100644 (file)
--- a/Open-ILS/src/templates/staff/test/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
@@ -3,7 +3,8 @@
 <eg-grid 
   idl-class="aou"
   sort="testGridSort"
-  query="testGridQuery">
+  query="testGridQuery"
+  id-field="id">
   <!-- 
     eg-grid-field's require closing tags; not sure why 
     you can also do <div eg-grid-tag attrs..></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 54a69b8..74cfe81 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/autogrid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/autogrid.js
@@ -24,7 +24,13 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
 
             // if true, use the scroll CSS to force a vertical height 
             // and scroll bar
-            isScroll : '='
+            isScroll : '=',
+
+            // field whose value is unique and may be used for item
+            // reference / lookup.  This will usually be someting like
+            // "id".  This is not needed when using autoFields, since
+            // we can determine the primary key directly from the IDL.
+            idField : '@'
         },
 
         link : function(scope, element, attrs) {     
@@ -39,9 +45,10 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
         controller : function($scope, $timeout, egIDL, egAuth, egNet, egList) { // TODO: reqs list
             var self = this;
 
-            // if we stick w/ Bootstrap grids for display, we're 
-            // limited to 12 visible columns at a time.
-            //this.maxFieldCount = 12; 
+            // If we stick w/ Bootstrap grids for display, we're 
+            // limited to (currently) 12 visible columns at a time.
+            // One of those is occupied by the shared ow count / 
+            // selector column
             this.maxFieldCount = 11; 
 
             $scope.dataList = egList.create();
@@ -65,12 +72,10 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
              */
             this.addColumn = function(fieldSpec) {
 
-                /*
                 if (Object.keys($scope.dataList.displayColumns).length
                         >= self.maxFieldCount) {
                     fieldSpec.display = false;
                 }
-                */
 
                 var field = {
                     name : fieldSpec.name,
@@ -92,6 +97,9 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
             this.compileAutoFields = function() {
                 if ($scope.dataList.allColumns.length) return;
 
+                $scope.idField = $scope.idField || 
+                    egIDL.classes[$scope.idlClass].pkey;
+
                 angular.forEach(
                     egIDL.classes[$scope.idlClass].fields.sort(
                         function(a, b) { return a.name < b.name ? -1 : 1 }),
@@ -194,24 +202,6 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
                 return new_field;
             }
 
-            // EXPERIMENT
-            this.applyColumnLayout = function() {
-                var cols = $scope.dataList.allColumns;
-                var overflow = 2 * (cols.length - this.maxFieldCount);
-                var groupedColumns = [];
-
-                current_bunch = [];
-                angular.forEach(cols, function(col, idx) {
-                    current_bunch.push(col);
-                    if (idx < overflow - 1 || current_bunch.length > 1) {
-                        groupedColumns.push(current_bunch);
-                        current_bunch = [];
-                    }
-                });
-
-                $scope.dataList.groupedColumns = groupedColumns;
-            }
-
             /**
              * For stock grids, makes a flattened_search call to retrieve
              * the requested values.
@@ -219,7 +209,6 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
              */
             $scope.fetchData = function() {
                 $scope.dataList.resetPageData();
-                self.applyColumnLayout();
 
                 if (self.dataFetcher) 
                     return self.dataFetcher();
@@ -237,6 +226,8 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
                 if ($scope.autoFields)
                     self.compileAutoFields();
 
+                $scope.dataList.indexField = $scope.idField;
+
                 var queryFields = {}
                 angular.forEach($scope.dataList.allColumns, function(field) {
                     if ($scope.dataList.displayColumns[field.name])
@@ -256,6 +247,21 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
                     $scope.dataList.items.push(item);
                 });
             }
+
+            $scope.applyRowSelection = function($event, item) {
+                var index = $scope.dataList.indexValue(item);
+                if ($event.ctrlKey || $event.metaKey /* mac command */) {
+                    $scope.dataList.toggleOneSelection(index);
+                } else {
+                    $scope.dataList.selectOne(index);
+                }
+            }
+
+            $scope.itemIsSelected = function(item) {
+                return $scope.dataList.selected[
+                    $scope.dataList.indexValue(item)
+                ];
+            }
         }
     };
 })