client/paging: support item removal (#123)

2 files changed, 24 insertions, 9 deletions

diff --git a/client/js/views/endless_page_view.js b/client/js/views/endless_page_view.js
index 20f3b97..9ed82fe 100644
--- a/client/js/views/endless_page_view.js
+++ b/client/js/views/endless_page_view.js
@@ -158,6 +158,10 @@ class EndlessPageView {
                 this.maxOffsetShown =
                     response.offset + response.results.length;
             }
+            response.results.addEventListener('remove', e => {
+                this.maxOffsetShown--;
+                this.totalRecords--;
+            });
 
             if (append) {
                 this._pagesHolderNode.appendChild(pageNode);
diff --git a/client/js/views/manual_page_view.js b/client/js/views/manual_page_view.js
index 93efdc4..94394a3 100644
--- a/client/js/views/manual_page_view.js
+++ b/client/js/views/manual_page_view.js
@@ -35,7 +35,8 @@ function _getVisiblePageNumbers(currentPage, totalPages) {
     return pagesVisible;
 }
 
-function _getPages(currentPage, pageNumbers, ctx, limit) {
+function _getPages(
+        currentPage, pageNumbers, limit, defaultLimit, removedItems) {
     const pages = new Map();
     let prevPage = 0;
     for (let page of pageNumbers) {
@@ -44,8 +45,10 @@ function _getPages(currentPage, pageNumbers, ctx, limit) {
         }
         pages.set(page, {
             number: page,
-            offset: (page - 1) * limit,
-            limit: limit === ctx.defaultLimit ? null : limit,
+            offset:
+                (page - 1) * limit -
+                (page > currentPage ? removedItems : 0),
+            limit: limit === defaultLimit ? null : limit,
             active: currentPage === page,
         });
         prevPage = page;
@@ -79,14 +82,22 @@ class ManualPageView {
                 this._navigateToPrevNextPage('next');
             });
 
+            let removedItems = 0;
             if (response.total) {
-                this._refreshNav(response, ctx);
+                this._refreshNav(
+                    offset, limit, response.total, removedItems, ctx);
             }
 
             if (!response.results.length) {
                 this.showInfo('No data to show');
             }
 
+            response.results.addEventListener('remove', e => {
+                removedItems++;
+                this._refreshNav(
+                    offset, limit, response.total, removedItems, ctx);
+            });
+
             views.syncScrollPosition();
         }, response => {
             this.showError(response.message);
@@ -129,12 +140,12 @@ class ManualPageView {
         router.show(linkNode.getAttribute('href'));
     }
 
-    _refreshNav(response, ctx) {
-        const currentPage = Math.ceil(
-            (response.offset + response.limit) / response.limit);
-        const totalPages = Math.ceil(response.total / response.limit);
+    _refreshNav(offset, limit, total, removedItems, ctx) {
+        const currentPage = Math.floor((offset + limit - 1) / limit) + 1;
+        const totalPages = Math.ceil((total - removedItems) / limit);
         const pageNumbers = _getVisiblePageNumbers(currentPage, totalPages);
-        const pages = _getPages(currentPage, pageNumbers, ctx, response.limit);
+        const pages = _getPages(
+            currentPage, pageNumbers, limit, ctx.defaultLimit, removedItems);
 
         views.replaceContent(
             this._pageNavNode,