@webitel/ui-sdk 0.1.13 → 0.1.100

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

@@ -0,0 +1,57 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import apiFilterMixin from '../apiFilterMixin';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+const team = ['1', '2'];
+
+describe('API filter mixin', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [apiFilterMixin],
+    data: () => ({
+      filterQuery: 'team',
+    }),
+  };
+
+  beforeEach(() => {
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { team } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual(team);
+  });
+
+  it('Sets empty array value if $route query is empty', async () => {
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      data: () => ({
+        filterQuery: 'queue',
+      }),
+    });
+    expect(wrapper.vm.value).toEqual([]);
+  });
+
+  it('Resets value after $route query reset', async () => {
+    await router.replace({ query: { team } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual(team);
+    await wrapper.vm.$router.replace({ query: null });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual([]);
+  });
+});

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

@@ -0,0 +1,66 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import enumFilterMixin from '../enumFilterMixin';
+
+const options = [{
+    name: 'Inbound',
+    value: 'inbound',
+  },
+  {
+    name: 'Outbound',
+    value: 'outbound',
+  }];
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('Enum filter mixin', () => {
+  let wrapper;
+  const Component = {
+    render() {
+    },
+    mixins: [enumFilterMixin],
+    data: () => ({
+      filterQuery: 'type',
+      options,
+    }),
+  };
+
+  beforeEach(() => {
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { type: [options[0].value] } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual([options[0]]);
+  });
+
+  it('Correctly sets single value from $route query', async () => {
+    await router.replace({ query: { type: options[0].value } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual(options[0]);
+  });
+
+  it('Resets value after $route query reset', async () => {
+    await router.replace({ query: { type: [options[0].value] } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual([options[0]]);
+    await wrapper.vm.$router.replace({ query: null });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.value).toEqual([]);
+  });
+});

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

@@ -0,0 +1,93 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import paginationFilterMixin from '../paginationFilterMixin';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+const page = '2';
+const size = '20';
+
+describe('Pagination filter mixin', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [paginationFilterMixin],
+  };
+
+  beforeEach(() => {
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.page).toEqual(page);
+    expect(wrapper.vm.size).toEqual(size);
+  });
+
+  it('Sets initial value if $route query is empty', async () => {
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      data: () => ({
+        filterQuery: 'queue',
+      }),
+    });
+    expect(wrapper.vm.page).toEqual('1');
+    expect(wrapper.vm.size).toEqual('10');
+  });
+
+  it('Resets value after $route query reset', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$router.replace({ query: null });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.vm.page).toEqual('1');
+    expect(wrapper.vm.size).toEqual('10');
+  });
+
+  it('At "prev" page, changes query and emits event', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.prev();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe(`${page - 1}`);
+  });
+
+  it('At "next" page, changes query and emits event', async () => {
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.next();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe(`${+page + 1}`);
+  });
+
+  it('At "sizeChange", changes query and emits event', async () => {
+    const newSize = '40';
+    await router.replace({ query: { page, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.sizeChange(newSize);
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.size).toBe(newSize);
+  });
+});

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

@@ -0,0 +1,60 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import sortFilterMixin from '../sortFilterMixin';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+const headers = [{
+  value: 'queue',
+  show: true,
+  sort: null,
+  field: 'queue',
+}, {
+  value: 'agents',
+  show: true,
+  sort: null,
+  field: 'online',
+}];
+
+const $t = () => {};
+
+describe('Sort filter mixin', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [sortFilterMixin],
+    data: () => ({ headers }),
+  };
+
+  beforeEach(() => {
+    router.replace('/');
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      mocks: { $t },
+    });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ path: '/', query: { sort: '+queue' } });
+    const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
+    expect(queue.sort).toEqual('asc');
+  });
+
+  it('After "sort" trigger, header column sort value changes properly', () => {
+    let queue;
+    queue = wrapper.vm.headers.find((header) => header.value === 'queue');
+    wrapper.vm.sort(queue);
+    queue = wrapper.vm.headers.find((header) => header.value === 'queue');
+    expect(queue.sort).toEqual('asc');
+  });
+
+  it('After "sort" trigger, url query changes properly', async () => {
+    await router.replace({ path: '/', query: { sort: '+queue' } });
+    const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
+    wrapper.vm.sort(queue);
+    expect(wrapper.vm.$route.query.sort).toEqual('-queue');
+  });
+});

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

@@ -0,0 +1,48 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+const $t = () => {};
+const filterQuery = 'team';
+
+describe('URL Controller mixin Set and Get operations', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [_urlControllerMixin],
+  };
+
+  beforeEach(() => {
+    router.replace('/');
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      mocks: { $t },
+    });
+  });
+
+  it('Array of objects', async () => {
+    const value = [{ name: 'team 1', id: '1' }, { name: 'team 2', id: '2' }];
+    wrapper.vm.setValueToQuery({ filterQuery, value });
+    const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
+    expect(queryValue).toEqual(['1', '2']);
+  });
+
+  it('Array of values', async () => {
+    const value = ['hello', '1'];
+    wrapper.vm.setValueToQuery({ filterQuery, value });
+    const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
+    expect(queryValue).toEqual(value);
+  });
+
+  it('String value', async () => {
+    const value = 'hello there';
+    wrapper.vm.setValueToQuery({ filterQuery, value });
+    const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
+    expect(queryValue).toEqual(value);
+  });
+});

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,
+      });
+    },
+
+    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)) {
+        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;
+      this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    prev() {
+      this.$emit('input');
+      const value = `${+this.page - 1}`;
+      this.page = value;
+      this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    sizeChange(value) {
+      this.$emit('input');
+      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);
+      this.setValue({ column, order });
+    },
+
+    setValue({ column, order }) {
+      this.headers = this.headers.map((col) => ({
+        ...col,
+        sort: col === column ? order : null,
+      }));
+      const value = encodeSortQuery({ column, order });
+      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, {
+      propsData: {
+        v: {
+          $error: true,
+        },
+      },
+    });
+    expect(wrapper.vm.isValidation).toBeTruthy();
+    expect(wrapper.vm.invalid).toBeTruthy();
+  });
+
+  it('computes error message on validation error', () => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        v: {
+          $error: true,
+          email: false,
+        },
+      },
+    });
+    expect(wrapper.vm.validationText).toBe('validation.email');
+  });
+
+  it('prioritizes error messages', () => {
+    wrapper = shallowMount(Component, {
+      propsData: {
+        v: {
+          $error: true,
+          required: false,
+        },
+      },
+    });
+    expect(wrapper.vm.validationText).toBe('validation.required');
+  });
+});

package/src/mixins/validationMixin/validationMixin.js

@@ -0,0 +1,41 @@
+export default {
+  props: {
+    // validation rules
+    v: {
+      type: Object,
+    },
+    customValidators: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    isValidation() {
+      return !!this.v && !!Object.keys(this.v).length;
+    },
+    invalid() {
+      return this.isValidation && this.v.$error;
+    },
+    validationText() {
+      let validationText = '';
+      if (this.isValidation && this.invalid) {
+        if (this.v.required === false) validationText = this.$t('validation.required');
+        else if (this.v.numeric === false) validationText = this.$t('validation.numeric');
+        else if (this.v.email === false) validationText = this.$t('validation.email');
+        else if (this.v.gatewayHostValidator === false) validationText = this.$t('validation.gatewayHostValidator');
+        else if (this.v.ipValidator === false) validationText = this.$t('validation.ipValidator');
+        else if (this.v.macValidator === false) validationText = this.$t('validation.macValidator');
+        else if (this.v.minValue === false) validationText = `${this.$t('validation.minValue')} ${this.v.$params.minValue.min}`;
+        else if (this.v.maxValue === false) validationText = `${this.$t('validation.maxValue')} ${this.v.$params.maxValue.max}`;
+        else if (this.v.sipAccountValidator === false) validationText = this.$t('validation.sipAccountValidator');
+        else if (this.v.minLength === false) validationText = `${this.$t('validation.minLength')} ${this.v.$params.minLength.min}`;
+        else if (this.v.url === false) validationText = `${this.$t('validation.url')}`;
+      }
+      // eslint-disable-next-line no-restricted-syntax
+      for (const { name, text } of this.customValidators) {
+        if (this.v[name] === false) validationText = text;
+      }
+      return validationText;
+    },
+  },
+};