From 18aa97ea7b87b28e16eec8b1871457e8626543f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sauli=20T=C3=A4hk=C3=A4p=C3=A4=C3=A4?= Date: Mon, 29 Aug 2016 13:45:42 +0300 Subject: [PATCH 1/4] Implement refreshPage functionality --- iron-data-table.html | 20 +++++++++++++++++++- test/lazy-loading.html | 20 ++++++++++++++++++++ 2 files changed, 39 insertions(+), 1 deletion(-) diff --git a/iron-data-table.html b/iron-data-table.html index fea9e8c..8a91cf7 100644 --- a/iron-data-table.html +++ b/iron-data-table.html @@ -743,6 +743,10 @@ this.set('items.' + index + '.' + e.detail.path, e.detail.value); } } + + if (this.autoRefresh) { + + } }, _currentPageChanged: function(dataSource, page) { @@ -870,7 +874,21 @@ this._cachedPages = []; // Force reload on currently visible pages. - this._currentPageChanged(this.dataSource, this._currentPage); + this.refreshPage(this._currentPage); + }, + + /** + * Clears the cache for a page and reloads the data from datasource. + */ + refreshPage: function(page) { + if (this._cachedPages) { + var index = this._cachedPages.indexOf(page); + if (index > -1) { + this.splice('_cachedPages', index, 1); + } + } + + this._currentPageChanged(this.dataSource, page); }, _updateSizeForItem: function(event) { diff --git a/test/lazy-loading.html b/test/lazy-loading.html index ebf3c3f..f49a1a7 100644 --- a/test/lazy-loading.html +++ b/test/lazy-loading.html @@ -197,6 +197,26 @@ }); }); + + describe('refresh page', function() { + it('should reload a page', function() { + table._currentPage = 10; + + table.async(function() { + expect(table._cachedPages).to.contain.members([10]); + + table.refreshPage(10); + + expect(table._cachedPages).not.to.contain.members([10]); + + table.async(function() { + expect(table._cachedPages).to.contain.members([10]); + done(); + }, 250); + }, 250); + + }); + }); }); From 60c6b2835aa6a44a51cbedf35626897f8d485e10 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sauli=20T=C3=A4hk=C3=A4p=C3=A4=C3=A4?= Date: Mon, 29 Aug 2016 13:56:47 +0300 Subject: [PATCH 2/4] Add auto-refresh property --- iron-data-table.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/iron-data-table.html b/iron-data-table.html index 8a91cf7..de945b2 100644 --- a/iron-data-table.html +++ b/iron-data-table.html @@ -249,6 +249,12 @@ properties: { + /** + * Timeout after which the data on the currently visible page will be automatically + * refreshed after an item has been changed through a two-way binding. + */ + autoRefresh: Number, + /** * A function that is called before data is bound to a row or header cell. * Can be used to customize the cell element depending on the data. @@ -744,8 +750,10 @@ } } - if (this.autoRefresh) { - + if (this.autoRefresh !== undefined) { + this.debounce('auto-refresh', function() { + this.refreshPage(this._currentPage); + }, this.autoRefresh); } }, From ecb070b45823284cd8f0a52b70582b75331cfddc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sauli=20T=C3=A4hk=C3=A4p=C3=A4=C3=A4?= Date: Mon, 29 Aug 2016 15:29:52 +0300 Subject: [PATCH 3/4] Fix row detail test --- test/row-detail.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/row-detail.html b/test/row-detail.html index d5e78ce..5df2e48 100644 --- a/test/row-detail.html +++ b/test/row-detail.html @@ -168,7 +168,7 @@ it('should not show row detail when row is clicked', function(done) { var firstRow = grid.querySelector('data-table-row:not([header])'); - firstCell.click(); + firstRow.querySelector('data-table-cell').click(); setTimeout(function() { var rowDetail = firstRow.querySelector('data-table-row-detail'); From 98a236f360ccfaecd7daec5aeb5e84ad34663ecb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sauli=20T=C3=A4hk=C3=A4p=C3=A4=C3=A4?= Date: Mon, 29 Aug 2016 15:30:15 +0300 Subject: [PATCH 4/4] Refresh last loaded page when size increases --- iron-data-table.html | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/iron-data-table.html b/iron-data-table.html index de945b2..4db5c9f 100644 --- a/iron-data-table.html +++ b/iron-data-table.html @@ -377,7 +377,8 @@ size: { type: Number, notify: true, - value: 0 + value: 0, + observer: '_sizeChanged' }, /** @@ -472,7 +473,6 @@ }, observers: ['_itemsChanged(items.*)', - '_sizeChanged(size)', '_currentPageChanged(dataSource, _currentPage)', '_resetData(dataSource, filter.*, sortOrder.*)' ], @@ -764,7 +764,6 @@ this.debounce('loading', function() { this._loadPage(dataSource, page); - if (page + 1 < (this.size / this.pageSize)) { this._loadPage(dataSource, page + 1); } @@ -852,7 +851,7 @@ } }, - _sizeChanged: function(size) { + _sizeChanged: function(size, oldSize) { // Optimization: Calling `set` on _cachedItems will reset the scroll position and selections, // using `push` and `pop` with large changes (more than 1000 items) is a heavy operation // that jams things up. @@ -873,6 +872,14 @@ this.set('_cachedItems', items); } + + // when size increases, old last page needs to be refreshed. + if (size > oldSize) { + var oldLastPage = Math.floor(oldSize / this.pageSize); + if (this._isPageCached(oldLastPage) || oldLastPage === 0) { + this.refreshPage(oldLastPage); + } + } }, /**