@webitel/ui-sdk 24.10.43 → 24.10.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.10.43",
+  "version": "24.10.45",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/api/clients/_shared/generatePermissionsApi.js

@@ -14,7 +14,7 @@ import applyTransform, {
   starToSearch,
 } from '../../transformers/index.js';
 
-const permissionsUrl = '/acl';
+const permissionsUrl = 'acl';
 
 const handlePermissionsList = (items) => {
   return items.map((item) => ({

package/src/api/clients/index.js

@@ -11,7 +11,7 @@ import media from './media/media.js';
 import queues from './queues/queues.js';
 import roles from './roles/roles.js';
 import users from './users/users.js';
-import { contacts, contactChatMessagesHistory } from './сontacts/index.js';
+import { contactChatMessagesHistory, contacts } from './сontacts/index.js';
 
 export {
   agents,

package/src/modules/ObjectPermissions/_internals/components/permissions-role-select.vue

@@ -3,15 +3,17 @@
     class="permissions-role-select"
     option-label="name"
     v-bind="attrs"
+    :value="model"
+    @input="model = $event"
   >
     <template #singleLabel="{ option, optionLabel }">
-      <role-row :role="option.user">
+      <role-row :role="option">
         {{ option[optionLabel] || option }}
       </role-row>
     </template>
 
     <template #option="{ option, optionLabel }">
-      <role-row :role="option.user">
+      <role-row :role="option">
         {{ option[optionLabel] || option }}
       </role-row>
     </template>
@@ -23,6 +25,8 @@ import { useAttrs } from 'vue';
 import RoleRow from './permissions-role-row.vue';
 
 const attrs = useAttrs();
+
+const model = defineModel({ required: true });
 </script>
 
 <style lang="scss" scoped>

package/src/modules/ObjectPermissions/_internals/components/permissions-tab-role-popup.vue

@@ -7,8 +7,8 @@
 
     <wt-popup
       :shown="shown"
-      overflow
       size="sm"
+      overflow
       @close="close"
     >
       <template #title>
@@ -16,14 +16,14 @@
       </template>
       <template #main>
         <permissions-role-select
-          v-model="grantee"
+          v-model:model-value="grantee"
           :clearable="false"
-          :placeholder="t('object.role', 1)"
+          :placeholder="t('objects.role', 1)"
           :search-method="getAvailableGrantees"
         />
       </template>
       <template #actions>
-        <wt-button @click="save">
+        <wt-button @click="save(grantee)">
           {{ t('objects.add') }}
         </wt-button>
         <wt-button
@@ -38,7 +38,7 @@
 </template>
 
 <script setup>
-import { ref, useAttrs } from 'vue';
+import { computed, ref, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
@@ -65,16 +65,25 @@ const existingGranteesList = computed(() => getNamespacedState(store.state, prop
 
 const shown = computed(() => !!route.params.permissionId);
 
-const add = () => router.push({
-  ...route,
-  params: { ...route.params, permissionId: 'new' },
-});
+const add = () => {
+  const { params, query, hash, name } = route;
+
+  router.push({
+    query,
+    hash,
+    name,
+    params: { ...params, permissionId: 'new' },
+  });
+};
 
 const close = () => {
+  const { query, hash, name } = route;
   const { permissionId, ...params } = route.params;
 
   return router.push({
-    ...route,
+    query,
+    hash,
+    name,
     params,
   });
 };
@@ -98,8 +107,8 @@ const getAvailableGrantees = async (params) => {
   };
 };
 
-const save = async (payload = grantee.value) => {
-  await store.dispatch(`${props.namespace}/ADD_ROLE_PERMISSIONS`, payload);
+const save = async (grantee) => {
+  await store.dispatch(`${props.namespace}/ADD_ROLE_PERMISSIONS`, grantee);
   return close();
 };
 

package/src/modules/ObjectPermissions/_internals/modules/filters/store/filters.store.js

@@ -19,7 +19,5 @@ export default () => {
   .addFilter(deepCopy(filtersList))
   .getModule();
 
-  return {
-    filters,
-  };
+  return filters;
 };

package/src/modules/ObjectPermissions/_internals/store/helpers/createObjectPermissionsStoreModule.js

@@ -1,15 +1,27 @@
-import { createBaseStoreModule } from '../../../../../store/new/index.js';
-import tableStoreModule
-  from '../../../../../store/new/modules/tableStoreModule/tableStoreModule.js';
+import {
+  createBaseStoreModule,
+  createTableStoreModule,
+} from '../../../../../store/new/index.js';
 import objectPermissionsStoreModule
   from '../modules/objectPermissionsStoreModule.js';
 
-export const createObjectPermissionsStoreModule = (modules = []) => {
+export const createObjectPermissionsStoreModule = (modules) => {
   const modulesArr = Array.isArray(modules) ? modules : [modules];
 
-  return createBaseStoreModule([
-    tableStoreModule(),
+  const tableSubmodule = createTableStoreModule([
     objectPermissionsStoreModule(),
+  ]);
+
+  const cardSubmodule = [
+    // empty, now permissions don't have standard card functionality
+  ];
+
+  return createBaseStoreModule([
+    {
+      modules: {
+        table: tableSubmodule,
+      },
+    },
     ...modulesArr,
   ]);
 };

package/src/modules/ObjectPermissions/_internals/store/modules/headers.js

@@ -0,0 +1,28 @@
+import { SortSymbols } from '../../../../../scripts/sortQueryAdapters.js';
+
+export default [
+  {
+    value: 'grantee',
+    locale: 'reusable.name',
+    field: 'grantee',
+    sort: SortSymbols.NONE,
+  },
+  {
+    value: 'read',
+    locale: 'reusable.read',
+    field: 'granted',
+    sort: SortSymbols.NONE,
+  },
+  {
+    value: 'edit',
+    locale: 'reusable.edit',
+    field: 'granted',
+    sort: SortSymbols.NONE,
+  },
+  {
+    value: 'delete',
+    locale: 'reusable.delete',
+    field: 'granted',
+    sort: SortSymbols.NONE,
+  },
+];

package/src/modules/ObjectPermissions/_internals/store/modules/objectPermissionsStoreModule.js

@@ -1,5 +1,15 @@
+import deepCopy from 'deep-copy';
 import { AccessMode } from '../../enums/AccessMode.enum.js';
 import generateFilters from '../../modules/filters/store/filters.store.js';
+import headers from './headers.js';
+
+const state = {
+  headers,
+};
+
+const getters = {
+  REQUIRED_FIELDS: () => [],
+};
 
 const actions = {
   CHANGE_ACCESS_MODE: async (context, { mode, ruleName, item }) => {
@@ -28,38 +38,55 @@ const actions = {
       default:
         return;
     }
-    const changes = {
+    const changes = [
+      {
       grantee: +item.grantee.id,
       grants: want,
-    };
+      }
+    ];
     try {
-      await context.dispatch('PATCH_ACCESS_MODE', {
-        item,
+      await context.dispatch('PATCH_ITEM_API', {
         changes,
+        id: context.getters.PARENT_ID,
       });
     } finally {
       await context.dispatch('LOAD_DATA_LIST');
     }
   },
   ADD_ROLE_PERMISSIONS: async (context, role) => {
-    const changes = {
+    console.info(role);
+    const changes = [
+      {
       grantee: +role.id,
       grants: 'r',
-    };
+      }
+    ];
     try {
-      await context.dispatch('PATCH_ACCESS_MODE', {
+      await context.dispatch('PATCH_ITEM_API', {
         changes,
+        id: context.getters.PARENT_ID,
       });
     } finally {
       await context.dispatch('LOAD_DATA_LIST');
     }
   },
+
+  GET_LIST_API: (
+    context,
+    payload,
+  ) => context.dispatch('api/GET_OBJECT_PERMISSIONS_LIST', payload),
+  PATCH_ITEM_API: (
+    context,
+    payload,
+  ) => context.dispatch('api/PATCH_OBJECT_PERMISSIONS_ITEM', payload),
 };
 
 export default () => {
   const filters = generateFilters();
 
   return {
+    state: deepCopy(state),
+    getters,
     actions,
     modules: {
       filters,

package/src/modules/ObjectPermissions/components/permissions-tab.vue

@@ -155,7 +155,6 @@ const {
 
 const localizedDataList = computed(() => {
   return dataList.value.map((item) => {
-
     const access = Object.keys(item.access).reduce((access, rule) => {
       return {
         ...access,

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

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

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

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

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

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

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

@@ -1,7 +1,7 @@
 import deepmerge from 'deepmerge';
 import isPlainObject from 'lodash/isPlainObject.js';
 
-export const createStoreModule = (modules = []) => {
+export const createStoreModule = (modules) => {
   const modulesArr = Array.isArray(modules) ? modules : [modules];
 
   const merged = deepmerge.all(modulesArr, {

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

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

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

@@ -63,6 +63,37 @@ const actions = {
       id,
     });
   },
+
+  GET_OBJECT_PERMISSIONS_LIST: (
+    apiContext,
+    { context: callerContext = {}, params = {} },
+  ) => {
+    if (!apiContext.state.api.getList) throw Error('No API "getPermissionsList" method provided');
+    return apiContext.state.api.getPermissionsList({
+      ...callerContext.state,
+      parentId: getParentIdFromContext(callerContext),
+      ...params,
+    });
+  },
+
+  PATCH_OBJECT_PERMISSIONS_ITEM: (
+    apiContext,
+    {
+      context: callerContext = {},
+      id,
+      changes,
+      ...rest
+    },
+  ) => {
+    if (!apiContext.state.api.patch) throw Error('No API "patchPermissions" method provided');
+    return apiContext.state.api.patchPermissions({
+      ...callerContext.state,
+      parentId: getParentIdFromContext(callerContext),
+      ...rest,
+      id,
+      changes,
+    });
+  },
 };
 
 const mutations = {};

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

@@ -5,7 +5,9 @@ import getNamespacedState from '../../../helpers/getNamespacedState.js';
 export const useCardStore = (namespace) => {
   const store = useStore();
 
-  const cardNamespace = `${namespace}/card`;
+  const cardNamespace = namespace.endsWith('/card')
+    ? namespace
+    : `${namespace}/card`;
 
   const id = computed(() => getNamespacedState(store.state, cardNamespace).itemId);
   const itemInstance = computed(() => getNamespacedState(store.state, cardNamespace).itemInstance);

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

@@ -1,9 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import { createStore } from 'vuex';
-import FilterEvent from '../../../../../modules/Filters/enums/FilterEvent.enum.js';
-import FiltersStoreModule from '../../../../../modules/Filters/store/FiltersStoreModule.js';
+import FilterEvent
+  from '../../../../../modules/Filters/enums/FilterEvent.enum.js';
+import FiltersStoreModule
+  from '../../../../../modules/Filters/store/FiltersStoreModule.js';
 import { SortSymbols } from '../../../../../scripts/sortQueryAdapters.js';
-import { createTableStoreModule } from '../../../helpers/createTableStoreModule.js';
+import {
+  createTableStoreModule,
+} from '../../../helpers/createTableStoreModule.js';
 
 describe('TableStoreModule', () => {
   it('correctly computes FIELDS getter', () => {
@@ -15,7 +19,11 @@ describe('TableStoreModule', () => {
 
     const state = { headers };
 
-    expect(createTableStoreModule().getters.FIELDS(state)).toEqual(['id', 'age']);
+    const tableStore = createTableStoreModule({ state });
+
+    const store = createStore(tableStore);
+
+    expect(store.getters.FIELDS).toEqual(['id', 'age']);
   });
 });
 

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

@@ -19,13 +19,15 @@ const getters = {
   // FIXME: maybe move to filters module?
   FILTERS: (state, getters) => getters['filters/GET_FILTERS'],
 
-  FIELDS: (state) => {
+  REQUIRED_FIELDS: () => ['id'], // override me
+
+  FIELDS: (state, getters) => {
     const fields = state.headers.reduce((fields, { show, field }) => {
       if (show || show === undefined) return [...fields, field];
       return fields;
     }, []);
 
-    return [...new Set(['id', ...fields])];
+    return [...new Set([...getters.REQUIRED_FIELDS, ...fields])];
   },
 
   // main GET_LIST params collector
@@ -130,7 +132,10 @@ const actions = {
 
     const params = context.getters.GET_LIST_PARAMS(query);
     try {
-      const { items = [], next = false } = await context.dispatch('api/GET_LIST', {
+      const {
+        items = [],
+        next = false,
+      } = await context.dispatch('GET_LIST_API', {
         context,
         params,
       });
@@ -171,7 +176,7 @@ const actions = {
     const changes = { [prop]: value };
 
     try {
-      await context.dispatch('api/PATCH_ITEM', {
+      await context.dispatch('PATCH_ITEM_API', {
         context,
         id,
         etag,
@@ -208,7 +213,7 @@ const actions = {
 
   DELETE_SINGLE: async (context, { id, etag }) => {
     try {
-      await context.dispatch('api/DELETE_ITEM', { context, id, etag });
+      await context.dispatch('DELETE_ITEM_API', { context, id, etag });
     } catch (err) {
       throw err;
     }
@@ -220,6 +225,16 @@ const actions = {
   SET_SELECTED: (context, selected) => {
     context.commit('SET', { path: 'selected', value: selected });
   },
+
+  GET_LIST_API: (context, payload) => context.dispatch('api/GET_LIST', payload),
+  PATCH_ITEM_API: (
+    context,
+    payload,
+  ) => context.dispatch('api/PATCH_ITEM', payload),
+  DELETE_ITEM_API: (
+    context,
+    payload,
+  ) => context.dispatch('api/DELETE_ITEM', payload),
 };
 
 export default () => ({