BC-8213 - validate room dates

src/locales/de.ts

@@ -800,6 +800,10 @@ export default {
 	"components.roomForm.labels.timePeriod": "Zeitraum",
 	"components.roomForm.labels.timePeriod.from": "Zeitraum von",
 	"components.roomForm.labels.timePeriod.to": "Zeitraum bis",
+	"components.roomForm.validation.generalSaveError":
+		"Beim Speichern ist ein Fehler aufgetreten. Bitte überprüfe deine Eingaben und versuche es erneut.",
+	"components.roomForm.validation.timePeriod.startBeforeEnd":
+		"Das Startdatum muss vor dem Enddatum liegen.",
 	"components.timePicker.validation.format": "Bitte Format HH:MM verwenden.",
 	"components.timePicker.validation.required": "Bitte Uhrzeit angeben.",
 	"error.400": "400 – Fehlerhafte Anfrage",

src/locales/en.ts

@@ -792,6 +792,10 @@ export default {
 	"components.roomForm.labels.timePeriod": "Time period",
 	"components.roomForm.labels.timePeriod.from": "Time period from",
 	"components.roomForm.labels.timePeriod.to": "Time period to",
+	"components.roomForm.validation.generalSaveError":
+		"An error occurred while saving. Please check your inputs and try again.",
+	"components.roomForm.validation.timePeriod.startBeforeEnd":
+		"The start date must be before the end date.",
 	"components.timePicker.validation.format": "Please use format HH:MM",
 	"components.timePicker.validation.required": "Please enter a time.",
 	"error.400": "401 – Bad Request",

src/locales/es.ts

@@ -456,7 +456,7 @@ export default {
 	"components.cardElement.deletedElement.warning.externalToolElement":
 		"La herramienta {toolName} no está disponible. Por favor comuníquese con el administrador de la escuela.",
 	"components.datePicker.validation.format":
-		"Por favor utilice el formato DD.MM.YYYY",
+		"Por favor utilice el formato DD.MM.AAAA",
 	"components.datePicker.validation.required": "Por favor ingrese una fecha.",
 	"components.dateTimePicker.messages.dateInPast":
 		"La fecha y la hora están en el pasado.",
@@ -812,6 +812,10 @@ export default {
 	"components.roomForm.labels.timePeriod": "Periodo de tiempo",
 	"components.roomForm.labels.timePeriod.from": "Periodo de tiempo desde",
 	"components.roomForm.labels.timePeriod.to": "Periodo de tiempo hasta",
+	"components.roomForm.validation.generalSaveError":
+		"Se ha producido un error al guardar. Por favor, compruebe sus entradas e inténtelo de nuevo.",
+	"components.roomForm.validation.timePeriod.startBeforeEnd":
+		"La fecha de inicio debe ser anterior a la fecha de finalización.",
 	"components.timePicker.validation.format":
 		"Por favor utilice el formato HH:MM",
 	"components.timePicker.validation.required": "Por favor ingrese un tiempo.",

src/locales/uk.ts

@@ -806,6 +806,10 @@ export default {
 	"components.roomForm.labels.timePeriod": "Період часу",
 	"components.roomForm.labels.timePeriod.from": "Період від",
 	"components.roomForm.labels.timePeriod.to": "Період до",
+	"components.roomForm.validation.generalSaveError":
+		"Виникла помилка при збереженні. Будь ласка, перевірте свої записи та спробуйте ще раз.",
+	"components.roomForm.validation.timePeriod.startBeforeEnd":
+		"Дата початку повинна передувати даті закінчення.",
 	"components.timePicker.validation.format": "Використовуйте формат ГГ:ХХ",
 	"components.timePicker.validation.required": "Будь ласка, введіть час.",
 	"error.400": "400 – Неприпустимий запит",

src/modules/data/room/RoomCreate.state.ts

@@ -2,9 +2,14 @@ import { RoomApiFactory, RoomColor } from "@/serverApi/v3";
 import { RoomCreateParams, RoomItem } from "@/types/room/Room";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { createApplicationError } from "@/utils/create-application-error.factory";
+import { injectStrict, NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 
 export const useRoomCreateState = () => {
+	const notifierModule = injectStrict(NOTIFIER_MODULE_KEY);
+	const { t } = useI18n();
+
 	const roomApi = RoomApiFactory(undefined, "/v3", $axios);
 	const isLoading = ref(true);
 
@@ -15,15 +20,25 @@ export const useRoomCreateState = () => {
 		endDate: undefined,
 	});
 
-	const createRoom = async (params: RoomCreateParams): Promise<RoomItem> => {
+	const createRoom = async (
+		params: RoomCreateParams
+	): Promise<RoomItem | undefined> => {
 		isLoading.value = true;
 		try {
 			const room = (await roomApi.roomControllerCreateRoom(params)).data;
+
 			return room;
 		} catch (error) {
 			const responseError = mapAxiosErrorToResponseError(error);
 
-			throw createApplicationError(responseError.code);
+			if (responseError.type === "API_VALIDATION_ERROR") {
+				notifierModule.show({
+					text: t("components.roomForm.validation.generalSaveError"),
+					status: "error",
+				});
+			} else {
+				throw createApplicationError(responseError.code);
+			}
 		} finally {
 			isLoading.value = false;
 		}

src/modules/data/room/RoomEdit.state.ts

@@ -2,9 +2,14 @@ import { RoomApiFactory, RoomColor } from "@/serverApi/v3";
 import { RoomDetails, RoomUpdateParams } from "@/types/room/Room";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { createApplicationError } from "@/utils/create-application-error.factory";
+import { injectStrict, NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { ref } from "vue";
+import { useI18n } from "vue-i18n";
 
 export const useRoomEditState = () => {
+	const notifierModule = injectStrict(NOTIFIER_MODULE_KEY);
+	const { t } = useI18n();
+
 	const roomApi = RoomApiFactory(undefined, "/v3", $axios);
 	const isLoading = ref(true);
 
@@ -40,14 +45,23 @@ export const useRoomEditState = () => {
 	const updateRoom = async (
 		id: string,
 		params: RoomUpdateParams
-	): Promise<void> => {
+	): Promise<RoomDetails | undefined> => {
 		isLoading.value = true;
 		try {
-			await roomApi.roomControllerUpdateRoom(id, params);
+			const room = (await roomApi.roomControllerUpdateRoom(id, params)).data;
+
+			return room;
 		} catch (error) {
 			const responseError = mapAxiosErrorToResponseError(error);
 
-			throw createApplicationError(responseError.code);
+			if (responseError.type === "API_VALIDATION_ERROR") {
+				notifierModule.show({
+					text: t("components.roomForm.validation.generalSaveError"),
+					status: "error",
+				});
+			} else {
+				throw createApplicationError(responseError.code);
+			}
 		} finally {
 			isLoading.value = false;
 		}

src/modules/feature/room/BoardGrid.unit.ts

@@ -0,0 +1,39 @@
+import {
+	createTestingVuetify,
+	createTestingI18n,
+} from "@@/tests/test-utils/setup";
+import { mount } from "@vue/test-utils";
+import { ComponentProps } from "vue-component-type-helpers";
+import BoardGrid from "./BoardGrid.vue";
+import { BoardLayout } from "@/serverApi/v3";
+import { RoomBoardItem } from "@/types/room/Room";
+
+const mockBoard: RoomBoardItem = {
+	id: "59cce2c61113d1132c98dc06",
+	title: "A11Y for Beginners",
+	layout: BoardLayout.Columns,
+	isVisible: true,
+	createdAt: "2017-09-28T11:49:39.924Z",
+	updatedAt: "2017-09-28T11:49:39.924Z",
+};
+
+describe("@feature-room/BoardGrid", () => {
+	const setup = (props: ComponentProps<typeof BoardGrid>) => {
+		const wrapper = mount(BoardGrid, {
+			sync: false,
+			global: {
+				plugins: [createTestingVuetify(), createTestingI18n()],
+			},
+			props,
+			attachTo: document.body,
+		});
+
+		return { wrapper };
+	};
+
+	it("should render correctly", async () => {
+		const { wrapper } = setup({ boards: [mockBoard] });
+
+		expect(wrapper.exists()).toStrictEqual(true);
+	});
+});

src/modules/feature/room/BoardTile.unit.ts

@@ -0,0 +1,39 @@
+import {
+	createTestingVuetify,
+	createTestingI18n,
+} from "@@/tests/test-utils/setup";
+import { mount } from "@vue/test-utils";
+import { ComponentProps } from "vue-component-type-helpers";
+import BoardTile from "./BoardTile.vue";
+import { BoardLayout } from "@/serverApi/v3";
+import { RoomBoardItem } from "@/types/room/Room";
+
+const mockBoard: RoomBoardItem = {
+	id: "59cce2c61113d1132c98dc06",
+	title: "A11Y for Beginners",
+	layout: BoardLayout.Columns,
+	isVisible: true,
+	createdAt: "2017-09-28T11:49:39.924Z",
+	updatedAt: "2017-09-28T11:49:39.924Z",
+};
+
+describe("@feature-room/BoardTile", () => {
+	const setup = (props: ComponentProps<typeof BoardTile>) => {
+		const wrapper = mount(BoardTile, {
+			sync: false,
+			global: {
+				plugins: [createTestingVuetify(), createTestingI18n()],
+			},
+			props,
+			attachTo: document.body,
+		});
+
+		return { wrapper };
+	};
+
+	it("should render correctly", async () => {
+		const { wrapper } = setup({ board: mockBoard, index: 0 });
+
+		expect(wrapper.exists()).toStrictEqual(true);
+	});
+});

src/modules/feature/room/RoomDetails.unit.ts

@@ -0,0 +1,40 @@
+import {
+	createTestingVuetify,
+	createTestingI18n,
+} from "@@/tests/test-utils/setup";
+import { mount } from "@vue/test-utils";
+import { ComponentProps } from "vue-component-type-helpers";
+import RoomDetails from "./RoomDetails.vue";
+import { RoomDetails as RoomDetailsType } from "@/types/room/Room";
+import { RoomColor } from "@/serverApi/v3";
+
+const mockRoom: RoomDetailsType = {
+	id: "59cce2c61113d1132c98dc06",
+	name: "A11Y for Beginners",
+	color: RoomColor.Magenta,
+	startDate: "",
+	endDate: "",
+	createdAt: "2017-09-28T11:49:39.924Z",
+	updatedAt: "2017-09-28T11:49:39.924Z",
+};
+
+describe("@feature-room/RoomDetails", () => {
+	const setup = (props: ComponentProps<typeof RoomDetails>) => {
+		const wrapper = mount(RoomDetails, {
+			sync: false,
+			global: {
+				plugins: [createTestingVuetify(), createTestingI18n()],
+			},
+			props,
+			attachTo: document.body,
+		});
+
+		return { wrapper };
+	};
+
+	it("should render correctly", async () => {
+		const { wrapper } = setup({ room: mockRoom });
+
+		expect(wrapper.exists()).toStrictEqual(true);
+	});
+});