@webitel/ui-sdk 24.10.3 → 24.10.5

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

@@ -57,9 +57,7 @@
 <script setup>
 import { computed, ref, toRef } from 'vue';
 import { useI18n } from 'vue-i18n';
-import {
-  useRepresentableAgentPauseCause,
-} from '../../../../composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause.js';
+import { useRepresentableAgentPauseCause } from '../../../../composables/useRepresentableAgentPauseCause/useRepresentableAgentPauseCause.js';
 
 const props = defineProps({
   options: {
@@ -78,15 +76,17 @@ const { t } = useI18n();
 
 const { representablePauseCause } = useRepresentableAgentPauseCause(options);
 
-const pauseCause = computed(() => representablePauseCause.value.map((cause) => ({
-  ...cause,
-  duration: cause.isOverflow
-    ? `-${cause.durationMin - cause.limitMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`
-    : `${cause.durationMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`,
-  limit: cause.limitMin
-    ? `${cause.limitMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`
-    : t('webitelUI.agentStatusSelect.pauseCausePopup.unlimited'),
-})));
+const pauseCause = computed(() =>
+  representablePauseCause.value.map((cause) => ({
+    ...cause,
+    duration: cause.isOverflow
+      ? `-${cause.durationMin - cause.limitMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`
+      : `${cause.durationMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`,
+    limit: cause.limitMin
+      ? `${cause.limitMin} ${t('webitelUI.agentStatusSelect.pauseCausePopup.min')}`
+      : t('webitelUI.agentStatusSelect.pauseCausePopup.unlimited'),
+  })),
+);
 
 function select(option) {
   selected.value = option;

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

@@ -42,7 +42,6 @@ const emit = defineEmits(['close']);
 function close() {
   emit('close');
 }
-
 </script>
 
 <style lang="scss" scoped>

package/src/modules/AgentStatusSelect/components/wt-cc-agent-status-select.vue

@@ -4,7 +4,7 @@
       :status="status"
       :status-duration="statusDuration"
       @closed="handleClosed"
-      @change="handleStatusSelectInput"
+      @change="handleSelectInput"
     />
     <pause-cause-popup
       v-if="isPauseCausePopup"
@@ -54,6 +54,7 @@ const PauseCauseAPI = PauseCauseAPIFactory(api);
 const isPauseCausePopup = ref(false);
 const pauseCauses = ref([]);
 const error = ref(null);
+const chosenStatus = ref('');
 
 function openPauseCausePopup() {
   isPauseCausePopup.value = true;
@@ -83,21 +84,33 @@ async function changeStatus({ status, pauseCause }) {
   }
 }
 
-async function handleStatusSelectInput(status) {
-  if (status === props.status) return;
-
+async function handleStatus(status) {
   if (status === AgentStatus.PAUSE) {
     await loadPauseCauses();
     if (pauseCauses.value.length) {
       openPauseCausePopup();
+      return;
     }
-  } else {
-    await changeStatus({ status });
   }
+  if (status === props.status) return;
+  await changeStatus({ status });
+}
+
+function handleSelectInput(newStatus) {
+  handleStatus(newStatus);
+  chosenStatus.value = newStatus;
+  // we need to save changes which come from input, because sometimes we want
+  // to choose 'pause' repeatedly and have to check the previous status
 }
 
 function handleClosed(event) {
-  return handleStatusSelectInput(event.value);
+  // sometimes we want to choose 'pause' repeatedly
+  // but 'change' event from wt-status-select can't give us the same value,
+  // in this case we have to use value from 'closed' event to choose 'pause' status
+  if ((event.value === chosenStatus.value || !chosenStatus.value) // if closed status the same as chosen, or chosen status is empty
+    && event.value === AgentStatus.PAUSE) { // and only for 'pause' status
+    handleStatus(event.value);
+  }
 }
 
 function handlePauseCauseInput(pauseCause) {

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

@@ -19,10 +19,8 @@ describe('WtDarkModeSwitcher', () => {
   });
 
   it('toggles dark mode class', async () => {
-    expect(window.document.documentElement.classList.contains('theme--dark'))
-    .toBe(false);
+    expect(window.document.documentElement.classList.contains('theme--dark')).toBe(false);
     await wrapper.findComponent({ name: 'wt-switcher' }).trigger('change');
-    expect(window.document.documentElement.classList.contains('theme--dark'))
-    .toBe(true);
+    expect(window.document.documentElement.classList.contains('theme--dark')).toBe(true);
   });
 });

package/src/modules/Appearance/components/wt-dark-mode-switcher.vue

@@ -1,5 +1,4 @@
 <script setup>
-
 import { ref } from 'vue';
 import { useStore } from 'vuex';
 import WtIcon from '../../../components/wt-icon/wt-icon.vue';

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

@@ -1,6 +1,5 @@
 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

@@ -1,14 +1,9 @@
 import { shallowMount } from '@vue/test-utils';
 import { EngineAuditQuestionType } from 'webitel-sdk';
-import {
-  generateQuestionOptionsSchema,
-} from '../../schemas/AuditFormQuestionOptionsSchema.js';
+import { generateQuestionOptionsSchema } 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';
+import { generateQuestionScoreSchema } from '../../schemas/AuditFormQuestionScoreSchema.js';
+import AuditFormQuestionWriteWrapper from '../audit-form-question-write-wrapper.vue';
 
 const v = { question: {} };
 
@@ -30,11 +25,8 @@ describe('AuditFormQuestionWriteWrapper', () => {
         v,
       },
     });
-    wrapper.findComponent({ name: 'wt-switcher' })
-    .vm
-    .$emit('change', !question.required);
-    expect(wrapper.emitted()['change:question'][0][0].required)
-    .toBe(!question.required);
+    wrapper.findComponent({ name: 'wt-switcher' }).vm.$emit('change', !question.required);
+    expect(wrapper.emitted()['change:question'][0][0].required).toBe(!question.required);
   });
   it('correctly changes question type to Score', () => {
     const question = {};
@@ -44,12 +36,11 @@ describe('AuditFormQuestionWriteWrapper', () => {
         v,
       },
     });
-    wrapper.find('.audit-form-question-write-content-question')
-    .findComponent({ name: 'wt-select' })
-    .vm
-    .$emit('input', { value: EngineAuditQuestionType.Score });
-    expect(wrapper.emitted()['change:question'][0][0])
-    .toEqual(generateQuestionScoreSchema());
+    wrapper
+      .find('.audit-form-question-write-content-question')
+      .findComponent({ name: 'wt-select' })
+      .vm.$emit('input', { value: EngineAuditQuestionType.Score });
+    expect(wrapper.emitted()['change:question'][0][0]).toEqual(generateQuestionScoreSchema());
   });
   it('correctly changes question type to Options', () => {
     const question = {};
@@ -59,11 +50,10 @@ describe('AuditFormQuestionWriteWrapper', () => {
         v,
       },
     });
-    wrapper.find('.audit-form-question-write-content-question')
-    .findComponent({ name: 'wt-select' })
-    .vm
-    .$emit('input', { value: EngineAuditQuestionType.Option });
-    expect(wrapper.emitted()['change:question'][0][0])
-    .toEqual(generateQuestionOptionsSchema());
+    wrapper
+      .find('.audit-form-question-write-content-question')
+      .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,8 +1,6 @@
 import { mount } from '@vue/test-utils';
 import { ref } from 'vue';
-import {
-  useDestroyableSortable,
-} from '../../../../composables/useDestroyableSortable/useDestroyableSortable.js';
+import { useDestroyableSortable } from '../../../../composables/useDestroyableSortable/useDestroyableSortable.js';
 import { generateQuestionSchema } from '../../schemas/AuditFormQuestionSchema.js';
 import AuditForm from '../audit-form.vue';
 
@@ -32,8 +30,9 @@ describe('AuditForm', () => {
     await wrapper.vm.$nextTick();
     await wrapper.vm.$nextTick();
     console.info(wrapper.html());
-    expect(wrapper.emitted()['update:questions'][0][0])
-    .toEqual([generateQuestionSchema({ required: true })]);
+    expect(wrapper.emitted()['update:questions'][0][0]).toEqual([
+      generateQuestionSchema({ required: true }),
+    ]);
   });
   it('delete event from child question emits update without passed question', async () => {
     const wrapper = mount(AuditForm, {
@@ -42,11 +41,8 @@ describe('AuditForm', () => {
         questions: [generateQuestionSchema()],
       },
     });
-    await wrapper.findComponent({ name: 'audit-form-question' })
-    .vm
-    .$emit('delete', { key: 0 });
-    expect(wrapper.emitted()['update:questions'][0][0])
-    .toEqual([]);
+    await wrapper.findComponent({ name: 'audit-form-question' }).vm.$emit('delete', { key: 0 });
+    expect(wrapper.emitted()['update:questions'][0][0]).toEqual([]);
   });
   it('copy event from child question emits update with duplicated questions', async () => {
     const question = generateQuestionSchema();
@@ -56,21 +52,16 @@ describe('AuditForm', () => {
         questions: [question],
       },
     });
-    await wrapper.findComponent({ name: 'audit-form-question' })
-    .vm
-    .$emit('copy', { question, key: 0 });
-    expect(wrapper.emitted()['update:questions'][0][0])
-    .toEqual([question, question]);
+    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', () => {
     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

@@ -73,10 +73,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  'change:result',
-  'activate',
-]);
+const emit = defineEmits(['change:result', 'activate']);
 
 const QuestionTypeComponent = computed(() => {
   if (props.question.type === EngineAuditQuestionType.Option) return AuditFormQuestionOptions;

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

@@ -89,18 +89,16 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  'change:question',
-  'copy',
-  'delete',
-]);
+const emit = defineEmits(['change:question', 'copy', 'delete']);
 
 const QuestionType = [
   { value: EngineAuditQuestionType.Option, locale: 'webitelUI.auditForm.type.options' },
   { value: EngineAuditQuestionType.Score, locale: 'webitelUI.auditForm.type.score' },
 ];
 
-const prettifiedQuestionType = computed(() => QuestionType.find(({ value }) => value === props.question.type));
+const prettifiedQuestionType = computed(() =>
+  QuestionType.find(({ value }) => value === props.question.type),
+);
 
 const QuestionTypeComponent = computed(() => {
   if (props.question.type === EngineAuditQuestionType.Option) return AuditFormQuestionOptions;
@@ -122,7 +120,6 @@ function handleQuestionTypeChange(type) {
   }
   emit('change:question', question);
 }
-
 </script>
 
 <style lang="scss" scoped>

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

@@ -56,12 +56,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits([
-  'copy',
-  'delete',
-  'update:question',
-  'update:result',
-]);
+const emits = defineEmits(['copy', 'delete', 'update:question', 'update:result']);
 
 const QuestionState = {
   SAVED: 'saved',
@@ -73,17 +68,23 @@ const state = ref(QuestionState.SAVED);
 // is needed for useVuelidate, because props.question/props.result isn't reactive
 const { question, result } = toRefs(props);
 
-const v$ = useVuelidate(computed(() => (
-  (props.mode === 'create')
-    ? {
-      question: {
-        question: { required },
-      },
-    } : {
-      result: {
-        required: (value) => (question.value.required ? !isEmpty(value) : true),
-      },
-    })), { question, result }, { $autoDirty: true });
+const v$ = useVuelidate(
+  computed(() =>
+    props.mode === 'create'
+      ? {
+          question: {
+            question: { required },
+          },
+        }
+      : {
+          result: {
+            required: (value) => (question.value.required ? !isEmpty(value) : true),
+          },
+        },
+  ),
+  { question, result },
+  { $autoDirty: true },
+);
 
 const component = computed(() => {
   if (props.readonly) return QuestionRead;

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

@@ -45,8 +45,8 @@ const props = defineProps({
     type: String,
     required: true,
     /*
-    * Available options: ['create', 'fill']
-    *  */
+     * Available options: ['create', 'fill']
+     *  */
   },
   questions: {
     type: Array,
@@ -61,11 +61,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  'update:questions',
-  'update:result',
-  'update:validation',
-]);
+const emit = defineEmits(['update:questions', 'update:result', 'update:validation']);
 
 const v$ = useVuelidate();
 
@@ -131,9 +127,8 @@ function initQuestions() {
 async function atQuestionAdded() {
   // wait for new question to render
   await nextTick();
-  const index = isQuestionAdded.index && isQuestionAdded.index === 'last'
-    ? -1
-    : isQuestionAdded.index;
+  const index =
+    isQuestionAdded.index && isQuestionAdded.index === 'last' ? -1 : isQuestionAdded.index;
   auditQuestions.value.at(index).activateQuestion();
 
   isQuestionAdded.value = false;
@@ -154,10 +149,13 @@ const { reloadSortable } = useDestroyableSortable(sortableWrapper, {
 
 watch(v$, () => emit('update:validation', { invalid: isInvalidForm.value, v$: v$.value }));
 watchEffect(initResult);
-watch(() => props.questions, () => {
-  if (!isQuestionAdded.value) return;
-  atQuestionAdded();
-});
+watch(
+  () => props.questions,
+  () => {
+    if (!isQuestionAdded.value) return;
+    atQuestionAdded();
+  },
+);
 
 onMounted(() => {
   initQuestions();

package/src/modules/AuditForm/components/questions/options/__tests__/audit-form-question-options-write-row.spec.js

@@ -1,6 +1,5 @@
 import { mount, shallowMount } from '@vue/test-utils';
-import AuditFormQuestionOptionsWriteRow
-  from '../audit-form-question-options-write-row.vue';
+import AuditFormQuestionOptionsWriteRow from '../audit-form-question-options-write-row.vue';
 
 describe('AuditFormQuestionOptionsWriteRow', () => {
   it('renders a component', () => {

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

@@ -17,9 +17,7 @@ describe('AuditFormQuestionOptions', () => {
         mode: 'write',
       },
     });
-    wrapper.findComponent('.audit-form-question-options-write__add-button')
-    .vm
-    .$emit('click');
+    wrapper.findComponent('.audit-form-question-options-write__add-button').vm.$emit('click');
     expect(wrapper.emitted()['change:question'][0][0].options.length).toBe(2);
   });
   it('deletes existing question option at "delete" icon-btn click', () => {

package/src/modules/AuditForm/components/questions/options/audit-form-question-options-write-row.vue

@@ -47,27 +47,23 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  'change:option',
-  'delete',
-]);
+const emit = defineEmits(['change:option', 'delete']);
 
 // is needed for useVuelidate, because props.question/props.result isn't reactive
 const { option } = toRefs(props);
 
 const v$ = useVuelidate(
-  computed(() => (
-    {
-      option: {
-        name: { required },
-        score: {
-          required,
-          minValue: minValue(0),
-          maxValue: maxValue(10),
-          decimalValidator: decimalValidator(2),
-        },
+  computed(() => ({
+    option: {
+      name: { required },
+      score: {
+        required,
+        minValue: minValue(0),
+        maxValue: maxValue(10),
+        decimalValidator: decimalValidator(2),
       },
-    })),
+    },
+  })),
   { option },
   { $autoDirty: true },
 );

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

@@ -60,10 +60,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  'change:question',
-  'change:result',
-]);
+const emit = defineEmits(['change:question', 'change:result']);
 
 function updateQuestion({ path, value }) {
   emit('change:question', updateObject({ obj: props.question, path, value }));

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

@@ -60,32 +60,28 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits([
-  'change:question',
-  'change:result',
-]);
+const emit = defineEmits(['change:question', 'change:result']);
 
 // is needed for useVuelidate, because props.question/props.result isn't reactive
 const { question } = toRefs(props);
 
 const v$ = useVuelidate(
-  computed(() => (
-    {
-      question: {
-        min: {
-          minValue: minValue(0),
-          maxValue: maxValue(9),
-          required,
-          integer,
-        },
-        max: {
-          minValue: minValue(props.question.min ? props.question.min : 1),
-          maxValue: maxValue(10),
-          required,
-          integer,
-        },
+  computed(() => ({
+    question: {
+      min: {
+        minValue: minValue(0),
+        maxValue: maxValue(9),
+        required,
+        integer,
       },
-    })),
+      max: {
+        minValue: minValue(props.question.min ? props.question.min : 1),
+        maxValue: maxValue(10),
+        required,
+        integer,
+      },
+    },
+  })),
   { question },
   { $autoDirty: true },
 );

package/src/modules/AuditForm/schemas/AuditFormQuestionOptionsSchema.js

@@ -7,7 +7,5 @@ export const generateOption = () => ({
 
 export const generateQuestionOptionsSchema = () => ({
   type: EngineAuditQuestionType.Option,
-  options: [
-    generateOption(),
-  ],
+  options: [generateOption()],
 });

package/src/modules/CSVExport/CSVExport.js

@@ -6,8 +6,7 @@ const cast = {
   object: (separator) => {
     const cast = (object) => {
       if (Array.isArray(object)) {
-        return object.map((item) => cast(item))
-        .join(separator);
+        return object.map((item) => cast(item)).join(separator);
       }
       return object.name || JSON.stringify(object);
     };
@@ -34,8 +33,7 @@ export default class CSVExport {
       header: true,
       delimiter,
     };
-    const localStorageOptions = JSON.parse(localStorage.getItem('csv-export-options')) ||
-      {};
+    const localStorageOptions = JSON.parse(localStorage.getItem('csv-export-options')) || {};
     return {
       ...defaultOptions,
       ...localStorageOptions,
@@ -59,12 +57,10 @@ export default class CSVExport {
     let csv = '';
     let isNext = false;
     // why _columns? https://webitel.atlassian.net/browse/DEV-3797
-    let columns = params._columns ||
-      (params?.fields ? objSnakeToCamel(params?.fields) : []);
+    let columns = params._columns || (params?.fields ? objSnakeToCamel(params?.fields) : []);
     let page = 1;
 
     do {
-
       const { items, next } = await this.fetchMethod({
         ...params,
         page,

package/src/modules/CSVExport/XLSExport.js

@@ -1,5 +1,5 @@
-import * as XLSX from 'xlsx';
 import { saveAs } from 'file-saver-es';
+import * as XLSX from 'xlsx';
 import { objSnakeToCamel } from '../../scripts/caseConverters.js';
 
 export default class XLSExport {
@@ -29,9 +29,9 @@ export default class XLSExport {
 
   // NOTE: creates a new object that only includes the properties specified in the columns array
   filterDataByColumns(data, columns) {
-    return data.map(item => {
-      let filteredItem = {};
-      columns.forEach(column => {
+    return data.map((item) => {
+      const filteredItem = {};
+      columns.forEach((column) => {
         const value = item.hasOwnProperty(column) ? this.extractNameFromObject(item[column]) : ''; // '' needed to display column that has no data
         filteredItem[column] = value;
       });
@@ -41,7 +41,7 @@ export default class XLSExport {
 
   // NOTE: calculates the width of the columns based on the data to display it in the EXEL file
   calculateColumnWidths(data, columns) {
-    return columns.map(column => {
+    return columns.map((column) => {
       const maxLength = data.reduce((max, item) => {
         const value = item[column] || '';
         return Math.max(max, value.toString().length);
@@ -66,8 +66,7 @@ export default class XLSExport {
     let data = [];
     let isNext = false;
     let page = 1;
-    let columns = params._columns ||
-      (params?.fields ? objSnakeToCamel(params?.fields) : []);
+    const columns = params._columns || (params?.fields ? objSnakeToCamel(params?.fields) : []);
 
     do {
       const { items, next } = await this.fetchMethod({

package/src/modules/CSVExport/__tests__/CSVExport.spec.js

@@ -18,8 +18,7 @@ const dataList = [
 describe('CSV Export', () => {
   let wrapper;
   const Component = {
-    render() {
-    },
+    render() {},
     mixins: [CSVExportMixin],
     created() {
       this.initCSVExport(() => ({ items: dataList }), { filename: 'jest' });

package/src/modules/CSVExport/mixins/exportCSVMixin.js

@@ -14,9 +14,7 @@ export default {
       return this.CSVExport ? this.CSVExport.downloadProgress.count : 0;
     },
     selectedIds() {
-      return this.dataList
-      .filter((item) => item._isSelected)
-      .map((item) => item.id);
+      return this.dataList.filter((item) => item._isSelected).map((item) => item.id);
     },
     isAnySelected() {
       return !!this.selectedIds.length;
@@ -31,7 +29,7 @@ export default {
     async exportCSV(exportParams) {
       const routeQuery = this.$route?.query;
       const params = {
-        ...exportParams || routeQuery,
+        ...(exportParams || routeQuery),
         size: 5000,
       };
       if (this.isAnySelected) params.id = this.selectedIds;
@@ -41,7 +39,6 @@ export default {
       } catch (err) {
         throw err;
       }
-
     },
   },
 };