@webitel/ui-sdk 25.4.14 → 25.4.16

package/package.json

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

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

@@ -1,138 +1,140 @@
-import { defineStore } from "pinia";
-import { computed, ref } from "vue";
+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";
+import { WtTableHeader } from '../../../../components/wt-table/types/WtTable';
+import { sortToQueryAdapter } from '../../../../scripts';
+import { SortSymbols } from '../../../../scripts/sortQueryAdapters';
+import { PersistedStorageType } from '../persist/PersistedStorage.types';
+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 $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 id = `${namespace}/headers`;
 
-		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 defineStore(id, () => {
+    const headers = ref(rawHeaders);
 
-        const { restore: restoreSort } = usePersistedStorage({
-          name: "sort",
-          value: sort,
-        });
+    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;
+    };
 
-        return Promise.allSettled([
-          restoreFields(),
-          restoreSort(),
-        ]);
+    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;
+        }
       };
 
-		return {
-			headers,
-			shownHeaders,
-			fields,
-			sort,
+      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;
+          }
 
-			updateShownHeaders,
-			updateSort,
+          return {
+            ...header,
+            sort: newSort,
+          };
+        });
+      };
 
-			setupPersistence,
-			$reset,
-		};
-	});
+      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,
+        storages: [
+          PersistedStorageType.LocalStorage,
+          PersistedStorageType.Route,
+        ],
+        storagePath: id,
+        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(','));
+          }
+        },
+      });
+
+      const { restore: restoreSort } = usePersistedStorage({
+        name: 'sort',
+        value: sort,
+      });
+
+      return Promise.allSettled([restoreFields(), restoreSort()]);
+    };
+
+    return {
+      headers,
+      shownHeaders,
+      fields,
+      sort,
+
+      updateShownHeaders,
+      updateSort,
+
+      setupPersistence,
+      $reset,
+    };
+  });
 };

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

@@ -4,28 +4,34 @@ const separator = ';';
 
 const makePath = (storagePath: string, key: string) => `${storagePath}/${key}`;
 
-export const useLocalStoragePersistedStorage = ({ storagePath = '' }: { storagePath: string }): StorageLike => {
+export const useLocalStoragePersistedStorage = ({
+  storagePath = '',
+}: {
+  storagePath: string;
+}): StorageLike => {
   const getItem = async (key: string) => {
     const value = localStorage.getItem(makePath(storagePath, key));
     try {
-      return value.split(separator);
+      return value.split(separator).join();
     } catch {
       return value;
     }
   };
 
   const setItem = async (key: string, inputValue: string | string[]) => {
-    const value = Array.isArray(inputValue) ? inputValue.join(separator) : inputValue;
+    const value = Array.isArray(inputValue)
+      ? inputValue.join(separator)
+      : inputValue;
     localStorage.setItem(makePath(storagePath, key), value);
-  }
+  };
 
   const removeItem = async (key: string) => {
     localStorage.removeItem(makePath(storagePath, key));
-  }
+  };
 
   return {
     getItem,
     setItem,
     removeItem,
   };
-}
+};

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

@@ -24,9 +24,11 @@ export const usePersistedStorage = ({
   const getItemFns: Array<(name: string) => Promise<PersistableValue>> = [];
   const removeItemFns = [];
 
-  const composedValueGetter = async (name: string): Promise<PersistableValue[]> => {
+  const composedValueGetter = async (
+    name: string,
+  ): Promise<PersistableValue[]> => {
     const settledResults = await Promise.allSettled(
-      getItemFns.map((getter) => getter(name))
+      getItemFns.map((getter) => getter(name)),
     );
 
     return settledResults.reduce((acc, result) => {
@@ -61,32 +63,36 @@ export const usePersistedStorage = ({
   }
 
   const startWatch = () => {
-    unwatch = watch(value, async () => {
-      /*
+    unwatch = watch(
+      value,
+      async () => {
+        /*
        if onStore callback is provided,
         call custom logic for storing value
        */
-      if (onStore) {
-        /*
+        if (onStore) {
+          /*
          wrap all setItemFns in one callback
           so that onStore is called only once on each value change
          */
-        const save = async ({ name, value: storedValue }) => {
+          const save = async ({ name, value: storedValue }) => {
+            setItemFns.forEach((setter) => {
+              setter(name, storedValue);
+            });
+          };
+          await onStore(save, { name, value });
+        } else {
+          /*
+       else, perform default storing logic
+       */
+          const storedValue = value.value;
           setItemFns.forEach((setter) => {
             setter(name, storedValue);
           });
-        };
-        await onStore(save, { name, value });
-      } else {
-        /*
-       else, perform default storing logic
-       */
-        const storedValue = value.value;
-        setItemFns.forEach((setter) => {
-          setter(name, storedValue);
-        });
-      }
-    }, { deep: true });
+        }
+      },
+      { deep: true },
+    );
   };
 
   const restore = async () => {
@@ -106,7 +112,7 @@ export const usePersistedStorage = ({
           before running onRestore
          */
         return restoredValues.find((value) => {
-          return value !== null;
+          return value != null;
         });
       };
       await onRestore(restore, name);