@webitel/ui-datalist 26.8.19 → 26.8.20

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.8.19",
+	"version": "26.8.20",
 	"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/_shared/preset-filters-preview.vue

@@ -35,7 +35,7 @@ const props = defineProps<{
 const { t } = useI18n();
 
 const { appliedFilterToFilterConfigMappings } = useFilterConfigsToolkit({
-	filterOptions: props.filterConfigs,
+	filterOptions: () => props.filterConfigs,
 	filtersManager: props.filtersManager,
 });
 </script>

package/src/modules/filters/components/filters-actions-menu.vue

@@ -104,9 +104,9 @@ const savePreset =
 provideFilterReadAccess(() => props.hasReadAccess);
 
 const { filterConfigs, filtersIncluded } = useFilterConfigsToolkit({
-	filterOptions: props.filterOptions,
+	filterOptions: () => props.filterOptions,
 	filtersManager: props.filtersManager,
-	filterableExtensionFields: props.filterableExtensionFields,
+	filterableExtensionFields: () => props.filterableExtensionFields,
 });
 
 const { listSelectedFilters, hasAnyFilters } = useSelectedFilters({

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

@@ -191,9 +191,9 @@ const {
 	appliedFilterToFilterConfigMappings,
 	unAppliedFiltersConfigs,
 } = useFilterConfigsToolkit({
-	filterOptions: props.filterOptions,
+	filterOptions: () => props.filterOptions,
 	filtersManager: props.filtersManager,
-	filterableExtensionFields: props.filterableExtensionFields,
+	filterableExtensionFields: () => props.filterableExtensionFields,
 	staticMode: props.staticMode,
 });
 

package/src/modules/filters/composables/useFilterConfigsToolkit.ts

@@ -1,5 +1,10 @@
 import type { DataField } from '@webitel/api-services/gen/models';
-import { type ComputedRef, computed } from 'vue';
+import {
+	type ComputedRef,
+	computed,
+	type MaybeRefOrGetter,
+	toValue,
+} from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import type { FilterName, IFilter } from '../classes/Filter';
@@ -42,9 +47,9 @@ export type FilterConfigToolkit = {
 };
 
 export type FilterConfigToolkitParams = {
-	filterOptions: (FilterOption | BaseFilterConfig)[];
+	filterOptions: MaybeRefOrGetter<(FilterOption | BaseFilterConfig)[]>;
 	filtersManager: IFiltersManager;
-	filterableExtensionFields?: DataField[];
+	filterableExtensionFields?: MaybeRefOrGetter<DataField[] | undefined>;
 	staticMode?: boolean;
 };
 
@@ -57,7 +62,7 @@ export const useFilterConfigsToolkit = ({
 
 	const filterConfigs = computed(() => {
 		return (
-			filterOptions
+			toValue(filterOptions)
 				/**
 				 * make filterConfigs from standard filterOptions
 				 */
@@ -91,7 +96,7 @@ export const useFilterConfigsToolkit = ({
 				 * add filterConfigs for extension fields
 				 */
 				.concat(
-					filterableExtensionFields.map((field: DataField) => {
+					(toValue(filterableExtensionFields) ?? []).map((field: DataField) => {
 						return createTypeExtensionFilterConfig(
 							{
 								name: field.id,

package/src/modules/filters/composables/useFilterValuePreview.ts

@@ -27,10 +27,14 @@ export const useFilterValuePreview = ({
 }) => {
 	const getHasReadAccess = injectFilterReadAccess();
 	const localValue = ref();
+	const isLoaded = ref(false);
 
 	const fillLocalValue = async (currentFilter = toValue(filter)) => {
+		isLoaded.value = false;
+
 		if (!currentFilter) {
 			localValue.value = undefined;
+			isLoaded.value = true;
 			return;
 		}
 
@@ -67,6 +71,8 @@ export const useFilterValuePreview = ({
 		} else {
 			localValue.value = filterValue;
 		}
+
+		isLoaded.value = true;
 	};
 
 	watch(
@@ -79,11 +85,7 @@ export const useFilterValuePreview = ({
 		},
 	);
 
-	// [https://webitel.atlassian.net/browse/WTEL-6732]
-	// if type filter is boolean and value = false, need display preview
-	const isRenderPreview = computed(
-		() => localValue.value === false || localValue.value,
-	);
+	const isRenderPreview = computed(() => isLoaded.value);
 
 	return {
 		localValue,

package/src/modules/filters/composables/useVariableColumnFilters.ts

@@ -0,0 +1,115 @@
+import type { DataField } from '@webitel/api-services/gen/models';
+import type { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
+import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
+import { isVariableHeader } from '@webitel/ui-sdk/modules/TableVariableColumnSelect';
+import { computed, type MaybeRefOrGetter, toValue } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { FilterInitParams, FilterName, IFilter } from '../classes/Filter';
+import type { IFiltersManager } from '../classes/FiltersManager';
+import { FilterOption } from '../modules/filterConfig/enums/FilterOption';
+import {
+	isVariableFilterName,
+	toVariableFilterFields,
+	VARIABLE_FIELD_PREFIX,
+	variableKeyFromFilterName,
+} from '../scripts/variableFilters';
+
+const parseVariableFilterValue = (raw: string) =>
+	raw.split('&').reduce<Record<string, string>>((vars, pair) => {
+		const [key, value] = pair.split('=');
+		if (key) vars[key] = value ?? '';
+		return vars;
+	}, {});
+
+export const useVariableColumnFilters = ({
+	shownHeaders,
+	filtersManager,
+	addFilter,
+	updateFilter,
+	deleteFilter,
+}: {
+	shownHeaders: MaybeRefOrGetter<WtTableHeader[] | undefined>;
+	filtersManager: MaybeRefOrGetter<IFiltersManager>;
+	addFilter: (params: FilterInitParams) => IFilter;
+	updateFilter: (params: FilterInitParams) => IFilter;
+	deleteFilter: (params: { name: FilterName }) => IFilter | undefined;
+}) => {
+	const { t } = useI18n();
+
+	const withVariableFilterLabel = (
+		params: FilterInitParams,
+	): FilterInitParams =>
+		isVariableFilterName(params.name)
+			? {
+					...params,
+					label: t('webitelUI.filters.variable'),
+				}
+			: params;
+
+	const variableFilterFields = computed<DataField[]>(() => {
+		const headers = toValue(shownHeaders) || [];
+		const columnHeaders = headers.filter(
+			(header) => isVariableHeader(header) && header.filtered,
+		);
+		const columnFields = toVariableFilterFields(columnHeaders);
+
+		const knownNames = new Set(columnFields.map((field) => field.id));
+		const appliedOnlyFields = toValue(filtersManager)
+			.getAllKeys()
+			.filter((name) => isVariableFilterName(name) && !knownNames.has(name))
+			.map((name) => ({
+				id: name,
+				name: variableKeyFromFilterName(name),
+				kind: WtTypeExtensionFieldKind.Text,
+			}));
+
+		return [
+			...columnFields,
+			...appliedOnlyFields,
+		];
+	});
+
+	const splitVariableFilter = (params: FilterInitParams) => {
+		const variables = parseVariableFilterValue(String(params.value ?? ''));
+
+		Object.entries(variables).forEach(([key, value]) => {
+			addFilter(
+				withVariableFilterLabel({
+					name: `${VARIABLE_FIELD_PREFIX}${key}`,
+					value,
+				}),
+			);
+		});
+
+		if (toValue(filtersManager).hasFilter(FilterOption.Variable)) {
+			deleteFilter({
+				name: FilterOption.Variable,
+			});
+		}
+	};
+
+	const handleAddFilter = (params: FilterInitParams) => {
+		if (params.name === FilterOption.Variable) {
+			splitVariableFilter(params);
+			return;
+		}
+
+		addFilter(withVariableFilterLabel(params));
+	};
+
+	const handleUpdateFilter = (params: FilterInitParams) => {
+		if (params.name === FilterOption.Variable) {
+			splitVariableFilter(params);
+			return;
+		}
+
+		updateFilter(withVariableFilterLabel(params));
+	};
+
+	return {
+		variableFilterFields,
+		handleAddFilter,
+		handleUpdateFilter,
+	};
+};

package/src/modules/filters/index.ts

@@ -16,9 +16,18 @@ import ColumnFilterComponent from './components/column/column-filter.vue';
 import FiltersActionsMenuComponent from './components/filters-actions-menu.vue';
 import DynamicFilterSearchComponent from './components/search-bar/dynamic-filter-search.vue';
 import TableFiltersPanelComponent from './components/table-filters-panel.vue';
+import { useVariableColumnFilters } from './composables/useVariableColumnFilters';
 import { FilterOption } from './modules/filterConfig/enums/FilterOption';
 
 export * from './modules/filterConfig';
+export {
+	extractVariableFilters,
+	isVariableFilterName,
+	toVariableFilterFields,
+	VARIABLE_FIELD_PREFIX,
+	variableKeyFromFilterName,
+	withVariableColumnFilters,
+} from './scripts/variableFilters';
 export type {
 	FilterInitParams,
 	FilterInstanceConfig,
@@ -37,4 +46,5 @@ export {
 	FilterOption,
 	FiltersActionsMenuComponent,
 	TableFiltersPanelComponent,
+	useVariableColumnFilters,
 };

package/src/modules/filters/scripts/__tests__/variableFilters.spec.ts

@@ -0,0 +1,129 @@
+import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
+import { describe, expect, it } from 'vitest';
+
+import {
+	extractVariableFilters,
+	isVariableFilterName,
+	toVariableFilterFields,
+	VARIABLE_FIELD_PREFIX,
+	variableKeyFromFilterName,
+	withVariableColumnFilters,
+} from '../variableFilters';
+
+const header = {
+	value: 'variables.sip_code',
+	field: 'variables.sip_code',
+	text: 'sip_code',
+	show: true,
+};
+
+describe('VARIABLE_FIELD_PREFIX', () => {
+	it('is defined correctly', () => {
+		expect(VARIABLE_FIELD_PREFIX).toBe('variables.');
+	});
+});
+
+describe('isVariableFilterName', () => {
+	it('returns true for names starting with VARIABLE_FIELD_PREFIX', () => {
+		expect(isVariableFilterName('variables.sip_code')).toBe(true);
+		expect(isVariableFilterName('variables.custom_field')).toBe(true);
+	});
+
+	it('returns false for names not starting with VARIABLE_FIELD_PREFIX', () => {
+		expect(isVariableFilterName('agent')).toBe(false);
+		expect(isVariableFilterName('queue')).toBe(false);
+		expect(isVariableFilterName('var.sip_code')).toBe(false);
+	});
+});
+
+describe('variableKeyFromFilterName', () => {
+	it('extracts the variable key from filter name', () => {
+		expect(variableKeyFromFilterName('variables.sip_code')).toBe('sip_code');
+		expect(variableKeyFromFilterName('variables.custom_field')).toBe(
+			'custom_field',
+		);
+	});
+
+	it('returns empty string when called with just the prefix', () => {
+		expect(variableKeyFromFilterName('variables.')).toBe('');
+	});
+});
+
+describe('withVariableColumnFilters', () => {
+	it('names the header filter after the variable field, keeping the header itself', () => {
+		const [decorated] = withVariableColumnFilters([
+			header,
+		]);
+
+		expect(decorated).toMatchObject(header);
+		expect(decorated.filter).toBe('variables.sip_code');
+	});
+});
+
+describe('toVariableFilterFields', () => {
+	it('describes the variable as a text field the column filter can resolve', () => {
+		expect(
+			toVariableFilterFields([
+				header,
+			]),
+		).toEqual([
+			{
+				id: 'variables.sip_code',
+				name: 'sip_code',
+				kind: WtTypeExtensionFieldKind.Text,
+			},
+		]);
+	});
+
+	it('falls back to the key from the field when the header has no text', () => {
+		const [field] = toVariableFilterFields([
+			{
+				...header,
+				text: undefined,
+			},
+		]);
+
+		expect(field.name).toBe('sip_code');
+	});
+});
+
+describe('extractVariableFilters', () => {
+	it('extracts only variable filters from params', () => {
+		const params = {
+			'variables.sip_code': '200',
+			'variables.custom_field': 'value',
+			agent: 'agent-123',
+			queue: 'queue-456',
+		};
+
+		expect(extractVariableFilters(params)).toEqual({
+			sip_code: '200',
+			custom_field: 'value',
+		});
+	});
+
+	it('converts undefined values to empty strings', () => {
+		const params = {
+			'variables.sip_code': undefined,
+			'variables.custom_field': 'value',
+		};
+
+		expect(extractVariableFilters(params)).toEqual({
+			sip_code: '',
+			custom_field: 'value',
+		});
+	});
+
+	it('returns empty object when no variable filters present', () => {
+		const params = {
+			agent: 'agent-123',
+			queue: 'queue-456',
+		};
+
+		expect(extractVariableFilters(params)).toEqual({});
+	});
+
+	it('returns empty object for empty params', () => {
+		expect(extractVariableFilters({})).toEqual({});
+	});
+});

package/src/modules/filters/scripts/variableFilters.ts

@@ -0,0 +1,43 @@
+import type { DataField } from '@webitel/api-services/gen/models';
+import type { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
+import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
+
+export const VARIABLE_FIELD_PREFIX = 'variables.';
+
+export const isVariableFilterName = (name: string) =>
+	name.startsWith(VARIABLE_FIELD_PREFIX);
+
+export const variableKeyFromFilterName = (name: string) =>
+	name.slice(VARIABLE_FIELD_PREFIX.length);
+
+const variableFieldName = (header: WtTableHeader) =>
+	header.field ?? header.value;
+
+export const withVariableColumnFilters = (headers: WtTableHeader[]) =>
+	headers.map((header) => ({
+		...header,
+		filter: variableFieldName(header),
+	}));
+
+export const toVariableFilterFields = (headers: WtTableHeader[]): DataField[] =>
+	headers.map((header) => {
+		const field = variableFieldName(header);
+
+		return {
+			id: field,
+			name: header.text ?? variableKeyFromFilterName(field),
+			kind: WtTypeExtensionFieldKind.Text,
+		};
+	});
+
+export const extractVariableFilters = (params: Record<string, unknown>) =>
+	Object.entries(params).reduce<Record<string, string>>(
+		(vars, [name, value]) => {
+			if (!isVariableFilterName(name)) return vars;
+
+			vars[variableKeyFromFilterName(name)] =
+				value == null ? '' : String(value);
+			return vars;
+		},
+		{},
+	);