@webitel/ui-sdk 24.12.138 → 24.12.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.138",
+  "version": "24.12.140",
   "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/classes/FiltersManager.ts

@@ -153,9 +153,9 @@ class FiltersManager implements IFiltersManager {
     include,
     exclude,
   }: {
-    include: FilterName[];
-    exclude: FilterName[];
-  }): void {
+    include?: FilterName[];
+    exclude?: FilterName[];
+  } = {}): void {
     const useInclude = !isEmpty(include);
     const useExclude = !isEmpty(exclude) && !useInclude;
 
@@ -173,7 +173,7 @@ class FiltersManager implements IFiltersManager {
 
     if (useExclude) {
       this.filters.forEach((_, filterName) => {
-        if (exclude.includes(filterName)) {
+        if (!exclude.includes(filterName)) {
           this.filters.delete(filterName);
         }
       });

package/src/modules/Filters/v2/filters/components/config/dynamic-filter-config-view.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="dynamic-filter-config-view">
-    <wt-tooltip :triggers="['click']">
+    <wt-tooltip
+      :triggers="['click']"
+      :disabled="props.disabled"
+    >
       <template #activator="slotScope">
         <slot
           name="activator"
@@ -24,6 +27,12 @@
  */
 
 import WtTooltip from '../../../../../../components/wt-tooltip/wt-tooltip.vue';
+
+interface Props {
+  disabled?: boolean;
+}
+
+const props = defineProps<Props>();
 </script>
 
 <style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/preview/dynamic-filter-preview.vue

@@ -1,13 +1,14 @@
 <template>
-  <dynamic-filter-config-view>
+  <dynamic-filter-config-view
+    :disabled="dummy"
+  >
     <template #activator="{ visible: configFormVisible }">
       <wt-tooltip :disabled="configFormVisible">
         <template #activator>
           <wt-chip color="primary">
-            {{
-              props.filter.label || t(`webitelUI.filters.${props.filter.name}`)
-            }}
+            {{ filter.label || t(`webitelUI.filters.${filter.name}`) }}
             <wt-icon-btn
+              v-if="!dummy"
               icon="close--filled"
               size="sm"
               @mousedown.stop="deleteFilter"
@@ -44,12 +45,13 @@ import { useI18n } from 'vue-i18n';
 import WtChip from '../../../../../../components/wt-chip/wt-chip.vue';
 import WtIconBtn from '../../../../../../components/wt-icon-btn/wt-icon-btn.vue';
 import WtTooltip from '../../../../../../components/wt-tooltip/wt-tooltip.vue';
-import type { IFilter } from '../../types/Filter';
+import type {IFilter} from '../../types/Filter';
 import DynamicFilterConfigView from '../config/dynamic-filter-config-view.vue';
 import DynamicFilterPreviewInfo from './dynamic-filter-preview-info.vue';
 
 interface Props {
   filter: IFilter;
+  dummy?: boolean;
 }
 
 const { t } = useI18n();

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

@@ -36,8 +36,8 @@ import HasTranscriptionFilter from './has-transcription/has-transcription-filter
 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';
@@ -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,
@@ -116,8 +124,6 @@ export {
   HasTranscriptionFilterPreview,
   ImpactedFilter,
   ImpactedFilterPreview,
-  PriorityCaseFilter,
-  PriorityCaseFilterPreview,
   QueueFilter,
   QueueFilterPreview,
   RatedByFilter,
@@ -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>