@webitel/ui-datalist 26.8.25 → 26.8.27

package/package.json

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

package/src/modules/card/composables/__tests__/useCardValidation.spec.ts

@@ -1,9 +1,14 @@
 import { useRegleSchema } from '@regle/schemas';
 import { getQueueDefaults } from '@webitel/api-services/api';
 import { QueueType } from '@webitel/api-services/enums';
-import { queueSchema } from '@webitel/api-services/validations';
+import { getDefaultsFromZodSchema } from '@webitel/api-services/utils';
+import {
+	caseCloseFieldsChecks,
+	caseSchema,
+	queueSchema,
+} from '@webitel/api-services/validations';
 import { describe, expect, it } from 'vitest';
-import { effectScope, ref } from 'vue';
+import { effectScope, nextTick, ref } from 'vue';
 
 /**
  * A card whose required-ness comes from a root `superRefine` — the queue, whose
@@ -93,3 +98,39 @@ describe('card validation of a root-level required rule', () => {
 		expect(rootError).toBe(false);
 	});
 });
+
+describe('card validation of the close reason on a new final case', () => {
+	const caseCardSchema = caseSchema
+		.passthrough()
+		.check(...caseCloseFieldsChecks);
+
+	it('reports the missing close reason on the field', async () => {
+		const state = ref(getDefaultsFromZodSchema(caseCardSchema, {}) as never);
+		const scope = effectScope(true);
+		// biome-ignore lint/suspicious/noExplicitAny: regle's inferred state type
+		let r$: any;
+
+		scope.run(() => {
+			({ r$ } = useRegleSchema(state, caseCardSchema as never, {
+				autoDirty: true,
+				syncState: {
+					onValidate: true,
+				},
+			}));
+		});
+		await nextTick();
+
+		(state.value as Record<string, unknown>).statusCondition = {
+			id: '1',
+			final: true,
+		};
+		await nextTick();
+
+		const result = await r$.$validate();
+
+		expect(result.valid).toBe(false);
+		expect(r$.$fields.closeReason.$error).toBe(true);
+		expect(r$.$fields.closeReason.$errors).toHaveLength(1);
+		expect(r$.$fields.closeResult.$error).toBe(true);
+	});
+});

package/src/modules/filters/composables/useVariableColumnFilters.ts

@@ -1,24 +1,26 @@
 import type { DataField } from '@webitel/api-services/gen/models';
 import type { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
-import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
 import { isVariableHeader } from '@webitel/ui-sdk/modules/TableVariableColumnSelect';
 import { computed, type MaybeRefOrGetter, toValue } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import type { FilterInitParams, FilterName, IFilter } from '../classes/Filter';
 import type { IFiltersManager } from '../classes/FiltersManager';
+import {
+	isVariableKeyFilterValue,
+	VariableKeyFilterConfig,
+} from '../modules/filterConfig/components/variable/variableKeyFilterConfig';
 import { FilterOption } from '../modules/filterConfig/enums/FilterOption';
 import {
 	isVariableFilterName,
 	toVariableFilterFields,
 	VARIABLE_FIELD_PREFIX,
-	variableKeyFromFilterName,
 } from '../scripts/variableFilters';
 
 const parseVariableFilterValue = (raw: string) =>
 	raw.split('&').reduce<Record<string, string>>((vars, pair) => {
-		const [key, value] = pair.split('=');
-		if (key) vars[key] = value ?? '';
+		const [key, ...valueParts] = pair.split('=');
+		if (key) vars[key] = valueParts.join('=');
 		return vars;
 	}, {});
 
@@ -37,49 +39,39 @@ export const useVariableColumnFilters = ({
 }) => {
 	const { t } = useI18n();
 
-	const withVariableFilterLabel = (
-		params: FilterInitParams,
-	): FilterInitParams =>
-		isVariableFilterName(params.name)
-			? {
-					...params,
-					label: t('webitelUI.filters.variable'),
-				}
-			: params;
-
 	const variableFilterFields = computed<DataField[]>(() => {
 		const headers = toValue(shownHeaders) || [];
 		const columnHeaders = headers.filter(
 			(header) => isVariableHeader(header) && header.filtered,
 		);
-		const columnFields = toVariableFilterFields(columnHeaders);
 
-		const knownNames = new Set(columnFields.map((field) => field.id));
-		const appliedOnlyFields = toValue(filtersManager)
-			.getAllKeys()
-			.filter((name) => isVariableFilterName(name) && !knownNames.has(name))
-			.map((name) => ({
-				id: name,
-				name: variableKeyFromFilterName(name),
-				kind: WtTypeExtensionFieldKind.Text,
-			}));
-
-		return [
-			...columnFields,
-			...appliedOnlyFields,
-		];
+		return toVariableFilterFields(columnHeaders).filter(
+			(field) => !field.id || !toValue(filtersManager).hasFilter(field.id),
+		);
 	});
 
+	const variableFilterConfigs = computed(() =>
+		toValue(filtersManager)
+			.getAllKeys()
+			.filter(isVariableFilterName)
+			.map(
+				(name) =>
+					new VariableKeyFilterConfig({
+						name,
+						label: t('webitelUI.filters.variable'),
+					}),
+			),
+	);
+
 	const splitVariableFilter = (params: FilterInitParams) => {
 		const variables = parseVariableFilterValue(String(params.value ?? ''));
 
 		Object.entries(variables).forEach(([key, value]) => {
-			addFilter(
-				withVariableFilterLabel({
-					name: `${VARIABLE_FIELD_PREFIX}${key}`,
-					value,
-				}),
-			);
+			addFilter({
+				name: `${VARIABLE_FIELD_PREFIX}${key}`,
+				value,
+				label: params.label,
+			});
 		});
 
 		if (toValue(filtersManager).hasFilter(FilterOption.Variable)) {
@@ -95,7 +87,7 @@ export const useVariableColumnFilters = ({
 			return;
 		}
 
-		addFilter(withVariableFilterLabel(params));
+		addFilter(params);
 	};
 
 	const handleUpdateFilter = (params: FilterInitParams) => {
@@ -104,12 +96,52 @@ export const useVariableColumnFilters = ({
 			return;
 		}
 
-		updateFilter(withVariableFilterLabel(params));
+		updateFilter(params);
+	};
+
+	const updateVariableKeyFilter = ({
+		name,
+		value,
+		label,
+	}: FilterInitParams) => {
+		if (!isVariableKeyFilterValue(value)) {
+			updateFilter({
+				name,
+				value,
+				label,
+			});
+			return;
+		}
+
+		const newName = `${VARIABLE_FIELD_PREFIX}${value.key}`;
+
+		if (newName !== name) {
+			deleteFilter({
+				name,
+			});
+		}
+
+		addFilter({
+			name: newName,
+			value: value.value,
+			label,
+		});
+	};
+
+	const handlePanelUpdateFilter = (params: FilterInitParams) => {
+		if (isVariableFilterName(params.name)) {
+			updateVariableKeyFilter(params);
+			return;
+		}
+
+		handleUpdateFilter(params);
 	};
 
 	return {
 		variableFilterFields,
+		variableFilterConfigs,
 		handleAddFilter,
 		handleUpdateFilter,
+		handlePanelUpdateFilter,
 	};
 };

package/src/modules/filters/modules/filterConfig/components/variable/variable-filter-value-preview.vue

@@ -25,7 +25,11 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
-const variable = props.value.split('=');
+const [key, ...valueParts] = props.value.split('=');
+const variable = [
+	key,
+	valueParts.join('='),
+];
 </script>
 
 <style lang="scss" scoped>

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

@@ -0,0 +1,99 @@
+<template>
+  <div class="variable-key-filter-value-field">
+    <wt-input-text
+      :model-value="variable.key"
+      :label="t('vocabulary.keys')"
+      :v="!disableValidation && v$.variable.key"
+      @update:model-value="updateVariable({ key: $event })"
+    />
+    <wt-input-text
+      :model-value="variable.value"
+      :label="t('vocabulary.values')"
+      :v="!disableValidation && v$.variable.value"
+      @update:model-value="updateVariable({ value: $event })"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import {
+	type IVariableKeyFilterConfig,
+	isVariableKeyFilterValue,
+	type VariableKeyFilterValue,
+} from './variableKeyFilterConfig';
+
+const props = defineProps<{
+	filterConfig: IVariableKeyFilterConfig;
+	disableValidation?: boolean;
+}>();
+
+const emit = defineEmits<{
+	'update:invalid': [
+		boolean,
+	];
+}>();
+
+const model = defineModel<string | VariableKeyFilterValue>();
+
+const { t } = useI18n();
+
+const variable = computed<VariableKeyFilterValue>(() =>
+	isVariableKeyFilterValue(model.value)
+		? model.value
+		: {
+				key: props.filterConfig.variableKey,
+				value: model.value ?? '',
+			},
+);
+
+const updateVariable = (patch: Partial<VariableKeyFilterValue>) => {
+	model.value = {
+		...variable.value,
+		...patch,
+	};
+};
+
+const v$ = useVuelidate(
+	computed(() => ({
+		variable: {
+			key: {
+				required,
+			},
+			value: {
+				required,
+			},
+		},
+	})),
+	{
+		variable,
+	},
+	{
+		$autoDirty: true,
+	},
+);
+
+if (!props.disableValidation) v$.value.$touch();
+
+watch(
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
+);
+</script>
+
+<style lang="scss" scoped>
+.variable-key-filter-value-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+</style>

package/src/modules/filters/modules/filterConfig/components/variable/variable-key-filter-value-preview.vue

@@ -0,0 +1,24 @@
+<template>
+  <variable-filter-value-preview
+    :key="variableValue"
+    :value="variableValue"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import VariableFilterValuePreview from './variable-filter-value-preview.vue';
+import type { IVariableKeyFilterConfig } from './variableKeyFilterConfig';
+
+const props = defineProps<{
+	filterConfig: IVariableKeyFilterConfig;
+	value?: unknown;
+}>();
+
+const variableValue = computed(
+	() => `${props.filterConfig.variableKey}=${props.value ?? ''}`,
+);
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/variable/variableKeyFilterConfig.ts

@@ -0,0 +1,48 @@
+import { z } from 'zod/v4';
+
+import type { FilterName, FilterValue } from '../../../../classes/Filter';
+import { variableKeyFromFilterName } from '../../../../scripts/variableFilters';
+import type { BaseFilterConfig } from '../../classes/FilterConfig';
+import { FilterConfig } from '../../classes/FilterConfig';
+import VariableKeyFilterValueField from './variable-key-filter-value-field.vue';
+import VariableKeyFilterValuePreview from './variable-key-filter-value-preview.vue';
+
+export interface IVariableKeyFilterConfig extends BaseFilterConfig {
+	readonly variableKey: string;
+}
+
+const variableKeyValueSchema = z.object({
+	key: z.string(),
+	value: z.string(),
+});
+
+export type VariableKeyFilterValue = z.infer<typeof variableKeyValueSchema>;
+
+export const isVariableKeyFilterValue = (
+	value: FilterValue,
+): value is VariableKeyFilterValue =>
+	variableKeyValueSchema.safeParse(value).success;
+
+export class VariableKeyFilterConfig
+	extends FilterConfig
+	implements IVariableKeyFilterConfig
+{
+	readonly variableKey: string;
+
+	constructor({
+		name,
+		label,
+	}: {
+		name: FilterName;
+		label: string;
+	}) {
+		super({
+			name,
+			valueInputComponent: VariableKeyFilterValueField,
+			valuePreviewComponent: VariableKeyFilterValuePreview,
+		});
+
+		this.label = label;
+		this.variableKey = variableKeyFromFilterName(name);
+	}
+}