@webitel/ui-sdk 24.10.42 → 24.10.44

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

@@ -0,0 +1,214 @@
+<template>
+  <section
+    v-if="access.read"
+    class="permissions-tab"
+  >
+    <header class="content-header">
+      <h3 class="content-title">
+        {{ $t('access.operations') }}
+      </h3>
+      <div class="content-header__actions-wrap">
+        <!--        TODO replace wt-table-actions -->
+        <!--        <wt-table-actions-->
+        <!--          :icons="['refresh']"-->
+        <!--          @input="(event) => event === 'refresh' && loadData()"-->
+        <!--        >-->
+        <!--        </wt-table-actions>-->
+        <role-popup
+          v-if="props.access.add"
+          :namespace="tableNamespace"
+        />
+      </div>
+    </header>
+
+    <wt-loader v-show="isLoading" />
+
+    <!--    TODO -->
+    <!--    <wt-dummy-->
+    <!--      v-if="dummy && !isLoading"-->
+    <!--      :dark-mode="darkMode"-->
+    <!--      :src="dummy.src"-->
+    <!--      :text="dummy.text && t(dummy.text)"-->
+    <!--      class="dummy-wrapper"-->
+    <!--    />-->
+
+    <div class="table-wrapper">
+      <div
+        v-if="dataList.length && !isLoading"
+        style="display:contents;"
+      >
+        <!--        TODO -->
+        <!--        <transition-slide-->
+        <!--          :offset="{-->
+        <!--              enter: ['-5%', 0],-->
+        <!--              leave: [0, 0]-->
+        <!--            }"-->
+        <!--          duration="200"-->
+        <!--          mode="out-in"-->
+        <!--          appear-->
+        <!--        >-->
+        <wt-table
+          :data="localizedDataList"
+          :grid-actions="access.edit"
+          :headers="headers"
+          :selectable="false"
+          sortable
+          @sort="sort"
+        >
+          <template #grantee="{ item }">
+            <role-column
+              :role="item.grantee"
+            />
+          </template>
+
+          <template #read="{ item }">
+            <wt-select
+              :clearable="false"
+              :disabled="!access.edit"
+              :options="accessOptions"
+              :value="item.access.r"
+              @input="changeAccessMode({ item, ruleName: 'r', mode: $event })"
+            />
+          </template>
+
+          <template #edit="{ item }">
+            <wt-select
+              :clearable="false"
+              :disabled="!access.edit"
+              :options="accessOptions"
+              :value="item.access.w"
+              @input="changeAccessMode({ item, ruleName: 'w', mode: $event })"
+            />
+          </template>
+
+          <template #delete="{ item }">
+            <wt-select
+              :clearable="false"
+              :disabled="!access.edit"
+              :options="accessOptions"
+              :value="item.access.d"
+              @input="changeAccessMode({ item, ruleName: 'd', mode: $event })"
+            />
+          </template>
+          <template #actions="{ item }">
+            <wt-icon-action
+              action="delete"
+              @click="changeAccessMode({ item, ruleName: 'r', mode: { id: AccessMode.FORBIDDEN }})"
+            />
+          </template>
+        </wt-table>
+        <!--        </transition-slide>-->
+      </div>
+      <filter-pagination
+        :namespace="filtersNamespace"
+        :next="isNext"
+      />
+    </div>
+  </section>
+</template>
+
+<script setup>
+// TODO: класи, даммі, транзішен таблички. WTEL-3392
+
+import { computed, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { useTableStore } from '../../../store/new/index.js';
+import FilterPagination from '../../Filters/components/filter-pagination.vue';
+import { useTableFilters } from '../../Filters/composables/useTableFilters.js';
+import RoleColumn from '../_internals/components/permissions-role-row.vue';
+import RolePopup from '../_internals/components/permissions-tab-role-popup.vue';
+import { AccessMode } from '../_internals/enums/AccessMode.enum.js';
+
+const props = defineProps({
+  namespace: {
+    type: String,
+    required: true,
+  },
+  access: {
+    type: Object,
+    default: () => ({
+      read: true,
+      add: true,
+      edit: true,
+      delete: true,
+    }),
+  },
+});
+
+const { t } = useI18n();
+const store = useStore();
+
+const {
+  namespace: tableNamespace,
+
+  dataList,
+  isLoading,
+  headers,
+  isNext,
+  error,
+
+  loadData, // TODO: use for refresh button
+  sort,
+  onFilterEvent,
+} = useTableStore(`${props.namespace}/permissions`);
+
+const localizedDataList = computed(() => {
+  return dataList.value.map((item) => {
+    const access = Object.keys(item.access).reduce((access, rule) => {
+      return {
+        ...access,
+        [rule]: {
+          ...item.access[rule],
+          name: t(`access.accessMode.${item.access[rule].id}`),
+        },
+      };
+    }, {});
+
+    return {
+      ...item,
+      access,
+    };
+  });
+});
+
+const {
+  namespace: filtersNamespace,
+  restoreFilters,
+
+  subscribe,
+  flushSubscribers,
+} = useTableFilters(tableNamespace);
+
+subscribe({
+  event: '*',
+  callback: onFilterEvent,
+});
+
+restoreFilters();
+
+onUnmounted(() => {
+  flushSubscribers();
+});
+
+// TODO
+// const { dummy } = useDummy({
+//   namespace,
+//   hiddenText: true,
+// });
+
+const accessOptions = computed(() => {
+  return Object.values(AccessMode).map((mode) => ({
+    id: mode,
+    name: t(`access.accessMode.${mode}`),
+  }));
+});
+
+const changeAccessMode = (payload) => (
+  store.dispatch(`${tableNamespace}/CHANGE_ACCESS_MODE`, payload)
+);
+
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/modules/ObjectPermissions/store/index.js

@@ -0,0 +1,7 @@
+import {
+  createObjectPermissionsStoreModule,
+} from '../_internals/store/helpers/createObjectPermissionsStoreModule.js';
+
+export {
+  createObjectPermissionsStoreModule,
+};

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/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 () => ({