@webitel/ui-datalist 26.8.7 → 26.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.8.7",
+	"version": "26.8.8",
 	"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/apply-preset-action.vue

@@ -1,9 +1,14 @@
 <template>
   <div class="apply-preset-action">
-    <wt-icon-action
-      :action="IconAction.APPLY_PRESET"
-      @click="showPresetsList = true"
-    />
+    <slot
+      name="activator"
+      :open="() => (showPresetsList = true)"
+    >
+      <wt-icon-action
+        :action="IconAction.APPLY_PRESET"
+        @click="showPresetsList = true"
+      />
+    </slot>
     <wt-popup
       :shown="showPresetsList"
       size="md"
@@ -128,6 +133,13 @@ const { t } = useI18n();
 
 const showPresetsList = ref(false);
 
+/** lets a parent (e.g. filters actions menu) open the popup without the icon */
+defineExpose({
+	open: () => {
+		showPresetsList.value = true;
+	},
+});
+
 const { dataList, error, isLoading, filtersManager, presetId } = storeToRefs(
 	props.presetsStore,
 );

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

@@ -1,10 +1,16 @@
 <template>
   <div class="save-preset-action">
-    <wt-icon-action
-      :action="IconAction.SAVE_PRESET"
+    <slot
+      name="activator"
+      :open="() => (showSaveForm = true)"
       :disabled="disableAction"
-      @click="showSaveForm = true"
-    />
+    >
+      <wt-icon-action
+        :action="IconAction.SAVE_PRESET"
+        :disabled="disableAction"
+        @click="showSaveForm = true"
+      />
+    </slot>
 
     <save-preset-popup
       v-if="
@@ -100,6 +106,14 @@ const disableAction = computed(() => {
  * */
 const showSaveForm = ref(false);
 
+/** lets a parent (e.g. filters actions menu) open the popup without the icon */
+defineExpose({
+	open: () => {
+		showSaveForm.value = true;
+	},
+	disabled: disableAction,
+});
+
 /**
  * if preset with the same name already exists, this will be suggested to set to that preset
  */

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

@@ -0,0 +1,70 @@
+<template>
+  <dynamic-filter-preview-info
+    v-if="filter"
+    class="column-filter-preview"
+  >
+    <template #header>
+      {{ filterConfig.label }}
+    </template>
+
+    <template #default>
+      <wt-loader
+        v-if="!isRenderPreview"
+        :size="ComponentSize.SM"
+      />
+      <component
+        v-else
+        :is="filterConfig.valuePreviewComponent"
+        :filter="filter"
+        :filter-config="filterConfig"
+        :value="localValue"
+      />
+    </template>
+  </dynamic-filter-preview-info>
+</template>
+
+<script lang="ts" setup>
+import type { DataField } from '@webitel/api-services/gen/models';
+import { WtLoader } from '@webitel/ui-sdk/components';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
+
+import type { DatalistTableHeader } from '../../../types/tableStore.types';
+import type { IFiltersManager } from '../../classes/FiltersManager';
+import { useColumnFilter } from '../../composables/useColumnFilter';
+import { useFilterValuePreview } from '../../composables/useFilterValuePreview';
+import type { FilterConfigDefinition } from '../../modules/filterConfig/types/FilterConfigDefinition';
+import DynamicFilterPreviewInfo from '../preview/dynamic-filter-preview-info.vue';
+
+/**
+ * Hover preview of an applied column filter (`column-filter` slot, `formView: false`):
+ * the same "label + values" card the panel chip shows on hover.
+ *
+ * [WTEL-7727](https://webitel.atlassian.net/browse/WTEL-7727)
+ */
+const props = defineProps<{
+	header: DatalistTableHeader;
+	filtersManager: IFiltersManager;
+	/** the page's filter definitions; a configured one is reused for the matching header */
+	filterOptions?: FilterConfigDefinition[];
+	/** custom (type extension) fields the table can filter by; matched to the header by field id */
+	filterableExtensionFields?: DataField[];
+}>();
+
+const { filterConfig, filter } = useColumnFilter({
+	header: () => props.header,
+	filtersManager: () => props.filtersManager,
+	filterOptions: () => props.filterOptions ?? [],
+	filterableExtensionFields: () => props.filterableExtensionFields ?? [],
+});
+
+const { localValue, isRenderPreview } = useFilterValuePreview({
+	filter,
+	filterConfig,
+});
+</script>
+
+<style lang="scss" scoped>
+.wt-loader {
+  margin: auto;
+}
+</style>

package/src/modules/filters/components/column/column-filter.vue

@@ -0,0 +1,76 @@
+<template>
+  <column-filter-preview
+    v-if="!formView"
+    :header="header"
+    :filters-manager="filtersManager"
+    :filter-options="filterOptions"
+    :filterable-extension-fields="filterableExtensionFields"
+  />
+  <dynamic-filter-config-form
+    v-else
+    class="column-filter"
+    :filter="filter"
+    :filter-config="filterConfig"
+    column-mode
+    @cancel="close"
+    @submit="onSubmit"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { DataField } from '@webitel/api-services/gen/models';
+
+import type { DatalistTableHeader } from '../../../types/tableStore.types';
+import type { FilterInitParams } from '../../classes/Filter';
+import type { IFiltersManager } from '../../classes/FiltersManager';
+import { useColumnFilter } from '../../composables/useColumnFilter';
+import { useFilterValueChange } from '../../composables/useFilterValueChange';
+import type { FilterConfigDefinition } from '../../modules/filterConfig/types/FilterConfigDefinition';
+import DynamicFilterConfigForm from '../config/dynamic-view/dynamic-filter-config-form.vue';
+import type { ColumnFilterEmits } from '../types/Filter.types';
+import ColumnFilterPreview from './column-filter-preview.vue';
+
+/**
+ * Column header filter for the `wt-table` `column-filter` slot, bound with `v-bind="scope"`:
+ * `formView: true` renders the value form in the filter popover, `false` the hover card.
+ * Resolves the filter from `header.filter`, reads the applied value from the filters manager and,
+ * like the panel, only emits — the app binds `add/update/delete:filter` to its table store:
+ * Apply → `add:filter` / `update:filter`; Clear then Apply → `delete:filter`; then the popover is closed via `hide`.
+ * Values stay local to the form until Apply, so the table doesn't reload on every click.
+ *
+ * [WTEL-7727](https://webitel.atlassian.net/browse/WTEL-7727)
+ */
+const props = defineProps<{
+	header: DatalistTableHeader;
+	filtersManager: IFiltersManager;
+	filterOptions?: FilterConfigDefinition[];
+	filterableExtensionFields?: DataField[];
+	formView?: boolean;
+	hide?: () => void;
+}>();
+
+const emit = defineEmits<ColumnFilterEmits>();
+
+const { filterConfig, filter } = useColumnFilter({
+	header: () => props.header,
+	filtersManager: () => props.filtersManager,
+	filterOptions: () => props.filterOptions ?? [],
+	filterableExtensionFields: () => props.filterableExtensionFields ?? [],
+});
+
+const { onValueChange } = useFilterValueChange({
+	filterConfig,
+	filter,
+	emit,
+});
+
+const close = () => {
+	props.hide?.();
+	emit('close');
+};
+
+const onSubmit = ({ value }: FilterInitParams) => {
+	onValueChange(value);
+	close();
+};
+</script>

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

@@ -4,6 +4,7 @@
     v-model:model-value="filterValue"
     :label="label"
     :filter-config="props.filterConfig"
+    :disable-validation="disableValidation"
     @update:invalid="emit('update:invalid', $event)"
   />
 </template>
@@ -16,6 +17,7 @@ const filterValue = defineModel<unknown>();
 const props = defineProps<{
 	filterConfig: AnyFilterConfig;
 	label?: string;
+	disableValidation?: boolean;
 }>();
 
 const emit = defineEmits<{

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

@@ -1,6 +1,7 @@
 <template>
   <form class="dynamic-filter-config-form" @submit.prevent>
     <wt-single-select
+      v-if="!columnMode"
       :show-clear="false"
       :disabled="editMode"
       :label="t('webitelUI.filters.filterName')"
@@ -20,6 +21,7 @@
         filterName,
         filterValue,
         inputLabel: valueInputLabelText,
+        disableValidation: columnMode,
         onValueChange,
         onValueInvalidChange,
       }"
@@ -30,12 +32,14 @@
         :model-value="filterValue"
         :filter-config="selectedFilterConfig"
         :label="valueInputLabelText"
+        :disable-validation="columnMode"
         @update:model-value="onValueChange"
         @update:invalid="onValueInvalidChange"
       />
     </slot>
 
     <dynamic-filter-config-form-label
+      v-if="!columnMode"
       :value="filterLabel"
       @update:model-value="onLabelValueUpdate"
       @update:invalid="(v) => (invalid = v)"
@@ -43,19 +47,19 @@
 
     <footer class="dynamic-filter-config-form-footer">
       <wt-button
-        :disabled="invalid || v$.$invalid"
+        :disabled="isSubmitDisabled"
         wide
         @click="submit"
       >
-        {{ t('reusable.save') }}
+        {{ t('vocabulary.apply') }}
       </wt-button>
 
       <wt-button
         color="secondary"
         wide
-        @click="emit('cancel')"
+        @click="columnMode ? handleClear() : emit('cancel')"
       >
-        {{ t('reusable.cancel') }}
+        {{ columnMode ? t('reusable.clear') : t('reusable.cancel') }}
       </wt-button>
     </footer>
   </form>
@@ -65,6 +69,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { WtButton, WtSingleSelect } from '@webitel/ui-sdk/components';
+import { isEmpty } from '@webitel/ui-sdk/scripts';
 import deepcopy from 'deep-copy';
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -90,6 +95,17 @@ const props = defineProps<{
 	 * Edited filter instance
 	 */
 	filter?: IFilter;
+	/**
+	 * @description
+	 * Column filter mode: the filter is fixed by `filterConfig`, so only the value input is shown
+	 * (no filter name select, no label); the secondary button is "Clear" (empties the value) instead
+	 * of "Cancel", and Apply goes through with an empty value — deleting the filter.
+	 * A `notDeletable` filter config keeps Apply disabled on an empty value instead,
+	 * the same way its panel chip has no "x".
+	 *
+	 * [WTEL-7727](https://webitel.atlassian.net/browse/WTEL-7727)
+	 */
+	columnMode?: boolean;
 }>();
 
 const emit = defineEmits<{
@@ -101,7 +117,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const filterName = ref();
+const filterName = ref<string | undefined>(props.filterConfig?.name);
 const filterLabel = ref('');
 const filterValue = ref();
 
@@ -124,6 +140,16 @@ v$.value.$touch();
 
 const invalid = ref(false);
 
+const isSubmitDisabled = computed(() => {
+	if (props.columnMode && isEmpty(filterValue.value)) {
+		return !editMode || !filterName.value || !!props.filterConfig?.notDeletable;
+	}
+
+	if (v$.value.$invalid) return true;
+
+	return invalid.value;
+});
+
 const filterConfigOptions = computed(() => {
 	if (props.filterConfig) {
 		return [
@@ -148,6 +174,16 @@ const onValueChange = (v: unknown) => {
 	filterValue.value = v;
 };
 
+const clearValue = () => {
+	filterValue.value = null;
+	invalid.value = false;
+};
+
+const handleClear = () => {
+	clearValue();
+	if (!isSubmitDisabled.value) submit();
+};
+
 const onValueInvalidChange = (v: boolean) => {
 	invalid.value = v;
 };
@@ -167,6 +203,8 @@ const onFilterNameUpdate = (val: string) => {
 };
 
 const submit = () => {
+	if (!filterName.value) return;
+
 	emit('submit', {
 		name: filterName.value,
 		label: filterLabel.value,

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

@@ -13,10 +13,9 @@
 </template>
 
 <script lang="ts" setup>
-import { isEmpty } from '@webitel/ui-sdk/scripts';
 import { computed } from 'vue';
 
-import type { FilterValue } from '../../../classes/Filter';
+import { useFilterValueChange } from '../../../composables/useFilterValueChange';
 import { StaticFilterEmits, StaticFilterProps } from '../../types/Filter.types';
 
 /* Author @Lera24
@@ -30,25 +29,11 @@ const emit = defineEmits<StaticFilterEmits>();
 
 const filterValue = computed(() => props.filter?.value);
 
-const onValueChange = (value: FilterValue) => {
-	if (isEmpty(value) && typeof value !== 'boolean') {
-		if (!props.filter) return;
-		return emit('delete:filter', props.filter);
-	}
-
-	if (isEmpty(filterValue.value)) {
-		return emit('add:filter', {
-			name: props.filterConfig.name,
-			value,
-		});
-	}
-
-	emit('update:filter', {
-		name: props.filterConfig.name,
-		value,
-		label: props.filter?.label,
-	});
-};
+const { onValueChange } = useFilterValueChange({
+	filterConfig: () => props.filterConfig,
+	filter: () => props.filter,
+	emit,
+});
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,177 @@
+<template>
+  <div class="filters-actions-menu">
+    <wt-context-menu
+      :disabled="isMenuDisabled"
+      :options="options"
+      @click="onOptionClick"
+    >
+      <template #activator="{ toggle, show }">
+        <span
+          class="filters-actions-menu__activator"
+          @pointerenter="show($event)"
+        >
+          <wt-badge :hidden="!hasAnyFilters">
+            <wt-icon-action
+              :action="IconAction.FILTERS"
+              :disabled="isMenuDisabled"
+              @click="toggle($event)"
+            />
+          </wt-badge>
+        </span>
+      </template>
+    </wt-context-menu>
+
+    <template v-if="enablePresets && presetStore">
+      <apply-preset-action
+        ref="applyPreset"
+        :filter-configs="filterConfigs"
+        :has-any-filters="hasAnyFilters"
+        :namespace="presetNamespace ?? ''"
+        :presets-store="presetStore"
+        @apply="emit('preset:apply', $event)"
+        @restore="emit('preset:restore', $event)"
+      >
+        <template #activator />
+      </apply-preset-action>
+
+      <save-preset-action
+        ref="savePreset"
+        :filter-configs="filterConfigs"
+        :filters-included="filtersIncluded"
+        :filters-manager="filtersManager"
+        :namespace="presetNamespace ?? ''"
+      >
+        <template #activator />
+      </save-preset-action>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { DataField } from '@webitel/api-services/gen/models';
+import {
+	WtBadge,
+	WtContextMenu,
+	WtIconAction,
+} from '@webitel/ui-sdk/components';
+import { IconAction } from '@webitel/ui-sdk/enums';
+import type { StoreGeneric } from 'pinia';
+import { computed, useTemplateRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { ApplyPresetAction, SavePresetAction } from '../../filter-presets';
+import type { IFiltersManager } from '../classes/FiltersManager';
+import { useFilterConfigsToolkit } from '../composables/useFilterConfigsToolkit';
+import { useSelectedFilters } from '../composables/useSelectedFilters';
+import type { FilterConfigDefinition } from '../modules/filterConfig/types/FilterConfigDefinition';
+
+/**
+ * Filter actions for pages without a filters panel (column filters only, WTEL-7727):
+ * the "filters" icon with a badge when filters are applied, and a context menu
+ * with reset + presets (when `presetNamespace` is given) — the same actions the panel has.
+ * Only emits, like the panel; the page binds them to its table store.
+ */
+const props = defineProps<{
+	filtersManager: IFiltersManager;
+	filterOptions: FilterConfigDefinition[];
+	filterableExtensionFields?: DataField[];
+	/** enables preset actions */
+	presetNamespace?: string;
+	usePresetsStore?: () => StoreGeneric;
+}>();
+
+const emit = defineEmits<{
+	'filter:reset-all': [];
+	'preset:apply': [
+		string,
+	];
+	'preset:restore': [
+		string,
+	];
+}>();
+
+const { t } = useI18n();
+
+const applyPreset =
+	useTemplateRef<InstanceType<typeof ApplyPresetAction>>('applyPreset');
+const savePreset =
+	useTemplateRef<InstanceType<typeof SavePresetAction>>('savePreset');
+
+const { filterConfigs, filtersIncluded } = useFilterConfigsToolkit({
+	filterOptions: props.filterOptions,
+	filtersManager: props.filtersManager,
+	filterableExtensionFields: props.filterableExtensionFields,
+});
+
+const { listSelectedFilters, hasAnyFilters } = useSelectedFilters({
+	filtersManager: () => props.filtersManager,
+	filterOptions: () => props.filterOptions,
+	filterableExtensionFields: () => props.filterableExtensionFields,
+	filterConfigs,
+});
+
+const enablePresets = computed(() => !!props.presetNamespace);
+const presetStore = props.usePresetsStore ? props.usePresetsStore() : null;
+
+const MenuAction = {
+	RESET: 'reset',
+	APPLY_PRESET: 'apply-preset',
+	SAVE_PRESET: 'save-preset',
+} as const;
+
+const hasFiltersToReset = computed(() => !!listSelectedFilters.value.size);
+
+// reset is the only action without presets: then there is nothing to open the menu for
+const isMenuDisabled = computed(
+	() => !enablePresets.value && !hasFiltersToReset.value,
+);
+
+const options = computed(() => [
+	{
+		action: MenuAction.RESET,
+		text: t(`webitelUI.iconAction.hints.${IconAction.CLEAR}`),
+		disabled: !hasFiltersToReset.value,
+	},
+	...(enablePresets.value
+		? [
+				{
+					action: MenuAction.APPLY_PRESET,
+					text: t(`webitelUI.iconAction.hints.${IconAction.APPLY_PRESET}`),
+					disabled: false,
+				},
+				{
+					action: MenuAction.SAVE_PRESET,
+					text: t(`webitelUI.iconAction.hints.${IconAction.SAVE_PRESET}`),
+					disabled: !!savePreset.value?.disabled,
+				},
+			]
+		: []),
+]);
+
+const onOptionClick = ({
+	option,
+}: {
+	option: (typeof options.value)[number];
+}) => {
+	if (option.disabled) return;
+
+	switch (option.action) {
+		case MenuAction.RESET:
+			emit('filter:reset-all');
+			presetStore?.resetPreset();
+			break;
+		case MenuAction.APPLY_PRESET:
+			applyPreset.value?.open();
+			break;
+		case MenuAction.SAVE_PRESET:
+			savePreset.value?.open();
+			break;
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.filters-actions-menu__activator {
+  display: inline-flex;
+}
+</style>

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,
 	{