@webitel/ui-sdk 24.12.96 → 24.12.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.96",
+  "version": "24.12.97",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/modules/Filters/v2/headers/createTableHeadersStore.ts

@@ -1,89 +1,138 @@
-import { computed, ref } from 'vue';
-import { defineStore } from 'pinia';
-import { sortToQueryAdapter } from '../../../../scripts';
-import { SortSymbols } from '../../../../scripts/sortQueryAdapters';
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+import {WtTableHeader} from "../../../../components/wt-table/types/WtTable";
+import { sortToQueryAdapter } from "../../../../scripts";
+import { SortSymbols } from "../../../../scripts/sortQueryAdapters";
+import { usePersistedStorage } from "../persist/usePersistedStorage.ts";
 
 export const createTableHeadersStore = (
-  namespace: string,
-  { headers: rawHeaders },
+	namespace: string,
+	{ headers: rawHeaders },
 ) => {
-  const id = `${namespace}/headers`;
-
-  return defineStore(id, () => {
-    const headers = ref(rawHeaders);
-
-    const shownHeaders = computed(() => {
-      return headers.value.filter((header) => header.show);
-    });
-
-    const fields = computed(() => {
-      return shownHeaders.value.map((header) => header.field);
-    });
-
-    const sort = computed(() => {
-      const encodeSortQuery = ({ column, order }) =>
-        `${sortToQueryAdapter(order)}${column.field}`;
-
-      const sortedCol = headers.value.find((header) => header.sort);
-
-      return sortedCol
-        ? encodeSortQuery({ column: sortedCol, order: sortedCol.sort })
-        : null;
-    });
-
-    const updateShownHeaders = () => {};
-
-    const updateSort = (column) => {
-      const getNextSortOrder = (sort) => {
-        switch (sort) {
-          case SortSymbols.NONE:
-            return SortSymbols.ASC;
-          case SortSymbols.ASC:
-            return SortSymbols.DESC;
-          case SortSymbols.DESC:
-            return SortSymbols.NONE;
-          default:
-            return SortSymbols.ASC;
-        }
-      };
-
-      const changeHeadersSort = ({ headers, sortedHeader, order }) => {
-        return headers.map((header) => {
-          if (header.sort === undefined) return header;
-
-          // reset all headers by default
-          let newSort = null;
-
-          if (header.field === sortedHeader.field) {
-            newSort = order;
+	const id = `${namespace}/headers`;
+
+	return defineStore(id, () => {
+		const headers = ref(rawHeaders);
+
+		const shownHeaders = computed(() => {
+			return headers.value.filter((header) => header.show);
+		});
+
+		const fields = computed(() => {
+			return shownHeaders.value.map((header) => header.field);
+		});
+
+		const sort = computed(() => {
+			const encodeSortQuery = ({ column, order }) =>
+				`${sortToQueryAdapter(order)}${column.field}`;
+
+			const sortedCol = headers.value.find((header) => header.sort);
+
+			return sortedCol
+				? encodeSortQuery({ column: sortedCol, order: sortedCol.sort })
+				: null;
+		});
+
+		const $reset = () => {
+			headers.value = rawHeaders;
+		};
+
+		const updateShownHeaders = (value) => {
+			headers.value = value;
+		};
+
+        const updateFields = (fields: string[]) => {
+          const newHeaders = headers.value.map((header: WtTableHeader) => {
+            return {
+              ...header,
+              show: fields.includes(header.field),
+            };
+          });
+          updateShownHeaders(newHeaders);
+        };
+
+		const updateSort = (column) => {
+			const getNextSortOrder = (sort) => {
+				switch (sort) {
+					case SortSymbols.NONE:
+						return SortSymbols.ASC;
+					case SortSymbols.ASC:
+						return SortSymbols.DESC;
+					case SortSymbols.DESC:
+						return SortSymbols.NONE;
+					default:
+						return SortSymbols.ASC;
+				}
+			};
+
+			const changeHeadersSort = ({ headers, sortedHeader, order }) => {
+				return headers.map((header) => {
+					if (header.sort === undefined) return header;
+
+					// reset all headers by default
+					let newSort = null;
+
+					if (header.field === sortedHeader.field) {
+						newSort = order;
+					}
+
+					return {
+						...header,
+						sort: newSort,
+					};
+				});
+			};
+
+			const order = getNextSortOrder(column.sort);
+
+			const newHeaders = changeHeadersSort({
+				headers: headers.value,
+				sortedHeader: column,
+				order,
+			});
+
+			headers.value = newHeaders;
+		};
+
+      const setupPersistence = async () => {
+        const { restore: restoreFields } = usePersistedStorage({
+          name: "fields",
+          value: fields,
+          onStore: (save, { name }) => {
+            const value = fields.value.join(',');
+            return save({ name, value })
+          },
+          onRestore: async (restore, name) => {
+            const value = await restore(name) as string;
+            if (value) {
+              return updateFields(value.split(','));
+            }
           }
-
-          return {
-            ...header,
-            sort: newSort,
-          };
         });
-      };
 
-      const order = getNextSortOrder(column.sort);
+        const { restore: restoreSort } = usePersistedStorage({
+          name: "sort",
+          value: sort,
+        });
 
-      const newHeaders = changeHeadersSort({
-        headers: headers.value,
-        sortedHeader: column,
-        order,
-      });
+        return Promise.allSettled([
+          restoreFields(),
+          restoreSort(),
+        ]);
+      };
 
-      headers.value = newHeaders;
-    };
+		return {
+			headers,
+			shownHeaders,
+			fields,
+			sort,
 
-    return {
-      headers,
-      shownHeaders,
-      fields,
-      sort,
+			updateShownHeaders,
+			updateSort,
 
-      updateShownHeaders,
-      updateSort,
-    };
-  });
+			setupPersistence,
+			$reset,
+		};
+	});
 };

package/src/modules/Filters/v2/persist/usePersistedStorage.ts

@@ -72,11 +72,6 @@ export const usePersistedStorage = ({
           so that onStore is called only once on each value change
          */
         const save = async ({ name, value: storedValue }) => {
-          // await Promise.allSettled(
-          //   setItemFns.map((setItem) => {
-          //     return setItem({ name, value: storedValue });
-          //   }),
-          // );
           setItemFns.forEach((setter) => {
             setter(name, storedValue);
           });

package/src/modules/Filters/v2/table/createTableStore.store.ts

@@ -32,7 +32,7 @@ export const createTableStore = <Entity extends { id: string; etag?: string }>(
 
     const headersStore = useHeadersStore();
     const { headers, shownHeaders, fields, sort } = storeToRefs(headersStore);
-    const { updateSort, updateShownHeaders } = headersStore;
+    const { updateSort, updateShownHeaders, setupPersistence: setupHeadersPersistence } = headersStore;
 
     const filtersStore = useFiltersStore();
     const { filtersManager, isRestoring: isFiltersRestoring } =
@@ -116,12 +116,13 @@ export const createTableStore = <Entity extends { id: string; etag?: string }>(
       await Promise.allSettled([
         setupPaginationPersistence(),
         setupFiltersPersistence(),
+        setupHeadersPersistence(),
       ]);
 
       let loadingAfterFiltersChange = false;
 
       watch(
-        [() => filtersManager.value.getAllValues(), sort, size],
+        [() => filtersManager.value.getAllValues(), sort, fields, size],
         async () => {
           loadingAfterFiltersChange = true;
           updatePage(1);