@webitel/ui-datalist 1.1.60 → 1.1.62

package/package.json

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

package/src/modules/filter-presets/components/apply-preset/__tests__/apply-preset-action.spec.ts

@@ -0,0 +1,119 @@
+import { createTestingPinia } from '@pinia/testing';
+import { flushPromises, shallowMount } from '@vue/test-utils';
+import { defineStore } from 'pinia';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+
+import { createFiltersManager } from '../../../../filters/classes/FiltersManager';
+import PresetQueryAPI from '../../../api/PresetQuery';
+import ApplyPresetAction from '../apply-preset-action.vue';
+
+vi.mock('../../../api/PresetQuery', () => ({
+	default: {
+		get: vi.fn(),
+		getList: vi.fn(),
+		update: vi.fn(),
+		delete: vi.fn(),
+	},
+}));
+
+const SNAPSHOT = '{"createdAt_val":"today"}';
+const CACHED_PRESET_ID = 7;
+const STORE_ID = 'test/presets';
+
+/*
+Only what apply-preset-action reads from the presets store – createTestingPinia
+stubs the actions, so none of them need bodies.
+ */
+const useTestPresetsStore = defineStore(STORE_ID, () => ({
+	dataList: ref([]),
+	error: ref(null),
+	isLoading: ref(false),
+	filtersManager: ref(createFiltersManager()),
+	presetId: ref<number | null>(null),
+
+	loadDataList: () => {},
+	initialize: () => {},
+	updateSize: () => {},
+	deleteEls: () => {},
+	setupPresetPersistence: () => {},
+}));
+
+const mountAction = ({
+	hasAnyFilters = false,
+	presetId = CACHED_PRESET_ID,
+} = {}) => {
+	const pinia = createTestingPinia({
+		initialState: {
+			[STORE_ID]: {
+				presetId,
+			},
+		},
+	});
+
+	return shallowMount(ApplyPresetAction, {
+		props: {
+			namespace: 'test',
+			presetsStore: useTestPresetsStore(pinia),
+			filterConfigs: [],
+			hasAnyFilters,
+		},
+		global: {
+			plugins: [
+				pinia,
+			],
+		},
+	});
+};
+
+describe('ApplyPresetAction', () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		vi.mocked(PresetQueryAPI.get).mockResolvedValue({
+			id: CACHED_PRESET_ID,
+			preset: {
+				'filtersManager.toString': SNAPSHOT,
+			},
+		});
+	});
+
+	it('emits "restore" with the cached preset snapshot when no filters are applied', async () => {
+		const wrapper = mountAction();
+		await flushPromises();
+
+		expect(wrapper.emitted('restore')).toEqual([
+			[
+				SNAPSHOT,
+			],
+		]);
+	});
+
+	it('does not emit "apply" for a cached preset, so filters are not reset', async () => {
+		const wrapper = mountAction();
+		await flushPromises();
+
+		expect(wrapper.emitted('apply')).toBeUndefined();
+	});
+
+	it('skips restoring the cached preset when filters are already applied', async () => {
+		const wrapper = mountAction({
+			hasAnyFilters: true,
+		});
+		await flushPromises();
+
+		expect(PresetQueryAPI.get).not.toHaveBeenCalled();
+		expect(wrapper.emitted('restore')).toBeUndefined();
+		expect(wrapper.emitted('apply')).toBeUndefined();
+	});
+
+	it('does nothing when no preset is cached', async () => {
+		const wrapper = mountAction({
+			presetId: null,
+		});
+		await flushPromises();
+
+		expect(PresetQueryAPI.get).not.toHaveBeenCalled();
+		expect(wrapper.emitted('restore')).toBeUndefined();
+	});
+});

package/src/modules/filter-presets/components/apply-preset/apply-preset-action.vue

@@ -99,12 +99,27 @@ const props = defineProps<{
 	namespace: string;
 	presetsStore: StoreGeneric;
 	filterConfigs: AnyFilterConfig[];
+	/**
+	 * @description
+	 * Filters the user has applied themselves. A cached preset is not restored
+	 * over them – the filters they arrived with win.
+	 */
+	hasAnyFilters?: boolean;
 }>();
 
 const emit = defineEmits<{
+	/**
+	 * user picked a preset in the popup – consumer resets filters first
+	 */
 	apply: [
 		string,
 	];
+	/**
+	 * cached preset re-applied on mount – consumer MUST NOT reset filters
+	 */
+	restore: [
+		string,
+	];
 }>();
 
 const eventBus = useEventBus();
@@ -253,12 +268,19 @@ const deletePreset = async (preset: EnginePresetQuery) => {
 
 const restorePresetById = async (id: number | null) => {
 	if (!id) return;
+	/* cheap exit – skips the request entirely */
+	if (props.hasAnyFilters) return;
+
 	const presetData = await PresetQueryAPI.get({
 		id,
 	});
 	const filters = presetData?.preset?.['filtersManager.toString'];
 
-	if (filters) emit('apply', filters);
+	/* filters may have been restored from the route while the preset was being
+	   fetched, so re-check before overriding them */
+	if (props.hasAnyFilters) return;
+
+	if (filters) emit('restore', filters);
 };
 
 onMounted(async () => {

package/src/modules/filters/components/__tests__/table-filters-panel.spec.ts

@@ -0,0 +1,100 @@
+import { createTestingPinia } from '@pinia/testing';
+import { shallowMount } from '@vue/test-utils';
+import { defineStore } from 'pinia';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import ApplyPresetAction from '../../../filter-presets/components/apply-preset/apply-preset-action.vue';
+import {
+	createFiltersManager,
+	type IFiltersManager,
+} from '../../classes/FiltersManager';
+import { createFilterConfig } from '../../modules/filterConfig/classes/createFilterConfig';
+import { FilterOption } from '../../modules/filterConfig/enums/FilterOption';
+import TableFiltersPanel from '../table-filters-panel.vue';
+
+/* the panel only ever calls resetPreset – createTestingPinia stubs it */
+const useTestPresetsStore = defineStore('test/presets', () => ({
+	resetPreset: () => {},
+}));
+
+/*
+shallowMount stubs dynamic-filter-panel-wrapper, and stubs don't render slots –
+so apply-preset-action would never appear. This stub renders them.
+ */
+const DynamicFilterPanelWrapperStub = {
+	template: '<div><slot name="filters" /><slot name="actions" /></div>',
+};
+
+const filterOptions = [
+	/* same shape as cc-history: a seeded, non-removable default */
+	createFilterConfig({
+		name: FilterOption.CreatedAt,
+		notDeletable: true,
+	}),
+	FilterOption.Agent,
+];
+
+const mountPanel = (filtersManager: IFiltersManager) => {
+	const pinia = createTestingPinia();
+
+	return shallowMount(TableFiltersPanel, {
+		props: {
+			filterOptions,
+			filtersManager,
+			presetNamespace: 'test',
+			usePresetsStore: useTestPresetsStore,
+		},
+		global: {
+			plugins: [
+				pinia,
+			],
+			stubs: {
+				DynamicFilterPanelWrapper: DynamicFilterPanelWrapperStub,
+			},
+		},
+	});
+};
+
+const hasAnyFiltersOf = (filtersManager: IFiltersManager) =>
+	mountPanel(filtersManager)
+		.findComponent(ApplyPresetAction)
+		.props('hasAnyFilters');
+
+describe('TableFiltersPanel preset restore gate', () => {
+	let filtersManager: IFiltersManager;
+
+	beforeEach(() => {
+		filtersManager = createFiltersManager();
+	});
+
+	it('reports no filters when nothing is applied', () => {
+		expect(hasAnyFiltersOf(filtersManager)).toBe(false);
+	});
+
+	it('ignores notDeletable filters, so a seeded default does not block restore', () => {
+		filtersManager.addFilter({
+			name: FilterOption.CreatedAt,
+			value: 'today',
+		});
+
+		expect(hasAnyFiltersOf(filtersManager)).toBe(false);
+	});
+
+	it('ignores the search filter', () => {
+		filtersManager.addFilter({
+			name: 'search',
+			value: 'test',
+		});
+
+		expect(hasAnyFiltersOf(filtersManager)).toBe(false);
+	});
+
+	it('reports filters when a deletable one is applied', () => {
+		filtersManager.addFilter({
+			name: FilterOption.Agent,
+			value: 1,
+		});
+
+		expect(hasAnyFiltersOf(filtersManager)).toBe(true);
+	});
+});

package/src/modules/filters/components/config/static-view/static-filter-field.vue

@@ -44,8 +44,9 @@ const onValueChange = (value: FilterValue) => {
 	}
 
 	emit('update:filter', {
-		...props.filter,
+		name: props.filterConfig.name,
 		value,
+		label: props.filter?.label,
 	});
 };
 </script>

package/src/modules/filters/components/table-filters-panel.vue

@@ -38,9 +38,11 @@
         <apply-preset-action
           v-if="presetStore"
           :filter-configs="filterConfigs"
+          :has-any-filters="hasAnyFilters"
           :namespace="props.presetNamespace ?? ''"
           :presets-store="presetStore"
           @apply="emit('preset:apply', $event)"
+          @restore="emit('preset:restore', $event)"
         />
 
         <save-preset-action
@@ -74,7 +76,7 @@ import { computed } from 'vue';
 import { WebitelProtoDataField } from 'webitel-sdk';
 
 import { ApplyPresetAction, SavePresetAction } from '../../filter-presets';
-import { FilterData, IFilter } from '../classes/Filter';
+import { FilterInitParams, IFilter } from '../classes/Filter';
 import { IFiltersManager } from '../classes/FiltersManager';
 import { useFilterConfigsToolkit } from '../composables/useFilterConfigsToolkit';
 import { AnyFilterConfig } from '../modules/filterConfig/classes/FilterConfig';
@@ -149,10 +151,10 @@ const props = defineProps<Props>();
  */
 const emit = defineEmits<{
 	'filter:add': [
-		FilterData,
+		FilterInitParams,
 	];
 	'filter:update': [
-		FilterData,
+		FilterInitParams,
 	];
 	'filter:delete': [
 		IFilter,
@@ -164,6 +166,13 @@ const emit = defineEmits<{
 	'preset:apply': [
 		string,
 	];
+	/**
+	 * string == filtersManager.toString() snapshot of the preset cached in
+	 * localStorage. Handler must apply it WITHOUT resetting filters
+	 */
+	'preset:restore': [
+		string,
+	];
 	hide: [];
 }>();
 
@@ -202,6 +211,22 @@ const listSelectedFilters = computed(() => {
 	);
 });
 
+/**
+ * @description
+ * Filters applied by the user. `notDeletable` configs are skipped – they are
+ * seeded defaults, not a user choice, so they must not block preset restore.
+ */
+const hasAnyFilters = computed(() =>
+	[
+		...listSelectedFilters.value.keys(),
+	].some((name) => {
+		const filterConfig = filterConfigs.value.find(
+			(config) => String(config.name) === String(name),
+		);
+		return !filterConfig?.notDeletable;
+	}),
+);
+
 const presetStore = props.usePresetsStore ? props.usePresetsStore() : null;
 
 const handleResetFilters = () => {

package/src/modules/filters/components/types/Filter.types.ts

@@ -1,13 +1,9 @@
-import type {
-	FilterData,
-	FilterInitParams,
-	IFilter,
-} from '../../classes/Filter';
+import type { FilterInitParams, IFilter } from '../../classes/Filter';
 import type { AnyFilterConfig } from '../../modules/filterConfig';
 
 export interface FilterEmits {
 	'update:filter': [
-		FilterData,
+		FilterInitParams,
 	];
 	'delete:filter': [
 		IFilter,