@webitel/ui-sdk 0.1.11 → 0.1.112

package/src/modules/FilesExport/mixins/exportFilesMixin.js

@@ -0,0 +1,46 @@
+import FilesExport from '../FilesExport';
+
+export default {
+  data: () => ({
+    FilesExport: null,
+  }),
+
+  computed: {
+    isFilesLoading() {
+      return this.FilesExport?.isLoading;
+    },
+
+    filesDownloadProgress() {
+      return this.FilesExport ? this.FilesExport.downloadProgress.count : 0;
+    },
+
+    filesZippingProgress() {
+      return this.FilesExport ? Math.floor(this.FilesExport.zippingProgress.percent) : 0;
+    },
+  },
+
+  methods: {
+    initFilesExport(options) {
+      this.FilesExport = new FilesExport(options);
+    },
+
+    getSelectedFiles() {
+      let files = null;
+      if (this.selectedItems?.length) {
+        files = this.selectedItems.reduce((filesAccumulator, next) => (
+          next.files ? [...filesAccumulator, ...next.files] : filesAccumulator), []);
+      }
+      return files;
+    },
+
+    async exportFiles(files, reqParams = {}) {
+      if (!this.FilesExport) throw new Error('FilesExport is not initialized');
+      const exportFiles = files || this.getSelectedFiles();
+      try {
+        await this.FilesExport.exportFiles(exportFiles, { reqParams });
+      } catch (err) {
+        throw err;
+      }
+    },
+  },
+};

package/src/modules/FilesExport/scripts/generateMediaURL.js

@@ -0,0 +1,7 @@
+const generateMediaURL = (id) => {
+  const token = localStorage.getItem('access-token');
+  const BASE_URL = process.env.VUE_APP_API_URL;
+  return `${BASE_URL}/storage/recordings/${id}/stream?access_token=${token}`;
+};
+
+export default generateMediaURL;

package/src/modules/QueryFilters/api/__tests__/defaults.spec.js

@@ -0,0 +1,18 @@
+import { listResponseHandler } from '../defaults';
+
+describe('filter api Defaults', () => {
+  it('listResponseHandler returns only lookups from response', () => {
+    const response = {
+      items: [
+        { name: 'jest1', id: 1, myField: '1' },
+        { name: 'jest2', id: 2, obj: [] },
+      ],
+      next: true,
+    };
+    const expectedResult = [
+      { name: 'jest1', id: 1 },
+      { name: 'jest2', id: 2 },
+    ];
+    expect(listResponseHandler(response)).toEqual(expectedResult);
+  });
+});

package/src/modules/QueryFilters/api/defaults.js

@@ -0,0 +1,16 @@
+const PAGE = 1;
+const SIZE = 20;
+const FIELDS = ['id', 'name'];
+
+export const defaultParams = {
+  page: PAGE,
+  size: SIZE,
+  fields: FIELDS,
+};
+
+export const listResponseHandler = (response) => (
+  response.items.map((item) => ({
+    name: item.name,
+    id: item.id,
+  }))
+);

package/src/modules/QueryFilters/classes/ApiFilterSchema.js

@@ -0,0 +1,32 @@
+import BaseFilterSchema from './BaseFilterSchema';
+
+export default class ApiFilterSchema extends BaseFilterSchema {
+  constructor(params = {}) {
+    const {
+      value = [],
+      defaultValue = [],
+    } = params;
+    super({ value, defaultValue });
+    const {
+      locale = { label: 'filter' },
+      storedProp = 'id',
+      multiple = true,
+      closeOnSelect = false,
+      API,
+    } = params;
+    this.locale = locale;
+    this.storedProp = storedProp;
+    this.multiple = multiple;
+    this.closeOnSelect = closeOnSelect;
+    this.API = API;
+  }
+
+  search(params) {
+    return this.API(params);
+  }
+
+  fetchSelected(idsList) {
+    const params = { size: idsList.length, ids: idsList };
+    return this.API(params);
+  }
+}

package/src/modules/QueryFilters/classes/BaseFilterSchema.js

@@ -0,0 +1,6 @@
+export default class BaseFilterSchema {
+  constructor({ value = '', defaultValue = '' } = {}) {
+    this.value = value;
+    this.defaultValue = defaultValue;
+  }
+}

package/src/modules/QueryFilters/classes/EnumFilterSchema.js

@@ -0,0 +1,23 @@
+import BaseFilterSchema from './BaseFilterSchema';
+
+export default class EnumFilterSchema extends BaseFilterSchema {
+  constructor(params = {}) {
+    const {
+      value = [],
+      defaultValue = [],
+    } = params;
+    super({ value, defaultValue });
+    const {
+      locale = { label: 'filter' },
+      storedProp = 'value',
+      multiple = true,
+      closeOnSelect = false,
+      options = [],
+    } = params;
+    this.locale = locale;
+    this.storedProp = storedProp;
+    this.multiple = multiple;
+    this.closeOnSelect = closeOnSelect;
+    this.options = options;
+  }
+}

package/src/modules/QueryFilters/classes/__tests__/ApiFilterSchema.spec.js

@@ -0,0 +1,25 @@
+import ApiFilterSchema from '../ApiFilterSchema';
+
+describe('Api Filter Schema', () => {
+  const APIMock = jest.fn();
+  beforeEach(() => {
+    APIMock.mockClear();
+  });
+  it('creates default class without passed params', () => {
+    const filter = new ApiFilterSchema();
+    expect(filter).toBeTruthy();
+  });
+  it('calls API getList() method at search()', () => {
+    const params = { page: 1 };
+    const filter = new ApiFilterSchema({ API: APIMock });
+    filter.search(params);
+    expect(APIMock).toHaveBeenCalledWith(params);
+  });
+  it('calls API getList() method at fetchSelected()', () => {
+    const idsList = [1];
+    const expectedParams = { size: 1, ids: [1] };
+    const filter = new ApiFilterSchema({ API: APIMock });
+    filter.fetchSelected(idsList);
+    expect(APIMock).toHaveBeenCalledWith(expectedParams);
+  });
+});

package/src/modules/QueryFilters/components/__tests__/abstract-api-filter.spec.js

@@ -0,0 +1,54 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import AbstractApiFilter from '../abstract-api-filter.vue';
+import ApiFilterSchema from '../../classes/ApiFilterSchema';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('Abstract Api Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new ApiFilterSchema({ locale: {} });
+  const searchMock = jest.fn();
+  const fetchSelectedMock = jest.fn();
+  jest.spyOn(filterSchema, 'search').mockImplementation(searchMock);
+  jest.spyOn(filterSchema, 'fetchSelected').mockImplementation(fetchSelectedMock);
+  const store = new Vuex.Store({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
+
+  const mountOptions = {
+    localVue,
+    store,
+    router,
+    propsData: {
+      namespace,
+      filterQuery,
+    },
+  };
+  it('renders a component', () => {
+    const wrapper = shallowMount(AbstractApiFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('calls filter schema API search()', () => {
+    const wrapper = shallowMount(AbstractApiFilter, mountOptions);
+    wrapper.vm.search();
+    expect(searchMock).toHaveBeenCalled();
+  });
+  it(' filter schema API fetchSelected()', () => {
+    const wrapper = shallowMount(AbstractApiFilter, mountOptions);
+    wrapper.vm.fetchSelected();
+    expect(fetchSelectedMock).toHaveBeenCalled();
+  });
+});

package/src/modules/QueryFilters/components/__tests__/abstract-enum-filter.spec.js

@@ -0,0 +1,40 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import AbstractEnumFilter from '../abstract-enum-filter.vue';
+import EnumFilterSchema from '../../classes/EnumFilterSchema';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('Abstract Enum Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new EnumFilterSchema({ locale: {} });
+  const store = new Vuex.Store({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
+
+  const mountOptions = {
+    localVue,
+    store,
+    router,
+    propsData: {
+      namespace,
+      filterQuery,
+    },
+  };
+  it('renders a component', () => {
+    const wrapper = shallowMount(AbstractEnumFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+});

package/src/modules/QueryFilters/components/__tests__/filter-search.spec.js

@@ -0,0 +1,49 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import SearchFilter from '../filter-search.vue';
+import BaseFilterSchema from '../../classes/BaseFilterSchema';
+import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+describe('Search Filter', () => {
+  const namespace = 'jest';
+  const filterQuery = 'jest';
+  const filterSchema = new BaseFilterSchema();
+  const store = new Vuex.Store({
+    modules: {
+      [namespace]: {
+        namespaced: true,
+        state: {
+          [filterQuery]: filterSchema,
+        },
+      },
+    },
+  });
+
+  const mountOptions = {
+    localVue,
+    store,
+    router,
+    propsData: {
+      namespace,
+      filterQuery,
+    },
+  };
+  it('renders a component', () => {
+    const wrapper = shallowMount(SearchFilter, mountOptions);
+    expect(wrapper.exists()).toBe(true);
+  });
+  it('initial restoreValue() triggers setValue() method', async () => {
+    const search = 'jest';
+    await router.replace({ query: { [filterQuery]: search } });
+    const setValueMock = jest.fn();
+    jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementationOnce(setValueMock);
+    shallowMount(SearchFilter, mountOptions);
+    expect(setValueMock).toHaveBeenCalledWith({ filterQuery, value: search });
+  });
+});

package/src/modules/QueryFilters/components/abstract-api-filter.vue

@@ -0,0 +1,42 @@
+<template>
+  <wt-select
+    :value="filterSchema.value"
+    :label="$t(filterSchema.locale.label)"
+    :track-by="filterSchema.storedProp"
+    :multiple="filterSchema.multiple"
+    :search="search"
+    :internal-search="false"
+    :close-on-select="filterSchema.closeOnSelect"
+    v-bind="$attrs"
+    @input="setValue({ filter: filterQuery, value: $event })"
+    @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
+    @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
+  ></wt-select>
+</template>
+
+<script>
+import apiFilterMixin from '../mixins/apiFilterMixin';
+
+export default {
+  name: 'abstract-api-filter',
+  mixins: [apiFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    search(search) {
+      return this.filterSchema.search({ search });
+    },
+    fetchSelected(...args) {
+      return this.filterSchema.fetchSelected(...args);
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/QueryFilters/components/abstract-enum-filter.vue

@@ -0,0 +1,32 @@
+<template>
+  <wt-select
+    :value="filterSchema.value"
+    :options="filterSchema.options"
+    :label="$t(filterSchema.locale.label)"
+    :track-by="filterSchema.storedProp"
+    :multiple="filterSchema.multiple"
+    v-bind="$attrs"
+    @input="setValue({ filter: filterQuery, value: $event })"
+    @reset="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
+    @closed="setValueToQuery({ value, filterQuery, storedProp: filterSchema.storedProp })"
+  ></wt-select>
+</template>
+
+<script>
+import enumFilterMixin from '../mixins/enumFilterMixin';
+
+export default {
+  name: 'abstract-enum-filter',
+  mixins: [enumFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/QueryFilters/components/filter-search.vue

@@ -0,0 +1,33 @@
+<template>
+  <wt-search-bar
+    :value="filterSchema.value"
+    debounce
+    @input="setValue({ filter: filterQuery, value: $event })"
+    @search="setValueToQuery({ filter: filterQuery, value: $event })"
+    :placeholder="$t('reusable.search')"
+  />
+</template>
+
+<script>
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-search',
+  mixins: [baseFilterMixin],
+  props: {
+    filterQuery: {
+      type: String,
+      default: 'search',
+    },
+  },
+  methods: {
+    restoreValue(value) {
+      this.setValue({ filterQuery: this.filterQuery, value });
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

package/src/modules/QueryFilters/mixins/__tests__/apiFilterMixin.spec.js

@@ -0,0 +1,48 @@
+import { createLocalVue, shallowMount } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import ApiFilterSchema from '../../classes/ApiFilterSchema';
+import apiFilterMixin from '../apiFilterMixin';
+
+const localVue = createLocalVue();
+localVue.use(VueRouter);
+const router = new VueRouter();
+const team = ['1', '2'];
+const filterSchema = new ApiFilterSchema();
+
+describe('API filter mixin', () => {
+  const setValue = jest.fn();
+  const Component = {
+    render() {},
+    mixins: [apiFilterMixin],
+    data: () => ({
+      filterQuery: 'team',
+    }),
+    computed: {
+      filterSchema() { return filterSchema; },
+    },
+    methods: { setValue },
+  };
+
+  beforeEach(() => {
+    setValue.mockClear();
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { team } });
+    const wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    expect(setValue).toHaveBeenCalledWith({ filter: 'team', value: [{ id: team[0] }, { id: team[1] }] });
+  });
+
+  it('Sets empty array value if $route query is empty', async () => {
+    const wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      data: () => ({ filterQuery: 'queue' }),
+    });
+    expect(setValue).not.toHaveBeenCalled();
+  });
+});

package/src/modules/QueryFilters/mixins/__tests__/enumFilterMixin.spec.js

@@ -0,0 +1,54 @@
+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', () => {
+  const setValue = jest.fn();
+  const Component = {
+    render() {
+    },
+    mixins: [enumFilterMixin],
+    data: () => ({
+      filterQuery: 'direction',
+      storedProp: 'value',
+      options,
+    }),
+    methods: { setValue },
+  };
+
+  beforeEach(() => {
+    setValue.mockClear();
+    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ query: { direction: options[0].value } });
+    const wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    await wrapper.vm.$nextTick();
+    expect(setValue).toHaveBeenCalledWith({ filter: 'direction', value: options[0] });
+  });
+
+  it('Sets empty array value if $route query is empty', async () => {
+    const wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    expect(setValue).not.toHaveBeenCalled();
+  });
+});

package/src/modules/QueryFilters/mixins/__tests__/paginationFilterMixin.spec.js

@@ -0,0 +1,74 @@
+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', () => {
+  const setPage = jest.fn();
+  const setSize = jest.fn();
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [paginationFilterMixin],
+    data: () => ({ page, size }),
+    methods: { setPage, setSize },
+  };
+
+  beforeEach(() => {
+    setPage.mockClear();
+    setSize.mockClear();
+    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,
+    });
+    expect(setPage).toHaveBeenCalledWith(page);
+    expect(setSize).toHaveBeenCalledWith(size);
+  });
+
+  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/modules/QueryFilters/mixins/__tests__/sortFilterMixin.spec.js

@@ -0,0 +1,58 @@
+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 sortedHeaders = [{
+  value: 'queue',
+  show: true,
+  sort: 'asc',
+  field: 'queue',
+}, {
+  value: 'agents',
+  show: true,
+  sort: null,
+  field: 'online',
+}];
+
+describe('Sort filter mixin', () => {
+  const setHeaders = jest.fn();
+  const Component = {
+    render() {},
+    mixins: [sortFilterMixin],
+    data: () => ({ headers }),
+    methods: { setHeaders },
+  };
+
+  beforeEach(() => {
+    router.replace('/');
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ path: '/', query: { sort: '+queue' } });
+    const wrapper = shallowMount(Component, { localVue, router });
+    expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);
+  });
+
+  it('After "sort" trigger, header column sort value changes properly', () => {
+    const wrapper = shallowMount(Component, { localVue, router });
+    const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
+    wrapper.vm.sort(queue);
+    expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);
+  });
+});