Merge pull request #235 from MibenCoop/approvals_page_paginatio

Added pagination functionality to "Pending Approvals" page
Haufe-Lexware · Dec 11, 2019 · ff7d754 · ff7d754
2 parents 296daab + bdc5e07
commit ff7d754
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/src/ui/public/assets/js/utils.js b/src/ui/public/assets/js/utils.js
@@ -32,6 +32,58 @@ function applyGridFilter(filter, item) {
     return false;
 }
 
+function getStateFromHistory() {
+    return {
+        filter: JSON.parse(history.state.filter),
+        sorting: JSON.parse(history.state.sorting),
+        pageIndex: history.state.pageIndex
+    };
+}
+
+function getStateFromGrid(grid) {
+    return {
+        filter: JSON.stringify(grid.getFilter()),
+        sorting: JSON.stringify(grid._sortingParams()),
+        pageIndex: grid.pageIndex
+    };
+}
+
+function getFilterValueFromState(filter, fieldName) {
+    for (let prop in filter) {
+        let fieldNameNestedPops = fieldName.split(".");
+        if (prop === fieldNameNestedPops[0]) {
+            if (typeof filter[prop] === "object" && fieldNameNestedPops.length > 1) //look for nested
+                return getFilterValueFromState(filter[prop], fieldNameNestedPops.slice(-1)[0]);
+            if (prop === fieldName)
+                return filter[prop];
+        }
+    }
+    return "";
+}
+
+function initializeGridFromState(grid) {
+    let gridSettings = getStateFromHistory();
+    grid.isGridRefreshAvailable = false;
+    return new Promise((resolve, reject) => {
+        //set filter values into grid inputs
+        for (let prop in grid.fields) {
+            let filterValue = getFilterValueFromState(gridSettings.filter, (grid.fields)[prop].name);
+            $((grid.fields)[prop].filterControl).val(filterValue)
+        }
+        if (gridSettings && !isEmptyGridFilter(gridSettings.filter))
+            grid.filtering = true;
+        grid.search(gridSettings.filter).done(function () {
+            grid.sort({
+                field: gridSettings.sorting.sortField,
+                order: gridSettings.sorting.sortOrder
+            }).done(function () {
+                grid.option("pageIndex", gridSettings.pageIndex);
+                resolve();
+            });
+        });
+    });
+}
+
 function setMouseOverElementContent($elem, content) {
   $elem.attr({
     "data-toggle": "popover",
@@ -71,6 +123,16 @@ function dateFormat (date, fstr, utc) {
 }
 
 $(document).ready(function () {
+    jsGrid.Grid.prototype.onRefreshed = function (args) {
+        if (Array.isArray(args.grid.data) && (args.grid.data).length > 0) {
+            var params = getStateFromGrid(args.grid);
+            if (window.history && window.history.pushState) {
+                if (JSON.stringify(history.state) !== JSON.stringify(params) && (args.grid.isGridRefreshAvailable && args.grid.isGridRefreshAvailable === true)) {
+                    history.pushState(params, `title ${args.grid.pageIndex}`, `?page=${args.grid.pageIndex}`);
+                }
+            }
+        }
+    }
     jsGrid.loadStrategies.DirectLoadingStrategy.prototype.finishDelete = function (deletedItem, deletedItemIndex) {
         var grid = this._grid;
         grid.option("data").splice(deletedItemIndex, 1);

diff --git a/src/ui/views/admin_approvals.pug b/src/ui/views/admin_approvals.pug
@@ -22,6 +22,9 @@ block bodyScripts
         }
 
         $(document).ready(function(){
+           window.onpopstate = function (event) {
+              initializeGridFromState(grid).then(() => { grid.isGridRefreshAvailable = true }).catch(err => console.log('Error', err));
+           }
            approvals = !{approvals};     
            $('#approvalsGrid').jsGrid({
              width: "100%", pageSize: 10, sorting: true, paging: true, filtering: true, autoload: true, confirmDeleting: false,
@@ -99,6 +102,9 @@ block bodyScripts
             ]
            });
            $("#approvalsGrid").jsGrid("option", "filtering", false);
+           var grid = $("#approvalsGrid").data("JSGrid");
+           grid.isGridRefreshAvailable = true;
+           initializeGridFromState(grid).then(() => { grid.isGridRefreshAvailable = true }).catch(err => console.log('Error', err));
         });
 block content
     .jumbotron.wicked-admin-title