N21-2319 Change board type

src/locales/de.ts

@@ -370,6 +370,7 @@ export default {
 	"components.board.action.moveLeft": "Nach links verschieben",
 	"components.board.action.moveRight": "Nach rechts verschieben",
 	"components.board.action.moveUp": "Nach oben verschieben",
+	"components.board.action.changeLayout": "Ansicht ändern",
 	"components.board.alert.info.teacher":
 		"Dieser Bereich ist sichtbar für alle Kursteilnehmenden.",
 	"components.board.alert.info.draft":
@@ -435,6 +436,8 @@ export default {
 		"Titel von Karte {cardPosition} in Abschnitt {columnPosition} wurde von einem anderen Benutzer in {newTitle} geändert.",
 	"components.board.screenReader.notification.cardUpdated.success":
 		"Karte {cardPosition} in Abschnitt {columnPosition} wurde von einem anderen Benutzer aktualisiert.",
+	"components.board.screenReader.notification.boardLayoutUpdated.success":
+		"Die Ansicht des Bereichs wurde von einem anderen Benutzer zu {layout} geändert.",
 	"components.board": "Bereich",
 	"components.boardCard": "Karte",
 	"components.boardColumn": "Abschnitt",

src/locales/en.ts

@@ -369,6 +369,7 @@ export default {
 	"components.board.action.moveLeft": "Move left",
 	"components.board.action.moveRight": "Move right",
 	"components.board.action.moveUp": "Move up",
+	"components.board.action.changeLayout": "Change layout",
 	"components.board.alert.info.teacher":
 		"This board is visible to all course participants.",
 	"components.board.alert.info.draft":
@@ -432,6 +433,8 @@ export default {
 		"Title of card {cardPosition} in column {columnPosition} was changed to {newTitle} by another user.",
 	"components.board.screenReader.notification.cardUpdated.success":
 		"Card {cardPosition} in column {columnPosition} was updated by another user.",
+	"components.board.screenReader.notification.boardLayoutUpdated.success":
+		"The board's view was changed to {layout} by another user.",
 	"components.board": "board",
 	"components.boardCard": "card",
 	"components.boardColumn": "column",

src/locales/es.ts

@@ -374,6 +374,7 @@ export default {
 	"components.board.action.moveLeft": "Mover a la izquierda",
 	"components.board.action.moveRight": "Mover a la derecha",
 	"components.board.action.moveUp": "Levantar",
+	"components.board.action.changeLayout": "Cambiar vista",
 	"components.board.alert.info.teacher":
 		"Este tablero es visible para todos los participantes en el curso.",
 	"components.board.alert.info.draft":
@@ -441,6 +442,8 @@ export default {
 		"El título de la tarjeta {cardPosition} en la columna {columnPosition} fue cambiado a {newTitle} por otro usuario.",
 	"components.board.screenReader.notification.cardUpdated.success":
 		"La tarjeta {cardPosition} de la columna {columnPosition} ha sido actualizada por otro usuario.",
+	"components.board.screenReader.notification.boardLayoutUpdated.success":
+		"Otro usuario cambió la vista del panel a {layout}.",
 	"components.board": "tablero",
 	"components.boardCard": "tarjeta",
 	"components.boardColumn": "columna",

src/locales/uk.ts

@@ -377,6 +377,7 @@ export default {
 	"components.board.action.moveLeft": "Перемістіться вліво",
 	"components.board.action.moveRight": "Перемістіться праворуч",
 	"components.board.action.moveUp": "Рухатися вгору",
+	"components.board.action.changeLayout": "Змінити вигляд",
 	"components.board.alert.info.teacher": "Цю дошку бачать усі учасники курсу.",
 	"components.board.alert.info.draft": "Ця дошка невидима для учасників курсу.",
 	"components.board.column.defaultTitle": "Нова колонка",
@@ -441,6 +442,8 @@ export default {
 		"Заголовок картки {cardPosition} у колонці {columnPosition} було змінено на {newTitle} іншим користувачем.",
 	"components.board.screenReader.notification.cardUpdated.success":
 		"Картку {cardPosition} у стовпчику {columnPosition} було оновлено іншим користувачем.",
+	"components.board.screenReader.notification.boardLayoutUpdated.success":
+		"Інший користувач змінив вигляд панелі на {layout}.",
 	"components.board": "Дошка",
 	"components.boardCard": "Картка",
 	"components.boardColumn": "Колонка",

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

@@ -1,8 +1,12 @@
 import { applicationErrorModule, envConfigModule } from "@/store";
+import { HttpStatusCode } from "@/store/types/http-status-code.enum";
 import { Board } from "@/types/board/Board";
+import { createApplicationError } from "@/utils/create-application-error.factory";
 import { useSharedEditMode } from "@util-board";
 import { defineStore } from "pinia";
 import { computed, nextTick, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
 import {
 	CreateCardRequestPayload,
 	CreateCardSuccessPayload,
@@ -18,6 +22,8 @@ import {
 	MoveCardSuccessPayload,
 	MoveColumnRequestPayload,
 	MoveColumnSuccessPayload,
+	UpdateBoardLayoutRequestPayload,
+	UpdateBoardLayoutSuccessPayload,
 	UpdateBoardTitleRequestPayload,
 	UpdateBoardTitleSuccessPayload,
 	UpdateBoardVisibilityRequestPayload,
@@ -30,10 +36,6 @@ import { useBoardSocketApi } from "./boardActions/boardSocketApi.composable";
 import { useBoardFocusHandler } from "./BoardFocusHandler.composable";
 import { useCardStore } from "./Card.store";
 import { DeleteCardSuccessPayload } from "./cardActions/cardActionPayload";
-import { createApplicationError } from "@/utils/create-application-error.factory";
-import { HttpStatusCode } from "@/store/types/http-status-code.enum";
-import { useRouter } from "vue-router";
-import { useI18n } from "vue-i18n";
 import { BoardFeature } from "@/serverApi/v3";
 
 export const useBoardStore = defineStore("boardStore", () => {
@@ -225,6 +227,20 @@ export const useBoardStore = defineStore("boardStore", () => {
 		board.value.isVisible = payload.isVisible;
 	};
 
+	const updateBoardLayoutRequest = async (
+		payload: UpdateBoardLayoutRequestPayload
+	): Promise<void> => {
+		await socketOrRest.updateBoardLayoutRequest(payload);
+	};
+
+	const updateBoardLayoutSuccess = (
+		payload: UpdateBoardLayoutSuccessPayload
+	): void => {
+		if (!board.value) return;
+
+		board.value.layout = payload.layout;
+	};
+
 	const moveColumnRequest = async (payload: MoveColumnRequestPayload) => {
 		await socketOrRest.moveColumnRequest({
 			targetBoardId: board.value?.id,
@@ -401,6 +417,8 @@ export const useBoardStore = defineStore("boardStore", () => {
 		updateBoardTitleSuccess,
 		updateBoardVisibilityRequest,
 		updateBoardVisibilitySuccess,
+		updateBoardLayoutRequest,
+		updateBoardLayoutSuccess,
 		fetchBoardRequest,
 		fetchBoardSuccess,
 		reloadBoard,

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

@@ -1,8 +1,10 @@
 import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable";
-import { envConfigModule, applicationErrorModule } from "@/store";
-import EnvConfigModule from "@/store/env-config";
+import { applicationErrorModule, envConfigModule } from "@/store";
 import ApplicationErrorModule from "@/store/application-error";
+import EnvConfigModule from "@/store/env-config";
+import { HttpStatusCode } from "@/store/types/http-status-code.enum";
 import { ColumnMove } from "@/types/board/DragAndDrop";
+import { createApplicationError } from "@/utils/create-application-error.factory";
 import { mockedPiniaStoreTyping } from "@@/tests/test-utils";
 import {
 	boardResponseFactory,
@@ -21,14 +23,14 @@ import {
 } from "@util-board";
 import { createPinia, setActivePinia } from "pinia";
 import { computed, ref } from "vue";
+import { Router, useRoute, useRouter } from "vue-router";
+import { BoardLayout } from "../../../serverApi/v3";
 import { useBoardStore } from "./Board.store";
+import { UpdateBoardLayoutRequestPayload } from "./boardActions/boardActionPayload";
 import { useBoardRestApi } from "./boardActions/boardRestApi.composable";
 import { useBoardSocketApi } from "./boardActions/boardSocketApi.composable";
-import { useCardSocketApi } from "./cardActions/cardSocketApi.composable";
 import { useBoardFocusHandler } from "./BoardFocusHandler.composable";
-import { Router, useRoute, useRouter } from "vue-router";
-import { createApplicationError } from "@/utils/create-application-error.factory";
-import { HttpStatusCode } from "@/store/types/http-status-code.enum";
+import { useCardSocketApi } from "./cardActions/cardSocketApi.composable";
 
 jest.mock("./boardActions/boardSocketApi.composable");
 const mockedUseBoardSocketApi = jest.mocked(useBoardSocketApi);
@@ -622,6 +624,36 @@ describe("BoardStore", () => {
 		});
 	});
 
+	describe("updateBoardLayoutSuccess", () => {
+		describe("when board value is undefined", () => {
+			it("should not update the board layout", () => {
+				const { boardStore } = setup({ createBoard: false });
+
+				boardStore.updateBoardLayoutSuccess({
+					boardId: "boardId",
+					layout: BoardLayout.Columns,
+					isOwnAction: true,
+				});
+
+				expect(boardStore.board).toBe(undefined);
+			});
+		});
+
+		describe("when board is defined", () => {
+			it("should update the board layout", () => {
+				const { boardStore } = setup();
+
+				boardStore.updateBoardLayoutSuccess({
+					boardId: "boardId",
+					layout: BoardLayout.List,
+					isOwnAction: true,
+				});
+
+				expect(boardStore.board?.layout).toStrictEqual(BoardLayout.List);
+			});
+		});
+	});
+
 	describe("moveColumnSuccess", () => {
 		it("should not move a column when board value is undefined", async () => {
 			const { boardStore, firstColumn } = setup({ createBoard: false });
@@ -997,6 +1029,33 @@ describe("BoardStore", () => {
 			});
 		});
 
+		describe("@updateBoardLayoutRequest", () => {
+			const payload: UpdateBoardLayoutRequestPayload = {
+				boardId: "boardId",
+				layout: BoardLayout.Columns,
+			};
+
+			it("should call socketApi.updateBoardLayoutRequest when feature flag is set true", async () => {
+				const { boardStore } = setup({ socketFlag: true });
+
+				await boardStore.updateBoardLayoutRequest(payload);
+
+				expect(
+					mockedSocketApiActions.updateBoardLayoutRequest
+				).toHaveBeenCalledWith(payload);
+			});
+
+			it("should call restApi.updateBoardLayoutRequest when feature flag is set false", async () => {
+				const { boardStore } = setup();
+
+				await boardStore.updateBoardLayoutRequest(payload);
+
+				expect(
+					mockedBoardRestApiActions.updateBoardLayoutRequest
+				).toHaveBeenCalledWith(payload);
+			});
+		});
+
 		describe("@moveColumnRequest", () => {
 			const payload = {
 				columnMove: {

src/modules/data/board/BoardApi.composable.ts

@@ -3,6 +3,7 @@ import {
 	BoardCardApiFactory,
 	BoardColumnApiFactory,
 	BoardElementApiFactory,
+	BoardLayout,
 	BoardResponse,
 	CardResponse,
 	ColumnResponse,
@@ -32,7 +33,7 @@ import { BoardContextType } from "@/types/board/BoardContext";
 import { AnyContentElement } from "@/types/board/ContentElement";
 import { $axios, mapAxiosErrorToResponseError } from "@/utils/api";
 import { createApplicationError } from "@/utils/create-application-error.factory";
-import { AxiosPromise } from "axios";
+import { AxiosPromise, AxiosResponse } from "axios";
 
 export const useBoardApi = () => {
 	const boardApi = BoardApiFactory(undefined, "/v3", $axios);
@@ -302,6 +303,13 @@ export const useBoardApi = () => {
 		return boardApi.boardControllerUpdateVisibility(boardId, { isVisible });
 	};
 
+	const updateBoardLayoutCall = async (
+		boardId: string,
+		layout: BoardLayout
+	): Promise<AxiosResponse<void>> => {
+		return boardApi.boardControllerUpdateLayout(boardId, { layout });
+	};
+
 	return {
 		fetchBoardCall,
 		createColumnCall,
@@ -320,5 +328,6 @@ export const useBoardApi = () => {
 		updateElementCall,
 		createCardCall,
 		getContextInfo,
+		updateBoardLayoutCall,
 	};
 };

src/modules/data/board/BoardApi.composable.unit.ts

@@ -1,6 +1,8 @@
 import {
+	BoardLayout,
 	ContentElementType,
 	ExternalToolElementResponse,
+	LayoutBodyParams,
 } from "@/serverApi/v3";
 import * as serverApi from "@/serverApi/v3/api";
 import { CardResponse, DrawingElementResponse } from "@/serverApi/v3/api";
@@ -557,4 +559,16 @@ describe("BoardApi.composable", () => {
 			);
 		});
 	});
+
+	describe("updateBoardLayoutCall", () => {
+		it("should call boardControllerUpdateLayout api", async () => {
+			const { updateBoardLayoutCall } = useBoardApi();
+
+			await updateBoardLayoutCall("board-id", BoardLayout.List);
+
+			expect(boardApi.boardControllerUpdateLayout).toHaveBeenCalledWith<
+				[string, LayoutBodyParams]
+			>("board-id", { layout: BoardLayout.List });
+		});
+	});
 });

src/modules/data/board/ariaNotification/ariaLiveNotificationHandler.ts

@@ -1,17 +1,19 @@
 import { useAriaLiveNotifier } from "@/composables/ariaLiveNotifier";
+import { BoardLayout } from "@/serverApi/v3";
 import { useI18n } from "vue-i18n";
 import { useBoardStore } from "../Board.store";
-import { useCardStore } from "../Card.store";
 import {
 	CreateCardSuccessPayload,
 	CreateColumnSuccessPayload,
 	DeleteColumnSuccessPayload,
 	MoveCardSuccessPayload,
 	MoveColumnSuccessPayload,
+	UpdateBoardLayoutSuccessPayload,
 	UpdateBoardTitleSuccessPayload,
 	UpdateBoardVisibilitySuccessPayload,
 	UpdateColumnTitleSuccessPayload,
 } from "../boardActions/boardActionPayload";
+import { useCardStore } from "../Card.store";
 
 import {
 	CreateElementSuccessPayload,
@@ -51,6 +53,8 @@ export const SR_I18N_KEYS_MAP = {
 		"components.board.screenReader.notification.cardTitleUpdated.success",
 	CARD_UPDATED_SUCCESS:
 		"components.board.screenReader.notification.cardUpdated.success",
+	BOARD_LAYOUT_UPDATED_SUCCESS:
+		"components.board.screenReader.notification.boardLayoutUpdated.success",
 };
 
 export const useBoardAriaNotification = () => {
@@ -276,6 +280,32 @@ export const useBoardAriaNotification = () => {
 		);
 	};
 
+	const notifyUpdateBoardLayoutSuccess = (
+		action: UpdateBoardLayoutSuccessPayload
+	): void => {
+		const { layout, isOwnAction } = action;
+		if (isOwnAction) return;
+
+		let layoutName: string;
+		switch (layout) {
+			case BoardLayout.Columns:
+				layoutName = t("pages.room.dialog.boardLayout.multiColumn");
+				break;
+			case BoardLayout.List:
+				layoutName = t("pages.room.dialog.boardLayout.singleColumn");
+				break;
+			default:
+				layoutName = t("common.labels.unknown");
+				break;
+		}
+
+		notifyOnScreenReader(
+			t(SR_I18N_KEYS_MAP.BOARD_LAYOUT_UPDATED_SUCCESS, {
+				layout: layoutName,
+			})
+		);
+	};
+
 	return {
 		notifyCreateCardSuccess,
 		notifyCreateColumnSuccess,
@@ -291,5 +321,6 @@ export const useBoardAriaNotification = () => {
 		notifyUpdateElementSuccess,
 		notifyDeleteElementSuccess,
 		notifyMoveElementSuccess,
+		notifyUpdateBoardLayoutSuccess,
 	};
 };