@webitel/ui-sdk 24.12.102 → 24.12.115

package/package.json

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

package/src/api/clients/roles/roles.js

@@ -27,7 +27,7 @@ const preRequestHandler = (item) => {
 };
 
 const getRoleList = async (params) => {
-  const fieldsToSend = ['page', 'size', 'q', 'sort', 'fields', 'id'];
+  const fieldsToSend = ['page', 'size', 'q', 'sort', 'fields', 'ids'];
 
   const url = applyTransform(params, [
     merge(getDefaultGetParams()),

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

@@ -25,7 +25,9 @@
       @hide="hideTooltip"
       @show="showTooltip"
     >
-      <slot v-bind="{ hide: hideTooltip }" />
+      <div ref="floatingChild">
+        <slot v-bind="{ hide: hideTooltip }" />
+      </div>
     </wt-tooltip-floating>
   </div>
 </template>
@@ -39,9 +41,8 @@ import {
   shift,
   useFloating,
 } from '@floating-ui/vue';
-import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
+import { onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue';
 
-import debounce from '../../scripts/debounce.js';
 import { useTooltipTriggerSubscriptions } from './_internals/useTooltipTriggerSubscriptions.js';
 import WtTooltipFloating from './_internals/wt-tooltip-floating.vue';
 
@@ -74,8 +75,9 @@ const props = defineProps({
 
 const emit = defineEmits(['update:visible']);
 
-const activator = ref(null);
-const floating = ref(null);
+const activator = useTemplateRef('activator');
+const floating = useTemplateRef('floating');
+const floatingChild = useTemplateRef('floatingChild');
 const isVisible = ref(props.visible);
 
 const emitVisibilityChange = () => {
@@ -91,7 +93,9 @@ const showTooltip = (event = {}) => {
 };
 
 const hideTooltip = (event = {}) => {
-  if (!isVisible.value || event.usedByTooltip) return;
+  const contains = floatingChild.value?.contains(event.target);
+  if (!isVisible.value || event.usedByTooltip || contains) return;
+
   isVisible.value = false;
   emitVisibilityChange();
   removeScrollListener();

package/src/composables/useAccessControl/v2/createUserAccessControl.ts

@@ -4,16 +4,18 @@ import { useRoute } from 'vue-router';
 import { _wtUiLog } from '../../../scripts/logger';
 import type {
   CreateUserAccessControlComposableParams,
-  UseAccessControlReturn,
+  UseAccessControlReturn, UseUserAccessControlComposableOptions,
 } from './types/CreateUserAccessControl';
 
 export const createUserAccessControlComposable = (
   useUserinfoStore: CreateUserAccessControlComposableParams,
 ) => {
   const useUserAccessControl = (
-    resource?: string,
-    // options: UseUserAccessControlComposableOptions = {},
+    options?: UseUserAccessControlComposableOptions,
   ): UseAccessControlReturn => {
+    const resource = typeof options === 'string' ? options: options?.resource;
+    const useUpdateAccessAsAllMutableChecksSource = options?.useUpdateAccessAsAllMutableChecksSource;
+
     const route = useRoute();
     const object = resource || route?.meta?.WtObject;
 
@@ -31,22 +33,30 @@ export const createUserAccessControlComposable = (
     const hasReadAccess = computed(() => {
       return userinfoStore.hasReadAccess(object);
     });
-    const hasCreateAccess = computed(() => {
-      return userinfoStore.hasCreateAccess(object);
-    });
     const hasUpdateAccess = computed(() => {
       return userinfoStore.hasUpdateAccess(object);
     });
+    const hasCreateAccess = computed(() => {
+      if (useUpdateAccessAsAllMutableChecksSource) return hasUpdateAccess.value;
+
+      return userinfoStore.hasCreateAccess(object);
+    });
     const hasDeleteAccess = computed(() => {
+      if (useUpdateAccessAsAllMutableChecksSource) return hasUpdateAccess.value;
+
       return userinfoStore.hasDeleteAccess(object);
     });
 
     const hasSaveActionAccess = computed(() => {
+      if (useUpdateAccessAsAllMutableChecksSource) return hasUpdateAccess.value;
+
       if (route.params.id === 'new') return hasCreateAccess.value;
       return hasUpdateAccess.value;
     });
 
     const disableUserInput = computed(() => {
+      if (useUpdateAccessAsAllMutableChecksSource) return !hasUpdateAccess.value;
+
       if (route.params.id === 'new') return !hasCreateAccess.value;
       return !hasUpdateAccess.value;
     });

package/src/composables/useAccessControl/v2/types/CreateUserAccessControl.d.ts

@@ -6,8 +6,9 @@ import type { createUserAccessStore } from '../../../../modules/Userinfo/v2/stor
 export type CreateUserAccessControlComposableParams =
   ReturnType<createUserAccessStore>;
 
-export type UseUserAccessControlComposableOptions = {
+export type UseUserAccessControlComposableOptions = WtObject | {
   resource?: WtObject;
+  useUpdateAccessAsAllMutableChecksSource?: boolean;
 };
 
 export interface UseAccessControlReturn {

package/src/composables/useWtTable/useWtTable.js

@@ -1,24 +1,23 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 export const useWtTable = ({ headers }) => {
-  const { t } = useI18n();
-  const tableHeaders = computed(() => {
-    return headers
-      .filter((header) => header.show === undefined || header.show)
-      .map((header) => {
-        if (!header.text && header.locale) {
-          return {
-            ...header,
-            text:
-              typeof header.locale === 'string'
-                ? t(header.locale)
-                : t(...header.locale),
-          };
-        }
-        return header;
-      });
-  });
-  return {
-    tableHeaders,
-  };
+    const { t } = useI18n();
+    const tableHeaders = computed(() => {
+        return headers
+            .filter((header) => header.show === undefined || header.show)
+            .map((header) => {
+            if (!header.text && header.locale) {
+                return {
+                    ...header,
+                    text: typeof header.locale === 'string'
+                        ? t(header.locale)
+                        : t(...header.locale),
+                };
+            }
+            return header;
+        });
+    });
+    return {
+        tableHeaders,
+    };
 };

package/src/css/styleguide/placeholder/_placeholder.scss

@@ -24,7 +24,6 @@ $vendors: (':-webkit', '-moz', ':-moz', '-ms');
 @mixin wt-placeholder($style: '') {
   @each $vendor in $vendors {
     @include optional-at-root(':#{$vendor}-input-placeholder') {
-      font: inherit;
       transition: var(--transition);
 
       @if ($style == 'error') {
@@ -46,7 +45,6 @@ $vendors: (':-webkit', '-moz', ':-moz', '-ms');
 */
 %wt-placeholder {
   transition: var(--transition);
-  font: inherit;
   color: var(--wt-text-field-placeholder-color);
 }
 

package/src/enums/index.js

@@ -1,16 +1,16 @@
-import AbstractUserStatus from './AbstractUserStatus/AbstractUserStatus.enum';
-import AgentStatus from './AgentStatus/AgentStatus.enum';
-import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum';
+import AbstractUserStatus from './AbstractUserStatus/AbstractUserStatus.enum.js';
+import AgentStatus from './AgentStatus/AgentStatus.enum.js';
+import ChatGatewayProvider from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
 import { ComponentSize } from './ComponentSize/ComponentSize';
 import { CrudAction } from './CrudAction/CrudAction';
-import IconAction from './IconAction/IconAction.enum';
-import QueueType from './QueueType/QueueType.enum';
-import TypesExportedSettings from './TypesExportedSettings/TypesExportedSettings.enum';
+import IconAction from './IconAction/IconAction.enum.js';
+import QueueType from './QueueType/QueueType.enum.js';
+import TypesExportedSettings from './TypesExportedSettings/TypesExportedSettings.enum.js';
 import { AdminSections } from './WebitelApplications/AdminSections';
 import { AuditorSections } from './WebitelApplications/AuditorSections';
 import { CrmSections } from './WebitelApplications/CrmSections';
 import { SupervisorSections } from './WebitelApplications/SupervisorSections';
-import WebitelApplications from './WebitelApplications/WebitelApplications.enum';
+import WebitelApplications from './WebitelApplications/WebitelApplications.enum.js';
 import { WtApplication } from './WebitelApplications/WtApplication';
 import { WtObject } from './WtObject/WtObject';
 export { AbstractUserStatus, AdminSections, AgentStatus, AuditorSections, ChatGatewayProvider, ComponentSize, CrmSections, CrudAction, IconAction, QueueType, SupervisorSections, TypesExportedSettings, WebitelApplications, WtApplication, WtObject, };

package/src/locale/en/en.js

@@ -147,7 +147,19 @@ export default {
     role: 'Role | Roles',
     user: 'User | Users',
     calendar: 'Calendar | Calendars',
+    direction: 'Direction',
+    gateway: 'Gateway | Gateways',
+    hangupCause: 'Hangup cause',
+    hasOption: 'Has option',
+    hasRecording: 'Has recording',
+    amdResult: 'AMD result',
+    evaluation: 'Evaluation',
+    ratedBy: 'Rated by',
+    talkDuration: 'Talk duration',
+    totalDuration: 'Total duration',
+    transcription: 'Transcription',
     queue: {
+      queue: 'Queue | Queues',
       type: {
         [QueueType.INBOUND_QUEUE]: 'Inbound queue',
         [QueueType.OFFLINE_QUEUE]: 'Offline queue',
@@ -161,6 +173,7 @@ export default {
       },
     },
     agent: {
+      agent: 'Agent | Agents',
       status: {
         [AgentStatus.Online]: 'Online',
         [AgentStatus.Pause]: 'Pause',
@@ -458,9 +471,76 @@ export default {
       filterValue: ({ linked }) => {
         return linked('vocabulary.values');
       },
+      filterValueFrom: ({ linked }) => {
+        const from = linked('reusable.from').toLowerCase();
+        return `${linked('vocabulary.values')} ${from}`;
+      },
       filterLabel: ({ linked }) => {
         return linked('vocabulary.labels');
       },
+      agent: ({ linked }) => {
+        return linked('objects.agent.agent');
+      },
+      amdResult: ({ linked }) => {
+        return linked('objects.amdResult');
+      },
+      contact: ({ linked }) => {
+        return linked('vocabulary.contact');
+      },
+      createdAtFrom: ({ linked }) => {
+        return linked('reusable.from');
+      },
+      createdAtTo: ({ linked }) => {
+        return linked('reusable.to');
+      },
+      direction: ({ linked }) => {
+        return linked('objects.direction');
+      },
+      rated: ({ linked }) => {
+        return linked('objects.evaluation');
+      },
+      gateway: ({ linked }) => {
+        return linked('objects.gateway');
+      },
+      grantee: ({ linked }) => {
+        return linked('objects.grantee');
+      },
+      cause: ({ linked }) => {
+        return linked('objects.hangupCause');
+      },
+      queue: ({ linked }) => {
+        return linked('objects.queue.queue');
+      },
+      ratedBy: ({ linked }) => {
+        return linked('objects.ratedBy');
+      },
+      hasFile: ({ linked }) => {
+        return linked('objects.hasRecording');
+      },
+      score: ({ linked }) => {
+        return linked('webitelUI.auditForm.score');
+      },
+      tags: ({ linked }) => {
+        return linked('vocabulary.tag');
+      },
+      talkSec: ({ linked }) => {
+        return linked('objects.talkDuration');
+      },
+      team: ({ linked }) => {
+        return linked('objects.team');
+      },
+      duration: ({ linked }) => {
+        return linked('objects.totalDuration');
+      },
+      hasTranscription: ({ linked }) => {
+        return linked('objects.transcription');
+      },
+      user: ({ linked }) => {
+        return linked('objects.user');
+      },
+      variable: ({ linked }) => {
+        return linked('vocabulary.variables');
+      },
     },
   },
   errorNotifications: {

package/src/locale/ru/ru.js

@@ -145,7 +145,19 @@ export default {
     user: 'Пользователь | Пользователи',
     role: 'Роль | Роли',
     calendar: 'Календарь | Календари',
+    direction: 'Направление',
+    gateway: 'Шлюз | Шлюзы',
+    hangupCause: 'Причина окончания',
+    hasOption: 'Has option',
+    hasRecording: 'Запись разговора',
+    amdResult: 'AMD результат',
+    evaluation: 'Оценивание',
+    ratedBy: 'Оценено кем',
+    talkDuration: 'Длительность разговора',
+    totalDuration: 'Общая длительность',
+    transcription: 'Транскрипция',
     queue: {
+      queue: 'Очередь | Очереди',
       type: {
         [QueueType.INBOUND_QUEUE]: 'Входящая очередь',
         [QueueType.OFFLINE_QUEUE]: 'Оффлайн очередь',
@@ -159,6 +171,7 @@ export default {
       },
     },
     agent: {
+      agent: 'Оператор | Операторы',
       status: {
         [AgentStatus.Online]: 'Онлайн',
         [AgentStatus.Pause]: 'Пауза',
@@ -442,6 +455,90 @@ export default {
       label: 'Что-то пошло не так. Пожалуйста, попробуйте еще раз',
       exportToJson: 'Экспортировать в JSON',
     },
+    filters: {
+      addFilter: ({ linked }) => {
+        return `${linked('reusable.add')} ${linked(
+          'reusable.filter',
+        ).toLowerCase()}`;
+      },
+      filterName: ({ linked }) => {
+        // because filter select has a 'column' label now
+        return linked('vocabulary.column');
+      },
+      filterValue: ({ linked }) => {
+        return linked('vocabulary.values');
+      },
+      filterValueFrom: ({ linked }) => {
+        const from = linked('reusable.from').toLowerCase();
+        return `${linked('vocabulary.values')} ${from}`;
+      },
+      filterLabel: ({ linked }) => {
+        return linked('vocabulary.labels');
+      },
+      agent: ({ linked }) => {
+        return linked('objects.agent.agent');
+      },
+      amdResult: ({ linked }) => {
+        return linked('objects.amdResult');
+      },
+      contact: ({ linked }) => {
+        return linked('vocabulary.contact');
+      },
+      createdAtFrom: ({ linked }) => {
+        return linked('reusable.from');
+      },
+      createdAtTo: ({ linked }) => {
+        return linked('reusable.to');
+      },
+      direction: ({ linked }) => {
+        return linked('objects.direction');
+      },
+      rated: ({ linked }) => {
+        return linked('objects.evaluation');
+      },
+      gateway: ({ linked }) => {
+        return linked('objects.gateway');
+      },
+      grantee: ({ linked }) => {
+        return linked('objects.grantee');
+      },
+      cause: ({ linked }) => {
+        return linked('objects.hangupCause');
+      },
+      hasOption: ({ linked }) => {
+        return linked('objects.hasOption'); ////
+      },
+      queue: ({ linked }) => {
+        return linked('objects.queue.queue');
+      },
+      hasFile: ({ linked }) => {
+        return linked('objects.hasRecording');
+      },
+      score: ({ linked }) => {
+        return linked('webitelUI.auditForm.score');
+      },
+      tags: ({ linked }) => {
+        return linked('vocabulary.tag');
+      },
+      talkSec: ({ linked }) => {
+        return linked('objects.talkDuration');
+      },
+      team: ({ linked }) => {
+        return linked('objects.team');
+      },
+      duration: ({ linked }) => {
+        return linked('objects.totalDuration');
+      },
+      hasTranscription: ({ linked }) => {
+        return linked('objects.transcription');
+      },
+      user: ({ linked }) => {
+        return linked('objects.user');
+      },
+      variable: ({ linked }) => {
+        return linked('vocabulary.variables');
+      },
+    },
   },
   errorNotifications: {
     chatHistoryApi: 'Произошла ошибка загрузки истории чата',

package/src/locale/ua/ua.js

@@ -145,7 +145,19 @@ export default {
     user: 'Користувач | Користувачі',
     role: 'Роль | Ролі',
     calendar: 'Календар | Календарі',
+    direction: 'Напрямок',
+    gateway: 'Шлюз | Шлюзи',
+    hangupCause: 'Причина завершення',
+    hasOption: 'Has option',
+    hasRecording: 'Запис розмови',
+    amdResult: 'AMD результат',
+    evaluation: 'Оцінювання',
+    ratedBy: 'Оцінено ким',
+    talkDuration: 'Тривалість розмови',
+    totalDuration: 'Загальна тривалість',
+    transcription: 'Транскрипція',
     queue: {
+      queue: 'Черга | Черги',
       type: {
         [QueueType.INBOUND_QUEUE]: 'Вхідна черга',
         [QueueType.OFFLINE_QUEUE]: 'Оффлайн черга',
@@ -159,6 +171,7 @@ export default {
       },
     },
     agent: {
+      agent: 'Оператор | Оператори',
       status: {
         [AgentStatus.Online]: 'Онлайн',
         [AgentStatus.Pause]: 'Пауза',
@@ -442,6 +455,90 @@ export default {
       label: 'Щось пішло не так. Будь ласка, спробуйте ще раз',
       exportToJson: 'Експортувати в JSON',
     },
+    filters: {
+      addFilter: ({ linked }) => {
+        return `${linked('reusable.add')} ${linked(
+          'reusable.filter',
+        ).toLowerCase()}`;
+      },
+      filterName: ({ linked }) => {
+        // because filter select has a 'column' label now
+        return linked('vocabulary.column');
+      },
+      filterValue: ({ linked }) => {
+        return linked('vocabulary.values');
+      },
+      filterValueFrom: ({ linked }) => {
+        const from = linked('reusable.from').toLowerCase();
+        return `${linked('vocabulary.values')} ${from}`;
+      },
+      filterLabel: ({ linked }) => {
+        return linked('vocabulary.labels');
+      },
+      agent: ({ linked }) => {
+        return linked('objects.agent.agent');
+      },
+      amdResult: ({ linked }) => {
+        return linked('objects.amdResult');
+      },
+      contact: ({ linked }) => {
+        return linked('vocabulary.contact');
+      },
+      createdAtFrom: ({ linked }) => {
+        return linked('reusable.from');
+      },
+      createdAtTo: ({ linked }) => {
+        return linked('reusable.to');
+      },
+      direction: ({ linked }) => {
+        return linked('objects.direction');
+      },
+      rated: ({ linked }) => {
+        return linked('objects.evaluation');
+      },
+      gateway: ({ linked }) => {
+        return linked('objects.gateway');
+      },
+      grantee: ({ linked }) => {
+        return linked('objects.grantee');
+      },
+      cause: ({ linked }) => {
+        return linked('objects.hangupCause');
+      },
+      hasOption: ({ linked }) => {
+        return linked('objects.hasOption'); ////
+      },
+      queue: ({ linked }) => {
+        return linked('objects.queue.queue');
+      },
+      hasFile: ({ linked }) => {
+        return linked('objects.hasRecording');
+      },
+      score: ({ linked }) => {
+        return linked('webitelUI.auditForm.score');
+      },
+      tags: ({ linked }) => {
+        return linked('vocabulary.tag');
+      },
+      talkSec: ({ linked }) => {
+        return linked('objects.talkDuration');
+      },
+      team: ({ linked }) => {
+        return linked('objects.team');
+      },
+      duration: ({ linked }) => {
+        return linked('objects.totalDuration');
+      },
+      hasTranscription: ({ linked }) => {
+        return linked('objects.transcription');
+      },
+      user: ({ linked }) => {
+        return linked('objects.user');
+      },
+      variable: ({ linked }) => {
+        return linked('vocabulary.variables');
+      },
+    },
   },
   errorNotifications: {
     chatHistoryApi: 'Сталася помилка завантаження історії чату',

package/src/modules/Filters/v2/filters/classes/FiltersManager.ts

@@ -128,9 +128,9 @@ class FiltersManager implements IFiltersManager {
     include,
     exclude,
   }: {
-    include: FilterName[];
-    exclude: FilterName[];
-  }): IFilter[] {
+    include?: FilterName[];
+    exclude?: FilterName[];
+  } = {}): IFilter[] {
     const useInclude = !isEmpty(include);
     const useExclude = !isEmpty(exclude) && !useInclude;
 

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

@@ -2,7 +2,7 @@
   <wt-input
     :value="model"
     :label="t('webitelUI.filters.filterLabel')"
-    :v="v$"
+    :v="v$.model"
     @input="model = $event"
   />
 </template>
@@ -13,7 +13,7 @@ import { maxLength } from '@vuelidate/validators';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import WtInput from '../../../../../../../components/wt-input/wt-input.vue';
+import WtInput from '../../../../../../components/wt-input/wt-input.vue';
 
 const MAX_STRING_LENGTH = 50;
 

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

@@ -5,8 +5,10 @@
       :label="t('webitelUI.filters.filterName')"
       :options="options"
       :value="filterName"
-      use-value-from-options-by-prop="id"
-      @input="filterName = $event"
+      :clearable="false"
+      track-by="value"
+      use-value-from-options-by-prop="value"
+      @input="onFilterNameUpdate($event)"
     />
 
     <slot
@@ -22,7 +24,7 @@
 
     <dynamic-filter-config-form-label
       :value="filterLabel"
-      @update:value="onLabelValueUpdate"
+      @update:model-value="onLabelValueUpdate"
       @update:invalid="(v) => (invalid = v)"
     />
 
@@ -51,13 +53,9 @@ import deepcopy from 'deep-copy';
 import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import WtButton from '../../../../../../../components/wt-button/wt-button.vue';
-import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
-import type {
-  FilterInitParams,
-  FilterName,
-  IFilter,
-} from '../../../types/Filter';
+import WtButton from '../../../../../../components/wt-button/wt-button.vue';
+import WtSelect from '../../../../../../components/wt-select/wt-select.vue';
+import type { FilterInitParams, FilterName, IFilter } from '../../types/Filter';
 import DynamicFilterConfigFormLabel from './dynamic-filter-config-form-label.vue';
 
 interface FilterNameSelectRepresentation {
@@ -100,6 +98,11 @@ const onLabelValueUpdate = (val: string) => {
   touchedLabel.value = true;
 };
 
+const onFilterNameUpdate = (val: string) => {
+  filterName.value = val;
+  filterValue.value = null;
+};
+
 const submit = () => {
   emit('submit', {
     name: filterName.value,