From ba56de3267a5e53ff37f324971dfdfe489dad8ec Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Tue, 29 Apr 2014 12:33:31 -0400 Subject: [PATCH] browser: only add to the grid scope data that's needed; not the whole grid object Signed-off-by: Bill Erickson --- Open-ILS/src/templates/staff/parts/t_autogrid.tt2 | 115 ++++++----- .../js/ui/default/staff/cat/bucket/record/app.js | 33 +-- .../web/js/ui/default/staff/circ/patron/app.js | 25 ++- Open-ILS/web/js/ui/default/staff/services/grid.js | 227 +++++++++++++-------- 4 files changed, 234 insertions(+), 166 deletions(-) diff --git a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 index 98aec72577..26d3eb6741 100644 --- a/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 +++ b/Open-ILS/src/templates/staff/parts/t_autogrid.tt2 @@ -7,16 +7,16 @@
-
{{grid.mainLabel}}
+
{{mainLabel}}
-
+
    -
  • +
  • {{item.label}}
    • @@ -28,16 +28,16 @@ @@ -45,21 +45,21 @@ -
    +
    @@ -67,12 +67,12 @@
    -
    +
    -
    +
    [% l('#') %]
    -
    +
    - +
    + ng-show="col.visible">
    {{col.label}} + ng-click="quickSort(col.name)">{{col.label}}
    {{col.label}}
    @@ -189,30 +188,30 @@
    -
    +
    + style="flex:{{indexFlex + selectorFlex}}">
    [% l('Expand') %]
    [% l('Shrink') %]
    -
    [% l('Sort') %]
    +
    [% l('Sort') %]
    + ng-show="col.visible">
    + ng-click="modifyColumnFlex(col,1)">
    + ng-click="modifyColumnFlex(col,-1)">
    -
    +
    @@ -222,32 +221,32 @@
    -
    [% l('No Items To Display') %]
    -
    - {{$index + grid.offset + 1}} + ng-repeat="item in items" + ng-show="items.length > 0" + ng-class="{'eg-grid-row-selected' : selected[indexValue(item)]}"> +
    + {{$index + offset() + 1}}
    -
    +
    + ng-model="selected[indexValue(item)]"/>
    - {{grid.dataProvider.itemFieldValue(item, col) | egGridValueFilter:col}} + ng-show="col.visible"> + {{itemFieldValue(item, col)}}
    diff --git a/Open-ILS/web/js/ui/default/staff/cat/bucket/record/app.js b/Open-ILS/web/js/ui/default/staff/cat/bucket/record/app.js index 9e0b6fade8..0da8fbe770 100644 --- a/Open-ILS/web/js/ui/default/staff/cat/bucket/record/app.js +++ b/Open-ILS/web/js/ui/default/staff/cat/bucket/record/app.js @@ -486,23 +486,26 @@ function($scope, $q , $routeParams, bucketSvc) { $scope.setTab('view'); $scope.bucketId = $routeParams.id; - // idQuery contents will change with each bucket loaded - // as the query changes, the grid will notice and refresh itself - $scope.gridQuery = function() { - if (bucketSvc.currentBucket) { - var ids = bucketSvc.currentBucket.items().map( - function(i){return i.target_biblio_record_entry()} - ); - if (ids.length) return {id : ids}; - } - return {}; - } + // when no items are linked to a bucket, use noQuery, since the + // watchers will see it's the same value (and not a new ref to + // a new {} each time) + var noQuery = {}; + var myQuery = {}; + $scope.gridQuery = function() { return myQuery } function drawBucket() { - if (!$scope.bucketId || - bucketSvc.bucketRefreshLevel($scope.bucketId) == 2) - return $q.when(); - return bucketSvc.fetchBucket($scope.bucketId); + return bucketSvc.fetchBucket($scope.bucketId).then( + function(bucket) { + var ids = bucket.items().map( + function(i){return i.target_biblio_record_entry()} + ); + if (ids.length) { + myQuery = {id : ids}; + } else { + myQuery = noQuery; + } + } + ); } $scope.detachRecords = function(records) { diff --git a/Open-ILS/web/js/ui/default/staff/circ/patron/app.js b/Open-ILS/web/js/ui/default/staff/circ/patron/app.js index acb7203249..e2ebb303ac 100644 --- a/Open-ILS/web/js/ui/default/staff/circ/patron/app.js +++ b/Open-ILS/web/js/ui/default/staff/circ/patron/app.js @@ -231,6 +231,10 @@ function($scope, $q, $routeParams, $timeout, $window, $location, egEnv, $scope.focusMe = true; $scope.searchArgs = {}; + // cache of object field values; speeds up grid rendering for + // nested objects. TODO: move into grid? + var fieldValueCache = {}; + if (patronSvc.lastSearch) { // populate the search form with our cached search info angular.forEach(patronSvc.lastSearch.search, function(val, key) { @@ -308,6 +312,7 @@ function($scope, $q, $routeParams, $timeout, $window, $location, egEnv, return deferred.promise; } + fieldValueCache = {}; patronSvc.patrons = []; egNet.request( 'open-ils.actor', @@ -335,7 +340,19 @@ function($scope, $q, $routeParams, $timeout, $window, $location, egEnv, }; provider.itemFieldValue = function(item, column) { - return provider.nestedItemFieldValue(item, column); + + if (fieldValueCache[item.id()]) { + if (fieldValueCache[item.id()][column.path] !== undefined) { + return fieldValueCache[item.id()][column.path]; + } + } else { + fieldValueCache[item.id()] = {}; + } + + fieldValueCache[item.id()][column.path] = + provider.nestedItemFieldValue(item, column); + + return fieldValueCache[item.id()][column.path]; }; $scope.patronSearchGridProvider = provider; @@ -395,7 +412,7 @@ function($scope, $q, $routeParams, $timeout, $window, $location, egEnv, function compileSort() { - if (!$scope.patronSearchGridProvider.sort.length) { + if (!provider.sort.length) { return [ // default "family_name ASC", "first_given_name ASC", @@ -406,7 +423,7 @@ function($scope, $q, $routeParams, $timeout, $window, $location, egEnv, var sort = []; angular.forEach( - $scope.patronSearchGridProvider.sort, + provider.sort, function(sortdef) { if (angular.isObject(sortdef)) { var name = Object.keys(sortdef)[0]; @@ -425,7 +442,7 @@ function($scope, $q, $routeParams, $timeout, $window, $location, egEnv, // refresh itself. $scope.search = function(args) { // args === $scope.searchArgs if (args && Object.keys(args).length) - $scope.patronSearchGridProvider.increment(); + provider.increment(); } // TODO: move this into the (forthcoming) grid row activate action 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 76b74dbb7e..58481103d3 100644 --- a/Open-ILS/web/js/ui/default/staff/services/grid.js +++ b/Open-ILS/web/js/ui/default/staff/services/grid.js @@ -38,21 +38,19 @@ angular.module('egGridMod', // -multisort : sort priorities config disabled by default features : '@', - initialOffset : '=', - // optional primary grid label mainLabel : '@', // if true, use the IDL class label as the mainLabel autoLabel : '=', + // optional context menu label + menuLabel : '@', + // called on each item retrieved in collect() with the item // as the argument. Useful for modiying objects before they // are absorbed by the grid. - onItemRetrieved : '=', - - // optional context menu label - menuLabel : '@' + onItemRetrieved : '=' }, // TODO: avoid hard-coded url @@ -62,7 +60,7 @@ angular.module('egGridMod', // link() is called after page compilation, which means our // eg-grid-field's have been parsed and loaded. Now it's // safe to perform our initial page load. - scope.grid.collect(); + scope.collect(); }, controller : [ @@ -76,41 +74,68 @@ angular.module('egGridMod', grid.init = function() { grid.offset = 0; grid.limit = 25; - grid.items = []; - grid.selected = {}; // idField-based - grid.actions = []; + $scope.items = []; + $scope.showGridConf = false; grid.totalCount = -1; - grid.idlClass = $scope.idlClass; - grid.mainLabel = $scope.mainLabel; - grid.indexField = $scope.idField; - grid.showGridConf = false; - grid.dataProvider = $scope.itemsProvider; - grid.menuLabel = $scope.menuLabel; - grid.onItemRetrieved = $scope.onItemRetrieved; - grid.menuItems = []; + // default flex values for the index and selector columns + $scope.indexFlex = 1; + $scope.selectorFlex = 1; + + $scope.actions = []; + grid.addAction = function(act) { + $scope.actions.push(act); + } + + $scope.selected = {}; + + $scope.menuItems = []; grid.addMenuItem = function(item) { - grid.menuItems.push(item); + $scope.menuItems.push(item); } - // default flex values for the index and selector columns - grid.indexFlex = 1; - grid.selectorFlex = 1; - grid.features = ($scope.features) ? + // items needed only by the grid; remove from scope + angular.forEach( + ['idlClass', 'onItemRetrieved','persistKey'], + function(field) { + grid[field] = $scope[field]; + delete $scope[field]; + } + ); + + grid.indexField = $scope.idField; + delete $scope.idField; + + grid.dataProvider = $scope.itemsProvider; + delete $scope.itemsProvider; + + var features = ($scope.features) ? $scope.features.split(',') : []; + delete $scope.features; + + //$scope.disableMultiSort = features.indexOf('-multisort') > -1; grid.columnsProvider = egGridColumnsProvider.instance({ idlClass : grid.idlClass, - defaultToHidden : (grid.features.indexOf('-display') > -1), - defaultToNoSort : (grid.features.indexOf('-sort') > -1), - defaultToNoMultiSort : (grid.features.indexOf('-multisort') > -1) + defaultToHidden : (features.indexOf('-display') > -1), + defaultToNoSort : (features.indexOf('-sort') > -1), + defaultToNoMultiSort : (features.indexOf('-multisort') > -1) }); + $scope.columns = grid.columnsProvider.columns; + $scope.showAllColumns = function() { + grid.columnsProvider.showAllColumns(); + } + $scope.hideAllColumns = function() { + grid.columnsProvider.hideAllColumns(); + } + if ($scope.autoFields) { grid.indexField = egIDL.classes[grid.idlClass].pkey; if (grid.autoLabel) - grid.mainLabel = egIDL.classes[grid.idlClass].label; + $scope.mainLabel = egIDL.classes[grid.idlClass].label; grid.columnsProvider.compileAutoColumns(); + delete $scope.autoFields; } if (grid.dataProvider) { @@ -120,8 +145,7 @@ angular.module('egGridMod', $scope.$watch( function() { return grid.dataProvider.revision() }, function(newVal, oldVal) { - // hmm, why is this check necessary? - if (newVal != oldVal) grid.collect(); + if (newVal !== oldVal) grid.collect(); } ); @@ -135,16 +159,21 @@ angular.module('egGridMod', }); $scope.$watch( - function() { return $scope.query() }, + function() { return grid.dataProvider.query() }, function(newVal, oldVal) { - // hmm, why is this check necessary? - if (!angular.equals(newVal, oldVal)) + if (newVal !== oldVal) grid.collect() }, true // object comparison ); + delete $scope.query; } + $scope.itemFieldValue = grid.dataProvider.itemFieldValue; + $scope.indexValue = function(item) { + return grid.indexValue(item) + }; + // this allows the caller to pass in initializtion // values, like offset, for cases when the caller may // be caching grid data between route loads. @@ -158,18 +187,18 @@ angular.module('egGridMod', } grid.compileSort(); - $scope.grid = grid; } - grid.onContextMenu = function($event) { + $scope.onContextMenu = function($event) { var col = angular.element($event.target).attr('column'); + console.log('selected column ' + col); } - grid.page = function() { + $scope.page = function() { return (grid.offset / grid.limit) + 1; } - grid.goToPage = function(page) { + $scope.goToPage = function(page) { page = Number(page); if (angular.isNumber(page) && page > 0) { grid.offset = (page - 1) * grid.limit; @@ -177,11 +206,23 @@ angular.module('egGridMod', } } - grid.onFirstPage = function() { + $scope.offset = function(o) { + if (angular.isNumber(o)) + grid.offset = o; + return grid.offset + } + + $scope.limit = function(l) { + if (angular.isNumber(l)) + grid.limit = l; + return grid.limit + } + + $scope.onFirstPage = function() { return grid.offset == 0; } - grid.hasNextPage = function() { + $scope.hasNextPage = function() { // we have less data than requested, there must // not be any more pages if (grid.count() < grid.limit) return false; @@ -194,12 +235,12 @@ angular.module('egGridMod', return grid.totalCount > (grid.offset + grid.count()); } - grid.incrementPage = function() { + $scope.incrementPage = function() { grid.offset += grid.limit; grid.collect(); } - grid.decrementPage = function() { + $scope.decrementPage = function() { if (grid.offset < grid.limit) { grid.offset = 0; } else { @@ -210,7 +251,7 @@ angular.module('egGridMod', // number of items loaded for the current page of results grid.count = function() { - return grid.items.length; + return $scope.items.length; } // returns the unique identifier value for the provided item @@ -227,62 +268,62 @@ angular.module('egGridMod', } // fires the action handler function - grid.actionLauncher = function(action) { + $scope.actionLauncher = function(action) { action.handler(grid.getSelectedItems()); } // returns the list of selected item objects grid.getSelectedItems = function() { - return grid.items.filter( + return $scope.items.filter( function(item) { - return Boolean(grid.selected[grid.indexValue(item)]); + return Boolean($scope.selected[grid.indexValue(item)]); } ); } // selects one row after deselecting all of the others grid.selectOneItem = function(index) { - grid.selected = {}; - grid.selected[index] = true; + $scope.selected = {}; + $scope.selected[index] = true; } // selects or deselects an item, without affecting the others. // returns true if the item is selected; false if de-selected. grid.toggleSelectOneItem = function(index) { - if (grid.selected[index]) { - delete grid.selected[index]; + if ($scope.selected[index]) { + delete $scope.selected[index]; return false; } else { - return grid.selected[index] = true; + return $scope.selected[index] = true; } } grid.selectAllItems = function() { - angular.forEach(grid.items, function(item) { - grid.selected[grid.indexValue(item)] = true + angular.forEach($scope.items, function(item) { + $scope.selected[grid.indexValue(item)] = true }); } // if all are selected, deselect all, otherwise select all - grid.toggleSelectAllItems = function() { - if (Object.keys(grid.selected).length == grid.items.length) { - grid.selected = {}; + $scope.toggleSelectAllItems = function() { + if (Object.keys($scope.selected).length == $scope.items.length) { + $scope.selected = {}; } else { grid.selectAllItems(); } } - // inform the data provider that a selection has been made grid.informSelection = function() { var items = []; - angular.forEach(Object.keys(grid.selected), + angular.forEach(Object.keys($scope.selected), function(index) { - items.push(grid.items[grid.indexOf(index)]); + items.push($scope.items[grid.indexOf(index)]); } ); grid.dataProvider.select(items); } + // returns true if item1 appears in the list before item2; // false otherwise. this is slightly more efficient that // finding the position of each then comparing them. @@ -292,8 +333,8 @@ angular.module('egGridMod', var idx2 = grid.indexValue(itemOrIndex2); // use for() for early exit - for (var i = 0; i < grid.items.length; i++) { - var idx = grid.indexValue(grid.items[i]); + for (var i = 0; i < $scope.items.length; i++) { + var idx = grid.indexValue($scope.items[i]); if (idx == idx1) return true; if (idx == idx2) return false; } @@ -303,8 +344,8 @@ angular.module('egGridMod', // 0-based position of item in the current data set grid.indexOf = function(item) { var idx = grid.indexValue(item); - for (var i = 0; i < grid.items.length; i++) { - if (grid.indexValue(grid.items[i]) == idx) + for (var i = 0; i < $scope.items.length; i++) { + if (grid.indexValue($scope.items[i]) == idx) return i; } return -1; @@ -316,9 +357,12 @@ angular.module('egGridMod', if (column.flex < 1) column.flex = 1; } + $scope.modifyColumnFlex = function(col, val) { + grid.modifyColumnFlex(col, val); + } // handles click, control-click, and shift-click - grid.handleRowClick = function($event, item) { + $scope.handleRowClick = function($event, item) { var index = grid.indexValue(item); if ($event.ctrlKey || $event.metaKey /* mac command */) { @@ -349,10 +393,10 @@ angular.module('egGridMod', // currently selected items while (true) { startPos += ascending ? 1 : -1; - var curItem = grid.items[startPos]; + var curItem = $scope.items[startPos]; if (!curItem) break; var curIdx = grid.indexValue(curItem); - grid.selected[curIdx] = true; + $scope.selected[curIdx] = true; if (curIdx == index) break; // all done } } @@ -389,7 +433,7 @@ angular.module('egGridMod', // builds a sort expression using a single column, // toggling between ascending and descending sort. - grid.quickSort = function(col_name) { + $scope.quickSort = function(col_name) { var sort = grid.dataProvider.sort; if (sort && sort.length && sort[0] == col_name) { @@ -405,9 +449,9 @@ angular.module('egGridMod', } // show / hide the grid configuration row - grid.toggleConfDisplay = function() { - if (grid.showGridConf) { - grid.showGridConf = false; + $scope.toggleConfDisplay = function() { + if ($scope.showGridConf) { + $scope.showGridConf = false; if (grid.columnsProvider.hasSortableColumn()) { // only refresh the grid if the user has the // ability to modify the sort priorities. @@ -416,7 +460,7 @@ angular.module('egGridMod', grid.collect(); } } else { - grid.showGridConf = true; + $scope.showGridConf = true; } } @@ -461,21 +505,21 @@ angular.module('egGridMod', // sets the download file name and inserts the current CSV // into a Blob URL for browser download. - grid.generateCSVExportURL = function() { + $scope.generateCSVExportURL = function() { // let the file name describe the grid - grid.csvExportFileName = - (grid.mainLabel || grid.persistKey || 'eg_grid_data') - .replace(/\s+/g, '_') + '_' + grid.page(); + $scope.csvExportFileName = + ($scope.mainLabel || grid.persistKey || 'eg_grid_data') + .replace(/\s+/g, '_') + '_' + $scope.page(); // toss the CSV into a Blob and update the export URL var csv = grid.generateCSV(); var blob = new Blob([csv], {type : 'text/plain'}); - grid.csvExportURL = + $scope.csvExportURL = ($window.URL || $window.webkitURL).createObjectURL(blob); } - grid.printCSV = function() { + $scope.printCSV = function() { egPrintStore.print('text/plain', grid.generateCSV()) .then(function() { console.debug('print complete') }); } @@ -488,7 +532,7 @@ angular.module('egGridMod', // columns angular.forEach(grid.columnsProvider.columns, function(col) { - if (!grid.columnsProvider.visible[col.name]) return; + if (!col.visible) return; csvStr += grid.csvDatum(col.label); csvStr += ','; } @@ -497,10 +541,10 @@ angular.module('egGridMod', csvStr = csvStr.replace(/,$/,'\n'); // items - angular.forEach(grid.items, function(item) { + angular.forEach($scope.items, function(item) { angular.forEach(grid.columnsProvider.columns, function(col) { - if (!grid.columnsProvider.visible[col.name]) return; + if (!col.visible) return; // bare value var val = grid.dataProvider.itemFieldValue(item, col); // filtered value (dates, etc.) @@ -515,16 +559,18 @@ angular.module('egGridMod', return csvStr; } + $scope.collect = function() { grid.collect() } + // asks the dataProvider for a page of data grid.collect = function() { - grid.items = []; - grid.selected = {}; + $scope.items = []; + $scope.selected = {}; grid.dataProvider.get(grid.offset, grid.limit) .then(null, null, function(item) { if (item) { if (grid.onItemRetrieved) grid.onItemRetrieved(item); - grid.items.push(item) + $scope.items.push(item) } }); } @@ -570,6 +616,7 @@ angular.module('egGridMod', } ); egGridCtrl.columnsProvider.add(scope); + scope.$destroy(); } }; }) @@ -589,10 +636,11 @@ angular.module('egGridMod', }, template : '
    ', // NOOP template link : function(scope, element, attrs, egGridCtrl) { - egGridCtrl.actions.push({ + egGridCtrl.addAction({ label : scope.label, handler : scope.handler }); + scope.$destroy(); } }; }) @@ -602,7 +650,6 @@ angular.module('egGridMod', function ColumnsProvider(args) { var cols = this; cols.columns = []; - cols.visible = {}; cols.idlClass = args.idlClass; cols.defaultToHidden = args.defaultToHidden; cols.defaultToNoSort = args.defaultToNoSort; @@ -619,12 +666,14 @@ angular.module('egGridMod', cols.showAllColumns = function() { angular.forEach(cols.columns, function(column) { - cols.visible[column.name] = true; + column.visible = true; }); } cols.hideAllColumns = function() { - cols.visible = {}; + angular.forEach(cols.columns, function(col) { + delete col.visible; + }); } cols.indexOf = function(name) { @@ -691,7 +740,7 @@ angular.module('egGridMod', if (!column.path) column.path = column.name; if (column.visible || (!cols.defaultToHidden && !column.hidden)) - cols.visible[column.name] = true; + column.visible = true; if (column.sortable || (!cols.defaultToNoSort && !column.nonsortable)) column.sortable = true; @@ -894,8 +943,7 @@ angular.module('egGridMod', var queryFields = {} angular.forEach(provider.columnsProvider.columns, function(col) { - if (col.required || - provider.columnsProvider.visible[col.name]) + if (col.required || col.visible) queryFields[col.name] = col.path; } ); @@ -1051,6 +1099,7 @@ angular.module('egGridMod', divider : scope.divider, handlerData : scope.handlerData }); + scope.$destroy(); } }; }) @@ -1069,7 +1118,7 @@ angular.module('egGridMod', switch(column.datatype) { case 'bool': // Browser will translate true/false for us - return Boolean(value == 't'); + return ''+Boolean(value == 't'); case 'timestamp': // canned angular date filter FTW return $filter('date')(value, 'shortDate'); -- 2.11.0