@webitel/ui-sdk 0.1.13 → 0.1.100

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/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;

package/src/modules/Userinfo/classes/ApplicationsAccess.js

@@ -0,0 +1,170 @@
+import deepmerge from 'deepmerge';
+import deepCopy from 'deep-copy';
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
+import SupervisorSections from '../../../enums/WebitelApplications/SupervisorSections.enum';
+import AdminSections from '../../../enums/WebitelApplications/AdminSections.enum';
+
+const applicationsAccess = (value = true) => ({
+  [WebitelApplications.AGENT]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.AGENT}.name`,
+  },
+  [WebitelApplications.HISTORY]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.HISTORY}.name`,
+  },
+  [WebitelApplications.ANALYTICS]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.ANALYTICS}.name`,
+  },
+  [WebitelApplications.SUPERVISOR]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.name`,
+    [SupervisorSections.QUEUES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.sections.${SupervisorSections.QUEUES}`,
+    },
+    [SupervisorSections.AGENTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.sections.${SupervisorSections.AGENTS}`,
+    },
+    [SupervisorSections.ACTIVE_CALLS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.SUPERVISOR}.sections.${SupervisorSections.ACTIVE_CALLS}`,
+    },
+  },
+  [WebitelApplications.ADMIN]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.ADMIN}.name`,
+    [AdminSections.LICENSE]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.LICENSE}`,
+    },
+    [AdminSections.USERS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.USERS}`,
+    },
+    [AdminSections.DEVICES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.DEVICES}`,
+    },
+    [AdminSections.FLOW]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.FLOW}`,
+    },
+    [AdminSections.DIALPLAN]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.DIALPLAN}`,
+    },
+    [AdminSections.GATEWAYS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.GATEWAYS}`,
+    },
+    [AdminSections.CHAT_GATEWAYS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CHAT_GATEWAYS}`,
+    },
+    [AdminSections.SKILLS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.SKILLS}`,
+    },
+    [AdminSections.BUCKETS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.BUCKETS}`,
+    },
+    [AdminSections.BLACKLIST]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.BLACKLIST}`,
+    },
+    [AdminSections.REGIONS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.REGIONS}`,
+    },
+    [AdminSections.CALENDARS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CALENDARS}`,
+    },
+    [AdminSections.COMMUNICATIONS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.COMMUNICATIONS}`,
+    },
+    [AdminSections.PAUSE_CAUSE]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.PAUSE_CAUSE}`,
+    },
+    [AdminSections.MEDIA]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.MEDIA}`,
+    },
+    [AdminSections.AGENTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.AGENTS}`,
+    },
+    [AdminSections.TEAMS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.TEAMS}`,
+    },
+    [AdminSections.RESOURCES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.RESOURCES}`,
+    },
+    [AdminSections.RESOURCE_GROUPS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.RESOURCE_GROUPS}`,
+    },
+    [AdminSections.QUEUES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.QUEUES}`,
+    },
+    [AdminSections.STORAGE]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.STORAGE}`,
+    },
+    [AdminSections.ROLES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.ROLES}`,
+    },
+    [AdminSections.OBJECTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.OBJECTS}`,
+    },
+  },
+});
+
+/**
+ */
+export default class ApplicationsAccess {
+  // value param could be passed to set same value for all options
+  constructor({ access, value } = { value: true }) {
+    /* if access, deeply merge with falsy values schema
+     if no access, "not configured => full permissions" */
+    this.access = access ? ApplicationsAccess.restore(access) : applicationsAccess(value);
+  }
+
+  getAccess() {
+    return this.access;
+  }
+
+  // minify schema for API sending
+  static minify(access) {
+    const rmEmptyKeys = (obj) => {
+      Object.keys(obj).forEach((key) => {
+        // eslint-disable-next-line no-param-reassign
+        if (!obj[key] || key === '_locale') delete obj[key];
+        if (typeof obj[key] === 'object') {
+          rmEmptyKeys(obj[key]);
+          // eslint-disable-next-line no-param-reassign
+          if (!Object.keys(obj[key]).length) delete obj[key];
+        }
+      });
+      return obj;
+    };
+    return rmEmptyKeys(deepCopy(access));
+  }
+
+  // restore minified schema from API response
+  static restore(access) {
+    return deepmerge(applicationsAccess(false), access);
+    // return deepmerge(access, applicationsAccess(false));
+  }
+}

package/src/modules/Userinfo/components/__tests__/auth.spec.js

@@ -0,0 +1,57 @@
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import VueRouter from 'vue-router';
+import JSDOM from 'jsdom';
+import authAPI from '../../api/auth';
+import userinfoAPI from '../../api/userinfo';
+import Auth from '../the-auth.vue';
+import UserinfoStoreModule from '../../store/UserinfoStoreModule';
+
+import '../../../../../tests/mocks/localStorageMock';
+
+localStorage.setItem('access-token', 'jest');
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+
+authAPI.setToken = jest.fn();
+userinfoAPI.getSession = jest.fn(() => ({}));
+userinfoAPI.getApplicationsAccess = jest.fn(() => ({}));
+
+describe('Auth', () => {
+  let store;
+  let wrapper;
+  global.window = new JSDOM.JSDOM().window;
+  const router = new VueRouter();
+  router.replace = jest.fn();
+
+  const userinfo = new UserinfoStoreModule().getModule();
+  beforeEach(() => {
+    store = new Vuex.Store({
+      modules: { userinfo },
+    });
+
+    wrapper = shallowMount(Auth, {
+      localVue,
+      store,
+      router,
+    });
+  });
+
+  it('renders a component', () => {
+    expect(wrapper.classes('auth-wrap')).toBe(true);
+  });
+
+  it('sets token, gets session and opens app after auth token message emit', async (done) => {
+    const accessToken = 'hello there';
+    window.postMessage({ accessToken }, '*');
+    await setTimeout(() => {
+      expect(authAPI.setToken).toHaveBeenCalledWith(accessToken);
+      expect(userinfoAPI.getSession).toHaveBeenCalled();
+      expect(userinfoAPI.getApplicationsAccess).toHaveBeenCalled();
+      expect(router.replace).toHaveBeenCalled();
+      done();
+    }, 100);
+  });
+});

package/src/modules/Userinfo/components/the-auth.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="auth-wrap">
+    <div v-show="!isLoaded" class="auth-loader">
+      <wt-loader/>
+    </div>
+    <iframe
+      class="auth"
+      :src="authURL"
+      @load="isLoaded = true"
+    >
+      <p>Your browser does not support iframes.</p>
+    </iframe>
+  </div>
+</template>
+
+<script>
+import AuthAPI from '../api/auth';
+
+const authURL = process.env.VUE_APP_AUTH_MODULE_URL;
+
+export default {
+  name: 'auth',
+  props: {
+    namespace: {
+      type: String,
+      default: 'userinfo',
+    },
+  },
+  data: () => ({
+    authURL,
+    isLoaded: false,
+  }),
+
+  mounted() {
+    window.addEventListener('message', this.authMessageHandler, false);
+  },
+  destroyed() {
+    window.removeEventListener('message', this.authMessageHandler, false);
+  },
+
+  methods: {
+    openSession(payload) {
+      return this.$store.dispatch(`${this.namespace}/OPEN_SESSION`, payload);
+    },
+    async authMessageHandler(event) {
+      if (event.data.accessToken) {
+        // eslint-disable-next-line import/no-named-as-default-member
+        await AuthAPI.setToken(event.data.accessToken);
+        await this.openSession();
+        await this.$router.replace('/');
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.auth-wrap {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+
+  .wt-loader {
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .auth {
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>