Merge branch 'main' into BC-8427-member-dialogs-a11y

config/webpack/webpack.common.js

@@ -169,6 +169,7 @@ module.exports = {
 			"@ui-kebab-menu": getDir("src/modules/ui/kebab-menu"),
 			"@ui-layout": getDir("src/modules/ui/layout"),
 			"@ui-light-box": getDir("src/modules/ui/light-box"),
+			"@ui-line-clamp": getDir("src/modules/ui/line-clamp"),
 			"@ui-preview-image": getDir("src/modules/ui/preview-image"),
 			"@ui-room-details": getDir("src/modules/ui/room-details"),
 			"@ui-skip-link": getDir("src/modules/ui/skip-link"),

src/components/organisms/vCustomDialog.vue

@@ -6,7 +6,7 @@
 		@click:outside="closeDialog"
 		@keydown.esc="closeDialog"
 	>
-		<v-card :ripple="false">
+		<v-card :ripple="false" data-testid="dialog-content">
 			<v-card-title data-testid="dialog-title" class="dialog-title px-6 pt-4">
 				<slot name="title" />
 			</v-card-title>

src/locales/de.ts

@@ -1709,20 +1709,20 @@ export default {
 	"pages.rooms.members.error.remove":
 		"Löschen von Teilnehmenden fehlgeschlagen.",
 	"pages.rooms.members.infoText":
-		"Füge Teilnehmende zum Raum hinzu. Lehrkräfte anderer Schulen können hinzugefügt werden, wenn sie in ihrem Profil die Sichtbarkeit im zentralen Verzeichnis aktiviert haben	({0}).",
+		"Füge Mitglieder zum Raum hinzu. Lehrkräfte anderer Schulen können hinzugefügt werden, wenn sie in ihrem Profil die Sichtbarkeit im zentralen Verzeichnis aktiviert haben	({0}).",
 	"pages.rooms.members.infoText.moreInformation": "weitere Informationen",
 	"pages.rooms.members.label": "Teilnehmende",
-	"pages.rooms.members.add": "Teilnehmende hinzufügen",
-	"pages.rooms.members.manage": "Raum-Teilnehmende",
+	"pages.rooms.members.add": "Mitglieder hinzufügen",
+	"pages.rooms.members.manage": "Raum-Mitglieder",
 	"pages.rooms.members.remove.ariaLabel": "{memberName} aus Raum entfernen",
 	"pages.rooms.members.resetSelection.ariaLabel":
-		"Ausgewählte Teilnehmer aus der Liste zurücksetzen",
+		"Ausgewählte Mitglieder aus der Liste zurücksetzen",
 	"pages.rooms.members.multipleRemove.ariaLabel":
-		"Mehrere Teilnehmer aus dem Raum entfernen",
+		"Mehrere Mitglieder aus dem Raum entfernen",
 	"pages.rooms.members.remove.confirmation":
 		"{memberName} wirklich aus dem Raum entfernen?",
 	"pages.rooms.members.multipleRemove.confirmation":
-		"Ausgewählte Teilnehmende wirklich aus dem Raum entfernen?",
+		"Ausgewählte Mitglieder wirklich aus dem Raum entfernen?",
 	"pages.rooms.members.roles.editor": "Raumeditor",
 	"pages.rooms.members.roles.viewer": "Raumbetrachter",
 	"pages.rooms.title": "Räume",

src/locales/en.ts

@@ -1677,20 +1677,20 @@ export default {
 	"pages.rooms.members.error.add": "Adding participants failed.",
 	"pages.rooms.members.error.remove": "Deleting participants failed.",
 	"pages.rooms.members.infoText":
-		"Add participants to the room. Teachers from other schools can be added if they have activated visibility in the central directory in their profile ({0}).",
+		"Add members to the room. Teachers from other schools can be added if they have activated visibility in the central directory in their profile ({0}).",
 	"pages.rooms.members.infoText.moreInformation": "more information",
 	"pages.rooms.members.label": "Participants",
-	"pages.rooms.members.add": "Add participants",
-	"pages.rooms.members.manage": "Room Participants",
+	"pages.rooms.members.add": "Add members",
+	"pages.rooms.members.manage": "Room members",
 	"pages.rooms.members.remove.ariaLabel": "Remove {memberName} from the room",
 	"pages.rooms.members.resetSelection.ariaLabel":
-		"Reset selected participants from the list",
+		"Reset selected members from the list",
 	"pages.rooms.members.multipleRemove.ariaLabel":
-		"Remove multiple participants from the room",
+		"Remove multiple members from the room",
 	"pages.rooms.members.remove.confirmation":
 		"Remove {memberName} from the room?",
 	"pages.rooms.members.multipleRemove.confirmation":
-		"Remove selected participants from the room?",
+		"Remove selected members from the room?",
 	"pages.rooms.members.roles.editor": "Room editor",
 	"pages.rooms.members.roles.viewer": "Room viewer",
 	"pages.rooms.title": "Rooms",

src/locales/es.ts

@@ -1727,20 +1727,20 @@ export default {
 	"pages.rooms.members.error.add": "Error al agregar participantes.",
 	"pages.rooms.members.error.remove": "Error al eliminar participantes.",
 	"pages.rooms.members.infoText":
-		"Añadir participantes a la sala. Se pueden añadir profesores de otros centros si tienen activada la visibilidad en el directorio central en su perfil ({0}).",
+		"Añadir miembros a la sala. Se pueden añadir profesores de otros centros si tienen activada la visibilidad en el directorio central en su perfil ({0}).",
 	"pages.rooms.members.infoText.moreInformation": "más información",
 	"pages.rooms.members.label": "Participantes",
-	"pages.rooms.members.add": "Añadir participantes",
-	"pages.rooms.members.manage": "Participantes de la sala",
+	"pages.rooms.members.add": "Añadir miembros",
+	"pages.rooms.members.manage": "Miembros de la sala",
 	"pages.rooms.members.remove.ariaLabel": "Eliminar {memberName} de la sala",
 	"pages.rooms.members.resetSelection.ariaLabel":
-		"Restablecer las participantes seleccionadas de la lista",
+		"Restablecer las miembros seleccionados de la lista",
 	"pages.rooms.members.multipleRemove.ariaLabel":
-		"Eliminar varios participantes de la sala",
+		"Eliminar varios miembros de la sala",
 	"pages.rooms.members.remove.confirmation":
 		"¿Eliminar {memberName} de la sala?",
 	"pages.rooms.members.multipleRemove.confirmation":
-		"¿Eliminar participantes seleccionadas de la sala?",
+		"¿Eliminar miembros seleccionados de la sala?",
 	"pages.rooms.members.roles.editor": "Editor de salas",
 	"pages.rooms.members.roles.viewer": "Visor de salas",
 	"pages.rooms.title": "Salas",

src/locales/uk.ts

@@ -1704,22 +1704,21 @@ export default {
 	"pages.rooms.members.error.load": "Не вдалося завантажити список учасників.",
 	"pages.rooms.members.error.add": "Не вдалося додати учасників.",
 	"pages.rooms.members.error.remove": "Не вдалося видалити учасників.",
-
 	"pages.rooms.members.infoText":
-		"Додайте учасників до кімнати. Вчителі з інших шкіл можуть бути додані, якщо вони активували видимість у центральному каталозі у своєму профілі ({0}).",
+		"Додайте члени до кімнати. Вчителі з інших шкіл можуть бути додані, якщо вони активували видимість у центральному каталозі у своєму профілі ({0}).",
 	"pages.rooms.members.infoText.moreInformation": "більше інформації",
 	"pages.rooms.members.label": "Учасники",
-	"pages.rooms.members.add": "Додайте учасників",
-	"pages.rooms.members.manage": "Кімната Учасники",
+	"pages.rooms.members.add": "Додайте члени",
+	"pages.rooms.members.manage": "Учасник кімнати",
 	"pages.rooms.members.remove.ariaLabel": "Видалити {memberName} з кімнати",
 	"pages.rooms.members.resetSelection.ariaLabel":
-		"Скинути вибраних учасників зі списку",
+		"Скинути вибраних членів зі списку",
 	"pages.rooms.members.multipleRemove.ariaLabel":
-		"Видалити кількох учасників із кімнати",
+		"Видалити кількох членів із кімнати",
 	"pages.rooms.members.remove.confirmation":
 		"{memberName} буде видалено з цієї кімнати. Ви впевнені, що хочете видалити?",
 	"pages.rooms.members.multipleRemove.confirmation":
-		"Видалити вибраних учасників із кімнати?",
+		"Видалити вибраних членів із кімнати?",
 	"pages.rooms.members.roles.editor": "Редактор кімнати",
 	"pages.rooms.members.roles.viewer": "Переглядач кімнати",
 	"pages.rooms.title": "Кімнати",

src/modules/data/board/Board.store.ts

@@ -324,7 +324,7 @@ export const useBoardStore = defineStore("boardStore", () => {
 	const deleteBoardSuccess = (payload: DeleteBoardSuccessPayload) => {
 		if (payload.isOwnAction === true) {
 			router.replace({
-				name: "rooms-id",
+				name: "room-details",
 				params: { id: roomId.value },
 			});
 			return;

src/modules/data/board/Board.store.unit.ts

@@ -1196,7 +1196,7 @@ describe("BoardStore", () => {
 				});
 
 				expect(router.replace).toHaveBeenCalledWith({
-					name: "rooms-id",
+					name: "room-details",
 					params: { id: "roomId" },
 				});
 			});

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

@@ -1,5 +1,5 @@
-import { RoomApiFactory, RoomColor } from "@/serverApi/v3";
-import { RoomCreateParams, RoomItem } from "@/types/room/Room";
+import { RoomApiFactory } from "@/serverApi/v3";
+import { RoomCreateParams, RoomItem, RoomColorEnum } from "@/types/room/Room";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { ref } from "vue";
 
@@ -9,7 +9,7 @@ export const useRoomCreateState = () => {
 
 	const roomData = ref<RoomCreateParams>({
 		name: "",
-		color: RoomColor.BlueGrey,
+		color: RoomColorEnum.BlueGrey,
 		startDate: undefined,
 		endDate: undefined,
 	});

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

@@ -6,7 +6,7 @@ import { useApplicationError } from "@/composables/application-error.composable"
 import { initializeAxios, mapAxiosErrorToResponseError } from "@/utils/api";
 import setupStores from "@@/tests/test-utils/setupStores";
 import ApplicationErrorModule from "@/store/application-error";
-import { RoomCreateParams } from "@/types/room/Room";
+import { RoomCreateParams, RoomColorEnum } from "@/types/room/Room";
 import { ref } from "vue";
 import {
 	apiResponseErrorFactory,
@@ -73,7 +73,7 @@ describe("useRoomCreateState", () => {
 	describe("createRoom", () => {
 		const roomData = ref<RoomCreateParams>({
 			name: "Room 1",
-			color: serverApi.RoomColor.BlueGrey,
+			color: RoomColorEnum.BlueGrey,
 			startDate: undefined,
 			endDate: undefined,
 		});

src/modules/data/room/RoomDetails.store.ts

@@ -1,7 +1,13 @@
 import { RoomBoardItem, RoomDetails } from "@/types/room/Room";
 import { ref } from "vue";
 import { defineStore } from "pinia";
-import { RoomApiFactory } from "@/serverApi/v3";
+import {
+	BoardApiFactory,
+	BoardLayout,
+	BoardParentType,
+	CreateBoardBodyParams,
+	RoomApiFactory,
+} from "@/serverApi/v3";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { createApplicationError } from "@/utils/create-application-error.factory";
 
@@ -17,6 +23,7 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 	const roomBoards = ref<RoomBoardItem[]>([]);
 
 	const roomApi = RoomApiFactory(undefined, "/v3", $axios);
+	const boardApi = BoardApiFactory(undefined, "/v3", $axios);
 
 	const fetchRoom = async (id: string) => {
 		try {
@@ -38,6 +45,22 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 		}
 	};
 
+	const createBoard = async (
+		roomId: string,
+		layout: BoardLayout,
+		title: string
+	) => {
+		const params: CreateBoardBodyParams = {
+			title: title,
+			parentId: roomId,
+			parentType: BoardParentType.Room,
+			layout,
+		};
+		const boardId = (await boardApi.boardControllerCreateBoard(params)).data.id;
+
+		return boardId;
+	};
+
 	const resetState = () => {
 		isLoading.value = true;
 		room.value = undefined;
@@ -51,6 +74,7 @@ export const useRoomDetailsStore = defineStore("roomDetailsStore", () => {
 	return {
 		deactivateRoom,
 		fetchRoom,
+		createBoard,
 		isLoading,
 		resetState,
 		room,

src/modules/data/room/RoomDetails.store.unit.ts

@@ -8,6 +8,7 @@ import { initializeAxios, mapAxiosErrorToResponseError } from "@/utils/api";
 import {
 	apiResponseErrorFactory,
 	axiosErrorFactory,
+	mockApiResponse,
 } from "@@/tests/test-utils";
 
 jest.mock("@/utils/api");
@@ -35,12 +36,14 @@ const setupErrorResponse = (message = "NOT_FOUND", code = 404) => {
 
 describe("useRoomDetailsStore", () => {
 	let roomApiMock: DeepMocked<serverApi.RoomApiInterface>;
+	let boardApiMock: DeepMocked<serverApi.BoardApiInterface>;
 	let axiosMock: DeepMocked<AxiosInstance>;
 	let mockedCreateApplicationErrorCalls: ReturnType<typeof useApplicationError>;
 
 	beforeEach(() => {
 		setActivePinia(createPinia());
 		roomApiMock = createMock<serverApi.RoomApiInterface>();
+		boardApiMock = createMock<serverApi.BoardApiInterface>();
 		axiosMock = createMock<AxiosInstance>();
 		mockedCreateApplicationErrorCalls =
 			createMock<ReturnType<typeof useApplicationError>>();
@@ -49,6 +52,7 @@ describe("useRoomDetailsStore", () => {
 		);
 
 		jest.spyOn(serverApi, "RoomApiFactory").mockReturnValue(roomApiMock);
+		jest.spyOn(serverApi, "BoardApiFactory").mockReturnValue(boardApiMock);
 		initializeAxios(axiosMock);
 	});
 
@@ -135,4 +139,30 @@ describe("useRoomDetailsStore", () => {
 			expect(store.room).toBeUndefined();
 		});
 	});
+
+	describe("createBoard", () => {
+		it("should call createBoard api", async () => {
+			const { store } = setup();
+			const boardId = "board-id";
+			const roomId = "room-id";
+			const layout = serverApi.BoardLayout.Columns;
+			const title = "title";
+
+			boardApiMock.boardControllerCreateBoard.mockResolvedValue(
+				mockApiResponse({
+					data: { id: boardId },
+				})
+			);
+
+			const result = await store.createBoard(roomId, layout, title);
+
+			expect(result).toBe(boardId);
+			expect(boardApiMock.boardControllerCreateBoard).toHaveBeenCalledWith({
+				title,
+				parentId: roomId,
+				parentType: serverApi.BoardParentType.Room,
+				layout,
+			});
+		});
+	});
 });

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

@@ -1,5 +1,9 @@
-import { RoomApiFactory, RoomColor } from "@/serverApi/v3";
-import { RoomDetails, RoomUpdateParams } from "@/types/room/Room";
+import { RoomApiFactory } from "@/serverApi/v3";
+import {
+	RoomDetails,
+	RoomUpdateParams,
+	RoomColorEnum,
+} from "@/types/room/Room";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { createApplicationError } from "@/utils/create-application-error.factory";
 import { ref } from "vue";
@@ -19,7 +23,7 @@ export const useRoomEditState = () => {
 
 	const roomData = ref<RoomUpdateParams>({
 		name: "",
-		color: RoomColor.BlueGrey,
+		color: RoomColorEnum.BlueGrey,
 		startDate: undefined,
 		endDate: undefined,
 	});

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

@@ -10,6 +10,7 @@ import {
 	apiResponseErrorFactory,
 	axiosErrorFactory,
 } from "@@/tests/test-utils";
+import { RoomColorEnum } from "@/types/room/Room";
 
 jest.mock("@/utils/api");
 const mockedMapAxiosErrorToResponseError = jest.mocked(
@@ -105,7 +106,7 @@ describe("useRoomEditState", () => {
 			expect(isLoading.value).toBe(true);
 			const params = {
 				name: "room-name",
-				color: serverApi.RoomColor.BlueGrey,
+				color: RoomColorEnum.BlueGrey,
 			};
 
 			await updateRoom("room-id", params);
@@ -123,7 +124,7 @@ describe("useRoomEditState", () => {
 		const { updateRoom, isLoading } = setup();
 		const params = {
 			name: "room-name",
-			color: serverApi.RoomColor.BlueGrey,
+			color: RoomColorEnum.BlueGrey,
 		};
 		roomApiMock.roomControllerUpdateRoom.mockRejectedValue({ code: 404 });
 

src/modules/data/room/Rooms.state.unit.ts

@@ -10,6 +10,7 @@ import {
 	apiResponseErrorFactory,
 	axiosErrorFactory,
 } from "@@/tests/test-utils";
+import { RoomColorEnum } from "@/types/room/Room";
 
 jest.mock("@/utils/api");
 const mockedMapAxiosErrorToResponseError = jest.mocked(
@@ -125,7 +126,7 @@ describe("useRoomsState", () => {
 				{
 					id: "1",
 					name: "Room 1",
-					color: serverApi.RoomColor.BlueGrey,
+					color: RoomColorEnum.BlueGrey,
 					schoolId: "6749dd4e657d98af622e370c",
 					createdAt: "2024.11.18",
 					updatedAt: "2024.11.18",

src/modules/feature/board/board/Board.unit.ts

@@ -882,7 +882,7 @@ describe("Board", () => {
 
 							expect(wrapperVM.isBoardVisible).toBe(false);
 							expect(router.replace).toHaveBeenCalledWith({
-								name: "rooms-id",
+								name: "room-details",
 								params: { id: mockRoomId },
 							});
 							expect(

src/modules/feature/board/board/Board.vue

@@ -322,7 +322,7 @@ watch(
 		setAlert();
 
 		if (!(isBoardVisible.value || isTeacher)) {
-			router.replace({ name: "rooms-id", params: { id: roomId.value } });
+			router.replace({ name: "room-details", params: { id: roomId.value } });
 			applicationErrorModule.setError(
 				createApplicationError(
 					HttpStatusCode.Forbidden,

src/modules/feature/room/BoardGrid.vue

@@ -4,6 +4,7 @@
 			v-for="(board, index) in boards"
 			:key="board.id"
 			cols="12"
+			sm="6"
 			md="4"
 			xl="3"
 		>

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

@@ -42,7 +42,7 @@ describe("@feature-room/BoardTile", () => {
 		it("should display tile in draft style", () => {
 			const { wrapper } = setup({ board: mockBoard, index: 0 });
 
-			expect(wrapper.classes()).toContain("board-is-draft");
+			expect(wrapper.classes()).toContain("opacity-70");
 		});
 	});
 });