From 32733711aa6e3cb0cf6189107f0ac6a1dcb88cf5 Mon Sep 17 00:00:00 2001
From: hoeppner-dataport <106819770+hoeppner-dataport@users.noreply.github.com>
Date: Fri, 28 Jun 2024 13:21:27 +0200
Subject: [PATCH] BC-7583 - fix bugs in socket implementation (#3306)

Fixing two bugs that were introduced with the implementation of websocket-communication for boards.
1: When a new card gets created by clicking on the corresponding button, it gets created without an empty text field element.
2: When the user hits enter key while being in a card title, a new text field element should be created at the beginning of the card and the cursor should jump into it.
---
 .../data/board/boardActions/boardActionPayload.ts      |  8 +++++++-
 .../board/boardActions/boardSocketApi.composable.ts    |  8 +++++++-
 .../boardActions/boardSocketApi.composable.unit.ts     |  2 +-
 src/modules/feature/board/card/CardHost.vue            | 10 +++++++---
 4 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/src/modules/data/board/boardActions/boardActionPayload.ts b/src/modules/data/board/boardActions/boardActionPayload.ts
index bc5a442f80..e56a553ddc 100644
--- a/src/modules/data/board/boardActions/boardActionPayload.ts
+++ b/src/modules/data/board/boardActions/boardActionPayload.ts
@@ -1,8 +1,14 @@
-import { BoardResponse, CardResponse, ColumnResponse } from "@/serverApi/v3";
+import {
+	BoardResponse,
+	CardResponse,
+	ColumnResponse,
+	CreateCardBodyParamsRequiredEmptyElementsEnum,
+} from "@/serverApi/v3";
 import { ColumnMove } from "@/types/board/DragAndDrop";
 
 export type CreateCardRequestPayload = {
 	columnId: string;
+	requiredEmptyElements?: CreateCardBodyParamsRequiredEmptyElementsEnum[];
 };
 export type CreateCardSuccessPayload = {
 	newCard: CardResponse;
diff --git a/src/modules/data/board/boardActions/boardSocketApi.composable.ts b/src/modules/data/board/boardActions/boardSocketApi.composable.ts
index 1547f25a66..16eac25a8a 100644
--- a/src/modules/data/board/boardActions/boardSocketApi.composable.ts
+++ b/src/modules/data/board/boardActions/boardSocketApi.composable.ts
@@ -17,6 +17,7 @@ import {
 import { PermittedStoreActions, handle, on } from "@/types/board/ActionFactory";
 import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable";
 import { useBoardAriaNotification } from "../ariaNotification/ariaLiveNotificationHandler";
+import { CreateCardBodyParamsRequiredEmptyElementsEnum } from "@/serverApi/v3";
 
 export const useBoardSocketApi = () => {
 	const boardStore = useBoardStore();
@@ -102,7 +103,12 @@ export const useBoardSocketApi = () => {
 		useSocketConnection(dispatch);
 
 	const createCardRequest = async (payload: CreateCardRequestPayload) => {
-		emitOnSocket("create-card-request", payload);
+		emitOnSocket("create-card-request", {
+			...payload,
+			requiredEmptyElements: [
+				CreateCardBodyParamsRequiredEmptyElementsEnum.RichText,
+			],
+		});
 	};
 
 	const fetchBoardRequest = async (
diff --git a/src/modules/data/board/boardActions/boardSocketApi.composable.unit.ts b/src/modules/data/board/boardActions/boardSocketApi.composable.unit.ts
index 29b00b914b..dfa5d562e1 100644
--- a/src/modules/data/board/boardActions/boardSocketApi.composable.unit.ts
+++ b/src/modules/data/board/boardActions/boardSocketApi.composable.unit.ts
@@ -405,7 +405,7 @@ describe("useBoardSocketApi", () => {
 
 			expect(mockedSocketConnectionHandler.emitOnSocket).toHaveBeenCalledWith(
 				"create-card-request",
-				{ columnId: "test" }
+				{ columnId: "test", requiredEmptyElements: ["richText"] }
 			);
 		});
 	});
diff --git a/src/modules/feature/board/card/CardHost.vue b/src/modules/feature/board/card/CardHost.vue
index 3fd987e5cd..1eb6ffdc65 100644
--- a/src/modules/feature/board/card/CardHost.vue
+++ b/src/modules/feature/board/card/CardHost.vue
@@ -29,7 +29,7 @@
 						scope="card"
 						@update:value="onUpdateCardTitle($event, cardId)"
 						:isFocused="isFocusedById"
-						@enter="addTextAfterTitle"
+						@enter="onEnter"
 					/>
 
 					<div class="board-menu" :class="boardMenuClasses">
@@ -69,7 +69,7 @@
 			@move-up:element="onMoveContentElementUp"
 			@move-keyboard:element="onMoveContentElementKeyboard"
 			@add:element="onAddElement"
-			@enter:title="addTextAfterTitle"
+			@enter:title="onEnter"
 			@update:title="onUpdateCardTitle"
 			@close:detail-view="onCloseDetailView"
 			@delete:card="onDeleteCard"
@@ -215,6 +215,10 @@ export default defineComponent({
 			);
 		};
 
+		const onEnter = () => {
+			cardStore.addTextAfterTitle(props.cardId);
+		};
+
 		const boardMenuClasses = computed(() => {
 			if (isFocusContained.value === true || isHovered.value === true) {
 				return "";
@@ -245,7 +249,7 @@ export default defineComponent({
 			onMoveContentElementKeyboard,
 			cardHost,
 			isEditMode,
-			addTextAfterTitle: cardStore.addTextAfterTitle,
+			onEnter,
 			onOpenDetailView,
 			onCloseDetailView,
 			isDetailView,