@webitel/ui-sdk 0.1.2-vue3 → 0.1.3-vite

package/src/modules/QueryFilters/components/filter-from-to.vue

@@ -14,6 +14,7 @@
           :value="filterSchema.value.from"
           type="number"
           :number-min="0"
+          :number-max="numberMax"
           @input="setFrom"
         ></wt-input>
       </div>
@@ -29,6 +30,7 @@
           :value="filterSchema.value.to"
           type="number"
           :number-min="0"
+          :number-max="numberMax"
           @input="setTo"
         ></wt-input>
       </div>
@@ -51,6 +53,9 @@ export default {
     label: {
       type: String,
     },
+    numberMax: {
+      type: Number,
+    },
   },
   methods: {
     restore() {
@@ -63,7 +68,7 @@ export default {
       const queryValue = this.$route.query[`${this.filterQuery}From`];
       // this.value.from = +queryValue || from;
       const value = { from: +queryValue || from, to: this.value.to };
-      this.setValue({ filter: this.filterQuery, value });
+      return this.setValue({ filter: this.filterQuery, value });
     },
 
     restoreTo() {
@@ -71,23 +76,25 @@ export default {
       const queryValue = this.$route.query[`${this.filterQuery}To`];
       // this.value.to = +queryValue || to;
       const value = { from: this.value.from, to: +queryValue || to };
-      this.setValue({ filter: this.filterQuery, value });
+      return this.setValue({ filter: this.filterQuery, value });
     },
 
-    setFrom(value) {
-      this.setValueToQuery({
+    async setFrom(value) {
+      const filterValue = { from: value, to: this.value.to };
+      await this.setValue({ filter: this.filterQuery, value: filterValue });
+      await this.setValueToQuery({
         filterQuery: `${this.filterQuery}From`,
         value,
       });
-      this.restoreFrom();
     },
 
-    setTo(value) {
-      this.setValueToQuery({
+    async setTo(value) {
+      const filterValue = { from: this.value.from, to: value };
+      await this.setValue({ filter: this.filterQuery, value: filterValue });
+      await this.setValueToQuery({
         filterQuery: `${this.filterQuery}To`,
         value,
       });
-      this.restoreTo();
     },
   },
 

package/src/modules/QueryFilters/components/filter-table-fields.vue

@@ -0,0 +1,101 @@
+<template>
+  <wt-table-column-select
+    :headers="headers"
+    :static-headers="staticHeaders"
+    @change="change"
+  ></wt-table-column-select>
+</template>
+
+<script>
+import baseFilterMixin from '../mixins/baseFilterMixin/baseFilterMixin';
+
+export default {
+  name: 'filter-table-fields',
+  mixins: [baseFilterMixin],
+  props: {
+    entity: {
+      type: String,
+      required: true,
+    },
+    headers: {
+      type: Array,
+      required: true,
+    },
+    staticHeaders: {
+      type: Array,
+    },
+  },
+
+  data: () => ({
+    storedProp: 'value',
+    filterQuery: 'fields',
+  }),
+
+  model: {
+    prop: 'headers',
+    event: 'change',
+  },
+
+  methods: {
+    change(headers) {
+      this.setValue(headers);
+    },
+
+    // overrides baseFilterMixin method
+    restore({ filterQuery }) {
+      const queryValue = this.getValueFromQuery({ filterQuery });
+      const storageValue = this.getFromLocalStorage({ filterQuery });
+      if (!queryValue && storageValue) {
+        this.setValueToQuery({
+          filterQuery,
+          value: storageValue,
+          storedProp: this.storedProp,
+        });
+      }
+      if (queryValue || storageValue) {
+        this.restoreValue(queryValue || storageValue);
+      }
+    },
+
+    restoreValue(value) {
+      const headers = this.headers.map((header) => ({
+        ...header,
+        show: !!value.includes(header.value),
+      }));
+      this.$emit('change', headers);
+    },
+
+    setValue(headers) {
+      const value = headers.filter((item) => item.show);
+      const params = {
+        filterQuery: this.filterQuery,
+        value,
+        storedProp: this.storedProp,
+      };
+      this.setValueToQuery(params);
+      this.setToLocalStorage(params);
+      this.$emit('change', headers);
+    },
+
+    getFromLocalStorage({ filterQuery }) {
+      const value = localStorage.getItem(`${this.entity}-${filterQuery}`);
+      return value ? value.split(',') : null;
+    },
+
+    // copy-pasted params from "setValueArrayToQuery method
+    // for easier future refactors, if method should be abstract
+    setToLocalStorage({
+                        filterQuery,
+                        value,
+                        storedProp = 'id',
+                      }) {
+      const filter = value.map((item) => item[storedProp]);
+      localStorage.setItem(`${this.entity}-${filterQuery}`, filter);
+    },
+  },
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -1,11 +1,13 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import ApiFilterSchema from '../../classes/ApiFilterSchema';
 import apiFilterMixin from '../apiFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
+
 const team = ['1', '2'];
 const filterSchema = new ApiFilterSchema();
 
@@ -23,24 +25,22 @@ describe('API filter mixin', () => {
     methods: { setValue },
   };
 
-  beforeEach(() => {
+  beforeEach(async () => {
     setValue.mockClear();
-    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+    await router.replace({ query: null });
   });
 
   it('Correctly sets value from $route query', async () => {
     await router.replace({ query: { team } });
     const wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [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,
+      global: { plugins: [router] },
       data: () => ({ filterQuery: 'queue' }),
     });
     expect(setValue).not.toHaveBeenCalled();

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

@@ -1,5 +1,5 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import enumFilterMixin from '../enumFilterMixin';
 
 const options = [{
@@ -11,9 +11,10 @@ const options = [{
     value: 'outbound',
   }];
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
 
 describe('Enum filter mixin', () => {
   const setValue = jest.fn();
@@ -29,16 +30,15 @@ describe('Enum filter mixin', () => {
     methods: { setValue },
   };
 
-  beforeEach(() => {
+  beforeEach(async () => {
     setValue.mockClear();
-    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+    await 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,
+      global: { plugins: [router] },
     });
     await wrapper.vm.$nextTick();
     expect(setValue).toHaveBeenCalledWith({ filter: 'direction', value: options[0] });
@@ -46,8 +46,7 @@ describe('Enum filter mixin', () => {
 
   it('Sets empty array value if $route query is empty', async () => {
     shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
     expect(setValue).not.toHaveBeenCalled();
   });
@@ -61,8 +60,7 @@ describe('Enum filter mixin', () => {
       name: options[0].locale,
     }];
     const wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
       data: () => ({ options }),
     });
     expect(wrapper.vm.localizedOptions).toEqual(expectedOptions);

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

@@ -1,10 +1,12 @@
-import { createLocalVue, shallowMount } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import paginationFilterMixin from '../paginationFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
+
 const page = 2;
 const size = 20;
 
@@ -19,17 +21,16 @@ describe('Pagination filter mixin', () => {
     methods: { setPage, setSize },
   };
 
-  beforeEach(() => {
+  beforeEach(async () => {
     setPage.mockClear();
     setSize.mockClear();
-    if (Object.keys(router.currentRoute.query).length) router.replace({ query: null });
+    await router.replace({ query: null });
   });
 
   it('Correctly sets value from $route query', async () => {
     await router.replace({ query: { page, size } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
     expect(setPage).toHaveBeenCalledWith(page);
     expect(setSize).toHaveBeenCalledWith(size);
@@ -38,11 +39,9 @@ describe('Pagination filter mixin', () => {
   it('At "prev" page, changes query and emits event', async () => {
     await router.replace({ query: { page, size } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
-    wrapper._emitted.input = []; // reset emitted events
-    wrapper.vm.prev();
+    await wrapper.vm.prev();
     expect(wrapper.emitted().input).toBeTruthy();
     expect(wrapper.vm.$route.query.page).toBe(`${page - 1}`);
   });
@@ -50,11 +49,9 @@ describe('Pagination filter mixin', () => {
   it('At "next" page, changes query and emits event', async () => {
     await router.replace({ query: { page, size } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
-    wrapper._emitted.input = []; // reset emitted events
-    wrapper.vm.next();
+    await wrapper.vm.next();
     expect(wrapper.emitted().input).toBeTruthy();
     expect(wrapper.vm.$route.query.page).toBe(`${page + 1}`);
   });
@@ -62,11 +59,9 @@ describe('Pagination filter mixin', () => {
   it('At "restPage" method, changes query and emits event', async () => {
     await router.replace({ query: { page: 100, size } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
-    wrapper._emitted.input = []; // reset emitted events
-    wrapper.vm.resetPage();
+    await wrapper.vm.resetPage();
     expect(wrapper.emitted().input).toBeTruthy();
     expect(wrapper.vm.$route.query.page).toBe('1');
   });
@@ -75,11 +70,9 @@ describe('Pagination filter mixin', () => {
     const newSize = 40;
     await router.replace({ query: { page, size } });
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
+      global: { plugins: [router] },
     });
-    wrapper._emitted.input = []; // reset emitted events
-    wrapper.vm.sizeChange(newSize);
+    await 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

@@ -1,10 +1,11 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import sortFilterMixin from '../sortFilterMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
 
 const headers = [{
   value: 'queue',
@@ -39,18 +40,22 @@ describe('Sort filter mixin', () => {
     methods: { setHeaders },
   };
 
-  beforeEach(() => {
-    router.replace('/');
+  beforeEach(async () => {
+    await router.replace('/');
   });
 
   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, {
+      global: { plugins: [router] },
+    });
     expect(setHeaders).toHaveBeenCalledWith(sortedHeaders);
   });
 
   it('After "sort" trigger, header column sort value changes properly', () => {
-    const wrapper = shallowMount(Component, { localVue, router });
+    const wrapper = shallowMount(Component, {
+      global: { plugins: [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

@@ -1,12 +1,12 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import VueRouter from 'vue-router';
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
 import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
 
-const localVue = createLocalVue();
-localVue.use(VueRouter);
-const router = new VueRouter();
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
 
-const $t = () => {};
 const filterQuery = 'team';
 
 describe('URL Controller mixin Set and Get operations', () => {
@@ -16,32 +16,30 @@ describe('URL Controller mixin Set and Get operations', () => {
     mixins: [_urlControllerMixin],
   };
 
-  beforeEach(() => {
-    router.replace('/');
+  beforeEach(async () => {
+    await router.replace('/');
     wrapper = shallowMount(Component, {
-      localVue,
-      router,
-      mocks: { $t },
+      global: { plugins: [router] },
     });
   });
 
   it('Array of objects', async () => {
     const value = [{ name: 'team 1', id: '1' }, { name: 'team 2', id: '2' }];
-    wrapper.vm.setValueToQuery({ filterQuery, value });
+    await 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 });
+    await 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 });
+    await wrapper.vm.setValueToQuery({ filterQuery, value });
     const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
     expect(queryValue).toEqual(value);
   });

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

@@ -11,7 +11,7 @@ export default {
       });
     },
 
-    setValueToQuery({ filterQuery, value, storedProp = 'id' }) {
+    async setValueToQuery({ filterQuery, value, storedProp = 'id' }) {
       let newValue = '';
       if (Array.isArray(value)) {
         if (value.length && typeof value[0] !== 'object') {
@@ -25,7 +25,7 @@ export default {
         newValue = value;
       }
       if (!deepEqual(this.$route.query[filterQuery], newValue)) {
-        this.changeRouteQuery({
+        await this.changeRouteQuery({
           value: newValue,
           filterQuery,
         });

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

@@ -38,7 +38,7 @@ export default {
       this.$emit('input');
       const value = this.page + 1;
       this.setPage(value);
-      this.setValueToQuery({
+      return this.setValueToQuery({
         filterQuery: 'page',
         value,
       });
@@ -48,7 +48,7 @@ export default {
       this.$emit('input');
       const value = this.page - 1;
       this.setPage(value);
-      this.setValueToQuery({
+      return this.setValueToQuery({
         filterQuery: 'page',
         value,
       });
@@ -58,7 +58,7 @@ export default {
       this.$emit('input');
       const value = 1;
       this.setPage(value);
-      this.setValueToQuery({
+      return this.setValueToQuery({
         filterQuery: 'page',
         value,
       });
@@ -67,7 +67,7 @@ export default {
     sizeChange(value) {
       this.$emit('input');
       this.setSize(value);
-      this.setValueToQuery({
+      return this.setValueToQuery({
         filterQuery: 'size',
         value,
       });

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

@@ -4,10 +4,13 @@ import isEmpty from '../../../scripts/isEmpty';
 export default class QueryFiltersStoreModule extends BaseStoreModule {
   getters = {
     GET_FILTERS: (state, getters) => Object.keys(state)
-      .reduce((filters, filterKey) => {
-        const filterValue = getters.GET_FILTER(filterKey);
-        return isEmpty(filterValue) ? filters : { ...filters, [filterKey]: filterValue };
-      }, {}),
+    .reduce((filters, filterKey) => {
+      const filterValue = getters.GET_FILTER(filterKey);
+      return isEmpty(filterValue) ? filters : {
+        ...filters,
+        [filterKey]: filterValue,
+      };
+    }, {}),
     GET_FILTER: (state) => (filter) => {
       const { value, storedProp, multiple } = state[filter];
       if (multiple) return value.map((item) => item[storedProp]); // if arr, map
@@ -22,7 +25,8 @@ export default class QueryFiltersStoreModule extends BaseStoreModule {
       let newValue = value;
       if (newValue) {
         if (multiple && !Array.isArray(newValue)) newValue = [newValue];
-      } else if (newValue === null || newValue === undefined) newValue = defaultValue;
+      } else if (newValue === null || newValue ===
+        undefined) newValue = defaultValue;
       context.commit('SET_FILTER', { filter, value: newValue });
     },
     RESET_FILTERS: (context) => {
@@ -41,8 +45,17 @@ export default class QueryFiltersStoreModule extends BaseStoreModule {
     },
   };
 
-  constructor({ state = {} } = {}) {
+  /* FIXME REMOVE COMPLETELY AND USE GET_MODULE() INSERTION*/
+  constructor({
+                state = {},
+                getters = {},
+                actions = {},
+                mutations = {},
+              } = {}) {
     super();
-    this.state = state;
-  }
+    this.state = { ...this.state, ...state };
+    this.getters = { ...this.getters, ...getters };
+    this.actions = { ...this.actions, ...actions };
+    this.mutations = { ...this.mutations, ...mutations };
+  };
 }

package/src/modules/TableStoreModule/composables/useTableStore.js

@@ -0,0 +1,58 @@
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import getNamespacedState from '../../../store/helpers/getNamespacedState';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useTableStore = (namespace) => {
+  const store = useStore();
+
+  const tableNamespace = `${namespace}/table`;
+
+  const dataList = computed(() => getNamespacedState(store.state, tableNamespace).dataList);
+
+  const isLoading = computed(() => getNamespacedState(store.state, tableNamespace).isLoading);
+
+  const headers = computed(() => getNamespacedState(store.state, tableNamespace).headers);
+
+  const isNext = computed(() => getNamespacedState(store.state, tableNamespace).isNextPage);
+
+  const error = computed(() => getNamespacedState(store.state, tableNamespace).errors);
+  async function loadData(payload) {
+    return store.dispatch(`${tableNamespace}/LOAD_DATA_LIST`, payload);
+  }
+
+  async function patchProperty(payload) {
+    return store.dispatch(`${tableNamespace}/PATCH_ITEM_PROPERTY`, payload);
+  }
+
+  async function deleteData(payload) {
+    return store.dispatch(`${tableNamespace}/DELETE`, payload);
+  }
+
+  async function sort(...params) {
+    return store.dispatch(`${tableNamespace}/SORT`, {
+      header: params[0],
+      nextSortOrder: params[1],
+    });
+  }
+
+  async function setHeaders(payload) {
+    return store.dispatch(`${tableNamespace}/SET_HEADERS`, payload);
+  }
+
+  return {
+    namespace: tableNamespace,
+
+    dataList,
+    isLoading,
+    headers,
+    isNext,
+    error,
+
+    loadData,
+    patchProperty,
+    deleteData,
+    sort,
+    setHeaders,
+  };
+};