@webitel/ui-datalist 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "lint:fix": "eslint --fix ./src && prettier --write --check ./src",
@@ -29,12 +29,13 @@
   "peerDependencies": {
     "vue": "^3.5",
     "axios": "^1",
-    "pinia": "^3.x"
+    "pinia": "^3.x",
+    "date-fns": "^4"
   },
   "dependencies": {
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@webitel/ui-sdk": "^25.4.48"
+    "@webitel/ui-sdk": "^25.4.55"
   },
   "devDependencies": {
     "vue-tsc": "^2.2.8",

package/src/filter-presets/components/_shared/preset-filters-preview.vue

@@ -9,16 +9,8 @@
           v-for="filter of props.filters"
           :key="filter.name"
           :filter="filter"
-          dummy
-        >
-          <template #info>
-            <component
-              :is="FilterOptionToPreviewComponentMap[filter.name]"
-              :value="filter.value"
-            >
-            </component>
-          </template>
-        </dynamic-filter-preview>
+          readonly
+        />
       </template>
     </dynamic-filter-panel-wrapper>
   </div>
@@ -30,7 +22,6 @@ import { useI18n } from 'vue-i18n';
 
 import type { IFilter } from '../../../filters';
 import DynamicFilterPanelWrapper from '../../../filters/components/dynamic-filter-panel-wrapper.vue';
-import { FilterOptionToPreviewComponentMap } from '../../../filters/components/filter-options';
 import DynamicFilterPreview from '../../../filters/components/preview/dynamic-filter-preview.vue';
 
 type Props = {

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

@@ -91,6 +91,11 @@ const props = defineProps<{
    */
   namespace: string;
   usePresetsStore: Store;
+  /**
+   * @description
+   * Is needed for preset to exclude filter values, not related to filters panel
+   */
+  filterOptions: FilterOption[];
 }>();
 
 const emit = defineEmits<{

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

@@ -14,7 +14,7 @@
         !presetToOverwriteWith /* on 'overwrite preset' popup hide this popup, but don't reset it*/
       "
       :shown="true /* coz visibility is controlled by v-if*/"
-      :filters-manager="props.filtersManager"
+      :filters-manager="localFiltersManager"
       :namespace="namespace"
       @submit="handlePresetSubmit"
       @close="showSaveForm = false"
@@ -32,11 +32,15 @@
 <script lang="ts" setup>
 import { WtIconAction } from '@webitel/ui-sdk/components';
 import { IconAction } from '@webitel/ui-sdk/enums';
-import { computed, inject, type Ref, ref } from 'vue';
+import { computed, inject, reactive, type Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
-import { IFiltersManager } from '../../../filters';
+import {
+  createFiltersManager,
+  FilterOption,
+  IFiltersManager,
+} from '../../../filters';
 import {
   addPreset,
   getPresetList,
@@ -47,21 +51,44 @@ import SavePresetPopup, { SubmitConfig } from './save-preset-popup.vue';
 
 const props = defineProps<{
   /**
+   * @description
    * presets "section" namespace
    */
   namespace: string;
+  /**
+   * @author @dlohvinov
+   * serves as a source for local filters manager
+   */
   filtersManager: IFiltersManager;
+  /**
+   * @description
+   * Is needed for preset to exclude filter values, not related to filters panel
+   */
+  filterOptions: FilterOption[];
 }>();
 
 const eventBus = inject('$eventBus');
 
+const localFiltersManager = reactive(createFiltersManager());
+
+watch(
+  props.filtersManager,
+  () => {
+    localFiltersManager.reset();
+    localFiltersManager.fromString(
+      props.filtersManager.toString({ include: props.filterOptions }),
+    );
+  },
+  { immediate: true },
+);
+
 const { t } = useI18n();
 
 /**
  * disable "save" btn if there's nothing to save
  * */
 const disableAction = computed(() => {
-  return !props.filtersManager.getAllKeys().length;
+  return !localFiltersManager.getAllKeys().length;
 });
 
 /**

package/src/filter-presets/components/save-preset/save-preset-popup.vue

@@ -53,7 +53,7 @@ import { computed, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
-import type { IFiltersManager } from '../../../index';
+import type { IFiltersManager } from '../../../filters';
 import PresetDescriptionField from '../_shared/input-fields/preset-description-field.vue';
 import PresetNameField from '../_shared/input-fields/preset-name-field.vue';
 import PresetFiltersPreview from '../_shared/preset-filters-preview.vue';
@@ -65,6 +65,10 @@ export type SubmitConfig = {
 };
 
 const props = defineProps<{
+  /**
+   * @description
+   * is needed here for `.toString()`
+   */
   filtersManager: IFiltersManager;
 }>();
 

package/src/filters/classes/FiltersManager.ts

@@ -70,8 +70,14 @@ class FiltersManager implements IFiltersManager {
     return filters;
   }
 
-  toString(): string {
-    const filtersData = [...this.filters.values()].reduce(
+  toString({
+    include,
+    exclude,
+  }: {
+    include?: FilterName[];
+    exclude?: FilterName[];
+  } = {}): string {
+    const filtersData = this.getFiltersList({ include, exclude }).reduce(
       (acc, { name, label, value }) => {
         if (isEmpty(value) && value == null) return acc;
 

package/src/filters/components/dynamic-filter-add-action.vue

@@ -21,8 +21,7 @@
           :options="props.filterOptions"
           @cancel="() => tooltipSlotScope.hide()"
           @submit="
-            (payload) =>
-              submitFilterChange(payload, { hide: tooltipSlotScope.hide })
+            (payload) => submit(payload, { hide: tooltipSlotScope.hide })
           "
         />
       </slot>
@@ -54,7 +53,7 @@ const emit = defineEmits<{
   'add:filter': [FilterInitParams];
 }>();
 
-const submitFilterChange = (payload: FilterInitParams, { hide }) => {
+const submit = (payload: FilterInitParams, { hide }) => {
   emit('add:filter', payload);
   hide();
 };

package/src/filters/components/filter-options/_shared/lookup-filter-preview/lookup-filter-value-preview.vue

@@ -0,0 +1,21 @@
+<template>
+  <ul v-if="value">
+    <li
+      v-for="({ name, id }, index) of value"
+      :key="id || index"
+    >
+      {{ name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  /**
+   * would be great to use a type for this
+   * */
+  value: Record<string, unknown>[];
+}>();
+</script>
+
+<style scoped></style>

package/src/filters/components/filter-options/agent/agent-filter-value-preview.vue

@@ -1,31 +1,15 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { EngineAgent } from 'webitel-sdk';
 
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  value: EngineAgent[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ id: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

package/src/filters/components/filter-options/agent/config.js

@@ -1,4 +1,3 @@
 import AgentsAPI from '@webitel/ui-sdk/api/clients/agents/agents';
 
 export const searchMethod = AgentsAPI.getLookup;
-export const localePath = '';

package/src/filters/components/filter-options/contact/contact-filter-value-preview.vue

@@ -1,31 +1,15 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { WebitelContactsContact } from 'webitel-sdk';
 
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  value: WebitelContactsContact[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ id: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

package/src/filters/components/filter-options/created-at/created-at-filter-value-field.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="created-at-filter-value-field">
+    <wt-radio
+      v-for="value of radioOpts"
+      :key="value"
+      v-model="selectedRadioValue"
+      :label="t(`webitelUI.filters.datetime.${value}`)"
+      :value="value"
+      @input="handleRadioChange"
+    />
+    <wt-datepicker
+      v-if="showDatepickers"
+      :value="model.from"
+      :label="t('reusable.from')"
+      mode="datetime"
+      @input="changeAbsoluteValue($event, 'from')"
+    />
+    <wt-datepicker
+      v-if="showDatepickers"
+      :value="model.to"
+      :label="t('reusable.to')"
+      mode="datetime"
+      @input="changeAbsoluteValue($event, 'to')"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { WtRadio } from '@webitel/ui-sdk/components';
+import { RelativeDatetimeValue } from '@webitel/ui-sdk/enums';
+import { endOfToday, startOfToday } from 'date-fns';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const model = defineModel<
+  RelativeDatetimeValue | { from: number; to: number }
+>();
+
+const { t } = useI18n();
+
+const radioOpts = [
+  RelativeDatetimeValue.Today,
+  RelativeDatetimeValue.ThisWeek,
+  RelativeDatetimeValue.ThisMonth,
+  RelativeDatetimeValue.Custom,
+];
+
+const selectedRadioValue = ref();
+
+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;
+  }
+};
+
+initialize();
+
+const showDatepickers = computed(() => {
+  return selectedRadioValue.value === RelativeDatetimeValue.Custom;
+});
+
+const handleRadioChange = (value: RelativeDatetimeValue) => {
+  if (value === RelativeDatetimeValue.Custom) {
+    model.value = {
+      from: startOfToday().getTime(),
+      to: endOfToday().getTime(),
+    };
+  } else {
+    model.value = value;
+  }
+};
+
+const changeAbsoluteValue = (value: number, prop: 'from' | 'to') => {
+  const newModelValue = {
+    ...(model.value as { from: number; to: number }),
+    [prop]: value,
+  };
+
+  model.value = newModelValue;
+};
+</script>
+
+<style scoped>
+.created-at-filter-value-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+</style>

package/src/filters/components/filter-options/created-at/created-at-filter-value-preview.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="created-at-filter-value-preview">
+    <p v-if="isRelativeValue">
+      {{ t(`webitelUI.filters.datetime.${props.value}`) }}
+    </p>
+
+    <template v-else>
+      <div>
+        <p class="created-at-filter-value-preview__title">
+          {{ t('reusable.from') }}
+        </p>
+
+        <span>{{ from }}</span>
+      </div>
+
+      <div>
+        <p class="created-at-filter-value-preview__title">
+          {{ t('reusable.to') }}
+        </p>
+
+        <span>{{ to }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { RelativeDatetimeValue } from '@webitel/ui-sdk/enums';
+import { isRelativeDatetimeValue } from '@webitel/ui-sdk/scripts';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{
+  value: { from: number; to: number } | RelativeDatetimeValue;
+}>();
+
+const { t } = useI18n();
+
+const isRelativeValue = computed(() => {
+  return isRelativeDatetimeValue(props.value);
+});
+
+const from = computed(() => {
+  return isRelativeDatetimeValue.value
+    ? false
+    : new Date(props.value.from).toLocaleString();
+});
+
+const to = computed(() => {
+  return isRelativeDatetimeValue.value
+    ? false
+    : new Date(props.value.to).toLocaleString();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
+.duration-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/filters/components/filter-options/gateway/gateway-filter-value-preview.vue

@@ -1,31 +1,16 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  /**
+   * would be great to use generated type for this
+   * */
+  value: Record<string, unknown>[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ id: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

package/src/filters/components/filter-options/grantee/grantee-filter-value-preview.vue

@@ -1,31 +1,16 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  /**
+   * would be great to use generated type for this
+   * */
+  value: Record<string, unknown>[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ ids: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

package/src/filters/components/filter-options/index.ts

@@ -7,28 +7,37 @@ import ActualResolutionTimeFilter from './actual-resolution-time/actual-resoluti
 import ActualResolutionTimeFilterPreview from './actual-resolution-time/actual-resolution-time-filter-value-preview.vue';
 import AgentFilter from './agent/agent-filter-value-field.vue';
 import AgentFilterPreview from './agent/agent-filter-value-preview.vue';
+import { searchMethod as agentSearchMethod } from './agent/config';
 import AmdResultFilter from './amd-result/amd-result-filter-value-field.vue';
 import AmdResultFilterPreview from './amd-result/amd-result-filter-value-preview.vue';
 import AssigneeFilter from './assignee/assignee-filter-value-field.vue';
 import AssigneeFilterPreview from './assignee/assignee-filter-value-preview.vue';
+import { searchMethod as assigneeSearchMethod } from './assignee/config';
 import AuthorFilter from './author/author-filter-value-field.vue';
 import AuthorFilterPreview from './author/author-filter-value-preview.vue';
+import { searchMethod as authorSearchMethod } from './author/config';
 import CauseFilter from './cause/cause-filter-value-field.vue';
 import CauseFilterPreview from './cause/cause-filter-value-preview.vue';
 import CloseReasonGroupsCaseFilter from './close-reason-groups-case/close-reason-groups-case-filter-value-field.vue';
 import CloseReasonGroupsCaseFilterPreview from './close-reason-groups-case/close-reason-groups-case-filter-value-preview.vue';
+import { searchMethod as contactSearchMethod } from './contact/config';
 import ContactFilter from './contact/contact-filter-value-field.vue';
 import ContactFilterPreview from './contact/contact-filter-value-preview.vue';
+import { searchMethod as contactGroupSearchMethod } from './contact-group/config';
 import ContactGroupFilter from './contact-group/contact-group-filter-value-field.vue';
 import ContactGroupFilterPreview from './contact-group/contact-group-filter-value-preview.vue';
+import CreatedAtFilterValueField from './created-at/created-at-filter-value-field.vue';
+import CreatedAtFilterPreview from './created-at/created-at-filter-value-preview.vue';
 import CreatedAtFromFilter from './created-at-from/created-at-from-filter-value-field.vue';
 import CreatedAtFromFilterPreview from './created-at-from/created-at-from-filter-value-preview.vue';
 import CreatedAtToFilter from './created-at-to/created-at-to-filter-value-field.vue';
 import CreatedAtToFilterPreview from './created-at-to/created-at-to-filter-value-preview.vue';
 import DirectionFilter from './direction/direction-filter-value-field.vue';
 import DirectionFilterPreview from './direction/direction-filter-value-preview.vue';
+import { searchMethod as gatewaySearchMethod } from './gateway/config';
 import GatewayFilter from './gateway/gateway-filter-value-field.vue';
 import GatewayFilterPreview from './gateway/gateway-filter-value-preview.vue';
+import { searchMethod as granteeSearchMethod } from './grantee/config';
 import GranteeFilter from './grantee/grantee-filter-value-field.vue';
 import GranteeFilterPreview from './grantee/grantee-filter-value-preview.vue';
 import HasAttachmentFilter from './has-attachment/has-attachment-filter-value-field.vue';
@@ -39,30 +48,38 @@ import HasRatingFilterValueField from './has-rating/has-rating-filter-value-fiel
 import HasRatingFilterValuePreview from './has-rating/has-rating-filter-value-preview.vue';
 import HasTranscriptionFilter from './has-transcription/has-transcription-filter-value-field.vue';
 import HasTranscriptionFilterPreview from './has-transcription/has-transcription-filter-value-preview.vue';
+import { searchMethod as impactedSearchMethod } from './impacted/config';
 import ImpactedFilter from './impacted/impacted-filter-value-field.vue';
 import ImpactedFilterPreview from './impacted/impacted-filter-value-preview.vue';
+import { searchMethod as priorityCaseSearchMethod } from './priority-case/config';
 import CasePriorityFilter from './priority-case/priority-case-filter-value-field.vue';
 import CasePriorityFilterPreview from './priority-case/priority-case-filter-value-preview.vue';
+import { searchMethod as queueSearchMethod } from './queue/config';
 import QueueFilter from './queue/queue-filter-value-field.vue';
 import QueueFilterPreview from './queue/queue-filter-value-preview.vue';
+import { searchMethod as ratedBySearchMethod } from './rated-by/config';
 import RatedByFilter from './rated-by/rated-by-filter-value-field.vue';
 import RatedByFilterPreview from './rated-by/rated-by-filter-value-preview.vue';
 import RatingFromToFilter from './rating/rating-from-to-filter-value-field.vue';
 import RatingFromToFilterPreview from './rating/rating-from-to-filter-value-preview.vue';
 import ReactionTimeFilter from './reaction-time/reaction-time-filter-value-field.vue';
 import ReactionTimeFilterPreview from './reaction-time/reaction-time-filter-value-preview.vue';
+import { searchMethod as reporterSearchMethod } from './reporter/config';
 import ReporterFilter from './reporter/reporter-filter-value-field.vue';
 import ReporterFilterPreview from './reporter/reporter-filter-value-preview.vue';
 import ResolutionTimeFilter from './resolution-time/resolution-time-filter-value-field.vue';
 import ResolutionTimeFilterPreview from './resolution-time/resolution-time-filter-value-preview.vue';
 import ScoreFilter from './score/score-from-to-filter-value-field.vue';
 import ScoreFilterPreview from './score/score-from-to-filter-value-preview.vue';
+import { searchMethod as serviceCaseSearchMethod } from './service-case/config';
 import CaseServiceFilter from './service-case/service-case-filter-value-field.vue';
 import CaseServiceFilterPreview from './service-case/service-case-filter-value-preview.vue';
+import { searchMethod as slaSearchMethod } from './sla/config';
 import SlaFilter from './sla/sla-filter-value-field.vue';
 import SlaFilterPreview from './sla/sla-filter-value-preview.vue';
 import SlaConditionFilter from './sla-condition/sla-condition-filter-value-field.vue';
 import SlaConditionFilterPreview from './sla-condition/sla-condition-filter-value-preview.vue';
+import { searchMethod as sourceCaseSearchMethod } from './source-case/config';
 import CaseSourceFilter from './source-case/source-case-filter-value-field.vue';
 import CaseSourceFilterPreview from './source-case/source-case-filter-value-preview.vue';
 import CaseStatusFilter from './status-case/status-case-filter-value-field.vue';
@@ -71,10 +88,12 @@ import TagFilter from './tag/tag-filter-value-field.vue';
 import TagFilterPreview from './tag/tag-filter-value-preview.vue';
 import TalkDurationFilter from './talk-duration/talk-duration-filter-value-field.vue';
 import TalkDurationFilterPreview from './talk-duration/talk-duration-filter-value-preview.vue';
+import { searchMethod as teamSearchMethod } from './team/config';
 import TeamFilter from './team/team-filter-value-field.vue';
 import TeamFilterPreview from './team/team-filter-value-preview.vue';
 import TotalDurationFilter from './total-duration/total-duration-filter-value-field.vue';
 import TotalDurationFilterPreview from './total-duration/total-duration-filter-value-preview.vue';
+import { searchMethod as userSearchMethod } from './user/config';
 import UserFilter from './user/user-filter-value-field.vue';
 import UserFilterPreview from './user/user-filter-value-preview.vue';
 import VariableFilter from './variable/variable-filter-value-field.vue';
@@ -109,6 +128,7 @@ export {
   ContactFilterPreview,
   ContactGroupFilter,
   ContactGroupFilterPreview,
+  CreatedAtFilterValueField,
   CreatedAtFromFilter,
   CreatedAtFromFilterPreview,
   CreatedAtToFilter,
@@ -182,6 +202,7 @@ export const FilterOptionToValueComponentMap: Record<FilterOption, Component> =
     [FilterOption.HasTranscription]: HasTranscriptionFilter,
     [FilterOption.User]: UserFilter,
     [FilterOption.Variable]: VariableFilter,
+    [FilterOption.CreatedAt]: CreatedAtFilterValueField,
     [FilterOption.CreatedAtFrom]: CreatedAtFromFilter,
     [FilterOption.CreatedAtTo]: CreatedAtToFilter,
     [FilterOption.Status]: CaseStatusFilter,
@@ -208,6 +229,7 @@ export const FilterOptionToPreviewComponentMap: Record<
   FilterOption,
   Component
 > = {
+  [FilterOption.CreatedAt]: CreatedAtFilterPreview,
   [FilterOption.Agent]: AgentFilterPreview,
   [FilterOption.AmdResult]: AmdResultFilterPreview,
   [FilterOption.Contact]: ContactFilterPreview,
@@ -248,3 +270,26 @@ export const FilterOptionToPreviewComponentMap: Record<
   [FilterOption.ActualResolutionTime]: ActualResolutionTimeFilterPreview,
   [FilterOption.HasAttachment]: HasAttachmentFilterPreview,
 };
+
+export const FilterOptionToApiSearchMethodMap: Record<
+  FilterOption,
+  (unknown) => { items }
+> = {
+  [FilterOption.Agent]: agentSearchMethod,
+  [FilterOption.Gateway]: gatewaySearchMethod,
+  [FilterOption.Grantee]: granteeSearchMethod,
+  [FilterOption.Queue]: queueSearchMethod,
+  [FilterOption.RatedBy]: ratedBySearchMethod,
+  [FilterOption.Reporter]: reporterSearchMethod,
+  [FilterOption.Sla]: slaSearchMethod,
+  [FilterOption.Service]: serviceCaseSearchMethod,
+  [FilterOption.Source]: sourceCaseSearchMethod,
+  [FilterOption.User]: userSearchMethod,
+  [FilterOption.ContactGroup]: contactGroupSearchMethod,
+  [FilterOption.Assignee]: assigneeSearchMethod,
+  [FilterOption.Author]: authorSearchMethod,
+  [FilterOption.Priority]: priorityCaseSearchMethod,
+  [FilterOption.Impacted]: impactedSearchMethod,
+  [FilterOption.Contact]: contactSearchMethod,
+  [FilterOption.Team]: teamSearchMethod,
+};

package/src/filters/components/filter-options/queue/queue-filter-value-preview.vue

@@ -1,31 +1,15 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { EngineQueue } from 'webitel-sdk';
 
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  value: EngineQueue[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ id: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

package/src/filters/components/filter-options/rated-by/rated-by-filter-value-preview.vue

@@ -1,31 +1,16 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  /**
+   * would be great to use generated type for this
+   * */
+  value: Record<string, unknown>[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ id: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

package/src/filters/components/filter-options/service-case/config.js

@@ -1,4 +1,4 @@
-import ServiceCatalogsAPI from '@webitel/ui-sdk/api/clients/caseServiceCatalogs/service-catalogs';
+import ServiceCatalogsAPI from '@webitel/ui-sdk/api/clients/caseServiceCatalogs/serviceCatalogs';
 import ServicesAPI from '@webitel/ui-sdk/api/clients/caseServices/services';
 
 export const searchMethod = ServiceCatalogsAPI.getList;

package/src/filters/components/filter-options/team/team-filter-value-preview.vue

@@ -1,31 +1,15 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { EngineAgentTeam } from 'webitel-sdk';
 
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  value: EngineAgentTeam[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ id: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

package/src/filters/components/filter-options/user/user-filter-value-preview.vue

@@ -1,31 +1,16 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  /**
+   * would be great to use generated type for this
+   * */
+  value: Record<string, unknown>[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ id: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

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

@@ -21,6 +21,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
+  min-width: 60px;
 
   &__header {
     @extend %typo-subtitle-1;

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

@@ -1,12 +1,15 @@
 <template>
-  <dynamic-filter-config-view :disabled="dummy">
+  <dynamic-filter-config-view :disabled="readonly">
     <template #activator="{ visible: configFormVisible }">
-      <wt-tooltip :disabled="configFormVisible">
+      <wt-tooltip
+        :disabled="configFormVisible"
+        @update:visible="!localValue && fillLocalValue()"
+      >
         <template #activator>
           <wt-chip color="primary">
             {{ filter.label || t(`webitelUI.filters.${filter.name}`) }}
             <wt-icon-btn
-              v-if="!dummy"
+              v-if="!filterConfig.notDeletable && !readonly"
               icon="close--filled"
               size="sm"
               color="on-primary"
@@ -23,9 +26,14 @@
 
             <template #default>
               <slot name="info">
+                <wt-loader
+                  v-if="!localValue"
+                  size="sm"
+                />
                 <component
                   :is="FilterOptionToPreviewComponentMap[filter.name]"
-                  :value="filter.value"
+                  v-else
+                  :value="localValue"
                 />
               </slot>
             </template>
@@ -34,15 +42,18 @@
       </wt-tooltip>
     </template>
 
-    <template #content="slotScope">
+    <template #content="{ tooltipSlotScope }">
       <slot
         name="form"
-        v-bind="slotScope"
+        v-bind="{ tooltipSlotScope }"
       >
         <dynamic-filter-config-form
-          :filter="filter"
-          @cancel="() => slotScope.hide()"
-          @submit="(payload) => submitFilterChange(payload) && slotScope.hide()"
+          :filter="props.filter"
+          :options="filterOptions"
+          @cancel="() => tooltipSlotScope.hide()"
+          @submit="
+            (payload) => submit(payload, { hide: tooltipSlotScope.hide })
+          "
         />
       </slot>
     </template>
@@ -50,20 +61,34 @@
 </template>
 
 <script lang="ts" setup>
-import { WtChip } from '@webitel/ui-sdk/components';
-import { WtIconBtn } from '@webitel/ui-sdk/components';
-import { WtTooltip } from '@webitel/ui-sdk/components';
+import {
+  WtChip,
+  WtIconBtn,
+  WtLoader,
+  WtTooltip,
+} from '@webitel/ui-sdk/components';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import type { FilterInitParams, IFilter } from '../../types/Filter';
+import type { FilterOption } from '../../enums/FilterOption';
+import type { FilterData, IFilter } from '../../types/Filter';
 import DynamicFilterConfigForm from '../config/dynamic-filter-config-form.vue';
 import DynamicFilterConfigView from '../config/dynamic-filter-config-view.vue';
-import { FilterOptionToPreviewComponentMap } from '../filter-options';
+import {
+  FilterOptionToApiSearchMethodMap,
+  FilterOptionToPreviewComponentMap,
+} from '../filter-options';
 import DynamicFilterPreviewInfo from './dynamic-filter-preview-info.vue';
 
 interface Props {
   filter: IFilter;
-  dummy?: boolean /* https://webitel.atlassian.net/browse/WTEL-6308?focusedCommentId=657415 */;
+  /**
+   * @description
+   * is needed for form component to localize selected filter name value and/or
+   * pass filter options configs
+   */
+  filterOptions: FilterOption[];
+  readonly?: boolean;
 }
 
 const { t } = useI18n();
@@ -71,16 +96,50 @@ const { t } = useI18n();
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
-  'update:filter': [IFilter];
+  'update:filter': [FilterData];
   'delete:filter': [IFilter];
 }>();
 
-const deleteFilter = () => {
-  emit('delete:filter', props.filter);
+const filterConfig = computed(() => {
+  const thisFilterOption =
+    props.filterOptions?.find((option) => {
+      return option.value === props.filter.name;
+    }) || {};
+
+  return thisFilterOption;
+});
+
+const localValue = ref();
+
+/**
+ * @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 valueSearchMethod = FilterOptionToApiSearchMethodMap[filterName];
+
+  if (valueSearchMethod) {
+    const { items } = await valueSearchMethod({ id: filterValue });
+    localValue.value = items;
+  } else {
+    localValue.value = filterValue;
+  }
 };
 
-const submitFilterChange = (filter: FilterInitParams) => {
+const submit = (filter: IFilter, { hide }) => {
   emit('update:filter', filter);
+  fillLocalValue(filter);
+  hide();
+};
+
+const deleteFilter = () => {
+  emit('delete:filter', props.filter);
 };
 </script>
 
@@ -91,4 +150,8 @@ const submitFilterChange = (filter: FilterInitParams) => {
   align-items: center;
   gap: var(--spacing-2xs);
 }
+
+.wt-loader {
+  margin: auto;
+}
 </style>

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

@@ -1,25 +1,11 @@
 <template>
   <dynamic-filter-panel-wrapper>
     <template #filters>
-      <!--        WTF? -  /* https://webitel.atlassian.net/browse/WTEL-6308?focusedCommentId=657415 */ -->
-      <!--TODO-->
-      <!--        <dynamic-filter-preview-->
-      <!--          v-if="!hasCreatedAtFromFilter"-->
-      <!--          :filter="defaultCreatedAtFromFilterDataPreview"-->
-      <!--          dummy-->
-      <!--        >-->
-      <!--          <template #info>-->
-      <!--            <component-->
-      <!--              :is="FilterOptionToPreviewComponentMap[FilterOption.CreatedAtFrom]"-->
-      <!--              :value="defaultCreatedAtFromFilterDataPreview.value"-->
-      <!--            />-->
-      <!--          </template>-->
-      <!--        </dynamic-filter-preview>-->
-
       <dynamic-filter-preview
         v-for="filter of appliedFilters"
         :key="filter.name"
         :filter="filter"
+        :filter-options="localizedFilterOptions"
         disable-click-away
         @update:filter="emit('filter:update', $event)"
         @delete:filter="emit('filter:delete', filter)"
@@ -36,6 +22,7 @@
       <apply-preset-action
         :namespace="props.presetNamespace"
         :use-presets-store="props.usePresetsStore"
+        :filter-options="props.filterOptions"
         @apply="emit('preset:apply', $event)"
       />
 
@@ -43,6 +30,7 @@
         v-if="enablePresets"
         :namespace="props.presetNamespace"
         :filters-manager="props.filtersManager"
+        :filter-options="props.filterOptions"
       />
 
       <wt-icon-action
@@ -80,7 +68,8 @@ type Props = {
   filterOptions: FilterOption[];
   /**
    * @description
-   * Looks like a anti-pattern, but save-preset.vue component needs filterManager
+   * create local filters manager from snapshot
+   * inside save-preset.vue
    */
   filtersManager: IFiltersManager;
   /**
@@ -130,7 +119,21 @@ const { t } = useI18n();
 
 const appliedFilters = computed(() => {
   return props.filtersManager.getFiltersList({
-    include: props.filterOptions,
+    include: props.filterOptions.map((opt) => {
+      return opt.value || opt;
+    }),
+  });
+});
+
+const localizedFilterOptions = computed(() => {
+  return props.filterOptions.map((opt) => {
+    const isExtended = typeof opt !== 'string';
+
+    const name = isExtended
+      ? t(`webitelUI.filters.${opt.value}`)
+      : t(`webitelUI.filters.${opt}`);
+
+    return isExtended ? { name, ...opt } : { name, value: opt };
   });
 });
 
@@ -139,16 +142,11 @@ const appliedFilters = computed(() => {
  * available filters to add, with appliedFilters excluded
  */
 const availableFilterOptions = computed(() => {
-  return props.filterOptions
-    .filter((opt) => {
-      return appliedFilters.value.every((filter) => {
-        return filter.name !== opt;
-      });
-    })
-    .map((opt) => ({
-      name: t(`webitelUI.filters.${opt}`),
-      value: opt,
-    }));
+  return localizedFilterOptions.value.filter(({ value: opt }) => {
+    return appliedFilters.value.every((filter) => {
+      return filter.name !== opt;
+    });
+  });
 });
 
 const enablePresets = computed(() => !!props.presetNamespace);

package/src/filters/enums/FilterOption.ts

@@ -1,3 +1,5 @@
+import type { FilterName } from '../types/Filter';
+
 export const FilterOption = {
   Agent: 'agent',
   AmdResult: 'amdResult',
@@ -18,6 +20,7 @@ export const FilterOption = {
   HasTranscription: 'hasTranscription',
   User: 'user',
   Variable: 'variable',
+  CreatedAt: 'createdAt',
   CreatedAtFrom: 'createdAtFrom',
   CreatedAtTo: 'createdAtTo',
   Status: 'status',
@@ -38,6 +41,13 @@ export const FilterOption = {
   ActualReactionTime: 'actualReactionTime',
   ActualResolutionTime: 'actualResolutionTime',
   HasAttachment: 'hasAttachment',
-} as const;
+} as FilterName;
+
+type SimpleFilterOption = (typeof FilterOption)[keyof typeof FilterOption];
+
+type ExtendedFilterOption = {
+  name: FilterOption;
+  notDeletable?: boolean;
+};
 
-export type FilterOption = (typeof FilterOption)[keyof typeof FilterOption];
+export type FilterOption = SimpleFilterOption | ExtendedFilterOption;