@webitel/ui-sdk 0.1.2 → 0.1.3-vite

package/src/modules/TableStoreModule/store/TableStoreModule.js

@@ -0,0 +1,207 @@
+import {
+  queryToSortAdapter,
+  SortSymbols,
+  sortToQueryAdapter,
+} from '../../../scripts/sortQueryAdapters';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+
+export default class TableStoreModule extends BaseStoreModule {
+  state = {
+    headers: [],
+    dataList: [],
+    error: {},
+    isLoading: false,
+    isNextPage: false,
+  };
+
+  getters = {
+    PARENT_ID: () => null,
+
+    GET_FILTERS: (state, getters) => getters['filters/GET_FILTERS'],
+
+    // required fields to send as "fields" param with GET_LIST
+    REQUIRED_FIELDS: () => ['id'],
+
+    FIELDS: (state, getters) => {
+      const filtersFields = getters.GET_FILTERS.filters;
+
+      const defaultFields = state.headers.filter((header) => header.show)
+      .map((header) => header.field);
+
+      const getFieldsByFieldValues = (values) => {
+        values.map((passedValue) => state.headers.find(({ value }) => passedValue
+          === value).field);
+      };
+
+      return [
+        ...new Set(filtersFields
+          ? getFieldsByFieldValues(filtersFields)
+          : defaultFields),
+      ].concat(getters.REQUIRED_FIELDS);
+    },
+
+    // main GET_LIST params collector
+    GET_LIST_PARAMS: (state, getters) => (overrideFilters) => {
+      const filters = getters.GET_FILTERS;
+      const fields = getters.FIELDS;
+      const parentId = getters.PARENT_ID;
+
+      return {
+        parentId,
+        ...filters,
+        fields,
+        ...overrideFilters,
+      };
+    },
+  };
+
+  actions = {
+    LOAD_DATA_LIST: async (context, query) => {
+      /*
+  https://my.webitel.com/browse/WTEL-3560
+  preventively disable isNext to handle case when user is clicking
+   "next" faster than actual request is made
+ */
+      context.commit('SET_IS_NEXT', false);
+
+      const params = context.getters.GET_LIST_PARAMS(query);
+      try {
+        context.commit('SET_LOADING', true);
+        let {
+          items = [],
+          next = false,
+        } = await context.dispatch('api/GET_LIST', { context, params });
+
+        /* [https://my.webitel.com/browse/WTEL-3793]
+        * When deleting the last item from list,
+        * if there are other items on the previous page, you need to go back */
+        if (!items.length && params.page > 1) {
+          return context.dispatch('filters/SET_FILTER', {
+            filter: 'page',
+            value: params.page - 1,
+          });
+        }
+
+        /* we should set _isSelected property to all items in tables cause their checkbox selection
+        * is based on this property. Previously, this prop was set it api consumers, but now
+        * admin-specific were replaced by webitel-sdk consumers and i supposed it will be
+        * weird to set this property in each api file through defaultListObject */
+        items = items.map((item) => ({ ...item, _isSelected: false }));
+        context.commit('SET_DATA_LIST', items);
+        context.commit('SET_IS_NEXT', next);
+      } catch (err) {
+        context.commit('SET_ERROR', err);
+      } finally {
+        context.commit('SET_LOADING', false);
+      }
+    },
+    SET_HEADERS: (context, headers) => context.commit('SET_HEADERS', headers),
+    RESTORE_FIELDS_FROM_FILTER: (context, { value }) => {
+      const headers = context.state.headers.map((header) => ({
+        ...header,
+        show: value.includes(header.value),
+      }));
+      return context.dispatch('SET_HEADERS', headers);
+    },
+    SORT: async (context, { header, nextSortOrder }) => {
+      const sort = nextSortOrder
+        ? `${sortToQueryAdapter(nextSortOrder)}${header.field}`
+        : nextSortOrder;
+      await context.dispatch('filters/SET_FILTER', {
+        filter: 'sort',
+        value: sort,
+      });
+      await context.dispatch('UPDATE_HEADER_SORT', { header, nextSortOrder });
+    },
+    RESTORE_SORT_FROM_FILTER: (context, { value }) => {
+      const sort = queryToSortAdapter(value.slice(0, 1));
+      const field = sort ? value.slice(1) : value;
+      return context.dispatch('UPDATE_HEADER_SORT', {
+        header: { field },
+        nextSortOrder: sort,
+      });
+    },
+    UPDATE_HEADER_SORT: (context, { header, nextSortOrder }) => {
+      const headers = context.state.headers.map((oldHeader) => ({
+        ...oldHeader,
+        sort: oldHeader.field === header.field
+          ? nextSortOrder
+          : SortSymbols.NONE,
+      }));
+      context.commit('SET_HEADERS', headers);
+    },
+    PATCH_ITEM_PROPERTY: async (context, {
+      item, index, prop, value,
+    }) => {
+      await context.commit('PATCH_ITEM_PROPERTY', { index, prop, value });
+      const id = item?.id || context.state.dataList[index].id;
+      const { etag } = item;
+      const changes = { [prop]: value };
+      try {
+        await context.dispatch('api/PATCH_ITEM', {
+          context,
+          id,
+          etag,
+          changes,
+        });
+        context.commit('PATCH_ITEM_PROPERTY', {
+          item, index, prop, value,
+        });
+      } catch (err) {
+        await context.dispatch('LOAD_DATA_LIST');
+        throw err;
+      }
+    },
+    DELETE: async (context, deleted) => {
+      let action = 'DELETE_SINGLE';
+      if (Array.isArray(deleted)) {
+        if (deleted.length) action = 'DELETE_BULK';
+        else action = 'DELETE_ALL';
+      }
+      try {
+        await context.dispatch(action, deleted);
+      } catch (err) {
+        throw err;
+      } finally {
+        await context.dispatch('LOAD_DATA_LIST');
+      }
+    },
+    DELETE_SINGLE: async (context, { id, etag }) => {
+      try {
+        await context.dispatch('api/DELETE_ITEM', { context, id, etag });
+      } catch (err) {
+        throw err;
+      }
+    },
+    DELETE_BULK: async (
+      context,
+      deleted,
+    ) => Promise.allSettled(deleted.map((item) => context.dispatch('DELETE_SINGLE', item))),
+  };
+
+  mutations = {
+    SET_DATA_LIST: (state, items) => {
+      state.dataList = items;
+    },
+    SET_IS_NEXT: (state, next) => {
+      state.isNextPage = next;
+    },
+    SET_HEADERS: (state, headers) => {
+      state.headers = headers;
+    },
+    PATCH_ITEM_PROPERTY: (state, { index, prop, value }) => {
+      state.dataList[index][prop] = value;
+    },
+    SET_LOADING: (state, value) => {
+      state.isLoading = value;
+    },
+    SET_ERROR: (state, value) => {
+      state.error = value;
+    },
+  };
+
+  constructor({ headers = [] }) {
+    super();
+    this.state.headers = headers;
+  }
+}

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,31 @@
+import BaseAPIService from './BaseAPIService';
+import applyTransform, {
+  notify,
+} from '../../../api/transformers';
+
+class AuthAPI extends BaseAPIService {
+  async setToken(token) {
+    localStorage.setItem('access-token', token);
+  }
+
+  removeToken() {
+    localStorage.removeItem('access-token');
+  }
+
+  async logout() {
+    const url = '/logout';
+
+    try {
+      await this._instance.post(url, {});
+      this.removeToken();
+    } catch (err) {
+      throw applyTransform(err, [
+        notify,
+      ]);
+    }
+  }
+}
+
+const auth = new AuthAPI();
+
+export default auth;

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

@@ -0,0 +1,44 @@
+import applyTransform, {
+  notify,
+  snakeToCamel,
+} from '../../../api/transformers';
+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 applyTransform(response.data, [
+        snakeToCamel(),
+      ]);
+    } catch (err) {
+      throw applyTransform(err, [
+        notify,
+      ]);
+    }
+    // }
+  }
+
+  async getApplicationsAccess() {
+    const url = 'role/metadata/access';
+    try {
+      const response = await this._instance.get(url);
+      return applyTransform(response.data, [
+        snakeToCamel(),
+      ]);
+    } catch (err) {
+      throw applyTransform(err, [
+        notify,
+      ]);
+    }
+  }
+}
+
+const userinfo = new UserinfoAPI();
+
+export default userinfo;

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

@@ -0,0 +1,217 @@
+import deepmerge from 'deepmerge';
+import deepCopy from 'deep-copy';
+import CrmSections from '../../../enums/WebitelApplications/CrmSections.enum';
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum';
+import SupervisorSections from '../../../enums/WebitelApplications/SupervisorSections.enum';
+import AdminSections from '../../../enums/WebitelApplications/AdminSections.enum';
+import AuditorSections
+  from '../../../enums/WebitelApplications/AuditorSections.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.CHATPLAN]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CHATPLAN}`,
+    },
+    [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.COGNITIVE_PROFILES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.COGNITIVE_PROFILES}`,
+    },
+    [AdminSections.EMAIL_PROFILES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.EMAIL_PROFILES}`,
+    },
+    [AdminSections.IMPORT_CSV]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.IMPORT_CSV}`,
+    },
+    [AdminSections.TRIGGERS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.TRIGGERS}`,
+    },
+    [AdminSections.ROLES]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.ROLES}`,
+    },
+    [AdminSections.OBJECTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.OBJECTS}`,
+    },
+    [AdminSections.CHANGELOGS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.CHANGELOGS}`,
+    },
+    [AdminSections.SETTINGS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.ADMIN}.sections.${AdminSections.SETTINGS}`,
+    },
+  },
+  [WebitelApplications.AUDIT]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.AUDIT}.name`,
+    [AuditorSections.SCORECARDS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.AUDIT}.sections.${AuditorSections.SCORECARDS}`,
+    },
+  },
+  [WebitelApplications.CRM]: {
+    _enabled: value,
+    _locale: `WebitelApplications.${WebitelApplications.CRM}.name`,
+    [CrmSections.CONTACTS]: {
+      _enabled: value,
+      _locale: `WebitelApplications.${WebitelApplications.CRM}.sections.${CrmSections.CONTACTS}`,
+    },
+  },
+});
+
+/**
+ */
+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,55 @@
+import { shallowMount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import { createRouter, createWebHistory } 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');
+
+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 = createRouter({
+    history: createWebHistory(),
+    routes: [],
+  });
+  router.replace = jest.fn();
+
+  const userinfo = new UserinfoStoreModule().getModule();
+  beforeEach(() => {
+    store = createStore({
+      modules: { userinfo },
+    });
+
+    wrapper = shallowMount(Auth, {
+      global: {
+        plugins: [router, store],
+      },
+    });
+  });
+
+  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 () => {
+    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();
+    }, 100);
+  });
+});

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

@@ -0,0 +1,76 @@
+<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 || import.meta.env.VITE_AUTH_MODE_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;
+  overflow: hidden;
+
+  .wt-loader {
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .auth {
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>

package/src/modules/Userinfo/enums/Permissions.enum.js

@@ -0,0 +1,7 @@
+export default Object.freeze({
+  CREATE: 'add',
+  READ: 'read',
+  EDIT: 'write',
+  DELETE: 'delete',
+  PLAYBACK_RECORD_FILE: 'playbackRecordFile',
+});