Merge branch 'BC-5444-typing-date' of https://github.com/hpi-schul-cl…

…oud/nuxt-client into BC-5444-typing-date
hpi-schul-cloud · Nov 8, 2023 · 8c90e70 · 8c90e70
2 parents a802817 + 7f9ce36
commit 8c90e70
Show file tree

Hide file tree

Showing 11 changed files with 328 additions and 57 deletions.
diff --git a/src/components/data-board/CardState.composable.ts b/src/components/data-board/CardState.composable.ts
@@ -24,6 +24,7 @@ declare type CardState = {
 
 export const useCardState = (
 	id: BoardCard["id"],
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	emit: (...args: any[]) => void
 ) => {
 	const { handleError, notifyWithTemplate } = useErrorHandler();

diff --git a/src/components/feature-board-link-element/components/LinkContentElement.vue b/src/components/feature-board-link-element/components/LinkContentElement.vue
@@ -66,6 +66,7 @@ export default defineComponent({
 			required: true,
 		},
 		isEditMode: { type: Boolean, required: true },
+		isDetailView: { type: Boolean, required: true },
 	},
 	emits: [
 		"delete:element",

diff --git a/src/components/feature-board/board/Board.vue b/src/components/feature-board/board/Board.vue
@@ -50,9 +50,9 @@
 <script lang="ts">
 import {
 	CardMove,
+	columnDropPlaceholderOptions,
 	ColumnMove,
 	DragAndDropKey,
-	columnDropPlaceholderOptions,
 	horizontalCursorKeys,
 } from "@/types/board/DragAndDrop";
 import { DeviceMediaQuery } from "@/types/enum/device-media-query.enum";
@@ -100,7 +100,6 @@ export default defineComponent({
 		const { showInfo, resetNotifier } = useBoardNotifier();
 		const { editModeId } = useSharedEditMode();
 		const isEditMode = computed(() => editModeId.value !== undefined);
-
 		const {
 			board,
 			createCard,

diff --git a/src/components/feature-board/card/CardHost.vue b/src/components/feature-board/card/CardHost.vue
@@ -1,58 +1,82 @@
 <template>
-	<CardHostInteractionHandler
-		:isEditMode="isEditMode"
-		@start-edit-mode="onStartEditMode"
-		@end-edit-mode="onEndEditMode"
-		@move:card-keyboard="onMoveCardKeyboard"
-	>
-		<VCard
-			ref="cardHost"
-			:height="isLoading ? height : 'auto'"
-			:class="{ 'drag-disabled': isEditMode }"
-			outlined
-			tabindex="0"
-			min-height="120px"
-			:elevation="isEditMode ? 6 : isHovered ? 4 : 2"
-			:id="cardId"
-			:ripple="false"
-			:hover="isHovered"
+	<div>
+		<CardHostInteractionHandler
+			:isEditMode="isEditMode"
+			@start-edit-mode="onStartEditMode"
+			@end-edit-mode="onEndEditMode"
+			@move:card-keyboard="onMoveCardKeyboard"
 		>
-			<template v-if="isLoading">
-				<CardSkeleton :height="height" />
-			</template>
-			<template v-if="!isLoading && card">
-				<CardTitle
-					:isEditMode="isEditMode"
-					:value="card.title"
-					scope="card"
-					@update:value="onUpdateCardTitle"
-					:isFocused="isFocusedById"
-					@enter="addTextAfterTitle"
-				/>
-
-				<div class="board-menu" :class="boardMenuClasses">
-					<BoardMenu v-if="hasDeletePermission" scope="card">
-						<BoardMenuActionEdit v-if="!isEditMode" @click="onStartEditMode" />
-						<BoardMenuActionDelete
-							@click="onDeleteCard"
-							data-test-id="board-menu-action-delete"
-							:name="card.title"
-						/>
-					</BoardMenu>
-				</div>
-
-				<ContentElementList
-					:elements="card.elements"
-					:isEditMode="isEditMode"
-					@delete:element="onDeleteElement"
-					@move-down:element="onMoveContentElementDown"
-					@move-up:element="onMoveContentElementUp"
-					@move-keyboard:element="onMoveContentElementKeyboard"
-				/>
-				<CardAddElementMenu @add-element="onAddElement" v-if="isEditMode" />
-			</template>
-		</VCard>
-	</CardHostInteractionHandler>
+			<VCard
+				ref="cardHost"
+				:height="isLoading ? height : 'auto'"
+				:class="{ 'drag-disabled': isEditMode }"
+				outlined
+				tabindex="0"
+				min-height="120px"
+				:elevation="isEditMode ? 6 : isHovered ? 4 : 2"
+				:id="cardId"
+				:ripple="false"
+				:hover="isHovered"
+			>
+				<template v-if="isLoading">
+					<CardSkeleton :height="height" />
+				</template>
+				<template v-if="!isLoading && card">
+					<CardTitle
+						:isEditMode="isEditMode"
+						:value="card.title"
+						scope="card"
+						@update:value="onUpdateCardTitle"
+						:isFocused="isFocusedById"
+						@enter="addTextAfterTitle"
+					/>
+
+					<div class="board-menu" :class="boardMenuClasses">
+						<BoardMenu v-if="hasDeletePermission" scope="card">
+							<!-- <BoardMenuAction :icon="mdiArrowExpand" @click="onOpenDetailView">
+								{{ $t("components.board.action.detail-view") }}
+							</BoardMenuAction> -->
+							<BoardMenuActionEdit
+								v-if="!isEditMode"
+								@click="onStartEditMode"
+							/>
+							<BoardMenuActionDelete
+								@click="onDeleteCard"
+								data-test-id="board-menu-action-delete"
+								:name="card.title"
+							/>
+						</BoardMenu>
+					</div>
+
+					<ContentElementList
+						:elements="card.elements"
+						:isEditMode="isEditMode"
+						:isDetailView="isDetailView"
+						@delete:element="onDeleteElement"
+						@move-down:element="onMoveContentElementDown"
+						@move-up:element="onMoveContentElementUp"
+						@move-keyboard:element="onMoveContentElementKeyboard"
+					/>
+					<CardAddElementMenu @add-element="onAddElement" v-if="isEditMode" />
+				</template>
+			</VCard>
+		</CardHostInteractionHandler>
+		<!-- Detail View -->
+		<CardHostDetailView
+			v-if="card"
+			:card="card"
+			:isOpen="isDetailView"
+			@delete:element="onDeleteElement"
+			@move-down:element="onMoveContentElementDown"
+			@move-up:element="onMoveContentElementUp"
+			@move-keyboard:element="onMoveContentElementKeyboard"
+			@add:element="onAddElement"
+			@enter:title="addTextAfterTitle"
+			@update:title="onUpdateCardTitle"
+			@close:detail-view="onCloseDetailView"
+			@delete:card="onDeleteCard"
+		/>
+	</div>
 </template>
 
 <script lang="ts">
@@ -85,6 +109,8 @@ import CardHostInteractionHandler from "./CardHostInteractionHandler.vue";
 import CardSkeleton from "./CardSkeleton.vue";
 import CardTitle from "./CardTitle.vue";
 import ContentElementList from "./ContentElementList.vue";
+import CardHostDetailView from "./CardHostDetailView.vue";
+import { mdiArrowExpand } from "@mdi/js";
 
 export default defineComponent({
 	name: "CardHost",
@@ -97,6 +123,7 @@ export default defineComponent({
 		CardAddElementMenu,
 		CardHostInteractionHandler,
 		BoardMenuActionDelete,
+		CardHostDetailView,
 	},
 	props: {
 		height: { type: Number, required: true },
@@ -111,6 +138,7 @@ export default defineComponent({
 			cardHost
 		);
 		const isHovered = useElementHover(cardHost);
+		const isDetailView = ref(false);
 		const {
 			isLoading,
 			card,
@@ -131,9 +159,9 @@ export default defineComponent({
 
 		const { askType } = useAddElementDialog(addElement);
 
-		const onMoveCardKeyboard = (event: KeyboardEvent) => {
+		const onMoveCardKeyboard = (event: KeyboardEvent) =>
 			emit("move:card-keyboard", event.code);
-		};
+
 		const onUpdateCardTitle = useDebounceFn(updateTitle, 300);
 
 		const onDeleteCard = () => emit("delete:card", card.value?.id);
@@ -146,6 +174,9 @@ export default defineComponent({
 
 		const onEndEditMode = () => stopEditMode();
 
+		const onOpenDetailView = () => (isDetailView.value = true);
+		const onCloseDetailView = () => (isDetailView.value = false);
+
 		const onMoveContentElementDown = async (payload: ElementMove) =>
 			await moveElementDown(payload);
 
@@ -203,6 +234,10 @@ export default defineComponent({
 			cardHost,
 			isEditMode,
 			addTextAfterTitle,
+			onOpenDetailView,
+			onCloseDetailView,
+			isDetailView,
+			mdiArrowExpand,
 		};
 	},
 });

diff --git a/src/components/feature-board/card/CardHostDetailView.unit.ts b/src/components/feature-board/card/CardHostDetailView.unit.ts
@@ -0,0 +1,36 @@
+import { BoardCard } from "@/types/board/Card";
+import { I18N_KEY } from "@/utils/inject";
+import {
+	boardCardFactory,
+	fileElementResponseFactory,
+} from "@@/tests/test-utils";
+import createComponentMocks from "@@/tests/test-utils/componentMocks";
+import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
+import Vue from "vue";
+import CardHostDetailView from "./CardHostDetailView.vue";
+
+const CARD_WITH_ELEMENTS: BoardCard = boardCardFactory.build({
+	elements: [fileElementResponseFactory.build()],
+});
+
+describe("CardHostDetailView", () => {
+	let wrapper: Wrapper<Vue>;
+
+	const setup = (props: { card: BoardCard }) => {
+		document.body.setAttribute("data-app", "true");
+		wrapper = shallowMount(CardHostDetailView as MountOptions<Vue>, {
+			...createComponentMocks({}),
+			provide: {
+				[I18N_KEY.valueOf()]: { t: (key: string) => key },
+			},
+			propsData: props,
+		});
+	};
+
+	describe("when component is mounted", () => {
+		it("should be found in dom", () => {
+			setup({ card: CARD_WITH_ELEMENTS });
+			expect(wrapper.findComponent(CardHostDetailView).exists()).toBe(true);
+		});
+	});
+});