@webitel/ui-datalist 1.1.55 → 1.1.57

package/package.json

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

package/src/modules/_shared/createDatalistStore.ts

@@ -27,7 +27,7 @@ const defaultStoreType = DatalistStoreProvider.Pinia;
  * */
 export const makeThisToRefs = <StoreBody extends object>(
 	store: StoreBody,
-	storeType: DatalistStoreProviderType,
+	storeType?: DatalistStoreProviderType,
 ): ToRefs<StoreBody> => {
 	const thisStoreType = storeType || defaultStoreType;
 

package/src/modules/card/stores/createCardStore.ts

@@ -33,7 +33,12 @@ export const createCardStore = <
 }: {
 	namespace: string;
 	standardValidationSchema: z.ZodType;
-	apiModule: ApiModule<Entity>;
+	/**
+	 * Every method on {@link ApiModule} is optional, but a card store reads and
+	 * writes one item, so these three are required here.
+	 */
+	apiModule: ApiModule<Entity> &
+		Required<Pick<ApiModule<Entity>, 'get' | 'add' | 'update'>>;
 	validationSchemaOptions?: RegleSchemaBehaviourOptions;
 }) => {
 	return defineStore(namespace, () => {
@@ -61,7 +66,7 @@ export const createCardStore = <
 		// processing progress vars
 		const isLoading = ref(false);
 		const isSaving = ref(false);
-		const error = ref(null); // if needed
+		const error = ref<unknown>(null); // if needed
 
 		validationSchema.value = useRegleSchema(
 			draftItemInstance,

package/src/modules/filter-presets/api/PresetQuery.ts

@@ -23,6 +23,16 @@ const configuration = getDefaultOpenAPIConfig();
 
 const service = PresetQueryServiceApiFactory(configuration, '', instance);
 
+const isConflictError = (err: unknown): boolean =>
+	typeof err === 'object' &&
+	err !== null &&
+	'status' in err &&
+	(
+		err as {
+			status: unknown;
+		}
+	).status === 409;
+
 type GetPresetListRequestConfig = {
 	transformers: {
 		useStarToSearch?: boolean;
@@ -104,7 +114,7 @@ const addPreset = async ({
 		]);
 	} catch (err) {
 		throw applyTransform(err, [
-			skipIf(notify, (err) => err.status === 409),
+			skipIf(notify, isConflictError),
 		]);
 	}
 };
@@ -125,7 +135,7 @@ const updatePreset = async ({ item: itemInstance, id, namespace }) => {
 		]);
 	} catch (err) {
 		throw applyTransform(err, [
-			skipIf(notify, (err) => err.status === 409),
+			skipIf(notify, isConflictError),
 		]);
 	}
 };

package/src/modules/filter-presets/stores/createFilterPresetsStore.ts

@@ -26,7 +26,7 @@ export const filterPresetsStoreBody = (namespace = 'presets') => {
 		? namespace
 		: `${namespace}/presets`;
 
-	const presetId = ref(null);
+	const presetId = ref<number | null>(null);
 
 	const setupPresetPersistence = async () => {
 		const { restore: restorePreset, reset } = usePersistedStorage({

package/src/modules/filters/classes/Filter.ts

@@ -53,7 +53,7 @@ export class Filter implements IFilter {
 	constructor(
 		{ name, value, label }: FilterInitParams,
 		public payload: object | undefined,
-		public config: FilterInstanceConfig,
+		public config: FilterInstanceConfig | undefined,
 	) {
 		this.name = name;
 		this.value = value;

package/src/modules/filters/classes/FiltersManager.ts

@@ -21,7 +21,8 @@ export interface IFiltersManager {
 	filters: Map<FilterName, IFilter>;
 
 	hasFilter: (name: FilterName) => boolean;
-	getFilter: (name: FilterName) => IFilter;
+	/** `undefined` when no filter is registered under `name` */
+	getFilter: (name: FilterName) => IFilter | undefined;
 	addFilter: (
 		params: FilterInitParams,
 		payload?: object,
@@ -34,7 +35,7 @@ export interface IFiltersManager {
 		value?: FilterValue;
 		label?: FilterLabel;
 	}) => IFilter;
-	deleteFilter: ({ name }: { name: FilterName }) => IFilter;
+	deleteFilter: ({ name }: { name: FilterName }) => IFilter | undefined;
 
 	/**
 	 * Converts filters data to String, that can be stored
@@ -105,7 +106,7 @@ class FiltersManager implements IFiltersManager {
 		return this.filters.has(name);
 	}
 
-	getFilter(name: FilterName): IFilter {
+	getFilter(name: FilterName): IFilter | undefined {
 		return this.filters.get(name);
 	}
 
@@ -129,6 +130,9 @@ class FiltersManager implements IFiltersManager {
 		label?: FilterLabel;
 	}): IFilter {
 		const filter = this.filters.get(name);
+		if (!filter) {
+			throw new Error(`FiltersManager: cannot update unknown filter "${name}"`);
+		}
 		filter.set({
 			value,
 			label,
@@ -136,7 +140,7 @@ class FiltersManager implements IFiltersManager {
 		return filter;
 	}
 
-	deleteFilter({ name }: { name: FilterName }): IFilter {
+	deleteFilter({ name }: { name: FilterName }): IFilter | undefined {
 		const filter = this.filters.get(name);
 		this.filters.delete(name);
 		return filter;
@@ -206,6 +210,11 @@ class FiltersManager implements IFiltersManager {
 				const name = filterNameFromSnapshotKey(snapshotKey);
 				const valueProp = filterValuePropFromSnapshotKey(snapshotKey);
 
+				// keys that are neither `_lbl` nor `_val`
+				if (name === undefined || valueProp === undefined) {
+					return filtersAcc;
+				}
+
 				if (filtersAcc[name]) {
 					filtersAcc[name][valueProp] = snapshotValue;
 				} else {
@@ -249,10 +258,11 @@ class FiltersManager implements IFiltersManager {
 		include?: FilterName[];
 		exclude?: FilterName[];
 	} = {}): IFilter[] {
-		const useInclude = !isEmpty(include);
-		const useExclude = !isEmpty(exclude) && !useInclude;
+		// bound to consts so the narrowing survives into the filter callback
+		const includeList = isEmpty(include) ? undefined : include;
+		const excludeList = isEmpty(exclude) ? undefined : exclude;
 
-		if (!useInclude && !useExclude) {
+		if (!includeList && !excludeList) {
 			return [
 				...this.filters.values(),
 			];
@@ -261,10 +271,10 @@ class FiltersManager implements IFiltersManager {
 		return [
 			...this.filters.values(),
 		].filter(({ name }) => {
-			if (useInclude) {
-				return include.includes(name);
-			} else if (useExclude) {
-				return !exclude.includes(name);
+			if (includeList) {
+				return includeList.includes(name);
+			} else if (excludeList) {
+				return !excludeList.includes(name);
 			}
 
 			return true;
@@ -278,24 +288,25 @@ class FiltersManager implements IFiltersManager {
 		include?: FilterName[];
 		exclude?: FilterName[];
 	} = {}): void {
-		const useInclude = !isEmpty(include);
-		const useExclude = !isEmpty(exclude) && !useInclude;
+		// bound to consts so the narrowing survives into the forEach callbacks
+		const includeList = isEmpty(include) ? undefined : include;
+		const excludeList = isEmpty(exclude) ? undefined : exclude;
 
-		if (!useInclude && !useExclude) {
+		if (!includeList && !excludeList) {
 			this.filters.clear();
 			return;
 		}
 
-		if (useInclude) {
-			include.forEach((name) => {
+		if (includeList) {
+			includeList.forEach((name) => {
 				this.filters.delete(name);
 			});
 			return;
 		}
 
-		if (useExclude) {
+		if (excludeList) {
 			this.filters.forEach((_, filterName) => {
-				if (!exclude.includes(filterName)) {
+				if (!excludeList.includes(filterName)) {
 					this.filters.delete(filterName);
 				}
 			});

package/src/modules/filters/classes/__tests__/FiltersManager.spec.ts

@@ -29,7 +29,7 @@ describe('FiltersManager', () => {
 			name: 'test',
 			value: 'test2',
 		});
-		expect(filtersManager.getFilter('test').value).toBe('test2');
+		expect(filtersManager.getFilter('test')?.value).toBe('test2');
 	});
 
 	it('should be able to getAllValues', () => {

package/src/modules/filters/modules/filterConfig/classes/FilterConfig.ts

@@ -74,9 +74,11 @@ export type FilterConfigSearchFilterContext = {
 };
 
 export class FilterConfig implements BaseFilterConfig {
-	name: FilterName;
-	valueInputComponent: Component;
-	valuePreviewComponent: Component;
+	// assigned by concrete configs as field initializers, e.g.
+	// `readonly name = FilterOption.Skill`, not necessarily by this constructor
+	name!: FilterName;
+	valueInputComponent!: Component;
+	valuePreviewComponent!: Component;
 	label?: ReturnType<MessageResolver> | string;
 	staticView?: boolean;
 	notDeletable: boolean;
@@ -96,7 +98,7 @@ export class FilterConfig implements BaseFilterConfig {
 			this.valuePreviewComponent = valuePreviewComponent;
 		this.notDeletable = !!notDeletable;
 		if (staticView) this.staticView = staticView;
-		if (showFilterName) this.showFilterName = showFilterName;
+		this.showFilterName = !!showFilterName;
 	}
 }
 

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

@@ -26,7 +26,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { endOfToday, startOfToday } from 'date-fns';
-import { computed, onMounted, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 type ModelValue = {
@@ -40,7 +40,12 @@ const emit = defineEmits<{
 	];
 }>();
 
-const model = defineModel<ModelValue>();
+const model = defineModel<ModelValue>({
+	default: (): ModelValue => ({
+		from: startOfToday().getTime(),
+		to: endOfToday().getTime(),
+	}),
+});
 const { t } = useI18n();
 
 const from = computed(() => model.value?.from);
@@ -82,17 +87,6 @@ const handleInput = (key: keyof ModelValue, value: number) => {
 		[key]: value,
 	};
 };
-
-const initModel = () => {
-	if (!model.value) {
-		model.value = {
-			from: startOfToday().getTime(),
-			to: endOfToday().getTime(),
-		};
-	}
-};
-
-onMounted(() => initModel());
 </script>
 
 <style lang="scss" scoped>

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

@@ -31,7 +31,12 @@ type ModelValue = {
 	to: number;
 };
 
-const model = defineModel<ModelValue>();
+const model = defineModel<ModelValue>({
+	default: (): ModelValue => ({
+		from: 0,
+		to: 0,
+	}),
+});
 
 const emit = defineEmits<{
 	'update:invalid': [
@@ -39,13 +44,6 @@ const emit = defineEmits<{
 	];
 }>();
 
-if (!model.value) {
-	model.value = {
-		from: 0,
-		to: 0,
-	};
-}
-
 const isValueEmpty = () => {
 	return !!model?.value?.to || !!model?.value?.from;
 };

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

@@ -2,25 +2,54 @@
   <wt-multi-select
     :label="t('webitelUI.filters.filterValue')"
     :options="AmdResultOptions"
-    v-model:model-value="model"
+    v-model:model-value="selectValue"
     :v="v$.model"
     data-key="value"
     option-value="value"
   />
+  <wt-checkbox
+    :label="t('webitelUI.filters.showEmptyAmdResult')"
+    :value="AMD_RESULT_EMPTY_VALUE"
+    v-model:selected="isEmptySelected"
+  />
 </template>
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { WtMultiSelect } from '@webitel/ui-sdk/components';
-import { computed, watch } from 'vue';
+import { WtCheckbox, WtMultiSelect } from '@webitel/ui-sdk/components';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { AmdResultOptions } from '../../enums/options/AMDResultOptions';
 
-const model = defineModel<string>();
+const AMD_RESULT_EMPTY_VALUE = 'EMPTY';
+
+const model = defineModel<string[]>();
 const { t } = useI18n();
 
+// keeps the select's own model limited to real AmdResultOptions values,
+// so it never treats EMPTY as a missing/custom option to reconcile
+const selectValue = ref(
+	(model.value || []).filter((value) => value !== AMD_RESULT_EMPTY_VALUE),
+);
+const isEmptySelected = ref(!!model.value?.includes(AMD_RESULT_EMPTY_VALUE));
+
+watch(
+	[
+		selectValue,
+		isEmptySelected,
+	],
+	([select, isEmpty]) => {
+		model.value = isEmpty
+			? [
+					...select,
+					AMD_RESULT_EMPTY_VALUE,
+				]
+			: select;
+	},
+);
+
 const v$ = useVuelidate(
 	computed(() => ({
 		model: {

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

@@ -1,7 +1,7 @@
 <template>
   <ul>
     <li
-      v-for="(result, index) of props.value"
+      v-for="(result, index) of shownValues"
       :key="index"
     >
       {{ result }}
@@ -10,9 +10,22 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const AMD_RESULT_EMPTY_VALUE = 'EMPTY';
+
 const props = defineProps<{
-	value: number[];
+	value: string[];
 }>();
+
+const { t } = useI18n();
+
+const shownValues = computed(() =>
+	props.value.map((result) =>
+		result === AMD_RESULT_EMPTY_VALUE ? t('reusable.empty') : result,
+	),
+);
 </script>
 
 <style scoped></style>

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

@@ -19,7 +19,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 import { WtCheckbox, WtMultiSelect } from '@webitel/ui-sdk/components';
-import { computed, onMounted, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { CaseAssigneeFilterConfig } from './index';
@@ -29,7 +29,12 @@ type ModelValue = {
 	unassigned: boolean;
 };
 
-const model = defineModel<ModelValue>();
+const model = defineModel<ModelValue>({
+	default: (): ModelValue => ({
+		list: [],
+		unassigned: false,
+	}),
+});
 
 const props = defineProps<{
 	filterConfig: CaseAssigneeFilterConfig;
@@ -43,16 +48,6 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const initModel = () => {
-	if (!model.value) {
-		model.value = {
-			list: [],
-			unassigned: false,
-		};
-	}
-};
-onMounted(() => initModel());
-
 const v$ = useVuelidate<{
 	model: ModelValue;
 }>(

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

@@ -30,7 +30,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { WtMultiSelect, WtSingleSelect } from '@webitel/ui-sdk/components';
-import { computed, onMounted, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import {
@@ -42,7 +42,12 @@ type ModelValue = {
 	selection: string;
 	conditions: string;
 };
-const model = defineModel<ModelValue>();
+const model = defineModel<ModelValue>({
+	default: (): ModelValue => ({
+		selection: '',
+		conditions: '',
+	}),
+});
 const { t } = useI18n();
 
 const updateSelected = (value) => {
@@ -57,16 +62,6 @@ const getConditionList = (params) => {
 	});
 };
 
-const initModel = () => {
-	if (!model.value) {
-		model.value = {
-			selection: '',
-			conditions: '',
-		};
-	}
-};
-onMounted(() => initModel());
-
 const v$ = useVuelidate<{
 	model: ModelValue;
 }>(

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

@@ -30,7 +30,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { WtMultiSelect, WtSingleSelect } from '@webitel/ui-sdk/components';
-import { computed, onMounted, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { slasConditionsSearchMethod, slasSearchMethod } from './config.js';
@@ -39,7 +39,12 @@ type ModelValue = {
 	selection: string;
 	conditions: string;
 };
-const model = defineModel<ModelValue>();
+const model = defineModel<ModelValue>({
+	default: (): ModelValue => ({
+		selection: '',
+		conditions: '',
+	}),
+});
 const { t } = useI18n();
 
 const updateSelected = (value) => {
@@ -54,15 +59,6 @@ const getConditionList = async (params) => {
 	});
 };
 
-const initModel = () => {
-	if (!model.value) {
-		model.value = {
-			selection: '',
-			conditions: '',
-		};
-	}
-};
-onMounted(() => initModel());
 const v$ = useVuelidate<{
 	model: ModelValue;
 }>(

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

@@ -29,7 +29,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { WtMultiSelect, WtSingleSelect } from '@webitel/ui-sdk/components';
-import { computed, onMounted, watch } from 'vue';
+import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import {
@@ -41,7 +41,12 @@ type ModelValue = {
 	selection: string;
 	conditions: string;
 };
-const model = defineModel<ModelValue>();
+const model = defineModel<ModelValue>({
+	default: (): ModelValue => ({
+		selection: '',
+		conditions: '',
+	}),
+});
 const { t } = useI18n();
 
 const updateSelected = (value) => {
@@ -56,16 +61,6 @@ const getConditionList = (params) => {
 	});
 };
 
-const initModel = () => {
-	if (!model.value) {
-		model.value = {
-			selection: '',
-			conditions: '',
-		};
-	}
-};
-onMounted(() => initModel());
-
 const v$ = useVuelidate<{
 	model: ModelValue;
 }>(

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

@@ -38,7 +38,12 @@ type ModelValue = {
 	unassigned?: boolean | null;
 };
 
-const model = defineModel<ModelValue>();
+const model = defineModel<ModelValue>({
+	default: (): ModelValue => ({
+		list: [],
+		unassigned: null,
+	}),
+});
 
 const emit = defineEmits<{
 	'update:invalid': [
@@ -95,19 +100,8 @@ const vUnassigned = computed(() => {
 	return modelValidation.unassigned;
 });
 
-const initModel = () => {
-	if (!model.value) {
-		model.value = {
-			list: [],
-			unassigned: null,
-		};
-	}
-};
-
 onMounted(() => {
 	if (!props?.disableValidation) v$.value.$touch();
-
-	initModel();
 });
 
 watch(

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

@@ -13,7 +13,7 @@ import { useBooleanFilterValueValidation } from '../../composables/booleanFilter
 import { BooleanFilterModelValue } from '../../enums/options/BooleanFilterOptions';
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
 
-const model = defineModel<BooleanFilterModelValue>();
+const model = defineModel<BooleanFilterModelValue | null>();
 
 const { v$ } = useBooleanFilterValueValidation<BooleanFilterModelValue>(model);
 

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

@@ -13,7 +13,7 @@ import { useBooleanFilterValueValidation } from '../../composables/booleanFilter
 import { BooleanFilterModelValue } from '../../enums/options/BooleanFilterOptions';
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
 
-const model = defineModel<BooleanFilterModelValue>();
+const model = defineModel<BooleanFilterModelValue | null>();
 
 const { v$ } = useBooleanFilterValueValidation<BooleanFilterModelValue>(model);
 

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

@@ -13,7 +13,7 @@ import { useBooleanFilterValueValidation } from '../../composables/booleanFilter
 import { BooleanFilterModelValue } from '../../enums/options/BooleanFilterOptions';
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
 
-const model = defineModel<BooleanFilterModelValue>();
+const model = defineModel<BooleanFilterModelValue | null>();
 
 const { v$ } = useBooleanFilterValueValidation<BooleanFilterModelValue>(model);
 

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

@@ -21,7 +21,7 @@ const props = defineProps<{
 	hideLabel?: boolean;
 }>();
 
-const model = defineModel<BooleanFilterModelValue>();
+const model = defineModel<BooleanFilterModelValue | null>();
 
 let v$: ReturnType<typeof useBooleanFilterValueValidation>['v$'] | null = null;
 if (!props.disableValidation) {