@webitel/ui-datalist 1.1.65 → 1.1.66

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.65",
+	"version": "1.1.66",
 	"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

@@ -0,0 +1,143 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { createApp } from 'vue';
+import { createMemoryHistory, createRouter, type Router } from 'vue-router';
+
+import { tableFiltersStoreBody } from '../createTableFiltersStore';
+
+const routes = [
+	{
+		path: '/cases',
+		name: 'cases',
+		component: {
+			template: '<div />',
+		},
+	},
+];
+
+const namespace = 'cases';
+
+describe('tableFiltersStoreBody', () => {
+	let router: Router;
+	let runWithRouter: <T>(fn: () => T) => T;
+
+	beforeEach(async () => {
+		localStorage.clear();
+
+		router = createRouter({
+			history: createMemoryHistory(),
+			routes,
+		});
+
+		const app = createApp({});
+		app.use(router);
+
+		await router.push('/cases');
+		await router.isReady();
+
+		runWithRouter = (fn) => app.runWithContext(fn);
+	});
+
+	const setUpStore = async () => {
+		const store = tableFiltersStoreBody(namespace);
+		await runWithRouter(() => store.setupPersistence());
+		return store;
+	};
+
+	it('starts with no filters', () => {
+		const store = tableFiltersStoreBody(namespace);
+
+		expect(store.filtersList.value).toEqual([]);
+	});
+
+	it('adds, updates and deletes a filter', () => {
+		const store = tableFiltersStoreBody(namespace);
+
+		store.addFilter({
+			name: 'status',
+			value: 'open',
+		});
+		expect(store.hasFilter('status')).toBe(true);
+
+		store.updateFilter({
+			name: 'status',
+			value: 'closed',
+		});
+		expect(store.filtersManager.getFilter('status')?.value).toBe('closed');
+
+		store.deleteFilter({
+			name: 'status',
+		});
+		expect(store.hasFilter('status')).toBe(false);
+	});
+
+	it('keeps searchMode', () => {
+		const store = tableFiltersStoreBody(namespace);
+
+		store.updateSearchMode('subject');
+
+		expect(store.searchMode.value).toBe('subject');
+	});
+
+	describe('persistence', () => {
+		it('restores filters from the route query', async () => {
+			await router.push({
+				name: 'cases',
+				query: {
+					filters: JSON.stringify({
+						status_val: 'open',
+					}),
+				},
+			});
+
+			const store = await setUpStore();
+
+			expect(store.filtersManager.getFilter('status')?.value).toBe('open');
+		});
+
+		it('writes an added filter into the route query', async () => {
+			const store = await setUpStore();
+
+			store.addFilter({
+				name: 'status',
+				value: 'open',
+			});
+			await new Promise((resolve) => setTimeout(resolve));
+
+			expect(router.currentRoute.value.query.filters).toContain('open');
+		});
+
+		it('keeps searchMode out of the route query', async () => {
+			const store = await setUpStore();
+
+			store.updateSearchMode('subject');
+			await new Promise((resolve) => setTimeout(resolve));
+
+			expect(router.currentRoute.value.query.searchMode).toBeUndefined();
+			expect(localStorage.getItem(`${namespace}/searchMode`)).toBe('subject');
+		});
+	});
+
+	describe('syncPersistence', () => {
+		it('publishes the applied filters', async () => {
+			const store = await setUpStore();
+			store.addFilter({
+				name: 'status',
+				value: 'open',
+			});
+			await new Promise((resolve) => setTimeout(resolve));
+			await router.push('/cases');
+
+			await runWithRouter(() => store.syncPersistence());
+
+			expect(router.currentRoute.value.query.filters).toContain('open');
+		});
+
+		it('publishes nothing while no filter is applied', async () => {
+			const store = await setUpStore();
+
+			await runWithRouter(() => store.syncPersistence());
+
+			expect(router.currentRoute.value.query).toEqual({});
+		});
+	});
+});

package/src/modules/filters/createTableFiltersStore.ts

@@ -1,7 +1,10 @@
 import { computed, reactive, ref } from 'vue';
 
 import { createDatalistStore } from '../_shared/createDatalistStore';
-import { PersistedStorageType } 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';
@@ -40,8 +43,10 @@ export const tableFiltersStoreBody = (
 
 	const filtersList = computed(() => filtersManager.getFiltersList());
 
+	let persistedStorageControllers: PersistedStorageController[] = [];
+
 	const setupPersistence = () => {
-		const { restore: restoreFilters } = usePersistedStorage({
+		const filtersStorage = usePersistedStorage({
 			name: 'filters',
 
 			value: computed(
@@ -75,7 +80,7 @@ export const tableFiltersStoreBody = (
 			},
 		});
 
-		const { restore: restoreSearchMode } = usePersistedStorage({
+		const searchModeStorage = usePersistedStorage({
 			name: 'searchMode',
 			value: searchMode,
 			storages: [
@@ -95,12 +100,24 @@ export const tableFiltersStoreBody = (
 			},
 		});
 
+		persistedStorageControllers = [
+			filtersStorage,
+			searchModeStorage,
+		];
+
 		return Promise.all([
-			restoreFilters(),
-			restoreSearchMode(),
+			filtersStorage.restore(),
+			searchModeStorage.restore(),
 		]);
 	};
 
+	/* sequentially: every route write is a router.replace() on top of the current query */
+	const syncPersistence = async () => {
+		for (const controller of persistedStorageControllers) {
+			await controller.sync();
+		}
+	};
+
 	return {
 		filtersManager,
 		isRestoring,
@@ -116,6 +133,7 @@ export const tableFiltersStoreBody = (
 		updateSearchMode,
 
 		setupPersistence,
+		syncPersistence,
 	};
 };
 

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

@@ -0,0 +1,169 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { createApp } from 'vue';
+import { createMemoryHistory, createRouter, type Router } from 'vue-router';
+
+import type { DatalistTableHeader } from '../../types/tableStore.types';
+import { tableHeadersStoreBody } from '../createTableHeadersStore';
+
+const routes = [
+	{
+		path: '/cases',
+		name: 'cases',
+		component: {
+			template: '<div />',
+		},
+	},
+];
+
+const id = 'cases/headers';
+
+const rawHeaders = [
+	{
+		field: 'name',
+		show: true,
+		sort: null,
+	},
+	{
+		field: 'subject',
+		show: true,
+		sort: null,
+	},
+	{
+		field: 'createdAt',
+		show: false,
+		sort: null,
+	},
+] as DatalistTableHeader[];
+
+/* route writes are queued, so several ticks are needed for all of them to land */
+const flushWrites = async () => {
+	for (let i = 0; i < 5; i += 1) {
+		await new Promise((resolve) => setTimeout(resolve));
+	}
+};
+
+const createStore = () =>
+	tableHeadersStoreBody({
+		rawHeaders: rawHeaders.map((header) => ({
+			...header,
+		})),
+		id,
+	});
+
+describe('tableHeadersStoreBody', () => {
+	let router: Router;
+	let runWithRouter: <T>(fn: () => T) => T;
+
+	beforeEach(async () => {
+		localStorage.clear();
+
+		router = createRouter({
+			history: createMemoryHistory(),
+			routes,
+		});
+
+		const app = createApp({});
+		app.use(router);
+
+		await router.push('/cases');
+		await router.isReady();
+
+		runWithRouter = (fn) => app.runWithContext(fn);
+	});
+
+	const setUpStore = async () => {
+		const store = createStore();
+		await runWithRouter(() => store.setupPersistence());
+		return store;
+	};
+
+	it('exposes the shown headers and their fields', () => {
+		const store = createStore();
+
+		expect(store.shownHeaders.value.map(({ field }) => field)).toEqual([
+			'name',
+			'subject',
+		]);
+		expect(store.fields.value).toEqual([
+			'name',
+			'subject',
+		]);
+	});
+
+	it('has no sort by default', () => {
+		expect(createStore().sort.value).toBeNull();
+	});
+
+	it('encodes the sorted column into a sort query', () => {
+		const store = createStore();
+
+		store.updateSort(store.headers.value[0], 'desc');
+
+		expect(store.sort.value).toBe('-name');
+	});
+
+	it('collects the widths of resized columns', () => {
+		const store = createStore();
+
+		store.columnResize({
+			columnName: 'name',
+			columnWidth: '100px',
+		});
+
+		expect(store.columnWidths.value).toEqual({
+			name: '100px',
+		});
+	});
+
+	describe('persistence', () => {
+		it('restores shown fields from the route query', async () => {
+			await router.push({
+				name: 'cases',
+				query: {
+					fields: 'createdAt',
+				},
+			});
+
+			const store = await setUpStore();
+
+			expect(store.fields.value).toEqual([
+				'createdAt',
+			]);
+		});
+
+		it('writes a changed sort into the route query', async () => {
+			const store = await setUpStore();
+
+			store.updateSort(store.headers.value[0], 'asc');
+			await flushWrites();
+
+			expect(router.currentRoute.value.query.sort).toBe('+name');
+		});
+	});
+
+	describe('syncPersistence', () => {
+		it('publishes a customized column set', async () => {
+			const store = await setUpStore();
+			store.updateShownHeaders(
+				store.headers.value.map((header) => ({
+					...header,
+					show: header.field === 'name',
+				})),
+			);
+			await flushWrites();
+			await router.push('/cases');
+
+			await runWithRouter(() => store.syncPersistence());
+
+			expect(router.currentRoute.value.query.fields).toBe('name');
+		});
+
+		it('publishes nothing while the columns are still default', async () => {
+			const store = await setUpStore();
+
+			await runWithRouter(() => store.syncPersistence());
+
+			expect(router.currentRoute.value.query).toEqual({});
+		});
+	});
+});

package/src/modules/headers/createTableHeadersStore.ts

@@ -4,7 +4,10 @@ import { SortSymbols } from '@webitel/ui-sdk/scripts/sortQueryAdapters';
 import { computed, nextTick, ref } from 'vue';
 
 import { createDatalistStore } from '../_shared/createDatalistStore';
-import { PersistedStorageType } 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 {
@@ -223,8 +226,10 @@ export const tableHeadersStoreBody = ({
 		});
 	};
 
+	let persistedStorageControllers: PersistedStorageController[] = [];
+
 	const setupPersistence = async () => {
-		const { restore: restoreFields } = usePersistedStorage({
+		const fieldsStorage = usePersistedStorage({
 			name: 'fields',
 			value: fields,
 			storages: [
@@ -247,12 +252,12 @@ export const tableHeadersStoreBody = ({
 			},
 		});
 
-		const { restore: restoreSort } = usePersistedStorage({
+		const sortStorage = usePersistedStorage({
 			name: 'sort',
 			value: sort,
 		});
 
-		const { restore: restoreColumnWidths } = usePersistedStorage({
+		const columnWidthsStorage = usePersistedStorage({
 			name: 'columnWidths',
 			value: columnWidths,
 			storages: [
@@ -278,13 +283,26 @@ export const tableHeadersStoreBody = ({
 			},
 		});
 
+		persistedStorageControllers = [
+			fieldsStorage,
+			sortStorage,
+			columnWidthsStorage,
+		];
+
 		return Promise.allSettled([
-			restoreFields(),
-			restoreSort(),
-			restoreColumnWidths(),
+			fieldsStorage.restore(),
+			sortStorage.restore(),
+			columnWidthsStorage.restore(),
 		]);
 	};
 
+	/* sequentially: every route write is a router.replace() on top of the current query */
+	const syncPersistence = async () => {
+		for (const controller of persistedStorageControllers) {
+			await controller.sync();
+		}
+	};
+
 	const getHeaderByField = (field: string) => {
 		return headers.value.find((header) => header.field === field);
 	};
@@ -334,6 +352,7 @@ export const tableHeadersStoreBody = ({
 		columnReorder,
 
 		setupPersistence,
+		syncPersistence,
 		$reset,
 	};
 };

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

@@ -0,0 +1,134 @@
+import { beforeEach, describe, expect, it } from 'vitest';
+import { createApp } from 'vue';
+import { createMemoryHistory, createRouter, type Router } from 'vue-router';
+
+import { tablePaginationStoreBody } from '../createTablePaginationStore';
+
+const routes = [
+	{
+		path: '/cases',
+		name: 'cases',
+		component: {
+			template: '<div />',
+		},
+	},
+];
+
+describe('tablePaginationStoreBody', () => {
+	let router: Router;
+	let runWithRouter: <T>(fn: () => T) => T;
+
+	beforeEach(async () => {
+		router = createRouter({
+			history: createMemoryHistory(),
+			routes,
+		});
+
+		const app = createApp({});
+		app.use(router);
+
+		await router.push('/cases');
+		await router.isReady();
+
+		runWithRouter = (fn) => app.runWithContext(fn);
+	});
+
+	const setUpStore = async () => {
+		const store = tablePaginationStoreBody();
+		await runWithRouter(() => store.setupPersistence());
+		return store;
+	};
+
+	it('starts on the first page with the default size', () => {
+		const store = tablePaginationStoreBody();
+
+		expect(store.page.value).toBe(1);
+		expect(store.size.value).toBe(10);
+	});
+
+	it('updates page and size', () => {
+		const store = tablePaginationStoreBody();
+
+		store.updatePage(3);
+		store.updateSize(20);
+
+		expect(store.page.value).toBe(3);
+		expect(store.size.value).toBe(20);
+	});
+
+	it('resets to the defaults', () => {
+		const store = tablePaginationStoreBody();
+		store.updatePage(3);
+		store.updateSize(20);
+		store.next.value = true;
+
+		store.$reset();
+
+		expect(store.page.value).toBe(1);
+		expect(store.size.value).toBe(10);
+		expect(store.next.value).toBe(false);
+	});
+
+	describe('persistence', () => {
+		it('restores page and size from the route query', async () => {
+			await router.push({
+				name: 'cases',
+				query: {
+					page: '3',
+					size: '20',
+				},
+			});
+
+			const store = await setUpStore();
+
+			expect(store.page.value).toBe(3);
+			expect(store.size.value).toBe(20);
+		});
+
+		it('writes a changed page into the route query', async () => {
+			const store = await setUpStore();
+
+			store.updatePage(3);
+			await new Promise((resolve) => setTimeout(resolve));
+
+			expect(router.currentRoute.value.query.page).toBe('3');
+		});
+	});
+
+	describe('syncPersistence', () => {
+		it('publishes state the user changed', async () => {
+			const store = await setUpStore();
+			store.updatePage(3);
+			await router.push('/cases');
+
+			await runWithRouter(() => store.syncPersistence());
+
+			expect(router.currentRoute.value.query.page).toBe('3');
+		});
+
+		it('publishes nothing while the state is still default', async () => {
+			const store = await setUpStore();
+
+			await runWithRouter(() => store.syncPersistence());
+
+			expect(router.currentRoute.value.query).toEqual({});
+		});
+
+		it('does not overwrite a value already in the query', async () => {
+			const store = await setUpStore();
+			store.updatePage(3);
+			/* let the watcher settle, so its write cannot land after the push below */
+			await new Promise((resolve) => setTimeout(resolve));
+			await router.push({
+				name: 'cases',
+				query: {
+					page: '5',
+				},
+			});
+
+			await runWithRouter(() => store.syncPersistence());
+
+			expect(router.currentRoute.value.query.page).toBe('5');
+		});
+	});
+});

package/src/modules/pagination/createTablePaginationStore.ts

@@ -1,6 +1,7 @@
 import { ref } from 'vue';
 
 import { createDatalistStore } from '../_shared/createDatalistStore';
+import type { PersistedStorageController } from '../persist/PersistedStorage.types';
 import { usePersistedStorage } from '../persist/usePersistedStorage';
 import type { Identifiable } from '../types/createDatalistStore.types';
 import type { useTableStoreConfig } from '../types/tableStore.types';
@@ -24,10 +25,18 @@ export const tablePaginationStoreBody = () => {
 		next.value = false;
 	};
 
+	let persistedStorageControllers: PersistedStorageController[] = [];
+
 	const setupPersistence = () => {
-		const { restore: restorePage } = usePersistedStorage({
+		const pageStorage = usePersistedStorage({
 			name: 'page',
 			value: page,
+			onStore: (save, { name }) => {
+				return save({
+					name,
+					value: `${page.value}`,
+				});
+			},
 			onRestore: async (restore, name) => {
 				const value = await restore(name);
 				const numValue = Number(value);
@@ -35,9 +44,15 @@ export const tablePaginationStoreBody = () => {
 			},
 		});
 
-		const { restore: restoreSize } = usePersistedStorage({
+		const sizeStorage = usePersistedStorage({
 			name: 'size',
 			value: size,
+			onStore: (save, { name }) => {
+				return save({
+					name,
+					value: `${size.value}`,
+				});
+			},
 			onRestore: async (restore, name) => {
 				const value = await restore(name);
 				const numValue = Number(value);
@@ -45,12 +60,24 @@ export const tablePaginationStoreBody = () => {
 			},
 		});
 
+		persistedStorageControllers = [
+			pageStorage,
+			sizeStorage,
+		];
+
 		return Promise.allSettled([
-			restorePage(),
-			restoreSize(),
+			pageStorage.restore(),
+			sizeStorage.restore(),
 		]);
 	};
 
+	/* sequentially: every route write is a router.replace() on top of the current query */
+	const syncPersistence = async () => {
+		for (const controller of persistedStorageControllers) {
+			await controller.sync();
+		}
+	};
+
 	return {
 		page,
 		size,
@@ -60,6 +87,7 @@ export const tablePaginationStoreBody = () => {
 		updateSize,
 
 		setupPersistence,
+		syncPersistence,
 		$reset,
 	};
 };

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

@@ -22,6 +22,10 @@ export interface StorageLike {
 	removeItem(key: string): Promise<void>;
 }
 
+export interface PersistedStorageAdapter extends StorageLike {
+	type: PersistedStorageType;
+}
+
 export interface PersistedPropertyConfig {
 	name: string;
 	// note: createTableHeadersStore passes a computed here, which the default
@@ -55,5 +59,15 @@ export interface PersistedStorageController {
 	watch: () => void;
 	unwatch: () => void;
 	restore: () => Promise<void>;
+	/**
+	 * Publishes the current value to every storage that holds nothing for `name`.
+	 * Storages that already hold a value are left untouched, so an explicit route
+	 * query always wins over in-memory state.
+	 *
+	 * A no-op for state still equal to the defaults: `restore()` captures the
+	 * snapshot a freshly created store serializes, and a controller that never
+	 * restored can only tell empty values apart.
+	 */
+	sync: () => Promise<void>;
 	reset: () => Promise<void>;
 }