@webitel/ui-sdk 0.1.2-vue3 → 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/auth.js

@@ -1,15 +1,15 @@
 import BaseAPIService from './BaseAPIService';
+import applyTransform, {
+  notify,
+} from '../../../api/transformers';
 
 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() {
@@ -19,7 +19,9 @@ class AuthAPI extends BaseAPIService {
       await this._instance.post(url, {});
       this.removeToken();
     } catch (err) {
-      throw err;
+      throw applyTransform(err, [
+        notify,
+      ]);
     }
   }
 }

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

@@ -1,3 +1,7 @@
+import applyTransform, {
+  notify,
+  snakeToCamel,
+} from '../../../api/transformers';
 import BaseAPIService from './BaseAPIService';
 
 class UserinfoAPI extends BaseAPIService {
@@ -9,9 +13,13 @@ class UserinfoAPI extends BaseAPIService {
     const url = '/userinfo';
     try {
       const response = await this._instance.get(url);
-      return response;
+      return applyTransform(response.data, [
+        snakeToCamel(),
+      ]);
     } catch (err) {
-      throw err;
+      throw applyTransform(err, [
+        notify,
+      ]);
     }
     // }
   }
@@ -20,9 +28,13 @@ class UserinfoAPI extends BaseAPIService {
     const url = 'role/metadata/access';
     try {
       const response = await this._instance.get(url);
-      return response;
+      return applyTransform(response.data, [
+        snakeToCamel(),
+      ]);
     } catch (err) {
-      throw err;
+      throw applyTransform(err, [
+        notify,
+      ]);
     }
   }
 }

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

@@ -1,8 +1,11 @@
 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]: {
@@ -148,6 +151,30 @@ const applicationsAccess = (value = true) => ({
       _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}`,
+    },
   },
 });
 

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

@@ -1,6 +1,6 @@
-import { shallowMount, createLocalVue } from '@vue/test-utils';
-import Vuex from 'vuex';
-import VueRouter from 'vue-router';
+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';
@@ -11,10 +11,6 @@ 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(() => ({}));
@@ -23,19 +19,22 @@ describe('Auth', () => {
   let store;
   let wrapper;
   global.window = new JSDOM.JSDOM().window;
-  const router = new VueRouter();
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [],
+  });
   router.replace = jest.fn();
 
   const userinfo = new UserinfoStoreModule().getModule();
   beforeEach(() => {
-    store = new Vuex.Store({
+    store = createStore({
       modules: { userinfo },
     });
 
     wrapper = shallowMount(Auth, {
-      localVue,
-      store,
-      router,
+      global: {
+        plugins: [router, store],
+      },
     });
   });
 

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

@@ -16,7 +16,7 @@
 <script>
 import AuthAPI from '../api/auth';
 
-const authURL = process.env.VUE_APP_AUTH_MODULE_URL;
+const authURL = process?.env?.VUE_APP_AUTH_MODULE_URL || import.meta.env.VITE_AUTH_MODE_URL;
 
 export default {
   name: 'auth',
@@ -59,6 +59,7 @@ export default {
   position: relative;
   height: 100vh;
   width: 100vw;
+  overflow: hidden;
 
   .wt-loader {
     position: absolute;

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

package/src/modules/Userinfo/store/UserinfoStoreModule.js

@@ -1,6 +1,7 @@
 import userinfo from '../api/userinfo';
 import ApplicationsAccess from '../classes/ApplicationsAccess';
 import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+import Permissions from '../enums/Permissions.enum';
 
 const defaultState = () => ({
   isLoading: true,
@@ -39,13 +40,52 @@ export default class UserinfoStoreModule extends BaseStoreModule {
       const accessKey = Object.keys(state.access[getters.THIS_APP]).find((object) => route.name.includes(object));
       return state.access[getters.THIS_APP][accessKey]?._enabled;
     },
+    GET_OBJECT_SCOPE: (state, getters) => ({ name, route }) => {
+      if (route) return getters.GET_OBJECT_SCOPE_BY_ROUTE(route);
+      return getters.GET_OBJECT_SCOPE_BY_NAME(name);
+    },
+    GET_OBJECT_SCOPE_BY_NAME: (state) => (name) => (
+      Object.values(state.scope).find((object) => name === object.name)
+    ),
+    GET_OBJECT_SCOPE_BY_ROUTE: (state) => (route) => (
+      Object.values(state.scope).find((object) => route.name.includes(object.route))
+    ),
+    HAS_READ_ACCESS: (state, getters) => (checkedObject) => {
+      if (!getters.CHECK_OBJECT_ACCESS(checkedObject)) return false;
+      if (state.permissions[Permissions.READ]) return true;
+      const objectScope = getters.GET_OBJECT_SCOPE(checkedObject);
+      return objectScope?.access?.includes('r');
+    },
+    HAS_CREATE_ACCESS: (state, getters) => (checkedObject) => {
+      if (state.permissions[Permissions.CREATE]) return true;
+      const objectScope = getters.GET_OBJECT_SCOPE(checkedObject);
+      return objectScope?.access?.includes('x');
+    },
+    HAS_EDIT_ACCESS: (state, getters) => (checkedObject) => {
+      if (state.permissions[Permissions.EDIT]) return true;
+      const objectScope = getters.GET_OBJECT_SCOPE(checkedObject);
+      return objectScope?.access?.includes('w');
+    },
+    HAS_DELETE_ACCESS: (state, getters) => (checkedObject) => {
+      if (state.permissions[Permissions.DELETE]) return true;
+      const objectScope = getters.GET_OBJECT_SCOPE(checkedObject);
+      return objectScope?.access?.includes('d');
+    },
   }
 
   actions = {
     BEFORE_OPEN_SESSION_HOOK: () => {},
     AFTER_OPEN_SESSION_HOOK: () => {},
     CONVERT_USER_SCOPE: (context, scope) => scope,
-    CONVERT_USER_PERMISSIONS: (context, permissions) => permissions,
+    CONVERT_USER_PERMISSIONS: (context, initialPermissions) => {
+      let permissions = {};
+      if (!initialPermissions) return permissions;
+      permissions = initialPermissions.reduce((permissions, currentPermission) => ({
+        ...permissions,
+        [currentPermission.id]: currentPermission,
+      }), {});
+      return permissions;
+    },
 
     OPEN_SESSION: async (context) => {
       await context.dispatch('BEFORE_OPEN_SESSION_HOOK');

package/src/plugins/breakpoint/breakpoint.plugin.js

@@ -1,3 +1,4 @@
+import { reactive } from 'vue';
 import debounce from '../../scripts/debounce';
 
 // https://stackoverflow.com/questions/41791193/vuejs-reactive-binding-for-a-plugin-how-to/41801107#41801107
@@ -5,7 +6,7 @@ import debounce from '../../scripts/debounce';
 
 // https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/services/breakpoint/index.ts
 
-const breakpoint = {
+const breakpoint = reactive({
   // Breakpoints
   xs: false,
   sm: false,
@@ -34,7 +35,7 @@ const breakpoint = {
   // Dimensions
   height: 0,
   width: 0,
-};
+});
 
 const getClientWidth = () => Math.max(
   document.documentElement.clientWidth,
@@ -124,13 +125,13 @@ const onResize = () => {
   breakpoint.mobile = current <= max;
 };
 
-const install = (Vue) => {
+const install = (app) => {
   window.addEventListener('resize', debounce(onResize), { passive: true });
 
   onResize();
 
   // eslint-disable-next-line no-param-reassign
-  Vue.prototype.$breakpoint = Vue.observable(breakpoint);
+  app.config.globalProperties.$breakpoint = breakpoint;
 };
 
 export { install };

package/src/scripts/__tests__/updateObject.spec.js

@@ -0,0 +1,19 @@
+import updateObject from '../updateObject';
+
+describe('updateObject', () => {
+  it('doesn\'t mutate original object', () => {
+    const original = { jest: 'jest' };
+    updateObject({ obj: original, path: 'jest', value: '123' });
+    expect(original.jest).toBe('jest');
+  });
+  it('changes shallow value', () => {
+    const original = { jest: 'jest' };
+    const result = { jest: 'huest' };
+    expect(updateObject({ obj: original, path: 'jest', value: 'huest' })).toEqual(result);
+  });
+  it('changes deep value', () => {
+    const original = { jest: { deep: 'jest' } };
+    const result = { jest: { deep: 'huest' } };
+    expect(updateObject({ obj: original, path: 'jest.deep', value: 'huest' })).toEqual(result);
+  });
+});

package/src/scripts/caseConverters.js

@@ -50,7 +50,7 @@ export const objSnakeToCamel = (obj, skipKeys = []) => {
       } else {
         const newKey = snakeToCamel(oldKey);
         let value = obj[oldKey];
-        if (Array.isArray(value) || (value !== null && value.constructor === Object)) {
+        if (Array.isArray(value) || (value !== null && value !== undefined && value.constructor === Object)) {
           value = objSnakeToCamel(value, skipKeys);
         }
         newObj[newKey] = value;
@@ -78,7 +78,7 @@ export const objCamelToSnake = (obj, skipKeys = []) => {
       } else {
         const newKey = camelToSnake(oldKey);
         let value = obj[oldKey];
-        if (Array.isArray(value) || (value !== null && value.constructor === Object)) {
+        if (Array.isArray(value) || (value !== null && value !== undefined && value.constructor === Object)) {
           value = objCamelToSnake(value, skipKeys);
         }
         newObj[newKey] = value;

package/src/scripts/debounce.js

@@ -1,11 +1,5 @@
-const debounce = (method, delay = 1000) => {
-  let timer;
-  return (args) => {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => {
-      method(args);
-    }, delay);
-  };
-};
+import lodashDebounce from 'lodash/debounce';
+
+const debounce = (fn, wait = 1000, options) => lodashDebounce(fn, wait, options);
 
 export default debounce;

package/src/scripts/eventBus.js

@@ -1,4 +1,8 @@
-import Vue from 'vue';
+import emitter from 'tiny-emitter/instance';
 
-const eventBus = new Vue();
-export default eventBus;
+export default {
+  $on: (...args) => emitter.on(...args),
+  $once: (...args) => emitter.once(...args),
+  $off: (...args) => emitter.off(...args),
+  $emit: (...args) => emitter.emit(...args),
+};

package/src/scripts/updateObject.js

@@ -0,0 +1,6 @@
+import set from 'lodash/set';
+import cloneDeep from 'lodash/cloneDeep';
+
+const updateObject = ({ obj, path, value }) => set(cloneDeep(obj), path, value);
+
+export default updateObject;

package/src/store/BaseStoreModules/ApiStoreModule.js

@@ -0,0 +1,93 @@
+import BaseStoreModule from './BaseStoreModule';
+
+const getParentIdFromContext = (context) => (
+  context?.getters?.PARENT_ID || context?.state?.parentId
+);
+
+export default class ApiStoreModule extends BaseStoreModule {
+  generateAPIActions(api) {
+    if (!api) throw new ReferenceError('pass API module!');
+    this.actions
+      .GET_LIST = (
+      _,
+      { context: callerContext = {}, params = {} },
+    ) => {
+      if (!api.getList) throw Error('No API "getList" method provided');
+      return api.getList({
+        ...callerContext.state,
+        parentId: getParentIdFromContext(callerContext),
+        ...params,
+      });
+    };
+
+    this.actions
+      .GET_ITEM = (
+      _,
+      { context: callerContext = {}, params = {} } = {},
+    ) => {
+      if (!api.get) throw Error('No API "get" method provided');
+      return api.get({
+        ...callerContext.state,
+        parentId: getParentIdFromContext(callerContext),
+        ...params,
+      });
+    };
+
+    this.actions
+      .POST_ITEM = (
+      _,
+      { context: callerContext = {}, ...rest } = {},
+    ) => {
+      if (!api.add) throw Error('No API "add" method provided');
+      return api.add({
+        ...callerContext.state,
+        parentId: getParentIdFromContext(callerContext),
+        ...rest,
+      });
+    };
+
+    this.actions
+      .PATCH_ITEM = (
+      _,
+      { context: callerContext = {}, id, changes, ...rest },
+    ) => {
+      if (!api.patch) throw Error('No API "patch" method provided');
+      return api.patch({
+        ...callerContext.state,
+        parentId: getParentIdFromContext(callerContext),
+        ...rest,
+        id,
+        changes,
+      });
+    };
+
+    this.actions
+      .UPD_ITEM = (
+      _,
+      { context: callerContext = {}, ...rest } = {},
+    ) => {
+      if (!api.update) throw Error('No API "update" method provided');
+      return api.update({
+        ...callerContext.state,
+        parentId: getParentIdFromContext(callerContext),
+        ...rest,
+      });
+    };
+
+    this.actions
+      .DELETE_ITEM = (
+      _,
+      { context: callerContext = {}, id, ...rest },
+    ) => {
+      if (!api.delete) throw Error('No API "delete" method provided');
+      return api.delete({
+        ...callerContext.state,
+        parentId: getParentIdFromContext(callerContext),
+        ...rest,
+        id,
+      });
+    };
+
+    return this;
+  }
+}