diff --git a/src/ui/public/assets/js/utils.js b/src/ui/public/assets/js/utils.js index 3beac2d8..b9c36fea 100644 --- 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 index 5075b594..67617c6c 100644 --- 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