@webitel/ui-sdk 24.10.42 → 24.10.43

package/package.json

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

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

@@ -0,0 +1,97 @@
+import {
+  getDefaultGetListResponse,
+  getDefaultGetParams,
+  getDefaultInstance,
+} from '../../defaults/index.js';
+import applyTransform, {
+  camelToSnake,
+  generateUrl,
+  merge,
+  mergeEach,
+  notify,
+  sanitize,
+  snakeToCamel,
+  starToSearch,
+} from '../../transformers/index.js';
+
+const permissionsUrl = '/acl';
+
+const handlePermissionsList = (items) => {
+  return items.map((item) => ({
+    ...item,
+    access: {
+      x: {
+        id: (item.granted.match(/x/g) || []).length + 1,
+        rule: 'x'.repeat((item.granted.match(/x/g) || []).length),
+      },
+      r: {
+        id: (item.granted.match(/r/g) || []).length + 1,
+        rule: 'r'.repeat((item.granted.match(/r/g) || []).length),
+      },
+      w: {
+        id: (item.granted.match(/w/g) || []).length + 1,
+        rule: 'w'.repeat((item.granted.match(/w/g) || []).length),
+      },
+      d: {
+        id: (item.granted.match(/d/g) || []).length + 1,
+        rule: 'd'.repeat((item.granted.match(/d/g) || []).length),
+      },
+    },
+  }));
+};
+
+export const generatePermissionsApi = (baseUrl) => {
+  const instance = getDefaultInstance();
+
+  const getList = async ({ parentId, ...params }) => {
+    const fieldsToSend = ['page', 'size', 'q', 'sort', 'fields', 'id'];
+
+    const defaultObject = {
+      user: false,
+    };
+
+    const url = applyTransform(params, [
+      merge(getDefaultGetParams()),
+      starToSearch('search'),
+      (params) => ({
+        ...params,
+        q: params.search,
+      }),
+      sanitize(fieldsToSend),
+      camelToSnake(),
+      generateUrl(`${baseUrl}/${parentId}/${permissionsUrl}`),
+    ]);
+    try {
+      const response = await instance.get(url);
+      const { items, next } = applyTransform(response.data, [
+        snakeToCamel(),
+        merge(getDefaultGetListResponse()),
+      ]);
+      return {
+        items: applyTransform(items, [
+          mergeEach(defaultObject),
+          handlePermissionsList,
+        ]),
+        next,
+      };
+    } catch (err) {
+      throw applyTransform(err, [notify]);
+    }
+  };
+
+  const patch = async ({ changes, id }) => {
+    const body = applyTransform(changes, [camelToSnake()]);
+    const url = `${baseUrl}/${id}/${permissionsUrl}`;
+    try {
+      const response = await instance.patch(url, body);
+      return applyTransform(response.data, [snakeToCamel()]);
+    } catch (err) {
+      throw applyTransform(err, [notify]);
+    }
+  };
+
+  return {
+    getPermissionsList: getList,
+    patchPermissions: patch,
+  };
+};

package/src/api/clients/index.js

@@ -11,6 +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';
 
 export {
   agents,
@@ -26,4 +27,6 @@ export {
   roles,
   users,
   configurations,
+  contacts,
+  contactChatMessagesHistory,
 };

package/src/api/clients/users/users.js

@@ -13,6 +13,7 @@ import applyTransform, {
   sanitize,
   snakeToCamel,
 } from '../../transformers/index.js';
+import { generatePermissionsApi } from '../_shared/generatePermissionsApi.js';
 
 const instance = getDefaultInstance();
 
@@ -214,6 +215,8 @@ const UsersAPI = {
   getLookup: getUsersLookup,
   patchUserPresence,
   logoutUser,
+
+  ...generatePermissionsApi(baseUrl),
 };
 
 export default UsersAPI;

package/src/locale/en/en.js

@@ -5,14 +5,21 @@ import {
   ChannelType,
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
-import { notify } from '../../api/transformers/index.js';
-import ChatGatewayProvider from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import ChatGatewayProvider
+  from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
-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';
+import {
+  AccessMode,
+} from '../../modules/ObjectPermissions/_internals/enums/AccessMode.enum.js';
 import { snakeToCamel } from '../../scripts/caseConverters.js';
 
 export default {
@@ -109,6 +116,18 @@ export default {
     sec: 'Sec',
     timezone: 'Time zone | Time zones',
   },
+  // locales, related to user access, permissions, etc.
+  access: {
+    ObAC: 'Managed by operations',
+    RbAC: 'Managed by records',
+    operations: 'Operations',
+    rbacDefault: 'Default Record based Access',
+    accessMode: {
+      [AccessMode.FORBIDDEN]: 'Forbidden',
+      [AccessMode.ALLOW]: 'Allow',
+      [AccessMode.MANAGE]: 'Allow with delegation',
+    },
+  },
   // describes Webitel system entities
   objects: {
     team: 'Team | Teams',
@@ -117,6 +136,8 @@ export default {
     region: 'Region | Regions',
     communicationType: 'Communication type | Communication types',
     grantee: 'Grantee | Grantees',
+    grantor: 'Grantor | Grantors',
+    role: 'Role | Roles',
     user: 'User | Users',
     queue: {
       type: {

package/src/locale/ru/ru.js

@@ -5,13 +5,21 @@ import {
   ChannelType,
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
-import ChatGatewayProvider from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import ChatGatewayProvider
+  from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
-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';
+import {
+  AccessMode,
+} from '../../modules/ObjectPermissions/_internals/enums/AccessMode.enum.js';
 import { snakeToCamel } from '../../scripts/caseConverters.js';
 
 export default {
@@ -107,6 +115,18 @@ export default {
     sec: 'Сек',
     timezone: 'Часовая зона | Часовые зоны',
   },
+  // locales, related to user access, permissions, etc.
+  access: {
+    ObAC: 'Управление действиями',
+    RbAC: 'Управление записями',
+    operations: 'Действия',
+    rbacDefault: 'Права доступа по записям по умолчанию',
+    accessMode: {
+      [AccessMode.FORBIDDEN]: 'Запрещено',
+      [AccessMode.ALLOW]: 'Разрешено',
+      [AccessMode.MANAGE]: 'Управление',
+    },
+  },
   // describes Webitel system entities
   objects: {
     team: 'Команда | Команды',
@@ -115,7 +135,9 @@ export default {
     region: 'Регион | Регионы',
     communicationType: 'Тип связи | Типы связи',
     grantee: 'Получатель | Получатели',
+    grantor: 'Праводатель | Праводатели',
     user: 'Пользователь | Пользователи',
+    role: 'Роль | Роли',
     queue: {
       type: {
         [QueueType.INBOUND_QUEUE]: 'Входящая очередь',

package/src/locale/ua/ua.js

@@ -5,13 +5,21 @@ import {
   ChannelType,
   EngineRoutingSchemaType,
 } from 'webitel-sdk';
-import ChatGatewayProvider from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import ChatGatewayProvider
+  from '../../enums/ChatGatewayProvider/ChatGatewayProvider.enum.js';
 import QueueType from '../../enums/QueueType/QueueType.enum.js';
-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';
+import {
+  AccessMode,
+} from '../../modules/ObjectPermissions/_internals/enums/AccessMode.enum.js';
 import { snakeToCamel } from '../../scripts/caseConverters.js';
 
 export default {
@@ -107,6 +115,18 @@ export default {
     sec: 'Сек',
     timezone: 'Часова зона | Часові зони',
   },
+  // locales, related to user access, permissions, etc.
+  access: {
+    ObAC: 'Управління діями',
+    RbAC: 'Управління записами',
+    operations: 'Дії',
+    rbacDefault: 'Права доступу на записи за замовчуванням',
+    accessMode: {
+      [AccessMode.FORBIDDEN]: 'Заборонено',
+      [AccessMode.ALLOW]: 'Дозволено',
+      [AccessMode.MANAGE]: 'Управління',
+    },
+  },
   // describes Webitel system entities
   objects: {
     team: 'Команда | Команди',
@@ -115,7 +135,9 @@ export default {
     region: 'Регіон | Регіони',
     communicationType: "Тип зв'язку | Типи зв'язку",
     grantee: 'Отримувач | Отримувачі',
+    grantor: 'Надавач | Надавачі',
     user: 'Користувач | Користувачі',
+    role: 'Роль | Ролі',
     queue: {
       type: {
         [QueueType.INBOUND_QUEUE]: 'Вхідна черга',

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

@@ -0,0 +1,28 @@
+<template>
+  <div class="permissions-role-row">
+    <wt-icon
+      :icon="role.user ? 'user' : 'role'"
+    />
+    <slot>
+      {{ role.name }}
+    </slot>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  role: {
+    type: Object,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+.permissions-role-row {
+  display: grid;
+  align-items: center;
+  grid-template-columns: var(--icon-md-size) 1fr;
+  gap: var(--spacing-sm);
+}
+</style>

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

@@ -0,0 +1,30 @@
+<template>
+  <wt-select
+    class="permissions-role-select"
+    option-label="name"
+    v-bind="attrs"
+  >
+    <template #singleLabel="{ option, optionLabel }">
+      <role-row :role="option.user">
+        {{ option[optionLabel] || option }}
+      </role-row>
+    </template>
+
+    <template #option="{ option, optionLabel }">
+      <role-row :role="option.user">
+        {{ option[optionLabel] || option }}
+      </role-row>
+    </template>
+  </wt-select>
+</template>
+
+<script setup>
+import { useAttrs } from 'vue';
+import RoleRow from './permissions-role-row.vue';
+
+const attrs = useAttrs();
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,109 @@
+<template>
+  <div class="permissions-tab-role-popup">
+    <wt-icon-btn
+      icon="plus"
+      @click="add"
+    />
+
+    <wt-popup
+      :shown="shown"
+      overflow
+      size="sm"
+      @close="close"
+    >
+      <template #title>
+        {{ `${t('reusable.new')} ${t('objects.grantee', 1).toLowerCase()}` }}
+      </template>
+      <template #main>
+        <permissions-role-select
+          v-model="grantee"
+          :clearable="false"
+          :placeholder="t('object.role', 1)"
+          :search-method="getAvailableGrantees"
+        />
+      </template>
+      <template #actions>
+        <wt-button @click="save">
+          {{ t('objects.add') }}
+        </wt-button>
+        <wt-button
+          color="secondary"
+          @click="close"
+        >
+          {{ t('objects.close') }}
+        </wt-button>
+      </template>
+    </wt-popup>
+  </div>
+</template>
+
+<script setup>
+import { ref, useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import RolesAPI from '../../../../api/clients/roles/roles.js';
+import getNamespacedState from '../../../../store/helpers/getNamespacedState.js';
+import PermissionsRoleSelect from './permissions-role-select.vue';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+});
+
+const attrs = useAttrs();
+const store = useStore();
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+
+const grantee = ref(null);
+
+const existingGranteesList = computed(() => getNamespacedState(store.state, props.namespace).dataList);
+
+const shown = computed(() => !!route.params.permissionId);
+
+const add = () => router.push({
+  ...route,
+  params: { ...route.params, permissionId: 'new' },
+});
+
+const close = () => {
+  const { permissionId, ...params } = route.params;
+
+  return router.push({
+    ...route,
+    params,
+  });
+};
+
+const loadGrantees = (params) => {
+  const fields = ['name', 'id', 'user'];
+  return RolesAPI.getExtendedRoles({
+    ...params,
+    fields,
+  });
+};
+
+// filter already existing roles
+const getAvailableGrantees = async (params) => {
+  const { items, ...rest } = await loadGrantees(params);
+  return {
+    items: items.filter(
+      (role) => !existingGranteesList.value.some((usedRoles) => role.id === usedRoles.grantee.id),
+    ),
+    ...rest,
+  };
+};
+
+const save = async (payload = grantee.value) => {
+  await store.dispatch(`${props.namespace}/ADD_ROLE_PERMISSIONS`, payload);
+  return close();
+};
+
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/modules/ObjectPermissions/_internals/enums/AccessMode.enum.js

@@ -0,0 +1,5 @@
+export const AccessMode = Object.freeze({
+  FORBIDDEN: 1,
+  ALLOW: 2,
+  MANAGE: 3,
+});

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

@@ -0,0 +1,25 @@
+import deepCopy from 'deep-copy';
+import FiltersStoreModule
+  from '../../../../../Filters/store/FiltersStoreModule';
+
+const filtersList = [
+  {
+    name: 'page',
+    value: 1,
+  },
+  {
+    name: 'size',
+    value: 10,
+  },
+  { name: 'sort' },
+];
+
+export default () => {
+  const filters = new FiltersStoreModule()
+  .addFilter(deepCopy(filtersList))
+  .getModule();
+
+  return {
+    filters,
+  };
+};

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

@@ -0,0 +1,15 @@
+import { createBaseStoreModule } from '../../../../../store/new/index.js';
+import tableStoreModule
+  from '../../../../../store/new/modules/tableStoreModule/tableStoreModule.js';
+import objectPermissionsStoreModule
+  from '../modules/objectPermissionsStoreModule.js';
+
+export const createObjectPermissionsStoreModule = (modules = []) => {
+  const modulesArr = Array.isArray(modules) ? modules : [modules];
+
+  return createBaseStoreModule([
+    tableStoreModule(),
+    objectPermissionsStoreModule(),
+    ...modulesArr,
+  ]);
+};

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

@@ -0,0 +1,68 @@
+import { AccessMode } from '../../enums/AccessMode.enum.js';
+import generateFilters from '../../modules/filters/store/filters.store.js';
+
+const actions = {
+  CHANGE_ACCESS_MODE: async (context, { mode, ruleName, item }) => {
+    const have = item.access[ruleName];
+    let want;
+    /*
+         has | patch | got
+        -----+-------+-----
+           - |  w    | w
+           w |  w    | -
+           - |  ww   | ww
+           w |  ww   | ww
+          ww |  ww   | w
+          ww |  w    | -
+     */
+    switch (mode.id) {
+      case AccessMode.FORBIDDEN:
+        want = ruleName;
+        break;
+      case AccessMode.ALLOW:
+        want = have.rule || ruleName;
+        break;
+      case AccessMode.MANAGE:
+        want = `${ruleName}${ruleName}`;
+        break;
+      default:
+        return;
+    }
+    const changes = {
+      grantee: +item.grantee.id,
+      grants: want,
+    };
+    try {
+      await context.dispatch('PATCH_ACCESS_MODE', {
+        item,
+        changes,
+      });
+    } finally {
+      await context.dispatch('LOAD_DATA_LIST');
+    }
+  },
+  ADD_ROLE_PERMISSIONS: async (context, role) => {
+    const changes = {
+      grantee: +role.id,
+      grants: 'r',
+    };
+    try {
+      await context.dispatch('PATCH_ACCESS_MODE', {
+        changes,
+      });
+    } finally {
+      await context.dispatch('LOAD_DATA_LIST');
+    }
+  },
+};
+
+export default () => {
+  const filters = generateFilters();
+
+  return {
+    actions,
+    modules: {
+      filters,
+    },
+  };
+};