@webitel/ui-datalist 1.0.12 → 1.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "build:types": "vue-tsc -p ./tsconfig.build.json",
@@ -36,7 +36,7 @@
   "dependencies": {
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@webitel/ui-sdk": "^25.4.66",
+    "@webitel/ui-sdk": "^25.4.70",
     "@webitel/styleguide": "^24.12.26"
   },
   "devDependencies": {

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

@@ -4,9 +4,9 @@ import { WebitelProtoDataField } from 'webitel-sdk';
 
 import { FilterName, IFilter } from '../classes/Filter';
 import { IFiltersManager } from '../classes/FiltersManager';
+import { createFilterConfig } from '../modules/filterConfig/classes/createFilterConfig';
 import {
   BaseFilterConfig,
-  createFilterConfig,
   FilterConfig,
 } from '../modules/filterConfig/classes/FilterConfig';
 import { createTypeExtensionFilterConfig } from '../modules/filterConfig/components/_custom';

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

@@ -2,12 +2,6 @@ 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;
@@ -79,31 +73,3 @@ export abstract class WtSysTypeFilterConfig
   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/classes/createFilterConfig.ts

@@ -0,0 +1,35 @@
+import {
+  FilterOptionToFilterConfigCreatorMap,
+  FilterOptionToPreviewComponentMap,
+  FilterOptionToValueComponentMap,
+} from '../components';
+import { FilterOption } from '../enums/FilterOption';
+import { BaseFilterConfig, FilterConfig } from './FilterConfig';
+
+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/index.ts

@@ -1,13 +1,14 @@
 import { sysTypes } from '@webitel/ui-sdk/api/clients/index';
+import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
 import { WebitelProtoDataField } from 'webitel-sdk';
 
+import { FilterConfig } from '../../classes/FilterConfig';
+import { CustomFilterOption } from '../../enums/FilterOption';
 import {
   BaseFilterConfig,
-  FilterConfig,
   FilterConfigBaseParams,
   IWtSysTypeFilterConfig,
-} from '../../classes/FilterConfig';
-import { CustomFilterOption } from '../../enums/FilterOption';
+} from '../../types/FilterConfig';
 import TypeExtensionFilterValueField from './type-extension-filter-value-field.vue';
 import TypeExtensionFilterValuePreview from './type-extension-filter-value-preview.vue';
 
@@ -61,7 +62,9 @@ export const createTypeExtensionFilterConfig = (
   { field }: { field: WebitelProtoDataField },
 ) => {
   switch (field.kind) {
-    case 'lookup':
+    case WtTypeExtensionFieldKind.Select:
+      return new TypeExtensionWtSysTypeFieldFilterConfig(name, { field });
+    case WtTypeExtensionFieldKind.Multiselect:
       return new TypeExtensionWtSysTypeFieldFilterConfig(name, { field });
     default:
       return new TypeExtensionFilterConfig(name, { field });

package/src/modules/filters/modules/filterConfig/components/_custom/type-extension-filter-value-field.vue

@@ -4,7 +4,21 @@
     v-model:model-value="model"
     :field="props.filterConfig.field"
   >
-    <template #[ExtensionFieldType.Select]="{ defaultProps }">
+    <template #[WtTypeExtensionFieldKind.Boolean]="{ defaultProps }">
+      <has-option-filter-value-field
+        v-model:model-value="model"
+      />
+    </template>
+    <template #[WtTypeExtensionFieldKind.Select]="{ defaultProps }">
+      <wt-select
+        v-bind="defaultProps"
+        :value="model ?? [] /* so that component won't break when model is nullish at init */"
+        :search-method="(...params) => props.filterConfig.searchRecords(...params)"
+        use-value-from-options-by-prop="id"
+        @input="model = $event"
+      />
+    </template>
+    <template #[WtTypeExtensionFieldKind.Multiselect]="{ defaultProps }">
       <wt-select
         v-bind="defaultProps"
         :value="model ?? [] /* so that component won't break when model is nullish at init */"
@@ -23,6 +37,7 @@ import { WtSelect, WtTypeExtensionValueInput } from '@webitel/ui-sdk/components'
 import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums'; // DO NOT REMOVE THIS IMPORT!! : Webstorm lies you, import is used for dynamic slot computation
 import {computed, useAttrs, watch} from "vue";
 
+import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
 import {ITypeExtensionFilterConfig} from "./index";
 
 const model = defineModel<unknown>();

package/src/modules/filters/modules/filterConfig/components/_custom/type-extension-filter-value-preview.vue

@@ -1,18 +1,45 @@
 <template>
-  <div class="type-extension-filter-value-preview">
-213
-  </div>
+  <template v-if="showLookupValuePreview">
+    <lookup-value-preview
+      :value="props.value"
+    />
+  </template>
+  <template
+    v-else-if="props.filterConfig.field.kind === WtTypeExtensionFieldKind.Boolean"
+  >
+    <has-option-value-preview
+      :value="props.value"
+    />
+  </template>
+  <template
+    v-else-if="props.filterConfig.field.kind === WtTypeExtensionFieldKind.Calendar"
+  >
+    <date-time-value-preview
+      :value="props.value * 1000 /* FIXME 😬😬😬 backend format -> frontend format conversion */"
+    />
+  </template>
+  <template v-else>
+    {{ props.value }}
+  </template>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({});
+import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
+import { computed } from 'vue';
 
-const emit = defineEmits([]);
+import { DynamicFilterPreviewComponentProps } from '../../types/DynamicFilterPreviewComponent';
+import DateTimeValuePreview from '../_shared/date-time-filter/date-time-filter-value-preview.vue';
+import HasOptionValuePreview from '../_shared/has-options/has-option-filter-value-preview.vue';
+import LookupValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
+import { ITypeExtensionFilterConfig } from './index';
 
+const props = defineProps<DynamicFilterPreviewComponentProps & { filterConfig: ITypeExtensionFilterConfig }>();
+
+const showLookupValuePreview = computed(() => {
+  return [WtTypeExtensionFieldKind.Multiselect, WtTypeExtensionFieldKind.Select]
+    .includes(props.filterConfig.field.kind);
+});
 </script>
 
 <style scoped lang="scss">
-.type-extension-filter-value-preview {
-
-}
 </style>

package/src/modules/filters/modules/filterConfig/components/_shared/date-time-filter/date-time-filter-value-preview.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>{{ date }}</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const date = ref(new Date(+props.value).toLocaleString());
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/_shared/has-options/has-option-filter-value-preview.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>{{ localeValue }}</div>
+</template>
+
+<script lang="ts" setup>
+import { usePrettifyBooleanValuePreview } from '../../../composables/booleanFilterToolkit';
+
+const props = defineProps<{
+  value: boolean;
+}>();
+
+const { localeValue } = usePrettifyBooleanValuePreview(props.value);
+</script>
+
+<style scoped></style>

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

@@ -59,10 +59,6 @@ import ContactGroupFilter from './contact-group/contact-group-filter-value-field
 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 { searchMethod as gatewaySearchMethod } from './gateway/config';
 import GatewayFilter from './gateway/gateway-filter-value-field.vue';
 import GatewayFilterPreview from './gateway/gateway-filter-value-preview.vue';
@@ -144,10 +140,6 @@ export {
   ContactGroupFilter,
   ContactGroupFilterPreview,
   CreatedAtFilterValueField,
-  CreatedAtFromFilter,
-  CreatedAtFromFilterPreview,
-  CreatedAtToFilter,
-  CreatedAtToFilterPreview,
   GatewayFilter,
   GatewayFilterPreview,
   GranteeFilter,
@@ -208,8 +200,6 @@ export const FilterOptionToValueComponentMap: Record<
   [FilterOption.User]: UserFilter,
   [FilterOption.Variable]: VariableFilter,
   [FilterOption.CreatedAt]: CreatedAtFilterValueField,
-  [FilterOption.CreatedAtFrom]: CreatedAtFromFilter,
-  [FilterOption.CreatedAtTo]: CreatedAtToFilter,
   [FilterOption.CaseStatus]: CaseStatusFilterValueField,
   [FilterOption.CaseSource]: CaseSourceFilterValueField,
   [FilterOption.CaseService]: CaseServiceFilterValueField,
@@ -254,8 +244,6 @@ export const FilterOptionToPreviewComponentMap: Record<
   [FilterOption.HasTranscription]: HasTranscriptionFilterPreview,
   [FilterOption.User]: UserFilterPreview,
   [FilterOption.Variable]: VariableFilterPreview,
-  [FilterOption.CreatedAtFrom]: CreatedAtFromFilterPreview,
-  [FilterOption.CreatedAtTo]: CreatedAtToFilterPreview,
   [FilterOption.CaseStatus]: CaseStatusFilterValuePreview,
   [FilterOption.CaseSource]: CaseSourceFilterValuePreview,
   [FilterOption.CaseService]: CaseServiceFilterValuePreview,

package/src/modules/filters/modules/filterConfig/enums/FilterOption.ts

@@ -19,8 +19,6 @@ export const FilterOption = {
   User: 'user',
   Variable: 'variable',
   CreatedAt: 'createdAt',
-  CreatedAtFrom: 'createdAtFrom',
-  CreatedAtTo: 'createdAtTo',
   CaseStatus: 'status',
   CaseSource: 'source',
   CaseService: 'service',

package/src/modules/filters/modules/filterConfig/types/DynamicFilterPreviewComponent.ts

@@ -0,0 +1,8 @@
+import { IFilter } from '../../../classes/Filter';
+import { TFilterConfig } from './FilterConfig';
+
+export type DynamicFilterPreviewComponentProps = {
+  value: unknown;
+  filterConfig: TFilterConfig;
+  filter: IFilter;
+};