@webitel/ui-datalist 1.0.9 → 1.0.12

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

@@ -7,12 +7,12 @@
       >
         <template #activator>
           <wt-chip color="primary">
-            {{ filter.label || t(`webitelUI.filters.${filter.name}`) }}
+            {{ filter.label || filterConfig.label }}
             <wt-icon-btn
               v-if="!filterConfig.notDeletable && !readonly"
+              color="on-primary"
               icon="close--filled"
               size="sm"
-              color="on-primary"
               @mousedown.stop="deleteFilter"
             />
           </wt-chip>
@@ -21,20 +21,21 @@
         <template #default>
           <dynamic-filter-preview-info>
             <template #header>
-              {{ t(`webitelUI.filters.${props.filter.name}`) }}
+              {{ filterConfig.label }}
             </template>
 
             <template #default>
               <slot name="info">
                 <wt-loader
-                  v-if="!localValue"
+                  v-if="!isRenderPreview"
                   size="sm"
                 />
                 <component
-                  :is="FilterOptionToPreviewComponentMap[filter.name]"
+                  :is="filterConfig.valuePreviewComponent"
                   v-else
                   :value="localValue"
                   :filter="props.filter"
+                  :filter-config="filterConfig"
                 />
               </slot>
             </template>
@@ -50,7 +51,7 @@
       >
         <dynamic-filter-config-form
           :filter="props.filter"
-          :options="filterOptions"
+          :filter-config="filterConfig"
           @cancel="() => tooltipSlotScope.hide()"
           @submit="
             (payload) => submit(payload, { hide: tooltipSlotScope.hide })
@@ -68,27 +69,25 @@ import {
   WtLoader,
   WtTooltip,
 } from '@webitel/ui-sdk/components';
-import { computed, ref } from 'vue';
+import { computed,ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-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 {FilterData, IFilter} from "../../classes/Filter";
+import {TFilterConfig} from "../../modules/filterConfig/classes/FilterConfig";
 import {
   FilterOptionToPreviewApiSearchMethodMap,
-  FilterOptionToPreviewComponentMap,
-} from '../filter-options';
+} from '../../modules/filterConfig/components';
+import DynamicFilterConfigForm from '../config/dynamic-filter-config-form.vue';
+import DynamicFilterConfigView from '../config/dynamic-filter-config-view.vue';
 import DynamicFilterPreviewInfo from './dynamic-filter-preview-info.vue';
 
 interface Props {
   filter: IFilter;
   /**
    * @description
-   * is needed for form component to localize selected filter name value and/or
-   * pass filter options configs
+   * this filter config
    */
-  filterOptions: FilterOption[];
+  filterConfig: TFilterConfig;
   readonly?: boolean;
 }
 
@@ -101,15 +100,6 @@ const emit = defineEmits<{
   'delete:filter': [IFilter];
 }>();
 
-const filterConfig = computed(() => {
-  const thisFilterOption =
-    props.filterOptions?.find((option) => {
-      return option.value === props.filter.name;
-    }) || {};
-
-  return thisFilterOption;
-});
-
 const localValue = ref();
 
 /**
@@ -123,16 +113,31 @@ const fillLocalValue = async (filter = props.filter) => {
   const filterName = props.filter.name;
   const filterValue = filter.value;
 
-  const valueSearchMethod = FilterOptionToPreviewApiSearchMethodMap[filterName];
+  let valueSearchMethod;
+
+  if (props.filterConfig.searchRecords) {
+    /* arrow fn here preserves filterConfig class "this" */
+    valueSearchMethod = (...params) => props.filterConfig.searchRecords(...params)
+  } else {
+    valueSearchMethod = /* compat */ FilterOptionToPreviewApiSearchMethodMap[filterName];
+  }
 
   if (valueSearchMethod) {
-    const { items } = await valueSearchMethod({ id: filterValue });
+    const { items } = await valueSearchMethod({ id: filterValue }, {
+      filterValue,
+      filterName,
+      filterConfig: props.filterConfig,
+    });
     localValue.value = items;
   } else {
     localValue.value = filterValue;
   }
 };
 
+// [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: IFilter, { hide }) => {
   emit('update:filter', filter);
   fillLocalValue(filter);

package/src/{filters → modules/filters}/components/search-bar/dynamic-filter-search.vue

@@ -15,9 +15,9 @@ 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';
+import {FilterInitParams, FilterName} from "../../classes/Filter";
+import {IFiltersManager} from "../../classes/FiltersManager";
 
 /**
  * @description

package/src/{filters → modules/filters}/components/search-bar/types/DynamicFilterSearch.d.ts

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

package/src/{filters → modules/filters}/components/table-filters-panel.vue

@@ -2,10 +2,10 @@
   <dynamic-filter-panel-wrapper>
     <template #filters>
       <dynamic-filter-preview
-        v-for="filter of appliedFilters"
+        v-for="({ filter, filterConfig }) of appliedFilterToFilterConfigMappings"
         :key="filter.name"
         :filter="filter"
-        :filter-options="localizedFilterOptions"
+        :filter-config="filterConfig"
         disable-click-away
         @update:filter="emit('filter:update', $event)"
         @delete:filter="emit('filter:delete', filter)"
@@ -13,7 +13,7 @@
 
       <dynamic-filter-add-action
         :show-label="!appliedFilters.length"
-        :filter-options="availableFilterOptions"
+        :filter-configs="unAppliedFiltersConfigs"
         @add:filter="emit('filter:add', $event)"
       />
     </template>
@@ -22,7 +22,7 @@
       <apply-preset-action
         :namespace="props.presetNamespace"
         :use-presets-store="props.usePresetsStore"
-        :filter-options="props.filterOptions"
+        :filter-configs="filterConfigs"
         @apply="emit('preset:apply', $event)"
       />
 
@@ -30,7 +30,8 @@
         v-if="enablePresets"
         :namespace="props.presetNamespace"
         :filters-manager="props.filtersManager"
-        :filter-options="props.filterOptions"
+        :filters-included="filtersIncluded"
+        :filter-configs="filterConfigs"
       />
 
       <wt-icon-action
@@ -49,13 +50,15 @@
 <script lang="ts" setup>
 import { WtIconAction } from '@webitel/ui-sdk/components';
 import { Store } from 'pinia';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import {computed} from 'vue';
+import {WebitelProtoDataField} from "webitel-sdk";
 
 import { ApplyPresetAction, SavePresetAction } from '../../filter-presets';
-import { FilterOption } from '../enums/FilterOption';
-import { FilterData, IFilter } from '../types/Filter';
-import { IFiltersManager } from '../types/FiltersManager';
+import {FilterData, IFilter} from "../classes/Filter";
+import {IFiltersManager} from "../classes/FiltersManager";
+import {useFilterConfigsToolkit} from "../composables/useFilterConfigsToolkit";
+import {TFilterConfig} from "../modules/filterConfig/classes/FilterConfig";
+import { FilterOption } from '../modules/filterConfig/enums/FilterOption';
 import DynamicFilterAddAction from './dynamic-filter-add-action.vue';
 import DynamicFilterPanelWrapper from './dynamic-filter-panel-wrapper.vue';
 import DynamicFilterPreview from './preview/dynamic-filter-preview.vue';
@@ -65,13 +68,25 @@ type Props = {
    * @description
    * available filter options to set
    */
-  filterOptions: FilterOption[];
+  filterOptions: (FilterOption | TFilterConfig)[];
   /**
    * @description
    * create local filters manager from snapshot
    * inside save-preset.vue
    */
   filtersManager: IFiltersManager;
+  /**
+   * @author @dlohvinov
+   *
+   * @implements
+   * [WTEL-6702](https://webitel.atlassian.net/browse/WTEL-6702)
+   *
+   * @description
+   * Decided to pass fields as a prop instead of converting them to
+   * Props.filterOptions, because this functionality can be expanded to many
+   * filter panels
+   */
+  filterableExtensionFields?: WebitelProtoDataField[];
   /**
    * @description
    * QueryPreset "section" field
@@ -89,7 +104,7 @@ type Props = {
    *
    * TODO: https://github.com/webitel/webitel-ui-sdk/pull/551
    */
-  usePresetsStore: Store;
+  usePresetsStore?: Store;
 };
 
 const props = defineProps<Props>();
@@ -115,38 +130,16 @@ const emit = defineEmits<{
   hide: [];
 }>();
 
-const { t } = useI18n();
-
-const appliedFilters = computed(() => {
-  return props.filtersManager.getFiltersList({
-    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 };
-  });
-});
-
-/**
- * @description
- * available filters to add, with appliedFilters excluded
- */
-const availableFilterOptions = computed(() => {
-  return localizedFilterOptions.value.filter(({ value: opt }) => {
-    return appliedFilters.value.every((filter) => {
-      return filter.name !== opt;
-    });
-  });
+const {
+  filterConfigs,
+  filtersIncluded,
+  appliedFilters,
+  appliedFilterToFilterConfigMappings,
+  unAppliedFiltersConfigs,
+} = useFilterConfigsToolkit({
+  filterOptions: props.filterOptions,
+  filtersManager: props.filtersManager,
+  filterableExtensionFields: props.filterableExtensionFields,
 });
 
 const enablePresets = computed(() => !!props.presetNamespace);

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

@@ -0,0 +1,136 @@
+import { computed, ComputedRef } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { WebitelProtoDataField } from 'webitel-sdk';
+
+import { FilterName, IFilter } from '../classes/Filter';
+import { IFiltersManager } from '../classes/FiltersManager';
+import {
+  BaseFilterConfig,
+  createFilterConfig,
+  FilterConfig,
+} from '../modules/filterConfig/classes/FilterConfig';
+import { createTypeExtensionFilterConfig } from '../modules/filterConfig/components/_custom';
+import { FilterOption } from '../modules/filterConfig/enums/FilterOption';
+
+export type FilterConfigToolkit = {
+  filterConfigs: ComputedRef<BaseFilterConfig[]>;
+  /**
+   * @description
+   * some filters may be stored in filtersManager,
+   * but not included in this filters panel
+   */
+  filtersIncluded: ComputedRef<FilterName[]>;
+  appliedFilters: ComputedRef<IFilter[]>;
+  /**
+   * @description
+   * available filters to add, with appliedFilters excluded
+   */
+  unAppliedFiltersConfigs: ComputedRef<BaseFilterConfig[]>;
+  appliedFilterToFilterConfigMappings: ComputedRef<
+    Array<{
+      filterConfig: BaseFilterConfig;
+      filter: IFilter;
+    }>
+  >;
+};
+
+export type FilterConfigToolkitParams = {
+  filterOptions: (FilterOption | BaseFilterConfig)[];
+  filtersManager: IFiltersManager;
+  filterableExtensionFields: WebitelProtoDataField[];
+};
+
+export const useFilterConfigsToolkit = ({
+  filterOptions,
+  filtersManager,
+  filterableExtensionFields = [],
+}: FilterConfigToolkitParams): FilterConfigToolkit => {
+  const { t } = useI18n();
+
+  const filterConfigs = computed(() => {
+    return (
+      filterOptions
+        /**
+         * make filterConfigs from standard filterOptions
+         */
+        .map((opt) => {
+          if (opt instanceof FilterConfig) {
+            return opt;
+          }
+
+          if (typeof opt === 'string') {
+            return createFilterConfig({ filterOption: opt });
+          }
+
+          return new FilterConfig({
+            ...opt,
+            name: opt.name,
+          });
+        })
+        /**
+         * localize
+         */
+        .map((filterConfig) => {
+          if (!filterConfig.label) {
+            filterConfig.label = t(`webitelUI.filters.${filterConfig.name}`);
+          }
+
+          return filterConfig;
+        })
+        /**
+         * add filterConfigs for extension fields
+         */
+        .concat(
+          filterableExtensionFields.map((field: WebitelProtoDataField) => {
+            return createTypeExtensionFilterConfig(
+              { name: field.id },
+              { field },
+            );
+          }),
+        )
+    );
+  });
+
+  const filtersIncluded = computed(() => {
+    return filterConfigs.value.map(({ name }) => name);
+  });
+
+  const appliedFilters = computed(() => {
+    return filtersManager.getFiltersList({
+      include: filtersIncluded.value,
+    });
+  });
+
+  const unAppliedFiltersConfigs = computed(() => {
+    return filterConfigs.value.filter(({ name }) => {
+      return !filtersManager.hasFilter(name);
+    });
+  });
+
+  const appliedFilterToFilterConfigMappings = computed(() => {
+    const filterNameToFilterConfigMap = filterConfigs.value.reduce(
+      (map, filterConfig) => {
+        return {
+          ...map,
+          [filterConfig.name]: filterConfig,
+        };
+      },
+      {},
+    );
+
+    return appliedFilters.value.map((filter) => {
+      return {
+        filter,
+        filterConfig: filterNameToFilterConfigMap[filter.name],
+      };
+    });
+  });
+
+  return {
+    filterConfigs,
+    filtersIncluded,
+    appliedFilters,
+    appliedFilterToFilterConfigMappings,
+    unAppliedFiltersConfigs,
+  };
+};

package/src/{filters → modules/filters}/createTableFiltersStore.ts

@@ -3,8 +3,10 @@ import { computed, reactive, ref } from 'vue';
 
 import { PersistedStorageType } from '../persist/PersistedStorage.types.ts';
 import { usePersistedStorage } from '../persist/usePersistedStorage.ts';
-import { createFiltersManager } from './classes/FiltersManager.ts';
-import { FiltersManagerConfig } from './types/FiltersManager';
+import {
+  createFiltersManager,
+  FiltersManagerConfig,
+} from './classes/FiltersManager.ts';
 
 export const createTableFiltersStore = (
   namespace: string,

package/src/{filters → modules/filters}/index.ts

@@ -1,20 +1,19 @@
-import { Filter } from './classes/Filter.ts';
-import { createFiltersManager } from './classes/FiltersManager';
-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 {
+import {
+  Filter,
   FilterConfig,
   FilterInitParams,
-  FilterLabel,
-  FilterName,
+  FilterLabel, FilterName,
   FilterValue,
-  IFilter,
-} from './types/Filter.d.ts';
-import type {
+  IFilter
+} from './classes/Filter';
+import {
+  createFiltersManager,
   FiltersManagerConfig,
-  IFiltersManager,
-} from './types/FiltersManager.d.ts';
+  IFiltersManager
+} from './classes/FiltersManager';
+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';
 
 export {
   createFiltersManager,

package/src/modules/filters/modules/filterConfig/classes/FilterConfig.ts

@@ -0,0 +1,109 @@
+import { Component } from 'vue';
+import { MessageResolver } from 'vue-i18n';
+
+import { FilterName, FilterValue } from '../../../classes/Filter';
+import {
+  FilterOptionToFilterConfigCreatorMap,
+  FilterOptionToPreviewComponentMap,
+  FilterOptionToValueComponentMap,
+} from '../components';
+import { FilterOption } from '../enums/FilterOption';
+
+export interface BaseFilterConfig {
+  name: FilterName;
+  valueInputComponent: Component;
+  valuePreviewComponent: Component;
+  label?: ReturnType<MessageResolver> | string;
+}
+
+export type FilterConfigBaseParams = {
+  name?: FilterName;
+  valueInputComponent?: Component;
+  valuePreviewComponent?: Component;
+};
+
+export interface IWtSysTypeFilterConfig extends BaseFilterConfig {
+  searchRecords: (
+    params: FilterConfigSearchMethodParams,
+  ) => Promise<{ items: unknown[]; next?: boolean }>;
+}
+
+export type FilterConfigSearchMethodParams = [
+  /**
+   * @description
+   * any request-related data
+   */
+  unknown,
+  /**
+   * @description
+   * filter-related data
+   */
+  {
+    filterName: FilterName;
+    filterValue: FilterValue;
+    filterConfig: BaseFilterConfig;
+  },
+];
+
+export type TFilterConfig = IWtSysTypeFilterConfig | BaseFilterConfig;
+
+export class FilterConfig implements BaseFilterConfig {
+  name: FilterName;
+  valueInputComponent: Component;
+  valuePreviewComponent: Component;
+  label?: ReturnType<MessageResolver> | string;
+
+  constructor({
+    name,
+    valueInputComponent,
+    valuePreviewComponent,
+  }: FilterConfigBaseParams = {}) {
+    if (name) this.name = name;
+    if (valueInputComponent) this.valueInputComponent = valueInputComponent;
+    if (valuePreviewComponent)
+      this.valuePreviewComponent = valuePreviewComponent;
+  }
+}
+
+/**
+ * @author @dlohvinov
+ *
+ * @description
+ * "abstract" class is used to support default config fields for all WtSysTypeFilterConfig
+ * classes in future
+ */
+export abstract class WtSysTypeFilterConfig
+  extends FilterConfig
+  implements IWtSysTypeFilterConfig
+{
+  abstract name;
+  abstract searchRecords;
+}
+
+export const createFilterConfig = ({
+  filterOption,
+}: {
+  filterOption: FilterOption;
+}): BaseFilterConfig => {
+  const filterConfigClass = FilterOptionToFilterConfigCreatorMap[filterOption];
+
+  if (filterConfigClass) {
+    return filterConfigClass();
+  }
+
+  // throw new Error(
+  //   `Filter config class not found for this filter option: ${filterOption}`,
+  // );
+
+  /**
+   * @author @dlohvinov
+   *
+   * @deprecated
+   * compat. should be removed with FilterOption to Component maps
+   * */
+  return new FilterConfig({
+    name: filterOption,
+    valueInputComponent: FilterOptionToValueComponentMap[filterOption],
+    valuePreviewComponent: FilterOptionToPreviewComponentMap[filterOption],
+  });
+};

package/src/modules/filters/modules/filterConfig/components/_custom/Readme.md

@@ -0,0 +1,9 @@
+# Filter Options/_custom
+
+Зважайте!
+
+Тут лежать компоненти для фільтрації ПО кастомних полях: тобто,
+там, де ключем фільтра є назва кастомного поля, а значенням - значення з довідника того поля.
+
+Ці компоненти не мають відношення до якихось фільтрів,
+повʼязаних з назвами кастомних полів як велью якихось інших фільтрів.

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

@@ -0,0 +1,69 @@
+import { sysTypes } from '@webitel/ui-sdk/api/clients/index';
+import { WebitelProtoDataField } from 'webitel-sdk';
+
+import {
+  BaseFilterConfig,
+  FilterConfig,
+  FilterConfigBaseParams,
+  IWtSysTypeFilterConfig,
+} from '../../classes/FilterConfig';
+import { CustomFilterOption } from '../../enums/FilterOption';
+import TypeExtensionFilterValueField from './type-extension-filter-value-field.vue';
+import TypeExtensionFilterValuePreview from './type-extension-filter-value-preview.vue';
+
+export interface ITypeExtensionFilterConfig extends BaseFilterConfig {
+  readonly field: WebitelProtoDataField;
+}
+
+class TypeExtensionFilterConfig
+  extends FilterConfig
+  implements ITypeExtensionFilterConfig
+{
+  readonly field: WebitelProtoDataField;
+
+  constructor(
+    { name }: FilterConfigBaseParams,
+    { field }: { field: WebitelProtoDataField },
+  ) {
+    super({
+      name,
+      valueInputComponent: TypeExtensionFilterValueField,
+      valuePreviewComponent: TypeExtensionFilterValuePreview,
+    });
+
+    this.label = field.name;
+    this.field = field;
+  }
+}
+
+class TypeExtensionWtSysTypeFieldFilterConfig
+  extends TypeExtensionFilterConfig
+  implements IWtSysTypeFilterConfig
+{
+  searchRecords(
+    { id: filterValue, ...rest },
+    // {
+    //   filterValue,
+    // }: {
+    //   filterValue: unknown;
+    // },
+  ): Promise<{ items: unknown[]; next?: boolean }> {
+    return sysTypes.getLookup({
+      ...rest,
+      ...this.field.lookup,
+      id: filterValue,
+    });
+  }
+}
+
+export const createTypeExtensionFilterConfig = (
+  name: CustomFilterOption,
+  { field }: { field: WebitelProtoDataField },
+) => {
+  switch (field.kind) {
+    case 'lookup':
+      return new TypeExtensionWtSysTypeFieldFilterConfig(name, { field });
+    default:
+      return new TypeExtensionFilterConfig(name, { field });
+  }
+};