@webitel/ui-datalist 1.1.73 → 1.1.75

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.73",
+	"version": "1.1.75",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -b tsconfig.build.json",
@@ -31,6 +31,9 @@
 		"Readme.md",
 		"CHANGELOG.md"
 	],
+	"dependencies": {
+		"change-case": "^5.4.4"
+	},
 	"peerDependencies": {
 		"@regle/schemas": "^1.x",
 		"@vuelidate/core": "^2.0.3",

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

@@ -0,0 +1,67 @@
+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 { describe, expect, it } from 'vitest';
+import { effectScope, ref } from 'vue';
+
+/**
+ * A card whose required-ness comes from a root `superRefine` — the queue, whose
+ * rules depend on `type` — has to surface those issues on the field the issue
+ * names. If it does not, `useCardSaveAction` aborts on `$validate()` while
+ * `r$.$error` stays false, so the button looks enabled and the click does
+ * nothing at all.
+ *
+ * The trap is a field seeded as `{}`: regle then files the issue under an index
+ * of a collection nobody reads. Seeding `undefined` keeps the `$fields` entry
+ * and the error.
+ *
+ * [WTEL-10140](https://webitel.atlassian.net/browse/WTEL-10140)
+ */
+describe('card validation of a root-level required rule', () => {
+	const validateDraft = async (draft: Record<string, unknown>) => {
+		const state = ref(draft);
+		const scope = effectScope(true);
+		// biome-ignore lint/suspicious/noExplicitAny: regle's inferred state type
+		let r$: any;
+
+		scope.run(() => {
+			({ r$ } = useRegleSchema(state, queueSchema as never));
+		});
+
+		const result = await r$.$validate();
+
+		return {
+			valid: result.valid,
+			rootError: r$.$error,
+			calendarErrors: r$.$fields?.calendar?.$errors,
+		};
+	};
+
+	it('reports the missing calendar of a preview dialer on the field', async () => {
+		const { valid, rootError, calendarErrors } = await validateDraft({
+			...getQueueDefaults(QueueType.PREVIEW_DIALER),
+			name: 'a preview dialer',
+		});
+
+		expect(valid).toBe(false);
+		// what keeps the save button from looking clickable
+		expect(rootError).toBe(true);
+		// what the calendar select renders
+		expect(calendarErrors).toHaveLength(1);
+	});
+
+	it('accepts the same draft once the calendar is filled', async () => {
+		const { valid, rootError } = await validateDraft({
+			...getQueueDefaults(QueueType.PREVIEW_DIALER),
+			name: 'a preview dialer',
+			calendar: {
+				id: '1',
+				name: '24/7',
+			},
+		});
+
+		expect(valid).toBe(true);
+		expect(rootError).toBe(false);
+	});
+});

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

@@ -2,6 +2,8 @@ import type { RegleShortcutDefinition } from '@regle/core';
 import type { RegleSchema } from '@regle/schemas';
 import { computed, type Ref } from 'vue';
 
+import type { CardValidationFields } from '../types/CardValidationFields.types';
+
 export const useCardValidation = <
 	// biome-ignore lint/suspicious/noExplicitAny: matches RegleSchema's own state constraint
 	TState extends Record<string, any>,
@@ -16,7 +18,11 @@ export const useCardValidation = <
 	});
 
 	const validationFields = computed(() => {
-		return validationSchema.value.r$.$fields;
+		// Regle types $fields as a union with an empty-object arm to also
+		// support discriminated-union state shapes; TState here is always a
+		// plain card entity, so that arm never applies — narrow it away once,
+		// here, instead of at every card component consuming this composable.
+		return validationSchema.value.r$.$fields as CardValidationFields<TState>;
 	});
 
 	const hasValidationErrors = computed(() => {

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

@@ -0,0 +1,57 @@
+<template>
+  <wt-input-text
+    v-model:model-value="model"
+    :label="t('webitelUI.filters.filterValue')"
+    :v="v$.model"
+  />
+</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';
+
+type ModelValue = string;
+
+const model = defineModel<ModelValue>();
+if (!model.value) {
+	model.value = '';
+}
+
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+	computed(() => ({
+		model: {
+			required,
+		},
+	})),
+	{
+		model,
+	},
+	{
+		$autoDirty: true,
+	},
+);
+
+v$.value.$touch();
+
+const emit = defineEmits<{
+	'update:invalid': [
+		boolean,
+	];
+}>();
+
+watch(
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
+);
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,11 @@
+<template>
+  <span>{{ value }}</span>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+	value?: string;
+}>();
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,81 @@
+<template>
+  <wt-multi-select
+    :label="labelValue"
+    :search-method="props.filterConfig.searchRecords"
+    :model-value="model"
+    :v="!disableValidation && v$.model"
+    option-value="id"
+    @update:model-value="handleInput"
+  />
+</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';
+
+type ModelValue = number[];
+
+const props = defineProps<{
+	filterConfig: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+	'update:invalid': [
+		boolean,
+	];
+}>();
+const { t } = useI18n();
+
+const labelValue = computed(() =>
+	t(
+		`webitelUI.filters.${
+			props?.filterConfig?.showFilterName
+				? props?.filterConfig.name
+				: 'filterValue'
+		}`,
+	),
+);
+
+const v$ = useVuelidate(
+	computed(() => ({
+		model: {
+			required,
+		},
+	})),
+	{
+		model,
+	},
+	{
+		$autoDirty: true,
+	},
+);
+v$.value.$touch();
+
+onMounted(() => {
+	if (!props?.disableValidation) v$.value.$touch();
+});
+
+watch(
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
+);
+
+const handleInput = (value: ModelValue) => {
+	model.value = value;
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,13 @@
+<template>
+  <lookup-filter-value-preview v-bind="props" />
+</template>
+
+<script lang="ts" setup>
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
+
+const props = defineProps<{
+	value: Record<string, unknown>[];
+}>();
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,25 @@
+import { BucketsAPI } from '@webitel/api-services/api';
+
+import {
+	type FilterConfigBaseParams,
+	WtSysTypeFilterConfig,
+} from '../../classes/FilterConfig';
+import { FilterOption } from '../../enums/FilterOption';
+import BucketFilterValueField from './bucket-filter-value-field.vue';
+import BucketFilterValuePreview from './bucket-filter-value-preview.vue';
+
+class BucketFilterConfig extends WtSysTypeFilterConfig {
+	readonly name = FilterOption.Bucket;
+	valueInputComponent = BucketFilterValueField;
+	valuePreviewComponent = BucketFilterValuePreview;
+
+	searchRecords(params: object): Promise<{
+		items: unknown[];
+		next?: boolean;
+	}> {
+		return BucketsAPI.getLookup(params);
+	}
+}
+
+export const createBucketFilterConfig = (params?: FilterConfigBaseParams) =>
+	new BucketFilterConfig(params);

package/src/modules/filters/modules/filterConfig/components/call-reporting-result/call-reporting-result-filter-value-field.vue

@@ -0,0 +1,81 @@
+<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 { WtMultiSelect } from '@webitel/ui-sdk/components';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+import { useCallReportingResultOptions } from '../../composables/useCallReportingResultOptions';
+
+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'
+		}`,
+	),
+);
+
+const { options } = useCallReportingResultOptions();
+
+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/call-reporting-result/call-reporting-result-filter-value-preview.vue

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

@@ -4,6 +4,8 @@ import type { FilterConfigSearchMethodParams } from '../classes/FilterConfig';
 import { FilterOption } from '../enums/FilterOption';
 import DateTimeOptionsFilterValueField from './_shared/date-time-filter/date-time-options/date-time-options-filter-value-field.vue';
 import DateTimeOptionsFilterValuePreview from './_shared/date-time-filter/date-time-options/date-time-options-filter-value-preview.vue';
+import StringFilterValueField from './_shared/string-filter/string-filter-value-field.vue';
+import StringFilterValuePreview from './_shared/string-filter/string-filter-value-preview.vue';
 import AgentFilter from './agent/agent-filter-value-field.vue';
 import AgentFilterPreview from './agent/agent-filter-value-preview.vue';
 import { searchMethod as agentSearchMethod } from './agent/config';
@@ -14,8 +16,13 @@ import AmdResultFilterPreview from './amd-result/amd-result-filter-value-preview
 import { createAuditorFilterConfig } from './auditor';
 import AuditorFilter from './auditor/auditor-filter-value-field.vue';
 import AuditorFilterPreview from './auditor/auditor-filter-value-preview.vue';
+import { createBucketFilterConfig } from './bucket';
+import BucketFilter from './bucket/bucket-filter-value-field.vue';
+import BucketFilterPreview from './bucket/bucket-filter-value-preview.vue';
 import CallDirectionFilterValueField from './call-direction/call-direction-filter-value-field.vue';
 import CallDirectionFilterValuePreview from './call-direction/call-direction-filter-value-preview.vue';
+import CallReportingResultFilter from './call-reporting-result/call-reporting-result-filter-value-field.vue';
+import CallReportingResultFilterPreview from './call-reporting-result/call-reporting-result-filter-value-preview.vue';
 import CaseActualReactionTimeFilterValueField from './case-actual-reaction-time/case-actual-reaction-time-filter-value-field.vue';
 import CaseActualReactionTimeFilterValuePreview from './case-actual-reaction-time/case-actual-reaction-time-filter-value-preview.vue';
 import CaseActualResolutionTimeFilterValueField from './case-actual-resolution-time/case-actual-resolution-time-filter-value-field.vue';
@@ -105,11 +112,16 @@ import ScoreFilterPreview from './score/score-from-to-filter-value-preview.vue';
 import { createSkillFilterConfig } from './skill';
 import SkillFilter from './skill/skill-filter-value-field.vue';
 import SkillFilterPreview from './skill/skill-filter-value-preview.vue';
+import StopCauseFilter from './stop-cause/stop-cause-filter-value-field.vue';
+import StopCauseFilterPreview from './stop-cause/stop-cause-filter-value-preview.vue';
 import { createSupervisorFilterConfig } from './supervisor';
 import SupervisorFilter from './supervisor/supervisor-filter-value-field.vue';
 import SupervisorFilterPreview from './supervisor/supervisor-filter-value-preview.vue';
 import TagFilter from './tag/tag-filter-value-field.vue';
 import TagFilterPreview from './tag/tag-filter-value-preview.vue';
+import { createQueueTagsFilterConfig } from './tags';
+import TagsFilter from './tags/tags-filter-value-field.vue';
+import TagsFilterPreview from './tags/tags-filter-value-preview.vue';
 import TalkDurationFilter from './talk-duration/talk-duration-filter-value-field.vue';
 import TalkDurationFilterPreview from './talk-duration/talk-duration-filter-value-preview.vue';
 import { createTeamFilterConfig } from './team';
@@ -134,8 +146,12 @@ export {
 	AmdResultFilterPreview,
 	AuditorFilter,
 	AuditorFilterPreview,
+	BucketFilter,
+	BucketFilterPreview,
 	CallDirectionFilterValueField,
 	CallDirectionFilterValuePreview,
+	CallReportingResultFilter,
+	CallReportingResultFilterPreview,
 	CaseActualReactionTimeFilterValueField,
 	CaseActualReactionTimeFilterValuePreview,
 	CaseActualResolutionTimeFilterValueField,
@@ -205,10 +221,14 @@ export {
 	ScoreFilterPreview,
 	SkillFilter,
 	SkillFilterPreview,
+	StopCauseFilter,
+	StopCauseFilterPreview,
 	SupervisorFilter,
 	SupervisorFilterPreview,
 	TagFilter,
 	TagFilterPreview,
+	TagsFilter,
+	TagsFilterPreview,
 	TalkDurationFilter,
 	TalkDurationFilterPreview,
 	TeamFilter,
@@ -246,6 +266,7 @@ export const FilterOptionToValueComponentMap: Record<FilterOption, Component> =
 		[FilterOption.HasFile]: HasFileFilter,
 		[FilterOption.Score]: ScoreFilter,
 		[FilterOption.Tag]: TagFilter,
+		[FilterOption.QueueTags]: TagsFilter,
 		[FilterOption.TalkDuration]: TalkDurationFilter,
 		[FilterOption.Team]: TeamFilter,
 		[FilterOption.TotalDuration]: TotalDurationFilter,
@@ -254,6 +275,17 @@ export const FilterOptionToValueComponentMap: Record<FilterOption, Component> =
 		[FilterOption.User]: UserFilter,
 		[FilterOption.Variable]: VariableFilter,
 		[FilterOption.CreatedAt]: DateTimeOptionsFilterValueField,
+		[FilterOption.JoinedAt]: DateTimeOptionsFilterValueField,
+		[FilterOption.LeavingAt]: DateTimeOptionsFilterValueField,
+		[FilterOption.OfferingAt]: DateTimeOptionsFilterValueField,
+		[FilterOption.Bucket]: BucketFilter,
+		[FilterOption.StopCause]: StopCauseFilter,
+		[FilterOption.MemberPriority]: RatingFromToFilter,
+		[FilterOption.MemberAttempts]: RatingFromToFilter,
+		[FilterOption.AttemptDuration]: RatingFromToFilter,
+		[FilterOption.MemberName]: StringFilterValueField,
+		[FilterOption.MemberDestination]: StringFilterValueField,
+		[FilterOption.CallReportingResult]: CallReportingResultFilter,
 		[FilterOption.CaseStatus]: CaseStatusFilterValueField,
 		[FilterOption.CaseSource]: CaseSourceFilterValueField,
 		[FilterOption.CaseService]: CaseServiceFilterValueField,
@@ -279,6 +311,17 @@ export const FilterOptionToPreviewComponentMap: Record<
 	Component
 > = {
 	[FilterOption.CreatedAt]: DateTimeOptionsFilterValuePreview,
+	[FilterOption.JoinedAt]: DateTimeOptionsFilterValuePreview,
+	[FilterOption.LeavingAt]: DateTimeOptionsFilterValuePreview,
+	[FilterOption.OfferingAt]: DateTimeOptionsFilterValuePreview,
+	[FilterOption.Bucket]: BucketFilterPreview,
+	[FilterOption.StopCause]: StopCauseFilterPreview,
+	[FilterOption.MemberPriority]: RatingFromToFilterPreview,
+	[FilterOption.MemberAttempts]: RatingFromToFilterPreview,
+	[FilterOption.AttemptDuration]: RatingFromToFilterPreview,
+	[FilterOption.MemberName]: StringFilterValuePreview,
+	[FilterOption.MemberDestination]: StringFilterValuePreview,
+	[FilterOption.CallReportingResult]: CallReportingResultFilterPreview,
 	[FilterOption.Agent]: AgentFilterPreview,
 	[FilterOption.Region]: RegionFilterPreview,
 	[FilterOption.UtilizationProgress]: UtilizationProgressFilterPreview,
@@ -300,6 +343,7 @@ export const FilterOptionToPreviewComponentMap: Record<
 	[FilterOption.HasFile]: HasFileFilterPreview,
 	[FilterOption.Score]: ScoreFilterPreview,
 	[FilterOption.Tag]: TagFilterPreview,
+	[FilterOption.QueueTags]: TagsFilterPreview,
 	[FilterOption.TalkDuration]: TalkDurationFilterPreview,
 	[FilterOption.Team]: TeamFilterPreview,
 	[FilterOption.TotalDuration]: TotalDurationFilterPreview,
@@ -379,4 +423,6 @@ export const FilterOptionToFilterConfigCreatorMap = {
 	[FilterOption.Supervisor]: createSupervisorFilterConfig,
 	[FilterOption.Auditor]: createAuditorFilterConfig,
 	[FilterOption.Region]: createRegionFilterConfig,
+	[FilterOption.Bucket]: createBucketFilterConfig,
+	[FilterOption.QueueTags]: createQueueTagsFilterConfig,
 };

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

@@ -0,0 +1,81 @@
+<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 { WtMultiSelect } from '@webitel/ui-sdk/components';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+import { useStopCauseOptions } from '../../composables/useStopCauseOptions';
+
+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'
+		}`,
+	),
+);
+
+const { options } = useStopCauseOptions();
+
+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/stop-cause/stop-cause-filter-value-preview.vue

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

@@ -0,0 +1,25 @@
+import { QueuesAPI } from '@webitel/api-services/api';
+
+import {
+	type FilterConfigBaseParams,
+	WtSysTypeFilterConfig,
+} from '../../classes/FilterConfig';
+import { FilterOption } from '../../enums/FilterOption';
+import TagsFilterValueField from './tags-filter-value-field.vue';
+import TagsFilterValuePreview from './tags-filter-value-preview.vue';
+
+class QueueTagsFilterConfig extends WtSysTypeFilterConfig {
+	readonly name = FilterOption.QueueTags;
+	valueInputComponent = TagsFilterValueField;
+	valuePreviewComponent = TagsFilterValuePreview;
+
+	searchRecords(params: object): Promise<{
+		items: unknown[];
+		next?: boolean;
+	}> {
+		return QueuesAPI.getQueuesTags(params);
+	}
+}
+
+export const createQueueTagsFilterConfig = (params?: FilterConfigBaseParams) =>
+	new QueueTagsFilterConfig(params);