@webitel/ui-sdk 26.6.99 → 26.6.100

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

@@ -0,0 +1,190 @@
+<template>
+  <section
+    v-if="access.read"
+    class="table-page"
+  >
+    <header class="table-title">
+      <h3 class="table-title__title">
+        {{ t('access.operations') }}
+      </h3>
+      <div class="table-title__actions-wrap">
+        <permissions-tab-role-popup
+          v-if="access.create"
+          :existing-grantee-ids="existingGranteeIds"
+          :add-role-permissions="addRolePermissions"
+        />
+        <wt-action-bar
+          :include="[IconAction.REFRESH]"
+          @click:refresh="refresh"
+        />
+      </div>
+    </header>
+
+    <div class="table-section__table-wrapper">
+      <wt-empty
+        v-show="showEmpty"
+        :image="imageEmpty"
+        :text="textEmpty"
+      />
+
+      <wt-loader v-show="isLoading" />
+
+      <div
+        v-show="dataList.length && !isLoading"
+        class="table-section__visible-scroll-wrapper"
+      >
+        <wt-table
+          :data="localizedDataList"
+          :grid-actions="access.update"
+          :headers="headers"
+          :selectable="false"
+          sortable
+          @sort="sort"
+        >
+          <template #grantee="{ item }">
+            <permissions-role-row :role="item.grantee" />
+          </template>
+
+          <template #read="{ item }">
+            <wt-single-select
+              :show-clear="false"
+              :disabled="!access.update"
+              :options="accessOptions"
+              :model-value="item.access.r"
+              @update:model-value="changeAccessMode({ item, ruleName: AccessRuleName.R, mode: $event })"
+            />
+          </template>
+
+          <template #edit="{ item }">
+            <wt-single-select
+              :show-clear="false"
+              :disabled="!access.update"
+              :options="accessOptions"
+              :model-value="item.access.w"
+              @update:model-value="changeAccessMode({ item, ruleName: AccessRuleName.W, mode: $event })"
+            />
+          </template>
+
+          <template #delete="{ item }">
+            <wt-single-select
+              :show-clear="false"
+              :disabled="!access.update"
+              :options="accessOptions"
+              :model-value="item.access.d"
+              @update:model-value="changeAccessMode({ item, ruleName: AccessRuleName.D, mode: $event })"
+            />
+          </template>
+
+          <template #actions="{ item }">
+            <wt-icon-action
+              action="delete"
+              @click="
+                changeAccessMode({
+                  item,
+                  ruleName: AccessRuleName.R,
+                  mode: { id: AccessMode.Forbidden },
+                })
+              "
+            />
+          </template>
+        </wt-table>
+      </div>
+
+      <slot name="pagination" />
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import IconAction from '../../../../enums/IconAction/IconAction.enum';
+import { useTableEmpty } from '../../../TableComponentModule/composables/useTableEmpty';
+import { AccessMode, AccessRuleName } from '../../enums';
+import { DEFAULT_PERMISSIONS_USER_ACCESS } from '../../types/PermissionsUserAccess';
+import PermissionsRoleRow from './permissions-role-row.vue';
+import PermissionsTabRolePopup from './permissions-tab-role-popup.vue';
+
+const props = defineProps({
+	dataList: {
+		type: Array,
+		required: true,
+	},
+	isLoading: {
+		type: Boolean,
+		default: false,
+	},
+	headers: {
+		type: Array,
+		required: true,
+	},
+	error: {
+		type: Object,
+		default: null,
+	},
+	refresh: {
+		type: Function,
+		required: true,
+	},
+	sort: {
+		type: Function,
+		required: true,
+	},
+	changeAccessMode: {
+		type: Function,
+		required: true,
+	},
+	existingGranteeIds: {
+		type: Array,
+		default: () => [],
+	},
+	addRolePermissions: {
+		type: Function,
+		required: true,
+	},
+	access: {
+		type: Object,
+		default: () => DEFAULT_PERMISSIONS_USER_ACCESS,
+	},
+});
+
+const { t } = useI18n();
+
+const localizedDataList = computed(() => {
+	return props.dataList.map((item) => {
+		const access = Object.keys(item.access).reduce((acc, rule) => {
+			acc[rule] = {
+				...item.access[rule],
+				name: t(`access.accessMode.${item.access[rule].id}`),
+			};
+			return acc;
+		}, {});
+
+		return {
+			...item,
+			access,
+		};
+	});
+});
+
+const {
+	showEmpty,
+	image: imageEmpty,
+	text: textEmpty,
+} = useTableEmpty({
+	dataList: computed(() => props.dataList),
+	error: computed(() => props.error),
+	isLoading: computed(() => props.isLoading),
+});
+
+const accessOptions = computed(() => {
+	return Object.values(AccessMode).map((mode) => ({
+		id: mode,
+		name: t(`access.accessMode.${mode}`),
+	}));
+});
+</script>
+
+<style lang="scss" scoped>
+@use '../../../../css/pages/table-page.css';
+</style>

package/src/modules/ObjectPermissions/{_internals/components → components/_internal}/permissions-tab-role-popup.vue

@@ -38,34 +38,30 @@
 </template>
 
 <script setup>
-import { computed, ref, useAttrs } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
-import { useStore } from 'vuex';
 
 import RolesAPI from '../../../../api/clients/roles/roles';
-import getNamespacedState from '../../../../store/helpers/getNamespacedState.js';
 import PermissionsRoleSelect from './permissions-role-select.vue';
 
 const props = defineProps({
-	namespace: {
-		type: String,
+	existingGranteeIds: {
+		type: Array,
+		default: () => [],
+	},
+	addRolePermissions: {
+		type: Function,
 		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 = () => {
@@ -108,22 +104,16 @@ const loadGrantees = (params) => {
 	});
 };
 
-// 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,
-				),
-		),
+		items: items.filter((role) => !props.existingGranteeIds.includes(role.id)),
 		...rest,
 	};
 };
 
-const save = async (grantee) => {
-	await store.dispatch(`${props.namespace}/ADD_ROLE_PERMISSIONS`, grantee);
+const save = async (newGrantee) => {
+	await props.addRolePermissions(newGrantee);
 	return close();
 };
 </script>

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

@@ -1,137 +1,38 @@
 <template>
-  <section
-    v-if="access.read"
-    class="table-page"
-  >
-    <header class="table-title">
-      <h3 class="table-title__title">
-        {{ t('access.operations') }}
-      </h3>
-      <div class="table-title__actions-wrap">
-        <role-popup
-          v-if="props.access.add"
-          :namespace="tableNamespace"
-        />
-        <wt-action-bar
-          :include="[IconAction.REFRESH]"
-          @click:refresh="loadData"
-        />
-      </div>
-    </header>
-
-    <div class="table-section__table-wrapper">
-      <wt-empty
-        v-show="showEmpty"
-        :image="imageEmpty"
-        :text="textEmpty"
-      />
-
-      <wt-loader v-show="isLoading" />
-
-      <div
-        v-show="dataList.length && !isLoading"
-        class="table-section__visible-scroll-wrapper"
-      >
-        <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-single-select
-              :show-clear="false"
-              :disabled="!access.edit"
-              :options="accessOptions"
-              :model-value="item.access.r"
-              @update:model-value="changeAccessMode({ item, ruleName: 'r', mode: $event })"
-            />
-          </template>
-
-          <template #edit="{ item }">
-            <wt-single-select
-              :show-clear="false"
-              :disabled="!access.edit"
-              :options="accessOptions"
-              :model-value="item.access.w"
-              @update:model-value="changeAccessMode({ item, ruleName: 'w', mode: $event })"
-            />
-          </template>
-
-          <template #delete="{ item }">
-            <wt-single-select
-              :show-clear="false"
-              :disabled="!access.edit"
-              :options="accessOptions"
-              :model-value="item.access.d"
-              @update:model-value="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>
-      </div>
+  <permissions-tab-content v-bind="tabContentProps">
+    <template #pagination>
       <filter-pagination
         :namespace="filtersNamespace"
         :next="isNext"
       />
-    </div>
-  </section>
+    </template>
+  </permissions-tab-content>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, onUnmounted } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useStore } from 'vuex';
-
-import IconAction from '../../../enums/IconAction/IconAction.enum.js';
-import { useTableEmpty } from '../../../modules/TableComponentModule/composables/useTableEmpty.js';
-import { useTableStore } from '../../../store/new/index.js';
+import { useTableStore } from '../../../store/new';
 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 of the parent card store
-	 */
-	namespace: {
-		type: String,
-		required: true,
+import { useTableFilters } from '../../Filters/composables/useTableFilters';
+import {
+	DEFAULT_PERMISSIONS_USER_ACCESS,
+	type PermissionsUserAccess,
+} from '../types/PermissionsUserAccess';
+import PermissionsTabContent from './_internal/permissions-tab-content.vue';
+
+const props = withDefaults(
+	defineProps<{
+		/** Namespace of the parent card store */
+		namespace: string;
+		/** Access to the component actions, related to permissions */
+		access: PermissionsUserAccess;
+	}>(),
+	{
+		access: () => DEFAULT_PERMISSIONS_USER_ACCESS,
 	},
-	/**
-	 * Access to the component actions, related to permissions
-	 */
-	access: {
-		type: Object,
-		default: () => ({
-			read: true,
-			add: true,
-			edit: true,
-			delete: true,
-		}),
-	},
-});
+);
 
-const { t } = useI18n();
 const store = useStore();
 
 const {
@@ -148,23 +49,6 @@ const {
 	onFilterEvent,
 } = useTableStore(`${props.namespace}/permissions`);
 
-const localizedDataList = computed(() => {
-	return dataList.value.map((item) => {
-		const access = Object.keys(item.access).reduce((acc, rule) => {
-			acc[rule] = {
-				...item.access[rule],
-				name: t(`access.accessMode.${item.access[rule].id}`),
-			};
-			return acc;
-		}, {});
-
-		return {
-			...item,
-			access,
-		};
-	});
-});
-
 const {
 	namespace: filtersNamespace,
 	restoreFilters,
@@ -186,27 +70,26 @@ onUnmounted(() => {
 	resetFilters();
 });
 
-const {
-	showEmpty,
-	image: imageEmpty,
-	text: textEmpty,
-} = useTableEmpty({
-	dataList,
-	error,
-	isLoading,
-});
-
-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>
-@use '../../../css/pages/table-page';
-</style>
+const addRolePermissions = (role) =>
+	store.dispatch(`${tableNamespace}/ADD_ROLE_PERMISSIONS`, role);
+
+const existingGranteeIds = computed(() =>
+	dataList.value.map((item) => item.grantee.id),
+);
+
+const tabContentProps = computed(() => ({
+	dataList: dataList.value,
+	isLoading: isLoading.value,
+	headers: headers.value,
+	error: error.value,
+	refresh: loadData,
+	sort,
+	changeAccessMode,
+	existingGranteeIds: existingGranteeIds.value,
+	addRolePermissions,
+	access: props.access,
+}));
+</script>

package/src/modules/ObjectPermissions/enums/AccessMode.enum.d.ts

@@ -0,0 +1,6 @@
+export declare const AccessMode: {
+    readonly Forbidden: 1;
+    readonly Allow: 2;
+    readonly Manage: 3;
+};
+export type AccessMode = (typeof AccessMode)[keyof typeof AccessMode];

package/src/modules/ObjectPermissions/enums/AccessMode.enum.ts

@@ -0,0 +1,7 @@
+export const AccessMode = {
+	Forbidden: 1,
+	Allow: 2,
+	Manage: 3,
+} as const;
+
+export type AccessMode = (typeof AccessMode)[keyof typeof AccessMode];

package/src/modules/ObjectPermissions/enums/AccessRuleName.enum.d.ts

@@ -0,0 +1,7 @@
+export declare const AccessRuleName: {
+    X: string;
+    R: string;
+    W: string;
+    D: string;
+};
+export type AccessRuleName = (typeof AccessRuleName)[keyof typeof AccessRuleName];

package/src/modules/ObjectPermissions/enums/AccessRuleName.enum.ts

@@ -0,0 +1,9 @@
+export const AccessRuleName = {
+	X: 'x',
+	R: 'r',
+	W: 'w',
+	D: 'd',
+};
+
+export type AccessRuleName =
+	(typeof AccessRuleName)[keyof typeof AccessRuleName];

package/src/modules/ObjectPermissions/enums/index.d.ts

@@ -0,0 +1,2 @@
+export * from './AccessMode.enum';
+export * from './AccessRuleName.enum';

package/src/modules/ObjectPermissions/enums/index.ts

@@ -0,0 +1,2 @@
+export * from './AccessMode.enum';
+export * from './AccessRuleName.enum';

package/{types/modules/ObjectPermissions/_internals/store/modules → src/modules/ObjectPermissions/headers}/headers.d.ts

@@ -1,7 +1,7 @@
-declare const _default: {
+export declare const headers: {
     value: string;
     locale: string;
     field: string;
+    show: boolean;
     sort: any;
 }[];
-export default _default;

package/src/modules/ObjectPermissions/{_internals/store/modules/headers.js → headers/headers.ts}

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

package/src/modules/ObjectPermissions/index.d.ts

@@ -0,0 +1,7 @@
+export { default as PermissionsTabContent } from './components/_internal/permissions-tab-content.vue';
+export { default as PermissionsRolePopup } from './components/_internal/permissions-tab-role-popup.vue';
+export { AccessMode, AccessRuleName } from './enums';
+export { headers } from './headers/headers';
+export { createObjectPermissionsStoreModule } from './store';
+export type { PermissionsUserAccess } from './types/PermissionsUserAccess';
+export { DEFAULT_PERMISSIONS_USER_ACCESS } from './types/PermissionsUserAccess';

package/src/modules/ObjectPermissions/index.ts

@@ -1 +1,7 @@
+export { default as PermissionsTabContent } from './components/_internal/permissions-tab-content.vue';
+export { default as PermissionsRolePopup } from './components/_internal/permissions-tab-role-popup.vue';
+export { AccessMode, AccessRuleName } from './enums';
+export { headers } from './headers/headers';
 export { createObjectPermissionsStoreModule } from './store';
+export type { PermissionsUserAccess } from './types/PermissionsUserAccess';
+export { DEFAULT_PERMISSIONS_USER_ACCESS } from './types/PermissionsUserAccess';

package/src/modules/ObjectPermissions/{_internals/modules → modules}/filters/store/filters.store.js

@@ -1,6 +1,6 @@
 import deepCopy from 'deep-copy';
 
-import FiltersStoreModule from '../../../../../Filters/store/FiltersStoreModule';
+import FiltersStoreModule from '../../../../Filters/store/FiltersStoreModule';
 
 const filtersList = [
 	{

package/src/modules/ObjectPermissions/{_internals/store/helpers → store}/createObjectPermissionsStoreModule.js

@@ -1,8 +1,8 @@
 import {
 	createBaseStoreModule,
 	createTableStoreModule,
-} from '../../../../../store/new/index.js';
-import objectPermissionsStoreModule from '../modules/objectPermissionsStoreModule.js';
+} from '../../../store/new';
+import objectPermissionsStoreModule from './objectPermissionsStoreModule';
 
 export const createObjectPermissionsStoreModule = (modules) => {
 	const modulesArr = Array.isArray(modules)

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

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

package/src/modules/ObjectPermissions/{_internals/store/modules → store}/objectPermissionsStoreModule.js

@@ -1,8 +1,8 @@
 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';
+import { AccessMode } from '../enums/AccessMode.enum';
+import { headers } from '../headers/headers';
+import generateFilters from '../modules/filters/store/filters.store';
 
 const state = {
 	headers,
@@ -27,13 +27,13 @@ const actions = {
           ww |  w    | -
      */
 		switch (mode.id) {
-			case AccessMode.FORBIDDEN:
+			case AccessMode.Forbidden:
 				want = ruleName;
 				break;
-			case AccessMode.ALLOW:
+			case AccessMode.Allow:
 				want = have.rule || ruleName;
 				break;
-			case AccessMode.MANAGE:
+			case AccessMode.Manage:
 				want = `${ruleName}${ruleName}`;
 				break;
 			default:
@@ -55,7 +55,6 @@ const actions = {
 		}
 	},
 	ADD_ROLE_PERMISSIONS: async (context, role) => {
-		console.info(role);
 		const changes = [
 			{
 				grantee: +role.id,

package/src/modules/ObjectPermissions/types/PermissionsUserAccess.d.ts

@@ -0,0 +1,3 @@
+import { CrudAction } from '../../../enums';
+export type PermissionsUserAccess = Record<CrudAction, boolean>;
+export declare const DEFAULT_PERMISSIONS_USER_ACCESS: PermissionsUserAccess;

package/src/modules/ObjectPermissions/types/PermissionsUserAccess.ts

@@ -0,0 +1,10 @@
+import { CrudAction } from '../../../enums';
+
+export type PermissionsUserAccess = Record<CrudAction, boolean>;
+
+export const DEFAULT_PERMISSIONS_USER_ACCESS: PermissionsUserAccess = {
+	[CrudAction.Read]: false,
+	[CrudAction.Create]: false,
+	[CrudAction.Update]: false,
+	[CrudAction.Delete]: false,
+};

package/src/modules/Userinfo/constants/UserSettingsConstants.d.ts

@@ -1 +1 @@
-export declare const TIMEZONE_STORAGE_KEY = 'user-timezone-setting';
+export declare const TIMEZONE_STORAGE_KEY = "user-timezone-setting";