@webitel/ui-sdk 0.9.64 → 0.9.65

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

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

@@ -43,12 +43,6 @@ 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/queryFilters.js

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

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

@@ -1,71 +0,0 @@
-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/filter-pagination.vue

@@ -1,110 +0,0 @@
-<template>
-  <wt-pagination
-    :next="isNext"
-    :prev="isPrev"
-    :size="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.pageFilterSchema.value > 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/store/QueryControllerStoreModule.js

@@ -1,64 +0,0 @@
-import deepEqual from 'deep-equal';
-import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
-
-export default class QueryControllerStoreModule extends BaseStoreModule {
-  getters = {
-    GET_VALUE_FROM_QUERY: (state) => ({ filterQuery }) => state.router.currentRoute.query[filterQuery],
-  }
-
-  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;
-      }
-    },
-  };
-
-  constructor({ router } = {}) {
-    super();
-    if (!router) throw new Error('Pass router object to QueryController Store Module');
-    this.state.router = router;
-  }
-}

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

@@ -1,42 +0,0 @@
-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.getters.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.getters.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.getters.GET_VALUE_FROM_QUERY({ filterQuery });
-    expect(queryValue).toEqual(value);
-  });
-});