@webitel/ui-datalist 1.1.67 → 1.1.69

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.67",
+	"version": "1.1.69",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -b tsconfig.build.json",

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

@@ -22,6 +22,7 @@ describe('tableFiltersStoreBody', () => {
 
 	beforeEach(async () => {
 		localStorage.clear();
+		sessionStorage.clear();
 
 		router = createRouter({
 			history: createMemoryHistory(),
@@ -106,6 +107,19 @@ describe('tableFiltersStoreBody', () => {
 			expect(router.currentRoute.value.query.filters).toContain('open');
 		});
 
+		it('stores filters under the store namespace, not a shared key', async () => {
+			const store = await setUpStore();
+
+			store.addFilter({
+				name: 'status',
+				value: 'open',
+			});
+			await new Promise((resolve) => setTimeout(resolve));
+
+			expect(sessionStorage.getItem(`${namespace}/filters`)).toContain('open');
+			expect(sessionStorage.getItem('/filters')).toBeNull();
+		});
+
 		it('keeps searchMode out of the route query', async () => {
 			const store = await setUpStore();
 

package/src/modules/filters/createTableFiltersStore.ts

@@ -55,7 +55,9 @@ export const tableFiltersStoreBody = (
 
 			storages: [
 				PersistedStorageType.Route,
+				PersistedStorageType.SessionStorage,
 			],
+			storagePath: namespace,
 
 			/* use custom .toString() logic, provided by FiltersManager */
 			onStore: async (save, { name }) => {

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

@@ -1,5 +1,5 @@
 import { beforeEach, describe, expect, it } from 'vitest';
-import { createApp } from 'vue';
+import { createApp, ref } from 'vue';
 import { createMemoryHistory, createRouter, type Router } from 'vue-router';
 
 import type { DatalistTableHeader } from '../../types/tableStore.types';
@@ -141,6 +141,149 @@ describe('tableHeadersStoreBody', () => {
 		});
 	});
 
+	describe('access', () => {
+		const createGatedStore = (gated: DatalistTableHeader[]) =>
+			tableHeadersStoreBody({
+				rawHeaders: [
+					...rawHeaders.map((header) => ({
+						...header,
+					})),
+					...gated,
+				],
+				id,
+			});
+
+		it('drops a denied header from headers, shownHeaders and fields', () => {
+			const store = createGatedStore([
+				{
+					field: 'agent',
+					show: true,
+					sort: null,
+					access: () => false,
+				} as DatalistTableHeader,
+			]);
+
+			expect(store.headers.value.map(({ field }) => field)).not.toContain(
+				'agent',
+			);
+			expect(store.shownHeaders.value.map(({ field }) => field)).not.toContain(
+				'agent',
+			);
+			expect(store.fields.value).not.toContain('agent');
+		});
+
+		it('keeps a granted header and leaves ungated headers untouched', () => {
+			const store = createGatedStore([
+				{
+					field: 'agent',
+					show: true,
+					sort: null,
+					access: () => true,
+				} as DatalistTableHeader,
+			]);
+
+			expect(store.fields.value).toEqual([
+				'name',
+				'subject',
+				'agent',
+			]);
+		});
+
+		it('unwraps a ref returned by the access gate', () => {
+			const store = createGatedStore([
+				{
+					field: 'agent',
+					show: true,
+					sort: null,
+					access: () => ref(false),
+				} as DatalistTableHeader,
+			]);
+
+			expect(store.fields.value).toEqual([
+				'name',
+				'subject',
+			]);
+		});
+
+		it('does not resurrect a denied header from the persisted fields', async () => {
+			await router.push({
+				name: 'cases',
+				query: {
+					fields: 'agent,createdAt',
+				},
+			});
+
+			const store = createGatedStore([
+				{
+					field: 'agent',
+					show: true,
+					sort: null,
+					access: () => false,
+				} as DatalistTableHeader,
+			]);
+			await runWithRouter(() => store.setupPersistence());
+
+			expect(store.fields.value).toEqual([
+				'createdAt',
+			]);
+			expect(store.headers.value.map(({ field }) => field)).not.toContain(
+				'agent',
+			);
+		});
+
+		it('does not resurrect a denied header on reset', () => {
+			const store = createGatedStore([
+				{
+					field: 'agent',
+					show: true,
+					sort: null,
+					access: () => false,
+				} as DatalistTableHeader,
+			]);
+
+			store.$reset();
+
+			expect(store.headers.value.map(({ field }) => field)).not.toContain(
+				'agent',
+			);
+		});
+
+		it('keeps a field alive while another allowed header still claims it', async () => {
+			await router.push({
+				name: 'cases',
+				query: {
+					fields: 'member',
+				},
+			});
+
+			/* `member` and `memberId` share one API field — only one is gated */
+			const store = createGatedStore([
+				{
+					value: 'member',
+					field: 'member',
+					show: true,
+					sort: null,
+				} as DatalistTableHeader,
+				{
+					value: 'memberId',
+					field: 'member',
+					show: false,
+					sort: null,
+					access: () => false,
+				} as DatalistTableHeader,
+			]);
+			await runWithRouter(() => store.setupPersistence());
+
+			expect(store.headers.value.map(({ value }) => value)).toContain('member');
+			expect(store.headers.value.map(({ value }) => value)).not.toContain(
+				'memberId',
+			);
+			expect(store.fields.value).toEqual([
+				'member',
+			]);
+		});
+	});
+
 	describe('syncPersistence', () => {
 		it('publishes a customized column set', async () => {
 			const store = await setUpStore();

package/src/modules/headers/createTableHeadersStore.ts

@@ -1,7 +1,7 @@
 import type { WtTableSortOrder } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
 import { sortToQueryAdapter } from '@webitel/ui-sdk/scripts';
 import { SortSymbols } from '@webitel/ui-sdk/scripts/sortQueryAdapters';
-import { computed, nextTick, ref } from 'vue';
+import { computed, nextTick, ref, unref } from 'vue';
 
 import { createDatalistStore } from '../_shared/createDatalistStore';
 import {
@@ -24,7 +24,21 @@ export const tableHeadersStoreBody = ({
 	rawHeaders,
 	id,
 }: TableHeadersStoreBodyParams) => {
-	const headers = ref<DatalistTableHeader[]>(rawHeaders);
+	const isAllowed = (header: DatalistTableHeader) =>
+		!header.access || !!unref(header.access());
+
+	const allowedHeaders = rawHeaders.filter(isAllowed);
+
+	/* headers may share a `field`, so it stays allowed while any of them is */
+	const allowedFields = new Set(allowedHeaders.map((header) => header.field));
+	const deniedFields = new Set(
+		rawHeaders
+			.filter((header) => !isAllowed(header))
+			.map((header) => header.field)
+			.filter((field) => !allowedFields.has(field)),
+	);
+
+	const headers = ref<DatalistTableHeader[]>(allowedHeaders);
 	const isReorderingColumn = ref(false);
 
 	const shownHeaders = computed(() => {
@@ -64,7 +78,7 @@ export const tableHeadersStoreBody = ({
 	});
 
 	const $reset = () => {
-		headers.value = rawHeaders;
+		headers.value = allowedHeaders;
 	};
 
 	const updateShownHeaders = (value: DatalistTableHeader[]) => {
@@ -112,7 +126,10 @@ export const tableHeadersStoreBody = ({
 		});
 	};
 
-	const updateFields = (fields: string[]) => {
+	const updateFields = (persistedFields: string[]) => {
+		/* persisted state predates the gate, and unknown fields are revived below */
+		const fields = persistedFields.filter((field) => !deniedFields.has(field));
+
 		const fieldsSet = new Set(fields);
 		const mainFieldNames = new Set(headers.value.map((header) => header.field));
 
@@ -232,9 +249,10 @@ export const tableHeadersStoreBody = ({
 		const fieldsStorage = usePersistedStorage({
 			name: 'fields',
 			value: fields,
+			/* order is the restore priority: a shared link wins over local columns */
 			storages: [
-				PersistedStorageType.LocalStorage,
 				PersistedStorageType.Route,
+				PersistedStorageType.LocalStorage,
 			],
 			storagePath: id,
 			onStore: (save, { name }) => {

package/src/modules/persist/PersistedStorage.types.ts

@@ -3,6 +3,7 @@ import type { Ref, WatchOptions } from 'vue';
 export enum PersistedStorageType {
 	LocalStorage = 'localStorage',
 	Route = 'route',
+	SessionStorage = 'sessionStorage',
 }
 
 // in route query, or in localStorage

package/src/modules/persist/__tests__/usePersistedStorage.spec.ts

@@ -26,10 +26,11 @@ const createStorageMock = (): StorageLike & {
 
 const routeStorage = createStorageMock();
 const localStorage = createStorageMock();
+const sessionStorage = createStorageMock();
 
 /*
  route storage resolves `undefined` for a missing query param,
-  local storage resolves `null` – both are mocked to keep that difference
+  the web ones resolve `null` – all are mocked to keep that difference
  */
 vi.mock('../useRoutePersistedStorage', () => ({
 	useRoutePersistedStorage: () => ({
@@ -44,15 +45,109 @@ vi.mock('../useLocalStoragePersistedStorage', () => ({
 	useLocalStoragePersistedStorage: () => localStorage,
 }));
 
+vi.mock('../useSessionStoragePersistedStorage', () => ({
+	useSessionStoragePersistedStorage: () => sessionStorage,
+}));
+
 const { usePersistedStorage } = await import('../usePersistedStorage');
 
+const storageMocks = {
+	[PersistedStorageType.Route]: routeStorage,
+	[PersistedStorageType.LocalStorage]: localStorage,
+	[PersistedStorageType.SessionStorage]: sessionStorage,
+};
+
+const storageKinds = Object.values(PersistedStorageType).map((type) => ({
+	type,
+	storage: storageMocks[type],
+}));
+
 describe('usePersistedStorage', () => {
 	beforeEach(() => {
-		routeStorage.value = null;
-		localStorage.value = null;
+		Object.values(storageMocks).forEach((storage) => {
+			storage.value = null;
+		});
 		vi.clearAllMocks();
 	});
 
+	/* every kind has to take part in all of it, so every enum member is run */
+	describe.each(storageKinds)('$type storage', ({ type, storage }) => {
+		it('is restored from', async () => {
+			storage.value = 'stored';
+			const value = ref('');
+
+			await usePersistedStorage({
+				name: 'filters',
+				value,
+				storages: [
+					type,
+				],
+			}).restore();
+
+			expect(value.value).toBe('stored');
+		});
+
+		it('is written to by the watcher', async () => {
+			const value = ref('initial');
+
+			await usePersistedStorage({
+				name: 'filters',
+				value,
+				storages: [
+					type,
+				],
+			}).restore();
+
+			value.value = 'changed';
+			await nextTick();
+
+			expect(storage.value).toBe('changed');
+		});
+
+		it('is published into by sync when it holds nothing', async () => {
+			const value = ref('filtered');
+
+			await usePersistedStorage({
+				name: 'filters',
+				value,
+				storages: [
+					type,
+				],
+			}).sync();
+
+			expect(storage.value).toBe('filtered');
+		});
+
+		it('is left untouched by sync when it already holds a value', async () => {
+			storage.value = 'stored';
+
+			await usePersistedStorage({
+				name: 'filters',
+				value: ref('from-memory'),
+				storages: [
+					type,
+				],
+			}).sync();
+
+			expect(storage.setItem).not.toHaveBeenCalled();
+			expect(storage.value).toBe('stored');
+		});
+
+		it('is cleared by reset', async () => {
+			storage.value = 'stored';
+
+			await usePersistedStorage({
+				name: 'filters',
+				value: ref('from-memory'),
+				storages: [
+					type,
+				],
+			}).reset();
+
+			expect(storage.value).toBeNull();
+		});
+	});
+
 	describe('sync', () => {
 		it('publishes the current value to an empty storage', async () => {
 			const value = ref('filtered');
@@ -224,6 +319,40 @@ describe('usePersistedStorage', () => {
 			expect(value.value).toBe('from-local-storage');
 		});
 
+		it('follows the declared order, not the order the kinds are defined in', async () => {
+			routeStorage.value = 'from-url';
+			localStorage.value = 'from-local-storage';
+			const value = ref('');
+
+			await usePersistedStorage({
+				name: 'fields',
+				value,
+				storages: [
+					PersistedStorageType.LocalStorage,
+					PersistedStorageType.Route,
+				],
+			}).restore();
+
+			expect(value.value).toBe('from-local-storage');
+		});
+
+		it('restores from the third storage when the first two hold nothing', async () => {
+			sessionStorage.value = 'from-session-storage';
+			const value = ref('');
+
+			await usePersistedStorage({
+				name: 'fields',
+				value,
+				storages: [
+					PersistedStorageType.Route,
+					PersistedStorageType.LocalStorage,
+					PersistedStorageType.SessionStorage,
+				],
+			}).restore();
+
+			expect(value.value).toBe('from-session-storage');
+		});
+
 		it('prefers the route value over the next storages', async () => {
 			routeStorage.value = 'from-url';
 			localStorage.value = 'from-local-storage';
@@ -241,6 +370,36 @@ describe('usePersistedStorage', () => {
 			expect(value.value).toBe('from-url');
 		});
 
+		it('seeds the storages that held nothing with the restored value', async () => {
+			sessionStorage.value = 'from-session-storage';
+
+			await usePersistedStorage({
+				name: 'filters',
+				value: ref(''),
+				storages: [
+					PersistedStorageType.Route,
+					PersistedStorageType.SessionStorage,
+				],
+			}).restore();
+
+			expect(routeStorage.value).toBe('from-session-storage');
+			expect(sessionStorage.setItem).not.toHaveBeenCalled();
+		});
+
+		it('seeds nothing when the state is still default', async () => {
+			await usePersistedStorage({
+				name: 'filters',
+				value: ref(''),
+				storages: [
+					PersistedStorageType.Route,
+					PersistedStorageType.SessionStorage,
+				],
+			}).restore();
+
+			expect(routeStorage.setItem).not.toHaveBeenCalled();
+			expect(sessionStorage.setItem).not.toHaveBeenCalled();
+		});
+
 		it('leaves the value untouched when no storage holds anything', async () => {
 			const value = ref('in-memory');
 

package/src/modules/persist/__tests__/useWebStoragePersistedStorage.spec.ts

@@ -0,0 +1,107 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import { useLocalStoragePersistedStorage } from '../useLocalStoragePersistedStorage';
+import { useSessionStoragePersistedStorage } from '../useSessionStoragePersistedStorage';
+
+const webStorages = [
+	{
+		name: 'useLocalStoragePersistedStorage',
+		useStorage: useLocalStoragePersistedStorage,
+		nativeStorage: () => localStorage,
+	},
+	{
+		name: 'useSessionStoragePersistedStorage',
+		useStorage: useSessionStoragePersistedStorage,
+		nativeStorage: () => sessionStorage,
+	},
+];
+
+describe.each(webStorages)('$name', ({ useStorage, nativeStorage }) => {
+	beforeEach(() => {
+		localStorage.clear();
+		sessionStorage.clear();
+	});
+
+	it('namespaces keys with the storagePath', async () => {
+		const storage = useStorage({
+			storagePath: 'cases/headers',
+		});
+
+		await storage.setItem('fields', 'name,subject');
+
+		expect(nativeStorage().getItem('cases/headers/fields')).toBe(
+			'name,subject',
+		);
+	});
+
+	it('keeps stores with different paths apart', async () => {
+		const cases = useStorage({
+			storagePath: 'cases',
+		});
+		const contacts = useStorage({
+			storagePath: 'contacts',
+		});
+
+		await cases.setItem('fields', 'subject');
+		await contacts.setItem('fields', 'name');
+
+		expect(await cases.getItem('fields')).toBe('subject');
+		expect(await contacts.getItem('fields')).toBe('name');
+	});
+
+	it('resolves null for a missing key', async () => {
+		const storage = useStorage({
+			storagePath: 'cases',
+		});
+
+		expect(await storage.getItem('fields')).toBeNull();
+	});
+
+	it('stores an array as a comma-joined value', async () => {
+		const storage = useStorage({
+			storagePath: 'cases',
+		});
+
+		await storage.setItem('fields', [
+			'name',
+			'subject',
+		]);
+
+		expect(await storage.getItem('fields')).toBe('name,subject');
+	});
+
+	it('removes a key', async () => {
+		const storage = useStorage({
+			storagePath: 'cases',
+		});
+		await storage.setItem('fields', 'name');
+
+		await storage.removeItem('fields');
+
+		expect(await storage.getItem('fields')).toBeNull();
+	});
+});
+
+describe('web storages isolation', () => {
+	beforeEach(() => {
+		localStorage.clear();
+		sessionStorage.clear();
+	});
+
+	it('does not let the two kinds see each other values', async () => {
+		const local = useLocalStoragePersistedStorage({
+			storagePath: 'cases',
+		});
+		const session = useSessionStoragePersistedStorage({
+			storagePath: 'cases',
+		});
+
+		await local.setItem('filters', 'from-local-storage');
+
+		expect(await session.getItem('filters')).toBeNull();
+
+		await session.setItem('filters', 'from-session-storage');
+
+		expect(await local.getItem('filters')).toBe('from-local-storage');
+	});
+});

package/src/modules/persist/useLocalStoragePersistedStorage.ts

@@ -1,34 +1,13 @@
 import type { StorageLike } from './PersistedStorage.types.ts';
-
-const separator = ';';
-
-const makePath = (storagePath: string, key: string) => `${storagePath}/${key}`;
+import { useWebStoragePersistedStorage } from './useWebStoragePersistedStorage';
 
 export const useLocalStoragePersistedStorage = ({
 	storagePath = '',
 }: {
 	storagePath?: string;
 }): StorageLike => {
-	const getItem = async (key: string) => {
-		const value = localStorage.getItem(makePath(storagePath, key));
-		if (value === null) return null;
-		return value.split(separator).join();
-	};
-
-	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,
-	};
+	return useWebStoragePersistedStorage({
+		storage: () => localStorage,
+		storagePath,
+	});
 };

package/src/modules/persist/usePersistedStorage.ts

@@ -8,9 +8,11 @@ import {
 	type PersistedStorageController,
 	PersistedStorageType,
 	type PersistStorableValue,
+	type StorageLike,
 } from './PersistedStorage.types';
 import { useLocalStoragePersistedStorage } from './useLocalStoragePersistedStorage';
 import { useRoutePersistedStorage } from './useRoutePersistedStorage';
+import { useSessionStoragePersistedStorage } from './useSessionStoragePersistedStorage';
 
 const toStorableValue = (value: PersistableValue): PersistStorableValue => {
 	return typeof value === 'string' ? value : (value?.toString() ?? '');
@@ -58,24 +60,30 @@ export const usePersistedStorage = ({
 				configStorages,
 			];
 
+	/* keyed by the enum, so a kind without an adapter is a type error */
+	const adapterFactories: Record<PersistedStorageType, () => StorageLike> = {
+		[PersistedStorageType.Route]: () => useRoutePersistedStorage(),
+		[PersistedStorageType.LocalStorage]: () =>
+			useLocalStoragePersistedStorage({
+				storagePath,
+			}),
+		[PersistedStorageType.SessionStorage]: () =>
+			useSessionStoragePersistedStorage({
+				storagePath,
+			}),
+	};
+
 	/*
   order matters, as the first storage in the list has the highest priority
    */
-	if (storages.includes(PersistedStorageType.Route)) {
-		adapters.push({
-			type: PersistedStorageType.Route,
-			...useRoutePersistedStorage(),
-		});
-	}
+	storages.forEach((type) => {
+		if (adapters.some((adapter) => adapter.type === type)) return;
 
-	if (storages.includes(PersistedStorageType.LocalStorage)) {
 		adapters.push({
-			type: PersistedStorageType.LocalStorage,
-			...useLocalStoragePersistedStorage({
-				storagePath,
-			}),
+			type,
+			...adapterFactories[type](),
 		});
-	}
+	});
 
 	/*
    runs the storing path with a `save` doing whatever the caller needs:
@@ -163,6 +171,13 @@ export const usePersistedStorage = ({
 				value.value = restoredValue;
 			}
 		}
+		/*
+     the restored value comes from one storage, and the others may hold nothing
+      – seed them, so every storage mirrors the state right away instead of
+      waiting for the next sync()
+     */
+		await sync();
+
 		/*
       start watching after restoring value to prevent restored value
        from storing again