@webitel/ui-datalist 26.8.6 → 26.8.8

package/src/modules/filters/modules/filterConfig/components/has-attachment/has-attachment-filter-value-field.vue

@@ -1,7 +1,7 @@
 <template>
   <has-option-filter-value-field
     :model-value="model"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
     @update:model-value="model = $event"
   />
 </template>
@@ -13,6 +13,10 @@ import { computed, watch } from 'vue';
 
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<boolean | null>();
 
 const v$ = useVuelidate(
@@ -29,8 +33,7 @@ const v$ = useVuelidate(
 	},
 );
 
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,

package/src/modules/filters/modules/filterConfig/components/rated-by/rated-by-filter-value-field.vue

@@ -3,7 +3,7 @@
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
     :model-value="model"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
     option-value="id"
     @update:model-value="handleInput"
   />
@@ -20,6 +20,10 @@ import { searchMethod } from './config.js';
 
 type ModelValue = number[];
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<ModelValue>();
 
 const emit = defineEmits<{
@@ -42,8 +46,7 @@ const v$ = useVuelidate(
 		$autoDirty: true,
 	},
 );
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {

package/src/modules/filters/modules/filterConfig/components/rating/rating-from-to-filter-value-field.vue

@@ -3,7 +3,7 @@
     <wt-input-number
       :label="`${t('reusable.from')}:`"
       :placeholder="t('webitelUI.filters.filterValue')"
-      :v="vFrom"
+      :v="!disableValidation && vFrom"
       :model-value="value.from"
       class="rating-from-to-filter-value-field__input"
       @update:model-value="handleInput('from', $event)"
@@ -12,7 +12,7 @@
     <wt-input-number
       :label="`${t('reusable.to')}:`"
       :placeholder="t('webitelUI.filters.filterValue')"
-      :v="vTo"
+      :v="!disableValidation && vTo"
       :model-value="value.to"
       class="rating-from-to-filter-value-field__input"
       @update:model-value="handleInput('to', $event)"
@@ -26,6 +26,10 @@ import { maxValue, requiredIf } from '@vuelidate/validators';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 type ModelValue = {
 	from: number | null;
 	to: number | null;
@@ -80,8 +84,7 @@ const v$ = useVuelidate<{
 		$autoDirty: true,
 	},
 );
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 const vFrom = computed(() => {
 	const modelValidation = v$.value.model;
 	if (!modelValidation) return undefined;

package/src/modules/filters/modules/filterConfig/components/score/score-from-to-filter-value-field.vue

@@ -4,7 +4,7 @@
       :model-value="value.from"
       :max="props.numberMax"
       :min="0"
-      :v="vFrom"
+      :v="!disableValidation && vFrom"
       :label="`${t('reusable.from')}:`"
       :placeholder="t('webitelUI.filters.filterValue')"
       class="score-from-to-filter-value-field__input"
@@ -16,7 +16,7 @@
       :model-value="value.to"
       :max="props.numberMax"
       :min="0"
-      :v="vTo"
+      :v="!disableValidation && vTo"
       :label="`${t('reusable.to')}:`"
       :placeholder="t('webitelUI.filters.filterValue')"
       class="score-from-to-filter-value-field__input"
@@ -54,6 +54,7 @@ const value = computed<ModelValue>(
 const props = withDefaults(
 	defineProps<{
 		numberMax?: number;
+		disableValidation?: boolean;
 	}>(),
 	{
 		numberMax: 100,
@@ -88,8 +89,7 @@ const v$ = useVuelidate<{
 		$autoDirty: true,
 	},
 );
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 const vFrom = computed(() => {
 	const modelValidation = v$.value.model;
 	if (!modelValidation) return undefined;

package/src/modules/filters/modules/filterConfig/components/tag/tag-filter-value-field.vue

@@ -3,7 +3,7 @@
     :label="t('webitelUI.filters.filterValue')"
     :options="CallHistoryTagFilterOptions"
     v-model:model-value="model"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
     data-key="value"
     option-value="value"
   />
@@ -18,6 +18,10 @@ import { useI18n } from 'vue-i18n';
 
 import { CallHistoryTagFilterOptions } from '../../enums/options/CallHistoryTagFilterOptions';
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<string>();
 const { t } = useI18n();
 
@@ -35,8 +39,7 @@ const v$ = useVuelidate(
 	},
 );
 
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,

package/src/modules/filters/modules/filterConfig/components/user/user-filter-value-field.vue

@@ -3,7 +3,7 @@
     :label="t('webitelUI.filters.filterValue')"
     :search-method="searchMethod"
     :model-value="model"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
     option-value="id"
     @update:model-value="handleInput"
   />
@@ -20,6 +20,10 @@ import { searchMethod } from './config.js';
 
 type ModelValue = number[];
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<ModelValue>();
 
 const emit = defineEmits<{
@@ -42,8 +46,7 @@ const v$ = useVuelidate(
 		$autoDirty: true,
 	},
 );
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {

package/src/modules/filters/modules/filterConfig/components/variable/variable-filter-value-field.vue

@@ -2,7 +2,7 @@
   <wt-input-text
     v-model:model-value="model"
     :label="t('webitelUI.filters.filterValue')"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
   />
 </template>
 
@@ -14,6 +14,10 @@ import { useI18n } from 'vue-i18n';
 
 type ModelValue = string;
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<ModelValue>();
 if (!model.value) {
 	model.value = '';
@@ -35,8 +39,7 @@ const v$ = useVuelidate(
 	},
 );
 
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,

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/createTableStore.store.ts

@@ -1,21 +1,28 @@
 import deepEqual from 'deep-equal';
-import set from 'lodash/set';
-import { nextTick, type Ref, ref, toRaw, watch } from 'vue';
+import { set } from 'lodash-es';
+import { computed, nextTick, type Ref, ref, toRaw, watch } from 'vue';
 
 import {
 	createDatalistStore,
 	makeThisToRefs,
 } from '../_shared/createDatalistStore';
+import type { FilterName } from '../filters';
 import { createTableFiltersStore } from '../filters/createTableFiltersStore';
 import { createTableHeadersStore } from '../headers/createTableHeadersStore';
 import { createTablePaginationStore } from '../pagination/createTablePaginationStore';
 import type { Identifiable } from '../types/createDatalistStore.types';
 import type {
+	DatalistTableHeader,
 	LoadDataListOptions,
 	PatchItemPropertyParams,
 	useTableStoreConfig,
 } from '../types/tableStore.types';
 
+const getFilterName = (
+	filter: DatalistTableHeader['filter'],
+): FilterName | undefined =>
+	typeof filter === 'object' ? filter?.name : filter;
+
 export const tableStoreBody = <Entity extends Identifiable>(
 	namespace: string,
 	config: useTableStoreConfig<Entity>,
@@ -58,8 +65,8 @@ export const tableStoreBody = <Entity extends Identifiable>(
 
 	const headersStore = useHeadersStore();
 	const {
-		headers,
-		shownHeaders,
+		headers: rawHeaders,
+		shownHeaders: rawShownHeaders,
 		fields,
 		sort,
 		columnWidths,
@@ -90,6 +97,20 @@ export const tableStoreBody = <Entity extends Identifiable>(
 		updateSearchMode,
 	} = filtersStore;
 
+	const withFilteredFlag = (list: DatalistTableHeader[]) =>
+		list.map((header) => {
+			const name = getFilterName(header.filter);
+			return name
+				? {
+						...header,
+						filtered: filtersManager.value.hasFilter(name),
+					}
+				: header;
+		});
+
+	const headers = computed(() => withFilteredFlag(rawHeaders.value));
+	const shownHeaders = computed(() => withFilteredFlag(rawShownHeaders.value));
+
 	/**
 	 * @internal
 	 * @description
@@ -317,9 +338,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 +394,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();
 		}

package/src/modules/types/tableStore.types.ts

@@ -2,15 +2,26 @@ import type { ApiModule } from '@webitel/ui-sdk/api/types/ApiModule';
 import type { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
 import type { Ref } from 'vue';
 
-import type { IFiltersManager } from '../filters';
+import type { FilterName, IFiltersManager } from '../filters';
 import type { DatalistStoreProviderType } from './StoreProvider';
 
+/**
+ * Minimal shape of an already-resolved header filter. Deliberately not the full
+ * `AnyFilterConfig` (with its `Component` props): `createTableHeadersStore` keeps headers in a
+ * plain `ref<DatalistTableHeader[]>`, and `Component` props there send Vue's `UnwrapRef` into
+ * excessive type-instantiation depth (TS2589). `useColumnFilter`'s `isResolvedFilterConfig`
+ * narrows a value of this shape back to `AnyFilterConfig` for actual use.
+ */
+export type ResolvedHeaderFilter = {
+	name: FilterName;
+};
+
 /**
  * Table header shape used inside the datalist stores. In addition to the
  * base {@link WtTableHeader} shape, datalist stores key columns by `field`
  * and may flag dynamically-appended headers for lazy initialization.
  */
-export type DatalistTableHeader = WtTableHeader & {
+export type DatalistTableHeader = Omit<WtTableHeader, 'filter'> & {
 	field: string;
 	shouldBeInitialized?: boolean;
 	/**
@@ -20,6 +31,14 @@ export type DatalistTableHeader = WtTableHeader & {
 	 * restorable from persisted state. Omitted means allowed.
 	 */
 	access?: () => boolean | Ref<boolean>;
+	/**
+	 * Name of the filter shown in the column header popover (`column-filter` slot),
+	 * or an already-resolved config for it (build one with `createFilterConfig`). Passing a
+	 * config here lets `headers.ts` map the header to its filter once, instead of
+	 * `useColumnFilter` searching `filterOptions`/`filterableExtensionFields` for it on every
+	 * column.
+	 */
+	filter?: WtTableHeader['filter'] | ResolvedHeaderFilter;
 };
 
 export type TrackSelectedRowBy<T> = (row: T) => T;