feat(datatable): save text filters in session storage (#4741)

* feat(datatable): save text filters in session storage

* refactor(session): as jsdoc comments

app/portainer/services/authentication.js

@@ -1,3 +1,5 @@
+import { clear as clearSessionStorage } from './session-storage';
+
 angular.module('portainer.app').factory('Authentication', [
   '$async',
   '$state',
@@ -38,6 +40,7 @@ angular.module('portainer.app').factory('Authentication', [
         await Auth.logout().$promise;
       }
 
+      clearSessionStorage();
       StateManager.clean();
       EndpointProvider.clean();
       LocalStorage.cleanAuthData();

app/portainer/services/datatableService.js

@@ -1,70 +1,88 @@
-angular.module('portainer.app').factory('DatatableService', [
-  'LocalStorage',
-  function DatatableServiceFactory(LocalStorage) {
-    'use strict';
+import angular from 'angular';
 
-    var service = {};
+import * as sessionStorage from './session-storage';
 
-    service.setDataTableSettings = function (key, settings) {
-      LocalStorage.storeDataTableSettings(key, settings);
+angular.module('portainer.app').factory('DatatableService', DatatableServiceFactory);
+
+const DATATABLE_PREFIX = 'datatable_';
+const TEXT_FILTER_KEY_PREFIX = `${DATATABLE_PREFIX}text_filter_`;
+
+/* @ngInject */
+function DatatableServiceFactory(LocalStorage) {
+  return {
+    setDataTableSettings,
+    getDataTableSettings,
+    setDataTableTextFilters,
+    getDataTableTextFilters,
+    setDataTableFilters,
+    getDataTableFilters,
+    getDataTableOrder,
+    setDataTableOrder,
+    setDataTableExpandedItems,
+    setColumnVisibilitySettings,
+    getDataTableExpandedItems,
+    setDataTableSelectedItems,
+    getDataTableSelectedItems,
+    getColumnVisibilitySettings,
+  };
+
+  function setDataTableSettings(key, settings) {
+    LocalStorage.storeDataTableSettings(key, settings);
+  }
+
+  function getDataTableSettings(key) {
+    return LocalStorage.getDataTableSettings(key);
+  }
+
+  function setDataTableTextFilters(key, filters) {
+    sessionStorage.save(TEXT_FILTER_KEY_PREFIX + key, filters);
+  }
+
+  function getDataTableTextFilters(key) {
+    return sessionStorage.get(TEXT_FILTER_KEY_PREFIX + key);
+  }
+
+  function setDataTableFilters(key, filters) {
+    LocalStorage.storeDataTableFilters(key, filters);
+  }
+
+  function getDataTableFilters(key) {
+    return LocalStorage.getDataTableFilters(key);
+  }
+
+  function getDataTableOrder(key) {
+    return LocalStorage.getDataTableOrder(key);
+  }
+
+  function setDataTableOrder(key, orderBy, reverse) {
+    var filter = {
+      orderBy: orderBy,
+      reverse: reverse,
     };
+    LocalStorage.storeDataTableOrder(key, filter);
+  }
 
-    service.getDataTableSettings = function (key) {
-      return LocalStorage.getDataTableSettings(key);
-    };
+  function setDataTableExpandedItems(key, expandedItems) {
+    LocalStorage.storeDataTableExpandedItems(key, expandedItems);
+  }
 
-    service.setDataTableTextFilters = function (key, filters) {
-      LocalStorage.storeDataTableTextFilters(key, filters);
-    };
+  function setColumnVisibilitySettings(key, columnVisibility) {
+    LocalStorage.storeColumnVisibilitySettings(key, columnVisibility);
+  }
 
-    service.getDataTableTextFilters = function (key) {
-      return LocalStorage.getDataTableTextFilters(key);
-    };
+  function getDataTableExpandedItems(key) {
+    return LocalStorage.getDataTableExpandedItems(key);
+  }
 
-    service.setDataTableFilters = function (key, filters) {
-      LocalStorage.storeDataTableFilters(key, filters);
-    };
+  function setDataTableSelectedItems(key, selectedItems) {
+    LocalStorage.storeDataTableSelectedItems(key, selectedItems);
+  }
 
-    service.getDataTableFilters = function (key) {
-      return LocalStorage.getDataTableFilters(key);
-    };
+  function getDataTableSelectedItems(key) {
+    return LocalStorage.getDataTableSelectedItems(key);
+  }
 
-    service.getDataTableOrder = function (key) {
-      return LocalStorage.getDataTableOrder(key);
-    };
-
-    service.setDataTableOrder = function (key, orderBy, reverse) {
-      var filter = {
-        orderBy: orderBy,
-        reverse: reverse,
-      };
-      LocalStorage.storeDataTableOrder(key, filter);
-    };
-
-    service.setDataTableExpandedItems = function (key, expandedItems) {
-      LocalStorage.storeDataTableExpandedItems(key, expandedItems);
-    };
-
-    service.setColumnVisibilitySettings = function (key, columnVisibility) {
-      LocalStorage.storeColumnVisibilitySettings(key, columnVisibility);
-    };
-
-    service.getDataTableExpandedItems = function (key) {
-      return LocalStorage.getDataTableExpandedItems(key);
-    };
-
-    service.setDataTableSelectedItems = function (key, selectedItems) {
-      LocalStorage.storeDataTableSelectedItems(key, selectedItems);
-    };
-
-    service.getDataTableSelectedItems = function (key) {
-      return LocalStorage.getDataTableSelectedItems(key);
-    };
-
-    service.getColumnVisibilitySettings = function (key) {
-      return LocalStorage.getColumnVisibilitySettings(key);
-    };
-
-    return service;
-  },
-]);
+  function getColumnVisibilitySettings(key) {
+    return LocalStorage.getColumnVisibilitySettings(key);
+  }
+}

app/portainer/services/session-storage.js

@@ -0,0 +1,31 @@
+/**
+ * clears the sessionStorage
+ */
+export function clear() {
+  sessionStorage.clear();
+}
+
+/**
+ * stores `value` as string in `sessionStorage[key]`
+ *
+ * @param {string} key the key to store value at
+ * @param {any} value the value to store - will be stringified using JSON.stringify
+ *
+ */
+export function save(key, value) {
+  sessionStorage.setItem(key, JSON.stringify(value));
+}
+
+/**
+ * get parses the value stored in sessionStorage[key], if it's not available returns undefined
+ *
+ * @param {string} key
+ */
+export function get(key) {
+  try {
+    const value = sessionStorage.getItem(key);
+    return JSON.parse(value);
+  } catch (e) {
+    return;
+  }
+}