@webitel/ui-datalist 1.1.74 → 1.1.76

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);

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

@@ -0,0 +1,97 @@
+<template>
+  <wt-multi-select
+    :label="labelValue"
+    :search-method="props.filterConfig.searchRecords"
+    :model-value="selectedOptions"
+    :v="!disableValidation && v$.model"
+    chips-view
+    data-key="name"
+    option-label="name"
+    @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';
+
+/**
+ * Queue tags are free-form strings, so the filter stores names rather than ids
+ * and there is nothing to look up on restore — a name is its own label.
+ */
+interface TagOption {
+	name: string;
+}
+
+type ModelValue = string[];
+
+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 selectedOptions = computed<TagOption[]>(() =>
+	(model.value ?? []).map((name) => ({
+		name,
+	})),
+);
+
+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: Array<TagOption | string>) => {
+	model.value = value.map((tag) => (typeof tag === 'string' ? tag : tag.name));
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,19 @@
+<template>
+  <ul v-if="value?.length">
+    <li
+      v-for="(tag, index) of value"
+      :key="index"
+    >
+      {{ tag }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+	/** tag names — this filter stores strings, not lookup objects */
+	value?: string[];
+}>();
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/composables/useCallReportingResultOptions.ts

@@ -0,0 +1,21 @@
+import { CallReportingStatus } from '@webitel/api-services/enums';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export function useCallReportingResultOptions() {
+	const { t } = useI18n();
+
+	const mapResultToLabel = (value: string) =>
+		t(`objects.callReportingResult.${value}`);
+
+	const options = computed(() =>
+		Object.values(CallReportingStatus).map((value) => ({
+			value,
+			label: mapResultToLabel(value),
+		})),
+	);
+
+	return {
+		options,
+	};
+}

package/src/modules/filters/modules/filterConfig/composables/useStopCauseOptions.ts

@@ -0,0 +1,22 @@
+import { MemberStopCause } from '@webitel/api-services/enums';
+import { camelCase } from 'change-case';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export function useStopCauseOptions() {
+	const { t } = useI18n();
+
+	const mapStopCauseToLabel = (value: string) =>
+		t(`objects.stopCause.${camelCase(value)}`);
+
+	const options = computed(() =>
+		Object.values(MemberStopCause).map((value) => ({
+			value,
+			label: mapStopCauseToLabel(value),
+		})),
+	);
+
+	return {
+		options,
+	};
+}

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

@@ -12,9 +12,11 @@ export const FilterOption = {
 	HasFile: 'hasFile',
 	Score: 'score',
 	Tag: 'tag',
+	QueueTags: 'tags',
 	TalkDuration: 'talkDuration',
 	Team: 'team',
 	TotalDuration: 'totalDuration',
+	AttemptDuration: 'duration',
 	HasTranscription: 'hasTranscription',
 	User: 'user',
 	Variable: 'variable',
@@ -48,6 +50,16 @@ export const FilterOption = {
 	Auditor: 'auditor',
 	Region: 'region',
 	UtilizationProgress: 'utilizationProgress',
+	Bucket: 'bucket',
+	JoinedAt: 'joinedAt',
+	LeavingAt: 'leavingAt',
+	OfferingAt: 'offeringAt',
+	StopCause: 'stopCause',
+	MemberPriority: 'memberPriority',
+	MemberAttempts: 'attempts',
+	MemberName: 'name',
+	MemberDestination: 'destination',
+	CallReportingResult: 'result' /** queue attempt CallReportingStatus */,
 } as const;
 
 /**