@webitel/ui-datalist 1.1.46 → 1.1.48

package/src/modules/filters/modules/filterConfig/components/_custom/type-extension-filter-value-preview.vue

@@ -7,14 +7,14 @@
       props.filterConfig.field.kind === WtTypeExtensionFieldKind.Boolean
     "
   >
-    <has-option-filter-value-preview :value="props.value" />
+    <has-option-filter-value-preview :value="!!props.value" />
   </template>
   <template
     v-else-if="
       props.filterConfig.field.kind === WtTypeExtensionFieldKind.Calendar
     "
   >
-    <date-time-options-filter-value-preview :value="props.value" />
+    <date-time-options-filter-value-preview :value="dateTimeValue" />
   </template>
   <template v-else>
     {{ props.value }}
@@ -22,7 +22,10 @@
 </template>
 
 <script setup lang="ts">
-import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
+import {
+	type RelativeDatetimeValue,
+	WtTypeExtensionFieldKind,
+} from '@webitel/ui-sdk/enums';
 import { computed } from 'vue';
 
 import { DynamicFilterPreviewComponentProps } from '../../types/DynamicFilterPreviewComponent';
@@ -37,11 +40,24 @@ const props = defineProps<
 	}
 >();
 
+/* the filter value is dynamically shaped by field kind;
+   the Calendar branch always stores a datetime value */
+const dateTimeValue = computed(
+	() =>
+		props.value as
+			| RelativeDatetimeValue
+			| {
+					from: number;
+					to: number;
+			  },
+);
+
 const showLookupValuePreview = computed(() => {
-	return [
+	const lookupKinds: string[] = [
 		WtTypeExtensionFieldKind.Multiselect,
 		WtTypeExtensionFieldKind.Select,
-	].includes(props.filterConfig.field.kind);
+	];
+	return lookupKinds.includes(props.filterConfig.field.kind);
 });
 </script>
 

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

@@ -5,6 +5,8 @@
       :model-value="model?.from"
       class="date-time-filter-value-field__picker"
       show-time
+      required
+      :v="v$.from"
       @update:model-value="handleInput('from', $event)"
     />
 
@@ -13,14 +15,18 @@
       :model-value="model?.to"
       class="date-time-filter-value-field__picker"
       show-time
+      required
+      :v="v$.to"
       @update:model-value="handleInput('to', $event)"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import { endOfToday, startOfToday } from 'date-fns';
-import { onMounted } from 'vue';
+import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 type ModelValue = {
@@ -28,9 +34,48 @@ type ModelValue = {
 	to: number;
 };
 
+const emit = defineEmits<{
+	'update:invalid': [
+		boolean,
+	];
+}>();
+
 const model = defineModel<ModelValue>();
 const { t } = useI18n();
 
+const from = computed(() => model.value?.from);
+const to = computed(() => model.value?.to);
+
+const v$ = useVuelidate(
+	computed(() => ({
+		from: {
+			required,
+		},
+		to: {
+			required,
+		},
+	})),
+	{
+		from,
+		to,
+	},
+	{
+		$autoDirty: true,
+	},
+);
+
+v$.value.$touch();
+
+watch(
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
+);
+
 const handleInput = (key: keyof ModelValue, value: number) => {
 	model.value = {
 		...model.value,

package/src/modules/filters/modules/filterConfig/components/_shared/date-time-filter/date-time-options/date-time-options-filter-value-field.vue

@@ -10,26 +10,33 @@
     />
     <wt-datepicker
       v-if="showDatepickers"
-      :model-value="model.from"
+      :model-value="absoluteModel?.from"
       :label="t('reusable.from')"
       show-time
+      required
+			:v="v$.from"
       @update:model-value="changeAbsoluteValue($event, 'from')"
     />
     <wt-datepicker
       v-if="showDatepickers"
-      :model-value="model.to"
+      :model-value="absoluteModel?.to"
       :label="t('reusable.to')"
       show-time
+      required
+			:v="v$.to"
       @update:model-value="changeAbsoluteValue($event, 'to')"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
 import { WtRadio } from '@webitel/ui-sdk/components';
 import { RelativeDatetimeValue } from '@webitel/ui-sdk/enums';
+import { isEmpty } from '@webitel/ui-sdk/scripts';
 import { endOfToday, startOfToday } from 'date-fns';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const model = defineModel<
@@ -40,6 +47,12 @@ const model = defineModel<
 	  }
 >();
 
+const emit = defineEmits<{
+	'update:invalid': [
+		boolean,
+	];
+}>();
+
 const { t } = useI18n();
 
 const radioOpts = [
@@ -67,10 +80,53 @@ const initialize = () => {
 
 initialize();
 
+const absoluteModel = computed(() => {
+	return !isEmpty(model.value) && typeof model.value === 'object'
+		? model.value
+		: undefined;
+});
+
 const showDatepickers = computed(() => {
 	return selectedRadioValue.value === RelativeDatetimeValue.Custom;
 });
 
+const from = computed(() => absoluteModel.value?.from);
+const to = computed(() => absoluteModel.value?.to);
+
+const v$ = useVuelidate(
+	computed(() => ({
+		from: showDatepickers.value
+			? {
+					required,
+				}
+			: {},
+		to: showDatepickers.value
+			? {
+					required,
+				}
+			: {},
+	})),
+	{
+		from,
+		to,
+	},
+	{
+		$autoDirty: true,
+	},
+);
+
+v$.value.$touch();
+
+watch(
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
+);
+
 const handleRadioChange = (value: RelativeDatetimeValue) => {
 	selectedRadioValue.value = value;
 	if (value === RelativeDatetimeValue.Custom) {

package/src/modules/filters/modules/filterConfig/components/_shared/date-time-filter/date-time-options/date-time-options-filter-value-preview.vue

@@ -26,7 +26,7 @@
 
 <script lang="ts" setup>
 import { FormatDateMode, RelativeDatetimeValue } from '@webitel/ui-sdk/enums';
-import { isRelativeDatetimeValue } from '@webitel/ui-sdk/scripts';
+import { isEmpty, isRelativeDatetimeValue } from '@webitel/ui-sdk/scripts';
 import { formatDate } from '@webitel/ui-sdk/utils';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -46,16 +46,22 @@ const isRelativeValue = computed(() => {
 	return isRelativeDatetimeValue(props.value);
 });
 
+const absoluteValue = computed(() => {
+	return !isEmpty(props.value) && typeof props.value === 'object'
+		? props.value
+		: null;
+});
+
 const from = computed(() => {
-	return isRelativeDatetimeValue.value
-		? false
-		: formatDate(props.value.from, FormatDateMode.DATETIME);
+	return absoluteValue.value
+		? formatDate(absoluteValue.value.from, FormatDateMode.DATETIME)
+		: false;
 });
 
 const to = computed(() => {
-	return isRelativeDatetimeValue.value
-		? false
-		: formatDate(props.value.to, FormatDateMode.DATETIME);
+	return absoluteValue.value
+		? formatDate(absoluteValue.value.to, FormatDateMode.DATETIME)
+		: false;
 });
 </script>
 

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

@@ -4,7 +4,7 @@
       v-if="model"
       :label="t('reusable.from')"
       :model-value="model.from"
-      :v="v$.model?.from"
+      :v="vFrom"
       format="mm:ss"
       @update:model-value="handleInput('from', $event)"
     />
@@ -12,7 +12,7 @@
       v-if="model"
       :label="t('reusable.to')"
       :model-value="model.to"
-      :v="v$.model?.to"
+      :v="vTo"
       format="mm:ss"
       @update:model-value="handleInput('to', $event)"
     />
@@ -50,7 +50,9 @@ const isValueEmpty = () => {
 	return !!model?.value?.to || !!model?.value?.from;
 };
 
-const v$ = useVuelidate(
+const v$ = useVuelidate<{
+	model: ModelValue;
+}>(
 	computed(() => ({
 		model: {
 			from: {
@@ -70,6 +72,17 @@ const v$ = useVuelidate(
 );
 v$.value.$touch();
 
+const vFrom = computed(() => {
+	const modelValidation = v$.value.model;
+	if (!modelValidation) return undefined;
+	return modelValidation.from;
+});
+const vTo = computed(() => {
+	const modelValidation = v$.value.model;
+	if (!modelValidation) return undefined;
+	return modelValidation.to;
+});
+
 const handleInput = (key: keyof ModelValue, value: number) => {
 	const newValue = {
 		...model.value,

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

@@ -1,7 +1,7 @@
 <template>
   <ul v-if="value">
     <li
-      v-for="({ name, id }, index) of value"
+      v-for="({ name, id }, index) of items"
       :key="id || index"
     >
       {{ name }}
@@ -10,12 +10,20 @@
 </template>
 
 <script lang="ts" setup>
-defineProps<{
-	/**
-	 * would be great to use a type for this
-	 * */
-	value: Record<string, unknown>[];
+import { computed } from 'vue';
+
+const props = defineProps<{
+	value: unknown;
 }>();
+
+const items = computed<
+	Array<{
+		id?: PropertyKey;
+		name?: unknown;
+	}>
+>(() => {
+	return Array.isArray(props.value) ? props.value : [];
+});
 </script>
 
 <style scoped></style>

package/src/modules/filters/modules/filterConfig/components/case-actual-reaction-time/case-actual-reaction-time-filter-value-preview.vue

@@ -23,7 +23,10 @@ import { format } from 'date-fns';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
-	value: number[];
+	value: {
+		from: number | null;
+		to: number | null;
+	};
 }>();
 
 const { t } = useI18n();

package/src/modules/filters/modules/filterConfig/components/case-actual-resolution-time/case-actual-resolution-time-filter-value-preview.vue

@@ -23,7 +23,10 @@ import { format } from 'date-fns';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
-	value: number[];
+	value: {
+		from: number | null;
+		to: number | null;
+	};
 }>();
 
 const { t } = useI18n();

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

@@ -2,7 +2,7 @@
   <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :search-method="props.filterConfig.searchRecords"
-    :v="v$.model.list"
+    :v="vList"
     v-model:model-value="model.list"
     data-key="id"
     option-value="id"
@@ -10,7 +10,7 @@
   <wt-checkbox
     :label="t('reusable.showUnassigned')"
     :selected="model?.unassigned"
-    :v="v$.model.unassigned"
+    :v="vUnassigned"
     @update:selected="model.unassigned = $event"
   />
 </template>
@@ -53,7 +53,9 @@ const initModel = () => {
 };
 onMounted(() => initModel());
 
-const v$ = useVuelidate(
+const v$ = useVuelidate<{
+	model: ModelValue;
+}>(
 	computed(() => ({
 		model: {
 			list: {
@@ -73,6 +75,17 @@ const v$ = useVuelidate(
 );
 v$.value.$touch();
 
+const vList = computed(() => {
+	const modelValidation = v$.value.model;
+	if (!modelValidation) return undefined;
+	return modelValidation.list;
+});
+const vUnassigned = computed(() => {
+	const modelValidation = v$.value.model;
+	if (!modelValidation) return undefined;
+	return modelValidation.unassigned;
+});
+
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {

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

@@ -5,20 +5,24 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { WebitelContactsContact } from 'webitel-sdk';
 
 import { IFilter } from '../../../../classes/Filter';
 import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-	value: WebitelContactsContact[];
+	value: Array<{
+		id?: string | number;
+		name?: string;
+	}>;
 	filter: IFilter;
 }>();
 
 const { t } = useI18n();
 
 const rawValue = computed(() => {
-	return props.filter.value;
+	return props.filter.value as {
+		unassigned?: boolean;
+	};
 });
 
 const shownValue = computed(() => {

package/src/modules/filters/modules/filterConfig/components/case-assignee/filterConfig.ts

@@ -1,6 +1,10 @@
 import { contacts as ContactsAPI } from '@webitel/ui-sdk/api/clients/index';
 
-import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+import {
+	type FilterConfigSearchFilterContext,
+	type FilterConfigSearchRequestParams,
+	WtSysTypeFilterConfig,
+} from '../../classes/FilterConfig';
 import { FilterOption } from '../../enums/FilterOption';
 import CaseAssigneeFilterValueField from './case-assignee-filter-value-field.vue';
 import CaseAssigneeFilterValuePreview from './case-assignee-filter-value-preview.vue';
@@ -11,16 +15,16 @@ class CaseAssigneeFilterConfig extends WtSysTypeFilterConfig {
 	valuePreviewComponent = CaseAssigneeFilterValuePreview;
 
 	searchRecords(
-		params: object,
-		{ filterValue } = {},
+		params: FilterConfigSearchRequestParams,
+		{ filterValue }: FilterConfigSearchFilterContext = {},
 	): Promise<{
 		items: unknown[];
 		next?: boolean;
 	}> {
 		if (filterValue?.unassigned && !filterValue.list.length)
-			return {
+			return Promise.resolve({
 				items: [],
-			};
+			});
 		const id =
 			params.id?.list /* general logic from dynamic-filter-preview.vue*/ ||
 			params.id /* wt-select options loadings */ ||

package/src/modules/filters/modules/filterConfig/components/case-close-reason-groups/case-close-reason-groups-filter-value-field.vue

@@ -4,7 +4,7 @@
       :show-clear="false"
       :label="t('cases.reason')"
       :search-method="caseCloseReasonsGroupsSearchMethod"
-      :v="v$.model.selection"
+      :v="vSelection"
       :model-value="model?.selection"
       data-key="id"
       option-value="id"
@@ -18,7 +18,7 @@
       :disabled="!model.selection"
       :label="t('webitelUI.filters.filterValue')"
       :search-method="getConditionList"
-      :v="v$.model.conditions"
+      :v="vConditions"
       v-model:model-value="model.conditions"
       data-key="id"
       option-value="id"
@@ -67,7 +67,9 @@ const initModel = () => {
 };
 onMounted(() => initModel());
 
-const v$ = useVuelidate(
+const v$ = useVuelidate<{
+	model: ModelValue;
+}>(
 	computed(() => ({
 		model: {
 			selection: {
@@ -88,6 +90,17 @@ const v$ = useVuelidate(
 
 v$.value.$touch();
 
+const vSelection = computed(() => {
+	const modelValidation = v$.value.model;
+	if (!modelValidation) return undefined;
+	return modelValidation.selection;
+});
+const vConditions = computed(() => {
+	const modelValidation = v$.value.model;
+	if (!modelValidation) return undefined;
+	return modelValidation.conditions;
+});
+
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,

package/src/modules/filters/modules/filterConfig/components/case-close-reason-groups/case-close-reason-groups-filter-value-preview.vue

@@ -3,12 +3,12 @@
 </template>
 
 <script lang="ts" setup>
-import { CasesCloseReasonGroup } from 'webitel-sdk';
+import { WebitelCasesCloseReasonGroup } from 'webitel-sdk';
 
 import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-	value: CasesCloseReasonGroup[];
+	value: WebitelCasesCloseReasonGroup[];
 }>();
 </script>
 

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

@@ -3,12 +3,12 @@
 </template>
 
 <script lang="ts" setup>
-import { CasesPriority } from 'webitel-sdk';
+import { WebitelCasesPriority } from 'webitel-sdk';
 
 import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-	value: CasesPriority[];
+	value: WebitelCasesPriority[];
 }>();
 </script>
 

package/src/modules/filters/modules/filterConfig/components/case-reaction-time/case-reaction-time-filter-value-preview.vue

@@ -23,7 +23,10 @@ import { format } from 'date-fns';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
-	value: number[];
+	value: {
+		from: number | null;
+		to: number | null;
+	};
 }>();
 
 const { t } = useI18n();

package/src/modules/filters/modules/filterConfig/components/case-resolution-time/case-resolution-time-filter-value-preview.vue

@@ -23,7 +23,10 @@ import { format } from 'date-fns';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
-	value: number[];
+	value: {
+		from: number | null;
+		to: number | null;
+	};
 }>();
 
 const { t } = useI18n();

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

@@ -21,7 +21,7 @@ import { searchMethod } from './config.js';
 
 type ModelValue = string[];
 const model = defineModel<ModelValue>({
-	default: [],
+	default: (): ModelValue => [],
 });
 
 const catalogData = ref([]);

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

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { CasesService } from 'webitel-sdk';
+import { WebitelCasesService } from 'webitel-sdk';
 
 import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
@@ -11,7 +11,7 @@ const props = defineProps<{
 	/**
 	 * would be great to use generated type for this
 	 * */
-	value: CasesService[];
+	value: WebitelCasesService[];
 }>();
 </script>
 

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

@@ -3,12 +3,12 @@
 </template>
 
 <script lang="ts" setup>
-import { CasesSLA } from 'webitel-sdk';
+import { WebitelCasesSLA } from 'webitel-sdk';
 
 import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-	value: CasesSLA[];
+	value: WebitelCasesSLA[];
 }>();
 </script>
 

package/src/modules/filters/modules/filterConfig/components/case-sla-condition/case-sla-condition-filter-value-field.vue

@@ -4,7 +4,7 @@
       :show-clear="false"
       :label="t('cases.appliedSLA')"
       :search-method="slasSearchMethod"
-      :v="v$.model.selection"
+      :v="vSelection"
       :model-value="model?.selection"
       data-key="id"
       option-value="id"
@@ -17,7 +17,7 @@
       :disabled="!model.selection"
       :label="t('webitelUI.filters.filterValue')"
       :search-method="getConditionList"
-      :v="v$.model.conditions"
+      :v="vConditions"
       :model-value="model?.conditions"
       data-key="id"
       option-value="id"
@@ -63,7 +63,9 @@ const initModel = () => {
 	}
 };
 onMounted(() => initModel());
-const v$ = useVuelidate(
+const v$ = useVuelidate<{
+	model: ModelValue;
+}>(
 	computed(() => ({
 		model: {
 			selection: {
@@ -84,6 +86,17 @@ const v$ = useVuelidate(
 
 v$.value.$touch();
 
+const vSelection = computed(() => {
+	const modelValidation = v$.value.model;
+	if (!modelValidation) return undefined;
+	return modelValidation.selection;
+});
+const vConditions = computed(() => {
+	const modelValidation = v$.value.model;
+	if (!modelValidation) return undefined;
+	return modelValidation.conditions;
+});
+
 const emit = defineEmits<{
 	'update:invalid': [
 		boolean,