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 70ea9ae..f0c09af 100644 (file)
--- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
@@ -4,11 +4,18 @@
   .eg-grid-header-row { font-weight: bold; }
   .eg-grid div.row {padding: 3px; border-right: 2px solid rgb(248, 248, 248);}
   .eg-grid div.row:nth-child(odd) {background-color: rgb(248, 248, 248);}
+  .eg-grid div[class*="col-"] {border-right: 1px solid rgb(248, 248, 248);}
 </style>
 
 <div class="container-fluid eg-grid">
-  <!-- absorb the grid header -->
-  <div class="row eg-grid-header-row" ng-transclude></div>
+  <!-- import any embedded eg-grid-field defs via no-op transclude -->
+  <div ng-transclude></div>
+  <div class="row eg-grid-header-row">
+    <div class="col-md-1" ng-repeat="column in dataList.allColumns"
+      ng-show="dataList.displayColumns[column.name]">
+      {{column.label}}
+    </div>
+  </div>
   <div class="row eg-grid-content-row" ng-repeat="item in dataList.items">
     <div class="col-md-1" ng-repeat="field in dataList.allColumns">
         {{dataList.fieldValue(item, field.name)}}

diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid_field.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid_field.tt2
deleted file mode 100644 (file)
index 4dc5b9d..0000000
--- a/Open-ILS/src/templates/staff/parts/t_autogrid_field.tt2
+++ /dev/null
@@ -1 +0,0 @@
-<div class="col-md-1" ng-show="dataList.displayColumns[column.name]">{{column.label}}</div>

diff --git a/Open-ILS/src/templates/staff/test/t_autogrid.tt2 b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
index 2b0d102..12729b2 100644 (file)
--- a/Open-ILS/src/templates/staff/test/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
@@ -1,14 +1,18 @@
 
 <h1>AutoGrid Test</h1>
-<div eg-grid 
+<div 
+  eg-grid 
   idl-class="aou"
   sort="testGridSort"
   query="testGridQuery"
+  auto-fields="true"
   >
+  <!--
   <div eg-grid-field name="shortname" label="[% l('Shortname Manual Label') %]"></div>
   <div eg-grid-field name="name"></div>
   <div eg-grid-field name="id"></div>
   <div eg-grid-field name="depth"  path="ou_type.depth"></div>
   <div eg-grid-field name="parent_ou_id"  path="parent_ou.id"></div>
   <div eg-grid-field name="parent_ou_name" path="parent_ou.name" label="[% l('Parent Org') %]"></div>
+  -->
 </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 cee91ca..2613424 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/autogrid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/autogrid.js
@@ -8,11 +8,17 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod'])
         scope : {
             idlClass : '@',
             query : '=',
-            sort : '=',
+            sort : '@',
+            autoFields : '='
         },
         templateUrl : '/eg/staff/parts/t_autogrid', // TODO: abs url
         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; 
+
             $scope.dataList = egList.create();
 
             this.addField = function(fieldScope) {
@@ -20,11 +26,43 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod'])
                     name : fieldScope.name,
                     label : fieldScope.label,
                     path : fieldScope.path,
-                    display : true
+                    display : (fieldScope === false) ? false : true
                 };
                 self.applyFieldLabel(field);
                 $scope.dataList.addColumn(field);
-                return {dataList : $scope.dataList, column : field};
+            }
+
+            /**
+             * Caller wants to display all fields for the selected IDL class
+             * Find the fields and, when a field is a link, fetch the label
+             * from the "selector" field as well.
+             */
+            this.compileAutoFields = function() {
+                if ($scope.dataList.allColumns.length) return;
+
+                angular.forEach(
+                    egIDL.classes[$scope.idlClass].fields.sort(
+                        function(a, b) { return a.name < b.name ? -1 : 1 }),
+                    function(field) {
+                        if (field.virtual) return;
+                        if (field.datatype == 'link' || field.datatype == 'org_unit') {
+                            // if the field is a link and the linked class has a
+                            // "selector" field specified, use the selector field
+                            // as the display field for the grid.
+                            // flattener will take care of the fleshing.
+                            if (field['class']) {
+                                var selectorField = egIDL.classes[field['class']].fields
+                                    .filter(function(f) { return Boolean(f.selector) })[0];
+                                if (selectorField) {
+                                    field.path = field.name + '.' + selectorField.selector;
+                                }
+                            }
+                        }
+                        if ($scope.dataList.allColumns.length >= self.maxFieldCount) 
+                            field.display = false;
+                        self.addField(field);
+                    }
+                );
             }
 
             this.applyFieldLabel = function(field) {
@@ -78,6 +116,9 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod'])
                     return;
                 }
 
+                if ($scope.autoFields)
+                    self.compileAutoFields();
+
                 var queryFields = {}
                 angular.forEach($scope.dataList.allColumns, function(field) {
                     if ($scope.dataList.displayColumns[field.name])
@@ -104,7 +145,7 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod'])
             // have been processed.  There has to be a better way...
             readycheck = 0;
             this.checkReadyForDraw = function() {
-                if ($scope.dataList.allColumns.length) {
+                if ($scope.autoFields || $scope.dataList.allColumns.length) {
                     self.fetchData();
                 } else {
                     if (++readycheck > 10000) return; // failsafe, no fields defined
@@ -117,26 +158,20 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod'])
     };
 })
 
+/**
+ * eg-grid-field : used for collecting custom field data from the templates.
+ * This directive does not direct display, it just passes data up to the 
+ * parent grid.
+ */
 .directive('egGridField', function() {
     return {
         require : '^egGrid',
         restrict : 'A',
         transclude : true,
-        scope : {
-            name : '@',
-            path : '@',
-            label : '@'
-        },
-        templateUrl : '/eg/staff/parts/t_autogrid_field',
-
-        // pass field info from the UI into the grid.  The grid stores
-        // the field data within its dataList and returns a link to the
-        // dataList.  From there, our visibility, etc. is based on the 
-        // dispostion of the dataList.
+        scope : {name : '@', path : '@', label : '@'},
+        template : '<div></div>', // NOOP template
         link : function(scope, element, attrs, egGridCtrl) {
-            var ctx = egGridCtrl.addField(scope);
-            scope.dataList = ctx.dataList;
-            scope.column = ctx.column;
+            egGridCtrl.addField(scope);
         }
     };
 });