@webitel/ui-sdk 0.1.1 → 0.1.2-vite

package/src/mixins/dataFilterMixins/_urlControllerMixin/_urlControllerMixin.js

@@ -0,0 +1,37 @@
+import deepEqual from 'deep-equal';
+
+export default {
+  methods: {
+    changeRouteQuery({ filterQuery, value }) {
+      const query = { ...this.$route.query };
+      query[filterQuery] = value;
+      return this.$router.replace({
+        name: this.$router.currentRoute.name,
+        query,
+      });
+    },
+
+    async setValueToQuery({ filterQuery, value, storedProp = 'id' }) {
+      let newValue = '';
+      if (Array.isArray(value)) {
+        if (value.length && typeof value[0] !== 'object') {
+          newValue = value;
+        } else {
+          newValue = value.map((item) => item[storedProp]);
+        }
+      } else {
+        newValue = value;
+      }
+      if (!deepEqual(this.$route.query[filterQuery], newValue)) {
+        await this.changeRouteQuery({
+          value: newValue,
+          filterQuery,
+        });
+      }
+    },
+
+    getValueFromQuery({ filterQuery }) {
+      return this.$route.query[filterQuery];
+    },
+  },
+};

package/src/mixins/dataFilterMixins/apiFilterMixin.js

@@ -0,0 +1,23 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+export default {
+  mixins: [baseFilterMixin],
+
+  data: () => ({
+    value: [],
+    defaultValue: [],
+    trackBy: 'id',
+    storedProp: 'id',
+  }),
+
+  methods: {
+    async restoreValue(idList) {
+      this.value = idList && idList.length
+        ? await this.fetchSelected(idList) : this.defaultValue;
+    },
+
+    async fetchSelected(idList) {
+      return idList;
+    },
+  },
+};

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

@@ -0,0 +1,29 @@
+import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
+
+export default {
+  mixins: [_urlControllerMixin],
+  data: () => ({
+    defaultValue: '',
+  }),
+
+  watch: {
+    '$route.query': {
+      handler(newValue, oldValue) {
+        if (newValue[this.filterQuery] !== oldValue[this.filterQuery]) {
+          this.restore({ filterQuery: this.filterQuery });
+        }
+      },
+    },
+  },
+
+  created() {
+    this.restore({ filterQuery: this.filterQuery });
+  },
+
+  methods: {
+    restore({ filterQuery }) {
+      const value = this.getValueFromQuery({ filterQuery }) || this.defaultValue;
+      this.restoreValue(value);
+    },
+  },
+};

package/src/mixins/dataFilterMixins/enumFilterMixin.js

@@ -0,0 +1,30 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+export default {
+  mixins: [baseFilterMixin],
+
+  data: () => ({
+    value: [],
+    defaultValue: [],
+    trackBy: 'value',
+    storedProp: 'value',
+  }),
+
+  computed: {
+    options() {
+      return [];
+    },
+  },
+
+  methods: {
+    restoreValue(value) {
+      if (Array.isArray(value)) {
+        this.value = this.options
+        .filter((option) => value.some((value) => `${value}` === option[this.storedProp]));
+      } else {
+        this.value = this.options
+        .find((option) => option[this.storedProp] === value) || this.defaultValue;
+      }
+    },
+  },
+};

package/src/mixins/dataFilterMixins/paginationFilterMixin.js

@@ -0,0 +1,79 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+export default {
+  mixins: [baseFilterMixin],
+
+  props: {
+    isNext: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data: () => ({
+    page: '1',
+    size: '10',
+  }),
+
+  watch: {
+    '$route.query': {
+      handler(newValue, oldValue) {
+        if (newValue.page !== oldValue.page
+          || newValue.size !== oldValue.size) {
+          this.restore();
+        }
+      },
+    },
+  },
+
+  computed: {
+    isPrev() {
+      return +this.page > 1;
+    },
+  },
+
+  methods: {
+    restore() {
+      this.restorePage();
+      this.restoreSize();
+    },
+
+    restorePage() {
+      const page = '1';
+      this.page = this.getValueFromQuery({ filterQuery: 'page' }) || page;
+    },
+
+    restoreSize() {
+      const size = '10';
+      this.size = this.getValueFromQuery({ filterQuery: 'size' }) || size;
+    },
+
+    next() {
+      this.$emit('input');
+      const value = `${+this.page + 1}`;
+      this.page = value;
+      return this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    prev() {
+      this.$emit('input');
+      const value = `${+this.page - 1}`;
+      this.page = value;
+      return this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    sizeChange(value) {
+      this.$emit('input');
+      return this.setValueToQuery({
+        filterQuery: 'size',
+        value,
+      });
+    },
+  },
+};

package/src/mixins/dataFilterMixins/sortFilterMixin.js

@@ -0,0 +1,75 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+const SortSymbols = Object.freeze({
+  ASC: 'asc',
+  DESC: 'desc',
+  NONE: null,
+});
+
+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;
+  }
+};
+
+const sortToQueryAdapter = (order) => {
+  switch (order) {
+    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;
+  }
+};
+
+const encodeSortQuery = ({ column, order }) => (`${sortToQueryAdapter(order)}${column.field}`);
+
+const decodeSortQuery = ({ value }) => {
+  const sort = queryToSortAdapter(value.slice(0, 1));
+  const sortedColumn = sort ? value.slice(1) : value;
+  return {
+    [sortedColumn]: sort,
+  };
+};
+
+export default {
+  mixins: [baseFilterMixin],
+  data: () => ({
+    filterQuery: 'sort',
+  }),
+  methods: {
+    sort(column) {
+      const order = getNextSortOrder(column.sort);
+      return this.setValue({ column, order });
+    },
+
+    setValue({ column, order }) {
+      this.headers = this.headers.map((col) => ({
+        ...col,
+        sort: col === column ? order : null,
+      }));
+      const value = encodeSortQuery({ column, order });
+      return this.setValueToQuery({
+        value,
+        filterQuery: this.filterQuery,
+      });
+    },
+
+    restoreValue(value) {
+      const sortedColumns = decodeSortQuery({ value });
+      this.headers = this.headers.map((header) => ({
+        ...header,
+        sort: sortedColumns[header.field] || null,
+      }));
+    },
+  },
+};

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

@@ -0,0 +1,47 @@
+import { shallowMount } from '@vue/test-utils';
+import validationMixin from '../validationMixin';
+
+describe('Validation mixin', () => {
+  let wrapper;
+  const Component = {
+    render() {
+    },
+    mixins: [validationMixin],
+  };
+
+  it('detects validation prop', () => {
+    wrapper = shallowMount(Component, {
+      props: {
+        v: {
+          $error: true,
+        },
+      },
+    });
+    expect(wrapper.vm.isValidation).toBeTruthy();
+    expect(wrapper.vm.invalid).toBeTruthy();
+  });
+
+  it('computes error message on validation error', () => {
+    wrapper = shallowMount(Component, {
+      props: {
+        v: {
+          $error: true,
+          email: { $invalid: true },
+        },
+      },
+    });
+    expect(wrapper.vm.validationText).toBe('validation.email');
+  });
+
+  it('prioritizes error messages', () => {
+    wrapper = shallowMount(Component, {
+      props: {
+        v: {
+          $error: true,
+          required: { $invalid: true },
+        },
+      },
+    });
+    expect(wrapper.vm.validationText).toBe('validation.required');
+  });
+});

package/src/mixins/validationMixin/useValidation.js

@@ -0,0 +1,41 @@
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export function useValidation({ v, customValidators }) {
+  const { t } = useI18n();
+  const isValidation = computed(() => !!v.value && !!Object.keys(v.value).length);
+  const invalid = computed(() => isValidation.value && v.value.$error);
+
+  const validationText = computed(() => {
+    let validationText = '';
+    if (isValidation && invalid) {
+      if (v.value.required?.$invalid) validationText = t('validation.required');
+      else if (v.value.numeric?.$invalid) validationText = t('validation.numeric');
+      else if (v.value.email?.$invalid) validationText = t('validation.email');
+      else if (v.value.gatewayHostValidator?.$invalid) validationText = t('validation.gatewayHostValidator');
+      else if (v.value.ipValidator?.$invalid) validationText = t('validation.ipValidator');
+      else if (v.value.macValidator?.$invalid) validationText = t('validation.macValidator');
+      else if (v.value.minValue?.$invalid) validationText = `${t('validation.minValue')} ${v.value.minValue.$params.min}`;
+      else if (v.value.maxValue?.$invalid) validationText = `${t('validation.maxValue')} ${v.value.maxValue.$params.max}`;
+      else if (v.value.sipAccountValidator?.$invalid) validationText = t('validation.sipAccountValidator');
+      else if (v.value.minLength?.$invalid) validationText = `${t('validation.minLength')} ${v.value.minLength.$params.min}`;
+      else if (v.value.url?.$invalid) validationText = `${t('validation.url')}`;
+      else if (v.value.regExpValidator?.$invalid) validationText = `${t('validation.regExpValidator')}`;
+      else if (v.value.sameAs?.$invalid) validationText = `${t('validation.sameAs')}`;
+      else if (v.value.domainValidator?.$invalid) validationText = `${t('validation.domainValidator')}`;
+      else if (v.value.decimalValidator?.$invalid) validationText = `${t('validation.decimalValidator')} ${v.value.decimalValidator.$params.count}`;
+      else if (v.value.integer?.$invalid) validationText = `${t('validation.integer')}`;
+    }
+    // eslint-disable-next-line no-restricted-syntax
+    for (const { name, text } of customValidators) {
+      if (v.value[name]?.$invalid) validationText = text;
+    }
+    return validationText;
+  });
+
+  return {
+    isValidation,
+    invalid,
+    validationText,
+  };
+}

package/src/mixins/validationMixin/validationMixin.js

@@ -4,6 +4,10 @@ export default {
     v: {
       type: Object,
     },
+    customValidators: {
+      type: Array,
+      default: () => [],
+    },
   },
   computed: {
     isValidation() {
@@ -13,18 +17,30 @@ export default {
       return this.isValidation && this.v.$error;
     },
     validationText() {
+      let validationText = '';
       if (this.isValidation && this.invalid) {
-        if (this.v.required === false) {
-          return this.$t('validation.required');
-        }
-        if (this.v.numeric === false) {
-          return this.$t('validation.numeric');
-        }
-        if (this.v.email === false) {
-          return this.$t('validation.email');
-        }
+        if (this.v.required?.$invalid) validationText = this.$t('validation.required');
+        else if (this.v.numeric?.$invalid) validationText = this.$t('validation.numeric');
+        else if (this.v.email?.$invalid) validationText = this.$t('validation.email');
+        else if (this.v.gatewayHostValidator?.$invalid) validationText = this.$t('validation.gatewayHostValidator');
+        else if (this.v.ipValidator?.$invalid) validationText = this.$t('validation.ipValidator');
+        else if (this.v.macValidator?.$invalid) validationText = this.$t('validation.macValidator');
+        else if (this.v.minValue?.$invalid) validationText = `${this.$t('validation.minValue')} ${this.v.minValue.$params.min}`;
+        else if (this.v.maxValue?.$invalid) validationText = `${this.$t('validation.maxValue')} ${this.v.maxValue.$params.max}`;
+        else if (this.v.sipAccountValidator?.$invalid) validationText = this.$t('validation.sipAccountValidator');
+        else if (this.v.minLength?.$invalid) validationText = `${this.$t('validation.minLength')} ${this.v.minLength.$params.min}`;
+        else if (this.v.url?.$invalid) validationText = `${this.$t('validation.url')}`;
+        else if (this.v.regExpValidator?.$invalid) validationText = `${this.$t('validation.regExpValidator')}`;
+        else if (this.v.sameAs?.$invalid) validationText = `${this.$t('validation.sameAs')}`;
+        else if (this.v.domainValidator?.$invalid) validationText = `${this.$t('validation.domainValidator')}`;
+        else if (this.v.decimalValidator?.$invalid) validationText = `${this.$t('validation.decimalValidator')} ${this.v.decimalValidator.$params.count}`;
+        else if (this.v.integer?.$invalid) validationText = `${this.$t('validation.integer')}`;
+      }
+      // eslint-disable-next-line no-restricted-syntax
+      for (const { name, text } of this.customValidators) {
+        if (this.v[name]?.$invalid) validationText = text;
       }
-      return '';
+      return validationText;
     },
   },
 };

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

@@ -0,0 +1,24 @@
+import { AgentServiceApiFactory } from 'webitel-sdk';
+
+const AgentStatusAPIFactory = ({ instance, OpenAPIConfig }) => {
+  const service = new AgentServiceApiFactory(OpenAPIConfig, '', 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;
+    }
+  };
+
+  return {
+    patch: patchAgentStatus,
+  };
+};
+
+export default AgentStatusAPIFactory;

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

@@ -0,0 +1,47 @@
+import { AgentServiceApiFactory } from 'webitel-sdk';
+import applyTransform, {
+  merge, mergeEach, notify,
+  snakeToCamel,
+} from '../../../api/transformers';
+import { getDefaultGetListResponse } from '../../../api/defaults';
+
+const PauseCauseAPIFactory = ({ instance, OpenAPIConfig }) => {
+
+  const service = new AgentServiceApiFactory(OpenAPIConfig, '', instance);
+
+  const getList = async ({ agentId }) => {
+    const defaultObject = {
+      name: '',
+      durationMin: 0,
+      limitMin: 0,
+    };
+
+    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,
+      ]);
+    }
+  };
+
+  return {
+    getList,
+  };
+};
+
+export default PauseCauseAPIFactory;

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

@@ -0,0 +1,83 @@
+import { shallowMount, mount } 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 WtCcAgentStatusSelect from '../wt-cc-agent-status-select.vue';
+
+const pauseCauses = [{ name: 'jest1' }, { name: 'jest2' }];
+const getAgentPauseCausesMock = jest.fn(() => ({ items: pauseCauses }));
+// https://stackoverflow.com/a/63727813
+jest.spyOn(PauseCauseAPIFactory, 'default').mockImplementation(() => ({ getList: getAgentPauseCausesMock }));
+
+const agentStatusMock = jest.fn(() => {});
+// https://stackoverflow.com/a/63727813
+jest.spyOn(AgentStatusAPIFactory, 'default').mockImplementation(() => ({ patch: agentStatusMock }));
+
+const agent = {
+  status: '',
+  agentId: 1,
+};
+
+const mountOptions = {
+  props: {
+    agentId: agent.agentId,
+    status: agent.status,
+  },
+  global: {
+    plugins: [createStore({})],
+  },
+  shallow: true,
+};
+
+describe('Wt Cc Agent Status Select', () => {
+  beforeEach(() => {
+    getAgentPauseCausesMock.mockClear();
+  });
+  it('renders a component', () => {
+    const wrapper = shallowMount(WtCcAgentStatusSelect, mountOptions);
+    expect(wrapper.exists())
+    .toBe(true);
+  });
+  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);
+    const reqPayload = {
+      status: AgentStatus.ONLINE, agentId: agent.agentId, payload: undefined,
+    };
+    expect(agentStatusMock).toHaveBeenCalledWith(reqPayload);
+  });
+  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);
+    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 = mount(WtCcAgentStatusSelect, mountOptions);
+    wrapper.findComponent({ name: 'wt-status-select' })
+    .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: 'pause-cause-popup' }).isVisible()).toBe(true);
+  });
+  it(`at pause-cause-popup "change" event, triggers patch agent status
+   with "pause" status and passed pauseCause`, async () => {
+    const pauseCause = 'jest';
+    const wrapper = mount(WtCcAgentStatusSelect, mountOptions);
+    wrapper.vm.openPauseCausePopup();
+    await wrapper.vm.$nextTick();
+    await wrapper.vm.$nextTick();
+    wrapper.findComponent({ name: 'pause-cause-popup' })
+    .vm.$emit('change', pauseCause);
+    const reqPayload = {
+      status: AgentStatus.PAUSE, agentId: agent.agentId, pauseCause,
+    };
+    expect(agentStatusMock).toHaveBeenCalledWith(reqPayload);
+  });
+});

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

@@ -0,0 +1,18 @@
+import { shallowMount, mount } 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);
+  });
+  it('at option input event, sets "selected" its value', () => {
+    const value = 'jest';
+    const wrapper = mount(WtCcPauseCausePopup, {
+      props: { options: [{ value }] },
+    });
+    wrapper.findComponent({ name: 'wt-radio' }).vm.$emit('input');
+    expect(wrapper.vm.selected.value).toEqual(value);
+  });
+});