@webitel/ui-datalist 26.8.27 → 26.8.29

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.8.27",
+	"version": "26.8.29",
 	"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/useCardComponent.ts

@@ -1,7 +1,14 @@
 import type { RegleSchema } from '@regle/schemas';
 import { refDebounced } from '@vueuse/core';
 import { type StoreDefinition, storeToRefs } from 'pinia';
-import { onUnmounted, type Ref, watch } from 'vue';
+import {
+	computed,
+	type MaybeRefOrGetter,
+	onUnmounted,
+	type Ref,
+	toValue,
+	watch,
+} from 'vue';
 
 import { useCardAnyFieldEditedWatcher } from './useCardAnyFieldEditedWatcher';
 import { useCardIsNew } from './useCardIsNew';
@@ -21,6 +28,7 @@ export const useCardComponent = <
 	useCardStore,
 	onLoadErrorHandler,
 	manualSetup = false,
+	hasSaveAccess,
 }: {
 	useCardStore: StoreDefinition;
 	onLoadErrorHandler?: (err: unknown) => void;
@@ -32,6 +40,13 @@ export const useCardComponent = <
 	 * @default false
 	 */
 	manualSetup?: boolean;
+	/**
+	 * [Claude] Save access from the app's access control, folded into
+	 * `disabledSave`. Omitted means access is granted.
+	 *
+	 * @default true
+	 */
+	hasSaveAccess?: MaybeRefOrGetter<boolean>;
 }) => {
 	const cardStore = useCardStore();
 
@@ -71,6 +86,13 @@ export const useCardComponent = <
 		isAnyFieldEdited,
 	});
 
+	const disabledSave = computed<boolean>(
+		() =>
+			!(toValue(hasSaveAccess) ?? true) ||
+			!isAnyFieldEdited.value ||
+			hasValidationErrors.value,
+	);
+
 	const { save } = useCardSaveAction<CardEntity>({
 		validate, // fixme: type
 		saveItem,
@@ -106,6 +128,7 @@ export const useCardComponent = <
 		saveText,
 		hasValidationErrors,
 		isAnyFieldEdited,
+		disabledSave,
 		validationFields,
 
 		// actions

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

@@ -33,16 +33,19 @@ export const useNestedCardComponent = <
 	onLoadErrorHandler,
 	routeParamName,
 	parentId,
+	hasSaveAccess,
 }: {
 	useCardStore: StoreDefinition;
 	onLoadErrorHandler?: (err: unknown) => void;
 	routeParamName: string;
 	parentId?: MaybeRefOrGetter<CardParentId>;
+	hasSaveAccess?: MaybeRefOrGetter<boolean>;
 }) => {
 	const cardSetup = useCardComponent<CardEntity>({
 		useCardStore,
 		onLoadErrorHandler,
 		manualSetup: true,
+		hasSaveAccess,
 	});
 
 	const cardStore = useCardStore();

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