@webitel/ui-datalist 26.8.11 → 26.8.13

package/package.json

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

package/src/modules/filters/components/config/dynamic-view/dynamic-filter-config-form.vue

@@ -33,6 +33,7 @@
         :filter-config="selectedFilterConfig"
         :label="valueInputLabelText"
         :disable-validation="columnMode"
+        :auto-open="columnMode"
         @update:model-value="onValueChange"
         @update:invalid="onValueInvalidChange"
       />

package/src/modules/filters/components/config/static-view/__tests__/static-filter-field.spec.ts

@@ -0,0 +1,127 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+
+import {
+	createFiltersManager,
+	type IFiltersManager,
+} from '../../../../classes/FiltersManager';
+import { createFilterConfig } from '../../../../modules/filterConfig/classes/createFilterConfig';
+import { FilterOption } from '../../../../modules/filterConfig/enums/FilterOption';
+import StaticFilterField from '../static-filter-field.vue';
+
+/* stands in for a real value input: the field under test only cares that it
+   emits update:modelValue */
+const StubInput = {
+	props: [
+		'modelValue',
+	],
+	emits: [
+		'update:modelValue',
+	],
+	template: '<div class="stub-input" />',
+};
+
+const deletableConfig = createFilterConfig({
+	name: FilterOption.Agent,
+	valueInputComponent: StubInput,
+});
+
+/* same shape as the queue logs date range: a seeded default the list cannot run without */
+const notDeletableConfig = createFilterConfig({
+	name: FilterOption.JoinedAt,
+	notDeletable: true,
+	valueInputComponent: StubInput,
+});
+
+const mountField = (
+	filterConfig: typeof deletableConfig,
+	filtersManager: IFiltersManager,
+) =>
+	mount(StaticFilterField, {
+		props: {
+			filterConfig,
+			filter: filtersManager.getFilter(filterConfig.name),
+		},
+	});
+
+const emitValue = (wrapper: ReturnType<typeof mountField>, value: unknown) =>
+	wrapper.findComponent(StubInput).vm.$emit('update:modelValue', value);
+
+describe('StaticFilterField', () => {
+	let filtersManager: IFiltersManager;
+
+	beforeEach(() => {
+		filtersManager = createFiltersManager();
+	});
+
+	it('adds the filter on its first value', () => {
+		const wrapper = mountField(deletableConfig, filtersManager);
+
+		emitValue(
+			wrapper,
+			[
+				1,
+			],
+		);
+
+		expect(wrapper.emitted('add:filter')).toEqual([
+			[
+				{
+					name: FilterOption.Agent,
+					value: [
+						1,
+					],
+				},
+			],
+		]);
+	});
+
+	it('updates an already applied filter', () => {
+		filtersManager.addFilter({
+			name: FilterOption.Agent,
+			value: [
+				1,
+			],
+		});
+
+		const wrapper = mountField(deletableConfig, filtersManager);
+
+		emitValue(
+			wrapper,
+			[
+				2,
+			],
+		);
+
+		expect(wrapper.emitted('add:filter')).toBeUndefined();
+		expect(wrapper.emitted('update:filter')).toHaveLength(1);
+	});
+
+	it('deletes an applied filter when its field is cleared', () => {
+		filtersManager.addFilter({
+			name: FilterOption.Agent,
+			value: [
+				1,
+			],
+		});
+
+		const wrapper = mountField(deletableConfig, filtersManager);
+
+		emitValue(wrapper, []);
+
+		expect(wrapper.emitted('delete:filter')).toHaveLength(1);
+	});
+
+	it('keeps a notDeletable filter when its field is cleared', () => {
+		filtersManager.addFilter({
+			name: FilterOption.JoinedAt,
+			value: 'rdt_today',
+		});
+
+		const wrapper = mountField(notDeletableConfig, filtersManager);
+
+		emitValue(wrapper, undefined);
+
+		expect(wrapper.emitted('delete:filter')).toBeUndefined();
+	});
+});

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

@@ -1,10 +1,17 @@
 <template>
-  <div class="static-filter-field">
+  <div
+    :class="{
+      'static-filter-field--pair': hidePresets,
+    }"
+    class="static-filter-field"
+  >
     <component
       :is="filterConfig.valueInputComponent"
+      :disable-default-value="true"
       :disable-validation="true /*for static filters validation is not needed (different presentation with dynamic filters)*/"
       :filter-config="filterConfig"
       :hide-label="true /*for static filters need to hide label and display placeholder (different presentation with dynamic filters)*/"
+      :static-view="true"
       :model-value="filterValue"
       :placeholder="filterConfig.label"
       @update:model-value="onValueChange"
@@ -29,6 +36,10 @@ const emit = defineEmits<StaticFilterEmits>();
 
 const filterValue = computed(() => props.filter?.value);
 
+const hidePresets = computed(
+	() => 'hidePresets' in props.filterConfig && props.filterConfig.hidePresets,
+);
+
 const { onValueChange } = useFilterValueChange({
 	filterConfig: () => props.filterConfig,
 	filter: () => props.filter,
@@ -36,9 +47,13 @@ const { onValueChange } = useFilterValueChange({
 });
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
 .static-filter-field {
   flex: 1;
   min-width: 0;
 }
+
+.static-filter-field--pair {
+  grid-column: span 2;
+}
 </style>

package/src/modules/filters/components/search-bar/__tests__/dynamic-filter-search.spec.ts

@@ -0,0 +1,97 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { reactive } from 'vue';
+
+import {
+	createFiltersManager,
+	type IFiltersManager,
+} from '../../../classes/FiltersManager';
+import DynamicFilterSearch from '../dynamic-filter-search.vue';
+
+const searchModeOptions = [
+	{
+		value: 'name',
+		text: 'Name',
+	},
+	{
+		value: 'about',
+		text: 'About',
+	},
+];
+
+const newFiltersManager = () =>
+	reactive(createFiltersManager()) as IFiltersManager;
+
+const mountSearch = (
+	filtersManager: IFiltersManager,
+	props: Record<string, unknown> = {},
+) =>
+	shallowMount(DynamicFilterSearch, {
+		props: {
+			filtersManager,
+			...props,
+		},
+	});
+
+/* wt-search-bar is an async component, shallowMount renders it as the root stub */
+const searchBarValue = (wrapper: ReturnType<typeof mountSearch>) =>
+	wrapper.attributes('value');
+
+describe('dynamic-filter-search', () => {
+	it('restores the value of the filter of the current search mode', async () => {
+		const filtersManager = newFiltersManager();
+
+		const wrapper = mountSearch(filtersManager, {
+			searchModeOptions,
+			searchMode: 'name',
+			isFiltersRestoring: true,
+		});
+
+		filtersManager.addFilter({
+			name: 'name',
+			value: 'john',
+		});
+		await wrapper.setProps({
+			isFiltersRestoring: false,
+		});
+
+		expect(searchBarValue(wrapper)).toBe('john');
+	});
+
+	it('switches the search mode to the restored search filter', async () => {
+		const filtersManager = newFiltersManager();
+
+		const wrapper = mountSearch(filtersManager, {
+			searchModeOptions,
+			searchMode: '',
+			isFiltersRestoring: true,
+		});
+
+		filtersManager.addFilter({
+			name: 'about',
+			value: 'manager',
+		});
+		await wrapper.setProps({
+			isFiltersRestoring: false,
+		});
+
+		expect(searchBarValue(wrapper)).toBe('manager');
+		expect(wrapper.emitted('update:searchMode')?.at(-1)).toEqual([
+			'about',
+		]);
+	});
+
+	it('restores the value of a single search filter', () => {
+		const filtersManager = newFiltersManager();
+		filtersManager.addFilter({
+			name: 'q',
+			value: 'john',
+		});
+
+		const wrapper = mountSearch(filtersManager, {
+			singleSearchName: 'q',
+		});
+
+		expect(searchBarValue(wrapper)).toBe('john');
+	});
+});

package/src/modules/filters/components/search-bar/dynamic-filter-search.vue

@@ -155,12 +155,14 @@ watch(
 	(next) => {
 		if (next) return;
 
-		const searchModes = [
-			defaultSearchName,
-		];
+		const searchModes = hasSearchModes.value
+			? (props.searchModeOptions?.map((option) => option.value) ?? [])
+			: [
+					defaultSearchName,
+				];
+
 		if (hasSearchModes.value && !searchMode.value) {
-			searchMode.value =
-				props.searchModeOptions?.map((option) => option.value)[0] || '';
+			searchMode.value = searchModes[0] || '';
 		}
 
 		for (const mode of searchModes) {

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

@@ -62,17 +62,17 @@ export const useFilterConfigsToolkit = ({
 				 * make filterConfigs from standard filterOptions
 				 */
 				.map((opt) => {
-					if (opt instanceof FilterConfig) {
-						return opt;
-					}
-
 					if (typeof opt === 'string') {
 						return createFilterConfig({
 							name: opt,
 						});
 					}
 
-					return new FilterConfig({
+					if (opt instanceof FilterConfig || opt.valueInputComponent) {
+						return opt as BaseFilterConfig;
+					}
+
+					return createFilterConfig({
 						...opt,
 						name: opt.name,
 					});

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

@@ -10,16 +10,6 @@ type StaticFilterEmit = <K extends keyof StaticFilterEmits>(
 	...args: StaticFilterEmits[K]
 ) => void;
 
-/**
- * Turns a new filter value into the right manager event:
- * - empty value (except booleans) → `delete:filter` (only if the filter exists)
- * - no filter yet → `add:filter`
- * - filter exists → `update:filter`, keeping its label
- *
- * Shared by the static filter field and the column filter.
- *
- * [WTEL-7727](https://webitel.atlassian.net/browse/WTEL-7727)
- */
 export const useFilterValueChange = ({
 	filterConfig,
 	filter,
@@ -35,6 +25,7 @@ export const useFilterValueChange = ({
 
 		if (isEmpty(value) && typeof value !== 'boolean') {
 			if (!currentFilter) return;
+			if (config.notDeletable) return;
 			return emit('delete:filter', currentFilter);
 		}
 

package/src/modules/filters/modules/filterConfig/classes/FilterConfig.ts

@@ -9,6 +9,7 @@ export interface BaseFilterConfig {
 	valuePreviewComponent: Component;
 	label?: ReturnType<MessageResolver> | string;
 	notDeletable?: boolean;
+	showFilterName?: boolean;
 }
 
 export type FilterConfigBaseParams = {
@@ -47,7 +48,14 @@ export type FilterConfigSearchMethodParams = [
 	}?,
 ];
 
-export type AnyFilterConfig = IWtSysTypeFilterConfig | BaseFilterConfig;
+export interface IDateRangeFilterConfig extends BaseFilterConfig {
+	readonly hidePresets: boolean;
+}
+
+export type AnyFilterConfig =
+	| IWtSysTypeFilterConfig
+	| IDateRangeFilterConfig
+	| BaseFilterConfig;
 
 /**
  * Loose shapes forwarded into filter-config lookup calls by

package/src/modules/filters/modules/filterConfig/components/_shared/date-time-filter/date-time-options/__tests__/date-time-options-filter-value-field.spec.ts

@@ -0,0 +1,43 @@
+import { shallowMount } from '@vue/test-utils';
+import { RelativeDatetimeValue } from '@webitel/ui-sdk/enums';
+import { describe, expect, it } from 'vitest';
+
+import DateTimeOptionsFilterValueField from '../date-time-options-filter-value-field.vue';
+
+const mountField = (props: Record<string, unknown> = {}) =>
+	shallowMount(DateTimeOptionsFilterValueField, {
+		props,
+	});
+
+describe('DateTimeOptionsFilterValueField default value', () => {
+	it('preselects today when it is the only value source', () => {
+		const wrapper = mountField();
+
+		expect(wrapper.emitted('update:modelValue')).toEqual([
+			[
+				RelativeDatetimeValue.Today,
+			],
+		]);
+	});
+
+	/*
+	the static panel lists every configured filter, so a field seeding itself
+	would apply a filter the user never set
+	 */
+	it('seeds nothing when disableDefaultValue is set', () => {
+		const wrapper = mountField({
+			disableDefaultValue: true,
+		});
+
+		expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+	});
+
+	it('leaves an existing value alone', () => {
+		const wrapper = mountField({
+			disableDefaultValue: true,
+			modelValue: RelativeDatetimeValue.ThisWeek,
+		});
+
+		expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+	});
+});

package/src/modules/filters/modules/filterConfig/components/_shared/date-time-filter/date-time-options/date-time-options-filter-value-field.vue

@@ -1,20 +1,27 @@
 <template>
-  <div class="date-time-options-filter-value-field">
-    <wt-radio
-      v-for="value of radioOpts"
-      :key="value"
-      :selected="selectedRadioValue"
-      :label="t(`webitelUI.filters.datetime.${value}`)"
-      :value="value"
-      @update:selected="handleRadioChange"
-    />
+  <div
+    :class="{
+      'date-time-options-filter-value-field--range': hidePresets,
+    }"
+    class="date-time-options-filter-value-field"
+  >
+    <template v-if="!hidePresets">
+      <wt-radio
+        v-for="value of radioOpts"
+        :key="value"
+        :selected="selectedRadioValue"
+        :label="t(`webitelUI.filters.datetime.${value}`)"
+        :value="value"
+        @update:selected="handleRadioChange"
+      />
+    </template>
     <wt-datepicker
       v-if="showDatepickers"
       :model-value="absoluteModel?.from"
       :label="t('reusable.from')"
       show-time
       required
-			:v="!disableValidation && v$.from"
+      :v="!disableValidation && v$.from"
       @update:model-value="changeAbsoluteValue($event, 'from')"
     />
     <wt-datepicker
@@ -23,7 +30,7 @@
       :label="t('reusable.to')"
       show-time
       required
-			:v="!disableValidation && v$.to"
+      :v="!disableValidation && v$.to"
       @update:model-value="changeAbsoluteValue($event, 'to')"
     />
   </div>
@@ -34,14 +41,12 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { WtRadio } from '@webitel/ui-sdk/components';
 import { RelativeDatetimeValue } from '@webitel/ui-sdk/enums';
-import { isEmpty } from '@webitel/ui-sdk/scripts';
+import { isEmpty, normalizeToTimestamp } from '@webitel/ui-sdk/scripts';
 import { endOfToday, startOfToday } from 'date-fns';
-import { computed, ref, watch } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-const props = defineProps<{
-	disableValidation?: boolean;
-}>();
+import type { IDateRangeFilterConfig } from '../../../../classes/FilterConfig';
 
 const model = defineModel<
 	| RelativeDatetimeValue
@@ -51,6 +56,19 @@ const model = defineModel<
 	  }
 >();
 
+const props = defineProps<{
+	filterConfig?: IDateRangeFilterConfig;
+	disableValidation?: boolean;
+	/**
+	 * @description
+	 * Suppresses the preselected preset. The static filters panel lists every
+	 * configured filter, so a field that seeds itself would apply a filter the
+	 * user never set.
+	 */
+	disableDefaultValue?: boolean;
+	staticView?: boolean;
+}>();
+
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,
@@ -59,6 +77,10 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
+const hidePresets = computed(
+	() => !!props.staticView && !!props.filterConfig?.hidePresets,
+);
+
 const radioOpts = [
 	RelativeDatetimeValue.Today,
 	RelativeDatetimeValue.ThisWeek,
@@ -66,37 +88,40 @@ const radioOpts = [
 	RelativeDatetimeValue.Custom,
 ];
 
-const selectedRadioValue = ref();
+if (!props.disableDefaultValue && isEmpty(model.value)) {
+	model.value = radioOpts[0];
+}
 
-const initialize = () => {
-	if (!model.value) {
-		/* initialize */
-		selectedRadioValue.value = radioOpts[0];
-		model.value = selectedRadioValue.value;
-	} else if (typeof model.value === 'string') {
-		/* RelativeDatetimeValue */
-		selectedRadioValue.value = model.value;
-	} else {
-		/* { from, to } */
-		selectedRadioValue.value = RelativeDatetimeValue.Custom;
-	}
-};
+const selectedRadioValue = computed<string>(() => {
+	if (isEmpty(model.value)) return '';
 
-initialize();
+	return typeof model.value === 'string'
+		? model.value
+		: RelativeDatetimeValue.Custom;
+});
 
 const absoluteModel = computed(() => {
-	return !isEmpty(model.value) && typeof model.value === 'object'
-		? model.value
-		: undefined;
+	if (isEmpty(model.value)) return undefined;
+
+	if (typeof model.value === 'object') return model.value;
+
+	return {
+		from: normalizeToTimestamp(model.value, {
+			round: 'start',
+		}),
+		to: normalizeToTimestamp(model.value, {
+			round: 'end',
+		}),
+	};
 });
 
 const showDatepickers = computed(() => {
-	return selectedRadioValue.value === RelativeDatetimeValue.Custom;
+	return (
+		hidePresets.value ||
+		selectedRadioValue.value === RelativeDatetimeValue.Custom
+	);
 });
 
-const from = computed(() => absoluteModel.value?.from);
-const to = computed(() => absoluteModel.value?.to);
-
 const v$ = useVuelidate(
 	computed(() => ({
 		from: showDatepickers.value
@@ -111,15 +136,18 @@ const v$ = useVuelidate(
 			: {},
 	})),
 	{
-		from,
-		to,
+		from: computed(() => absoluteModel.value?.from),
+		to: computed(() => absoluteModel.value?.to),
 	},
 	{
 		$autoDirty: true,
 	},
 );
 
-if (!props?.disableValidation) v$.value.$touch();
+onMounted(() => {
+	if (!props.disableValidation) v$.value.$touch();
+});
+
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {
@@ -132,7 +160,7 @@ watch(
 
 const handleRadioChange = (selected: string | number | boolean | object) => {
 	const value = selected as RelativeDatetimeValue;
-	selectedRadioValue.value = value;
+
 	if (value === RelativeDatetimeValue.Custom) {
 		model.value = {
 			from: startOfToday().getTime(),
@@ -145,7 +173,7 @@ const handleRadioChange = (selected: string | number | boolean | object) => {
 
 const changeAbsoluteValue = (value: number, prop: 'from' | 'to') => {
 	const newModelValue = {
-		...(model.value as {
+		...(absoluteModel.value as {
 			from: number;
 			to: number;
 		}),
@@ -162,4 +190,14 @@ const changeAbsoluteValue = (value: number, prop: 'from' | 'to') => {
   flex-direction: column;
   gap: var(--spacing-xs);
 }
+
+.date-time-options-filter-value-field--range {
+  flex-direction: row;
+  align-items: start;
+}
+
+.date-time-options-filter-value-field--range > * {
+  flex: 1;
+  min-width: 0;
+}
 </style>

package/src/modules/filters/modules/filterConfig/components/_shared/date-time-filter/filterConfig.ts

@@ -0,0 +1,27 @@
+import {
+	FilterConfig,
+	type FilterConfigBaseParams,
+	type IDateRangeFilterConfig,
+} from '../../../classes/FilterConfig';
+import DateTimeOptionsFilterValueField from './date-time-options/date-time-options-filter-value-field.vue';
+import DateTimeOptionsFilterValuePreview from './date-time-options/date-time-options-filter-value-preview.vue';
+
+class DateRangeFilterConfig
+	extends FilterConfig
+	implements IDateRangeFilterConfig
+{
+	readonly hidePresets = true;
+
+	constructor(params: FilterConfigBaseParams) {
+		super({
+			...params,
+			valueInputComponent: DateTimeOptionsFilterValueField,
+			valuePreviewComponent: DateTimeOptionsFilterValuePreview,
+		});
+	}
+}
+
+export type { DateRangeFilterConfig };
+
+export const createDateRangeFilterConfig = (params: FilterConfigBaseParams) =>
+	new DateRangeFilterConfig(params);