@webitel/ui-datalist 1.0.5 → 1.0.7

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;

package/src/filters/index.ts

@@ -1,6 +1,6 @@
 import { Filter } from './classes/Filter.ts';
 import { createFiltersManager } from './classes/FiltersManager';
-import DynamicFilterSearchComponent from './components/dynamic-filter-search.vue';
+import DynamicFilterSearchComponent from './components/search-bar/dynamic-filter-search.vue';
 import TableFiltersPanelComponent from './components/table-filters-panel.vue';
 import { FilterOption } from './enums/FilterOption';
 import type {

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

@@ -1,60 +0,0 @@
-<template>
-  <wt-search-bar
-    :placeholder="t('reusable.search')"
-    :search-mode="props.searchMode"
-    :search-mode-options="searchModeOptions"
-    :value="model"
-    @input="model = $event"
-    @search="handleSearch"
-    @update:search-mode="onSearchModeChange($event.value)"
-  >
-    <template
-      v-if="props.showTextSearchIcon"
-      #search-icon
-    >
-      <wt-icon icon="stt-search" />
-    </template>
-  </wt-search-bar>
-</template>
-
-<script lang="ts" setup>
-import { WtSearchBar } from '@webitel/ui-sdk/components';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-type ModelValue = string;
-const model = defineModel<ModelValue>();
-
-const props = defineProps<{
-  searchMode: string;
-  searchModeOptions: Record<string, string>;
-  showTextSearchIcon?: boolean;
-}>();
-
-const emit = defineEmits<{
-  'update:search-mode': [string];
-  'handle-search': [string];
-}>();
-
-const { t } = useI18n();
-
-const onSearchModeChange = (value: string) => {
-  emit('update:search-mode', value);
-  model.value = '';
-};
-
-const handleSearch = () => {
-  emit('handle-search', model.value);
-};
-
-const searchModeOptions = computed(() =>
-  Object.values(props.searchModeOptions).map((mode) => {
-    return {
-      value: mode,
-      text: t(`filters.search.${mode}`),
-    };
-  }),
-);
-</script>
-
-<style scoped></style>