@webitel/ui-datalist 26.8.6 → 26.8.8

package/src/modules/filters/components/preview/dynamic-filter-preview.vue

@@ -65,11 +65,8 @@
 
 <script lang="ts" setup>
 import { WtChip, WtLoader, WtPopover } from '@webitel/ui-sdk/components';
-import { computed, ref, watch } from 'vue';
-
 import { FilterInitParams } from '../../classes/Filter';
-import type { FilterConfigSearchMethodParams } from '../../modules/filterConfig/classes/FilterConfig';
-import { FilterOptionToPreviewApiSearchMethodMap } from '../../modules/filterConfig/components';
+import { useFilterValuePreview } from '../../composables/useFilterValuePreview';
 import DynamicFilterConfigForm from '../config/dynamic-view/dynamic-filter-config-form.vue';
 import DynamicFilterConfigView from '../config/dynamic-view/dynamic-filter-config-view.vue';
 import { DynamicFilterEmits, DynamicFilterProps } from '../types/Filter.types';
@@ -79,7 +76,10 @@ const props = defineProps<DynamicFilterProps>();
 
 const emit = defineEmits<DynamicFilterEmits>();
 
-const localValue = ref();
+const { localValue, isRenderPreview, fillLocalValue } = useFilterValuePreview({
+	filter: () => props.filter,
+	filterConfig: () => props.filterConfig,
+});
 
 const showChipPopover = (
 	event: Event,
@@ -92,61 +92,6 @@ const showChipPopover = (
 	showPopoverCb(event);
 };
 
-/**
- * @author @dlohvinov
- *
- * @description
- * loading filters preview data -> main preview component
- * instead of tooltip-components to avoid api requests spam
- */
-const fillLocalValue = async (filter = props.filter) => {
-	const filterName = props.filter.name;
-	const filterValue = filter.value;
-
-	const { filterConfig } = props;
-	const valueSearchMethod =
-		'searchRecords' in filterConfig
-			? (...params: FilterConfigSearchMethodParams) => {
-					/* arrow fn here preserves filterConfig class "this" */
-					return filterConfig.searchRecords(...params);
-				}
-			: FilterOptionToPreviewApiSearchMethodMap[filterName];
-
-	if (valueSearchMethod) {
-		const { items } = await valueSearchMethod(
-			{
-				id: filterValue,
-				// -1 returns all records
-				size: -1,
-			},
-			{
-				filterValue,
-				filterName,
-				filterConfig: props.filterConfig,
-			},
-		);
-		localValue.value = items;
-	} else {
-		localValue.value = filterValue;
-	}
-};
-
-watch(
-	() => props.filter.value,
-	() => {
-		fillLocalValue(props.filter);
-	},
-	{
-		immediate: true,
-	},
-);
-
-// [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 submit = (
 	filter: FilterInitParams,
 	{

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

@@ -79,6 +79,7 @@ import { ApplyPresetAction, SavePresetAction } from '../../filter-presets';
 import { FilterInitParams, IFilter } from '../classes/Filter';
 import { IFiltersManager } from '../classes/FiltersManager';
 import { useFilterConfigsToolkit } from '../composables/useFilterConfigsToolkit';
+import { useSelectedFilters } from '../composables/useSelectedFilters';
 import { AnyFilterConfig } from '../modules/filterConfig/classes/FilterConfig';
 import { FilterOption } from '../modules/filterConfig/enums/FilterOption';
 import StaticFilterField from './config/static-view/static-filter-field.vue';
@@ -197,36 +198,13 @@ https://webitel.atlassian.net/browse/WTEL-7014
 Clear filters button should be active only if filters are defined in the table-filter-panel. Excluding the search filter
 **/
 
-const listSelectedFilters = computed(() => {
-	const allowedKeys = new Set([
-		...props.filterOptions.map((filter) =>
-			typeof filter === 'string' ? filter : filter.name,
-		),
-		...(props.filterableExtensionFields ?? []).map((filter) => filter.id),
-	]);
-	return new Map(
-		[
-			...props.filtersManager.filters,
-		].filter(([key]) => allowedKeys.has(key)),
-	);
+const { listSelectedFilters, hasAnyFilters } = useSelectedFilters({
+	filtersManager: () => props.filtersManager,
+	filterOptions: () => props.filterOptions,
+	filterableExtensionFields: () => props.filterableExtensionFields,
+	filterConfigs,
 });
 
-/**
- * @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

@@ -18,6 +18,11 @@ export interface StaticFilterEmits extends FilterEmits {
 
 export interface DynamicFilterEmits extends FilterEmits {}
 
+/** column filter lives in a popover, so it also asks the parent to close it */
+export interface ColumnFilterEmits extends StaticFilterEmits {
+	close: [];
+}
+
 export interface FilterProps {
 	filter: IFilter;
 	filterConfig: AnyFilterConfig;

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

@@ -0,0 +1,116 @@
+import type { DataField } from '@webitel/api-services/gen/models';
+import { computed, type MaybeRefOrGetter, toValue } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import type { DatalistTableHeader } from '../../types/tableStore.types';
+import type { FilterName } from '../classes/Filter';
+import type { IFiltersManager } from '../classes/FiltersManager';
+import { createFilterConfig } from '../modules/filterConfig/classes/createFilterConfig';
+import {
+	type AnyFilterConfig,
+	FilterConfig,
+} from '../modules/filterConfig/classes/FilterConfig';
+import { createTypeExtensionFilterConfig } from '../modules/filterConfig/components/_custom';
+import type { FilterConfigDefinition } from '../modules/filterConfig/types/FilterConfigDefinition';
+
+const isResolvedFilterConfig = (
+	filter: DatalistTableHeader['filter'],
+): filter is AnyFilterConfig => typeof filter === 'object' && filter !== null;
+
+/**
+ * Resolves a table header into its filter config and the filter currently applied in the
+ * filters manager.
+ *
+ * `header.filter` is either a plain name — resolved the same way the panel does
+ * (useFilterConfigsToolkit): a custom (type extension) column is matched by field id in
+ * `filterableExtensionFields`, a pre-configured definition from `filterOptions` (the page's
+ * filtersOptions) is reused as is, everything else is a standard filter option with an i18n
+ * label fallback — or an already-resolved config, used as is. Passing a resolved config from
+ * `headers.ts` skips the `filterOptions`/`filterableExtensionFields` search entirely.
+ *
+ * [WTEL-7727](https://webitel.atlassian.net/browse/WTEL-7727)
+ */
+export const useColumnFilter = ({
+	header,
+	filtersManager,
+	filterOptions = [],
+	filterableExtensionFields = [],
+}: {
+	header: MaybeRefOrGetter<DatalistTableHeader>;
+	filtersManager: MaybeRefOrGetter<IFiltersManager>;
+	filterOptions?: MaybeRefOrGetter<FilterConfigDefinition[]>;
+	filterableExtensionFields?: MaybeRefOrGetter<DataField[]>;
+}) => {
+	const { t } = useI18n();
+
+	const resolvedFilter = computed(() => {
+		const filter = toValue(header).filter;
+		return isResolvedFilterConfig(filter) ? filter : undefined;
+	});
+
+	const filterName = computed(
+		() => (resolvedFilter.value?.name ?? toValue(header).filter) as FilterName,
+	);
+
+	const extensionField = computed(() =>
+		resolvedFilter.value
+			? undefined
+			: toValue(filterableExtensionFields).find(
+					(field) => field.id === filterName.value,
+				),
+	);
+
+	const configuredOption = computed(() =>
+		resolvedFilter.value
+			? undefined
+			: toValue(filterOptions).find(
+					(opt): opt is AnyFilterConfig =>
+						typeof opt !== 'string' && opt.name === filterName.value,
+				),
+	);
+
+	const filterConfig = computed(() => {
+		let config: AnyFilterConfig;
+
+		if (resolvedFilter.value) {
+			config = resolvedFilter.value;
+		} else if (extensionField.value) {
+			config = createTypeExtensionFilterConfig(
+				{
+					name: extensionField.value.id,
+				},
+				{
+					field: extensionField.value,
+				},
+			);
+		} else {
+			const option = configuredOption.value;
+			config =
+				option instanceof FilterConfig
+					? option
+					: option
+						? new FilterConfig({
+								...option,
+								name: option.name,
+							})
+						: createFilterConfig({
+								name: filterName.value,
+							});
+		}
+
+		if (!config.label) {
+			config.label = t(`webitelUI.filters.${config.name}`);
+		}
+
+		return config;
+	});
+
+	const filter = computed(() =>
+		toValue(filtersManager).getFilter(filterName.value),
+	);
+
+	return {
+		filterConfig,
+		filter,
+	};
+};

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

@@ -0,0 +1,58 @@
+import { isEmpty } from '@webitel/ui-sdk/scripts';
+import { type MaybeRefOrGetter, toValue } from 'vue';
+
+import type { FilterValue, IFilter } from '../classes/Filter';
+import type { StaticFilterEmits } from '../components/types/Filter.types';
+import type { AnyFilterConfig } from '../modules/filterConfig';
+
+type StaticFilterEmit = <K extends keyof StaticFilterEmits>(
+	event: K,
+	...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,
+	emit,
+}: {
+	filterConfig: MaybeRefOrGetter<AnyFilterConfig>;
+	filter: MaybeRefOrGetter<IFilter | undefined>;
+	emit: StaticFilterEmit;
+}) => {
+	const onValueChange = (value: FilterValue) => {
+		const currentFilter = toValue(filter);
+		const config = toValue(filterConfig);
+
+		if (isEmpty(value) && typeof value !== 'boolean') {
+			if (!currentFilter) return;
+			return emit('delete:filter', currentFilter);
+		}
+
+		if (isEmpty(currentFilter?.value)) {
+			return emit('add:filter', {
+				name: config.name,
+				value,
+			});
+		}
+
+		emit('update:filter', {
+			name: config.name,
+			value,
+			label: currentFilter?.label,
+		});
+	};
+
+	return {
+		onValueChange,
+	};
+};

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

@@ -0,0 +1,87 @@
+import { computed, type MaybeRefOrGetter, ref, toValue, watch } from 'vue';
+
+import type { IFilter } from '../classes/Filter';
+import type {
+	AnyFilterConfig,
+	FilterConfigSearchMethodParams,
+} from '../modules/filterConfig/classes/FilterConfig';
+import { FilterOptionToPreviewApiSearchMethodMap } from '../modules/filterConfig/components';
+
+/**
+ * @author @dlohvinov
+ *
+ * @description
+ * Loads the data shown in a filter's hover preview (records behind the stored ids)
+ * once per filter value, in the parent, instead of inside tooltip components —
+ * to avoid api requests spam.
+ *
+ * Shared by the panel chip and the column header icon (WTEL-7727).
+ */
+export const useFilterValuePreview = ({
+	filter,
+	filterConfig,
+}: {
+	filter: MaybeRefOrGetter<IFilter | undefined>;
+	filterConfig: MaybeRefOrGetter<AnyFilterConfig>;
+}) => {
+	const localValue = ref();
+
+	const fillLocalValue = async (currentFilter = toValue(filter)) => {
+		if (!currentFilter) {
+			localValue.value = undefined;
+			return;
+		}
+
+		const filterName = currentFilter.name;
+		const filterValue = currentFilter.value;
+		const config = toValue(filterConfig);
+
+		const valueSearchMethod =
+			'searchRecords' in config
+				? (...params: FilterConfigSearchMethodParams) => {
+						/* arrow fn here preserves filterConfig class "this" */
+						return config.searchRecords(...params);
+					}
+				: FilterOptionToPreviewApiSearchMethodMap[filterName];
+
+		if (valueSearchMethod) {
+			const { items } = await valueSearchMethod(
+				{
+					id: filterValue,
+					// -1 returns all records
+					size: -1,
+				},
+				{
+					filterValue,
+					filterName,
+					filterConfig: config,
+				},
+			);
+			localValue.value = items;
+		} else {
+			localValue.value = filterValue;
+		}
+	};
+
+	watch(
+		() => toValue(filter)?.value,
+		() => {
+			fillLocalValue(toValue(filter));
+		},
+		{
+			immediate: true,
+		},
+	);
+
+	// [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,
+	);
+
+	return {
+		localValue,
+		isRenderPreview,
+		fillLocalValue,
+	};
+};

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

@@ -0,0 +1,64 @@
+import type { DataField } from '@webitel/api-services/gen/models';
+import {
+	type ComputedRef,
+	computed,
+	type MaybeRefOrGetter,
+	toValue,
+} from 'vue';
+
+import type { FilterName, IFilter } from '../classes/Filter';
+import type { IFiltersManager } from '../classes/FiltersManager';
+import type { BaseFilterConfig } from '../modules/filterConfig/classes/FilterConfig';
+import type { FilterConfigDefinition } from '../modules/filterConfig/types/FilterConfigDefinition';
+
+/**
+ * Filters from the manager that belong to this panel/menu (its filter options + extension fields),
+ * so search filters living in the same manager are ignored.
+ *
+ * `hasAnyFilters` skips `notDeletable` configs — they are seeded defaults, not a user choice
+ * ([WTEL-7014](https://webitel.atlassian.net/browse/WTEL-7014)).
+ */
+export const useSelectedFilters = ({
+	filtersManager,
+	filterOptions,
+	filterableExtensionFields = [],
+	filterConfigs,
+}: {
+	filtersManager: MaybeRefOrGetter<IFiltersManager>;
+	filterOptions: MaybeRefOrGetter<FilterConfigDefinition[]>;
+	filterableExtensionFields?: MaybeRefOrGetter<DataField[] | undefined>;
+	filterConfigs: ComputedRef<BaseFilterConfig[]>;
+}) => {
+	const listSelectedFilters = computed(() => {
+		const allowedKeys = new Set<FilterName>([
+			...toValue(filterOptions).map((filter) =>
+				typeof filter === 'string' ? filter : filter.name,
+			),
+			...(toValue(filterableExtensionFields) ?? [])
+				.map((field) => field.id)
+				.filter((id): id is string => id !== undefined),
+		]);
+
+		return new Map<FilterName, IFilter>(
+			[
+				...toValue(filtersManager).filters,
+			].filter(([key]) => allowedKeys.has(key)),
+		);
+	});
+
+	const hasAnyFilters = computed(() =>
+		[
+			...listSelectedFilters.value.keys(),
+		].some((name) => {
+			const filterConfig = filterConfigs.value.find(
+				(config) => String(config.name) === String(name),
+			);
+			return !filterConfig?.notDeletable;
+		}),
+	);
+
+	return {
+		listSelectedFilters,
+		hasAnyFilters,
+	};
+};

package/src/modules/filters/createTableFiltersStore.ts

@@ -45,7 +45,11 @@ export const tableFiltersStoreBody = (
 
 	let persistedStorageControllers: PersistedStorageController[] = [];
 
-	const setupPersistence = () => {
+	const setupPersistence = ({
+		isNested = false,
+	}: {
+		isNested?: boolean;
+	} = {}) => {
 		const filtersStorage = usePersistedStorage({
 			name: 'filters',
 
@@ -53,10 +57,14 @@ export const tableFiltersStoreBody = (
 				() => filtersManager,
 			) /* computed is used to provide value as ref(), not reactive() – as per usePersistedStorage interface */,
 
-			storages: [
-				PersistedStorageType.Route,
-				PersistedStorageType.SessionStorage,
-			],
+			storages: isNested
+				? [
+						PersistedStorageType.SessionStorage,
+					]
+				: [
+						PersistedStorageType.Route,
+						PersistedStorageType.SessionStorage,
+					],
 			storagePath: namespace,
 
 			/* use custom .toString() logic, provided by FiltersManager */

package/src/modules/filters/index.ts

@@ -12,6 +12,8 @@ import {
 	type FiltersManagerConfig,
 	type IFiltersManager,
 } from './classes/FiltersManager';
+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 { FilterOption } from './modules/filterConfig/enums/FilterOption';
@@ -28,9 +30,11 @@ export type {
 	IFiltersManager,
 };
 export {
+	ColumnFilterComponent,
 	createFiltersManager,
 	DynamicFilterSearchComponent,
 	Filter,
 	FilterOption,
+	FiltersActionsMenuComponent,
 	TableFiltersPanelComponent,
 };

package/src/modules/filters/modules/filterConfig/components/_custom/filterConfig.ts

@@ -1,7 +1,7 @@
 import { SysTypesAPI as sysTypes } from '@webitel/api-services/api';
 import type { DataField } from '@webitel/api-services/gen/models';
 import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
-import { get } from 'lodash';
+import { get } from 'lodash-es';
 import type {
 	BaseFilterConfig,
 	FilterConfigBaseParams,

package/src/modules/filters/modules/filterConfig/components/_custom/type-extension-filter-value-field.vue

@@ -4,7 +4,7 @@
     v-model:model-value="model"
     :field="props.filterConfig.field"
     :required="false"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
   >
     <template #[WtTypeExtensionFieldKind.Boolean]="{ defaultProps }">
       <has-option-filter-value-field v-bind="defaultProps" v-model:model-value="booleanModel"/>
@@ -12,7 +12,7 @@
     <template #[WtTypeExtensionFieldKind.Select]="{ defaultProps }">
       <wt-single-select
         v-bind="defaultProps"
-        :v="v$.model"
+        :v="!disableValidation && v$.model"
         :model-value="
           model ??
           [] /* so that component won't break when model is nullish at init */
@@ -26,7 +26,7 @@
     <template #[WtTypeExtensionFieldKind.Multiselect]="{ defaultProps }">
       <wt-multi-select
         v-bind="defaultProps"
-        :v="v$.model"
+        :v="!disableValidation && v$.model"
         :model-value="
           model ??
           [] /* so that component won't break when model is nullish at init */
@@ -39,7 +39,10 @@
       />
     </template>
     <template #[WtTypeExtensionFieldKind.Calendar]>
-      <date-time-options-filter-value-field v-model:model-value="dateTimeModel" />
+      <date-time-options-filter-value-field
+        v-model:model-value="dateTimeModel"
+        :disable-validation="disableValidation"
+      />
     </template>
   </wt-type-extension-value-input>
 </template>
@@ -66,6 +69,7 @@ const model = defineModel<unknown>();
 
 const props = defineProps<{
 	filterConfig: ITypeExtensionFilterConfig;
+	disableValidation?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -116,7 +120,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/_shared/date-time-filter/date-time-filter-value-field.vue

@@ -6,7 +6,7 @@
       class="date-time-filter-value-field__picker"
       show-time
       required
-      :v="v$.from"
+      :v="!disableValidation && v$.from"
       @update:model-value="handleInput('from', $event)"
     />
 
@@ -16,7 +16,7 @@
       class="date-time-filter-value-field__picker"
       show-time
       required
-      :v="v$.to"
+      :v="!disableValidation && v$.to"
       @update:model-value="handleInput('to', $event)"
     />
   </div>
@@ -34,6 +34,10 @@ type ModelValue = {
 	to: number;
 };
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,
@@ -69,8 +73,7 @@ const v$ = useVuelidate(
 	},
 );
 
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {

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

@@ -14,7 +14,7 @@
       :label="t('reusable.from')"
       show-time
       required
-			:v="v$.from"
+			:v="!disableValidation && v$.from"
       @update:model-value="changeAbsoluteValue($event, 'from')"
     />
     <wt-datepicker
@@ -23,7 +23,7 @@
       :label="t('reusable.to')"
       show-time
       required
-			:v="v$.to"
+			:v="!disableValidation && v$.to"
       @update:model-value="changeAbsoluteValue($event, 'to')"
     />
   </div>
@@ -39,6 +39,10 @@ import { endOfToday, startOfToday } from 'date-fns';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+const props = defineProps<{
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<
 	| RelativeDatetimeValue
 	| {
@@ -115,8 +119,7 @@ const v$ = useVuelidate(
 	},
 );
 
-v$.value.$touch();
-
+if (!props?.disableValidation) v$.value.$touch();
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {