From fb668ab8144c5560f1940f61d173155968a78444 Mon Sep 17 00:00:00 2001
From: Bill Erickson <berick@esilibrary.com>
Date: Thu, 13 Mar 2014 10:07:12 -0400
Subject: [PATCH] web staff: autogrid experiments

Signed-off-by: Bill Erickson <berick@esilibrary.com>
---
 Open-ILS/src/templates/staff/parts/t_autogrid.tt2  | 57 ++++++++++++++++++----
 Open-ILS/src/templates/staff/t_base.tt2            |  5 +-
 Open-ILS/src/templates/staff/test/t_autogrid.tt2   | 16 +++++-
 .../web/js/ui/default/staff/services/autogrid.js   | 40 +++++++++++----
 4 files changed, 96 insertions(+), 22 deletions(-)

diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
index 8a781b3ab5..981723de13 100644
--- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2
@@ -6,10 +6,15 @@
   .eg-grid-header-row { font-weight: bold; }
   .eg-grid div.row {border-bottom: 2px solid #ddd}
   .eg-grid-content-row:nth-child(even) {background-color: rgb(248, 248, 248);}
-  .col-md-1 { overflow: hidden }
+  .eg-grid-content-column { overflow: hidden }
 </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">
@@ -17,23 +22,57 @@
       </div>
     </div>
   </div>
-  <!-- import any embedded eg-grid-field defs via no-op transclude -->
-  <div ng-transclude></div>
+
+  <!-- column header -->
   <div class="row eg-grid-header-row">
-    <div class="col-md-1 eg-grid-header-cell" 
-        ng-repeat="column in dataList.allColumns"
-        ng-show="dataList.displayColumns[column.name]">
-        <a href="javascript:;" 
-          ng-click="sortOn(column.name)">{{column.label}}</a>
+    <div class="col-md-1 eg-grid-header-cell">
+      <div class="col-md-6">
+        <input type='checkbox'/>
+      </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>
     </div>
   </div>
+
+  <!-- data rows -->
   <div class="row eg-grid-content-row" 
     ng-repeat="item in dataList.items">
+    <div class="col-md-1 eg-grid-content-cell">
+      <div class="col-md-6">
+        <input type='checkbox'/>
+      </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]">
-      {{dataList.fieldValue(item, column.name) | egGridvalueFilter:column}}
+      <div ng-class="{'col-md-6' : column.shared}">
+        {{dataList.fieldValue(item, column.name) | egGridvalueFilter:column}}
+      </div>
     </div>
+    -->
   </div>
 </div>
 
diff --git a/Open-ILS/src/templates/staff/t_base.tt2 b/Open-ILS/src/templates/staff/t_base.tt2
index 6009417ae2..67ff9b78b3 100644
--- a/Open-ILS/src/templates/staff/t_base.tt2
+++ b/Open-ILS/src/templates/staff/t_base.tt2
@@ -8,7 +8,10 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- TODO: remote hosted CSS should be hosted locally instead -->
-    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
+    <!--
+    <link rel="stylesheet" href="/bootstrap-custom/css/bootstrap.min.css" />
+    -->
     <link rel="stylesheet" href="[% ctx.base_path %]/staff/css/style.css" />
   </head>
   <body>
diff --git a/Open-ILS/src/templates/staff/test/t_autogrid.tt2 b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
index 946e2bb0e0..7355272003 100644
--- a/Open-ILS/src/templates/staff/test/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/test/t_autogrid.tt2
@@ -11,11 +11,22 @@
   <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="id"></eg-grid-field>
-  <eg-grid-field name="depth"  path="ou_type.depth"></eg-grid-field>
-  <eg-grid-field name="parent_ou_id"  path="parent_ou.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="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="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_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>
 
+<!--
+
 <h1>AutoGrid w/ Auto Fields</h1>
 
 <eg-grid
@@ -26,3 +37,4 @@
   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 4632c4ed6d..54a69b80f0 100644
--- a/Open-ILS/web/js/ui/default/staff/services/autogrid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/autogrid.js
@@ -41,7 +41,8 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
 
             // if we stick w/ Bootstrap grids for display, we're 
             // limited to 12 visible columns at a time.
-            this.maxFieldCount = 12; 
+            //this.maxFieldCount = 12; 
+            this.maxFieldCount = 11; 
 
             $scope.dataList = egList.create();
 
@@ -63,12 +64,20 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
              * an IDL field via compileAutoFields.
              */
             this.addColumn = function(fieldSpec) {
+
+                /*
+                if (Object.keys($scope.dataList.displayColumns).length
+                        >= self.maxFieldCount) {
+                    fieldSpec.display = false;
+                }
+                */
+
                 var field = {
                     name : fieldSpec.name,
                     label : fieldSpec.label,
                     path : fieldSpec.path,
                     datatype : fieldSpec.datatype,
-                    display : (fieldSpec.display === false) ? false : true
+                    display : (fieldSpec.display !== false)
                 };
                 if (!field.path) field.path = field.name;
                 field = self.absorbField(field);
@@ -101,14 +110,6 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
                                 }
                             }
                         }
-
-                        // once we exceeed the number of display fields,
-                        // the others are added as hidden fields, accessible
-                        // via the column picker.
-                        if ($scope.dataList.allColumns.length >= self.maxFieldCount) {
-                            console.log('setting to false ' + field.name);
-                            field.display = false;
-                        }
                         self.addColumn(field);
                     }
                 );
@@ -193,6 +194,24 @@ 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.
@@ -200,6 +219,7 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod'])
              */
             $scope.fetchData = function() {
                 $scope.dataList.resetPageData();
+                self.applyColumnLayout();
 
                 if (self.dataFetcher) 
                     return self.dataFetcher();
-- 
2.11.0