@webitel/ui-sdk 0.1.11 → 0.1.112

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

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

@@ -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,
+      });
+    },
+
+    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/apiFilterMixin.js

@@ -0,0 +1,36 @@
+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;
+    },
+  },
+  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,36 @@
+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;
+    },
+  },
+  methods: {
+    restoreValue(value) {
+      let newValue;
+      if (Array.isArray(value)) {
+        newValue = this.options
+          .filter((option) => value
+            .some((value) => value === option[this.storedProp]));
+      } else {
+        newValue = this.options
+          .find((option) => value === option[this.storedProp]);
+      }
+      this.setValue({ filter: this.filterQuery, value: newValue });
+    },
+  },
+};

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

@@ -0,0 +1,66 @@
+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/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,50 @@
+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 {
+        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;
+      });
+    },
+  };
+
+  constructor({ state = {} } = {}) {
+    super();
+    this.state = state;
+  }
+}

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

@@ -0,0 +1,83 @@
+// 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('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/Userinfo/api/BaseAPIService.js

@@ -0,0 +1,7 @@
+export default class BaseAPIService {
+  _instance = null
+
+  setInstance(instance) {
+    this._instance = instance;
+  }
+}

package/src/modules/Userinfo/api/auth.js

@@ -0,0 +1,29 @@
+import BaseAPIService from './BaseAPIService';
+
+class AuthAPI extends BaseAPIService {
+  async setToken(token) {
+    localStorage.setItem('access-token', token);
+    this._instance.defaults.headers['X-Webitel-Access'] = localStorage.getItem('access-token');
+  }
+
+  removeToken() {
+    localStorage.removeItem('access-token');
+    localStorage.removeItem('domain');
+    this._instance.defaults.headers['X-Webitel-Access'] = '';
+  }
+
+  async logout() {
+    const url = '/logout';
+
+    try {
+      await this._instance.post(url, {});
+      this.removeToken();
+    } catch (err) {
+      throw err;
+    }
+  }
+}
+
+const auth = new AuthAPI();
+
+export default auth;

package/src/modules/Userinfo/api/userinfo.js

@@ -0,0 +1,32 @@
+import BaseAPIService from './BaseAPIService';
+
+class UserinfoAPI extends BaseAPIService {
+  // gets user by token from localstorage
+// stores response username in vuex
+  async getSession() {
+    // const tokenCheck = localStorage.getItem('access-token');
+    // if (typeof tokenCheck === 'string') { // if there is no token, localStorage returns object
+    const url = '/userinfo';
+    try {
+      const response = await this._instance.get(url);
+      return response;
+    } catch (err) {
+      throw err;
+    }
+    // }
+  }
+
+  async getApplicationsAccess() {
+    const url = 'role/metadata/access';
+    try {
+      const response = await this._instance.get(url);
+      return response;
+    } catch (err) {
+      throw err;
+    }
+  }
+}
+
+const userinfo = new UserinfoAPI();
+
+export default userinfo;