@webitel/ui-sdk 0.1.13 → 0.1.100

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({ filter: 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-method="search"
+    :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(params) {
+      return this.filterSchema.search(params);
+    },
+    async fetchSelected(...args) {
+      const { items = [] } = await this.filterSchema.fetchSelected(...args);
+      return items;
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,32 @@
+<template>
+  <wt-select
+    :value="value"
+    :options="localizedOptions"
+    :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({ 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({ filter: 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,70 @@
+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 () => {
+    shallowMount(Component, {
+      localVue,
+      router,
+    });
+    expect(setValue).not.toHaveBeenCalled();
+  });
+
+  it('Attaches locales to options, if they have "locale" key', async () => {
+    const options = [{
+      locale: 'jest.locale',
+    }];
+    const expectedOptions = [{
+      locale: options[0].locale,
+      name: options[0].locale,
+    }];
+    const wrapper = shallowMount(Component, {
+      localVue,
+      router,
+      data: () => ({ options }),
+    });
+    expect(wrapper.vm.localizedOptions).toEqual(expectedOptions);
+  });
+});

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

@@ -0,0 +1,86 @@
+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 "restPage" method, changes query and emits event', async () => {
+    await router.replace({ query: { page: 100, size } });
+    wrapper = shallowMount(Component, {
+      localVue,
+      router,
+    });
+    wrapper._emitted.input = []; // reset emitted events
+    wrapper.vm.resetPage();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(wrapper.vm.$route.query.page).toBe('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);
+  });
+});

package/src/modules/QueryFilters/mixins/__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/modules/QueryFilters/mixins/_urlControllerMixin/_urlControllerMixin.js

@@ -0,0 +1,39 @@
+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 if (typeof value === 'object' && value !== null) {
+        newValue = value[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/modules/QueryFilters/mixins/apiFilterMixin.js

@@ -0,0 +1,36 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+export default {
+  mixins: [baseFilterMixin],
+  computed: {
+    locale() {
+      return this.filterSchema?.locale;
+    },
+    storedProp() {
+      return this.filterSchema?.storedProp;
+    },
+    multiple() {
+      return this.filterSchema?.multiple;
+    },
+    closeOnSelect() {
+      return this.filterSchema?.storedProp;
+    },
+  },
+  methods: {
+    async restoreValue(id) {
+      if (id && id.length) {
+        let newValue;
+        if (this.multiple) {
+          const idsArr = Array.isArray(id) ? id : [id];
+          this.setValue({ filter: this.filterQuery, value: idsArr.map((id) => ({ id })) });
+          newValue = await this.fetchSelected(idsArr);
+        } else {
+          this.setValue({ filter: this.filterQuery, value: { id } });
+          newValue = await this.fetchSelected(id);
+        }
+        this.setValue({ filter: this.filterQuery, value: newValue });
+      }
+    },
+    fetchSelected() {},
+  },
+};

package/src/modules/QueryFilters/mixins/baseFilterMixin/baseFilterMixin.js

@@ -0,0 +1,34 @@
+import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
+import getNamespacedState from '../../../../store/helpers/getNamespacedState';
+
+export default {
+  mixins: [_urlControllerMixin],
+  props: {
+    namespace: {
+      type: String,
+      description: 'Store module namespace for state and actions mapping.',
+    },
+  },
+  created() {
+    this.restore({ filterQuery: this.filterQuery });
+  },
+  computed: {
+    filterSchema() {
+      if (!this.$store) throw new Error('Vuex is required for default filterSchema baseFilterMixin property');
+      return getNamespacedState(this.$store.state, this.namespace)[this.filterQuery];
+    },
+    value() {
+      return this.filterSchema.value;
+    },
+  },
+  methods: {
+    restore({ filterQuery }) {
+      const value = this.getValueFromQuery({ filterQuery });
+      if (value) this.restoreValue(value);
+    },
+    setValue(payload) {
+      if (!this.$store) throw new Error('Vuex is required for default setValue() baseFilterMixin method');
+      return this.$store.dispatch(`${this.namespace}/SET_FILTER`, payload);
+    },
+  },
+};

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

@@ -0,0 +1,46 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+
+export default {
+  mixins: [baseFilterMixin],
+  computed: {
+    options() {
+      return this.filterSchema?.options;
+    },
+    locale() {
+      return this.filterSchema?.locale;
+    },
+    storedProp() {
+      return this.filterSchema?.storedProp;
+    },
+    multiple() {
+      return this.filterSchema?.multiple;
+    },
+    closeOnSelect() {
+      return this.filterSchema?.storedProp;
+    },
+    localizedOptions() {
+      const optsHaveLocale = this.options.length && this.options[0].locale; // just check 1st el
+      if (optsHaveLocale) {
+        return this.options.map((opt) => ({
+          ...opt,
+          name: Array.isArray(opt.locale) ? this.$tc(...opt.locale) : this.$t(opt.locale),
+        }));
+      }
+      return this.options;
+    },
+  },
+  methods: {
+    restoreValue(value) {
+      let newValue;
+      if (Array.isArray(value)) {
+        newValue = this.localizedOptions
+          .filter((option) => value
+            .some((value) => value === option[this.storedProp]));
+      } else {
+        newValue = this.localizedOptions
+          .find((option) => value === option[this.storedProp]);
+      }
+      this.setValue({ filter: this.filterQuery, value: newValue });
+    },
+  },
+};