@webitel/ui-datalist 26.8.5 → 26.8.7

package/Readme.md

@@ -36,6 +36,7 @@ This package contains:
 ```ts
 import {
  createTableStore, // pinia store factory
+ useNestedTableList, // list of a card page's nested tab: owned, loaded and reset by the card
   } from '@webitel/ui-datalist';
 ```
 

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.8.5",
+	"version": "26.8.7",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -b tsconfig.build.json",
 		"typecheck": "vue-tsc --noEmit -p ./tsconfig.typecheck.json",
 		"lint:fix": "npx biome check --write ./src",
 		"biome:ci:gh": "biome ci ./src --reporter=github",
-		"test:unit": "node -e \"process.exit(0)\"",
+		"test:unit": "vitest run --root ../.. packages/ui-datalist/src",
 		"lint": "biome ci ./src",
 		"test": "npm run test:unit",
 		"ci:check": "npm run biome:ci:gh && npm run test:unit",
@@ -44,6 +44,7 @@
 		"@webitel/ui-sdk": "~26.8",
 		"axios": "^1.15.2",
 		"date-fns": "^4",
+		"lodash-es": "^4.17.21",
 		"pinia": "^3.x",
 		"vue": "^3.5",
 		"zod": "^4.x"

package/src/modules/filters/__tests__/createTableFiltersStore.spec.ts

@@ -40,9 +40,9 @@ describe('tableFiltersStoreBody', () => {
 		runWithRouter = (fn) => app.runWithContext(fn);
 	});
 
-	const setUpStore = async () => {
+	const setUpStore = async (options?: { isNested?: boolean }) => {
 		const store = tableFiltersStoreBody(namespace);
-		await runWithRouter(() => store.setupPersistence());
+		await runWithRouter(() => store.setupPersistence(options));
 		return store;
 	};
 
@@ -133,6 +133,42 @@ describe('tableFiltersStoreBody', () => {
 			expect(router.currentRoute.value.query.searchMode).toBeUndefined();
 			expect(localStorage.getItem(`${namespace}/searchMode`)).toBe('subject');
 		});
+
+		describe('a nested list', () => {
+			it('keeps an added filter out of the route query', async () => {
+				const store = await setUpStore({
+					isNested: true,
+				});
+
+				store.addFilter({
+					name: 'status',
+					value: 'open',
+				});
+				await new Promise((resolve) => setTimeout(resolve));
+
+				expect(
+					router.currentRoute.value.query[filtersQueryKey],
+				).toBeUndefined();
+				expect(sessionStorage.getItem(`${namespace}/filters`)).toContain(
+					'open',
+				);
+			});
+
+			it('restores filters from sessionStorage, not the route query', async () => {
+				sessionStorage.setItem(
+					`${namespace}/filters`,
+					JSON.stringify({
+						status_val: 'open',
+					}),
+				);
+
+				const store = await setUpStore({
+					isNested: true,
+				});
+
+				expect(store.filtersManager.getFilter('status')?.value).toBe('open');
+			});
+		});
 	});
 
 	describe('syncPersistence', () => {

package/src/modules/filters/createTableFiltersStore.ts

@@ -45,7 +45,11 @@ export const tableFiltersStoreBody = (
 
 	let persistedStorageControllers: PersistedStorageController[] = [];
 
-	const setupPersistence = () => {
+	const setupPersistence = ({
+		isNested = false,
+	}: {
+		isNested?: boolean;
+	} = {}) => {
 		const filtersStorage = usePersistedStorage({
 			name: 'filters',
 
@@ -53,10 +57,14 @@ export const tableFiltersStoreBody = (
 				() => filtersManager,
 			) /* computed is used to provide value as ref(), not reactive() – as per usePersistedStorage interface */,
 
-			storages: [
-				PersistedStorageType.Route,
-				PersistedStorageType.SessionStorage,
-			],
+			storages: isNested
+				? [
+						PersistedStorageType.SessionStorage,
+					]
+				: [
+						PersistedStorageType.Route,
+						PersistedStorageType.SessionStorage,
+					],
 			storagePath: namespace,
 
 			/* use custom .toString() logic, provided by FiltersManager */

package/src/modules/filters/modules/filterConfig/components/_custom/filterConfig.ts

@@ -1,7 +1,7 @@
 import { SysTypesAPI as sysTypes } from '@webitel/api-services/api';
 import type { DataField } from '@webitel/api-services/gen/models';
 import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
-import { get } from 'lodash';
+import { get } from 'lodash-es';
 import type {
 	BaseFilterConfig,
 	FilterConfigBaseParams,

package/src/modules/headers/__tests__/createTableHeadersStore.spec.ts

@@ -58,6 +58,7 @@ describe('tableHeadersStoreBody', () => {
 
 	beforeEach(async () => {
 		localStorage.clear();
+		sessionStorage.clear();
 
 		router = createRouter({
 			history: createMemoryHistory(),
@@ -73,9 +74,9 @@ describe('tableHeadersStoreBody', () => {
 		runWithRouter = (fn) => app.runWithContext(fn);
 	});
 
-	const setUpStore = async () => {
+	const setUpStore = async (options?: { isNested?: boolean }) => {
 		const store = createStore();
-		await runWithRouter(() => store.setupPersistence());
+		await runWithRouter(() => store.setupPersistence(options));
 		return store;
 	};
 
@@ -226,6 +227,37 @@ describe('tableHeadersStoreBody', () => {
 			]);
 			expect(store.headers.value.some(({ field }) => !field)).toBe(false);
 		});
+
+		describe('a nested list', () => {
+			it('keeps a changed sort out of the route query, in a namespaced sessionStorage key instead', async () => {
+				const store = await setUpStore({
+					isNested: true,
+				});
+
+				store.updateSort(store.headers.value[0], 'asc');
+				await flushWrites();
+
+				expect(router.currentRoute.value.query.sort).toBeUndefined();
+				expect(sessionStorage.getItem(`${id}/sort`)).toBe('+name');
+			});
+
+			it('keeps a changed field set out of the route query, in localStorage instead', async () => {
+				const store = await setUpStore({
+					isNested: true,
+				});
+
+				store.updateShownHeaders(
+					store.headers.value.map((header) => ({
+						...header,
+						show: header.field === 'name',
+					})),
+				);
+				await flushWrites();
+
+				expect(router.currentRoute.value.query[fieldsQueryKey]).toBeUndefined();
+				expect(localStorage.getItem(fieldsQueryKey)).toBe('name');
+			});
+		});
 	});
 
 	describe('access', () => {

package/src/modules/headers/createTableHeadersStore.ts

@@ -249,15 +249,23 @@ export const tableHeadersStoreBody = ({
 
 	let persistedStorageControllers: PersistedStorageController[] = [];
 
-	const setupPersistence = async () => {
+	const setupPersistence = async ({
+		isNested = false,
+	}: {
+		isNested?: boolean;
+	} = {}) => {
 		const fieldsStorage = usePersistedStorage({
 			name: 'fields',
 			value: fields,
 			/* order is the restore priority: a shared link wins over local columns */
-			storages: [
-				PersistedStorageType.Route,
-				PersistedStorageType.LocalStorage,
-			],
+			storages: isNested
+				? [
+						PersistedStorageType.LocalStorage,
+					]
+				: [
+						PersistedStorageType.Route,
+						PersistedStorageType.LocalStorage,
+					],
 			storagePath: id,
 			onStore: (save, { name }) => {
 				const value = fields.value.join(',');
@@ -277,6 +285,12 @@ export const tableHeadersStoreBody = ({
 		const sortStorage = usePersistedStorage({
 			name: 'sort',
 			value: sort,
+			...(isNested && {
+				storages: [
+					PersistedStorageType.SessionStorage,
+				],
+				storagePath: id,
+			}),
 		});
 
 		const columnWidthsStorage = usePersistedStorage({

package/src/modules/pagination/__tests__/createTablePaginationStore.spec.ts

@@ -19,6 +19,8 @@ describe('tablePaginationStoreBody', () => {
 	let runWithRouter: <T>(fn: () => T) => T;
 
 	beforeEach(async () => {
+		sessionStorage.clear();
+
 		router = createRouter({
 			history: createMemoryHistory(),
 			routes,
@@ -33,9 +35,14 @@ describe('tablePaginationStoreBody', () => {
 		runWithRouter = (fn) => app.runWithContext(fn);
 	});
 
-	const setUpStore = async () => {
-		const store = tablePaginationStoreBody();
-		await runWithRouter(() => store.setupPersistence());
+	const setUpStore = async (
+		options?: {
+			isNested?: boolean;
+		},
+		namespace?: string,
+	) => {
+		const store = tablePaginationStoreBody(namespace);
+		await runWithRouter(() => store.setupPersistence(options));
 		return store;
 	};
 
@@ -131,4 +138,21 @@ describe('tablePaginationStoreBody', () => {
 			expect(router.currentRoute.value.query.page).toBe('5');
 		});
 	});
+
+	describe('a nested list', () => {
+		it('keeps a changed page out of the route query, in a namespaced sessionStorage key instead', async () => {
+			const store = await setUpStore(
+				{
+					isNested: true,
+				},
+				'cases',
+			);
+
+			store.updatePage(3);
+			await new Promise((resolve) => setTimeout(resolve));
+
+			expect(router.currentRoute.value.query.page).toBeUndefined();
+			expect(sessionStorage.getItem('cases/page')).toBe('3');
+		});
+	});
 });

package/src/modules/pagination/createTablePaginationStore.ts

@@ -1,12 +1,15 @@
 import { ref } from 'vue';
 
 import { createDatalistStore } from '../_shared/createDatalistStore';
-import type { PersistedStorageController } from '../persist/PersistedStorage.types';
+import {
+	type PersistedStorageController,
+	PersistedStorageType,
+} from '../persist/PersistedStorage.types';
 import { usePersistedStorage } from '../persist/usePersistedStorage';
 import type { Identifiable } from '../types/createDatalistStore.types';
 import type { useTableStoreConfig } from '../types/tableStore.types';
 
-export const tablePaginationStoreBody = () => {
+export const tablePaginationStoreBody = (namespace?: string) => {
 	const page = ref(1);
 	const size = ref(10);
 	const next = ref(false);
@@ -27,10 +30,20 @@ export const tablePaginationStoreBody = () => {
 
 	let persistedStorageControllers: PersistedStorageController[] = [];
 
-	const setupPersistence = () => {
+	const setupPersistence = ({
+		isNested = false,
+	}: {
+		isNested?: boolean;
+	} = {}) => {
 		const pageStorage = usePersistedStorage({
 			name: 'page',
 			value: page,
+			...(isNested && {
+				storages: [
+					PersistedStorageType.SessionStorage,
+				],
+				storagePath: namespace,
+			}),
 			onStore: (save, { name }) => {
 				return save({
 					name,
@@ -47,6 +60,12 @@ export const tablePaginationStoreBody = () => {
 		const sizeStorage = usePersistedStorage({
 			name: 'size',
 			value: size,
+			...(isNested && {
+				storages: [
+					PersistedStorageType.SessionStorage,
+				],
+				storagePath: namespace,
+			}),
 			onStore: (save, { name }) => {
 				return save({
 					name,
@@ -98,7 +117,7 @@ export const createTablePaginationStore = <Entity extends Identifiable>(
 ) => {
 	const id = `${namespace}/pagination`;
 	return createDatalistStore({
-		storeBody: tablePaginationStoreBody,
+		storeBody: () => tablePaginationStoreBody(namespace),
 		namespace: id,
 		config,
 	});

package/src/modules/table/__tests__/createTableStore.spec.ts

@@ -259,4 +259,30 @@ describe('tableStoreBody', () => {
 			);
 		});
 	});
+
+	describe('filters persistence of a nested list', () => {
+		it('keeps an added filter out of the route query, in sessionStorage instead', async () => {
+			const useStore = createTableStore('cases-nested-filters/datalist', {
+				apiModule: {
+					getList,
+				},
+				headers,
+			});
+
+			mountTab(useStore);
+			await flush();
+
+			const store = useStore();
+			store.addFilter({
+				name: 'search',
+				value: 'lorem',
+			});
+			await flush();
+
+			expect(router.currentRoute.value.query).toEqual({});
+			expect(
+				sessionStorage.getItem('cases-nested-filters/datalist/filters'),
+			).toContain('lorem');
+		});
+	});
 });

package/src/modules/table/composables/useNestedTableList.ts

@@ -1,8 +1,12 @@
-import type { StoreDefinition } from 'pinia';
 import { computed, type MaybeRefOrGetter, toValue, watch } from 'vue';
 
 import { useInjectedCardStore } from '../../card/composables/useCardStoreProvider';
-import type { CardItemId } from '../../card/types/CardStore.types';
+import type { CardItemId, NestedList } from '../../card/types/CardStore.types';
+
+/** what this needs of a table store, which `createTableStore` satisfies */
+interface NestedTableListStore extends NestedList {
+	initialize: (options: { parentId: string | number }) => unknown;
+}
 
 /**
  * The list of a card page's nested tab.
@@ -23,11 +27,11 @@ import type { CardItemId } from '../../card/types/CardStore.types';
  *
  * [WTEL-10350](https://webitel.atlassian.net/browse/WTEL-10350)
  */
-export const useNestedTableList = ({
+export const useNestedTableList = <Store extends NestedTableListStore>({
 	useTableStore,
 	parentId,
 }: {
-	useTableStore: StoreDefinition;
+	useTableStore: () => Store;
 	/** only where the parent is not the card's own record */
 	parentId?: MaybeRefOrGetter<CardItemId>;
 }) => {

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

@@ -1,5 +1,5 @@
 import deepEqual from 'deep-equal';
-import set from 'lodash/set';
+import { set } from 'lodash-es';
 import { nextTick, type Ref, ref, toRaw, watch } from 'vue';
 
 import {
@@ -317,9 +317,15 @@ export const tableStoreBody = <Entity extends Identifiable>(
 
 		if (!disablePersistence) {
 			await Promise.allSettled([
-				setupPaginationPersistence(),
-				setupFiltersPersistence(),
-				setupHeadersPersistence(),
+				setupPaginationPersistence({
+					isNested: isNested.value,
+				}),
+				setupFiltersPersistence({
+					isNested: isNested.value,
+				}),
+				setupHeadersPersistence({
+					isNested: isNested.value,
+				}),
 			]);
 		}
 
@@ -367,14 +373,6 @@ export const tableStoreBody = <Entity extends Identifiable>(
 
 		await setupStore();
 
-		/*
-     on the first setup the restore path is authoritative.
-
-     a store initialized with a parentId is a list nested in a card page, not a
-      registry: it shares the query param names with the registry stores, and
-      the url it would publish into is the card one – so it keeps writing on
-      change only, and syncs merely on demand
-     */
 		if (isStoreAlreadySetUp && !disablePersistence && !storeParentId) {
 			await syncPersistence();
 		}