@webitel/ui-datalist 1.0.0 → 1.0.1

package/src/pagination/createTablePaginationStore.ts

@@ -0,0 +1,64 @@
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+import { usePersistedStorage } from '../persist/usePersistedStorage.ts';
+
+export const createTablePaginationStore = (namespace: string) => {
+  const id = `${namespace}/pagination`;
+
+  return defineStore(id, () => {
+    const page = ref(1);
+    const size = ref(10);
+    const next = ref(false);
+
+    const updatePage = (newPage: number) => {
+      page.value = newPage;
+    };
+
+    const updateSize = (newSize: number) => {
+      size.value = newSize;
+    };
+
+    const $reset = () => {
+      page.value = 1;
+      size.value = 10;
+      next.value = false;
+    };
+
+    const setupPersistence = () => {
+      const { restore: restorePage } = usePersistedStorage({
+        name: 'page',
+        value: page,
+        onRestore: async (restore, name) => {
+          const value = await restore(name);
+          const numValue = +value;
+          if (numValue) page.value = numValue;
+        },
+      });
+
+      const { restore: restoreSize } = usePersistedStorage({
+        name: 'size',
+        value: size,
+        onRestore: async (restore, name) => {
+          const value = await restore(name);
+          const numValue = +value;
+          if (numValue) size.value = numValue;
+        },
+      });
+
+      return Promise.allSettled([restorePage(), restoreSize()]);
+    };
+
+    return {
+      page,
+      size,
+      next,
+
+      updatePage,
+      updateSize,
+
+      setupPersistence,
+      $reset,
+    };
+  });
+};

package/src/persist/PersistedStorage.types.ts

@@ -0,0 +1,51 @@
+import { Ref, WatchOptions } from 'vue';
+
+export enum PersistedStorageType {
+  LocalStorage = 'localStorage',
+  Route = 'route',
+}
+
+// in route query, or in localStorage
+export type PersistStorableValue = string;
+
+export type PersistableValue =
+  | PersistStorableValue
+  | { toString: () => PersistStorableValue };
+
+export interface StorageLike {
+  getItem(key: string): Promise<PersistableValue | null>;
+
+  setItem(key: string, value: PersistableValue): Promise<void>;
+
+  removeItem(key: string): Promise<void>;
+}
+
+export interface PersistedPropertyConfig {
+  name: string;
+  value: Ref<PersistableValue>;
+  storages?: PersistedStorageType | PersistedStorageType[];
+  storagePath?: string;
+  startWatchManually?: boolean;
+  watchConfig?: WatchOptions;
+  onStore?: (
+    save: ({
+      name,
+      value,
+    }: {
+      name: string;
+      value: PersistableValue;
+    }) => Promise<void>,
+    { value, name },
+  ) => Promise<void>;
+  onRestore?: (
+    restore: (name: string) => Promise<PersistableValue>,
+    name: string,
+  ) => Promise<void>;
+}
+
+export interface PersistedStorageController {
+  watch: () => void;
+  unwatch: () => void;
+  restore: () => Promise<void>;
+  reset: () => Promise<void>;
+}

package/src/persist/useLocalStoragePersistedStorage.ts

@@ -0,0 +1,37 @@
+import { StorageLike } from './PersistedStorage.types.ts';
+
+const separator = ';';
+
+const makePath = (storagePath: string, key: string) => `${storagePath}/${key}`;
+
+export const useLocalStoragePersistedStorage = ({
+  storagePath = '',
+}: {
+  storagePath: string;
+}): StorageLike => {
+  const getItem = async (key: string) => {
+    const value = localStorage.getItem(makePath(storagePath, key));
+    try {
+      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;
+    localStorage.setItem(makePath(storagePath, key), value);
+  };
+
+  const removeItem = async (key: string) => {
+    localStorage.removeItem(makePath(storagePath, key));
+  };
+
+  return {
+    getItem,
+    setItem,
+    removeItem,
+  };
+};

package/src/persist/usePersistedStorage.ts

@@ -0,0 +1,151 @@
+import { watch } from 'vue';
+
+import {
+  PersistableValue,
+  PersistedPropertyConfig,
+  PersistedStorageController,
+  PersistedStorageType,
+} from './PersistedStorage.types.ts';
+import { useLocalStoragePersistedStorage } from './useLocalStoragePersistedStorage.ts';
+import { useRoutePersistedStorage } from './useRoutePersistedStorage.ts';
+
+export const usePersistedStorage = ({
+  name,
+  value,
+  storages: configStorages = [PersistedStorageType.Route],
+  storagePath,
+  startWatchManually = false,
+  onStore,
+  onRestore,
+}: PersistedPropertyConfig): PersistedStorageController => {
+  let unwatch = null;
+
+  const setItemFns = [];
+  const getItemFns: Array<(name: string) => Promise<PersistableValue>> = [];
+  const removeItemFns = [];
+
+  const composedValueGetter = async (
+    name: string,
+  ): Promise<PersistableValue[]> => {
+    const settledResults = await Promise.allSettled(
+      getItemFns.map((getter) => getter(name)),
+    );
+
+    return settledResults.reduce((acc, result) => {
+      if (result.status === 'fulfilled') {
+        return [...acc, result.value];
+      }
+      return acc;
+    }, []);
+  };
+
+  const storages = Array.isArray(configStorages)
+    ? configStorages
+    : [configStorages];
+
+  /*
+  order matters, as the first storage in the list has the highest priority
+   */
+  if (storages.includes(PersistedStorageType.Route)) {
+    const { setItem, getItem, removeItem } = useRoutePersistedStorage();
+    setItemFns.push(setItem);
+    getItemFns.push(getItem);
+    removeItemFns.push(removeItem);
+  }
+
+  if (storages.includes(PersistedStorageType.LocalStorage)) {
+    const { setItem, getItem, removeItem } = useLocalStoragePersistedStorage({
+      storagePath,
+    });
+    setItemFns.push(setItem);
+    getItemFns.push(getItem);
+    removeItemFns.push(removeItem);
+  }
+
+  const startWatch = () => {
+    unwatch = watch(
+      value,
+      async () => {
+        /*
+       if onStore callback is provided,
+        call custom logic for storing value
+       */
+        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 }) => {
+            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 },
+    );
+  };
+
+  const restore = async () => {
+    /*
+       if onRestore callback is provided,
+        call custom logic for restoring value
+       */
+    if (onRestore) {
+      /*
+         wrap all getItemFns in one callback
+          so that onRestore is called only once on each value change
+         */
+      const restore = async (name: string) => {
+        const restoredValues = await composedValueGetter(name);
+        /*
+         not sure if value to restore should be picked automatically
+          before running onRestore
+         */
+        return restoredValues.find((value) => {
+          return value != null;
+        });
+      };
+      await onRestore(restore, name);
+    } else {
+      /*
+       else, perform default restoring logic
+       */
+      const restoredValues = await composedValueGetter(name);
+      const restoredValue = restoredValues.find((value) => value !== null);
+
+      if (restoredValue !== undefined) {
+        value.value = restoredValue;
+      }
+    }
+    /*
+      start watching after restoring value to prevent restored value
+       from storing again
+     */
+    if (!startWatchManually) {
+      startWatch();
+    }
+  };
+
+  const reset = async () => {
+    await Promise.all(removeItemFns.map((removeItem) => removeItem(name)));
+  };
+
+  const endWatch = () => unwatch && unwatch();
+
+  return {
+    watch: startWatch,
+    unwatch: endWatch,
+    restore,
+    reset,
+  };
+};

package/src/persist/useRoutePersistedStorage.ts

@@ -0,0 +1,41 @@
+import { useRoute, useRouter } from 'vue-router';
+
+import { StorageLike } from './PersistedStorage.types.ts';
+
+export const useRoutePersistedStorage = (): StorageLike => {
+  const router = useRouter();
+  const route = useRoute();
+
+  const getItem = async (key: string) => {
+    return route.query[key];
+  };
+
+  const setItem = async (key: string, value: string | string[]) => {
+    await router.replace({
+      name: route.name,
+      params: route.params,
+      hash: route.hash,
+      query: {
+        ...route.query,
+        [key]: value,
+      },
+    });
+  };
+
+  const removeItem = async (key: string) => {
+    const query = { ...route.query };
+    delete query[key];
+    await router.replace({
+      name: route.name,
+      params: route.params,
+      hash: route.hash,
+      query,
+    });
+  };
+
+  return {
+    getItem,
+    setItem,
+    removeItem,
+  };
+};

package/src/table/createTableStore.store.ts

@@ -0,0 +1,206 @@
+import set from 'lodash/fp/set';
+import { defineStore, storeToRefs } from 'pinia';
+import { type Ref, ref, watch } from 'vue';
+
+import { createTableFiltersStore } from '../filters/createTableFiltersStore.ts';
+import { createTableHeadersStore } from '../headers/createTableHeadersStore.ts';
+import { createTablePaginationStore } from '../pagination/createTablePaginationStore.ts';
+import {
+  PatchItemPropertyParams,
+  TableStore,
+  useTableStoreParams,
+} from '../types/tableStore.types.ts';
+
+export const createTableStore = <Entity extends { id: string; etag?: string }>(
+  namespace: string,
+  { apiModule, headers, disablePersistence }: useTableStoreParams<Entity>,
+) => {
+  const usePaginationStore = createTablePaginationStore(namespace);
+  const useHeadersStore = createTableHeadersStore(namespace, { headers });
+  const useFiltersStore = createTableFiltersStore(namespace);
+
+  return defineStore(namespace, (): TableStore<Entity> => {
+    const parentId = ref();
+
+    const paginationStore = usePaginationStore();
+    const { page, size, next } = storeToRefs(paginationStore);
+    const {
+      updatePage,
+      updateSize,
+      // $reset: $resetPaginationStore,
+      $patch: $patchPaginationStore,
+      setupPersistence: setupPaginationPersistence,
+    } = paginationStore;
+
+    const headersStore = useHeadersStore();
+    const { headers, shownHeaders, fields, sort } = storeToRefs(headersStore);
+    const {
+      updateSort,
+      updateShownHeaders,
+      setupPersistence: setupHeadersPersistence,
+    } = headersStore;
+
+    const filtersStore = useFiltersStore();
+    const { filtersManager, isRestoring: isFiltersRestoring } =
+      storeToRefs(filtersStore);
+    const {
+      hasFilter,
+      addFilter,
+      updateFilter,
+      deleteFilter,
+      setupPersistence: setupFiltersPersistence,
+    } = filtersStore;
+
+    const dataList: Ref<Entity[]> = ref([]);
+    const selected: Ref<Entity[]> = ref([]);
+    const error = ref(null);
+    const isLoading = ref(false);
+
+    const updateSelected = (value: Entity[]) => {
+      selected.value = value;
+    };
+
+    const loadDataList = async () => {
+      isLoading.value = true;
+      $patchPaginationStore({ next: false });
+
+      const params = {
+        ...filtersManager.value.getAllValues(),
+        page: page.value,
+        size: size.value,
+        sort: sort.value,
+        fields: fields.value,
+        parentId: parentId.value,
+      };
+
+      try {
+        const { items, next } = await apiModule.getList(params);
+
+        dataList.value = items;
+        updateSelected([]);
+        $patchPaginationStore({ next });
+      } catch (err) {
+        error.value = err;
+        throw err;
+      } finally {
+        isLoading.value = false;
+      }
+    };
+
+    const patchItemProperty = async ({
+      index,
+      path,
+      value,
+    }: PatchItemPropertyParams) => {
+      const item = dataList.value[index];
+      const changes = {};
+      set(path, value, changes);
+
+      try {
+        await apiModule.patch({
+          changes,
+          parentId: parentId.value,
+          id: item.id,
+          etag: item.etag,
+        });
+        set(path, value, item);
+      } catch (err) {
+        await loadDataList();
+        throw err;
+      }
+    };
+
+    const deleteEls = async (_els: Entity[]) => {
+      const els = Array.isArray(_els) ? _els : [_els];
+      const deleteEl = (el: Entity) => {
+        return apiModule.delete({
+          id: el.id,
+          etag: el.etag,
+          parentId: parentId.value,
+        });
+      };
+
+      try {
+        await Promise.all(els.map(deleteEl));
+      } finally {
+        await loadDataList();
+      }
+    };
+
+    const initialize = async ({
+      parentId: storeParentId,
+    }: { parentId?: string | number } = {}) => {
+      if (storeParentId) {
+        parentId.value = storeParentId;
+      }
+
+      if (!disablePersistence) {
+        await Promise.allSettled([
+          setupPaginationPersistence(),
+          setupFiltersPersistence(),
+          setupHeadersPersistence(),
+        ]);
+      }
+
+      let loadingAfterFiltersChange = false;
+
+      watch(
+        [() => filtersManager.value.getAllValues(), sort, fields, size],
+        async () => {
+          loadingAfterFiltersChange = true;
+          updatePage(1);
+          await loadDataList();
+          loadingAfterFiltersChange = false;
+        },
+        /* filtersManager requires deep watching for its values */
+        { deep: true },
+      );
+
+      watch([page], () => {
+        if (!loadingAfterFiltersChange) {
+          return loadDataList();
+        }
+      });
+
+      return loadDataList();
+    };
+
+    return {
+      dataList,
+      selected,
+      error,
+      isLoading,
+
+      page,
+      size,
+      next,
+
+      headers,
+      shownHeaders,
+      fields,
+      sort,
+
+      filtersManager,
+      isFiltersRestoring,
+
+      initialize,
+
+      loadDataList,
+
+      updateSelected,
+      patchItemProperty,
+      deleteEls,
+
+      updatePage,
+      updateSize,
+
+      updateSort,
+      updateShownHeaders,
+
+      hasFilter,
+      addFilter,
+      updateFilter,
+      deleteFilter,
+    };
+  });
+};

package/src/types/tableStore.types.ts

@@ -0,0 +1,61 @@
+import type { Ref } from 'vue';
+
+import { ApiModule } from '../../../../api/types/ApiModule.type.ts';
+import { IFiltersManager } from '../filters';
+
+export interface useTableStoreParams<Entity> {
+  apiModule: ApiModule<Entity>;
+  headers: [];
+  disablePersistence?: boolean | [];
+  // etagMode: boolean;
+}
+
+export interface PatchItemPropertyParams {
+  index: number;
+  path: string;
+  value: unknown;
+}
+
+export interface TableStore<Entity> {
+  // tableStore
+  dataList: Ref<Entity[]>;
+  selected: Ref<Entity[]>;
+  error: Ref<Error | null>;
+  isLoading: Ref<boolean>;
+
+  // paginationStore
+  page: Ref<number>;
+  size: Ref<number>;
+  next: Ref<boolean>;
+
+  // headersStore
+  headers: Ref<[]>;
+  shownHeaders: Ref<[]>;
+  fields: Ref<[]>;
+  sort: Ref<string>;
+
+  // filtersStore
+  filtersManager: Ref<IFiltersManager>;
+  isFiltersRestoring: Ref<boolean>;
+
+  // tableStore
+  initialize: () => Promise<void>;
+  loadDataList: (query?: object) => Promise<void>;
+  updateSelected: (selected: Entity[]) => void;
+  patchItemProperty: (payload: PatchItemPropertyParams) => Promise<void>;
+  deleteEls: (deleted: Entity[]) => Promise<void>;
+
+  // paginationStore
+  updatePage: (page: number) => void;
+  updateSize: (size: number) => void;
+
+  // headersStore
+  updateSort: (column: object) => void;
+  updateShownHeaders: () => void;
+
+  // filtersStore
+  hasFilter: IFiltersManager['hasFilter'];
+  addFilter: IFiltersManager['addFilter'];
+  updateFilter: IFiltersManager['updateFilter'];
+  deleteFilter: IFiltersManager['deleteFilter'];
+}