@webitel/ui-datalist 26.12.4 → 26.12.5

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.12.4",
+	"version": "26.12.5",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -b tsconfig.build.json",

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/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';
@@ -195,6 +197,8 @@ export {
 	ContactOwnerFilter,
 	ContactOwnerFilterPreview,
 	DateTimeOptionsFilterValueField,
+	FlowTypeFilter,
+	FlowTypeFilterPreview,
 	GatewayFilter,
 	GatewayFilterPreview,
 	GranteeFilter,
@@ -269,6 +273,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,
@@ -350,6 +355,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/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',

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