@webitel/ui-datalist 26.12.4 → 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.4",
+	"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/flow-type/flow-type-filter-value-field.vue

@@ -0,0 +1,77 @@
+<template>
+  <wt-multi-select
+    :label="labelValue"
+    :options="options"
+    v-model:model-value="model"
+    :v="!disableValidation && v$.model"
+    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 { WtMultiSelect } from '@webitel/ui-sdk/components';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+import { useFlowTypeOptions } from '../../composables/useFlowTypeOptions';
+
+const model = defineModel<string[]>();
+const { t } = useI18n();
+
+const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
+const v$ = useVuelidate(
+	computed(() => ({
+		model: {
+			required,
+		},
+	})),
+	{
+		model,
+	},
+	{
+		$autoDirty: true,
+	},
+);
+
+const emit = defineEmits<{
+	'update:invalid': [
+		boolean,
+	];
+}>();
+
+const labelValue = computed(() =>
+	t(
+		`webitelUI.filters.${
+			props?.filterConfig?.showFilterName
+				? props?.filterConfig.name
+				: 'filterValue'
+		}`,
+	),
+);
+
+const { options } = useFlowTypeOptions();
+
+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/flow-type/flow-type-filter-value-preview.vue

@@ -0,0 +1,34 @@
+<template>
+  <ul>
+    <li
+      v-for="(label, index) of arrayValues"
+      :key="index"
+    >
+      {{ label }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useFlowTypeOptions } from '../../composables/useFlowTypeOptions';
+
+const props = defineProps<{
+	value: string[];
+}>();
+
+const { options } = useFlowTypeOptions();
+
+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/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

@@ -75,6 +75,8 @@ import ContactLabelFilterPreview from './contact-label/contact-label-filter-valu
 import { createContactOwnerFilterConfig } from './contact-owner';
 import ContactOwnerFilter from './contact-owner/contact-owner-filter-value-field.vue';
 import ContactOwnerFilterPreview from './contact-owner/contact-owner-filter-value-preview.vue';
+import FlowTypeFilter from './flow-type/flow-type-filter-value-field.vue';
+import FlowTypeFilterPreview from './flow-type/flow-type-filter-value-preview.vue';
 import { createGatewayFilterConfig } from './gateway';
 import GatewayFilter from './gateway/gateway-filter-value-field.vue';
 import GatewayFilterPreview from './gateway/gateway-filter-value-preview.vue';
@@ -133,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';
@@ -195,6 +199,8 @@ export {
 	ContactOwnerFilter,
 	ContactOwnerFilterPreview,
 	DateTimeOptionsFilterValueField,
+	FlowTypeFilter,
+	FlowTypeFilterPreview,
 	GatewayFilter,
 	GatewayFilterPreview,
 	GranteeFilter,
@@ -243,6 +249,8 @@ export {
 	TeamFilterPreview,
 	TotalDurationFilter,
 	TotalDurationFilterPreview,
+	TriggerJobStateFilter,
+	TriggerJobStateFilterPreview,
 	UserFilter,
 	UserFilterPreview,
 	UtilizationProgressFilter,
@@ -269,6 +277,7 @@ export const FilterOptionToValueComponentMap: Record<FilterOption, Component> =
 		[FilterOption.HangupCause]: HangupCauseFilterValueField,
 		[FilterOption.Queue]: QueueFilter,
 		[FilterOption.QueueType]: QueueTypeFilter,
+		[FilterOption.FlowType]: FlowTypeFilter,
 		[FilterOption.QueuePeriod]: QueuePeriodFilter,
 		[FilterOption.RatedBy]: RatedByFilter,
 		[FilterOption.HasFile]: HasFileFilter,
@@ -286,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,
@@ -294,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,
@@ -324,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,
@@ -332,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,
@@ -350,6 +363,7 @@ export const FilterOptionToPreviewComponentMap: Record<
 	[FilterOption.HangupCause]: HangupCauseFilterValuePreview,
 	[FilterOption.Queue]: QueueFilterPreview,
 	[FilterOption.QueueType]: QueueTypeFilterPreview,
+	[FilterOption.FlowType]: FlowTypeFilterPreview,
 	[FilterOption.QueuePeriod]: QueuePeriodFilterPreview,
 	[FilterOption.RatedBy]: RatedByFilterPreview,
 	[FilterOption.HasFile]: HasFileFilterPreview,

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

@@ -1,4 +1,4 @@
-import { QueuesAPI } from '@webitel/api-services/api';
+import { FlowsAPI, QueuesAPI } from '@webitel/api-services/api';
 import { WtObject } from '@webitel/ui-sdk/enums';
 
 import {
@@ -20,3 +20,19 @@ class QueueTagsFilterConfig extends WtSysTypeFilterConfig {
 
 export const createQueueTagsFilterConfig = (params?: FilterConfigBaseParams) =>
 	new QueueTagsFilterConfig(params);
+
+/**
+ * [Claude] Flow tags share the queue tags shape and the `tags` request param, so
+ * this config keeps the same name and components and swaps only the search.
+ * It isn't in the name → creator map (that slot is queue tags): create it directly.
+ */
+class FlowTagsFilterConfig extends WtSysTypeFilterConfig {
+	readonly name = FilterOption.QueueTags;
+	valueInputComponent = TagsFilterValueField;
+	valuePreviewComponent = TagsFilterValuePreview;
+
+	searchRecords = gateFilterSearch(WtObject.Flow, FlowsAPI.getFlowTags);
+}
+
+export const createFlowTagsFilterConfig = (params?: FilterConfigBaseParams) =>
+	new FlowTagsFilterConfig(params);

package/src/modules/filters/modules/filterConfig/components/tags/tags-filter-value-field.vue

@@ -21,7 +21,10 @@ import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
-import { useFilterReadAccess } from '../../composables/useFilterReadAccess';
+import {
+	type GatedFilterSearch,
+	useFilterReadAccess,
+} from '../../composables/useFilterReadAccess';
 
 /**
  * Queue tags are free-form strings, so the filter stores names rather than ids
@@ -47,7 +50,14 @@ const emit = defineEmits<{
 }>();
 const { t } = useI18n();
 
-const { hasReadAccess, gateSearch } = useFilterReadAccess(WtObject.Queue);
+// [Claude] the access object comes from the config's gated search, so flow tags reuse this field
+const accessObject =
+	(
+		props.filterConfig.searchRecords as Partial<
+			GatedFilterSearch<unknown[], unknown>
+		>
+	).accessObject ?? WtObject.Queue;
+const { hasReadAccess, gateSearch } = useFilterReadAccess(accessObject);
 const searchMethod = gateSearch(props.filterConfig.searchRecords);
 
 const labelValue = computed(() =>

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/composables/useFlowTypeOptions.ts

@@ -0,0 +1,21 @@
+import { EngineRoutingSchemaType } from '@webitel/api-services/gen/models';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+/** [Claude] every flow type but "default" — the flows API adds it to any type filter itself */
+export function useFlowTypeOptions() {
+	const { t } = useI18n();
+
+	const options = computed(() =>
+		Object.values(EngineRoutingSchemaType)
+			.filter((value) => value !== EngineRoutingSchemaType.Default)
+			.map((value) => ({
+				value,
+				label: t(`objects.flow.type.${value}`),
+			})),
+	);
+
+	return {
+		options,
+	};
+}

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

@@ -43,6 +43,7 @@ export const FilterOption = {
 	HasAttachment: 'hasAttachment',
 	HasUser: 'hasUser',
 	QueueType: 'queueType',
+	FlowType: 'flowType',
 	QueuePeriod: 'queuePeriod',
 	AgentStatus: 'agentStatus',
 	Skill: 'skill',
@@ -54,6 +55,7 @@ export const FilterOption = {
 	JoinedAt: 'joinedAt',
 	LeavingAt: 'leavingAt',
 	OfferingAt: 'offeringAt',
+	StartedAt: 'startedAt',
 	UploadedAt: 'uploadedAt',
 	StopCause: 'stopCause',
 	MemberPriority: 'memberPriority',
@@ -61,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/filters/modules/filterConfig/index.ts

@@ -4,5 +4,10 @@ export * from './types/FilterConfigDefinition';
 
 import { createFilterConfig } from './classes/createFilterConfig';
 import { createDateRangeFilterConfig } from './components/_shared/date-time-filter/filterConfig';
+import { createFlowTagsFilterConfig } from './components/tags';
 
-export { createDateRangeFilterConfig, createFilterConfig };
+export {
+	createDateRangeFilterConfig,
+	createFilterConfig,
+	createFlowTagsFilterConfig,
+};

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>