From 7367a3bc455c741e5894b131f16e52d348ae5d09 Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Mon, 18 Mar 2019 11:05:55 +0100
Subject: [PATCH] MVC, bootgrid, opt-in to remember previous selected columns
 and rowcount when data-store-selection="true"

---
 .../www/js/opnsense_bootgrid_plugin.js        | 75 ++++++++++++++++++-
 1 file changed, 72 insertions(+), 3 deletions(-)

diff --git a/src/opnsense/www/js/opnsense_bootgrid_plugin.js b/src/opnsense/www/js/opnsense_bootgrid_plugin.js
index 6f6981477..126f29fa9 100644
--- a/src/opnsense/www/js/opnsense_bootgrid_plugin.js
+++ b/src/opnsense/www/js/opnsense_bootgrid_plugin.js
@@ -104,12 +104,12 @@ $.fn.UIBootgrid = function (params) {
      * construct new bootgrid
      */
     this.construct = function() {
-        // set defaults our defaults
+        // set defaults
         var gridopt = {
             ajax: true,
             selection: true,
             multiSelect: true,
-            rowCount:[7,14,20,-1],
+            rowCount:[7,14,20,50,100,-1],
             url: params['search'],
             formatters: {
                 "commands": function (column, row) {
@@ -147,6 +147,21 @@ $.fn.UIBootgrid = function (params) {
             });
         }
 
+        if ($(this_grid).data('store-selection') === true && window.localStorage) {
+            // fetch last selected rowcount, sort on top so it will be the current active selection
+            var grid_id = window.location.pathname + '#' + this_grid.attr('id');
+            var count = parseInt(window.localStorage.getItem(grid_id+"_items")) ;
+            if (count !== null) {
+                if (Array.isArray(gridopt.rowCount)) {
+                    var index = gridopt.rowCount.indexOf(count);
+                    if (index > -1) {
+                        gridopt.rowCount.splice(index, 1);
+                        gridopt.rowCount.unshift(count);
+                    }
+                }
+            }
+        }
+
         // construct a new grid
         var grid = this_grid.bootgrid(gridopt).on("loaded.rs.jquery.bootgrid", function (e)
         {
@@ -329,7 +344,57 @@ $.fn.UIBootgrid = function (params) {
         });
     }
 
-    //
+    /**
+     * load previous selections
+     */
+    this.load_selection = function() {
+        if ($(this_grid).data('store-selection') === true && window.localStorage) {
+            var grid_id = window.location.pathname + '#' + this_grid.attr('id');
+            try {
+                var settings = JSON.parse(window.localStorage.getItem(grid_id));
+                if (settings != null) {
+                    $.each(settings, function(field, value){
+                        $('#'+ this_grid.attr('id')).find('[data-column-id="' +field+ '"]').data('visible', value);
+                    });
+                }
+            } catch (e) {
+                null;
+            }
+        }
+    }
+
+    /**
+     * store selections when data-store-selection=true
+     */
+    this.store_selection = function() {
+        if ($(this_grid).data('store-selection') === true && window.localStorage) {
+            var grid_id = window.location.pathname + '#' + this_grid.attr('id');
+            // hook event handler to catch changing column selections
+            $("#"+this_grid.attr('id')+"-header .dropdown-item-checkbox").unbind('click').click(function () {
+                var settings = {};
+                try {
+                    settings = JSON.parse(window.localStorage.getItem(grid_id));
+                    if (settings == null) {
+                        settings = {};
+                    }
+                } catch (e) {
+                    settings = {};
+                }
+                if ($(this).attr('name') !== undefined) {
+                    settings[$(this).attr('name')] = $(this).is(':checked');
+                }
+                window.localStorage.setItem(grid_id, JSON.stringify(settings));
+            });
+            // hook event handler to catch changing row counters
+            $("#"+this_grid.attr('id')+"-header .dropdown-item-button").unbind('click').click(function () {
+                window.localStorage.setItem(grid_id+"_items", $(this).data('action'));
+            });
+        }
+    }
+
+    /**
+     * init bootgrids
+     */
     return this.each((function(){
         // since we start using simple class selectors for our commands, we need to make sure "add" and
         // "delete selected" actions are properly marked
@@ -337,6 +402,8 @@ $.fn.UIBootgrid = function (params) {
         $(this).find("*[data-action=deleteSelected]").addClass('command-delete-selected');
 
         if (params != undefined && params['search'] != undefined) {
+            // load previous selections when enabled
+            this_grid.load_selection();
             // create new bootgrid component and link source
             var grid = this_grid.construct();
 
@@ -360,6 +427,8 @@ $.fn.UIBootgrid = function (params) {
                         console.log("not all requirements met to link " + k);
                     }
                 });
+                // store selections when enabled
+                this_grid.store_selection();
             });
             return grid;
         }