@webitel/ui-sdk 24.12.139 → 24.12.141

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.139",
+  "version": "24.12.141",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/components/wt-tree/wt-tree.vue

@@ -12,6 +12,7 @@
         :item-data="itemData"
         :data="item"
         :children-prop="childrenProp"
+        :multiple="multiple"
         @update:model-value="emit('update:modelValue', $event)"
       />
     </div>
@@ -75,6 +76,7 @@ const props = withDefaults(
      * You can pass the name of the property that will be used for getting children elements
      */
     childrenProp?: string;
+    multiple?: boolean;
   }>(),
   {
     childrenProp: 'children',

package/src/components/wt-tree-line/wt-tree-line.vue

@@ -20,11 +20,9 @@
     <div
       :class="{ active: isSelected }"
       class="wt-tree-line__label-wrapper"
+      @click="selectElement"
     >
-      <p
-        class="wt-tree-line__label"
-        @click="selectElement"
-      >
+      <p class="wt-tree-line__label">
         {{ label }}
       </p>
       <wt-icon
@@ -47,6 +45,7 @@
         :next-element="!!data[childrenProp][index + 1]"
         :nested-icons="displayIcons"
         :last-child="index === data[childrenProp].length - 1"
+        :multiple="multiple"
         @open-parent="onOpenParent"
         @update:model-value="emit('update:modelValue', $event)"
       />
@@ -72,6 +71,7 @@ const props = withDefaults(
     lastChild?: boolean;
     nestedIcons?: WtTreeNestedIcons[];
     nextElement?: boolean;
+    multiple?: boolean;
     /**
      * 'It's a key in data object, which contains field what display searched elements. By this field, table will be opened to elements with this field value. '
      */
@@ -82,6 +82,7 @@ const props = withDefaults(
     childrenProp: 'children',
     lastChild: false,
     nextElement: false,
+    multiple: false,
     searchedProp: 'searched',
   },
 );
@@ -110,7 +111,20 @@ const displayIcons = computed(() => {
   return icons;
 });
 
+const isMultipleItemsSelected = () => {
+  if (props.itemData) {
+    return props.modelValue.includes(props.data[props.itemData]);
+  }
+
+  const match = props.modelValue.find((item) => deepEqual(item, props.data));
+  return !!match;
+};
+
 const isSelected = computed(() => {
+  if (props.multiple) {
+    return isMultipleItemsSelected();
+  }
+
   if (props.itemData) {
     return props.data[props.itemData] === props.modelValue;
   }
@@ -118,7 +132,36 @@ const isSelected = computed(() => {
   return deepEqual(props.modelValue, props.data);
 });
 
+const setMultipleModelValue = () => {
+  const value = props.itemData ? props.data[props.itemData] : props.data;
+  let existingIndex;
+
+  if (props.itemData) {
+    existingIndex = props.modelValue.indexOf(props.data[props.itemData]);
+  } else {
+    existingIndex = props.modelValue.findIndex((item) =>
+      deepEqual(item, props.data),
+    );
+  }
+
+  if (existingIndex === -1) {
+    const newArray = [...props.modelValue];
+    newArray.push(value);
+    emit('update:modelValue', newArray);
+    return;
+  }
+
+  const newArray = [...props.modelValue];
+  newArray.splice(existingIndex, 1);
+  emit('update:modelValue', newArray);
+};
+
 const selectElement = () => {
+  if (props.multiple && !props.data.service) {
+    setMultipleModelValue();
+    return;
+  }
+
   if (props.data[props.childrenProp]?.length) {
     return;
   }

package/src/modules/Filters/v2/filters/components/values/_shared/composables/booleanFilterToolkit.ts

@@ -0,0 +1,33 @@
+import {useVuelidate} from "@vuelidate/core";
+import {computed, ModelRef, type Reactive, type Ref} from "vue";
+import {useI18n} from "vue-i18n";
+
+import {BooleanFilterModelValue} from "../types/BooleanFilter";
+
+export const usePrettifyBooleanValuePreview = (value: Reactive<boolean>): { localeValue: Ref<string> } => {
+    const { t } = useI18n();
+
+    const localeValue = computed(() => {
+        return value ? t('vocabulary.yes') : t('vocabulary.no');
+    });
+
+    return { localeValue };
+};
+
+export const useBooleanFilterValueValidation = <T extends BooleanFilterModelValue>(model: ModelRef<T>) => {
+    const v$ = useVuelidate(
+        computed(() => ({
+            model: {
+                required: (v: T) => !(!v && v !== false),
+            },
+        })),
+        { model },
+        { $autoDirty: true },
+    );
+
+    v$.value.$touch();
+
+    return {
+        v$,
+    };
+};

package/src/modules/Filters/v2/filters/components/values/_shared/types/BooleanFilter.ts

@@ -0,0 +1 @@
+export type BooleanFilterModelValue = boolean;

package/src/modules/Filters/v2/filters/components/values/has-file/has-file-filter-value-field.vue

@@ -7,26 +7,15 @@
 </template>
 
 <script lang="ts" setup>
-import { useVuelidate } from '@vuelidate/core';
-import { computed, watch } from 'vue';
+import { watch } from 'vue';
 
+import { useBooleanFilterValueValidation } from '../_shared/composables/booleanFilterToolkit';
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
-import {HasFileFilterModelValue} from "./HasFileFilter";
+import {BooleanFilterModelValue} from "../_shared/types/BooleanFilter";
 
-const model = defineModel<HasFileFilterModelValue>();
+const model = defineModel<BooleanFilterModelValue>();
 
-const v$ = useVuelidate(
-  computed(() => ({
-    model: {
-      required: (v: HasFileFilterModelValue) => !(!v && v !== false),
-
-    },
-  })),
-  { model },
-  { $autoDirty: true },
-);
-
-v$.value.$touch();
+const { v$ } = useBooleanFilterValueValidation<BooleanFilterModelValue>(model);
 
 const emit = defineEmits<{
   'update:invalid': [boolean];

package/src/modules/Filters/v2/filters/components/values/has-file/has-file-filter-value-preview.vue

@@ -3,17 +3,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import {usePrettifyBooleanValuePreview} from "../_shared/composables/booleanFilterToolkit";
 
 const props = defineProps<{
   value: boolean;
 }>();
-const { t } = useI18n();
 
-const localeValue = computed(() => {
-  return props.value ? t('vocabulary.yes') : t('vocabulary.no');
-});
+const {
+  localeValue,
+} = usePrettifyBooleanValuePreview(props.value);
 </script>
 
 <style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/{rated/rated-filter-value-field.vue → has-rating/has-rating-filter-value-field.vue}

@@ -7,25 +7,15 @@
 </template>
 
 <script lang="ts" setup>
-import { useVuelidate } from '@vuelidate/core';
-import { required } from '@vuelidate/validators';
-import { computed, watch } from 'vue';
+import { watch } from 'vue';
 
+import {useBooleanFilterValueValidation} from "../_shared/composables/booleanFilterToolkit";
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
+import {BooleanFilterModelValue} from "../_shared/types/BooleanFilter";
 
-const model = defineModel<string>();
+const model = defineModel<BooleanFilterModelValue>();
 
-const v$ = useVuelidate(
-  computed(() => ({
-    model: {
-      required,
-    },
-  })),
-  { model },
-  { $autoDirty: true },
-);
-
-v$.value.$touch();
+const { v$ } = useBooleanFilterValueValidation<BooleanFilterModelValue>(model);
 
 const emit = defineEmits<{
   'update:invalid': [boolean];

package/src/modules/Filters/v2/filters/components/values/has-rating/has-rating-filter-value-preview.vue

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

package/src/modules/Filters/v2/filters/components/values/has-transcription/has-transcription-filter-value-field.vue

@@ -7,25 +7,16 @@
 </template>
 
 <script lang="ts" setup>
-import { useVuelidate } from '@vuelidate/core';
-import { computed, watch } from 'vue';
+import { watch } from 'vue';
 
+import {useBooleanFilterValueValidation} from "../_shared/composables/booleanFilterToolkit";
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
-import {HasTranscriptionFilterModelValue} from "./HasTranscriptionFilter";
-
-const model = defineModel<HasTranscriptionFilterModelValue>();
-
-const v$ = useVuelidate(
-  computed(() => ({
-    model: {
-      required: (v: HasTranscriptionFilterModelValue) => !(!v && v !== false),
-    },
-  })),
-  { model },
-  { $autoDirty: true },
-);
+import {BooleanFilterModelValue} from "../_shared/types/BooleanFilter";
+
+const model = defineModel<BooleanFilterModelValue>();
+
+const { v$ } = useBooleanFilterValueValidation<BooleanFilterModelValue>(model);
 
-v$.value.$touch();
 
 const emit = defineEmits<{
   'update:invalid': [boolean];

package/src/modules/Filters/v2/filters/components/values/has-transcription/has-transcription-filter-value-preview.vue

@@ -3,17 +3,15 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
+import {usePrettifyBooleanValuePreview} from "../_shared/composables/booleanFilterToolkit";
 
 const props = defineProps<{
   value: boolean;
 }>();
-const { t } = useI18n();
 
-const localeValue = computed(() => {
-  return props.value ? t('vocabulary.yes') : t('vocabulary.no');
-});
+const {
+  localeValue,
+} = usePrettifyBooleanValuePreview(props.value);
 </script>
 
 <style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/index.js

@@ -32,16 +32,16 @@ import HasAttachmentFilter from './has-attachment/has-attachment-filter-value-fi
 import HasAttachmentFilterPreview from './has-attachment/has-attachment-filter-value-preview.vue';
 import HasFileFilter from './has-file/has-file-filter-value-field.vue';
 import HasFileFilterPreview from './has-file/has-file-filter-value-preview.vue';
+import HasRatingFilterValueField from './has-rating/has-rating-filter-value-field.vue';
+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 ImpactedFilter from './impacted/impacted-filter-value-field.vue';
 import ImpactedFilterPreview from './impacted/impacted-filter-value-preview.vue';
-import PriorityCaseFilter from './priority-case/priority-case-filter-value-field.vue';
-import PriorityCaseFilterPreview from './priority-case/priority-case-filter-value-preview.vue';
+import CasePriorityFilter from './priority-case/priority-case-filter-value-field.vue';
+import CasePriorityFilterPreview from './priority-case/priority-case-filter-value-preview.vue';
 import QueueFilter from './queue/queue-filter-value-field.vue';
 import QueueFilterPreview from './queue/queue-filter-value-preview.vue';
-import RatedFilter from './rated/rated-filter-value-field.vue';
-import RatedFilterPreview from './rated/rated-filter-value-preview.vue';
 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';
@@ -54,16 +54,16 @@ import ResolutionTimeFilter from './resolution-time/resolution-time-filter-value
 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 ServiceCaseFilter from './service-case/service-case-filter-value-field.vue';
-// import ServiceCaseFilterPreview from './service-case/service-case-filter-value-preview.vue';
+import CaseServiceFilter from './service-case/service-case-filter-value-field.vue';
+import CaseServiceFilterPreview from './service-case/service-case-filter-value-preview.vue';
 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 SourceCaseFilter from './source-case/source-case-filter-value-field.vue';
-import SourceCaseFilterPreview from './source-case/source-case-filter-value-preview.vue';
-import StatusCaseFilter from './status-case/status-case-filter-value-field.vue';
-import StatusCaseFilterPreview from './status-case/status-case-filter-value-preview.vue';
+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';
+import CaseStatusFilterPreview from './status-case/status-case-filter-value-preview.vue';
 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';
@@ -90,6 +90,14 @@ export {
   AssigneeFilterPreview,
   AuthorFilter,
   AuthorFilterPreview,
+  CasePriorityFilter,
+  CasePriorityFilterPreview,
+  CaseServiceFilter,
+  CaseServiceFilterPreview,
+  CaseSourceFilter,
+  CaseSourceFilterPreview,
+  CaseStatusFilter,
+  CaseStatusFilterPreview,
   CauseFilter,
   CauseFilterPreview,
   CloseReasonGroupsCaseFilter,
@@ -112,18 +120,16 @@ export {
   HasAttachmentFilterPreview,
   HasFileFilter,
   HasFileFilterPreview,
+  HasRatingFilterValueField,
+  HasRatingFilterValuePreview,
   HasTranscriptionFilter,
   HasTranscriptionFilterPreview,
   ImpactedFilter,
   ImpactedFilterPreview,
-  PriorityCaseFilter,
-  PriorityCaseFilterPreview,
   QueueFilter,
   QueueFilterPreview,
   RatedByFilter,
   RatedByFilterPreview,
-  RatedFilter,
-  RatedFilterPreview,
   RatingFromToFilter,
   RatingFromToFilterPreview,
   ReactionTimeFilter,
@@ -136,14 +142,8 @@ export {
   ScoreFilterPreview,
   SlaConditionFilter,
   SlaConditionFilterPreview,
-  // ServiceCaseFilter,
-  // ServiceCaseFilterPreview,
   SlaFilter,
   SlaFilterPreview,
-  SourceCaseFilter,
-  SourceCaseFilterPreview,
-  StatusCaseFilter,
-  StatusCaseFilterPreview,
   TagFilter,
   TagFilterPreview,
   TalkDurationFilter,

package/src/modules/Filters/v2/filters/components/values/service-case/config.js

@@ -1,6 +1,6 @@
 import ServiceCatalogsAPI from '../../../../../../../api/clients/caseServiceCatalogs/service-catalogs.js';
 import ServicesAPI from '../../../../../../../api/clients/caseServices/services.js';
 
-export const servicesSearchMethod = ServicesAPI.getLookup;
-export const serviceCatalogsSearchMethod = ServiceCatalogsAPI.getLookup;
+export const searchMethod = ServiceCatalogsAPI.getList;
+export const servicesSearchMethod = ServicesAPI.getList;
 export const localePath = '';

package/src/modules/Filters/v2/filters/components/values/service-case/service-case-filter-value-field.vue

@@ -1,84 +1,31 @@
 <template>
-  <div>
-    <wt-select
-      :clearable="false"
-      :label="t('cases.reason')"
-      :search-method="serviceCatalogsSearchMethod"
-      :v="v$.model?.selection"
-      :value="model?.selection"
-      track-by="id"
-      use-value-from-options-by-prop="id"
-      @input="changeSelection($event)"
-    />
-
-    <wt-select
-      v-if="model?.selection"
-      :clearable="false"
-      :disabled="!model?.selection"
-      :label="t('webitelUI.filters.filterValue')"
-      :options="conditionList"
-      :v="v$.model?.conditions"
-      :value="model?.conditions"
-      multiple
-      track-by="id"
-      use-value-from-options-by-prop="id"
-      @input="model.conditions = $event"
-    />
-  </div>
+  <wt-tree
+    :model-value="model"
+    :data="catalogData"
+    item-data="id"
+    item-label="name"
+    children-prop="service"
+    class="service-case-filter-value-field"
+    multiple
+    @update:model-value="model = $event"
+  />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import deepCopy from 'deep-copy';
 import { computed, onMounted, ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
 
-import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
-import { serviceCatalogsSearchMethod, servicesSearchMethod } from './config.js';
+import WtTree from '../../../../../../../components/wt-tree/wt-tree.vue';
+import { searchMethod } from './config.js';
 
-type ModelValue = {
-  selection: string;
-  conditions: string;
-};
-const model = defineModel<ModelValue>();
-const { t } = useI18n();
-
-const initModel = () => {
-  if (!model.value) {
-    model.value = {
-      selection: '',
-      conditions: '',
-    };
-  } else {
-    onSelectionUpdate(model.value.selection);
-  }
-};
-onMounted(() => initModel());
-
-const conditionList = ref([]);
-
-const onSelectionUpdate = async (val: string) => {
-  model.value.selection = val;
-
-  if (val) {
-    const { items } = await getConditionList();
-    if (items.length) {
-      conditionList.value = items;
-    }
-  }
-};
+type ModelValue = string[];
+const model = defineModel<ModelValue>({
+  default: [],
+});
 
-const changeSelection = (value) => {
-  onSelectionUpdate(value);
-  model.value.conditions = '';
-};
-
-const getConditionList = async (params) => {
-  return await servicesSearchMethod({
-    parentId: model.value.selection,
-    ...params,
-  });
-};
+const catalogData = ref([]);
 
 const v$ = useVuelidate(
   computed(() => ({
@@ -91,7 +38,7 @@ const v$ = useVuelidate(
       },
     },
   })),
-  { model, conditionList },
+  { model },
   { $autoDirty: true },
 );
 
@@ -108,6 +55,59 @@ watch(
   },
   { immediate: true },
 );
+
+const loadCatalogs = async () => {
+  const { items } = await searchMethod({
+    size: -1, // To get all catalogs with services we need to pass size -1
+    fields: ['id', 'name', 'closeReasonGroup', 'status', 'service'],
+    hasSubservices: true,
+  });
+
+  catalogData.value = deepCopy(items);
+};
+
+if (!model.value) {
+  model.value = [];
+}
+
+onMounted(loadCatalogs);
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+$form-width: 800px;
+
+.service-case-filter-value-field {
+  background: transparent;
+  max-height: 350px;
+  height: 100%;
+  overflow-y: auto;
+  grid-area: value;
+}
+
+.dynamic-filter-config-form {
+  &:has(.service-case-filter-value-field) {
+    width: $form-width;
+    height: 500px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: 64px 1fr auto;
+    grid-template-areas:
+      'column label'
+      'value value'
+      'footer footer';
+
+    .wt-select {
+      grid-area: column;
+      height: fit-content;
+    }
+
+    .wt-input {
+      grid-area: label;
+    }
+
+    .dynamic-filter-config-form-footer {
+      grid-area: footer;
+    }
+  }
+}
+</style>

package/src/modules/Filters/v2/filters/components/values/service-case/service-case-filter-value-preview.vue

@@ -1,15 +1,34 @@
 <template>
-  <div class=""></div>
+  <ul v-if="localValue">
+    <li
+      v-for="({ name }, index) of localValue"
+      :key="index"
+    >
+      {{ name }}
+    </li>
+  </ul>
 </template>
 
-<script setup lang="ts">
-interface Props {}
+<script lang="ts" setup>
+import { ref } from 'vue';
 
-const props = defineProps<Props>();
+import { servicesSearchMethod } from './config.js';
 
-interface Emits {}
+const props = defineProps<{
+  value: number[];
+}>();
 
-const emit = defineEmits<Emits>();
+const localValue = ref([]);
+
+const getLocalValue = async () => {
+  const { items } = await servicesSearchMethod({
+    id: props.value,
+    fields: ['id', 'name'],
+  });
+  localValue.value = items;
+};
+
+getLocalValue();
 </script>
 
 <style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/has-file/HasFileFilter.d.ts

@@ -1 +0,0 @@
-export type HasFileFilterModelValue = boolean;

package/src/modules/Filters/v2/filters/components/values/has-transcription/HasTranscriptionFilter.d.ts

@@ -1 +0,0 @@
-export type HasTranscriptionFilterModelValue = boolean;

package/src/modules/Filters/v2/filters/components/values/rated/rated-filter-value-preview.vue

@@ -1,22 +0,0 @@
-<template>
-  <div>{{ localeValue }}</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { BooleanOptions } from '../../enums/boolean-options';
-
-const props = defineProps<{
-  value: boolean;
-}>();
-const { t } = useI18n();
-
-const localeValue = computed(() => {
-  const match = BooleanOptions.find((el) => el.value === props.value);
-  return match ? t(match.locale) : '';
-});
-</script>
-
-<style lang="scss" scoped></style>