@webitel/ui-sdk 24.8.11 → 24.8.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.8.11",
+  "version": "24.8.13",
   "private": false,
   "scripts": {
     "dev": "vite",
@@ -16,6 +16,20 @@
   },
   "main": "./dist/@webitel/ui-sdk.mjs",
   "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/@webitel/ui-sdk.mjs",
+      "require": "./dist/@webitel/ui-sdk.cjs"
+    },
+    "./store": {
+      "import": "./src/store/index.js",
+      "require": "./src/store/index.js"
+    },
+    "./*": {
+      "import": "./src",
+      "require": "./src"
+    }
+  },
   "files": [
     "dist/*",
     "src/api/*",

package/src/api/history/index.js

@@ -0,0 +1,5 @@
+import callTranscript from './transcript/callTranscript.js';
+
+export {
+  callTranscript,
+}

package/src/api/history/transcript/callTranscript.js

@@ -0,0 +1,91 @@
+import { FileTranscriptServiceApiFactory } from 'webitel-sdk';
+import {
+  getDefaultGetListResponse,
+  getDefaultInstance,
+  getDefaultOpenAPIConfig,
+} from '../../defaults/index.js';
+import applyTransform, {
+  camelToSnake,
+  merge,
+  notify,
+  snakeToCamel,
+} from '../../transformers/index.js';
+
+const instance = getDefaultInstance();
+const configuration = getDefaultOpenAPIConfig();
+
+const transcriptService = new FileTranscriptServiceApiFactory(configuration, '', instance);
+
+const getTranscript = async ({
+                               id,
+                               page = 1,
+                               size = 10000,
+                             }) => {
+  try {
+    const response = await transcriptService.getFileTranscriptPhrases(id, page, size);
+    const { items } = applyTransform(response.data, [
+      snakeToCamel(),
+      merge(getDefaultGetListResponse()),
+    ]);
+    return items;
+  } catch (err) {
+    throw applyTransform(err, [
+      notify,
+    ]);
+  }
+};
+
+
+const createTranscript = async ({ callId }) => {
+  const preRequestHandler = (callId) => {
+    return Array.isArray(callId) ? callId : [callId];
+  }
+
+  const uuid = applyTransform(callId, [
+    preRequestHandler,
+    camelToSnake(),
+  ]);
+
+  try {
+    const response = await transcriptService.createFileTranscript({ uuid });
+    return applyTransform(response.data, [
+      snakeToCamel(),
+    ]);
+  } catch (err) {
+    throw applyTransform(err, [
+      notify,
+    ]);
+  }
+};
+
+const deleteTranscript = async (item) => {
+  const preRequestHandler = ({ fileId, callId }) => {
+    if (fileId) {
+      return { id: Array.isArray(fileId) ? fileId : [fileId] };
+    } else {
+      return { uuid: Array.isArray(callId) ? callId : [callId] };
+    }
+  }
+
+  const body = applyTransform(item, [
+    preRequestHandler,
+    camelToSnake(),
+  ]);
+
+  try {
+    const response = await transcriptService.deleteFileTranscript(body);
+    return applyTransform(response.data, []);
+  } catch (err) {
+    throw applyTransform(err, [
+      notify,
+    ]);
+  }
+};
+
+const CallTranscriptAPI = {
+  create: createTranscript,
+  get: getTranscript,
+  delete: deleteTranscript,
+};
+
+export default CallTranscriptAPI;

package/src/store/new/helpers/createApiStoreModule.js

@@ -0,0 +1,8 @@
+import apiStoreModule from '../modules/apiStoreModule/apiStoreModule.js';
+import { createBaseStoreModule } from './createBaseStoreModule.js';
+
+export const createApiStoreModule = (modules = []) => {
+  const modulesArr = Array.isArray(modules) ? modules : [modules];
+
+  return createBaseStoreModule([apiStoreModule, ...modulesArr]);
+};

package/src/store/new/helpers/createBaseStoreModule.js

@@ -0,0 +1,9 @@
+import deepmerge from 'deepmerge';
+import { createStoreModule } from './createStoreModule.js';
+import baseStoreModule from '../modules/baseStoreModule/baseStoreModule.js';
+
+export const createBaseStoreModule = (modules = []) => {
+  const modulesArr = Array.isArray(modules) ? modules : [modules];
+
+  return createStoreModule([baseStoreModule, ...modulesArr]);
+};

package/src/store/new/helpers/createCardStoreModule.js

@@ -0,0 +1,8 @@
+import { createBaseStoreModule } from './createBaseStoreModule.js';
+import cardStoreModule from '../modules/cardStoreModule/cardStoreModule.js';
+
+export const createCardStoreModule = (modules = []) => {
+  const modulesArr = Array.isArray(modules) ? modules : [modules];
+
+  return createBaseStoreModule([cardStoreModule, ...modulesArr]);
+};

package/src/store/new/helpers/createStoreModule.js

@@ -0,0 +1,10 @@
+import deepcopy from 'deep-copy';
+import deepmerge from 'deepmerge';
+
+export const createStoreModule = (modules = []) => {
+  const copied = deepcopy(modules);
+
+  const modulesArr = Array.isArray(copied) ? copied : [copied];
+
+  return deepmerge.all(modulesArr);
+};

package/src/store/new/helpers/createTableStoreModule.js

@@ -0,0 +1,8 @@
+import { createBaseStoreModule } from './createBaseStoreModule';
+import tableStoreModule from '../modules/tableStoreModule/tableStoreModule';
+
+export const createTableStoreModule = (modules = []) => {
+  const modulesArr = Array.isArray(modules) ? modules : [modules];
+
+  return createBaseStoreModule([tableStoreModule, ...modulesArr]);
+};

package/src/store/new/index.js

@@ -0,0 +1,16 @@
+import { createBaseStoreModule } from './helpers/createBaseStoreModule.js';
+import { createTableStoreModule } from './helpers/createTableStoreModule.js';
+import { createCardStoreModule } from './helpers/createCardStoreModule.js';
+import { createApiStoreModule } from './helpers/createApiStoreModule.js';
+
+import { useCardStore } from './modules/cardStoreModule/useCardStore.js';
+import { useTableStore } from './modules/tableStoreModule/useTableStore.js';
+
+export {
+  createBaseStoreModule,
+  createTableStoreModule,
+  createCardStoreModule,
+  createApiStoreModule,
+  useCardStore,
+  useTableStore,
+};

package/src/store/new/modules/apiStoreModule/apiStoreModule.js

@@ -0,0 +1,95 @@
+const getParentIdFromContext = (context) => (
+  context?.getters?.PARENT_ID || context?.state?.parentId
+);
+
+const state = {
+  api: null,
+};
+
+const getters = {};
+
+const actions = {
+  GET_LIST: (
+    apiContext,
+    { context: callerContext = {}, params = {} },
+  ) => {
+    if (!apiContext.state.api.getList) throw Error('No API "getList" method provided');
+    return apiContext.state.api.getList({
+      ...callerContext.state,
+      parentId: getParentIdFromContext(callerContext),
+      ...params,
+    });
+  },
+
+  GET_ITEM: (
+    apiContext,
+    { context: callerContext = {}, params = {} } = {},
+  ) => {
+    if (!apiContext.state.api.get) throw Error('No API "get" method provided');
+    return apiContext.state.api.get({
+      ...callerContext.state,
+      parentId: getParentIdFromContext(callerContext),
+      ...params,
+    });
+  },
+
+  POST_ITEM: (
+    apiContext,
+    { context: callerContext = {}, ...rest } = {},
+  ) => {
+    if (!apiContext.state.api.add) throw Error('No API "add" method provided');
+    return apiContext.state.api.add({
+      ...callerContext.state,
+      parentId: getParentIdFromContext(callerContext),
+      ...rest,
+    });
+  },
+
+  UPD_ITEM: (
+    apiContext,
+    { context: callerContext = {}, ...rest } = {},
+  ) => {
+    if (!apiContext.state.api.update) throw Error('No API "update" method provided');
+    return apiContext.state.api.update({
+      ...callerContext.state,
+      parentId: getParentIdFromContext(callerContext),
+      ...rest,
+    });
+  },
+
+  PATCH_ITEM: (
+    apiContext,
+    { context: callerContext = {}, id, changes, ...rest },
+  ) => {
+    if (!apiContext.state.api.patch) throw Error('No API "patch" method provided');
+    return apiContext.state.api.patch({
+      ...callerContext.state,
+      parentId: getParentIdFromContext(callerContext),
+      ...rest,
+      id,
+      changes,
+    });
+  },
+
+  DELETE_ITEM: (
+    apiContext,
+    { context: callerContext = {}, id, ...rest },
+  ) => {
+    if (!apiContext.state.api.delete) throw Error('No API "delete" method provided');
+    return apiContext.state.api.delete({
+      ...callerContext.state,
+      parentId: getParentIdFromContext(callerContext),
+      ...rest,
+      id,
+    });
+  },
+};
+
+const mutations = {};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+};

package/src/store/new/modules/baseStoreModule/baseStoreModule.js

@@ -0,0 +1,21 @@
+import set from 'lodash/set';
+
+const state = {};
+
+const getters = {};
+
+const actions = {};
+
+const mutations = {
+  SET: (state, { path, value }) => {
+    return set(state, path, value);
+  },
+};
+
+export default {
+  state,
+  getters,
+  actions,
+  mutations,
+  namespaced: true,
+};

package/src/store/new/modules/cardStoreModule/cardStoreModule.js

@@ -0,0 +1,74 @@
+import deepCopy from 'deep-copy';
+import set from 'lodash/set.js';
+
+const state = {
+  itemId: 0,
+  itemInstance: {},
+};
+
+const actions = {
+  SET_PARENT_ITEM_ID: (context, id) => {
+    context.commit('SET_PARENT_ITEM_ID', id);
+  },
+  SET_ITEM_ID: (context, id) => {
+    if (id !== 'new') context.commit('SET_ITEM_ID', id);
+    else context.commit('SET_ITEM_ID', 0);
+  },
+  LOAD_ITEM: async (context) => {
+    if (context.state.itemId) {
+      const item = await context.dispatch('api/GET_ITEM', { context });
+      context.commit('SET_ITEM', item);
+    }
+  },
+  ADD_ITEM: async (context) => {
+    if (!context.state.itemId) {
+      const { id } = await context.dispatch('api/POST_ITEM', { context });
+      await context.dispatch('SET_ITEM_ID', id);
+      context.dispatch('LOAD_ITEM');
+    }
+  },
+  UPDATE_ITEM: async (context) => {
+    await context.dispatch('api/UPD_ITEM', { context });
+    context.dispatch('LOAD_ITEM');
+  },
+  SET_ITEM_PROPERTY: (context, payload) => {
+    context.commit('SET_ITEM_PROPERTY', payload);
+    context.commit('SET_ITEM_PROPERTY', { path: '_dirty', value: true });
+  },
+  RESET_ITEM_STATE: async (context) => {
+    context.commit('RESET_ITEM_STATE');
+  },
+  DELETE_ITEM: async (context, { id }) => {
+    await context.dispatch('api/DELETE_ITEM', { context, id });
+  },
+};
+
+const mutations = {
+  SET_PARENT_ITEM_ID: (state, id) => {
+    state.parentId = id;
+  },
+  SET_ITEM_ID: (state, id) => {
+    state.itemId = id;
+  },
+  SET_ITEM_PROPERTY: (state, { prop, value, path }) => {
+    if (path) {
+      set(state.itemInstance, path, value);
+    } else {
+      // DEPRECATED, LEGACY CODE
+      state.itemInstance[prop] = value;
+    }
+  },
+  SET_ITEM: (state, item) => {
+    state.itemInstance = item;
+  },
+  RESET_ITEM_STATE: (state) => {
+    Object.assign(state, deepCopy(this.state));
+  },
+};
+
+export default {
+  state,
+  actions,
+  mutations,
+};
+

package/src/store/new/modules/cardStoreModule/useCardStore.js

@@ -0,0 +1,54 @@
+import { computed } from 'vue';
+import { useStore } from 'vuex';
+import getNamespacedState from '../../../store/helpers/getNamespacedState.js';
+
+export const useCardStore = (namespace) => {
+  const store = useStore();
+
+  const cardNamespace = `${namespace}/card`;
+
+  const id = computed(() => getNamespacedState(store.state, cardNamespace).itemId);
+  const itemInstance = computed(() => getNamespacedState(store.state, cardNamespace).itemInstance);
+
+  function loadItem(payload) {
+    return store.dispatch(`${cardNamespace}/LOAD_ITEM`, payload);
+  }
+
+  function addItem(payload) {
+    return store.dispatch(`${cardNamespace}/ADD_ITEM`, payload);
+  }
+
+  function updateItem(payload) {
+    return store.dispatch(`${cardNamespace}/UPDATE_ITEM`, payload);
+  }
+
+  function setId(payload) {
+    return store.dispatch(`${cardNamespace}/SET_ITEM_ID`, payload);
+  }
+
+  function resetState() {
+    return store.dispatch(`${cardNamespace}/RESET_ITEM_STATE`);
+  }
+
+  function setItemProp(payload) {
+    return store.dispatch(`${cardNamespace}/SET_ITEM_PROPERTY`, payload);
+  }
+
+  function deleteItem(payload) {
+    return store.dispatch(`${cardNamespace}/DELETE_ITEM`, payload);
+  }
+
+  return {
+    namespace: cardNamespace,
+    id,
+    itemInstance,
+
+    loadItem,
+    addItem,
+    updateItem,
+    setId,
+    resetState,
+    setItemProp,
+    deleteItem,
+  };
+};

package/src/store/new/modules/tableStoreModule/__tests__/tableStoreModule.spec.js

@@ -0,0 +1,250 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import { createStore } from 'vuex';
+import { SortSymbols } from '../../../../../scripts/sortQueryAdapters.js';
+import FilterEvent from '../../../../../modules/Filters/enums/FilterEvent.enum.js';
+import FiltersStoreModule from '../../../../../modules/Filters/store/FiltersStoreModule.js';
+import { createTableStoreModule } from '../../../helpers/createTableStoreModule.js';
+
+describe('TableStoreModule', () => {
+  it('correctly computes FIELDS getter', () => {
+    const headers = [
+      { show: true, field: 'id' },
+      { show: false, field: 'name' },
+      { show: true, field: 'age' },
+    ];
+
+    const state = { headers };
+
+    expect(createTableStoreModule().getters.FIELDS(state))
+    .toEqual(['id', 'age']);
+  });
+});
+
+describe('TableStoreModule integration with FiltersStoreModule', () => {
+  const router = createRouter({
+    history: createWebHistory(),
+    routes: [],
+  });
+
+  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 = createTableStoreModule({
+      modules: { filters },
+    });
+
+    const mock = vi.fn();
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
+    .mockImplementationOnce(mock);
+
+    const store = createStore({
+      state: { router },
+      modules: { table },
+    });
+
+    await store.dispatch('table/filters/SUBSCRIBE', {
+      event: FilterEvent.RESTORED,
+      callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
+    });
+
+    await store.dispatch('table/filters/RESTORE_FILTERS');
+
+    expect(mock).toHaveBeenCalledTimes(1);
+
+    await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
+  });
+
+  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 = createTableStoreModule({
+      modules: { filters },
+    });
+
+    const mock = vi.fn();
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
+    .mockImplementationOnce(mock);
+
+    const store = createStore({
+      state: { router },
+      modules: { table },
+    });
+
+    await store.dispatch('table/filters/SUBSCRIBE', {
+      event: FilterEvent.FILTER_SET,
+      callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
+    });
+
+    await store.dispatch('table/filters/SET_FILTER', {
+      name: 'vi',
+      value: 24,
+    });
+
+    expect(store.getters['table/filters/GET_FILTER']('vi')).toBe(24);
+
+    expect(mock).toHaveBeenCalledTimes(1);
+
+    await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
+  });
+
+  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 = createTableStoreModule({
+      modules: { filters },
+    });
+
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
+    .mockImplementationOnce(vi.fn());
+
+    const store = createStore({
+      state: { router },
+      modules: { table },
+    });
+
+    await store.dispatch('table/filters/SUBSCRIBE', {
+      event: FilterEvent.FILTER_SET,
+      callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
+    });
+
+    expect(store.getters['table/FILTERS']().page).toBe(12);
+
+    await store.dispatch('table/filters/SET_FILTER', {
+      name: 'vi',
+      value: 24,
+    });
+
+    expect(store.getters['table/FILTERS']().page).toBe(1);
+
+    await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
+  });
+
+  it('SORT changes both headers and sort filter', async () => {
+    const filters = new FiltersStoreModule()
+    .addFilter({
+      name: 'sort',
+      value: '',
+      get: ['value'],
+      set: ['value'],
+      restore: () => {},
+    })
+    .getModule();
+
+    const headers = [
+      { value: 'id', field: 'sort_me', sort: SortSymbols.NONE },
+    ];
+
+    const table = createTableStoreModule({
+      state: { headers },
+      modules: { filters },
+    });
+
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
+    .mockImplementationOnce(vi.fn());
+
+    const store = createStore({
+      state: { router },
+      modules: { table },
+    });
+
+    await store.dispatch('table/filters/SUBSCRIBE', {
+      event: FilterEvent.FILTER_SET,
+      callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
+    });
+
+    await store.dispatch('table/SORT', {
+      header: headers[0],
+      nextSortOrder: SortSymbols.ASC,
+    });
+
+    expect(store.getters['table/filters/GET_FILTER']('sort')).toBe('+sort_me');
+
+    expect(store.state.table.headers[0].sort).toBe(SortSymbols.ASC);
+
+    await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
+  });
+
+  it('fields filter change changes headers', async () => {
+    const filters = new FiltersStoreModule()
+    .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 = createTableStoreModule({
+      state: { headers },
+      modules: { filters },
+    });
+
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
+    .mockImplementationOnce(vi.fn());
+
+    const store = createStore({
+      state: { router },
+      modules: { table },
+    });
+
+    await store.dispatch('table/filters/SUBSCRIBE', {
+      event: FilterEvent.FILTER_SET,
+      callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
+    });
+
+    await store.dispatch('table/filters/SET_FILTER', {
+      name: 'fields',
+      value: ['surname'],
+    });
+
+    expect(store.getters['table/filters/GET_FILTER']('fields'))
+    .toEqual(['surname']);
+
+    expect(store.getters['table/FIELDS']).toEqual(['id', 'included']);
+
+    await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
+  });
+});