From 4b3142a991c46f6023d19957ef9a4c43a012629e Mon Sep 17 00:00:00 2001
From: Max Bischof <106820326+bischofmax@users.noreply.github.com>
Date: Thu, 27 Jun 2024 09:47:27 +0200
Subject: [PATCH 1/4] BC-7564 - Disable error overlay (#3301)

---
 webpack-config/dev-server-config.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/webpack-config/dev-server-config.js b/webpack-config/dev-server-config.js
index 32d42afbed..db7973df56 100644
--- a/webpack-config/dev-server-config.js
+++ b/webpack-config/dev-server-config.js
@@ -74,6 +74,9 @@ const createDevServerConfig = () => {
 			return middlewares;
 		},
 		allowedHosts: "all",
+		client: {
+			overlay: false,
+		},
 	};
 
 	return devServerConfig;

From fc7218fc5ccf14d49e55a7c23632229a9233c56b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marvin=20=C3=96hlerking?=
 <103562092+MarvinOehlerkingCap@users.noreply.github.com>
Date: Fri, 28 Jun 2024 10:06:51 +0200
Subject: [PATCH 2/4] N21-2018 Add pagination to the school external tool list
 (#3305)

---
 .../administration/ExternalToolSection.vue    | 35 +++++++++----------
 .../external-tool-section-utils.composable.ts |  8 ++---
 ...rnal-tool-section-utils.composable.unit.ts |  2 +-
 .../administration/SchoolSettings.page.vue    |  4 +--
 4 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/components/administration/ExternalToolSection.vue b/src/components/administration/ExternalToolSection.vue
index edc9ddc5c2..71a2e3e927 100644
--- a/src/components/administration/ExternalToolSection.vue
+++ b/src/components/administration/ExternalToolSection.vue
@@ -5,43 +5,42 @@
 		</p>
 		<v-data-table
 			data-testid="external-tool-section-table"
-			v-if="items.length"
-			:hide-default-footer="true"
 			:items="items"
 			:headers="headers"
 			:loading="isLoading"
 			:loading-text="t('common.loading.text')"
 			:no-data-text="t('common.nodata')"
-			:items-per-page="-1"
 		>
 			<template #[`item.name`]="{ item }">
 				<span>
 					{{ item.name }}
 				</span>
 			</template>
-			<template #[`item.status`]="{ item }">
-				<v-icon
-					v-if="item.isOutdated || item.isDeactivated"
-					color="warning"
-					start
-				>
-					{{ mdiAlert }}
-				</v-icon>
-				<v-icon v-else color="success" start>
-					{{ mdiCheckCircle }}
-				</v-icon>
-				<span>
-					{{ item.statusText }}
-				</span>
+			<template #[`item.statusText`]="{ item }">
+				<div class="text-no-wrap">
+					<v-icon
+						v-if="item.isOutdated || item.isDeactivated"
+						color="warning"
+						start
+					>
+						{{ mdiAlert }}
+					</v-icon>
+					<v-icon v-else color="success" start>
+						{{ mdiCheckCircle }}
+					</v-icon>
+					<span>
+						{{ item.statusText }}
+					</span>
+				</div>
 			</template>
 			<template #[`item.actions`]="{ item }">
 				<external-tool-toolbar
+					class="text-no-wrap"
 					@edit="editTool(item)"
 					@datasheet="showDatasheet(item)"
 					@delete="openDeleteDialog(item)"
 				/>
 			</template>
-			<template #bottom />
 		</v-data-table>
 		<v-btn
 			class="mt-8 mb-4 button-save float-right"
diff --git a/src/components/administration/external-tool-section-utils.composable.ts b/src/components/administration/external-tool-section-utils.composable.ts
index f19c62d4bb..14b4048cfa 100644
--- a/src/components/administration/external-tool-section-utils.composable.ts
+++ b/src/components/administration/external-tool-section-utils.composable.ts
@@ -1,7 +1,7 @@
-import { DataTableHeader } from "@/store/types/data-table-header";
-import { SchoolExternalToolItem } from "./school-external-tool-item";
 import { SchoolExternalTool } from "@/store/external-tool";
 import SchoolExternalToolsModule from "@/store/school-external-tools";
+import { DataTableHeader } from "@/store/types/data-table-header";
+import { SchoolExternalToolItem } from "./school-external-tool-item";
 
 export function useExternalToolsSectionUtils(
 	t: (key: string) => string = () => ""
@@ -16,8 +16,8 @@ export function useExternalToolsSectionUtils(
 			title: t(
 				"components.administration.externalToolsSection.table.header.status"
 			),
-			value: "status",
-			key: "status",
+			value: "statusText",
+			key: "statusText",
 		},
 		{
 			title: "",
diff --git a/src/components/administration/external-tool-section-utils.composable.unit.ts b/src/components/administration/external-tool-section-utils.composable.unit.ts
index 069d474dd4..371edc817a 100644
--- a/src/components/administration/external-tool-section-utils.composable.unit.ts
+++ b/src/components/administration/external-tool-section-utils.composable.unit.ts
@@ -115,7 +115,7 @@ describe("useSchoolExternalToolUtils", () => {
 			expect(headers[0].value).toEqual("name");
 
 			expect(headers[1].title).toEqual(expectedTranslation);
-			expect(headers[1].value).toEqual("status");
+			expect(headers[1].value).toEqual("statusText");
 
 			expect(headers[2].title).toEqual("");
 			expect(headers[2].value).toEqual("actions");
diff --git a/src/pages/administration/SchoolSettings.page.vue b/src/pages/administration/SchoolSettings.page.vue
index 138ad18100..1fff3d1144 100644
--- a/src/pages/administration/SchoolSettings.page.vue
+++ b/src/pages/administration/SchoolSettings.page.vue
@@ -2,7 +2,7 @@
 	<default-wireframe
 		:headline="headline"
 		:breadcrumbs="breadcrumbs"
-		:full-width="false"
+		:full-width="true"
 	>
 		<v-alert
 			v-if="error"
@@ -29,7 +29,7 @@
 				</div>
 			</v-alert>
 
-			<v-expansion-panels multiple class="mb-9" :model-value="openedPanels">
+			<v-expansion-panels multiple class="pb-9" :model-value="openedPanels">
 				<v-expansion-panel data-testid="general-settings-panel" value="general">
 					<v-expansion-panel-title>
 						<div class="text-h4">

From 4af6539c05f190c4e2cc2ddffa13150f190642e4 Mon Sep 17 00:00:00 2001
From: KalliSfak <127407169+KalliSfak@users.noreply.github.com>
Date: Fri, 28 Jun 2024 12:38:49 +0200
Subject: [PATCH 3/4] BC-6837- New Column Board Issues (#3279)

---
 .../board/board/BoardColumnGhostHeader.vue    |  8 ++-
 .../feature/board/board/BoardColumnHeader.vue | 51 ++++++++++---------
 .../feature/board/shared/AddElementDialog.vue |  2 +-
 .../board/shared/BoardAnyTitleInput.unit.ts   | 13 ++++-
 .../board/shared/BoardAnyTitleInput.vue       | 36 +++++++++++--
 src/styles/utility/_body.scss                 |  4 ++
 6 files changed, 80 insertions(+), 34 deletions(-)

diff --git a/src/modules/feature/board/board/BoardColumnGhostHeader.vue b/src/modules/feature/board/board/BoardColumnGhostHeader.vue
index 828a277714..d810c463b7 100644
--- a/src/modules/feature/board/board/BoardColumnGhostHeader.vue
+++ b/src/modules/feature/board/board/BoardColumnGhostHeader.vue
@@ -1,6 +1,8 @@
 <template>
 	<div class="mb-4" ref="headerRef">
-		<div class="d-flex flex-column justify-space-between align-stretch pt-2">
+		<div
+			class="d-flex flex-column justify-space-between align-stretch top-padding-fix"
+		>
 			<VBtn
 				elevation="0"
 				variant="text"
@@ -44,4 +46,8 @@ const onAddColumn = () => {
 .transition-divider {
 	transition: all ease-in 150ms;
 }
+
+.top-padding-fix {
+	padding-top: 19px;
+}
 </style>
diff --git a/src/modules/feature/board/board/BoardColumnHeader.vue b/src/modules/feature/board/board/BoardColumnHeader.vue
index 5011c99174..6d81678f6f 100644
--- a/src/modules/feature/board/board/BoardColumnHeader.vue
+++ b/src/modules/feature/board/board/BoardColumnHeader.vue
@@ -16,31 +16,32 @@
 					class="w-100"
 					:isFocused="isFocusedById"
 					@update:value="onUpdateTitle"
-				/>
-				<BoardMenu
-					v-if="hasDeletePermission"
-					scope="column"
-					:data-testid="`column-menu-btn-${index}`"
 				>
-					<BoardMenuActionEdit v-if="!isEditMode" @click="onStartEditMode" />
-					<BoardMenuActionMoveLeft
-						v-if="!isListBoard"
-						@click="onMoveColumnLeft"
-					/>
-					<BoardMenuActionMoveRight
-						v-if="!isListBoard"
-						@click="onMoveColumnRight"
-					/>
-					<BoardMenuActionMoveColumnUp
-						v-if="isListBoard"
-						@click="onMoveColumnUp"
-					/>
-					<BoardMenuActionMoveColumnDown
-						v-if="isListBoard"
-						@click="onMoveColumnDown"
-					/>
-					<BoardMenuActionDelete :name="title" @click="onDelete" />
-				</BoardMenu>
+					<BoardMenu
+						v-if="hasDeletePermission"
+						scope="column"
+						:data-testid="`column-menu-btn-${index}`"
+					>
+						<BoardMenuActionEdit v-if="!isEditMode" @click="onStartEditMode" />
+						<BoardMenuActionMoveLeft
+							v-if="!isListBoard"
+							@click="onMoveColumnLeft"
+						/>
+						<BoardMenuActionMoveRight
+							v-if="!isListBoard"
+							@click="onMoveColumnRight"
+						/>
+						<BoardMenuActionMoveColumnUp
+							v-if="isListBoard"
+							@click="onMoveColumnUp"
+						/>
+						<BoardMenuActionMoveColumnDown
+							v-if="isListBoard"
+							@click="onMoveColumnDown"
+						/>
+						<BoardMenuActionDelete :name="title" @click="onDelete" />
+					</BoardMenu>
+				</BoardAnyTitleInput>
 			</div>
 			<VDivider aria-hidden="true" class="border-opacity-75" />
 		</div>
@@ -58,8 +59,8 @@ import {
 	BoardMenu,
 	BoardMenuActionDelete,
 	BoardMenuActionEdit,
-	BoardMenuActionMoveColumnUp,
 	BoardMenuActionMoveColumnDown,
+	BoardMenuActionMoveColumnUp,
 	BoardMenuActionMoveLeft,
 	BoardMenuActionMoveRight,
 } from "@ui-board";
diff --git a/src/modules/feature/board/shared/AddElementDialog.vue b/src/modules/feature/board/shared/AddElementDialog.vue
index 79f4697637..23c05fff51 100644
--- a/src/modules/feature/board/shared/AddElementDialog.vue
+++ b/src/modules/feature/board/shared/AddElementDialog.vue
@@ -15,7 +15,7 @@
 
 		<template #content>
 			<div
-				class="d-flex flex-sm-row flex-column flex-wrap align-items-center"
+				class="d-flex flex-sm-row flex-wrap align-items-center"
 				:class="{ 'justify-content-space-between': submissionsEnabled }"
 			>
 				<v-btn
diff --git a/src/modules/feature/board/shared/BoardAnyTitleInput.unit.ts b/src/modules/feature/board/shared/BoardAnyTitleInput.unit.ts
index b79c0e970d..58613ff25f 100644
--- a/src/modules/feature/board/shared/BoardAnyTitleInput.unit.ts
+++ b/src/modules/feature/board/shared/BoardAnyTitleInput.unit.ts
@@ -7,7 +7,7 @@ import {
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
 import { useBoardPermissions } from "@data-board";
-import { mount } from "@vue/test-utils";
+import { VueWrapper, mount } from "@vue/test-utils";
 import BoardAnyTitleInput from "./BoardAnyTitleInput.vue";
 
 jest.mock("./InlineEditInteractionHandler.composable");
@@ -23,7 +23,7 @@ const defaultProps = {
 };
 
 describe("BoardAnyTitleTitleInput", () => {
-	let wrapper: ReturnType<typeof mount>;
+	let wrapper: VueWrapper<any>;
 
 	const setup = (
 		props: {
@@ -146,5 +146,14 @@ describe("BoardAnyTitleTitleInput", () => {
 			const textAreaComponent = wrapper.findComponent({ name: "VTextarea" });
 			expect(textAreaComponent.exists()).toBe(true);
 		});
+
+		it("updates modalValue when prop value changes", async () => {
+			setup({ isEditMode: true, scope: "card" });
+			const newValue = "new title";
+			await wrapper.setProps({ value: newValue });
+			await wrapper.vm.$nextTick();
+
+			expect(wrapper.vm.modelValue).toBe(newValue);
+		});
 	});
 });
diff --git a/src/modules/feature/board/shared/BoardAnyTitleInput.vue b/src/modules/feature/board/shared/BoardAnyTitleInput.vue
index eb874593f5..80d2c58445 100644
--- a/src/modules/feature/board/shared/BoardAnyTitleInput.vue
+++ b/src/modules/feature/board/shared/BoardAnyTitleInput.vue
@@ -16,6 +16,7 @@
 		:autofocus="internalIsFocused"
 		:maxlength="maxLength"
 		@keydown.enter="onEnter"
+		@update:modelValue="onUpdateTitle"
 	/>
 	<VTextarea
 		v-else
@@ -26,7 +27,7 @@
 		:rows="1"
 		auto-grow
 		flat
-		class="mx-n4 mb-n2 mt-n2"
+		class="mx-n4 mb-n3 mt-2"
 		:placeholder="placeholder"
 		bg-color="transparent"
 		ref="titleInput"
@@ -37,11 +38,15 @@
 		:tabindex="isEditMode ? 0 : -1"
 		:autofocus="internalIsFocused"
 		:maxlength="maxLength"
-	/>
+		@update:modelValue="onUpdateTitle"
+	>
+		<template v-slot:append-inner>
+			<slot />
+		</template>
+	</VTextarea>
 </template>
 
 <script lang="ts">
-import { useVModel } from "@vueuse/core";
 import {
 	computed,
 	defineComponent,
@@ -84,8 +89,9 @@ export default defineComponent({
 	},
 	emits: ["update:value", "enter"],
 	setup(props, { emit }) {
-		const modelValue = useVModel(props, "value", emit);
-
+		// This component needs to handle the title value in a local state (modelValue) to calculate the height of the textarea immediately
+		// eslint-disable-next-line vue/no-setup-props-reactivity-loss
+		const modelValue = ref(props.value);
 		const internalIsFocused = ref(false);
 
 		const titleInput = ref<typeof VTextarea | null>(null);
@@ -102,10 +108,23 @@ export default defineComponent({
 			}
 		};
 
+		const onUpdateTitle = (newTitle: string) => {
+			emit("update:value", newTitle);
+		};
+
 		onMounted(() => {
 			if (props.isFocused && props.isEditMode) setFocusOnEdit();
 		});
 
+		watch(
+			() => props.value,
+			async (newVal, oldVal) => {
+				if (newVal !== oldVal) {
+					modelValue.value = newVal;
+				}
+			}
+		);
+
 		watch(
 			() => props.isEditMode,
 			async (newVal, oldVal) => {
@@ -151,6 +170,7 @@ export default defineComponent({
 			onEnter,
 			internalIsFocused,
 			titleInput,
+			onUpdateTitle,
 		};
 	},
 });
@@ -166,6 +186,7 @@ export default defineComponent({
 	background: transparent !important;
 	opacity: 1;
 	font-size: var(--heading-5) !important;
+	overflow: hidden;
 }
 
 :deep(textarea[readonly]) {
@@ -184,4 +205,9 @@ export default defineComponent({
 :deep(input)::placeholder {
 	opacity: 1;
 }
+:deep(.v-field__append-inner, .v-field__clearable, .v-field__prepend-inner) {
+	display: flex;
+	align-items: flex-start;
+	padding-top: 8px !important;
+}
 </style>
diff --git a/src/styles/utility/_body.scss b/src/styles/utility/_body.scss
index 0f3cd0e1c3..5a9fdced54 100644
--- a/src/styles/utility/_body.scss
+++ b/src/styles/utility/_body.scss
@@ -9,6 +9,10 @@ body.is-noscroll {
 	display: flex;
 }
 
+textarea.v-field__input {
+	height: var(--text-base-size);
+}
+
 .justify-content-space-between {
 	justify-content: space-between;
 }

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 4/4] 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,