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.

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;

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 (

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"] }
 			);
 		});
 	});

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,