LP#1746824 - WebStaff egGrid styling

This allows egGrid to receive CSS selector strings via egGridField
declarations in templates, or else auto-generates them based on the
path of the field. Also, sets the DOM id of the grid to its declared
persistKey, unless an id is explicitly given.

Signed-off by: Cesar Velez <cesar.velez@equinoxinitiative.org>
Signed-off-by: Mike Rylander <mrylander@gmail.com>

diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
index c6b45d9..605d3f1 100644 (file)
--- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2
+++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2
@@ -310,6 +310,7 @@
           ng-click="handleRowClick($event, item)"
           ng-dblclick="gridControls.activateItem(item)"
           ng-repeat="col in columns"
+          ng-class="col.cssSelector"
           style="text-align:{{col.align}}; flex:{{col.flex}}"
           ng-show="col.visible">
 

diff --git a/Open-ILS/web/js/ui/default/staff/services/grid.js b/Open-ILS/web/js/ui/default/staff/services/grid.js
index 17fc743..eb23385 100644 (file)
--- a/Open-ILS/web/js/ui/default/staff/services/grid.js
+++ b/Open-ILS/web/js/ui/default/staff/services/grid.js
@@ -111,6 +111,11 @@ angular.module('egGridMod',
             scope.collect();
 
             scope.grid_element = element;
+
+            if(!attrs.id){
+                $(element).attr('id', attrs.persistKey);
+            }
+
             $(element)
                 .find('.eg-grid-content-body')
                 .bind('contextmenu', scope.showActionContextMenu);
@@ -1263,7 +1268,11 @@ angular.module('egGridMod',
             // optional: for non-IDL columns, specifying a datatype
             // lets the caller control which display filter is used.
             // datatype should match the standard IDL datatypes.
-            datatype : '@'
+            datatype : '@',
+
+            // optional: CSS class name that we want to have for this field.
+            // Auto generated from path if nothing is passed in via eg-grid-field declaration
+            cssSelector : "@"
         },
         link : function(scope, element, attrs, egGridCtrl) {
 
@@ -1284,6 +1293,16 @@ angular.module('egGridMod',
                 }
             );
 
+            scope.cssSelector = attrs['cssSelector'] ? attrs['cssSelector'] : "";
+
+            // auto-generate CSS selector name for field if none declared in tt2 and there's a path
+            if (scope.path && !scope.cssSelector){
+                var cssClass = 'grid' + "." + scope.path;
+                cssClass = cssClass.replace(/\./g,'-');
+                element.addClass(cssClass);
+                scope.cssSelector = cssClass;
+            }
+
             // any HTML content within the field is its custom template
             var tmpl = element.html();
             if (tmpl && !tmpl.match(/^\s*$/))
@@ -1548,7 +1567,8 @@ angular.module('egGridMod',
                 datecontext      : colSpec.datecontext,
                 datefilter      : colSpec.datefilter,
                 dateonlyinterval : colSpec.dateonlyinterval,
-                parentIdlClass   : colSpec.parentIdlClass
+                parentIdlClass   : colSpec.parentIdlClass,
+                cssSelector      : colSpec.cssSelector
             };
         }