From 9ac903031576930f6a81720c8074fd29bfe876b3 Mon Sep 17 00:00:00 2001 From: Jonathan Shaffer Date: Tue, 13 Dec 2016 11:05:34 -0500 Subject: [PATCH 1/2] dynamic grouping/tree fix --- demos/grouping.html | 20 ++++- src/components/body/BodyController.js | 112 ++++++++++++++++++-------- 2 files changed, 95 insertions(+), 37 deletions(-) diff --git a/demos/grouping.html b/demos/grouping.html index 5d6b311..3a16067 100644 --- a/demos/grouping.html +++ b/demos/grouping.html @@ -75,22 +75,34 @@ $scope.data = data; }); - $scope.groupCountry = function(){ - var col = $scope.options.columns.find(function(c){ + $scope.groupCountry = function() { + _clearGroupColumns(); + + var col = $scope.options.columns.find(function(c) { return c.prop === 'country'; }); col.group = !col.group; }; - $scope.groupYear = function(){ - var col = $scope.options.columns.find(function(c){ + $scope.groupYear = function() { + _clearGroupColumns(); + + var col = $scope.options.columns.find(function(c) { return c.prop === 'year'; }); col.group = !col.group; }; + _clearGroupColumns = function() { + $scope.options.columns.map(function(column) { + if (column.group) { + delete column.group; + } + }); + } + }); }); diff --git a/src/components/body/BodyController.js b/src/components/body/BodyController.js index c511746..8af4f42 100644 --- a/src/components/body/BodyController.js +++ b/src/components/body/BodyController.js @@ -12,55 +12,93 @@ export class BodyController{ constructor($scope, $timeout){ this.$scope = $scope; this.tempRows = []; + this.watchListeners = []; + this.setTreeAndGroupColumns(); + this.setConditionalWatches(); + + $scope.$watch('body.options.columns', (newVal, oldVal) => { + if (newVal) { + const origTreeColumn = this.treeColumn, + origGroupColumn = this.groupColumn; + + this.setTreeAndGroupColumns(); + + this.setConditionalWatches(); + + if (origGroupColumn !== this.treeColumn || origGroupColumn !== this.groupColumn) { + this.rowsUpdated(this.rows); + + if (this.treeColumn) { + this.refreshTree(); + } else if (this.groupColumn) { + this.refreshGroups(); + } + } + } + }, true); + + $scope.$watchCollection('body.rows', this.rowsUpdated.bind(this)); + } + + setTreeAndGroupColumns() { this.treeColumn = this.options.columns.find((c) => { return c.isTreeColumn; }); - this.groupColumn = this.options.columns.find((c) => { - return c.group; - }); + if (!this.treeColumn) { + this.groupColumn = this.options.columns.find((c) => { + return c.group; + }); + } + } - $scope.$watchCollection('body.rows', this.rowsUpdated.bind(this)); + setConditionalWatches(){ + this.watchListeners.map((watchListener) => ( + watchListener() + )); - if(this.options.scrollbarV || (!this.options.scrollbarV && this.options.paging.externalPaging)){ + if (this.options.scrollbarV || (!this.options.scrollbarV && this.options.paging.externalPaging)) { var sized = false; - $scope.$watch('body.options.paging.size', (newVal, oldVal) => { - if(!sized || newVal > oldVal){ + + this.watchListeners.push(this.$scope.$watch('body.options.paging.size', (newVal, oldVal) => { + if (!sized || newVal > oldVal) { this.getRows(); sized = true; } - }); + })); - $scope.$watch('body.options.paging.count', (count) => { + this.watchListeners.push(this.$scope.$watch('body.options.paging.count', (count) => { this.count = count; this.updatePage(); - }); + })); - $scope.$watch('body.options.paging.offset', (newVal) => { + this.watchListeners.push(this.$scope.$watch('body.options.paging.offset', (newVal) => { if(this.options.paging.size){ this.onPage({ offset: newVal, size: this.options.paging.size }); } - }); + })); } } rowsUpdated(newVal, oldVal){ - if(newVal) { - if(!this.options.paging.externalPaging){ + if (!newVal) { + this.getRows(true); + } else { + if (!this.options.paging.externalPaging) { this.options.paging.count = newVal.length; } this.count = this.options.paging.count; - if(this.treeColumn || this.groupColumn){ + if (this.treeColumn || this.groupColumn) { this.buildRowsByGroup(); } - if(this.options.scrollbarV){ + if (this.options.scrollbarV) { let refresh = newVal && oldVal && (newVal.length === oldVal.length || newVal.length < oldVal.length); @@ -68,18 +106,18 @@ export class BodyController{ } else { let rows = this.rows; - if(this.treeColumn){ + if (this.treeColumn) { rows = this.buildTree(); - } else if(this.groupColumn){ + } else if (this.groupColumn) { rows = this.buildGroups(); } - if(this.options.paging.externalPaging){ + if (this.options.paging.externalPaging) { let idxs = this.getFirstLastIndexes(), idx = idxs.first; this.tempRows.splice(0, this.tempRows.length); - while(idx < idxs.last){ + while (idx < idxs.last) { this.tempRows.push(rows[idx++]) } } else { @@ -478,6 +516,16 @@ export class BodyController{ return children !== undefined || (children && !children.length); } + refreshTree(){ + if(this.options.scrollbarV){ + this.getRows(true); + } else { + var values = this.buildTree(); + this.tempRows.splice(0, this.tempRows.length); + this.tempRows.push(...values); + } + } + /** * Tree toggle event from a cell * @param {row model} @@ -487,18 +535,22 @@ export class BodyController{ var val = row[this.treeColumn.prop]; this.expanded[val] = !this.expanded[val]; + this.refreshTree(); + + this.onTreeToggle({ + row: row, + cell: cell + }); + } + + refreshGroups(){ if(this.options.scrollbarV){ this.getRows(true); } else { - var values = this.buildTree(); + var values = this.buildGroups(); this.tempRows.splice(0, this.tempRows.length); this.tempRows.push(...values); } - - this.onTreeToggle({ - row: row, - cell: cell - }); } /** @@ -508,12 +560,6 @@ export class BodyController{ onGroupToggle(row){ this.expanded[row.name] = !this.expanded[row.name]; - if(this.options.scrollbarV){ - this.getRows(true); - } else { - var values = this.buildGroups(); - this.tempRows.splice(0, this.tempRows.length); - this.tempRows.push(...values); - } + this.refreshGroups(); } } From 3c5888de3c2063e4d9809fdaf857a95987f7ac78 Mon Sep 17 00:00:00 2001 From: Jon Shaffer Date: Sat, 31 Dec 2016 09:25:38 -0500 Subject: [PATCH 2/2] -useless timeout injection --- src/components/body/BodyController.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/body/BodyController.js b/src/components/body/BodyController.js index 8af4f42..e28bfcd 100644 --- a/src/components/body/BodyController.js +++ b/src/components/body/BodyController.js @@ -5,11 +5,10 @@ export class BodyController{ /** * A tale body controller * @param {$scope} - * @param {$timeout} * @return {BodyController} */ /*@ngInject*/ - constructor($scope, $timeout){ + constructor($scope){ this.$scope = $scope; this.tempRows = []; this.watchListeners = [];