@webitel/ui-datalist 26.12.4 → 26.12.6

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

@@ -0,0 +1,161 @@
+<template>
+  <section
+    v-if="access.read"
+    class="table-section"
+  >
+    <permissions-tab-role-popup
+      v-if="access.create"
+      :existing-grantee-ids="existingGranteeIds"
+      :add-role-permissions="addRolePermissions"
+    />
+
+    <header class="table-title permissions-tab-content__header">
+      <wt-action-bar
+        :include="[IconAction.ADD, IconAction.REFRESH]"
+        :disabled:add="!access.create"
+        @click:add="openRolePopup"
+        @click:refresh="refresh"
+      />
+    </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>
+
+          <!-- [Claude] one select per rule column; "create" shows only where the headers have it, e.g. object classes OBAC -->
+          <template
+            v-for="(ruleName, column) of AccessRuleColumn"
+            :key="column"
+            #[column]="{ item }"
+          >
+            <wt-single-select
+              :show-clear="false"
+              :disabled="!access.update"
+              :options="accessOptions"
+              :model-value="item.access[ruleName]"
+              @update:model-value="changeAccessMode({ item, ruleName, 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 lang="ts">
+import {
+	AccessMode,
+	AccessRuleColumn,
+	AccessRuleName,
+} from '@webitel/api-services/enums';
+import { IconAction } from '@webitel/ui-sdk/enums';
+import { useTableEmpty } from '@webitel/ui-sdk/src/modules/TableComponentModule/composables/useTableEmpty';
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+import type { DatalistTableHeader } from '../../../types/tableStore.types';
+import { useAccessModeOptions } from '../../composables/useAccessModeOptions';
+import type {
+	ChangeAccessModePayload,
+	PermissionEntity,
+	PermissionGrantee,
+} from '../../types/Permission.types';
+import {
+	DEFAULT_PERMISSIONS_USER_ACCESS,
+	type PermissionsUserAccess,
+} from '../../types/PermissionsUserAccess';
+import PermissionsRoleRow from './permissions-role-row.vue';
+import PermissionsTabRolePopup from './permissions-tab-role-popup.vue';
+
+const props = withDefaults(
+	defineProps<{
+		dataList: PermissionEntity[];
+		isLoading?: boolean;
+		headers: DatalistTableHeader[];
+		error?: unknown;
+		refresh: () => unknown;
+		sort: (column: DatalistTableHeader) => unknown;
+		changeAccessMode: (payload: ChangeAccessModePayload) => unknown;
+		existingGranteeIds?: PermissionGrantee['id'][];
+		addRolePermissions: (role: PermissionGrantee) => Promise<unknown>;
+		access?: PermissionsUserAccess;
+	}>(),
+	{
+		isLoading: false,
+		existingGranteeIds: () => [],
+		access: () => DEFAULT_PERMISSIONS_USER_ACCESS,
+	},
+);
+
+const { accessOptions, localizedDataList } = useAccessModeOptions(
+	() => props.dataList,
+);
+
+const route = useRoute();
+const router = useRouter();
+
+/** [Claude] the role popup is opened by the route, so it survives a reload */
+const openRolePopup = () =>
+	router.push({
+		name: route.name,
+		query: route.query,
+		hash: route.hash,
+		params: {
+			...route.params,
+			permissionId: 'new',
+		},
+	});
+
+const {
+	showEmpty,
+	image: imageEmpty,
+	text: textEmpty,
+} = useTableEmpty({
+	dataList: computed(() => props.dataList),
+	error: computed(() => props.error),
+	isLoading: computed(() => props.isLoading),
+});
+</script>
+
+<style scoped>
+/* [Claude] no title in the header, so push the action bar to the right */
+.permissions-tab-content__header {
+	justify-content: flex-end;
+}
+</style>

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

@@ -0,0 +1,94 @@
+<template>
+  <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:model-value="grantee"
+        :clearable="false"
+        :placeholder="t('objects.role', 1)"
+        :search-method="getAvailableGrantees"
+      />
+    </template>
+    <template #actions>
+      <wt-button @click="save(grantee)">
+        {{ t('reusable.add') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="close"
+      >
+        {{ t('reusable.close') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup lang="ts">
+import { RolesAPI } from '@webitel/api-services/api';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import type { PermissionGrantee } from '../../types/Permission.types';
+import PermissionsRoleSelect from './permissions-role-select.vue';
+
+const props = withDefaults(
+	defineProps<{
+		existingGranteeIds?: PermissionGrantee['id'][];
+		addRolePermissions: (role: PermissionGrantee) => Promise<unknown>;
+	}>(),
+	{
+		existingGranteeIds: () => [],
+	},
+);
+
+const { t } = useI18n();
+const router = useRouter();
+const route = useRoute();
+
+const grantee = ref<PermissionGrantee | null>(null);
+
+/** [Claude] opened by the route, the tab's "add" action sets `permissionId` */
+const shown = computed(() => !!route.params.permissionId);
+
+const close = () => {
+	const { query, hash, name } = route;
+	const { permissionId, ...params } = route.params;
+
+	grantee.value = null;
+
+	return router.push({
+		query,
+		hash,
+		name,
+		params,
+	});
+};
+
+const getAvailableGrantees = async (params: Record<string, unknown>) => {
+	const { items, ...rest } = await RolesAPI.getLookup(params);
+	return {
+		/** [Claude] acl grantee ids come as strings, role ids as numbers */
+		items: (items as PermissionGrantee[]).filter(
+			(role) =>
+				!props.existingGranteeIds.some((id) => String(id) === String(role.id)),
+		),
+		...rest,
+	};
+};
+
+const save = async (newGrantee: PermissionGrantee | null) => {
+	if (!newGrantee) return;
+	await props.addRolePermissions(newGrantee);
+	return close();
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/{permissions-page → permissions}/components/permissions-tab.vue

@@ -15,15 +15,15 @@
 </template>
 
 <script setup lang="ts">
-import {
-	DEFAULT_PERMISSIONS_USER_ACCESS,
-	PermissionsTabContent,
-	type PermissionsUserAccess,
-} from '@webitel/ui-sdk/modules/ObjectPermissions';
 import type { Id } from '@webitel/ui-sdk/src/api/types/ApiModule';
 import { storeToRefs } from 'pinia';
 import { computed, onUnmounted } from 'vue';
 import type { PermissionsPiniaStore } from '../stores/createPermissionsStore';
+import {
+	DEFAULT_PERMISSIONS_USER_ACCESS,
+	type PermissionsUserAccess,
+} from '../types/PermissionsUserAccess';
+import PermissionsTabContent from './_internal/permissions-tab-content.vue';
 
 const props = withDefaults(
 	defineProps<{

package/src/modules/permissions/composables/useAccessModeOptions.ts

@@ -0,0 +1,48 @@
+import { AccessMode } from '@webitel/api-services/enums';
+import { computed, type MaybeRefOrGetter, toValue } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+interface AccessModeRow {
+	access: Record<
+		string,
+		{
+			id: number;
+		}
+	>;
+}
+
+/** [Claude] access mode select options, and the rows with a localized name on every rule */
+export const useAccessModeOptions = <Row extends AccessModeRow>(
+	dataList: MaybeRefOrGetter<Row[]>,
+) => {
+	const { t } = useI18n();
+
+	const getAccessModeName = (mode: number) => t(`access.accessMode.${mode}`);
+
+	const accessOptions = computed(() =>
+		Object.values(AccessMode).map((mode) => ({
+			id: mode,
+			name: getAccessModeName(mode),
+		})),
+	);
+
+	const localizedDataList = computed(() =>
+		toValue(dataList).map((item) => ({
+			...item,
+			access: Object.fromEntries(
+				Object.entries(item.access).map(([rule, value]) => [
+					rule,
+					{
+						...value,
+						name: getAccessModeName(value.id),
+					},
+				]),
+			),
+		})),
+	);
+
+	return {
+		accessOptions,
+		localizedDataList,
+	};
+};

package/src/modules/permissions/index.ts

@@ -0,0 +1,40 @@
+import PermissionsRoleRow from './components/_internal/permissions-role-row.vue';
+import PermissionsRoleSelect from './components/_internal/permissions-role-select.vue';
+import PermissionsTabContent from './components/_internal/permissions-tab-content.vue';
+import PermissionsRolePopup from './components/_internal/permissions-tab-role-popup.vue';
+import PermissionsTab from './components/permissions-tab.vue';
+
+/** [Claude] the acl enums and grants logic live in api-services; re-exported to keep permissions in one place */
+export {
+	AccessMode,
+	AccessRuleColumn,
+	AccessRuleName,
+} from '@webitel/api-services/enums';
+export type { ResolveGrantsParams } from '@webitel/api-services/scripts';
+export { resolveGrants } from '@webitel/api-services/scripts';
+
+export { useAccessModeOptions } from './composables/useAccessModeOptions';
+export { headers, headersWithCreate } from './stores/_internals/headers';
+export type { PermissionsPiniaStore } from './stores/createPermissionsStore';
+export {
+	createPermissionsStore,
+	permissionsStoreBody,
+} from './stores/createPermissionsStore';
+export type {
+	ChangeAccessModePayload,
+	PermissionAccessRule,
+	PermissionEntity,
+	PermissionGrantee,
+	PermissionsChange,
+	RawPermissionsApiModule,
+} from './types/Permission.types';
+export type { PermissionsUserAccess } from './types/PermissionsUserAccess';
+export { DEFAULT_PERMISSIONS_USER_ACCESS } from './types/PermissionsUserAccess';
+
+export {
+	PermissionsRolePopup,
+	PermissionsRoleRow,
+	PermissionsRoleSelect,
+	PermissionsTab,
+	PermissionsTabContent,
+};

package/src/modules/permissions/stores/_internals/headers.ts

@@ -0,0 +1,52 @@
+import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
+
+/**
+ * [Claude] Each rule column keeps its own `field` (`r`, `w`, `d`), so sorting
+ * one marks only that column and sends `sort=+r` / `+w` / `+d`. `GET
+ * <object>/:id/acl` has no such attributes in `fields` though — it returns the
+ * three rules merged into one `granted` string — so `PermissionsApiModule`
+ * asks for `granted` in their place.
+ */
+export const headers = [
+	{
+		value: 'grantee',
+		locale: 'reusable.name',
+		field: 'grantee',
+		show: true,
+		sort: SortSymbols.NONE,
+	},
+	{
+		value: 'read',
+		locale: 'reusable.read',
+		field: 'r',
+		show: true,
+		sort: SortSymbols.NONE,
+	},
+	{
+		value: 'edit',
+		locale: 'reusable.edit',
+		field: 'w',
+		show: true,
+		sort: SortSymbols.NONE,
+	},
+	{
+		value: 'delete',
+		locale: 'reusable.delete',
+		field: 'd',
+		show: true,
+		sort: SortSymbols.NONE,
+	},
+];
+
+/** [Claude] object classes OBAC also grants "create" (`x`), right after the grantee */
+export const headersWithCreate = [
+	headers[0],
+	{
+		value: 'create',
+		locale: 'reusable.create',
+		field: 'granted',
+		show: true,
+		sort: SortSymbols.NONE,
+	},
+	...headers.slice(1),
+];

package/src/modules/{permissions-page → permissions}/stores/createPermissionsStore.ts

@@ -1,5 +1,5 @@
-import { AccessMode, headers } from '@webitel/ui-sdk/modules/ObjectPermissions';
-import { AccessRuleName } from '@webitel/ui-sdk/modules/ObjectPermissions/enums';
+import { AccessRuleName } from '@webitel/api-services/enums';
+import { resolveGrants } from '@webitel/api-services/scripts';
 import type { Id } from '@webitel/ui-sdk/src/api/types/ApiModule';
 import type { StoreGeneric } from 'pinia';
 import { ref } from 'vue';
@@ -9,49 +9,19 @@ import {
 } from '../../_shared/createDatalistStore';
 import { tableStoreBody } from '../../table/createTableStore.store';
 import type { useTableStoreConfig } from '../../types/tableStore.types';
-import { PermissionsApiModule } from '../scripts/PermissionsApiModule';
 import type {
 	ChangeAccessModePayload,
 	PermissionEntity,
 	PermissionsChange,
 	RawPermissionsApiModule,
 } from '../types/Permission.types';
-
-const resolveModeId = (mode: ChangeAccessModePayload['mode']) =>
-	typeof mode === 'number' ? mode : mode?.id;
-
-/*
- has | patch | got
------+-------+-----
-   - |  w    | w
-   w |  w    | -
-   - |  ww   | ww
-   w |  ww   | ww
-  ww |  ww   | w
-  ww |  w    | -
-*/
-const resolveGrants = ({
-	item,
-	ruleName,
-	mode,
-}: ChangeAccessModePayload): string | null => {
-	const have = item.access[ruleName];
-
-	switch (resolveModeId(mode)) {
-		case AccessMode.Forbidden:
-			return ruleName;
-		case AccessMode.Allow:
-			return have.rule || ruleName;
-		case AccessMode.Manage:
-			return `${ruleName}${ruleName}`;
-		default:
-			return null;
-	}
-};
+import { headers } from './_internals/headers';
 
 export const permissionsStoreBody = (
 	namespace: string,
 	config: useTableStoreConfig<PermissionEntity>,
+	/** [Claude] the entity api, whose `patchPermissions` takes acl changes, not a row patch */
+	permissionsApi: RawPermissionsApiModule,
 ) => {
 	const tableStore = tableStoreBody<PermissionEntity>(namespace, config);
 	const { dataList, selected, error, isLoading } = makeThisToRefs(
@@ -78,13 +48,10 @@ export const permissionsStoreBody = (
 	};
 
 	const patchPermissions = async (changes: PermissionsChange[]) => {
+		if (parentId.value === undefined) return;
+
 		try {
-			await (
-				config.apiModule.patch as unknown as (payload: {
-					id: Id | undefined;
-					changes: PermissionsChange[];
-				}) => Promise<unknown>
-			)({
+			await permissionsApi.patchPermissions({
 				id: parentId.value,
 				changes,
 			});
@@ -96,7 +63,11 @@ export const permissionsStoreBody = (
 	};
 
 	const changeAccessMode = async (payload: ChangeAccessModePayload) => {
-		const grants = resolveGrants(payload);
+		const grants = resolveGrants({
+			have: payload.item.access[payload.ruleName],
+			ruleName: payload.ruleName,
+			mode: payload.mode,
+		});
 		if (!grants) return;
 
 		return patchPermissions([
@@ -152,12 +123,16 @@ export const createPermissionsStore = (
 		   saved by an older version would keep being sent to the api */
 		disablePersistence: true,
 		...config,
-		apiModule: PermissionsApiModule(config.apiModule),
+		/* [Claude] card apis carry their acl as `getPermissionsList`/`patchPermissions` (generatePermissionsApi); the table only lists it */
+		apiModule: {
+			getList: config.apiModule.getPermissionsList,
+		},
 		headers: config.headers || headers,
 	};
 
 	return createDatalistStore({
-		storeBody: () => permissionsStoreBody(namespace, normalizedConfig),
+		storeBody: () =>
+			permissionsStoreBody(namespace, normalizedConfig, config.apiModule),
 		namespace,
 		config: normalizedConfig,
 	});

package/src/modules/{permissions-page → permissions}/types/Permission.types.ts

@@ -1,4 +1,4 @@
-import type { AccessRuleName } from '@webitel/ui-sdk/modules/ObjectPermissions/enums';
+import type { AccessRuleName } from '@webitel/api-services/enums';
 import type { ApiModule, Id } from '@webitel/ui-sdk/src/api/types/ApiModule';
 
 export interface PermissionGrantee {
@@ -29,7 +29,7 @@ export interface PermissionsChange {
  * spread into every card API module (e.g. `...generatePermissionsApi(baseUrl)`).
  */
 export interface RawPermissionsApiModule {
-	getPermissionsList: ApiModule<PermissionEntity>['getList'];
+	getPermissionsList: NonNullable<ApiModule<PermissionEntity>['getList']>;
 	patchPermissions: (payload: {
 		id: Id;
 		changes: PermissionsChange[];

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

@@ -0,0 +1,10 @@
+import { CrudAction } from '@webitel/ui-sdk/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,
+};