From a1f356dc8f885f929880d8a58e7387118509ab98 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Mon, 24 Mar 2014 16:41:52 -0400 Subject: [PATCH] web staff autogrid Signed-off-by: Bill Erickson --- Open-ILS/src/templates/staff/css/style.css.tt2 | 107 ++++++++++++++ Open-ILS/src/templates/staff/parts/t_autogrid.tt2 | 159 ++++++++------------- Open-ILS/src/templates/staff/test/t_autogrid.tt2 | 5 +- .../web/js/ui/default/staff/services/autogrid.js | 17 ++- Open-ILS/web/js/ui/default/staff/services/list.js | 4 +- 5 files changed, 178 insertions(+), 114 deletions(-) diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index 0a48f53429..ed3eff84a2 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -86,3 +86,110 @@ table.list tr.selected td { .pad-horiz {padding : 0px 10px 0px 10px; } .pad-vert {padding : 20px 0px 10px 0px;} + +/* ---------------------------------------------------------------------- + * Grid + * ---------------------------------------------------------------------- */ + +/* odd/even row styling */ +.eg-grid-content-body > div:nth-child(odd):not(.eg-grid-row-selected) { + background-color: rgb(248, 248, 248); +} + +.eg-grid-row { + width: 100%; + display: flex; + border: 1px solid #ccc; +} + +.eg-grid-action-row { + border: none; + justify-content:flex-end; /* i.e. float right */ +} + +.eg-grid-header-row { + font-weight: bold; +} + +.eg-grid-header-row > .eg-grid-cell { + border-right: 1px solid #CCC; + text-align: center; + + /* vertically align header cell text by treating + each header cell as a vertical flex container */ + display:flex; + flex-direction:column; + justify-content:flex-end; +} + +.eg-grid-cell { + /* avoid text flowing into adjacent cells */ + overflow: hidden; +} + +/* in config display, make cells more obvious */ +.eg-grid-as-conf .eg-grid-row { + border: 1px solid #777; +} +.eg-grid-as-conf .eg-grid-cell { + border-right: 1px solid #777; +} + +/* stock columns need fixed-width controls */ +.eg-grid-cell-stock { + flex: 1; + text-align: center; +} + +/* the conf header must be twice the stock flex */ +.eg-grid-cell-conf-header { + flex: 2; + font-weight: bold; +} + +.eg-grid-row-selected { + color: rgb(51, 51, 51); + background-color: rgb(201, 221, 225); + border-bottom: 1px solid #888; +} + +.eg-grid-conf-cell-entry { + width:98%; + text-align:center; + padding: 3px; +} + +.eg-grid-conf-cell-entry:not(:first-child) { + border-top:1px solid #ccc; +} + +.eg-grid-conf-row { + background-color: #dff0d8; + border-color: #d6e9c6; +} + +.eg-grid-conf-row:first-child { + /* alignment fix; account for one missing border */ + padding-right: 1px; +} + +/* hack to make the header columns line up with the content columns + when the scroll bar is visible along the right side of the content + columns. TODO: if this varies enough by browser, we'll need to + calculate the width instead. */ +.eg-grid-scroll > .eg-grid-header-row, +.eg-grid-scroll > .eg-grid-conf-row { + padding-right: 15px; +} +.eg-grid-scroll > .eg-grid-content-body { + overflow-y:scroll; + height: 600px; /* TODO: configurable */ +} + +/* ---------------------------------------------------------------------- + * Grid + * ---------------------------------------------------------------------- */ + +[%# +vim: ft=css +%] diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 index ef601a8fa6..311236aa2a 100644 --- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 +++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 @@ -1,103 +1,56 @@ - + +
+ + +
+ + +
+
+
+
-
- [% INCLUDE 'staff/parts/column_picker.tt2' listname='list' %] -
- - +
-
[% l('#') %]
-
- +
[% l('#') %]
+
+
- - + +
-
-
[% l('Wider') %]
-
[% l('Narrower') %]
+
+
[% l('Expand') %]
+
[% l('Shrink') %]
[% l('Sort') %]
- - + +
-
{{$index + 1 + list.pageOffset}}
-
+
- +
+ +
@@ -28,6 +28,7 @@ + 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 9bc5978f03..e6e478497f 100644 --- a/Open-ILS/web/js/ui/default/staff/services/autogrid.js +++ b/Open-ILS/web/js/ui/default/staff/services/autogrid.js @@ -6,6 +6,7 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap' restrict : 'AE', transclude : true, scope : { + // IDL class hint (e.g. "aou") idlClass : '@', // points to a structure in the calling scope which defines @@ -14,14 +15,14 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap' // if true, grid columns are derived from all non-virtual // fields on the base idlClass - autoFields : '=', + autoFields : '@', // grid preferences will be stored / retrieved with this key persistKey : '@', // 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 @@ -29,16 +30,15 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap' // can determine the primary key directly from the IDL. idField : '@', - // egList is provided for us. - dataSource : '=', - + // egList containting our tabular data is provided for us + // and managed externally. egList : '=', // if true, hide the sortPriority options in the // grid configuration UI. This is primarily used by // UIs where the data is ephemeral and can only be // single-display-column sorted. - disableSortPriority : '=' + disableSortPriority : '@' }, link : function(scope, element, attrs) { @@ -60,6 +60,9 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap' $scope.list = $scope.egList || egList.create(); + $scope.$watch('isScroll', function(newValue, oldValue) { + console.log('isScroll changed to ' + newValue) }); + // column-header click quick sort $scope.sortOn = function(col_name) { if ($scope.sort && $scope.sort.length && @@ -222,7 +225,7 @@ angular.module('egGridMod', ['egCoreMod', 'egListMod', 'egUiMod', 'ui.bootstrap' name : field.name, label : field.label, path : field.path || field.name, - flex : field.flex || 2, + flex : Number(field.flex) || 2, display : (field.display === false) ? false : true }; diff --git a/Open-ILS/web/js/ui/default/staff/services/list.js b/Open-ILS/web/js/ui/default/staff/services/list.js index 4e7d6c18d1..763a8adda6 100644 --- a/Open-ILS/web/js/ui/default/staff/services/list.js +++ b/Open-ILS/web/js/ui/default/staff/services/list.js @@ -113,9 +113,7 @@ angular.module('egListMod', ['egCoreMod']) } this.hideAllColumns = function() { - angular.forEach(this.allColumns, function(field) { - delete self.displayColumns[field.name] - }); + self.displayColumns = {}; } // selects one row after deselecting all of the others -- 2.11.0