@webitel/ui-datalist 26.12.5 → 26.12.6

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.6",
 	"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/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>

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,
+	};
+};