@webitel/ui-datalist 26.8.21 → 26.8.22

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.8.21",
+	"version": "26.8.22",
 	"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/action/action-filter-value-field.vue

@@ -0,0 +1,75 @@
+<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 { useActionOptions } from '../../composables/useActionOptions';
+
+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 labelKey = computed(() =>
+	props?.filterConfig?.showFilterName ? props.filterConfig.name : 'filterValue',
+);
+
+const labelValue = computed(() => t(`webitelUI.filters.${labelKey.value}`));
+
+const { options } = useActionOptions();
+
+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/action/action-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 { useActionOptions } from '../../composables/useActionOptions';
+
+const props = defineProps<{
+	value?: string[];
+}>();
+
+const { options } = useActionOptions();
+
+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

@@ -5,6 +5,8 @@ import DateTimeOptionsFilterValueField from './_shared/date-time-filter/date-tim
 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 ActionFilter from './action/action-filter-value-field.vue';
+import ActionFilterPreview from './action/action-filter-value-preview.vue';
 import { createAgentFilterConfig } from './agent';
 import AgentFilter from './agent/agent-filter-value-field.vue';
 import AgentFilterPreview from './agent/agent-filter-value-preview.vue';
@@ -91,6 +93,9 @@ import HasTranscriptionFilter from './has-transcription/has-transcription-filter
 import HasTranscriptionFilterPreview from './has-transcription/has-transcription-filter-value-preview.vue';
 import HasUserFilter from './has-user/has-user-filter-value-field.vue';
 import HasUserFilterPreview from './has-user/has-user-filter-value-preview.vue';
+import { createObjectFilterConfig } from './object';
+import ObjectFilter from './object/object-filter-value-field.vue';
+import ObjectFilterPreview from './object/object-filter-value-preview.vue';
 import { createQueueFilterConfig } from './queue';
 import QueueFilter from './queue/queue-filter-value-field.vue';
 import QueueFilterPreview from './queue/queue-filter-value-preview.vue';
@@ -137,6 +142,8 @@ import VariableFilter from './variable/variable-filter-value-field.vue';
 import VariableFilterPreview from './variable/variable-filter-value-preview.vue';
 
 export {
+	ActionFilter,
+	ActionFilterPreview,
 	AgentFilter,
 	AgentFilterPreview,
 	AgentStatusFilter,
@@ -204,6 +211,8 @@ export {
 	HasTranscriptionFilterPreview,
 	HasUserFilter,
 	HasUserFilterPreview,
+	ObjectFilter,
+	ObjectFilterPreview,
 	QueueFilter,
 	QueueFilterPreview,
 	QueuePeriodFilter,
@@ -285,6 +294,8 @@ export const FilterOptionToValueComponentMap: Record<FilterOption, Component> =
 		[FilterOption.MemberName]: StringFilterValueField,
 		[FilterOption.MemberDestination]: StringFilterValueField,
 		[FilterOption.CallReportingResult]: CallReportingResultFilter,
+		[FilterOption.Action]: ActionFilter,
+		[FilterOption.Object]: ObjectFilter,
 		[FilterOption.CaseStatus]: CaseStatusFilterValueField,
 		[FilterOption.CaseSource]: CaseSourceFilterValueField,
 		[FilterOption.CaseService]: CaseServiceFilterValueField,
@@ -321,6 +332,8 @@ export const FilterOptionToPreviewComponentMap: Record<
 	[FilterOption.MemberName]: StringFilterValuePreview,
 	[FilterOption.MemberDestination]: StringFilterValuePreview,
 	[FilterOption.CallReportingResult]: CallReportingResultFilterPreview,
+	[FilterOption.Action]: ActionFilterPreview,
+	[FilterOption.Object]: ObjectFilterPreview,
 	[FilterOption.Agent]: AgentFilterPreview,
 	[FilterOption.Region]: RegionFilterPreview,
 	[FilterOption.UtilizationProgress]: UtilizationProgressFilterPreview,
@@ -385,6 +398,7 @@ export const FilterOptionToFilterConfigCreatorMap = {
 	[FilterOption.CaseSlaCondition]: createCaseSlaConditionFilterConfig,
 	[FilterOption.CaseSource]: createCaseSourceFilterConfig,
 	[FilterOption.CaseStatus]: createCaseStatusFilterConfig,
+	[FilterOption.Object]: createObjectFilterConfig,
 	[FilterOption.Contact]: createContactFilterConfig,
 	[FilterOption.ContactGroup]: createContactGroupFilterConfig,
 	[FilterOption.ContactLabel]: createContactLabelFilterConfig,

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

@@ -0,0 +1,29 @@
+import { ChangelogsAPI } from '@webitel/api-services/api';
+import { WtObject } from '@webitel/ui-sdk/enums';
+
+import {
+	type FilterConfigBaseParams,
+	WtSysTypeFilterConfig,
+} from '../../classes/FilterConfig';
+import { gateFilterSearch } from '../../composables/useFilterReadAccess';
+import { FilterOption } from '../../enums/FilterOption';
+import ObjectFilterValueField from './object-filter-value-field.vue';
+import ObjectFilterValuePreview from './object-filter-value-preview.vue';
+
+class ObjectFilterConfig extends WtSysTypeFilterConfig {
+	readonly name = FilterOption.Object;
+	valueInputComponent = ObjectFilterValueField;
+	valuePreviewComponent = ObjectFilterValuePreview;
+
+	searchRecords = gateFilterSearch(
+		WtObject.ChangeLog,
+		(params: Record<string, unknown>) =>
+			ChangelogsAPI.getObjectsList({
+				...params,
+				includeExisting: true,
+			}),
+	);
+}
+
+export const createObjectFilterConfig = (params?: FilterConfigBaseParams) =>
+	new ObjectFilterConfig(params);

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

@@ -0,0 +1,82 @@
+<template>
+  <wt-multi-select
+    :label="labelValue"
+    :disabled="!hasReadAccess"
+    :search-method="searchMethod"
+    :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 { WtObject } from '@webitel/ui-sdk/enums';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+import { useFilterReadAccess } from '../../composables/useFilterReadAccess';
+
+type ModelValue = number[];
+
+const props = defineProps<{
+	filterConfig: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+	'update:invalid': [
+		boolean,
+	];
+}>();
+const { t } = useI18n();
+
+const { hasReadAccess, gateSearch } = useFilterReadAccess(WtObject.ChangeLog);
+const searchMethod = gateSearch(props.filterConfig.searchRecords);
+
+const labelKey = computed(() =>
+	props?.filterConfig?.showFilterName ? props.filterConfig.name : 'filterValue',
+);
+
+const labelValue = computed(() => t(`webitelUI.filters.${labelKey.value}`));
+
+const v$ = useVuelidate(
+	computed(() => ({
+		model: {
+			required,
+		},
+	})),
+	{
+		model,
+	},
+	{
+		$autoDirty: true,
+	},
+);
+
+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/object/object-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: unknown[];
+}>();
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,24 @@
+import { LoggerAction } from '@webitel/api-services/gen/models';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const ActionLocale = {
+	[LoggerAction.Create]: 'reusable.create',
+	[LoggerAction.Update]: 'reusable.edit',
+	[LoggerAction.Delete]: 'reusable.delete',
+} as const;
+
+export function useActionOptions() {
+	const { t } = useI18n();
+
+	const options = computed(() =>
+		Object.entries(ActionLocale).map(([value, locale]) => ({
+			value,
+			label: t(locale),
+		})),
+	);
+
+	return {
+		options,
+	};
+}

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

@@ -60,6 +60,9 @@ export const FilterOption = {
 	MemberName: 'name',
 	MemberDestination: 'destination',
 	CallReportingResult: 'result' /** queue attempt CallReportingStatus */,
+	Action: 'action',
+	Object: 'object',
+	Date: 'date',
 } as const;
 
 /**