@webitel/ui-datalist 1.0.5 → 1.0.7

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/search-bar/dynamic-filter-search.vue

@@ -0,0 +1,123 @@
+<template>
+  <wt-search-bar
+    :placeholder="t('reusable.search')"
+    :search-mode="searchMode"
+    :search-mode-options="searchModeOptions"
+    :value="localSearchValue"
+    @input="localSearchValue = $event"
+    @search="handleSearch"
+    @update:search-mode="updateSearchMode"
+  />
+</template>
+
+<script lang="ts" setup>
+import { WtSearchBar } from '@webitel/ui-sdk/components';
+import {computed, type Ref, ref,watch} from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import {FilterInitParams, FilterName} from "../../types/Filter";
+import {IFiltersManager} from "../../types/FiltersManager";
+import type { DynamicFilterSearchSearchModeOption } from './types/DynamicFilterSearch';
+
+/**
+ * @description
+ * default search name is used when there are no search modes
+ */
+const defaultSearchName = 'search';
+
+const props = defineProps<{
+  filtersManager: IFiltersManager;
+  searchModeOptions?: DynamicFilterSearchSearchModeOption[];
+  isFiltersRestoring?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'filter:add': [FilterInitParams];
+  'filter:update': [FilterInitParams];
+  'filter:delete': [{ name: FilterName }];
+}>();
+
+const { t } = useI18n();
+
+const searchMode: Ref<FilterName> = ref();
+const localSearchValue = ref('');
+
+const hasFilter = (filterName = searchMode.value) => {
+  return props.filtersManager.filters.has(filterName);
+};
+const addFilter = (filterInitParams: FilterInitParams) => {
+  return emit('filter:add', filterInitParams);
+};
+const updateFilter = (filterInitParams: FilterInitParams) => {
+  return emit('filter:update', filterInitParams);
+};
+const deleteFilter = ({ name }: { name: FilterName }) => {
+  return emit('filter:delete', { name });
+};
+
+const hasSearchModes = computed(() => {
+  return props.searchModeOptions && props.searchModeOptions.length > 0;
+});
+
+if (hasSearchModes.value) {
+  searchMode.value = props.searchModeOptions[0].value;
+}
+
+const currentSearchName = computed(() => {
+  if (hasSearchModes.value) {
+    return searchMode.value;
+  }
+
+  return defaultSearchName;
+});
+
+const handleSearch = (value = localSearchValue.value) => {
+  if (hasFilter(currentSearchName.value)) {
+    updateFilter({
+      name: currentSearchName.value,
+      value,
+    });
+  } else {
+    addFilter({
+      name: currentSearchName.value,
+      value,
+    });
+  }
+};
+
+const updateSearchMode = (nextSearchMode: DynamicFilterSearchSearchModeOption) => {
+  if (hasFilter(currentSearchName.value)) {
+    deleteFilter({
+      name: currentSearchName.value,
+    });
+  }
+  searchMode.value = nextSearchMode.value;
+  localSearchValue.value = '';
+};
+
+/**
+ * @description
+ * Restoring search value after filters were restored
+ */
+watch(() => props.isFiltersRestoring,
+  (next) => {
+    if (next) return;
+
+    let searchModes = [defaultSearchName];
+    if (hasSearchModes.value) {
+      searchModes = props.searchModeOptions?.map((option) => option.value);
+    }
+
+    for (const mode of searchModes) {
+      if (hasFilter(mode)) {
+        searchMode.value = mode;
+        localSearchValue.value = props.filtersManager.filters.get(mode).value;
+
+        break;
+      }
+    }
+  },
+);
+</script>
+
+<style scoped></style>

package/src/filters/components/search-bar/types/DynamicFilterSearch.d.ts

@@ -0,0 +1,5 @@
+import { WtSearchBarSearchModeOption } from '../../../../../../../src/components/wt-search-bar/types/WtSearchBar';
+import { FilterName } from '../../../types/Filter';
+
+export type DynamicFilterSearchSearchModeOption =
+  WtSearchBarSearchModeOption<FilterName>;