@webitel/ui-sdk 0.9.57 → 0.9.61

package/package.json

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

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

@@ -0,0 +1,71 @@
+import { shallowMount } from '@vue/test-utils';
+import BaseFilterSchema from '../../classes/BaseFilterSchema';
+import baseFilterMixin from '../../mixins/baseFilterMixin/baseFilterMixin';
+import FilterPagination from '../filter-pagination.vue';
+
+const pageDefaultValue = 1;
+const page = 2;
+const size = 20;
+
+const pageFilterSchema = new BaseFilterSchema({ value: page, defaultValue: pageDefaultValue });
+const sizeFilterSchema = new BaseFilterSchema({ value: size });
+
+describe('Pagination filter mixin', () => {
+  const setValue = jest.fn();
+  const setValueToQuery = jest.fn();
+  const getValueFromQuery = jest.fn(({ filterQuery }) => (filterQuery === 'page' ? page : size));
+
+  let wrapper;
+
+  jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementation(setValue);
+  jest.spyOn(baseFilterMixin.methods, 'setValueToQuery').mockImplementation(setValueToQuery);
+  jest.spyOn(baseFilterMixin.methods, 'getValueFromQuery').mockImplementation(getValueFromQuery);
+
+  const computed = {
+    pageFilterSchema() { return pageFilterSchema; },
+    sizeFilterSchema() { return sizeFilterSchema; },
+  };
+
+  beforeEach(() => {
+    setValue.mockClear();
+    setValueToQuery.mockClear();
+    getValueFromQuery.mockClear();
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    wrapper = shallowMount(FilterPagination, {
+      computed,
+    });
+    expect(setValue).toHaveBeenNthCalledWith(1, { filter: 'page', value: page });
+    expect(setValue).toHaveBeenNthCalledWith(2, { filter: 'size', value: size });
+  });
+
+  it('At "prev" page, changes query and emits event', async () => {
+    wrapper = shallowMount(FilterPagination, { computed });
+    wrapper.vm.prev();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(setValue).toHaveBeenLastCalledWith({ filter: 'page', value: page - 1 });
+  });
+
+  it('At "next" page, changes query and emits event', async () => {
+    wrapper = shallowMount(FilterPagination, { computed });
+    wrapper.vm.next();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(setValue).toHaveBeenLastCalledWith({ filter: 'page', value: page + 1 });
+  });
+
+  it('At "resetPage" method, changes query and emits event', async () => {
+    wrapper = shallowMount(FilterPagination, { computed });
+    wrapper.vm.resetPage();
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(setValue).toHaveBeenLastCalledWith({ filter: 'page', value: pageDefaultValue });
+  });
+
+  it('At "sizeChange", changes query and emits event', async () => {
+    const newSize = 40;
+    wrapper = shallowMount(FilterPagination, { computed });
+    wrapper.vm.sizeChange(newSize);
+    expect(wrapper.emitted().input).toBeTruthy();
+    expect(setValue).toHaveBeenLastCalledWith({ filter: 'size', value: newSize });
+  });
+});

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

@@ -1,49 +1,44 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
 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();
+const namespace = 'jest';
+const filterQuery = 'jest';
+const filterSchema = new BaseFilterSchema();
+const searchValue = 'jest-search';
 
 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 setValue = jest.fn();
+  const setValueToQuery = jest.fn();
+  const getValueFromQuery = jest.fn(() => searchValue);
 
   const mountOptions = {
-    localVue,
-    store,
-    router,
     propsData: {
       namespace,
       filterQuery,
     },
+    computed: {
+      filterSchema() { return filterSchema; },
+    },
   };
+
+  jest.spyOn(baseFilterMixin.methods, 'setValue').mockImplementation(setValue);
+  jest.spyOn(baseFilterMixin.methods, 'setValueToQuery').mockImplementation(setValueToQuery);
+  jest.spyOn(baseFilterMixin.methods, 'getValueFromQuery').mockImplementation(getValueFromQuery);
+
+  beforeEach(() => {
+    setValue.mockClear();
+    setValueToQuery.mockClear();
+    getValueFromQuery.mockClear();
+  });
+
   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 });
+    expect(setValue).toHaveBeenCalledWith({ filter: filterQuery, value: searchValue });
   });
 });

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

@@ -0,0 +1,110 @@
+<template>
+  <wt-pagination
+    :next="isNext"
+    :prev="isPrev"
+    :value="sizeFilterSchema.value"
+    debounce
+    @change="sizeChange"
+    @next="next"
+    @prev="prev"
+  ></wt-pagination>
+</template>
+
+<script>
+import getNamespacedState from '../../../store/helpers/getNamespacedState';
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-pagination',
+  mixins: [baseFilterMixin],
+  props: {
+    isNext: {
+      type: Boolean,
+      default: true,
+    },
+    pageFilterQuery: {
+      type: String,
+      default: 'page',
+    },
+    sizeFilterQuery: {
+      type: String,
+      default: 'size',
+    },
+  },
+
+  computed: {
+    pageFilterSchema() {
+      if (!this.$store) throw new Error('Vuex is required for page filter binding');
+      return getNamespacedState(this.$store.state, this.namespace)[this.pageFilterQuery];
+    },
+    sizeFilterSchema() {
+      if (!this.$store) throw new Error('Vuex is required for size filter binding');
+      return getNamespacedState(this.$store.state, this.namespace)[this.sizeFilterQuery];
+    },
+    isPrev() {
+      return this.page > 1;
+    },
+  },
+
+  methods: {
+    restore() {
+      this.restorePage();
+      this.restoreSize();
+    },
+
+    restorePage() {
+      const value = +this.getValueFromQuery({ filterQuery: this.pageFilterQuery });
+      if (value) this.setValue({ filter: this.pageFilterQuery, value });
+    },
+
+    restoreSize() {
+      const value = +this.getValueFromQuery({ filterQuery: this.sizeFilterQuery });
+      if (value) this.setValue({ filter: this.sizeFilterQuery, value });
+    },
+
+    next() {
+      this.$emit('input');
+      const value = this.pageFilterSchema.value + 1;
+      this.setValue({ filter: this.pageFilterQuery, value });
+      this.setValueToQuery({
+        filterQuery: this.pageFilterQuery,
+        value,
+      });
+    },
+
+    prev() {
+      this.$emit('input');
+      const value = this.pageFilterSchema.value - 1;
+      this.setValue({ filter: this.pageFilterQuery, value });
+      this.setValueToQuery({
+        filterQuery: this.pageFilterQuery,
+        value,
+      });
+    },
+
+    resetPage() {
+      this.$emit('input');
+      const value = this.pageFilterSchema.defaultValue;
+      this.setValue({ filter: this.pageFilterQuery, value });
+      this.setValueToQuery({
+        filterQuery: this.pageFilterQuery,
+        value,
+      });
+    },
+
+    sizeChange(value) {
+      this.$emit('input');
+      this.setValue({ filter: this.sizeFilterQuery, value });
+      this.setValueToQuery({
+        filterQuery: this.sizeFilterQuery,
+        value,
+      });
+    },
+  },
+};
+
+</script>
+
+<style scoped>
+
+</style>

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

@@ -5,7 +5,7 @@
     @input="setValue({ filter: filterQuery, value: $event })"
     @search="setValueToQuery({ filterQuery, value: $event })"
     :placeholder="$t('reusable.search')"
-  />
+  ></wt-search-bar>
 </template>
 
 <script>

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

@@ -1,47 +1,48 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
 import ApiFilterSchema from '../../classes/ApiFilterSchema';
 import apiFilterMixin from '../apiFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const filterQuery = 'team';
 const team = ['1', '2'];
 const filterSchema = new ApiFilterSchema();
 
 describe('API filter mixin', () => {
   const setValue = jest.fn();
+  const setValueToQuery = jest.fn();
+  const getValueFromQuery = jest.fn(() => team);
+
   const Component = {
     render() {},
     mixins: [apiFilterMixin],
     data: () => ({
-      filterQuery: 'team',
+      filterQuery,
     }),
     computed: {
       filterSchema() { return filterSchema; },
     },
-    methods: { setValue },
+    methods: {
+      setValue,
+      setValueToQuery,
+      getValueFromQuery,
+    },
   };
 
   beforeEach(() => {
     setValue.mockClear();
-    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+    setValueToQuery.mockClear();
+    getValueFromQuery.mockClear();
   });
 
   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 () => {
+    getValueFromQuery.mockImplementationOnce(() => []);
     const wrapper = shallowMount(Component, {
-      localVue,
-      router,
-      data: () => ({ filterQuery: 'queue' }),
+      data: () => ({ filterQuery }),
     });
     expect(setValue).not.toHaveBeenCalled();
   });

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

@@ -1,69 +1,84 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import EnumFilterSchema from '../../classes/EnumFilterSchema';
 import enumFilterMixin from '../enumFilterMixin';
 
-const options = [{
+const filterQuery = 'direction';
+const options = [
+  {
     name: 'Inbound',
     value: 'inbound',
-  },
-  {
+  }, {
     name: 'Outbound',
     value: 'outbound',
-  }];
+  },
+];
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const queryValue = options[0].value;
+
+const filterSchema = new EnumFilterSchema({
+  options,
+  storedProp: 'value',
+});
 
 describe('Enum filter mixin', () => {
   const setValue = jest.fn();
+  const setValueToQuery = jest.fn();
+  const getValueFromQuery = jest.fn(() => queryValue);
+
   const Component = {
     render() {
     },
     mixins: [enumFilterMixin],
     data: () => ({
-      filterQuery: 'direction',
-      storedProp: 'value',
-      options,
+      filterQuery,
     }),
-    methods: { setValue },
+    computed: {
+      filterSchema() { return filterSchema; },
+    },
+    methods: {
+      setValue,
+      setValueToQuery,
+      getValueFromQuery,
+    },
   };
 
   beforeEach(() => {
     setValue.mockClear();
-    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+    setValueToQuery.mockClear();
+    getValueFromQuery.mockClear();
   });
 
   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] });
+    const wrapper = shallowMount(Component, {});
+    expect(setValue)
+      .toHaveBeenCalledWith({ filter: filterQuery, value: options[0] });
   });
 
   it('Sets empty array value if $route query is empty', async () => {
-    shallowMount(Component, {
-      localVue,
-      router,
-    });
+    getValueFromQuery.mockImplementationOnce(() => []);
+
+    shallowMount(Component, {});
     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 options = [
+      {
+        locale: 'jest.locale',
+      },
+    ];
+    const expectedOptions = [
+      {
+        locale: options[0].locale,
+        name: options[0].locale,
+      },
+    ];
     const wrapper = shallowMount(Component, {
-      localVue,
-      router,
-      data: () => ({ options }),
+      computed: {
+        options() {
+          return options;
+        },
+      },
     });
     expect(wrapper.vm.localizedOptions).toEqual(expectedOptions);
   });

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

@@ -1,11 +1,6 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
 import sortFilterMixin from '../sortFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
-
 const headers = [{
   value: 'queue',
   show: true,
@@ -30,27 +25,37 @@ const sortedHeaders = [{
   field: 'online',
 }];
 
+const queryValue = '+queue';
+
 describe('Sort filter mixin', () => {
   const setHeaders = jest.fn();
+  const setValueToQuery = jest.fn();
+  const getValueFromQuery = jest.fn(() => queryValue);
+
   const Component = {
     render() {},
     mixins: [sortFilterMixin],
     data: () => ({ headers }),
-    methods: { setHeaders },
+    methods: {
+      setHeaders,
+      setValueToQuery,
+      getValueFromQuery,
+    },
   };
 
   beforeEach(() => {
-    router.replace('/');
+    setHeaders.mockClear();
+    setValueToQuery.mockClear();
+    getValueFromQuery.mockClear();
   });
 
   it('Correctly sets value from $route query', async () => {
-    await router.replace({ path: '/', query: { sort: '+queue' } });
-    const wrapper = shallowMount(Component, { localVue, router });
+    const wrapper = shallowMount(Component);
     expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);
   });
 
   it('After "sort" trigger, header column sort value changes properly', () => {
-    const wrapper = shallowMount(Component, { localVue, router });
+    const wrapper = shallowMount(Component);
     const queue = wrapper.vm.headers.find((header) => header.value === 'queue');
     wrapper.vm.sort(queue);
     expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);

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

@@ -1,8 +1,6 @@
-import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
 import getNamespacedState from '../../../../store/helpers/getNamespacedState';
 
 export default {
-  mixins: [_urlControllerMixin],
   props: {
     namespace: {
       type: String,
@@ -30,5 +28,13 @@ export default {
       if (!this.$store) throw new Error('Vuex is required for default setValue() baseFilterMixin method');
       return this.$store.dispatch(`${this.namespace}/SET_FILTER`, payload);
     },
+    setValueToQuery(payload) {
+      if (!this.$store) throw new Error('Vuex is required for default setValueToQuery() baseFilterMixin method');
+      return this.$store.dispatch(`${this.namespace}/SET_VALUE_TO_QUERY`, payload);
+    },
+    getValueFromQuery(payload) {
+      if (!this.$store) throw new Error('Vuex is required for default getValueFromQuery() baseFilterMixin method');
+      return this.$store.dispatch(`${this.namespace}/GET_VALUE_FROM_QUERY`, payload);
+    },
   },
 };

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

@@ -31,16 +31,18 @@ export default {
   },
   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]);
+      if (value && value.length) {
+        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 });
       }
-      this.setValue({ filter: this.filterQuery, value: newValue });
     },
   },
 };

package/src/modules/QueryFilters/store/QueryControllerStoreModule.js

@@ -0,0 +1,61 @@
+import deepEqual from 'deep-equal';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+export default class QueryControllerStoreModule extends BaseStoreModule {
+  actions = {
+    // OVERRIDE ME
+    // eslint-disable-next-line no-unused-vars
+    BEFORE_CHANGE_ROUTE_QUERY_HOOK: (context, { query, filterQuery, value }) => query,
+    // OVERRIDE ME
+    AFTER_CHANGE_ROUTE_QUERY_HOOK: (context, { query }) => query,
+    _CHANGE_ROUTE_QUERY: async (context, { filterQuery, value }) => {
+      try {
+        const { router } = context.state;
+        let query = { ...router.currentRoute.query };
+        query[filterQuery] = value;
+        query = await context.dispatch('BEFORE_CHANGE_ROUTE_QUERY_HOOK', { query, filterQuery, value });
+        await router.replace({
+          name: router.currentRoute.name,
+          query,
+        });
+        await context.dispatch('AFTER_CHANGE_ROUTE_QUERY_HOOK', { query });
+      } catch (err) {
+        throw err;
+      }
+    },
+    SET_VALUE_TO_QUERY: async (
+      context,
+      { filterQuery, value, storedProp = 'id' },
+    ) => {
+      try {
+        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(context.state.router.currentRoute.query[filterQuery], newValue)) {
+          await context.dispatch('_CHANGE_ROUTE_QUERY', {
+            value: newValue,
+            filterQuery,
+          });
+        }
+      } catch (err) {
+        throw err;
+      }
+    },
+    GET_VALUE_FROM_QUERY: (context, { filterQuery }) => context.state.router.currentRoute.query[filterQuery],
+  };
+
+  constructor({ router } = {}) {
+    super();
+    if (!router) throw new Error('Pass router object to QueryController Store Module');
+    this.state.router = router;
+  }
+}

package/src/modules/QueryFilters/store/QueryFiltersStoreModule.js

@@ -43,6 +43,12 @@ export default class QueryFiltersStoreModule extends BaseStoreModule {
     },
   };
 
+  generateQueryControllerActions(controllerNamespace) {
+    this.actions.SET_VALUE_TO_QUERY = (context, payload) => context.dispatch(`${controllerNamespace}/SET_VALUE_TO_QUERY`, payload, { root: true });
+    this.actions.GET_VALUE_FROM_QUERY = (context, payload) => context.dispatch(`${controllerNamespace}/GET_VALUE_FROM_QUERY`, payload, { root: true });
+    return this;
+  }
+
   constructor({ state = {} } = {}) {
     super();
     this.state = state;

package/src/modules/QueryFilters/store/__tests__/QueryControllerStoreModule.spec.js

@@ -0,0 +1,42 @@
+import { createLocalVue } from '@vue/test-utils';
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+import QueryContrllerStoreModule from '../QueryControllerStoreModule';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+const router = new VueRouter();
+
+const filterQuery = 'team';
+
+describe('Query Controller Store Module Actions', () => {
+  const store = new Vuex.Store({
+    ...new QueryContrllerStoreModule({ router }).getModule(),
+  });
+
+  beforeEach(() => {
+    router.replace('/');
+  });
+
+  it('Array of objects', async () => {
+    const value = [{ name: 'team 1', id: '1' }, { name: 'team 2', id: '2' }];
+    await store.dispatch('SET_VALUE_TO_QUERY', { filterQuery, value });
+    const queryValue = await store.dispatch('GET_VALUE_FROM_QUERY', { filterQuery });
+    expect(queryValue).toEqual(['1', '2']);
+  });
+
+  it('Array of values', async () => {
+    const value = ['hello', '1'];
+    await store.dispatch('SET_VALUE_TO_QUERY', { filterQuery, value });
+    const queryValue = await store.dispatch('GET_VALUE_FROM_QUERY', { filterQuery });
+    expect(queryValue).toEqual(value);
+  });
+
+  it('String value', async () => {
+    const value = 'hello there';
+    await store.dispatch('SET_VALUE_TO_QUERY', { filterQuery, value });
+    const queryValue = await store.dispatch('GET_VALUE_FROM_QUERY', { filterQuery });
+    expect(queryValue).toEqual(value);
+  });
+});

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

@@ -1,18 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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/mixins/__tests__/paginationFilterMixin.spec.js

@@ -1,74 +0,0 @@
-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__/urlControllerMixin.spec.js

@@ -1,48 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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/paginationFilterMixin.js

@@ -1,76 +0,0 @@
-import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
-
-export default {
-  mixins: [baseFilterMixin],
-
-  props: {
-    isNext: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  computed: {
-    isPrev() {
-      return this.page > 1;
-    },
-  },
-
-  methods: {
-    restore() {
-      this.restorePage();
-      this.restoreSize();
-    },
-
-    restorePage() {
-      const defaultPage = 1;
-      const value = +this.getValueFromQuery({ filterQuery: 'page' }) || defaultPage;
-      this.setPage(value);
-    },
-
-    restoreSize() {
-      const defaultSize = 10;
-      const value = +this.getValueFromQuery({ filterQuery: 'size' }) || defaultSize;
-      this.setSize(value);
-    },
-
-    next() {
-      this.$emit('input');
-      const value = this.page + 1;
-      this.setPage(value);
-      this.setValueToQuery({
-        filterQuery: 'page',
-        value,
-      });
-    },
-
-    prev() {
-      this.$emit('input');
-      const value = this.page - 1;
-      this.setPage(value);
-      this.setValueToQuery({
-        filterQuery: 'page',
-        value,
-      });
-    },
-
-    resetPage() {
-      this.$emit('input');
-      const value = 1;
-      this.setPage(value);
-      this.setValueToQuery({
-        filterQuery: 'page',
-        value,
-      });
-    },
-
-    sizeChange(value) {
-      this.$emit('input');
-      this.setSize(value);
-      this.setValueToQuery({
-        filterQuery: 'size',
-        value,
-      });
-    },
-  },
-};

package/src/modules/QueryFilters/store/queryFilters.js

@@ -1,6 +0,0 @@
-import QueryFiltersStoreModule from './QueryFiltersStoreModule';
-/*
- * @deprecated: PLEASE USE QUERY_FILTERS_STORE_MODULE
- */
-
-export default () => new QueryFiltersStoreModule().getModule();