@nethserver/ns8-ui-lib 2.0.1 → 2.1.0

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

@@ -18069,7 +18069,31 @@ var LottieService = {
   }
 };
 
+/*
+ * Copyright (C) 2023 Nethesis S.r.l.
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+var StorageService = {
+  name: "StorageService",
+  methods: {
+    getFromStorage(prop) {
+      return JSON.parse(localStorage.getItem(prop));
+    },
+    saveToStorage(prop, object) {
+      localStorage.setItem(prop, JSON.stringify(object));
+    },
+    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
+const PAGE_SIZES_STORAGE_KEY = "nsDataTablePageSizes";
 var script$a = {
   name: "NsDataTable",
   extends: CvDataTable,
@@ -18085,7 +18109,7 @@ var script$a = {
     ChevronRight16,
     NsPagination
   },
-  mixins: [UtilService, LottieService],
+  mixins: [UtilService, LottieService, StorageService],
   props: {
     actionBarAriaLabel: {
       type: String,
@@ -18117,6 +18141,17 @@ var script$a = {
       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",
@@ -18234,7 +18269,8 @@ var script$a = {
       searchFilter: "",
       pageStart: 0,
       pageNumber: 0,
-      pageLength: 0
+      pageLength: 0,
+      selectedPageSize: null
     };
   },
   watch: {
@@ -18243,9 +18279,13 @@ var script$a = {
     },
     filteredRows: function () {
       this.$emit("updatePage", this.tablePage);
+    },
+    pageSizeGroup: function () {
+      this.selectedPageSize = this.getStoredPageSize();
     }
   },
   created() {
+    this.selectedPageSize = this.getStoredPageSize();
     this.filterRows();
   },
   computed: {
@@ -18253,12 +18293,31 @@ var script$a = {
       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(this.pageStart, this.pageStart + this.pageLength);
@@ -18362,7 +18421,45 @@ var script$a = {
         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;
@@ -26410,26 +26507,6 @@ var queryParam = {
   }
 };
 
-/*
- * Copyright (C) 2023 Nethesis S.r.l.
- * SPDX-License-Identifier: GPL-3.0-or-later
- */
-
-var StorageService = {
-  name: "StorageService",
-  methods: {
-    getFromStorage(prop) {
-      return JSON.parse(localStorage.getItem(prop));
-    },
-    saveToStorage(prop, object) {
-      localStorage.setItem(prop, JSON.stringify(object));
-    },
-    deleteFromStorage(prop) {
-      localStorage.removeItem(prop);
-    }
-  }
-};
-
 /*
  * Copyright (C) 2023 Nethesis S.r.l.
  * SPDX-License-Identifier: GPL-3.0-or-later