Merge branch 'BC-6930-layout-finish' of https://github.com/hpi-schul-…

…cloud/nuxt-client into BC-6930-layout-finish

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"

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: "",

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

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/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>

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";

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,

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

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);
+		});
 	});
 });