From dccdd29c5ccc79dc3dc96cc35f91da4027574323 Mon Sep 17 00:00:00 2001 From: Dan Wells Date: Fri, 23 Mar 2018 17:21:36 -0400 Subject: [PATCH] LP#1635386 Clarify and simplify row highlighting code The existing code had a few functional problems for me. In the process of fixing them, I decided it best to also apply a number of small refactorings. Here is a list of changes in rough order of significance: -Made the new CSS classes test and apply once per row rather than once per cell -Fixed the test case for overdues: we now just look for no checkin-time + no lost/long-overdue stop-fines (matches XUL test) -Made the color and icon tests totally consistent, and also simplified where possible -Made the widened configuration header style (to accommodate status column) functional again (it was using old 'statusicon' class) -Made row highlight colors '!important' to avoid bad interactions with alternating row color styles -Changed status-cell (and statusCell) to status-column (and statusColumn) for a little extra clarity -Changed nested function name from 'rowClass()' to 'apply()' for greater code distinction (i.e. avoid 'rowClass.rowClass()' calls, and instead have 'rowClass.apply()') -Removed some unused variable assignments from grid.js -Cleaned up a few field attributes for necessity and consistency Signed-off-by: Dan Wells Signed-off-by: Kathy Lussier Signed-off-by: Dawn Dale --- .../staff/circ/patron/t_bills_list.tt2 | 8 ++--- .../src/templates/staff/css/style.css.tt2 | 29 +++++++-------- .../src/templates/staff/share/t_autogrid.tt2 | 20 +++++------ .../js/ui/default/staff/circ/patron/bills.js | 35 ++++++------------- .../web/js/ui/default/staff/services/grid.js | 5 +-- 5 files changed, 39 insertions(+), 58 deletions(-) diff --git a/Open-ILS/src/templates/staff/circ/patron/t_bills_list.tt2 b/Open-ILS/src/templates/staff/circ/patron/t_bills_list.tt2 index ad1db1925f..c843bbb39e 100644 --- a/Open-ILS/src/templates/staff/circ/patron/t_bills_list.tt2 +++ b/Open-ILS/src/templates/staff/circ/patron/t_bills_list.tt2 @@ -8,7 +8,7 @@ persist-key="circ.patron.bills" dateformat="{{$root.egDateAndTimeFormat}}" row-class="colorizeBillsList" - status-cell="statusIconColumn"> + status-column="statusIconColumn"> @@ -50,7 +50,7 @@ - + @@ -103,8 +103,8 @@ - - + + diff --git a/Open-ILS/src/templates/staff/css/style.css.tt2 b/Open-ILS/src/templates/staff/css/style.css.tt2 index 6ca02ff4dd..94e4e860e6 100644 --- a/Open-ILS/src/templates/staff/css/style.css.tt2 +++ b/Open-ILS/src/templates/staff/css/style.css.tt2 @@ -301,17 +301,18 @@ table.list tr.selected td { /* deprecated? */ text-align: center; } -.eg-grid-cell-stock-status { +/* the conf header must be twice the stock flex */ +.eg-grid-cell-conf-header { width: 4.4em; - text-align: center; + font-weight: bold; } -/* the conf header must be ~four times the stock flex */ -.eg-grid-cell-conf-header { +.eg-grid-cell-stock-status { width: 4.4em; - font-weight: bold; + text-align: center; } +/* the conf header must be 4x the stock width when status is present */ .eg-grid-cell-conf-header-status { width: 8.8em; font-weight: bold; @@ -347,28 +348,28 @@ table.list tr.selected td { /* deprecated? */ /* patron bill row-highlighting */ .red-row-highlight { color: #FFF; - background-color: #EB0000; + background-color: #EB0000 !important; } .red-row-highlight a:link, .dark-red-row-highlight a:link { color: #B8ECFF; } .orange-row-highlight { color: #000; - background-color: #FFE1A8; + background-color: #FFE1A8 !important; } .dark-red-row-highlight { color: #FFF; - background-color: #800000; + background-color: #800000 !important; } -.eg-grid-row-selected .red-row-highlight { - background-color: #CF0000; +.eg-grid-row-selected.red-row-highlight { + background-color: #CF0000 !important; } -.eg-grid-row-selected .orange-row-highlight { - background-color: #FFCF75; +.eg-grid-row-selected.orange-row-highlight { + background-color: #FFCF75 !important; } -.eg-grid-row-selected .dark-red-row-highlight { - background-color: #5C0000; +.eg-grid-row-selected.dark-red-row-highlight { + background-color: #5C0000 !important; } .eg-grid-cell-content::selection { diff --git a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 b/Open-ILS/src/templates/staff/share/t_autogrid.tt2 index 21d602b87a..58b3534cf1 100644 --- a/Open-ILS/src/templates/staff/share/t_autogrid.tt2 +++ b/Open-ILS/src/templates/staff/share/t_autogrid.tt2 @@ -228,7 +228,7 @@ type='checkbox' ng-model="selectAll"/> -
+
[% l('Status') %]
+ ng-class="statusColumn.isEnabled ? 'eg-grid-cell-conf-header-status' : 'eg-grid-cell-conf-header'">
[% l('Expand') %]
[% l('Shrink') %]
@@ -292,18 +292,16 @@ id="eg-grid-row-{{$index + 1}}" ng-repeat="item in items" ng-show="items.length > 0" - ng-class="{'eg-grid-row-selected' : selected[indexValue(item)]}"> + ng-class="[{'eg-grid-row-selected' : selected[indexValue(item)]}, rowClass.apply(item)]">
+ ng-click="handleRowClick($event, item)" title="[% l('Row Index') %]"> {{$index + offset() + 1}}
{{$index + offset() + 1}}
-
+
@@ -312,17 +310,15 @@ ng-model="selected[indexValue(item)]"/>
-
- +
+
+ ng-show="col.visible"> diff --git a/Open-ILS/web/js/ui/default/staff/circ/patron/bills.js b/Open-ILS/web/js/ui/default/staff/circ/patron/bills.js index a84ab2cdfc..bd1e9bed9f 100644 --- a/Open-ILS/web/js/ui/default/staff/circ/patron/bills.js +++ b/Open-ILS/web/js/ui/default/staff/circ/patron/bills.js @@ -222,14 +222,13 @@ function($scope , $q , $routeParams , egCore , egConfirmDialog , $location, // ------------- // Apply coloring to rows based on fines stop reason $scope.colorizeBillsList = { - rowClass: function(item) { + apply: function(item) { if (!item['circulation.checkin_time']) { if (item['circulation.stop_fines'] == 'LOST') { return 'dark-red-row-highlight'; } else if (item['circulation.stop_fines'] == 'LONGOVERDUE') { return 'red-row-highlight'; - } else if (item['circulation.due_date'] && // Still checked out - need feedback on this approach, feel like there's a better way - !item['circulation.stop_fines']) { + } else { return 'orange-row-highlight'; } } @@ -240,29 +239,17 @@ function($scope , $q , $routeParams , egCore , egConfirmDialog , $location, $scope.statusIconColumn = { isEnabled: true, template: function(item) { - var template = ""; - var icons = []; - var now = new Date(); - - if (item['circulation.due_date'] && - !item['circulation.checkin_time']) { - var due_date = new Date(item['circulation.due_date']); - - if (item['circulation.stop_fines'] && - item['circulation.stop_fines'] == "LOST") { - icons.push('glyphicon-question-sign'); - } else if (item['circulation.stop_fines'] && - item['circulation.stop_fines'] == "LONGOVERDUE") { - icons.push('glyphicon-exclamation-sign'); - } else if (now >= due_date) { - icons.push('glyphicon-time'); + var icon = ''; + if (!item['circulation.checkin_time']) { + if (item['circulation.stop_fines'] == "LOST") { + icon = 'glyphicon-question-sign'; + } else if (item['circulation.stop_fines'] == "LONGOVERDUE") { + icon = 'glyphicon-exclamation-sign'; + } else { + icon = 'glyphicon-time'; } } - - angular.forEach(icons, function(icon) { - template = template + "" - }); - return template; + return "" } } 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 71e271cd97..c774c7f43f 100644 --- a/Open-ILS/web/js/ui/default/staff/services/grid.js +++ b/Open-ILS/web/js/ui/default/staff/services/grid.js @@ -60,7 +60,7 @@ angular.module('egGridMod', // optional: object that enables status icon field and contains // function to handle what status icons should exist and why. - statusCell : '=', + statusColumn : '=', // optional primary grid label mainLabel : '@', @@ -118,9 +118,6 @@ angular.module('egGridMod', scope.handleAutoFields(); scope.collect(); - var statusCell = scope.statusCell; - var rowClass = scope.rowClass; - scope.grid_element = element; $(element) .find('.eg-grid-content-body') -- 2.43.2