@webitel/ui-sdk 24.6.17 → 24.6.18

package/src/mixins/dataFilterMixins/__tests__/sortFilterMixin.spec.js

@@ -1,35 +1,39 @@
 import { shallowMount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
-import sortFilterMixin from '../sortFilterMixin';
+import sortFilterMixin from '../sortFilterMixin.js';
 
 const router = createRouter({
   history: createWebHistory(),
   routes: [{ path: '/', name: 'jest' }],
 });
 
-const headers = [{
-  value: 'queue',
-  show: true,
-  sort: null,
-  field: 'queue',
-}, {
-  value: 'agents',
-  show: true,
-  sort: null,
-  field: 'online',
-}];
+const headers = [
+  {
+    value: 'queue',
+    show: true,
+    sort: null,
+    field: 'queue',
+  }, {
+    value: 'agents',
+    show: true,
+    sort: null,
+    field: 'online',
+  },
+];
 
-const sortedHeaders = [{
-  value: 'queue',
-  show: true,
-  sort: 'asc',
-  field: 'queue',
-}, {
-  value: 'agents',
-  show: true,
-  sort: null,
-  field: 'online',
-}];
+const sortedHeaders = [
+  {
+    value: 'queue',
+    show: true,
+    sort: 'asc',
+    field: 'queue',
+  }, {
+    value: 'agents',
+    show: true,
+    sort: null,
+    field: 'online',
+  },
+];
 
 describe('Sort filter mixin', () => {
   const setHeaders = vi.fn();
@@ -44,7 +48,6 @@ describe('Sort filter mixin', () => {
     await router.replace('/');
   });
 
-
   it('Correctly sets value from $route query', async () => {
     await router.replace({ path: '/', query: { sort: '+queue' } });
     const wrapper = shallowMount(Component, {

package/src/mixins/dataFilterMixins/__tests__/urlControllerMixin.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { createRouter, createWebHistory } from 'vue-router';
-import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
+import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin.js';
 
 const router = createRouter({
   history: createWebHistory(),

package/src/mixins/dataFilterMixins/apiFilterMixin.js

@@ -1,4 +1,4 @@
-import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin.js';
 
 export default {
   mixins: [baseFilterMixin],

package/src/mixins/dataFilterMixins/baseFilterMixin/baseFilterMixin.js

@@ -1,4 +1,4 @@
-import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
+import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin.js';
 
 export default {
   mixins: [_urlControllerMixin],
@@ -22,7 +22,8 @@ export default {
 
   methods: {
     restore({ filterQuery }) {
-      const value = this.getValueFromQuery({ filterQuery }) || this.defaultValue;
+      const value = this.getValueFromQuery({ filterQuery }) ||
+        this.defaultValue;
       this.restoreValue(value);
     },
   },

package/src/mixins/dataFilterMixins/enumFilterMixin.js

@@ -1,4 +1,4 @@
-import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin.js';
 
 export default {
   mixins: [baseFilterMixin],
@@ -20,10 +20,12 @@ export default {
     restoreValue(value) {
       if (Array.isArray(value)) {
         this.value = this.options
-        .filter((option) => value.some((value) => `${value}` === option[this.storedProp]));
+        .filter((option) => value.some((value) => `${value}` ===
+          option[this.storedProp]));
       } else {
         this.value = this.options
-        .find((option) => option[this.storedProp] === value) || this.defaultValue;
+          .find((option) => option[this.storedProp] === value) ||
+          this.defaultValue;
       }
     },
   },

package/src/mixins/dataFilterMixins/paginationFilterMixin.js

@@ -1,4 +1,4 @@
-import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin.js';
 
 export default {
   mixins: [baseFilterMixin],

package/src/mixins/dataFilterMixins/sortFilterMixin.js

@@ -1,4 +1,4 @@
-import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin.js';
 
 const SortSymbols = Object.freeze({
   ASC: 'asc',
@@ -8,30 +8,43 @@ const SortSymbols = Object.freeze({
 
 const getNextSortOrder = (sort) => {
   switch (sort) {
-    case SortSymbols.NONE: return SortSymbols.ASC;
-    case SortSymbols.ASC: return SortSymbols.DESC;
-    case SortSymbols.DESC: return SortSymbols.NONE;
-    default: return SortSymbols.ASC;
+    case SortSymbols.NONE:
+      return SortSymbols.ASC;
+    case SortSymbols.ASC:
+      return SortSymbols.DESC;
+    case SortSymbols.DESC:
+      return SortSymbols.NONE;
+    default:
+      return SortSymbols.ASC;
   }
 };
 
 const sortToQueryAdapter = (order) => {
   switch (order) {
-    case SortSymbols.ASC: return '+';
-    case SortSymbols.DESC: return '-';
-    default: return '';
+    case SortSymbols.ASC:
+      return '+';
+    case SortSymbols.DESC:
+      return '-';
+    default:
+      return '';
   }
 };
 
 const queryToSortAdapter = (order) => {
   switch (order) {
-    case '+': return SortSymbols.ASC;
-    case '-': return SortSymbols.DESC;
-    default: return SortSymbols.NONE;
+    case '+':
+      return SortSymbols.ASC;
+    case '-':
+      return SortSymbols.DESC;
+    default:
+      return SortSymbols.NONE;
   }
 };
 
-const encodeSortQuery = ({ column, order }) => (`${sortToQueryAdapter(order)}${column.field}`);
+const encodeSortQuery = ({
+                           column,
+                           order,
+                         }) => (`${sortToQueryAdapter(order)}${column.field}`);
 
 const decodeSortQuery = ({ value }) => {
   const sort = queryToSortAdapter(value.slice(0, 1));
@@ -58,7 +71,7 @@ export default {
         return {
           ...col,
           sort: col === column ? order : sortFieldValue,
-        }
+        };
       });
       const value = encodeSortQuery({ column, order });
       this.setHeaders(headers);

package/src/mixins/validationMixin/__tests__/validationMixin.spec.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import validationMixin from '../validationMixin';
+import validationMixin from '../validationMixin.js';
 
 describe('Validation mixin', () => {
   let wrapper;

package/src/mixins/validationMixin/useValidation.js

@@ -1,7 +1,10 @@
-import { computed, isReactive, isRef } from 'vue';
+import { computed, isReactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-export function useValidation({ v: inputV, customValidators: inputCustomValidators }) {
+export function useValidation({
+                                v: inputV,
+                                customValidators: inputCustomValidators,
+                              }) {
   const { t } = useI18n();
 
   // support vue options api, where v is a reactive, not ref
@@ -14,7 +17,8 @@ export function useValidation({ v: inputV, customValidators: inputCustomValidato
   }
   // end
 
-  const isValidation = computed(() => !!v && !!v.value && !!Object.keys(v.value).length);
+  const isValidation = computed(() => !!v && !!v.value &&
+    !!Object.keys(v.value).length);
   const invalid = computed(() => isValidation.value && v.value.$error);
 
   const validationText = computed(() => {
@@ -40,7 +44,7 @@ export function useValidation({ v: inputV, customValidators: inputCustomValidato
     }
 
     if (customValidators && customValidators.value) {
-       
+
       for (const { name, text } of customValidators.value) {
         if (v.value[name]?.$invalid) validationText = text;
       }

package/src/mixins/validationMixin/validationMixin.js

@@ -37,7 +37,7 @@ export default {
         else if (this.v.websocketValidator?.$invalid) validationText = `${this.$t('validation.websocketValidator')}`;
         else if (this.v.integer?.$invalid) validationText = `${this.$t('validation.integer')}`;
       }
-       
+
       for (const { name, text } of this.customValidators) {
         if (this.v[name]?.$invalid) validationText = text;
       }

package/src/modules/AgentStatusSelect/api/pause-cause.js

@@ -1,9 +1,11 @@
 import { AgentServiceApiFactory } from 'webitel-sdk';
+import { getDefaultGetListResponse } from '../../../api/defaults/index.js';
 import applyTransform, {
-  merge, mergeEach, notify,
+  merge,
+  mergeEach,
+  notify,
   snakeToCamel,
-} from '../../../api/transformers';
-import { getDefaultGetListResponse } from '../../../api/defaults';
+} from '../../../api/transformers/index.js';
 
 const PauseCauseAPIFactory = ({ instance, OpenAPIConfig }) => {
 

package/src/modules/AgentStatusSelect/components/__tests__/wt-cc-agent-status-select.spec.js

@@ -1,18 +1,20 @@
-import { shallowMount, mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import { createStore } from 'vuex';
-import AgentStatus from '../../../../enums/AgentStatus/AgentStatus.enum';
-import * as AgentStatusAPIFactory from '../../api/agent-status';
-import * as PauseCauseAPIFactory from '../../api/pause-cause';
+import AgentStatus from '../../../../enums/AgentStatus/AgentStatus.enum.js';
+import * as AgentStatusAPIFactory from '../../api/agent-status.js';
+import * as PauseCauseAPIFactory from '../../api/pause-cause.js';
 import WtCcAgentStatusSelect from '../wt-cc-agent-status-select.vue';
 
 const pauseCauses = [{ name: 'jest1' }, { name: 'jest2' }];
 const getAgentPauseCausesMock = vi.fn(() => ({ items: pauseCauses }));
 // https://stackoverflow.com/a/63727813
-vi.spyOn(PauseCauseAPIFactory, 'default').mockImplementation(() => ({ getList: getAgentPauseCausesMock }));
+vi.spyOn(PauseCauseAPIFactory, 'default')
+.mockImplementation(() => ({ getList: getAgentPauseCausesMock }));
 
 const agentStatusMock = vi.fn(() => {});
 // https://stackoverflow.com/a/63727813
-vi.spyOn(AgentStatusAPIFactory, 'default').mockImplementation(() => ({ patch: agentStatusMock }));
+vi.spyOn(AgentStatusAPIFactory, 'default')
+.mockImplementation(() => ({ patch: agentStatusMock }));
 
 const agent = {
   status: '',
@@ -64,7 +66,8 @@ describe('Wt Cc Agent Status Select', () => {
     await wrapper.vm.$nextTick(); // load pause causes
     await wrapper.vm.$nextTick();
     await wrapper.vm.$nextTick(); // render popup
-    expect(wrapper.findComponent({ name: 'pause-cause-popup' }).isVisible()).toBe(true);
+    expect(wrapper.findComponent({ name: 'pause-cause-popup' }).isVisible())
+    .toBe(true);
   });
   it(`at pause-cause-popup "change" event, triggers patch agent status
    with "pause" status and passed pauseCause`, async () => {

package/src/modules/AgentStatusSelect/components/__tests__/wt-cc-pause-cause-popup.spec.js

@@ -1,11 +1,11 @@
-import { shallowMount, mount } from '@vue/test-utils';
+import { mount, shallowMount } from '@vue/test-utils';
 import WtCcPauseCausePopup from '../_internals/wt-cc-pause-cause-popup.vue';
 
 describe('Pause cause popup', () => {
   it('renders a component', () => {
     const wrapper = shallowMount(WtCcPauseCausePopup);
     expect(wrapper.exists())
-      .toBe(true);
+    .toBe(true);
   });
   it('at option input event, sets "selected" its value', () => {
     const value = 'jest';

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

@@ -16,10 +16,10 @@
             class="wt-cc-pause-cause-popup-option"
           >
             <wt-radio
-              class="wt-cc-pause-cause-popup-option__radio"
+              :label="option.name"
               :selected="selected.id"
               :value="option.id"
-              :label="option.name"
+              class="wt-cc-pause-cause-popup-option__radio"
               @input="select(option)"
             />
             <div class="wt-cc-pause-cause-popup-option__limits-wrapper">
@@ -57,7 +57,9 @@
 <script setup>
 import { computed, ref, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRepresentableAgentPauseCause } from '../../../../composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause';
+import {
+  useRepresentableAgentPauseCause,
+} from '../../../../composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause.js';
 
 const props = defineProps({
   options: {
@@ -103,8 +105,8 @@ function setPause() {
 <style lang="scss" scoped>
 .wt-cc-pause-cause-popup-option {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 
   &:not(:last-child) {
     margin-bottom: var(--spacing-sm);

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

@@ -10,8 +10,8 @@
     <template #main>
       <article class="wt-cc-status-select-error-popup__main-wrapper">
         <wt-icon
-          icon="attention"
           color="error"
+          icon="attention"
         />
         <p class="wt-cc-status-select-error-popup__message">
           {{ $t('webitelUI.agentStatusSelect.statusSelectErrorPopup.message') }}
@@ -48,9 +48,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/AgentStatusSelect/components/wt-cc-agent-status-select.vue

@@ -23,9 +23,9 @@
 import { ref } from 'vue';
 import { useStore } from 'vuex';
 import { PauseNotAllowedError } from 'webitel-sdk';
-import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum';
-import AgentStatusAPIFactory from '../api/agent-status';
-import PauseCauseAPIFactory from '../api/pause-cause';
+import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum.js';
+import AgentStatusAPIFactory from '../api/agent-status.js';
+import PauseCauseAPIFactory from '../api/pause-cause.js';
 import PauseCausePopup from './_internals/wt-cc-pause-cause-popup.vue';
 import StatusSelectErrorPopup from './_internals/wt-cc-status-select-error-popup.vue';
 

package/src/modules/Appearance/components/__tests__/wt-dark-mode-switcher.spec.js

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
 import { createStore } from 'vuex';
-import AppearanceStoreModule from '../../store/AppearanceStoreModule';
+import AppearanceStoreModule from '../../store/AppearanceStoreModule.js';
 import WtDarkModeSwitcher from '../wt-dark-mode-switcher.vue';
 
 describe('WtDarkModeSwitcher', () => {

package/src/modules/Appearance/store/AppearanceStoreModule.js

@@ -1,23 +1,23 @@
-import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule.js';
 
 export default class AppearanceStoreModule extends BaseStoreModule {
   state = {
     theme: null,
-  }
+  };
 
   getters = {
     DARK_MODE: (state) => state.theme === 'dark',
-  }
+  };
 
   actions = {
     SET_THEME: (context, theme) => {
       context.commit('SET_THEME', theme);
     },
-  }
+  };
 
   mutations = {
     SET_THEME: (state, theme) => {
       state.theme = theme;
     },
-  }
+  };
 }

package/src/modules/Appearance/store/__tests__/AppearanceStoreModule.spec.js

@@ -1,5 +1,5 @@
 import { createStore } from 'vuex';
-import AppearanceStoreModule from '../AppearanceStoreModule';
+import AppearanceStoreModule from '../AppearanceStoreModule.js';
 
 describe('AppearanceStoreModule', () => {
   let store;

package/src/modules/AuditForm/components/__tests__/audit-form-question-read-wrapper.spec.js

@@ -1,5 +1,6 @@
 import { shallowMount } from '@vue/test-utils';
-import AuditFormQuestionReadWrapper from '../audit-form-question-read-wrapper.vue';
+import AuditFormQuestionReadWrapper
+  from '../audit-form-question-read-wrapper.vue';
 
 describe('AuditFormQuestionReadWrapper', () => {
   it('renders a component', () => {

package/src/modules/AuditForm/components/__tests__/audit-form-question-write-wrapper.spec.js

@@ -2,10 +2,13 @@ import { shallowMount } from '@vue/test-utils';
 import { EngineAuditQuestionType } from 'webitel-sdk';
 import {
   generateQuestionOptionsSchema,
-} from '../../schemas/AuditFormQuestionOptionsSchema';
-import AuditFormQuestionWriteWrapper from '../audit-form-question-write-wrapper.vue';
-import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema';
-import { generateQuestionScoreSchema } from '../../schemas/AuditFormQuestionScoreSchema';
+} from '../../schemas/AuditFormQuestionOptionsSchema.js';
+import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema.js';
+import {
+  generateQuestionScoreSchema,
+} from '../../schemas/AuditFormQuestionScoreSchema.js';
+import AuditFormQuestionWriteWrapper
+  from '../audit-form-question-write-wrapper.vue';
 
 const v = { question: {} };
 
@@ -27,7 +30,9 @@ describe('AuditFormQuestionWriteWrapper', () => {
         v,
       },
     });
-    wrapper.findComponent({ name: 'wt-switcher' }).vm.$emit('change', !question.required);
+    wrapper.findComponent({ name: 'wt-switcher' })
+    .vm
+    .$emit('change', !question.required);
     expect(wrapper.emitted()['change:question'][0][0].required)
     .toBe(!question.required);
   });
@@ -40,7 +45,9 @@ describe('AuditFormQuestionWriteWrapper', () => {
       },
     });
     wrapper.find('.audit-form-question-write-content-question')
-    .findComponent({ name: 'wt-select' }).vm.$emit('input', { value: EngineAuditQuestionType.Score });
+    .findComponent({ name: 'wt-select' })
+    .vm
+    .$emit('input', { value: EngineAuditQuestionType.Score });
     expect(wrapper.emitted()['change:question'][0][0])
     .toEqual(generateQuestionScoreSchema());
   });
@@ -53,7 +60,9 @@ describe('AuditFormQuestionWriteWrapper', () => {
       },
     });
     wrapper.find('.audit-form-question-write-content-question')
-    .findComponent({ name: 'wt-select' }).vm.$emit('input', { value: EngineAuditQuestionType.Option });
+    .findComponent({ name: 'wt-select' })
+    .vm
+    .$emit('input', { value: EngineAuditQuestionType.Option });
     expect(wrapper.emitted()['change:question'][0][0])
     .toEqual(generateQuestionOptionsSchema());
   });

package/src/modules/AuditForm/components/__tests__/audit-form.spec.js

@@ -1,12 +1,12 @@
 import { mount } from '@vue/test-utils';
 import { ref } from 'vue';
-import AuditForm from '../audit-form.vue';
-import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema';
 import {
   useDestroyableSortable,
-} from '../../../../composables/useDestroyableSortable/useDestroyableSortable';
+} from '../../../../composables/useDestroyableSortable/useDestroyableSortable.js';
+import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema.js';
+import AuditForm from '../audit-form.vue';
 
-vi.mock('../../../../composables/useDestroyableSortable/useDestroyableSortable');
+vi.mock('../../../../composables/useDestroyableSortable/useDestroyableSortable.js');
 
 useDestroyableSortable.mockImplementation(() => ({ reloadSortable: ref(false) }));
 
@@ -42,7 +42,9 @@ describe('AuditForm', () => {
         questions: [generateQuestionSchema()],
       },
     });
-    await wrapper.findComponent({ name: 'audit-form-question' }).vm.$emit('delete', { key: 0 });
+    await wrapper.findComponent({ name: 'audit-form-question' })
+    .vm
+    .$emit('delete', { key: 0 });
     expect(wrapper.emitted()['update:questions'][0][0])
     .toEqual([]);
   });
@@ -54,15 +56,21 @@ describe('AuditForm', () => {
         questions: [question],
       },
     });
-    await wrapper.findComponent({ name: 'audit-form-question' }).vm.$emit('copy', { question, key: 0 });
+    await wrapper.findComponent({ name: 'audit-form-question' })
+    .vm
+    .$emit('copy', { question, key: 0 });
     expect(wrapper.emitted()['update:questions'][0][0])
     .toEqual([question, question]);
   });
-  it('initializes result depending on passed questions',() => {
+  it('initializes result depending on passed questions', () => {
     const wrapper = mount(AuditForm, {
       props: {
         mode: 'fill',
-        questions: [generateQuestionSchema(), generateQuestionSchema(), generateQuestionSchema()],
+        questions: [
+          generateQuestionSchema(),
+          generateQuestionSchema(),
+          generateQuestionSchema(),
+        ],
       },
     });
     expect(wrapper.emitted()['update:result'][0][0]).toEqual([{}, {}, {}]);

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

@@ -1,19 +1,19 @@
 <template>
   <article
-    class="audit-form-question-read"
     :class="{
       'audit-form-question-read--filled': isResult && result.score != null,
       'audit-form-question-read--readonly': readonly,
     }"
-    @keyup.enter="emit('activate')"
+    class="audit-form-question-read"
     @click="emit('activate')"
+    @keyup.enter="emit('activate')"
   >
     <header class="audit-form-question-read-header">
       <p
-        class="audit-form-question-read-text"
         :class="{
           'audit-form-question-read-text--required': question.required,
         }"
+        class="audit-form-question-read-text"
       >
         {{ question.question }}
       </p>
@@ -45,10 +45,10 @@
 <script setup>
 import { computed } from 'vue';
 import { EngineAuditQuestionType } from 'webitel-sdk';
-import isEmpty from '../../../scripts/isEmpty';
+import WtIcon from '../../../components/wt-icon/wt-icon.vue';
+import isEmpty from '../../../scripts/isEmpty.js';
 import AuditFormQuestionOptions from './questions/options/audit-form-question-options.vue';
 import AuditFormQuestionScore from './questions/score/audit-form-question-score.vue';
-import WtIcon from '../../../components/wt-icon/wt-icon.vue';
 
 const props = defineProps({
   question: {
@@ -92,9 +92,9 @@ const isResult = computed(() => !isEmpty(props.result));
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-sm);
-  border: 1px solid transparent;
   transition: var(--transition);
+  border: 1px solid transparent;
+  gap: var(--spacing-sm);
 
   &:not(.audit-form-question-read--readonly) {
     &:hover,
@@ -127,6 +127,7 @@ const isResult = computed(() => !isEmpty(props.result));
     }
   }
 }
+
 .audit-form-question--clear {
   margin-top: var(--spacing-sm);
   cursor: pointer;