@webitel/ui-datalist 26.12.5 → 26.12.7

package/Readme.md

@@ -24,6 +24,7 @@ This package contains:
 * card page tools (store, components, etc)
 * table filters (store, components, etc)
 * table filter presets (store, components, etc)
+* permissions tab (store, components, etc)
 
 ## Exports
 
@@ -85,6 +86,23 @@ import {
 } from '@webitel/ui-datalist/card';
 ```
 
+### Permissions tools
+
+Object ACL tab of an entity card. See docs: `pages/packages/ui-datalist/permissions`.
+
+#### Import
+
+```ts
+import {
+    createPermissionsStore, // pinia store factory, takes the entity api (getPermissionsList / patchPermissions)
+    PermissionsTab, // ready tab: register it in the router, pass store / access / parentId
+    headersWithCreate, // columns with "create" (x), for ACLs that have it
+    PermissionsRoleRow, // role with its role / user icon
+    PermissionsRoleSelect, // roles select
+    useAccessModeOptions, // access mode options + rows with localized rule names
+} from '@webitel/ui-datalist/permissions';
+```
+
 ## Versions
 
 // TODO: describe new major/minor versions, if will be needed

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.12.5",
+	"version": "26.12.7",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -b tsconfig.build.json",
@@ -96,9 +96,9 @@
 			"types": "./types/modules/card/index.d.ts",
 			"import": "./src/modules/card/index.ts"
 		},
-		"./permissions-page": {
-			"types": "./types/modules/permissions-page/index.d.ts",
-			"import": "./src/modules/permissions-page/index.ts"
+		"./permissions": {
+			"types": "./types/modules/permissions/index.d.ts",
+			"import": "./src/modules/permissions/index.ts"
 		}
 	}
 }

package/src/index.ts

@@ -1,6 +1,9 @@
 import { useNestedTableList } from './modules/table/composables/useNestedTableList';
 import { createTableStore } from './modules/table/createTableStore.store';
-import type { DatalistTableHeader } from './modules/types/tableStore.types';
+import type {
+	DatalistTableHeader,
+	PatchItemPropertyParams,
+} from './modules/types/tableStore.types';
 
-export type { DatalistTableHeader };
+export type { DatalistTableHeader, PatchItemPropertyParams };
 export { createTableStore, useNestedTableList };

package/src/modules/filters/modules/filterConfig/components/grantee/index.ts

@@ -1,4 +1,4 @@
-import RolesAPI from '@webitel/ui-sdk/api/clients/roles/roles';
+import { RolesAPI } from '@webitel/api-services/api';
 import { WtObject } from '@webitel/ui-sdk/enums';
 
 import {

package/src/modules/filters/modules/filterConfig/components/index.ts

@@ -135,6 +135,8 @@ import TeamFilter from './team/team-filter-value-field.vue';
 import TeamFilterPreview from './team/team-filter-value-preview.vue';
 import TotalDurationFilter from './total-duration/total-duration-filter-value-field.vue';
 import TotalDurationFilterPreview from './total-duration/total-duration-filter-value-preview.vue';
+import TriggerJobStateFilter from './trigger-job-state/trigger-job-state-filter-value-field.vue';
+import TriggerJobStateFilterPreview from './trigger-job-state/trigger-job-state-filter-value-preview.vue';
 import { createUserFilterConfig } from './user';
 import UserFilter from './user/user-filter-value-field.vue';
 import UserFilterPreview from './user/user-filter-value-preview.vue';
@@ -247,6 +249,8 @@ export {
 	TeamFilterPreview,
 	TotalDurationFilter,
 	TotalDurationFilterPreview,
+	TriggerJobStateFilter,
+	TriggerJobStateFilterPreview,
 	UserFilter,
 	UserFilterPreview,
 	UtilizationProgressFilter,
@@ -291,6 +295,7 @@ export const FilterOptionToValueComponentMap: Record<FilterOption, Component> =
 		[FilterOption.JoinedAt]: DateTimeOptionsFilterValueField,
 		[FilterOption.LeavingAt]: DateTimeOptionsFilterValueField,
 		[FilterOption.OfferingAt]: DateTimeOptionsFilterValueField,
+		[FilterOption.StartedAt]: DateTimeOptionsFilterValueField,
 		[FilterOption.Bucket]: BucketFilter,
 		[FilterOption.StopCause]: StopCauseFilter,
 		[FilterOption.MemberPriority]: RatingFromToFilter,
@@ -299,6 +304,7 @@ export const FilterOptionToValueComponentMap: Record<FilterOption, Component> =
 		[FilterOption.MemberName]: StringFilterValueField,
 		[FilterOption.MemberDestination]: StringFilterValueField,
 		[FilterOption.CallReportingResult]: CallReportingResultFilter,
+		[FilterOption.TriggerJobState]: TriggerJobStateFilter,
 		[FilterOption.Action]: ActionFilter,
 		[FilterOption.Object]: ObjectFilter,
 		[FilterOption.CaseStatus]: CaseStatusFilterValueField,
@@ -329,6 +335,7 @@ export const FilterOptionToPreviewComponentMap: Record<
 	[FilterOption.JoinedAt]: DateTimeOptionsFilterValuePreview,
 	[FilterOption.LeavingAt]: DateTimeOptionsFilterValuePreview,
 	[FilterOption.OfferingAt]: DateTimeOptionsFilterValuePreview,
+	[FilterOption.StartedAt]: DateTimeOptionsFilterValuePreview,
 	[FilterOption.Bucket]: BucketFilterPreview,
 	[FilterOption.StopCause]: StopCauseFilterPreview,
 	[FilterOption.MemberPriority]: RatingFromToFilterPreview,
@@ -337,6 +344,7 @@ export const FilterOptionToPreviewComponentMap: Record<
 	[FilterOption.MemberName]: StringFilterValuePreview,
 	[FilterOption.MemberDestination]: StringFilterValuePreview,
 	[FilterOption.CallReportingResult]: CallReportingResultFilterPreview,
+	[FilterOption.TriggerJobState]: TriggerJobStateFilterPreview,
 	[FilterOption.Action]: ActionFilterPreview,
 	[FilterOption.Object]: ObjectFilterPreview,
 	[FilterOption.Agent]: AgentFilterPreview,

package/src/modules/filters/modules/filterConfig/components/trigger-job-state/trigger-job-state-filter-value-field.vue

@@ -0,0 +1,87 @@
+<template>
+  <wt-multi-select
+    :label="labelValue"
+    :options="options"
+    v-model:model-value="model"
+    :v="!disableValidation && v$.model"
+    chips-view
+    data-key="value"
+    option-label="label"
+    option-value="value"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { EngineTriggerJobState } from '@webitel/api-services/gen/models';
+import { WtMultiSelect } from '@webitel/ui-sdk/components';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+
+const model = defineModel<string[]>();
+const { t } = useI18n();
+
+const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
+const v$ = useVuelidate(
+	computed(() => ({
+		model: {
+			required,
+		},
+	})),
+	{
+		model,
+	},
+	{
+		$autoDirty: true,
+	},
+);
+
+v$.value.$touch();
+
+const emit = defineEmits<{
+	'update:invalid': [
+		boolean,
+	];
+}>();
+
+const labelValue = computed(() =>
+	t(
+		`webitelUI.filters.${
+			props?.filterConfig?.showFilterName
+				? props?.filterConfig.name
+				: 'filterValue'
+		}`,
+	),
+);
+
+/** [Claude] the states a trigger run ends up in, for the trigger logs' result filter */
+const options = computed(() =>
+	Object.values(EngineTriggerJobState).map((value) => ({
+		value,
+		label: t(`objects.triggerJobState.${value}`),
+	})),
+);
+
+onMounted(() => {
+	if (!props?.disableValidation) v$.value.$touch();
+});
+
+watch(
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
+);
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/trigger-job-state/trigger-job-state-filter-value-preview.vue

@@ -0,0 +1,42 @@
+<template>
+  <ul>
+    <li
+      v-for="(label, index) of arrayValues"
+      :key="index"
+    >
+      {{ label }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { EngineTriggerJobState } from '@webitel/api-services/gen/models';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{
+	value?: string[];
+}>();
+
+const { t } = useI18n();
+
+const options = computed(() =>
+	Object.values(EngineTriggerJobState).map((value) => ({
+		value,
+		label: t(`objects.triggerJobState.${value}`),
+	})),
+);
+
+const arrayLabels = computed(() =>
+	options.value.reduce<Record<string, string>>((acc, { value, label }) => {
+		acc[value] = label;
+		return acc;
+	}, {}),
+);
+
+const arrayValues = computed(() =>
+	(props.value ?? []).map((v) => arrayLabels.value[v] || v),
+);
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/enums/FilterOption.ts

@@ -55,6 +55,7 @@ export const FilterOption = {
 	JoinedAt: 'joinedAt',
 	LeavingAt: 'leavingAt',
 	OfferingAt: 'offeringAt',
+	StartedAt: 'startedAt',
 	UploadedAt: 'uploadedAt',
 	StopCause: 'stopCause',
 	MemberPriority: 'memberPriority',
@@ -62,6 +63,7 @@ export const FilterOption = {
 	MemberName: 'name',
 	MemberDestination: 'destination',
 	CallReportingResult: 'result' /** queue attempt CallReportingStatus */,
+	TriggerJobState: 'triggerJobState',
 	Action: 'action',
 	Object: 'object',
 	Date: 'date',

package/src/modules/headers/__tests__/createTableHeadersStore.spec.ts

@@ -146,6 +146,86 @@ describe('tableHeadersStoreBody', () => {
 		});
 	});
 
+	it('marks a resized column as resized', () => {
+		const store = createStore();
+
+		store.columnResize({
+			columnName: 'name',
+			columnWidth: '100px',
+		});
+
+		expect(store.headers.value[0]).toMatchObject({
+			width: '100px',
+			resized: true,
+		});
+		expect(store.headers.value[1].resized).toBeUndefined();
+	});
+
+	describe('column widths persistence', () => {
+		const resizedWidthsKey = `${id}/resizedColumnWidths`;
+		const legacyWidthsKey = `${id}/columnWidths`;
+
+		it('saves resized widths only, not default ones from header definitions', async () => {
+			const store = createStore();
+			store.headers.value[1].width = '300px'; // default width
+			await runWithRouter(() => store.setupPersistence());
+
+			store.columnResize({
+				columnName: 'name',
+				columnWidth: '100px',
+			});
+			await flushWrites();
+
+			expect(JSON.parse(localStorage.getItem(resizedWidthsKey) ?? '')).toEqual({
+				name: '100px',
+			});
+		});
+
+		it('restores saved widths as resized', async () => {
+			localStorage.setItem(
+				resizedWidthsKey,
+				JSON.stringify({
+					name: '100px',
+				}),
+			);
+
+			const store = await setUpStore();
+
+			expect(store.headers.value[0]).toMatchObject({
+				width: '100px',
+				resized: true,
+			});
+			expect(store.headers.value[1].resized).toBeUndefined();
+		});
+
+		it('restores legacy widths as plain widths, overridden by resized ones', async () => {
+			localStorage.setItem(
+				legacyWidthsKey,
+				JSON.stringify({
+					name: '50px',
+					subject: '60px',
+				}),
+			);
+			localStorage.setItem(
+				resizedWidthsKey,
+				JSON.stringify({
+					name: '100px',
+				}),
+			);
+
+			const store = await setUpStore();
+
+			expect(store.headers.value[0]).toMatchObject({
+				width: '100px',
+				resized: true,
+			});
+			expect(store.headers.value[1]).toMatchObject({
+				width: '60px',
+				resized: false,
+			});
+		});
+	});
+
 	describe('persistence', () => {
 		it('restores shown fields from the route query', async () => {
 			await router.push({

package/src/modules/headers/createTableHeadersStore.ts

@@ -81,6 +81,16 @@ export const tableHeadersStoreBody = ({
 		}, {});
 	});
 
+	// [Claude] widths of columns resized by the user only, default widths from header definitions are not included
+	const resizedColumnWidths = computed(() => {
+		return headers.value.reduce<Record<string, string>>((acc, header) => {
+			if (header.resized && header.width) {
+				acc[header.field] = header.width;
+			}
+			return acc;
+		}, {});
+	});
+
 	const $reset = () => {
 		headers.value = allowedHeaders;
 	};
@@ -294,29 +304,58 @@ export const tableHeadersStoreBody = ({
 			}),
 		});
 
+		/*
+		 * [Claude] stored under a new name: legacy "columnWidths" mixes resized widths with default ones,
+		 * so it can't tell which columns were resized. It's still restored, but as plain (min) widths
+		 */
+		const legacyColumnWidthsName = 'columnWidths';
+
+		const restoreWidths = async (
+			restore: (name: string) => Promise<unknown>,
+			name: string,
+			{
+				resized,
+			}: {
+				resized: boolean;
+			},
+		) => {
+			const value = (await restore(name)) as string;
+			if (!value) return;
+
+			const parsedWidths = JSON.parse(value);
+			headers.value = headers.value.map((header) =>
+				parsedWidths[header.field]
+					? {
+							...header,
+							width: parsedWidths[header.field],
+							resized,
+						}
+					: header,
+			);
+		};
+
 		const columnWidthsStorage = usePersistedStorage({
-			name: 'columnWidths',
-			value: columnWidths,
+			name: 'resizedColumnWidths',
+			value: resizedColumnWidths,
 			storages: [
 				PersistedStorageType.LocalStorage,
 			],
 			storagePath: id,
 			onStore: (save, { name }) => {
-				const value = JSON.stringify(columnWidths.value);
+				const value = JSON.stringify(resizedColumnWidths.value);
 				return save({
 					name,
 					value,
 				});
 			},
 			onRestore: async (restore, name) => {
-				const value = (await restore(name)) as string;
-				if (value) {
-					const parsedWidths = JSON.parse(value);
-					headers.value = headers.value.map((header) => ({
-						...header,
-						width: parsedWidths[header.field] || header.width,
-					}));
-				}
+				// [Claude] sequentially, so resized widths override legacy ones
+				await restoreWidths(restore, legacyColumnWidthsName, {
+					resized: false,
+				});
+				await restoreWidths(restore, name, {
+					resized: true,
+				});
 			},
 		});
 
@@ -355,6 +394,7 @@ export const tableHeadersStoreBody = ({
 
 		if (column) {
 			column.width = columnWidth;
+			column.resized = true;
 		}
 	};
 

package/src/modules/permissions/components/_internal/permissions-role-row.vue

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

package/src/modules/permissions/components/_internal/permissions-role-select.vue

@@ -0,0 +1,35 @@
+<template>
+  <wt-single-select
+    class="permissions-role-select"
+    option-label="name"
+    v-bind="attrs"
+    v-model:model-value="model"
+  >
+    <template #value="{ value, getOptionLabel }">
+      <permissions-role-row :role="value">
+        {{ getOptionLabel(value) || value }}
+      </permissions-role-row>
+    </template>
+
+    <template #option="{ option, getOptionLabel }">
+      <permissions-role-row :role="option">
+        {{ getOptionLabel(option) || option }}
+      </permissions-role-row>
+    </template>
+  </wt-single-select>
+</template>
+
+<script setup lang="ts">
+import { useAttrs } from 'vue';
+
+import type { PermissionGrantee } from '../../types/Permission.types';
+import PermissionsRoleRow from './permissions-role-row.vue';
+
+const attrs = useAttrs();
+
+const model = defineModel<PermissionGrantee | null>({
+	required: true,
+});
+</script>
+
+<style lang="scss" scoped></style>

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>