@webitel/ui-sdk 3.2.134 → 3.2.135

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "3.2.134",
+  "version": "3.2.135",
   "private": false,
   "scripts": {
     "serve-lib": "vue-cli-service serve",

package/src/modules/AgentStatusSelect/api/agent-status.js

@@ -1,28 +1,24 @@
 import { AgentServiceApiFactory } from 'webitel-sdk';
-import installOptionsRepository from '../../../_install/InstallOptionsRepository';
 
-let apiService;
+const AgentStatusAPIFactory = ({ instance, OpenAPIConfig }) => {
+  const service = new AgentServiceApiFactory(OpenAPIConfig, '', instance);
 
-const createApiService = () => apiService = new AgentServiceApiFactory(
-  installOptionsRepository.get('openAPIConfig'),
-  '',
-  installOptionsRepository.get('instance'),
-);
+  const patchAgentStatus = async ({ agentId, status, pauseCause }) => {
+    try {
+      const res = await service.updateAgentStatus(agentId, {
+        status,
+        id: agentId,
+        payload: pauseCause,
+      });
+      return { success: !!res };
+    } catch (err) {
+      throw err;
+    }
+  };
 
-export const patchAgentStatus = async ({ agentId, status, pauseCause }) => {
-  if (!apiService) createApiService();
-  try {
-    const res = await apiService.updateAgentStatus(agentId, {
-      status,
-      id: agentId,
-      payload: pauseCause,
-    }, undefined);
-    return { success: !!res };
-  } catch (err) {
-    throw err;
-  }
+  return {
+    patch: patchAgentStatus,
+  };
 };
 
-export default {
-  patch: patchAgentStatus,
-};
+export default AgentStatusAPIFactory;

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

@@ -1,40 +1,47 @@
 import { AgentServiceApiFactory } from 'webitel-sdk';
-import { SdkListGetterApiConsumer } from 'webitel-sdk/esm2015/api-consumers';
-import installOptionsRepository from '../../../_install/InstallOptionsRepository';
+import applyTransform, {
+  merge, mergeEach, notify,
+  snakeToCamel,
+} from '../../../api/transformers';
+import { getDefaultGetListResponse } from '../../../api/defaults';
 
-const _getAgentPauseCauses = (getList) => function ({
-                                                      agentId,
-                                                    } = {}) {
-  const allowChange = true;
-  const params = [agentId, allowChange];
-  return getList(params);
-};
-
-const defaultListObject = {
-  name: '',
-  durationMin: 0,
-  limitMin: 0,
-};
+const PauseCauseAPIFactory = ({ instance, OpenAPIConfig }) => {
 
-let apiService;
-let listGetter;
+  const service = new AgentServiceApiFactory(OpenAPIConfig, '', instance);
 
-const createApiService = () => {
-  apiService = new AgentServiceApiFactory(
-    installOptionsRepository.get('openAPIConfig'),
-    '',
-    installOptionsRepository.get('instance'),
-  );
-  listGetter = new SdkListGetterApiConsumer(apiService.searchPauseCauseForAgent,
-    { defaultListObject })
-    .setGetListMethod(_getAgentPauseCauses);
-}
+  const getList = async ({ agentId }) => {
+    const defaultObject = {
+      name: '',
+      durationMin: 0,
+      limitMin: 0,
+    };
 
-export const getAgentPauseCauses = (params) => {
-  if (!apiService) createApiService();
-  return listGetter.getList(params);
-}
+    const allowChange = true;
+    try {
+      const response = await service.searchPauseCauseForAgent(
+        agentId,
+        allowChange,
+      );
+      const { items, next } = applyTransform(response.data, [
+        snakeToCamel(),
+        merge(getDefaultGetListResponse()),
+      ]);
+      return {
+        items: applyTransform(items, [
+          mergeEach(defaultObject),
+        ]),
+        next,
+      };
+    } catch (err) {
+      throw applyTransform(err, [
+        notify,
+      ]);
+    }
+  };
 
-export default {
-  getList: getAgentPauseCauses,
+  return {
+    getList,
+  };
 };
+
+export default PauseCauseAPIFactory;

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

@@ -1,61 +1,49 @@
-import { shallowMount } from '@vue/test-utils';
-import AgentStatus from '@webitel/ui-sdk/src/enums/AgentStatus/AgentStatus.enum';
+import { shallowMount, mount } from '@vue/test-utils';
 import { createStore } from 'vuex';
-import AgentStatusAPI from '../../api/agent-status';
-import PauseCauseAPI from '../../api/pause-cause';
-import statusSelect from '../../store/agent-status-select';
+import AgentStatus from '../../../../enums/AgentStatus/AgentStatus.enum';
+import * as AgentStatusAPIFactory from '../../api/agent-status';
+import * as PauseCauseAPIFactory from '../../api/pause-cause';
 import WtCcAgentStatusSelect from '../wt-cc-agent-status-select.vue';
 
 const pauseCauses = [{ name: 'jest1' }, { name: 'jest2' }];
 const getAgentPauseCausesMock = jest.fn(() => ({ items: pauseCauses }));
-jest.spyOn(PauseCauseAPI, 'getList').mockImplementation(getAgentPauseCausesMock);
+// https://stackoverflow.com/a/63727813
+jest.spyOn(PauseCauseAPIFactory, 'default').mockImplementation(() => ({ getList: getAgentPauseCausesMock }));
 
-const agentStatusMock = jest.fn(() => {
-});
-jest.spyOn(AgentStatusAPI, 'patch').mockImplementation(agentStatusMock);
+const agentStatusMock = jest.fn(() => {});
+// https://stackoverflow.com/a/63727813
+jest.spyOn(AgentStatusAPIFactory, 'default').mockImplementation(() => ({ patch: agentStatusMock }));
 
-const namespace = 'agents';
 const agent = {
   status: '',
   agentId: 1,
 };
-const updateAgentStatusMock = jest.fn();
-jest.spyOn(statusSelect.actions, 'UPDATE_AGENT_STATUS')
-  .mockImplementation(updateAgentStatusMock);
-
-const store = createStore({
-  modules: {
-    [namespace]: {
-      state: { agent },
-      modules: { statusSelect },
-      namespaced: true,
-    },
-  },
-});
 
 const mountOptions = {
-  global: { plugins: [store] },
   props: {
     agentId: agent.agentId,
     status: agent.status,
   },
+  global: {
+    plugins: [createStore({})],
+  },
+  shallow: true,
 };
 
 describe('Wt Cc Agent Status Select', () => {
   beforeEach(() => {
-    updateAgentStatusMock.mockClear();
     getAgentPauseCausesMock.mockClear();
   });
   it('renders a component', () => {
     const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
     expect(wrapper.exists())
-      .toBe(true);
+    .toBe(true);
   });
-  it(`at wt-status-select "change" to "online" event, triggers UPDATE_AGENT_STATUS
+  it(`at wt-status-select "change" to "online" event, triggers agent status patch
    with "online" status`, () => {
     const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
     wrapper.findComponent({ name: 'wt-status-select' })
-      .vm.$emit('change', AgentStatus.ONLINE);
+    .vm.$emit('change', AgentStatus.ONLINE);
     const reqPayload = {
       status: AgentStatus.ONLINE, agentId: agent.agentId, payload: undefined,
     };
@@ -64,27 +52,29 @@ describe('Wt Cc Agent Status Select', () => {
   it('at wt-status-select "change" to "pause" event, pause causes are loaded', async () => {
     const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
     wrapper.findComponent({ name: 'wt-status-select' })
-      .vm.$emit('change', AgentStatus.PAUSE);
+    .vm.$emit('change', AgentStatus.PAUSE);
     await wrapper.vm.$nextTick();
     expect(getAgentPauseCausesMock).toHaveBeenCalled();
   });
   it(`at wt-status-select "change" to "pause" event and pause causes truthy response,
    pause-cause-popup appears`, async () => {
-    const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
+    const wrapper = mount(WtCcAgentStatusSelect, mountOptions);
     wrapper.findComponent({ name: 'wt-status-select' })
-      .vm.$emit('change', AgentStatus.PAUSE);
+    .vm.$emit('change', AgentStatus.PAUSE);
     await wrapper.vm.$nextTick(); // load pause causes
+    await wrapper.vm.$nextTick();
     await wrapper.vm.$nextTick(); // render popup
-    expect(wrapper.findComponent({ name: 'wt-cc-pause-cause-popup' }).isVisible()).toBe(true);
+    expect(wrapper.findComponent({ name: 'pause-cause-popup' }).isVisible()).toBe(true);
   });
-  it(`at pause-cause-popup "change" event, triggers UPDATE_AGENT_STATUS
+  it(`at pause-cause-popup "change" event, triggers patch agent status
    with "pause" status and passed pauseCause`, async () => {
     const pauseCause = 'jest';
-    const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
+    const wrapper = mount(WtCcAgentStatusSelect, mountOptions);
     wrapper.vm.openPauseCausePopup();
     await wrapper.vm.$nextTick();
-    wrapper.findComponent({ name: 'wt-cc-pause-cause-popup' })
-      .vm.$emit('change', pauseCause);
+    await wrapper.vm.$nextTick();
+    wrapper.findComponent({ name: 'pause-cause-popup' })
+    .vm.$emit('change', pauseCause);
     const reqPayload = {
       status: AgentStatus.PAUSE, agentId: agent.agentId, pauseCause,
     };

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

@@ -8,25 +8,11 @@ describe('Pause cause popup', () => {
       .toBe(true);
   });
   it('at option input event, sets "selected" its value', () => {
-    const radioValue = 'jest';
+    const value = 'jest';
     const wrapper = mount(WtCcPauseCausePopup, {
-      props: { options: [radioValue] },
+      props: { options: [{ value }] },
     });
     wrapper.findComponent({ name: 'wt-radio' }).vm.$emit('input');
-    expect(wrapper.vm.selected).toEqual(radioValue);
-  });
-  it('isDurationOverflow with limit = 0 returns false', () => {
-    const wrapper = shallowMount(WtCcPauseCausePopup);
-    const option = { durationMin: 10, limitMin: 0 };
-    expect(wrapper.vm.isDurationOverflow(option)).toBe(false);
-  });
-  it('at "ok" btn click, emits "change" with "selected" value', () => {
-    const selected = { name: 'jest' };
-    const expectedValue = selected.name;
-    const wrapper = shallowMount(WtCcPauseCausePopup, {
-      data: () => ({ selected }),
-    });
-    wrapper.findComponent({ name: 'wt-button' }).vm.$emit('click');
-    expect(wrapper.emitted().change[0]).toEqual([expectedValue]);
+    expect(wrapper.vm.selected.value).toEqual(value);
   });
 });

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

@@ -11,21 +11,21 @@
       <form @submit.prevent="setPause">
         <ul>
           <li
-            class="wt-cc-pause-cause-popup__option"
+            class="wt-cc-pause-cause-popup-option"
             v-for="(option) of pauseCause"
             :key="option.id"
           >
             <wt-radio
-              class="wt-cc-pause-cause-popup__option__radio"
+              class="wt-cc-pause-cause-popup-option__radio"
               :selected="selected.id"
               :value="option.id"
               :label="option.name"
               @input="select(option)"
             ></wt-radio>
-            <div class="wt-cc-pause-cause-popup__option__limits-wrapper">
+            <div class="wt-cc-pause-cause-popup-option__limits-wrapper">
               <span
                 :class="{
-                    'wt-cc-pause-cause-popup__option__duration--overflow': option.isOverflow,
+                    'wt-cc-pause-cause-popup-option__duration--overflow': option.isOverflow,
                  }"
               >
                 {{ option.duration }}
@@ -55,9 +55,7 @@
 <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';
 
 const props = defineProps({
   options: {
@@ -101,7 +99,7 @@ function setPause() {
 </script>
 
 <style lang="scss" scoped>
-.wt-cc-pause-cause-popup__option {
+.wt-cc-pause-cause-popup-option {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -111,13 +109,13 @@ function setPause() {
   }
 }
 
-.wt-cc-pause-cause-popup__option__limits-wrapper {
+.wt-cc-pause-cause-popup-option__limits-wrapper {
   & > span {
     @extend %typo-caption;
     padding: 6px 10px;
   }
 
-  .wt-cc-pause-cause-popup__option__duration--overflow {
+  .wt-cc-pause-cause-popup-option__duration--overflow {
     color: var(--false-color);
   }
 }

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

@@ -0,0 +1,56 @@
+<template>
+  <wt-popup
+    class="wt-cc-status-select-error-popup"
+    min-width="480"
+    @close="close"
+  >
+    <template v-slot:header>
+      {{ $t('webitelUI.agentStatusSelect.statusSelectErrorPopup.title') }}
+    </template>
+    <template v-slot:main>
+      <article class="wt-cc-status-select-error-popup__main-wrapper">
+        <wt-icon
+          icon="attention"
+          color="danger"
+        ></wt-icon>
+        <p class="wt-cc-status-select-error-popup__message">
+          {{ $t(`webitelUI.agentStatusSelect.statusSelectErrorPopup.${'message'}`) }}
+        </p>
+      </article>
+    </template>
+    <template v-slot:actions>
+      <wt-button
+        color="secondary"
+        @click="close"
+      >{{ $t('reusable.ok') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup>
+
+const props = defineProps({
+  error: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emit = defineEmits(['close']);
+
+function close() {
+  emit('close');
+}
+
+</script>
+
+<style lang="scss" scoped>
+.wt-cc-status-select-error-popup__main-wrapper {
+  display: flex;
+  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

@@ -1,7 +1,6 @@
 <template>
   <article class="wt-cc-agent-status-select">
     <wt-status-select
-      class="wt-cc-agent-status-select__status-select"
       :status="status"
       :status-duration="statusDuration"
       @change="handleStatusSelectInput"
@@ -12,88 +11,96 @@
       @change="handlePauseCauseInput"
       @close="closePauseCausePopup"
     ></pause-cause-popup>
+    <status-select-error-popup
+      v-if="error"
+      :error="error"
+      @close="error = null"
+    ></status-select-error-popup>
   </article>
 </template>
 
-<script>
-import AgentStatus from '@webitel/ui-sdk/src/enums/AgentStatus/AgentStatus.enum';
-import AgentStatusAPI from '../api/agent-status';
-import PauseCauseAPI from '../api/pause-cause';
+<script setup>
+import AgentStatus from '../../../enums/AgentStatus/AgentStatus.enum';
+import { ref } from 'vue';
+import { useStore } from 'vuex';
+import AgentStatusAPIFactory from '../api/agent-status';
+import PauseCauseAPIFactory from '../api/pause-cause';
 import PauseCausePopup from './_internals/wt-cc-pause-cause-popup.vue';
+import StatusSelectErrorPopup from './_internals/wt-cc-status-select-error-popup.vue';
 
-export default {
-  name: 'wt-cc-agent-status-select',
-  components: { PauseCausePopup },
-  props: {
-    agentId: {
-      type: [String, Number],
-    },
-    status: {
-      // can be undefined, is agent wasn't loaded yet
-      default: AgentStatus.OFFLINE,
-    },
-    statusDuration: {
-      type: [Number, String],
-      default: 0,
-    },
+const props = defineProps({
+  agentId: {
+    type: [String, Number],
+    required: true,
   },
-  data: () => ({
-    isPauseCausePopup: false,
-    pauseCauses: [],
-  }),
-  methods: {
-    async updateStatus({ agentId, status, pauseCause }) {
-      try {
-        await AgentStatusAPI.patch({ agentId, status, pauseCause });
-      } catch (err) {
-        throw err;
-      }
-    },
-    async handleStatusSelectInput(status) {
-      if (status === AgentStatus.PAUSE) {
-        await this.loadPauseCauses();
-        if (this.pauseCauses.length) {
-          this.openPauseCausePopup();
-          return;
-        }
-      }
-      if (status === this.status) return;
-      await this.changeStatus({ status });
-    },
-    handlePauseCauseInput(pauseCause) {
-      const status = AgentStatus.PAUSE;
-      this.changeStatus({ status, pauseCause });
-    },
-    async changeStatus({ status, pauseCause }) {
-      const statusPayload = { agentId: this.agentId, status, pauseCause };
-      try {
-        await this.updateStatus(statusPayload);
-        this.$emit('changed', statusPayload);
-      } catch (err) {
-        console.error(err);
-      }
-    },
-    async loadPauseCauses() {
-      this.isLoaded = false;
-      try {
-        const response = await PauseCauseAPI.getList({ agentId: this.agentId });
-        this.pauseCauses = response.items;
-      } catch {
-      }
-      this.isLoaded = true;
-    },
-    openPauseCausePopup() {
-      this.isPauseCausePopup = true;
-    },
-    closePauseCausePopup() {
-      this.isPauseCausePopup = false;
-    },
+  status: {
+    // can be undefined, is agent wasn't loaded yet
+    default: AgentStatus.OFFLINE,
   },
-};
+  statusDuration: {
+    type: [Number, String],
+    default: 0,
+  },
+});
+
+const emit = defineEmits(['changed']);
+
+const { api } = useStore().state;
+const AgentStatusAPI = AgentStatusAPIFactory(api);
+const PauseCauseAPI = PauseCauseAPIFactory(api);
+
+const isPauseCausePopup = ref(false);
+const pauseCauses = ref([]);
+const error = ref(null);
+
+function openPauseCausePopup() {
+  isPauseCausePopup.value = true;
+}
+
+function closePauseCausePopup() {
+  isPauseCausePopup.value = false;
+}
+
+async function loadPauseCauses() {
+  const response = await PauseCauseAPI.getList({ agentId: props.agentId });
+  pauseCauses.value = response.items;
+}
+
+async function updateStatus({ agentId, status, pauseCause }) {
+  return AgentStatusAPI.patch({ agentId, status, pauseCause });
+}
+
+async function changeStatus({ status, pauseCause }) {
+  try {
+    const statusPayload = { agentId: props.agentId, status, pauseCause };
+    await updateStatus(statusPayload);
+    emit('changed', statusPayload);
+  } catch (err) {
+    error.value = err;
+    throw err;
+  }
+}
+
+async function handleStatusSelectInput(status) {
+  if (status === AgentStatus.PAUSE) {
+    await loadPauseCauses();
+    if (pauseCauses.value.length) {
+      openPauseCausePopup();
+      return;
+    }
+  }
+  if (status === props.status) return;
+  await changeStatus({ status });
+}
+
+function handlePauseCauseInput(pauseCause) {
+  const status = AgentStatus.PAUSE;
+  return changeStatus({ status, pauseCause });
+}
 </script>
 
 <style lang="scss" scoped>
-.wt-cc-agent-status-select__status-select {
+.wt-cc-agent-status-select .wt-status-select {
   max-width: 200px;
 }
 </style>

package/src/modules/Filters/components/filter-table-fields.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script setup>
-import getNamespacedState from '@webitel/ui-sdk/src/store/helpers/getNamespacedState';
 import { computed } from 'vue';
 import { useStore } from 'vuex';
+import getNamespacedState from '../../../store/helpers/getNamespacedState';
 
 const props = defineProps({
   namespace: {

package/src/modules/AgentStatusSelect/api/__tests__/agent-status.spec.js

@@ -1,21 +0,0 @@
-import installOptionsRepository from '../../../../_install/InstallOptionsRepository';
-import AgentStatusAPI from '../agent-status';
-
-/* mock SDK method api response with instance mock
- jest.spyOn(instance) used instead of jest.mock('@/app/api/instance) because WebStorm
-  doesn't watch path changes in jest.mock()
- */
-const patchMock = jest.fn();
-jest.spyOn(installOptionsRepository.get('instance'), 'request')
-.mockImplementation(patchMock);
-
-describe('Agent Status API', () => {
-  it('patch: correctly processes response', async () => {
-    const payload = { agentId: 1, status: 'jest', pauseCause: 'jest' };
-    const expectedData = { id: 1, status: 'jest', payload: 'jest' };
-    await AgentStatusAPI.patch(payload);
-    expect(patchMock).toHaveBeenCalled();
-    const reqData = JSON.parse(patchMock.mock.calls[0][0].data);
-    expect(reqData).toEqual(expectedData);
-  });
-});

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

@@ -1,29 +0,0 @@
-import installOptionsRepository from '../../../../_install/InstallOptionsRepository';
-import PauseCauseAPI from '../pause-cause';
-
-const items = [{ id: 1, name: 'jest' }];
-const expectedResponse = {
-  next: false,
-  items: [{
-    id: 1,
-    name: 'jest',
-    durationMin: 0,
-    limitMin: 0,
-  }],
-};
-
-/* mock SDK method api response with instance mock
- jest.spyOn(instance) used instead of jest.mock('@/app/api/instance) because WebStorm
-  doesn't watch path changes in jest.mock()
- */
-const getMock = jest.fn(() => ({ items }));
-jest.spyOn(installOptionsRepository.get('instance'), 'request')
-.mockImplementation(getMock);
-
-describe('Agent Pause Cause API', () => {
-  it('getList: correctly processes response', async () => {
-    const response = await PauseCauseAPI.getList({ agentId: 0 });
-    expect(getMock).toHaveBeenCalled();
-    expect(response).toEqual(expectedResponse);
-  });
-});