@webitel/ui-sdk 0.1.2 → 0.1.3-vite

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

@@ -0,0 +1,63 @@
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
+import sortFilterMixin from '../sortFilterMixin';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
+
+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(async () => {
+    await router.replace('/');
+  });
+
+  it('Correctly sets value from $route query', async () => {
+    await router.replace({ path: '/', query: { sort: '+queue' } });
+    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, {
+      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

@@ -0,0 +1,46 @@
+import { shallowMount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from 'vue-router';
+import _urlControllerMixin from '../_urlControllerMixin/_urlControllerMixin';
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [{ path: '/', name: 'jest' }],
+});
+
+const filterQuery = 'team';
+
+describe('URL Controller mixin Set and Get operations', () => {
+  let wrapper;
+  const Component = {
+    render() {},
+    mixins: [_urlControllerMixin],
+  };
+
+  beforeEach(async () => {
+    await router.replace('/');
+    wrapper = shallowMount(Component, {
+      global: { plugins: [router] },
+    });
+  });
+
+  it('Array of objects', async () => {
+    const value = [{ name: 'team 1', id: '1' }, { name: 'team 2', id: '2' }];
+    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'];
+    await wrapper.vm.setValueToQuery({ filterQuery, value });
+    const queryValue = wrapper.vm.getValueFromQuery({ filterQuery });
+    expect(queryValue).toEqual(value);
+  });
+
+  it('String value', async () => {
+    const value = 'hello there';
+    await 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,
+      });
+    },
+
+    async 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)) {
+        await this.changeRouteQuery({
+          value: newValue,
+          filterQuery,
+        });
+      }
+    },
+
+    getValueFromQuery({ filterQuery }) {
+      return this.$route.query[filterQuery];
+    },
+  },
+};

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

@@ -0,0 +1,41 @@
+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;
+    },
+    label() {
+      return Array.isArray(this.locale.label)
+        ? this.$tc(...this.locale.label)
+        : this.$t(this.locale.label);
+    },
+  },
+  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,51 @@
+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;
+    },
+    label() {
+      return Array.isArray(this.locale.label)
+        ? this.$tc(...this.locale.label)
+        : this.$t(this.locale.label);
+    },
+    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 });
+    },
+  },
+};

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);
+      return this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    prev() {
+      this.$emit('input');
+      const value = this.page - 1;
+      this.setPage(value);
+      return this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    resetPage() {
+      this.$emit('input');
+      const value = 1;
+      this.setPage(value);
+      return this.setValueToQuery({
+        filterQuery: 'page',
+        value,
+      });
+    },
+
+    sizeChange(value) {
+      this.$emit('input');
+      this.setSize(value);
+      return this.setValueToQuery({
+        filterQuery: 'size',
+        value,
+      });
+    },
+  },
+};

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

@@ -0,0 +1,56 @@
+import baseFilterMixin from './baseFilterMixin/baseFilterMixin';
+import { SortSymbols, queryToSortAdapter, sortToQueryAdapter } from '../../../scripts/sortQueryAdapters';
+
+const getNextSortOrder = (sort) => {
+  switch (sort) {
+    case SortSymbols.NONE: return SortSymbols.ASC;
+    case SortSymbols.ASC: return SortSymbols.DESC;
+    case SortSymbols.DESC: return SortSymbols.NONE;
+    default: return SortSymbols.ASC;
+  }
+};
+
+const encodeSortQuery = ({ column, order }) => (`${sortToQueryAdapter(order)}${column.field}`);
+
+const decodeSortQuery = ({ value }) => {
+  const sort = queryToSortAdapter(value.slice(0, 1));
+  const sortedColumn = sort ? value.slice(1) : value;
+  return {
+    [sortedColumn]: sort,
+  };
+};
+
+export default {
+  mixins: [baseFilterMixin],
+  data: () => ({
+    filterQuery: 'sort',
+  }),
+  methods: {
+    sort(column) {
+      const order = getNextSortOrder(column.sort);
+      this.setValue({ column, order });
+    },
+
+    setValue({ column, order }) {
+      const headers = this.headers.map((header) => ({
+        ...header,
+        sort: header === column ? order : null,
+      }));
+      const value = encodeSortQuery({ column, order });
+      this.setHeaders(headers);
+      this.setValueToQuery({
+        value,
+        filterQuery: this.filterQuery,
+      });
+    },
+
+    restoreValue(value) {
+      const sortedColumns = decodeSortQuery({ value });
+      const headers = this.headers.map((header) => ({
+        ...header,
+        sort: sortedColumns[header.field] || null,
+      }));
+      this.setHeaders(headers);
+    },
+  },
+};

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

@@ -0,0 +1,61 @@
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+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,
+      };
+    }, {}),
+    GET_FILTER: (state) => (filter) => {
+      const { value, storedProp, multiple } = state[filter];
+      if (multiple) return value.map((item) => item[storedProp]); // if arr, map
+      if (storedProp) return value[storedProp]; // if object and has specific prop, return this prop
+      return value; // else return val
+    },
+  };
+
+  actions = {
+    SET_FILTER: (context, { filter, value }) => {
+      const { multiple, defaultValue } = context.state[filter];
+      let newValue = value;
+      if (newValue) {
+        if (multiple && !Array.isArray(newValue)) newValue = [newValue];
+      } else if (newValue === null || newValue ===
+        undefined) newValue = defaultValue;
+      context.commit('SET_FILTER', { filter, value: newValue });
+    },
+    RESET_FILTERS: (context) => {
+      context.commit('RESET_FILTERS');
+    },
+  };
+
+  mutations = {
+    SET_FILTER: (state, { filter, value }) => {
+      state[filter].value = value;
+    },
+    RESET_FILTERS: (state) => {
+      Object.keys(state).forEach((filter) => {
+        state[filter].value = state[filter].defaultValue;
+      });
+    },
+  };
+
+  /* FIXME REMOVE COMPLETELY AND USE GET_MODULE() INSERTION*/
+  constructor({
+                state = {},
+                getters = {},
+                actions = {},
+                mutations = {},
+              } = {}) {
+    super();
+    this.state = { ...this.state, ...state };
+    this.getters = { ...this.getters, ...getters };
+    this.actions = { ...this.actions, ...actions };
+    this.mutations = { ...this.mutations, ...mutations };
+  };
+}

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

@@ -0,0 +1,89 @@
+// import { shallowMount, createLocalVue } from '@vue/test-utils';
+// import Vuex from 'vuex';
+// import queryFilters from '../queryFilters';
+import QueryFiltersStoreModule from '../QueryFiltersStoreModule';
+
+const valueFilter = 'search';
+const arrayFilter = 'agent';
+const state = {
+  [valueFilter]: {
+    value: 'jest',
+    defaultValue: '',
+  },
+  [arrayFilter]: {
+    value: [{ id: 1 }],
+    defaultValue: [],
+    storedProp: 'id',
+    multiple: true,
+  },
+};
+
+describe('QueryFiltersStoreModule getters', () => {
+  let module;
+  beforeEach(() => {
+    module = new QueryFiltersStoreModule().getModule();
+  });
+  it('GET_FILTER: single value filter', () => {
+    expect(module.getters.GET_FILTER(state)(valueFilter))
+      .toEqual('jest');
+  });
+  it('GET_FILTER: array value filter', () => {
+    expect(module.getters.GET_FILTER(state)(arrayFilter))
+      .toEqual([1]);
+  });
+  it('GET_FILTERS filters aggregator', () => {
+    const { GET_FILTER } = module.getters;
+    module.getters.GET_FILTER = jest.fn((filter) => GET_FILTER(state)(filter));
+    expect(module.getters.GET_FILTERS(state, module.getters))
+      .toEqual({ agent: [1], search: 'jest' });
+  });
+});
+
+describe('QueryFiltersStoreModule actions', () => {
+  const context = {
+    state: { ...state },
+    commit: jest.fn(),
+  };
+  const module = new QueryFiltersStoreModule().getModule();
+  it('SET_FILTER: single value filter', () => {
+    const filter = { filter: valueFilter, value: '3' };
+    module.actions.SET_FILTER(context, filter);
+    expect(context.commit).toHaveBeenCalledWith('SET_FILTER', filter);
+  });
+  it('SET_FILTER: array value filter', () => {
+    const filter = { filter: 'agent', value: [{ id: 3 }] };
+    module.actions.SET_FILTER(context, filter);
+    expect(context.commit).toHaveBeenCalledWith('SET_FILTER', filter);
+  });
+  it('SET_FILTER: array value filter with single object value', () => {
+    const filter = { filter: arrayFilter, value: { id: 3 } };
+    module.actions.SET_FILTER(context, filter);
+    expect(context.commit)
+      .toHaveBeenCalledWith('SET_FILTER', { filter: filter.filter, value: [filter.value] });
+  });
+  it('SET_FILTER: sets array value filter with null value to defaultValue', () => {
+    const filter = { filter: arrayFilter, value: null };
+    module.actions.SET_FILTER(context, filter);
+    expect(context.commit)
+      .toHaveBeenCalledWith('SET_FILTER', { filter: filter.filter, value: [] });
+  });
+  it('SET_FILTER: sets "false" value filter', () => {
+    const filter = { filter: valueFilter, value: false };
+    module.actions.SET_FILTER(context, filter);
+    expect(context.commit)
+      .toHaveBeenCalledWith('SET_FILTER', { filter: filter.filter, value: false });
+  });
+  it('calls RESET_FILTERS mutation on RESET_FILTERS action call', () => {
+    module.actions.RESET_FILTERS(context);
+    expect(context.commit).toHaveBeenCalledWith('RESET_FILTERS');
+  });
+});
+
+describe('QueryFiltersStoreModule mutations', () => {
+  const module = new QueryFiltersStoreModule().getModule();
+  it('correctly mutates state at RESET_FILTERS call', () => {
+    expect(Object.values(state).every((filter) => filter.value === filter.defaultValue)).toBeFalsy();
+    module.mutations.RESET_FILTERS(state);
+    expect(Object.values(state).every((filter) => filter.value === filter.defaultValue)).toBeTruthy();
+  });
+});

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/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,
+  };
+};