@nethserver/ns8-ui-lib 2.0.1 → 2.1.0

package/dist/ns8-ui-lib.ssr.js

@@ -17142,7 +17142,28 @@ var LottieService = {
       GearsLottie: GearsLottie
     };
   }
-};var script$a = {
+};/*
+ * Copyright (C) 2023 Nethesis S.r.l.
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+var StorageService = {
+  name: "StorageService",
+  methods: {
+    getFromStorage: function getFromStorage(prop) {
+      return JSON.parse(localStorage.getItem(prop));
+    },
+    saveToStorage: function saveToStorage(prop, object) {
+      localStorage.setItem(prop, JSON.stringify(object));
+    },
+    deleteFromStorage: function deleteFromStorage(prop) {
+      localStorage.removeItem(prop);
+    }
+  }
+};// localStorage entry holding the page sizes chosen by the user, grouped by
+// page sizes set (e.g. {"10,25,50,100": 50}) or by pageSizeStorageKey prop
+var PAGE_SIZES_STORAGE_KEY = "nsDataTablePageSizes";
+var script$a = {
   name: "NsDataTable",
   extends: vue.CvDataTable,
   components: {
@@ -17157,7 +17178,7 @@ var LottieService = {
     ChevronRight16: ChevronRight16__default["default"],
     NsPagination: NsPagination
   },
-  mixins: [UtilService, LottieService],
+  mixins: [UtilService, LottieService, StorageService],
   props: {
     actionBarAriaLabel: {
       type: String,
@@ -17193,6 +17214,17 @@ var LottieService = {
         return [10, 25, 50, 100];
       }
     },
+    // remember the page size chosen by the user in localStorage
+    persistPageSize: {
+      type: Boolean,
+      default: true
+    },
+    // key used to store the page size; tables with the same key share the same page size.
+    // If empty, tables are grouped by their page sizes set
+    pageSizeStorageKey: {
+      type: String,
+      default: ""
+    },
     rowSize: {
       type: String,
       default: "standard",
@@ -17318,7 +17350,8 @@ var LottieService = {
       searchFilter: "",
       pageStart: 0,
       pageNumber: 0,
-      pageLength: 0
+      pageLength: 0,
+      selectedPageSize: null
     };
   },
   watch: {
@@ -17327,9 +17360,13 @@ var LottieService = {
     },
     filteredRows: function filteredRows() {
       this.$emit("updatePage", this.tablePage);
+    },
+    pageSizeGroup: function pageSizeGroup() {
+      this.selectedPageSize = this.getStoredPageSize();
     }
   },
   created: function created() {
+    this.selectedPageSize = this.getStoredPageSize();
     this.filterRows();
   },
   computed: {
@@ -17337,12 +17374,36 @@ var LottieService = {
       if (this.pageSizes.length) {
         return {
           numberOfItems: this.filteredRows.length,
-          pageSizes: this.pageSizes
+          pageSizes: this.paginationPageSizes
         };
       } else {
         return false;
       }
     },
+    isPageSizePersisted: function isPageSizePersisted() {
+      return this.persistPageSize && this.pageSizes.length > 1 && this.pageSizes.every(function (size) {
+        return typeof size === "number";
+      });
+    },
+    pageSizeGroup: function pageSizeGroup() {
+      if (!this.isPageSizePersisted) {
+        return "";
+      }
+      return this.pageSizeStorageKey || this.pageSizes.join(",");
+    },
+    paginationPageSizes: function paginationPageSizes() {
+      var _this = this;
+      if (this.selectedPageSize === null || !this.pageSizes.includes(this.selectedPageSize)) {
+        return this.pageSizes;
+      }
+      // preselect page size in NsPagination
+      return this.pageSizes.map(function (size) {
+        return {
+          value: size,
+          selected: size === _this.selectedPageSize
+        };
+      });
+    },
     tablePage: function tablePage() {
       if (this.pageSizes.length) {
         return this.filteredRows.slice(this.pageStart, this.pageStart + this.pageLength);
@@ -17405,11 +17466,11 @@ var LottieService = {
       }
     },
     searchMatch: function searchMatch(target, cleanRegex, queryText) {
-      var _this = this;
+      var _this2 = this;
       if (Array.isArray(target)) {
         // search field is an array (e.g. groups)
         return target.some(function (elem) {
-          return _this.searchMatch(elem, cleanRegex, queryText);
+          return _this2.searchMatch(elem, cleanRegex, queryText);
         });
       } else if (typeof target === "string") {
         // search field is a simple string
@@ -17422,12 +17483,12 @@ var LottieService = {
 
         return Object.keys(target).some(function (key) {
           // recursion
-          return _this.searchMatch(target[key], cleanRegex, queryText);
+          return _this2.searchMatch(target[key], cleanRegex, queryText);
         });
       }
     },
     defaultFilterRows: function defaultFilterRows() {
-      var _this2 = this;
+      var _this3 = this;
       if (!this.searchFilter) {
         return this.allRows;
       } else {
@@ -17436,10 +17497,10 @@ var LottieService = {
         var queryText = this.searchFilter.replace(cleanRegex, "");
         var searchResults = this.allRows.filter(function (option) {
           // compare query text with attributes option
-          return _this2.rawColumns.some(function (searchField) {
+          return _this3.rawColumns.some(function (searchField) {
             var target = option[searchField];
             if (target) {
-              return _this2.searchMatch(target, cleanRegex, queryText);
+              return _this3.searchMatch(target, cleanRegex, queryText);
             } else {
               return false;
             }
@@ -17448,7 +17509,45 @@ var LottieService = {
         return searchResults;
       }
     },
+    readStoredPageSizes: function readStoredPageSizes() {
+      try {
+        var storedPageSizes = this.getFromStorage(PAGE_SIZES_STORAGE_KEY);
+        if (storedPageSizes && _typeof$1(storedPageSizes) === "object" && !Array.isArray(storedPageSizes)) {
+          return storedPageSizes;
+        }
+      } catch (e) {
+        // corrupted value or storage not available
+      }
+      return {};
+    },
+    getStoredPageSize: function getStoredPageSize() {
+      if (!this.pageSizeGroup) {
+        return null;
+      }
+      var pageSize = this.readStoredPageSizes()[this.pageSizeGroup];
+      if (this.pageSizes.includes(pageSize)) {
+        return pageSize;
+      }
+      return null;
+    },
+    storePageSize: function storePageSize(pageSize) {
+      if (!this.pageSizeGroup) {
+        return;
+      }
+      var storedPageSizes = this.readStoredPageSizes();
+      storedPageSizes[this.pageSizeGroup] = pageSize;
+      try {
+        this.saveToStorage(PAGE_SIZES_STORAGE_KEY, storedPageSizes);
+      } catch (e) {
+        // storage not available or full
+      }
+    },
     paginateTable: function paginateTable(ev) {
+      if (this.isPageSizePersisted && this.pageLength !== 0 && ev.length !== this.pageLength) {
+        // page size changed by the user
+        this.selectedPageSize = ev.length;
+        this.storePageSize(ev.length);
+      }
       this.pageStart = ev.start - 1;
       this.pageNumber = ev.page;
       this.pageLength = ev.length;
@@ -17804,7 +17903,7 @@ var __vue_inject_styles__$p = undefined;
 /* scoped */
 var __vue_scope_id__$p = undefined;
 /* module identifier */
-var __vue_module_identifier__$p = "data-v-3467b887";
+var __vue_module_identifier__$p = "data-v-34c62134";
 /* functional template */
 var __vue_is_functional_template__$p = false;
 /* style inject */
@@ -24487,24 +24586,6 @@ var queryParam = {
  * Copyright (C) 2023 Nethesis S.r.l.
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
-
-var StorageService = {
-  name: "StorageService",
-  methods: {
-    getFromStorage: function getFromStorage(prop) {
-      return JSON.parse(localStorage.getItem(prop));
-    },
-    saveToStorage: function saveToStorage(prop, object) {
-      localStorage.setItem(prop, JSON.stringify(object));
-    },
-    deleteFromStorage: function deleteFromStorage(prop) {
-      localStorage.removeItem(prop);
-    }
-  }
-};/*
- * Copyright (C) 2023 Nethesis S.r.l.
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
 var task = {
   name: "TaskService",
   mixins: [StorageService, UtilService],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nethserver/ns8-ui-lib",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Vue.js library for NethServer 8 UI",
   "keywords": [
     "nethserver",

package/src/lib-components/NsDataTable.vue

@@ -313,6 +313,11 @@ import Close16 from "@carbon/icons-vue/es/close/16";
 import ChevronRight16 from "@carbon/icons-vue/es/chevron--right/16";
 import UtilService from "../lib-mixins/util.js";
 import LottieService from "../lib-mixins/lottie.js";
+import StorageService from "../lib-mixins/storage.js";
+
+// localStorage entry holding the page sizes chosen by the user, grouped by
+// page sizes set (e.g. {"10,25,50,100": 50}) or by pageSizeStorageKey prop
+const PAGE_SIZES_STORAGE_KEY = "nsDataTablePageSizes";
 
 export default {
   name: "NsDataTable",
@@ -329,7 +334,7 @@ export default {
     ChevronRight16,
     NsPagination,
   },
-  mixins: [UtilService, LottieService],
+  mixins: [UtilService, LottieService, StorageService],
   props: {
     actionBarAriaLabel: { type: String, default: "Table Action Bar" },
     collapseAllAriaLabel: { type: String, default: "Collapse all rows" },
@@ -343,6 +348,11 @@ export default {
       type: Array,
       default: () => [10, 25, 50, 100],
     },
+    // remember the page size chosen by the user in localStorage
+    persistPageSize: { type: Boolean, default: true },
+    // key used to store the page size; tables with the same key share the same page size.
+    // If empty, tables are grouped by their page sizes set
+    pageSizeStorageKey: { type: String, default: "" },
     rowSize: {
       type: String,
       default: "standard",
@@ -395,6 +405,7 @@ export default {
       pageStart: 0,
       pageNumber: 0,
       pageLength: 0,
+      selectedPageSize: null,
     };
   },
   watch: {
@@ -404,8 +415,12 @@ export default {
     filteredRows: function () {
       this.$emit("updatePage", this.tablePage);
     },
+    pageSizeGroup: function () {
+      this.selectedPageSize = this.getStoredPageSize();
+    },
   },
   created() {
+    this.selectedPageSize = this.getStoredPageSize();
     this.filterRows();
   },
   computed: {
@@ -413,12 +428,38 @@ export default {
       if (this.pageSizes.length) {
         return {
           numberOfItems: this.filteredRows.length,
-          pageSizes: this.pageSizes,
+          pageSizes: this.paginationPageSizes,
         };
       } else {
         return false;
       }
     },
+    isPageSizePersisted() {
+      return (
+        this.persistPageSize &&
+        this.pageSizes.length > 1 &&
+        this.pageSizes.every((size) => typeof size === "number")
+      );
+    },
+    pageSizeGroup() {
+      if (!this.isPageSizePersisted) {
+        return "";
+      }
+      return this.pageSizeStorageKey || this.pageSizes.join(",");
+    },
+    paginationPageSizes() {
+      if (
+        this.selectedPageSize === null ||
+        !this.pageSizes.includes(this.selectedPageSize)
+      ) {
+        return this.pageSizes;
+      }
+      // preselect page size in NsPagination
+      return this.pageSizes.map((size) => ({
+        value: size,
+        selected: size === this.selectedPageSize,
+      }));
+    },
     tablePage() {
       if (this.pageSizes.length) {
         return this.filteredRows.slice(
@@ -526,7 +567,56 @@ export default {
         return searchResults;
       }
     },
+    readStoredPageSizes() {
+      try {
+        const storedPageSizes = this.getFromStorage(PAGE_SIZES_STORAGE_KEY);
+
+        if (
+          storedPageSizes &&
+          typeof storedPageSizes === "object" &&
+          !Array.isArray(storedPageSizes)
+        ) {
+          return storedPageSizes;
+        }
+      } catch (e) {
+        // corrupted value or storage not available
+      }
+      return {};
+    },
+    getStoredPageSize() {
+      if (!this.pageSizeGroup) {
+        return null;
+      }
+      const pageSize = this.readStoredPageSizes()[this.pageSizeGroup];
+
+      if (this.pageSizes.includes(pageSize)) {
+        return pageSize;
+      }
+      return null;
+    },
+    storePageSize(pageSize) {
+      if (!this.pageSizeGroup) {
+        return;
+      }
+      const storedPageSizes = this.readStoredPageSizes();
+      storedPageSizes[this.pageSizeGroup] = pageSize;
+
+      try {
+        this.saveToStorage(PAGE_SIZES_STORAGE_KEY, storedPageSizes);
+      } catch (e) {
+        // storage not available or full
+      }
+    },
     paginateTable(ev) {
+      if (
+        this.isPageSizePersisted &&
+        this.pageLength !== 0 &&
+        ev.length !== this.pageLength
+      ) {
+        // page size changed by the user
+        this.selectedPageSize = ev.length;
+        this.storePageSize(ev.length);
+      }
       this.pageStart = ev.start - 1;
       this.pageNumber = ev.page;
       this.pageLength = ev.length;