@webitel/ui-sdk 24.12.120 → 24.12.122

package/src/locale/ru/ru.js

@@ -80,6 +80,8 @@ export default {
     read: 'Читать',
     create: 'Создать',
     draggable: 'Перетащить',
+    unassigned: 'Неназначенные',
+    showUnassigned: 'Показать неназначенные',
   },
   vocabulary: {
     apply: 'Применить',
@@ -151,11 +153,11 @@ export default {
     hasOption: 'Has option',
     hasRecording: 'Запись разговора',
     amdResult: 'AMD результат',
-    evaluation: 'Оценивание',
     ratedBy: 'Оценено кем',
     talkDuration: 'Длительность разговора',
     totalDuration: 'Общая длительность',
     transcription: 'Транскрипция',
+    attachment: 'Вложение | Вложения',
     queue: {
       queue: 'Очередь | Очереди',
       type: {
@@ -219,6 +221,24 @@ export default {
       [ChannelType.Job]: 'Задача',
     },
   },
+  cases: {
+    status: 'Статус',
+    source: 'Источник',
+    author: 'Автор',
+    reporter: 'Инициатор',
+    impacted: 'Влияет на',
+    assignee: 'Исполнитель',
+    group: 'Группа исполнителей',
+    reason: 'Причина | Причины',
+    rating: 'Оценка',
+    service: 'Сервисы | Сервисы',
+    appliedSLA: 'Примененный SLA',
+    appliedCondition: 'Примененное условие',
+    reactionTime: 'Плановое время реакции',
+    resolutionTime: 'Плановое время решения',
+    actualReactionTime: 'Фактическое время реакции',
+    actualResolutionTime: 'Фактическое время решения',
+  },
   calls: {
     direction: {
       [CallDirection.Inbound]: 'Входящий | Входящие',
@@ -475,67 +495,121 @@ export default {
       filterLabel: ({ linked }) => {
         return linked('vocabulary.labels');
       },
-      agent: ({ linked }) => {
+      actualReactionTime: ({ linked }) => {
+        return linked('cases.actualReactionTime');
+      },
+      actualResolutionTime: ({ linked }) => {
+        return linked('cases.actualResolutionTime');
+      },
+      agent : ({ linked }) => {
         return linked('objects.agent.agent');
       },
-      amdResult: ({ linked }) => {
+      amdResult : ({ linked }) => {
         return linked('objects.amdResult');
       },
-      contact: ({ linked }) => {
+      assignee: ({ linked }) => {
+        return linked('cases.assignee');
+      },
+      author: ({ linked }) => {
+        return linked('cases.author');
+      },
+      cause : ({ linked }) => {
+        return linked('objects.hangupCause');
+      },
+      closeReasonGroupsCase: ({ linked }) => {
+        return linked('cases.reason');
+      },
+      contact : ({ linked }) => {
         return linked('vocabulary.contact');
       },
-      createdAtFrom: ({ linked }) => {
+      contactGroup: ({ linked }) => {
+        return linked('cases.group');
+      },
+      createdAtFrom : ({ linked }) => {
         return linked('reusable.from');
       },
-      createdAtTo: ({ linked }) => {
+      createdAtTo : ({ linked }) => {
         return linked('reusable.to');
       },
-      direction: ({ linked }) => {
-        return linked('objects.direction');
+      direction : ({ linked }) => {
+        return linked('calls.direction');
       },
-      rated: ({ linked }) => {
-        return linked('objects.evaluation');
-      },
-      gateway: ({ linked }) => {
-        return linked('objects.gateway');
+      gateway : ({ linked }) => {
+        return linked('vocabulary.gateway');
       },
-      grantee: ({ linked }) => {
+      grantee : ({ linked }) => {
         return linked('objects.grantee');
       },
-      cause: ({ linked }) => {
-        return linked('objects.hangupCause');
+      hasAttachment: ({ linked }) => {
+        return linked('objects.attachment');
+      },
+      hasFile: ({ linked }) => {
+        return linked('objects.hasRecording');
+      },
+      hasTranscription: ({ linked }) => {
+        return linked('objects.transcription');
       },
-      hasOption: ({ linked }) => {
-        return linked('objects.hasOption'); ////
+      impacted: ({ linked }) => {
+        return linked('cases.impacted');
       },
-      queue: ({ linked }) => {
+      priorityCase: ({ linked }) => {
+        return linked('vocabulary.priority');
+      },
+      queue : ({ linked }) => {
         return linked('objects.queue.queue');
       },
-      hasFile: ({ linked }) => {
-        return linked('objects.hasRecording');
+      rated: ({ linked }) => {
+        return linked('objects.rated');
+      },
+      ratedBy : ({ linked }) => {
+        return linked('objects.ratedBy');
+      },
+      rating: ({ linked }) => {
+        return linked('cases.rating');
+      },
+      reactionTime: ({ linked }) => {
+        return linked('cases.reactionTime');
+      },
+      reporter: ({ linked }) => {
+        return linked('cases.reporter');
+      },
+      resolutionTime: ({ linked }) => {
+        return linked('cases.resolutionTime');
       },
-      score: ({ linked }) => {
+      score : ({ linked }) => {
         return linked('webitelUI.auditForm.score');
       },
-      tags: ({ linked }) => {
+      serviceCase: ({ linked }) => {
+        return linked('cases.service');
+      },
+      sla: ({ linked }) => {
+        return linked('cases.appliedSLA');
+      },
+      slaCondition: ({ linked }) => {
+        return linked('cases.appliedCondition');
+      },
+      sourceCase: ({ linked }) => {
+        return linked('cases.source');
+      },
+      statusCase: ({ linked }) => {
+        return linked('cases.status');
+      },
+      tag : ({ linked }) => {
         return linked('vocabulary.tag');
       },
-      talkSec: ({ linked }) => {
+      talkDuration: ({ linked }) => {
         return linked('objects.talkDuration');
       },
-      team: ({ linked }) => {
+      team : ({ linked }) => {
         return linked('objects.team');
       },
-      duration: ({ linked }) => {
+      totalDuration: ({ linked }) => {
         return linked('objects.totalDuration');
       },
-      hasTranscription: ({ linked }) => {
-        return linked('objects.transcription');
-      },
-      user: ({ linked }) => {
+      user : ({ linked }) => {
         return linked('objects.user');
       },
-      variable: ({ linked }) => {
+      variable : ({ linked }) => {
         return linked('vocabulary.variables');
       },
     },

package/src/locale/ua/ua.js

@@ -81,6 +81,8 @@ export default {
     read: 'Читати',
     create: 'Створити',
     draggable: 'Перетягнути',
+    unassigned: 'Непризначені',
+    showUnassigned: 'Показати непризначені',
   },
   vocabulary: {
     apply: 'Застосувати',
@@ -151,11 +153,11 @@ export default {
     hasOption: 'Has option',
     hasRecording: 'Запис розмови',
     amdResult: 'AMD результат',
-    evaluation: 'Оцінювання',
     ratedBy: 'Оцінено ким',
     talkDuration: 'Тривалість розмови',
     totalDuration: 'Загальна тривалість',
     transcription: 'Транскрипція',
+    attachment: 'Додаток | Додатки',
     queue: {
       queue: 'Черга | Черги',
       type: {
@@ -225,6 +227,24 @@ export default {
       [CallDirection.Outbound]: 'Вихідний | Вихідні',
     },
   },
+  cases: {
+    status: 'Статус',
+    source: 'Джерело',
+    author: 'Автор',
+    reporter: 'Ініціатор',
+    impacted: 'Впливає на',
+    assignee: 'Виконавець',
+    group: 'Група виконавців',
+    reason: 'Причина | Причини',
+    rating: 'Оцінка',
+    service: 'Cервіси | Cервіси',
+    appliedSLA: 'Застосований SLA',
+    appliedCondition: 'Застосована умова',
+    reactionTime: 'Плановий час реакції',
+    resolutionTime: 'Плановий час вирішення',
+    actualReactionTime: 'Фактичний час реакції',
+    actualResolutionTime: 'Фактичний час вирішення',
+  },
   // describes Webitel FRONTEND applications + their navs
   WebitelApplications: {
     [WebitelApplications.AGENT]: { name: 'Agent Workspace' },
@@ -475,67 +495,121 @@ export default {
       filterLabel: ({ linked }) => {
         return linked('vocabulary.labels');
       },
-      agent: ({ linked }) => {
+      actualReactionTime: ({ linked }) => {
+        return linked('cases.actualReactionTime');
+      },
+      actualResolutionTime: ({ linked }) => {
+        return linked('cases.actualResolutionTime');
+      },
+      agent : ({ linked }) => {
         return linked('objects.agent.agent');
       },
-      amdResult: ({ linked }) => {
+      amdResult : ({ linked }) => {
         return linked('objects.amdResult');
       },
-      contact: ({ linked }) => {
+      assignee: ({ linked }) => {
+        return linked('cases.assignee');
+      },
+      author: ({ linked }) => {
+        return linked('cases.author');
+      },
+      cause : ({ linked }) => {
+        return linked('objects.hangupCause');
+      },
+      closeReasonGroupsCase: ({ linked }) => {
+        return linked('cases.reason');
+      },
+      contact : ({ linked }) => {
         return linked('vocabulary.contact');
       },
-      createdAtFrom: ({ linked }) => {
+      contactGroup: ({ linked }) => {
+        return linked('cases.group');
+      },
+      createdAtFrom : ({ linked }) => {
         return linked('reusable.from');
       },
-      createdAtTo: ({ linked }) => {
+      createdAtTo : ({ linked }) => {
         return linked('reusable.to');
       },
-      direction: ({ linked }) => {
-        return linked('objects.direction');
+      direction : ({ linked }) => {
+        return linked('calls.direction');
       },
-      rated: ({ linked }) => {
-        return linked('objects.evaluation');
-      },
-      gateway: ({ linked }) => {
-        return linked('objects.gateway');
+      gateway : ({ linked }) => {
+        return linked('vocabulary.gateway');
       },
-      grantee: ({ linked }) => {
+      grantee : ({ linked }) => {
         return linked('objects.grantee');
       },
-      cause: ({ linked }) => {
-        return linked('objects.hangupCause');
+      hasAttachment: ({ linked }) => {
+        return linked('objects.attachment');
+      },
+      hasFile: ({ linked }) => {
+        return linked('objects.hasRecording');
+      },
+      hasTranscription: ({ linked }) => {
+        return linked('objects.transcription');
       },
-      hasOption: ({ linked }) => {
-        return linked('objects.hasOption'); ////
+      impacted: ({ linked }) => {
+        return linked('cases.impacted');
       },
-      queue: ({ linked }) => {
+      priorityCase: ({ linked }) => {
+        return linked('vocabulary.priority');
+      },
+      queue : ({ linked }) => {
         return linked('objects.queue.queue');
       },
-      hasFile: ({ linked }) => {
-        return linked('objects.hasRecording');
+      rated: ({ linked }) => {
+        return linked('objects.rated');
+      },
+      ratedBy : ({ linked }) => {
+        return linked('objects.ratedBy');
+      },
+      rating: ({ linked }) => {
+        return linked('cases.rating');
+      },
+      reactionTime: ({ linked }) => {
+        return linked('cases.reactionTime');
+      },
+      reporter: ({ linked }) => {
+        return linked('cases.reporter');
+      },
+      resolutionTime: ({ linked }) => {
+        return linked('cases.resolutionTime');
       },
-      score: ({ linked }) => {
+      score : ({ linked }) => {
         return linked('webitelUI.auditForm.score');
       },
-      tags: ({ linked }) => {
+      serviceCase: ({ linked }) => {
+        return linked('cases.service');
+      },
+      sla: ({ linked }) => {
+        return linked('cases.appliedSLA');
+      },
+      slaCondition: ({ linked }) => {
+        return linked('cases.appliedCondition');
+      },
+      sourceCase: ({ linked }) => {
+        return linked('cases.source');
+      },
+      statusCase: ({ linked }) => {
+        return linked('cases.status');
+      },
+      tag : ({ linked }) => {
         return linked('vocabulary.tag');
       },
-      talkSec: ({ linked }) => {
+      talkDuration: ({ linked }) => {
         return linked('objects.talkDuration');
       },
-      team: ({ linked }) => {
+      team : ({ linked }) => {
         return linked('objects.team');
       },
-      duration: ({ linked }) => {
+      totalDuration: ({ linked }) => {
         return linked('objects.totalDuration');
       },
-      hasTranscription: ({ linked }) => {
-        return linked('objects.transcription');
-      },
-      user: ({ linked }) => {
+      user : ({ linked }) => {
         return linked('objects.user');
       },
-      variable: ({ linked }) => {
+      variable : ({ linked }) => {
         return linked('vocabulary.variables');
       },
     },

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

@@ -1,11 +1,11 @@
 <template>
   <form class="dynamic-filter-config-form">
     <wt-select
+      :clearable="false"
       :disabled="editMode"
       :label="t('webitelUI.filters.filterName')"
       :options="options"
       :value="filterName"
-      :clearable="false"
       track-by="value"
       use-value-from-options-by-prop="value"
       @input="onFilterNameUpdate($event)"
@@ -101,6 +101,7 @@ const onLabelValueUpdate = (val: string) => {
 const onFilterNameUpdate = (val: string) => {
   filterName.value = val;
   filterValue.value = null;
+  filterLabel.value = t(`webitelUI.filters.${val}`);
 };
 
 const submit = () => {
@@ -119,7 +120,7 @@ if (props.options) {
       filterValue.value = null;
 
       if (!touchedLabel.value) {
-        filterLabel.value = filterName.value;
+        filterLabel.value = t(`webitelUI.filters.${filterName.value}`);
       }
     },
     { immediate: true },

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

@@ -0,0 +1,69 @@
+<template>
+  <wt-search-bar
+    :placeholder="t('reusable.search')"
+    :search-mode="props.searchMode"
+    :search-mode-options="searchModeOptions"
+    :value="model"
+    :v="v$.model"
+    @input="model = $event"
+    @search="handleSearch"
+    @update:search-mode="emit('update:search-mode', $event.value)"
+  >
+    <template
+      v-if="props.showTextSearchIcon"
+      #search-icon
+    >
+      <wt-icon icon="stt-search" />
+    </template>
+  </wt-search-bar>
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtSearchBar from '../../../../../components/wt-search-bar/wt-search-bar.vue';
+
+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 v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+
+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 lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/_shared/date-time-filter/date-time-filter-value-field.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="date-time-filter-value-field">
+    <wt-datepicker
+      :label="`${t('webitelUI.filters.createdAtFrom')}:`"
+      :value="model?.from"
+      class="date-time-filter-value-field__picker"
+      mode="datetime"
+      @input="handleInput('from', $event)"
+    />
+
+    <wt-datepicker
+      :label="`${t('webitelUI.filters.createdAtTo')}:`"
+      :value="model?.to"
+      class="date-time-filter-value-field__picker"
+      mode="datetime"
+      @input="handleInput('to', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {endOfToday, startOfToday} from 'date-fns';
+import {useI18n} from 'vue-i18n';
+import {onMounted} from 'vue';
+
+type ModelValue = {
+  from: number;
+  to: number;
+};
+
+const model = defineModel<ModelValue>();
+const {t} = useI18n();
+
+const handleInput = (key: keyof ModelValue, value: number) => {
+  model.value = { ...model.value, [key]: value};
+};
+
+const initModel = () => {
+  if (!model.value) {
+    model.value = {from: startOfToday().getTime(), to: endOfToday().getTime()};
+  }
+};
+
+onMounted(() => initModel());
+</script>
+
+<style lang="scss" scoped>
+.date-time-filter-value-field {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--spacing-xs);
+}
+</style>

package/src/modules/Filters/v2/filters/components/values/actual-reaction-time/actual-reaction-time-filter-value-field.vue

@@ -0,0 +1,18 @@
+<template>
+  <date-time-filter-value-field
+    :model-value="model"
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import DateTimeFilterValueField from '../_shared/date-time-filter/date-time-filter-value-field.vue';
+
+type ModelValue = {
+  from: number;
+  to: number;
+};
+const model = defineModel<ModelValue>();
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/actual-reaction-time/actual-reaction-time-filter-value-preview.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="actual-reaction-time-filter-value-preview">
+    <div v-if="props.value.from">
+      <p class="actual-reaction-time-filter-value-preview__title">
+        {{t('reusable.from')}}
+      </p>
+
+      <span>{{convertTimestampToDate(props.value.from)}}</span>
+    </div>
+
+    <div v-if="props.value.to">
+      <p class="actual-reaction-time-filter-value-preview__title">
+        {{t('reusable.to')}}
+      </p>
+
+      <span>{{convertTimestampToDate(props.value.to)}}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useI18n} from "vue-i18n";
+import { format } from "date-fns";
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const { t } = useI18n();
+
+function convertTimestampToDate(value) {
+  return format(new Date(value), 'dd.MM.yyyy HH:mm');
+}
+</script>
+
+<style lang="scss" scoped>
+.actual-reaction-time-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/modules/Filters/v2/filters/components/values/actual-resolution-time/actual-resolution-time-filter-value-field.vue

@@ -0,0 +1,18 @@
+<template>
+  <date-time-filter-value-field
+    :model-value="model"
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import DateTimeFilterValueField from '../_shared/date-time-filter/date-time-filter-value-field.vue';
+
+type ModelValue = {
+  from: number;
+  to: number;
+};
+const model = defineModel<ModelValue>();
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/actual-resolution-time/actual-resolution-time-filter-value-preview.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="actual-resolution-time-filter-value-preview">
+    <div v-if="props.value.from">
+      <p class="actual-resolution-time-filter-value-preview__title">
+        {{t('reusable.from')}}
+      </p>
+
+      <span>{{convertTimestampToDate(props.value.from)}}</span>
+    </div>
+
+    <div v-if="props.value.to">
+      <p class="actual-resolution-time-filter-value-preview__title">
+        {{t('reusable.to')}}
+      </p>
+
+      <span>{{convertTimestampToDate(props.value.to)}}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useI18n} from "vue-i18n";
+import {format} from "date-fns";
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const { t } = useI18n();
+
+function convertTimestampToDate(value) {
+  return format(new Date(value), 'dd.MM.yyyy HH:mm');
+}
+</script>
+
+<style lang="scss" scoped>
+.actual-resolution-time-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>