@webitel/ui-sdk 24.10.2 → 24.10.4

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

@@ -1,9 +1,5 @@
-import {
-  queryToSortAdapter,
-  sortToQueryAdapter,
-} from '../../../scripts/sortQueryAdapters.js';
-import BaseStoreModule
-  from '../../../store/BaseStoreModules/BaseStoreModule.js';
+import { queryToSortAdapter, sortToQueryAdapter } from '../../../scripts/sortQueryAdapters.js';
+import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule.js';
 import FilterEvent from '../../Filters/enums/FilterEvent.enum.js';
 
 export default class TableStoreModule extends BaseStoreModule {
@@ -48,10 +44,7 @@ export default class TableStoreModule extends BaseStoreModule {
 
   actions = {
     // FIXME: maybe move to filters module?
-    SET_FILTER: (
-      context,
-      payload,
-    ) => context.dispatch('filters/SET_FILTER', payload),
+    SET_FILTER: (context, payload) => context.dispatch('filters/SET_FILTER', payload),
 
     // FIXME: maybe move to filters module?
     ON_FILTER_EVENT: async (context, { event, payload }) => {
@@ -66,10 +59,7 @@ export default class TableStoreModule extends BaseStoreModule {
     },
 
     // FIXME: maybe move to filters module?
-    HANDLE_FILTERS_RESTORE: async (context, {
-      fields,
-      sort,
-    }) => {
+    HANDLE_FILTERS_RESTORE: async (context, { fields, sort }) => {
       if (sort) await context.dispatch('HANDLE_SORT_CHANGE', { value: sort });
       if (fields?.length) await context.dispatch('HANDLE_FIELDS_CHANGE', { value: fields });
       return context.dispatch('LOAD_DATA_LIST');
@@ -109,10 +99,7 @@ export default class TableStoreModule extends BaseStoreModule {
       const nextSort = queryToSortAdapter(value?.slice(0, 1) || '');
       const field = nextSort ? value.slice(1) : value;
 
-      const headers = context.state.headers.map(({
-                                                   sort: currentSort,
-                                                   ...header
-                                                 }) => {
+      const headers = context.state.headers.map(({ sort: currentSort, ...header }) => {
         let sort;
 
         if (field) {
@@ -133,10 +120,10 @@ export default class TableStoreModule extends BaseStoreModule {
 
       const params = context.getters.GET_LIST_PARAMS(query);
       try {
-        let {
-          items = [],
-          next = false,
-        } = await context.dispatch('api/GET_LIST', { context, params });
+        const { items = [], next = false } = await context.dispatch('api/GET_LIST', {
+          context,
+          params,
+        });
 
         context.commit('SET', { path: 'dataList', value: items });
         context.commit('SET', { path: 'isNextPage', value: next });
@@ -159,9 +146,7 @@ export default class TableStoreModule extends BaseStoreModule {
       });
     },
 
-    PATCH_ITEM_PROPERTY: async (context, {
-      item: _item, index, prop, value,
-    }) => {
+    PATCH_ITEM_PROPERTY: async (context, { item: _item, index, prop, value }) => {
       const item = _item || context.state.dataList[index];
 
       const { id, etag } = item;
@@ -200,8 +185,7 @@ export default class TableStoreModule extends BaseStoreModule {
         await context.dispatch('LOAD_DATA_LIST');
 
         /* if no items on current page after DELETE, move to prev page [WTEL-3793] */
-        if (!context.state.dataList.length && context.getters.FILTERS.page >
-          1) {
+        if (!context.state.dataList.length && context.getters.FILTERS.page > 1) {
           await context.dispatch('SET_FILTER', {
             name: 'page',
             value: context.getters.FILTERS.page - 1,
@@ -218,18 +202,15 @@ export default class TableStoreModule extends BaseStoreModule {
       }
     },
 
-    DELETE_BULK: async (
-      context,
-      deleted,
-    ) => Promise.allSettled(deleted.map((item) => context.dispatch('DELETE_SINGLE', item))),
+    DELETE_BULK: async (context, deleted) =>
+      Promise.allSettled(deleted.map((item) => context.dispatch('DELETE_SINGLE', item))),
 
     SET_SELECTED: (context, selected) => {
       context.commit('SET', { path: 'selected', value: selected });
     },
   };
 
-  mutations = {
-  };
+  mutations = {};
 
   constructor({ headers = [] }) {
     super();

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

@@ -15,8 +15,7 @@ describe('TableStoreModule', () => {
 
     const state = { headers };
 
-    expect(new TableStoreModule({}).getters.FIELDS(state))
-    .toEqual(['id', 'age']);
+    expect(new TableStoreModule({}).getters.FIELDS(state)).toEqual(['id', 'age']);
   });
 });
 
@@ -28,24 +27,22 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
 
   it('filters restore event triggers LOAD_DATA_LIST', async () => {
     const filters = new FiltersStoreModule()
-    .addFilter({
-      name: 'vi',
-      value: 23,
-      defaultValue: 23,
-      get: ['value'],
-      set: ['value'],
-      restore: () => 'vivi',
-    })
-    .getModule();
-
-    const table = new TableStoreModule({})
-    .getModule({
+      .addFilter({
+        name: 'vi',
+        value: 23,
+        defaultValue: 23,
+        get: ['value'],
+        set: ['value'],
+        restore: () => 'vivi',
+      })
+      .getModule();
+
+    const table = new TableStoreModule({}).getModule({
       modules: { filters },
     });
 
     const mock = vi.fn();
-    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
-    .mockImplementationOnce(mock);
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST').mockImplementationOnce(mock);
 
     const store = createStore({
       state: { router },
@@ -66,24 +63,22 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
 
   it('FILTER_SET event triggers LOAD_DATA_LIST', async () => {
     const filters = new FiltersStoreModule()
-    .addFilter({
-      name: 'vi',
-      value: 23,
-      defaultValue: 23,
-      get: ['value'],
-      set: ['value'],
-      restore: () => {},
-    })
-    .getModule();
-
-    const table = new TableStoreModule({})
-    .getModule({
+      .addFilter({
+        name: 'vi',
+        value: 23,
+        defaultValue: 23,
+        get: ['value'],
+        set: ['value'],
+        restore: () => {},
+      })
+      .getModule();
+
+    const table = new TableStoreModule({}).getModule({
       modules: { filters },
     });
 
     const mock = vi.fn();
-    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
-    .mockImplementationOnce(mock);
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST').mockImplementationOnce(mock);
 
     const store = createStore({
       state: { router },
@@ -109,33 +104,31 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
 
   it('FILTER_SET with not-page filter name resets page filter', async () => {
     const filters = new FiltersStoreModule()
-    .addFilter([
-      {
-        name: 'vi',
-        value: 23,
-        defaultValue: 23,
-        get: ['value'],
-        set: ['value'],
-        restore: () => {},
-      },
-      {
-        name: 'page',
-        value: 12,
-        defaultValue: 12,
-        get: ['value'],
-        set: ['value'],
-        restore: () => {},
-      },
-    ])
-    .getModule();
-
-    const table = new TableStoreModule({})
-    .getModule({
+      .addFilter([
+        {
+          name: 'vi',
+          value: 23,
+          defaultValue: 23,
+          get: ['value'],
+          set: ['value'],
+          restore: () => {},
+        },
+        {
+          name: 'page',
+          value: 12,
+          defaultValue: 12,
+          get: ['value'],
+          set: ['value'],
+          restore: () => {},
+        },
+      ])
+      .getModule();
+
+    const table = new TableStoreModule({}).getModule({
       modules: { filters },
     });
 
-    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
-    .mockImplementationOnce(vi.fn());
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST').mockImplementationOnce(vi.fn());
 
     const store = createStore({
       state: { router },
@@ -161,26 +154,22 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
 
   it('SORT changes both headers and sort filter', async () => {
     const filters = new FiltersStoreModule()
-    .addFilter({
-      name: 'sort',
-      value: '',
-      get: ['value'],
-      set: ['value'],
-      restore: () => {},
-    })
-    .getModule();
+      .addFilter({
+        name: 'sort',
+        value: '',
+        get: ['value'],
+        set: ['value'],
+        restore: () => {},
+      })
+      .getModule();
 
-    const headers = [
-      { value: 'id', field: 'sort_me', sort: SortSymbols.NONE },
-    ];
+    const headers = [{ value: 'id', field: 'sort_me', sort: SortSymbols.NONE }];
 
-    const table = new TableStoreModule({ headers })
-    .getModule({
+    const table = new TableStoreModule({ headers }).getModule({
       modules: { filters },
     });
 
-    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
-    .mockImplementationOnce(vi.fn());
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST').mockImplementationOnce(vi.fn());
 
     const store = createStore({
       state: { router },
@@ -206,27 +195,25 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
 
   it('fields filter change changes headers', async () => {
     const filters = new FiltersStoreModule()
-    .addFilter({
-      name: 'fields',
-      value: [],
-      get: ['value'],
-      set: ['value'],
-      restore: () => {},
-    })
-    .getModule();
+      .addFilter({
+        name: 'fields',
+        value: [],
+        get: ['value'],
+        set: ['value'],
+        restore: () => {},
+      })
+      .getModule();
 
     const headers = [
       { value: 'surname', field: 'included', show: false },
       { value: 'name', field: 'excluded', show: true },
     ];
 
-    const table = new TableStoreModule({ headers })
-    .getModule({
+    const table = new TableStoreModule({ headers }).getModule({
       modules: { filters },
     });
 
-    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
-    .mockImplementationOnce(vi.fn());
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST').mockImplementationOnce(vi.fn());
 
     const store = createStore({
       state: { router },
@@ -243,8 +230,7 @@ describe('TableStoreModule integration with FiltersStoreModule', () => {
       value: ['surname'],
     });
 
-    expect(store.getters['table/filters/GET_FILTER']('fields'))
-    .toEqual(['surname']);
+    expect(store.getters['table/filters/GET_FILTER']('fields')).toEqual(['surname']);
 
     expect(store.getters['table/FIELDS']).toEqual(['id', 'included']);
 

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

@@ -1,20 +1,13 @@
-import applyTransform, {
-  notify,
-  snakeToCamel,
-} from '../../../api/transformers/index.js';
+import applyTransform, { notify, snakeToCamel } from '../../../api/transformers/index.js';
 
 const userinfo = (instance) => ({
   async getSession() {
     const url = '/userinfo';
     try {
       const response = await instance.get(url);
-      return applyTransform(response.data, [
-        snakeToCamel(),
-      ]);
+      return applyTransform(response.data, [snakeToCamel()]);
     } catch (err) {
-      throw applyTransform(err, [
-        notify,
-      ]);
+      throw applyTransform(err, [notify]);
     }
   },
 
@@ -22,13 +15,9 @@ const userinfo = (instance) => ({
     const url = 'role/metadata/access';
     try {
       const response = await instance.get(url);
-      return applyTransform(response.data, [
-        snakeToCamel(),
-      ]);
+      return applyTransform(response.data, [snakeToCamel()]);
     } catch (err) {
-      throw applyTransform(err, [
-        notify,
-      ]);
+      throw applyTransform(err, [notify]);
     }
   },
 
@@ -38,9 +27,7 @@ const userinfo = (instance) => ({
     try {
       return await instance.post(url, {});
     } catch (err) {
-      throw applyTransform(err, [
-        notify,
-      ]);
+      throw applyTransform(err, [notify]);
     }
   },
 });

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

@@ -1,14 +1,10 @@
 import deepCopy from 'deep-copy';
 import deepmerge from 'deepmerge';
-import AdminSections
-  from '../../../enums/WebitelApplications/AdminSections.enum.js';
-import AuditorSections
-  from '../../../enums/WebitelApplications/AuditorSections.enum.js';
+import AdminSections from '../../../enums/WebitelApplications/AdminSections.enum.js';
+import AuditorSections from '../../../enums/WebitelApplications/AuditorSections.enum.js';
 import CrmSections from '../../../enums/WebitelApplications/CrmSections.enum.js';
-import SupervisorSections
-  from '../../../enums/WebitelApplications/SupervisorSections.enum.js';
-import WebitelApplications
-  from '../../../enums/WebitelApplications/WebitelApplications.enum.js';
+import SupervisorSections from '../../../enums/WebitelApplications/SupervisorSections.enum.js';
+import WebitelApplications from '../../../enums/WebitelApplications/WebitelApplications.enum.js';
 
 const applicationsAccess = (value = true) => ({
   [WebitelApplications.AGENT]: {
@@ -196,16 +192,13 @@ export default class ApplicationsAccess {
   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);
+    this.access = access ? ApplicationsAccess.restore(access) : applicationsAccess(value);
   }
 
   // minify schema for API sending
   static minify(access) {
     const rmEmptyKeys = (obj) => {
       Object.keys(obj).forEach((key) => {
-
         if (!obj[key] || key === '_locale') delete obj[key];
         if (typeof obj[key] === 'object') {
           rmEmptyKeys(obj[key]);

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

@@ -29,33 +29,33 @@ export default class UserinfoStoreModule extends BaseStoreModule {
   getters = {
     THIS_APP: (state) => state.thisApp,
     // if no access[app] => accessed by default
-    CHECK_APP_ACCESS: (state) => (app) => !state.access[app] ||
-      state.access[app]?._enabled,
-    CHECK_OBJECT_ACCESS: (state, getters) => ({ name, route }) => {
-      if (!state.access[getters.THIS_APP] ||
-        !state.access[getters.THIS_APP]._enabled) return false;
-      if (route) return getters.CHECK_OBJECT_ACCESS_BY_ROUTE(route);
-      return getters.CHECK_OBJECT_ACCESS_BY_NAME(name);
-    },
-    CHECK_OBJECT_ACCESS_BY_NAME: (state, getters) => (name) => (
-      state.access[getters.THIS_APP][name]?._enabled
-    ),
+    CHECK_APP_ACCESS: (state) => (app) => !state.access[app] || state.access[app]?._enabled,
+    CHECK_OBJECT_ACCESS:
+      (state, getters) =>
+      ({ name, route }) => {
+        if (!state.access[getters.THIS_APP] || !state.access[getters.THIS_APP]._enabled)
+          return false;
+        if (route) return getters.CHECK_OBJECT_ACCESS_BY_ROUTE(route);
+        return getters.CHECK_OBJECT_ACCESS_BY_NAME(name);
+      },
+    CHECK_OBJECT_ACCESS_BY_NAME: (state, getters) => (name) =>
+      state.access[getters.THIS_APP][name]?._enabled,
     CHECK_OBJECT_ACCESS_BY_ROUTE: (state, getters) => (route) => {
-      const accessKey = Object.keys(state.access[getters.THIS_APP])
-      .find((object) => route.name.includes(object));
+      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))
-    ),
+    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;
@@ -86,13 +86,13 @@ export default class UserinfoStoreModule extends BaseStoreModule {
     CONVERT_USER_PERMISSIONS: (context, initialPermissions) => {
       let permissions = {};
       if (!initialPermissions) return permissions;
-      permissions = initialPermissions.reduce((
-        permissions,
-        currentPermission,
-      ) => ({
-        ...permissions,
-        [currentPermission.id]: currentPermission,
-      }), {});
+      permissions = initialPermissions.reduce(
+        (permissions, currentPermission) => ({
+          ...permissions,
+          [currentPermission.id]: currentPermission,
+        }),
+        {},
+      );
       return permissions;
     },
 
@@ -105,14 +105,17 @@ export default class UserinfoStoreModule extends BaseStoreModule {
 
       const session = await userinfo.getSession();
 
-      if ((session.expiresAt - Date.now() < HOUR_LENGTH)) {
+      if (session.expiresAt - Date.now() < HOUR_LENGTH) {
         await context.dispatch('LOGOUT');
         throw new Error(`Session expires soon ${session.expiresAt}`);
       }
 
       await context.dispatch('SET_SESSION', session);
       const access = await userinfo.getApplicationsAccess();
-      await context.dispatch('SET_APPLICATIONS_ACCESS', new ApplicationsAccess({ access }).getAccess());
+      await context.dispatch(
+        'SET_APPLICATIONS_ACCESS',
+        new ApplicationsAccess({ access }).getAccess(),
+      );
       await context.dispatch('AFTER_OPEN_SESSION_HOOK');
     },
     SET_SESSION: async (context, _session) => {
@@ -137,19 +140,13 @@ export default class UserinfoStoreModule extends BaseStoreModule {
       }
     },
 
-    LOGOUT: async (
-      context,
-      { authUrl = import.meta.env.VITE_AUTH_URL } = {},
-    ) => {
+    LOGOUT: async (context, { authUrl = import.meta.env.VITE_AUTH_URL } = {}) => {
       if (!authUrl) throw new Error('No authUrl for LOGOUT provided');
       await userinfo.logout();
       window.location.href = authUrl;
     },
 
-    SET_APPLICATIONS_ACCESS: (
-      context,
-      access,
-    ) => context.commit('SET_APPLICATIONS_ACCESS', access),
+    SET_APPLICATIONS_ACCESS: (context, access) => context.commit('SET_APPLICATIONS_ACCESS', access),
 
     SET_LOADING: (context, isLoading) => {
       context.commit('SET_LOADING', isLoading);

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

@@ -37,15 +37,10 @@ const breakpoint = reactive({
   width: 0,
 });
 
-const getClientWidth = () => Math.max(
-  document.documentElement.clientWidth,
-  window.innerWidth || 0,
-);
+const getClientWidth = () => Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 
-const getClientHeight = () => Math.max(
-  document.documentElement.clientHeight,
-  window.innerHeight || 0,
-);
+const getClientHeight = () =>
+  Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
 
 const thresholds = {
   xs: 600,
@@ -62,9 +57,9 @@ const onResize = () => {
 
   const xs = width < thresholds.xs;
   const sm = width < thresholds.sm && !xs;
-  const md = width < (thresholds.md - scrollBarWidth) && !(sm || xs);
-  const lg = width < (thresholds.lg - scrollBarWidth) && !(md || sm || xs);
-  const xl = width >= (thresholds.lg - scrollBarWidth);
+  const md = width < thresholds.md - scrollBarWidth && !(sm || xs);
+  const lg = width < thresholds.lg - scrollBarWidth && !(md || sm || xs);
+  const xl = width >= thresholds.lg - scrollBarWidth;
 
   breakpoint.height = height;
   breakpoint.width = width;
@@ -88,16 +83,16 @@ const onResize = () => {
   breakpoint.xlOnly = xl;
 
   switch (true) {
-    case (xs):
+    case xs:
       breakpoint.name = 'xs';
       break;
-    case (sm):
+    case sm:
       breakpoint.name = 'sm';
       break;
-    case (md):
+    case md:
       breakpoint.name = 'md';
       break;
-    case (lg):
+    case lg:
       breakpoint.name = 'lg';
       break;
     default:
@@ -106,7 +101,7 @@ const onResize = () => {
   }
 
   if (typeof mobileBreakpoint === 'number') {
-    breakpoint.mobile = width < parseInt(mobileBreakpoint, 10);
+    breakpoint.mobile = width < Number.parseInt(mobileBreakpoint, 10);
 
     return;
   }

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

@@ -60,10 +60,7 @@ describe('Case converters', () => {
 
   it('Camel-Snake Arrays', () => {
     const camelArr = ['camelToSnake', { camelToSnake: { camelToSnake: null } }];
-    const snakeArr = [
-      'camel_to_snake',
-      { camel_to_snake: { camel_to_snake: null } },
-    ];
+    const snakeArr = ['camel_to_snake', { camel_to_snake: { camel_to_snake: null } }];
     expect(objCamelToSnake(camelArr)).toEqual(snakeArr);
     expect(objSnakeToCamel(snakeArr)).toEqual(camelArr);
   });

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

@@ -3,7 +3,9 @@ import debounce from '../debounce.js';
 describe('debounce', () => {
   it('debounces call', async () => {
     let isFnCalled = false;
-    let fn = () => { isFnCalled = true; };
+    let fn = () => {
+      isFnCalled = true;
+    };
     fn = debounce(fn, 50);
     fn();
     expect(isFnCalled).toBeFalsy();

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

@@ -1,12 +1,12 @@
 import prettifyFileSize from '../prettifyFileSize.js';
 
 describe('prettifyFileSize', () => {
-  it('prettifies bytes to kb\'s', () => {
+  it("prettifies bytes to kb's", () => {
     const size = 1025;
     expect(prettifyFileSize(size)).toBe('1 Kb');
   });
 
-  it('prettifies bytes to mb\'s', () => {
+  it("prettifies bytes to mb's", () => {
     const size = 1205 ** 2;
     expect(prettifyFileSize(size)).toBe('1.38 Mb');
   });

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

@@ -1,14 +1,17 @@
-import preventHiddenPageCallsDecorator
-  from '../preventHiddenPageCallsDecorator.js';
+import preventHiddenPageCallsDecorator from '../preventHiddenPageCallsDecorator.js';
 
 describe('preventHiddenPageCallsDecorator', () => {
   it('prevents call on hidden page', () => {
     let isFnCalled = false;
-    let fn = () => { isFnCalled = true; };
+    let fn = () => {
+      isFnCalled = true;
+    };
     fn = preventHiddenPageCallsDecorator(fn, 50);
     Object.defineProperty(document, 'hidden', {
       configurable: true,
-      get() { return true; },
+      get() {
+        return true;
+      },
     });
     expect(isFnCalled).toBeFalsy();
     fn();