@webitel/ui-datalist 26.8.27 → 26.8.28

package/package.json

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

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

@@ -0,0 +1,149 @@
+import { mount } from '@vue/test-utils';
+import {
+	getCalendarDayRangeErrors,
+	getResourceGroupTimeRangeErrors,
+} from '@webitel/api-services/validations';
+import { describe, expect, it } from 'vitest';
+import { defineComponent, ref } from 'vue';
+
+import { useTimeRangesValidation } from '../useTimeRangesValidation';
+
+type CalendarDay = {
+	day: number;
+	disabled: boolean;
+	start: number;
+	end: number;
+};
+
+const row = (day: number, start: number, end: number): CalendarDay => ({
+	day,
+	disabled: false,
+	start,
+	end,
+});
+
+const setup = (rows: CalendarDay[]) => {
+	const dataList = ref(rows);
+
+	const Comp = defineComponent({
+		setup: () => useTimeRangesValidation(dataList, getCalendarDayRangeErrors),
+		template: '<div />',
+	});
+
+	return {
+		dataList,
+		...(mount(Comp).vm as unknown as ReturnType<
+			typeof useTimeRangesValidation
+		>),
+	};
+};
+
+describe('useTimeRangesValidation with calendar days', () => {
+	it('marks nothing for rows that do not overlap', () => {
+		const { getRangeValidation } = setup([
+			row(0, 540, 541),
+			row(0, 600, 660),
+		]);
+
+		expect(getRangeValidation(0, 'start')).toBeUndefined();
+		expect(getRangeValidation(1, 'end')).toBeUndefined();
+	});
+
+	it('marks both ends of a row that starts after it ends', () => {
+		const { getRangeValidation } = setup([
+			row(0, 600, 540),
+		]);
+
+		expect(getRangeValidation(0, 'start')).toEqual({
+			$error: true,
+			$errors: [
+				'Time From cannot be greater than To',
+			],
+		});
+		expect(getRangeValidation(0, 'end')?.$error).toBe(true);
+	});
+
+	it('marks every row of an overlap, and clears once it is resolved', () => {
+		const { dataList, getRangeValidation } = setup([
+			row(0, 540, 720),
+			row(0, 600, 780),
+		]);
+
+		expect(getRangeValidation(0, 'start')?.$errors).toEqual([
+			'Time intervals on the same day cannot overlap',
+		]);
+		expect(getRangeValidation(1, 'start')?.$error).toBe(true);
+
+		dataList.value[1].start = 900;
+		dataList.value[1].end = 960;
+
+		expect(getRangeValidation(0, 'start')).toBeUndefined();
+		expect(getRangeValidation(1, 'start')).toBeUndefined();
+	});
+
+	it('marks a time outside the day', () => {
+		const { getRangeValidation } = setup([
+			row(0, 0, 24 * 60),
+		]);
+
+		expect(getRangeValidation(0, 'end')?.$errors).toEqual([
+			'Hours must be from 00 to 23',
+		]);
+	});
+});
+
+describe('useTimeRangesValidation with resource group ranges', () => {
+	const setupRanges = (
+		rows: {
+			start: number;
+			end: number;
+		}[],
+	) => {
+		const ranges = ref(rows);
+
+		const Comp = defineComponent({
+			setup: () =>
+				useTimeRangesValidation(ranges, getResourceGroupTimeRangeErrors),
+			template: '<div />',
+		});
+
+		return {
+			ranges,
+			...(mount(Comp).vm as unknown as ReturnType<
+				typeof useTimeRangesValidation
+			>),
+		};
+	};
+
+	it('marks both ends of a reversed range', () => {
+		const { getRangeValidation } = setupRanges([
+			{
+				start: 600,
+				end: 540,
+			},
+		]);
+
+		expect(getRangeValidation(0, 'start')?.$error).toBe(true);
+		expect(getRangeValidation(0, 'end')?.$error).toBe(true);
+	});
+
+	it('marks intersecting ranges regardless of day', () => {
+		const { ranges, getRangeValidation } = setupRanges([
+			{
+				start: 540,
+				end: 720,
+			},
+			{
+				start: 600,
+				end: 780,
+			},
+		]);
+
+		expect(getRangeValidation(1, 'end')?.$error).toBe(true);
+
+		ranges.value[1].start = 900;
+		ranges.value[1].end = 960;
+
+		expect(getRangeValidation(0, 'start')).toBeUndefined();
+	});
+});

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

@@ -0,0 +1,38 @@
+import type { TimeRangeError } from '@webitel/api-services/validations';
+import { computed, type MaybeRefOrGetter, toValue } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+export function useTimeRangesValidation(
+	items: MaybeRefOrGetter<unknown>,
+	getErrors: (items: unknown) => TimeRangeError[],
+) {
+	const { t } = useI18n();
+
+	const errors = computed(() => {
+		const byField = new Map<string, string>();
+
+		for (const { index, prop, key } of getErrors(toValue(items))) {
+			const field = `${index}.${prop}`;
+			if (!byField.has(field)) byField.set(field, key);
+		}
+
+		return byField;
+	});
+
+	const getRangeValidation = (index: number, prop: string) => {
+		const key = errors.value.get(`${index}.${prop}`);
+
+		if (!key) return undefined;
+
+		return {
+			$error: true,
+			$errors: [
+				t(`validation.${key}`),
+			],
+		};
+	};
+
+	return {
+		getRangeValidation,
+	};
+}

package/src/modules/card/index.ts

@@ -4,5 +4,6 @@ export * from './composables/useCardListNavigation';
 export * from './composables/useCardStoreProvider';
 export * from './composables/useCardTabs';
 export * from './composables/useNestedCardComponent';
+export * from './composables/useTimeRangesValidation';
 export * from './stores/createCardStore';
 export * from './types/CardValidationFields.types';