@webitel/ui-sdk 25.4.37 → 25.4.38

package/src/enums/WebitelApplications/CrmSections.ts

@@ -1,17 +1,17 @@
 export const CrmSections = {
-    Contacts: 'contacts',
-    Cases: 'cases',
+  Contacts: 'contacts',
+  Cases: 'cases',
 
-    // CONFIGURATION - LOOKUPS
-    Slas: 'slas',
-    ServiceCatalogs: 'service-catalogs',
-    Priorities: 'priorities',
-    Statuses: 'statuses',
-    Sources: 'sources',
-    CloseReasonGroups: 'close-reason-groups',
-    ContactGroups: 'contact-groups',
-    CaseSources: 'case-sources',
-    CustomLookups: 'custom-lookups',
+  // CONFIGURATION - LOOKUPS
+  Slas: 'slas',
+  ServiceCatalogs: 'service-catalogs',
+  Priorities: 'priorities',
+  Statuses: 'statuses',
+  Sources: 'sources',
+  CloseReasonGroups: 'close-reason-groups',
+  ContactGroups: 'contact-groups',
+  CaseSources: 'case-sources',
+  CustomLookups: 'custom-lookups',
 } as const;
 
-export type CrmSections = typeof CrmSections[keyof typeof CrmSections];
+export type CrmSections = (typeof CrmSections)[keyof typeof CrmSections];

package/src/enums/WebitelApplications/SupervisorSections.js

@@ -1,5 +1,5 @@
 export const SupervisorSections = {
-    Queues: 'queues',
-    Agents: 'agents',
-    ActiveCalls: 'activeCalls',
+  Queues: 'queues',
+  Agents: 'agents',
+  ActiveCalls: 'activeCalls',
 };

package/src/enums/WebitelApplications/WtApplication.js

@@ -1,9 +1,9 @@
 export const WtApplication = {
-    Admin: 'admin',
-    Agent: 'agent',
-    Supervisor: 'supervisor',
-    History: 'history',
-    Audit: 'audit',
-    Analytics: 'grafana',
-    Crm: 'crm',
+  Admin: 'admin',
+  Agent: 'agent',
+  Supervisor: 'supervisor',
+  History: 'history',
+  Audit: 'audit',
+  Analytics: 'grafana',
+  Crm: 'crm',
 };

package/src/enums/index.js

@@ -13,4 +13,20 @@ import { SupervisorSections } from './WebitelApplications/SupervisorSections';
 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, };
+export {
+  AbstractUserStatus,
+  AdminSections,
+  AgentStatus,
+  AuditorSections,
+  ChatGatewayProvider,
+  ComponentSize,
+  CrmSections,
+  CrudAction,
+  IconAction,
+  QueueType,
+  SupervisorSections,
+  TypesExportedSettings,
+  WebitelApplications,
+  WtApplication,
+  WtObject,
+};

package/src/locale/ru/ru.js

@@ -490,7 +490,8 @@ export default {
       exportToJson: 'Экспортировать в JSON',
     },
     filters: {
-      predefinedLabels: {  /* https://webitel.atlassian.net/browse/WTEL-6308?focusedCommentId=657415 */
+      predefinedLabels: {
+        /* https://webitel.atlassian.net/browse/WTEL-6308?focusedCommentId=657415 */
         createdAt: {
           startOfToday: 'С начала дня',
           startOfMonth: 'С начала этого месяца',

package/src/locale/ua/ua.js

@@ -490,7 +490,8 @@ export default {
       exportToJson: 'Експортувати в JSON',
     },
     filters: {
-      predefinedLabels: { /* https://webitel.atlassian.net/browse/WTEL-6308?focusedCommentId=657415 */
+      predefinedLabels: {
+        /* https://webitel.atlassian.net/browse/WTEL-6308?focusedCommentId=657415 */
         createdAt: {
           startOfToday: 'Від початку дня',
           startOfMonth: 'Від початку місяця',

package/src/mixins/validationMixin/useValidation.js

@@ -62,7 +62,7 @@ export function useValidation({
         validationText =
           v.value.regex?.$message ||
           `${t('validation.isRegExpMatched')} ${v.value.regex?.$params?.regex}`;
-      else if (v.value.nameAlreadyInUse.$invalid) {
+      else if (v.value.nameAlreadyInUse?.$invalid) {
         validationText = t('validation.nameAlreadyInUse');
       }
     }
@@ -73,6 +73,8 @@ export function useValidation({
       }
       return validationText;
     }
+
+    return validationText;
   });
 
   return {

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-pause-cause-popup.vue

@@ -106,8 +106,8 @@ function setPause() {
 <style lang="scss" scoped>
 .wt-cc-pause-cause-popup-option {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 
   &:not(:last-child) {
     margin-bottom: var(--spacing-sm);

package/src/modules/AgentStatusSelect/components/_internals/wt-cc-status-select-error-popup.vue

@@ -47,9 +47,9 @@ function close() {
 <style lang="scss" scoped>
 .wt-cc-status-select-error-popup__main-wrapper {
   display: flex;
-  align-items: center;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
   gap: var(--spacing-sm);
 }
 </style>

package/src/modules/AuditForm/components/audit-form-question-read-wrapper.vue

@@ -88,12 +88,12 @@ const isResult = computed(() => !isEmpty(props.result));
 
 <style lang="scss" scoped>
 .audit-form-question-read {
-  position: relative;
   display: flex;
+  position: relative;
   flex-direction: column;
+  gap: var(--spacing-sm);
   transition: var(--transition);
   border: 1px solid transparent;
-  gap: var(--spacing-sm);
 
   &:not(.audit-form-question-read--readonly) {
     &:hover,
@@ -128,8 +128,8 @@ const isResult = computed(() => !isEmpty(props.result));
 }
 
 .audit-form-question--clear {
-  margin-top: var(--spacing-sm);
   cursor: pointer;
+  margin-top: var(--spacing-sm);
   color: var(--info-color);
 }
 </style>

package/src/modules/AuditForm/components/audit-form-question-write-wrapper.vue

@@ -134,14 +134,14 @@ function handleQuestionTypeChange(type) {
 .audit-form-question.audit-form-question-write {
   display: flex;
   flex-direction: column;
-  box-shadow: var(--elevation-3);
   gap: var(--spacing-sm);
+  box-shadow: var(--elevation-3);
 }
 
 .audit-form-question-write-header {
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 
   &__actions {
     display: flex;
@@ -151,11 +151,11 @@ function handleQuestionTypeChange(type) {
 
 .audit-form-question-write-content-question {
   display: grid;
+  grid-template-columns: 3fr 1fr;
+  gap: var(--spacing-sm);
   margin-right: calc(
     24px + var(--spacing-sm)
   ); // delete icon action for type "options"
   margin-bottom: var(--spacing-sm);
-  grid-template-columns: 3fr 1fr;
-  gap: var(--spacing-sm);
 }
 </style>

package/src/modules/AuditForm/components/audit-form-question.vue

@@ -122,10 +122,10 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .audit-form-question {
-  padding: var(--spacing-sm);
+  box-shadow: var(--elevation-1);
   border-radius: var(--border-radius);
   background: var(--dp-22-surface-color);
-  box-shadow: var(--elevation-1);
+  padding: var(--spacing-sm);
 
   // override audit-form-question-read-wrapper specificity for hover
   &.audit-form-question--answered {

package/src/modules/AuditForm/components/questions/score/audit-form-question-score.vue

@@ -115,9 +115,9 @@ onMounted(() => v$.value.$touch());
 <style lang="scss" scoped>
 .audit-form-question-score-write {
   display: grid;
-  margin-right: calc(var(--spacing-sm) + 24px); // icon offset
   grid-template-columns: 100px 100px;
   gap: var(--spacing-sm);
+  margin-right: calc(var(--spacing-sm) + 24px); // icon offset
 }
 
 .audit-form-question-score-read {

package/src/modules/DeleteConfirmationPopup/components/delete-confirmation-popup.vue

@@ -75,8 +75,8 @@ const deleteMessage = computed(() => {
 <style scoped>
 .delete-confirmation-popup__content {
   display: flex;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
   gap: var(--spacing-sm);
 }
 

package/src/modules/Filters/v2/filter-presets/components/_shared/input-fields/preset-description-field.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    v-if="props.previewMode && model"
-  >
+  <div v-if="props.previewMode && model">
     <wt-label>
       {{ t('vocabulary.description') }}
     </wt-label>
@@ -19,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import {useI18n} from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 import { WtTextarea, WtLabel } from '../../../../../../../components/index';
 
 const model = defineModel<string>();
@@ -31,6 +29,4 @@ const props = defineProps<{
 const { t } = useI18n();
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

package/src/modules/Filters/v2/filter-presets/components/_shared/input-fields/preset-name-field.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script setup lang="ts">
-import {useI18n} from "vue-i18n";
-import {Validation} from '@vuelidate/core';
+import { useI18n } from 'vue-i18n';
+import { Validation } from '@vuelidate/core';
 import { WtInput } from '../../../../../../../components/index';
 
 type ModelValue = string;
@@ -23,9 +23,6 @@ type Props = {
 const props = defineProps<Props>();
 
 const { t } = useI18n();
-
 </script>
 
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>

package/src/modules/Filters/v2/filter-presets/components/_shared/preset-filters-preview.vue

@@ -3,12 +3,10 @@
     <wt-label>
       {{ t('webitelUI.filters.filterName') }}
     </wt-label>
-    <dynamic-filter-panel-wrapper
-      size="sm"
-    >
+    <dynamic-filter-panel-wrapper size="sm">
       <template #filters>
         <dynamic-filter-preview
-          v-for="(filter) of props.filters"
+          v-for="filter of props.filters"
           :key="filter.name"
           :filter="filter"
           dummy
@@ -24,19 +22,16 @@
       </template>
     </dynamic-filter-panel-wrapper>
   </div>
-
 </template>
 
 <script setup lang="ts">
-import {useI18n} from "vue-i18n";
+import { useI18n } from 'vue-i18n';
 
 import { WtLabel } from '../../../../../../components/index';
-import type {IFilter} from "../../../filters";
-import DynamicFilterPanelWrapper
-  from "../../../filters/components/dynamic-filter-panel-wrapper.vue";
-import { FilterOptionToPreviewComponentMap} from "../../../filters/components/filter-options";
-import DynamicFilterPreview
-  from "../../../filters/components/preview/dynamic-filter-preview.vue";
+import type { IFilter } from '../../../filters';
+import DynamicFilterPanelWrapper from '../../../filters/components/dynamic-filter-panel-wrapper.vue';
+import { FilterOptionToPreviewComponentMap } from '../../../filters/components/filter-options';
+import DynamicFilterPreview from '../../../filters/components/preview/dynamic-filter-preview.vue';
 
 type Props = {
   filters: IFilter[];
@@ -45,8 +40,6 @@ type Props = {
 const props = defineProps<Props>();
 
 const { t } = useI18n();
-
 </script>
 
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

package/src/modules/Filters/v2/filter-presets/components/apply-preset/apply-preset-action.vue

@@ -10,7 +10,9 @@
       @close="showPresetsList = false"
     >
       <template #title>
-        {{ `${t('vocabulary.apply')} ${t('webitelUI.filters.presets.preset').toLowerCase()}` }}
+        {{
+          `${t('vocabulary.apply')} ${t('webitelUI.filters.presets.preset').toLowerCase()}`
+        }}
       </template>
 
       <template #main>
@@ -28,7 +30,7 @@
 
           <section class="available-presets-list">
             <preset-preview
-              v-for="(preset) of dataList"
+              v-for="preset of dataList"
               :key="preset.id"
               collapsed
               :is-selected="preset === selectedPreset"
@@ -38,12 +40,12 @@
               @preset:delete="() => deletePreset(preset)"
             />
           </section>
-<!--            TODO: infinite scroll -->
-<!--          <wt-intersection-observer-->
-<!--            :loading="isLoading"-->
-<!--            :next="false"-->
-<!--            @next="updatePage(page + 1)"-->
-<!--          />-->
+          <!--            TODO: infinite scroll -->
+          <!--          <wt-intersection-observer-->
+          <!--            :loading="isLoading"-->
+          <!--            :next="false"-->
+          <!--            @next="updatePage(page + 1)"-->
+          <!--          />-->
         </section>
       </template>
 
@@ -66,16 +68,22 @@
 </template>
 
 <script lang="ts" setup>
-import {type StoreDefinition, storeToRefs } from "pinia";
-import {computed, inject, ref, watch, onUnmounted} from "vue";
-import {useI18n} from "vue-i18n";
-
-import {WtButton, WtEmpty, WtPopup, WtSearchBar, WtIconAction} from "../../../../../../components/index";
-import {useTableEmpty} from "../../../../../TableComponentModule/composables/useTableEmpty";
-import { IconAction } from "../../../../../../enums";
+import { type StoreDefinition, storeToRefs } from 'pinia';
+import { computed, inject, ref, watch, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import {
+  WtButton,
+  WtEmpty,
+  WtPopup,
+  WtSearchBar,
+  WtIconAction,
+} from '../../../../../../components/index';
+import { useTableEmpty } from '../../../../../TableComponentModule/composables/useTableEmpty';
+import { IconAction } from '../../../../../../enums';
 import PresetQueryAPI from '../../api/PresetQuery.api.ts';
-import PresetPreview from "./preset-preview.vue";
-import {EnginePresetQuery} from "webitel-sdk";
+import PresetPreview from './preset-preview.vue';
+import { EnginePresetQuery } from 'webitel-sdk';
 
 const props = defineProps<{
   /**
@@ -91,36 +99,29 @@ const emit = defineEmits<{
 
 const eventBus = inject('$eventBus');
 
-const {t} = useI18n();
+const { t } = useI18n();
 
 const showPresetsList = ref(false);
 
 const presetsStore = props.usePresetsStore();
-const {
-  dataList,
-  error,
-  isLoading,
-  filtersManager,
-  page,
-} = storeToRefs(presetsStore);
+const { dataList, error, isLoading, filtersManager, page } =
+  storeToRefs(presetsStore);
 
-const {
-  loadDataList,
-  initialize,
-  updateSize,
-  deleteEls,
-} = presetsStore;
+const { loadDataList, initialize, updateSize, deleteEls } = presetsStore;
 
 updateSize(1000);
-filtersManager.value.addFilter({name: 'presetNamespace', value: props.namespace});
+filtersManager.value.addFilter({
+  name: 'presetNamespace',
+  value: props.namespace,
+});
 
 const search = computed({
   get: () => {
     return filtersManager.value.getFilter('search')?.value || '';
   },
   set: (value) => {
-    filtersManager.value.addFilter({name: 'search', value});
-  }
+    filtersManager.value.addFilter({ name: 'search', value });
+  },
 });
 
 const {
@@ -138,31 +139,36 @@ const {
   }),
 });
 
-watch(showPresetsList, () => {
-  initialize();
+watch(
+  showPresetsList,
+  () => {
+    initialize();
 
-  watch(showPresetsList, (value) => {
-    if (value) {
-      search.value = '';
-      /* search.value reset causes re-fetch as filter change, so
+    watch(showPresetsList, (value) => {
+      if (value) {
+        search.value = '';
+        /* search.value reset causes re-fetch as filter change, so
       loadDataList() is commented.
       TODO: implement ability to set filters "silently" and refactor this code */
-      // loadDataList();
-    }
-  });
-}, {once: true});
+        // loadDataList();
+      }
+    });
+  },
+  { once: true },
+);
 
 const selectedPreset = ref();
 
 const applySelectedPreset = () => {
-  const filtersSnapshot = selectedPreset.value.preset['filtersManager.toString'];
+  const filtersSnapshot =
+    selectedPreset.value.preset['filtersManager.toString'];
   emit('apply', filtersSnapshot);
 
   selectedPreset.value = null;
   showPresetsList.value = false;
 };
 
-const updatePreset = async ({preset, onSuccess, onFailure}) => {
+const updatePreset = async ({ preset, onSuccess, onFailure }) => {
   try {
     await PresetQueryAPI.update({
       item: { ...preset },
@@ -205,9 +211,9 @@ const deletePreset = async (preset: EnginePresetQuery) => {
 
 .apply-preset-main-content {
   display: flex;
-  height: 100%;
   flex-direction: column;
   gap: var(--spacing-xs);
+  height: 100%;
 
   .wt-empty {
     flex-grow: 1;
@@ -219,10 +225,10 @@ const deletePreset = async (preset: EnginePresetQuery) => {
   @extend %wt-scrollbar;
 
   display: flex;
-  overflow-y: auto;
   flex-direction: column;
-  max-height: 400px;
   gap: var(--spacing-xs);
+  max-height: 400px;
+  overflow-y: auto;
   scrollbar-gutter: stable;
 }
 </style>

package/src/modules/Filters/v2/filter-presets/components/apply-preset/preset-preview.vue

@@ -61,9 +61,7 @@
             @update:model-value="nameAlreadyExistsError = false"
           />
 
-          <preset-filters-preview
-            :filters="presetFilters"
-          />
+          <preset-filters-preview :filters="presetFilters" />
 
           <preset-description-field
             v-model:model-value="editDraft.description"
@@ -76,28 +74,38 @@
 </template>
 
 <script lang="ts" setup>
-import {EnginePresetQuery} from "webitel-sdk";
-import {computed, ref} from "vue";
-import {useVuelidate} from "@vuelidate/core";
-import {required} from "@vuelidate/validators";
-import {AxiosError} from "axios";
-import {WtExpansionPanel, WtIconAction, WtRadio} from "../../../../../../components/index";
-import {createFiltersManager} from "../../../filters/index";
-import PresetFiltersPreview from "../_shared/preset-filters-preview.vue";
-import PresetNameField from "../_shared/input-fields/preset-name-field.vue";
-import PresetDescriptionField from "../_shared/input-fields/preset-description-field.vue";
+import { EnginePresetQuery } from 'webitel-sdk';
+import { computed, ref } from 'vue';
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { AxiosError } from 'axios';
+import {
+  WtExpansionPanel,
+  WtIconAction,
+  WtRadio,
+} from '../../../../../../components/index';
+import { createFiltersManager } from '../../../filters/index';
+import PresetFiltersPreview from '../_shared/preset-filters-preview.vue';
+import PresetNameField from '../_shared/input-fields/preset-name-field.vue';
+import PresetDescriptionField from '../_shared/input-fields/preset-description-field.vue';
 
 type Props = {
   preset: EnginePresetQuery;
   isSelected: boolean;
   collapsed: boolean;
-}
+};
 
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
   'preset:select': [EnginePresetQuery];
-  'preset:update': [{ preset: EnginePresetQuery, onSuccess: () => void, onFailure: (err: AxiosError) => void }];
+  'preset:update': [
+    {
+      preset: EnginePresetQuery;
+      onSuccess: () => void;
+      onFailure: (err: AxiosError) => void;
+    },
+  ];
   'preset:delete': [EnginePresetQuery];
 }>();
 
@@ -134,17 +142,21 @@ const fillDraft = () => {
 
 fillDraft();
 
-const v$ = useVuelidate(computed(() => {
-  return {
-    name: {
-      required,
-      nameAlreadyInUse: () => !nameAlreadyExistsError.value,
-    },
-  };
-}), editDraft, {$autoDirty: true});
+const v$ = useVuelidate(
+  computed(() => {
+    return {
+      name: {
+        required,
+        nameAlreadyInUse: () => !nameAlreadyExistsError.value,
+      },
+    };
+  }),
+  editDraft,
+  { $autoDirty: true },
+);
 v$.value.$touch();
 
-const startEdit = ({open: openExpansion}) => {
+const startEdit = ({ open: openExpansion }) => {
   openExpansion();
   editMode.value = true;
 };
@@ -177,15 +189,15 @@ const submitEdit = () => {
 <style lang="scss" scoped>
 .preset-preview-title-wrapper {
   display: flex;
-  min-width: 0;
   gap: var(--spacing-xs);
+  min-width: 0;
 }
 
 .preset-preview-name {
-  overflow: hidden;
   flex: 1 1 0;
-  white-space: nowrap;
+  overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .preset-preview-content {

package/src/modules/Filters/v2/filter-presets/components/save-preset/overwrite-preset-popup.vue

@@ -4,7 +4,9 @@
     @close="emit('close')"
   >
     <template #title>
-      {{ `${t('reusable.save')} ${t('webitelUI.filters.presets.preset').toLowerCase()}` }}
+      {{
+        `${t('reusable.save')} ${t('webitelUI.filters.presets.preset').toLowerCase()}`
+      }}
     </template>
     <template #main>
       <p class="overwrite-preset-popup-text">