@webitel/ui-sdk 0.9.55 → 0.9.59

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,60 @@
+import deepEqual from 'deep-equal';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+export default class QueryControllerStoreModule extends BaseStoreModule {
+  actions = {
+    // OVERRIDE ME
+    BEFORE_CHANGE_ROUTE_QUERY_HOOK: (context, { query }) => 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 });
+        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,11 @@ 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 });
+  }
+
   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,66 +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,
-      });
-    },
-
-    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();