N21-2358 Link elements display card title for board card links (#3524)

hpi-schul-cloud · Jan 27, 2025 · 320eadb · 320eadb
1 parent 7b47e81
commit 320eadb
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 55 deletions.
diff --git a/src/modules/feature/board-link-element/components/LinkContentElement.unit.ts b/src/modules/feature/board-link-element/components/LinkContentElement.unit.ts
@@ -1,35 +1,37 @@
-import { ENV_CONFIG_MODULE_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
-
-import { linkElementResponseFactory } from "@@/tests/test-utils/factory/linkElementResponseFactory";
-import { useBoardFocusHandler, useContentElementState } from "@data-board";
-import { LinkContentElement } from "@feature-board-link-element";
-import { createMock, DeepMocked } from "@golevelup/ts-jest";
-import { shallowMount } from "@vue/test-utils";
 import {
+	ConfigResponse,
 	LinkElementContent,
-	MetaTagExtractorResponse,
 	LinkElementResponse,
 } from "@/serverApi/v3";
-import { useMetaTagExtractorApi } from "../composables/MetaTagExtractorApi.composable";
-import { computed, nextTick, ref } from "vue";
-import NotifierModule from "@/store/notifier";
-import { createModuleMocks } from "@@/tests/test-utils/mock-store-module";
 import EnvConfigModule from "@/store/env-config";
-import { ConfigResponse } from "@/serverApi/v3/api";
-import LinkContentElementCreate from "./LinkContentElementCreate.vue";
-import LinkContentElementDisplay from "./LinkContentElementDisplay.vue";
+import NotifierModule from "@/store/notifier";
+import { ENV_CONFIG_MODULE_KEY, NOTIFIER_MODULE_KEY } from "@/utils/inject";
 import { linkElementContentFactory } from "@@/tests/test-utils/factory/linkElementContentFactory";
-import { usePreviewGenerator } from "../composables/PreviewGenerator.composable";
+
+import { linkElementResponseFactory } from "@@/tests/test-utils/factory/linkElementResponseFactory";
+import { createModuleMocks } from "@@/tests/test-utils/mock-store-module";
 import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
+import { useBoardFocusHandler, useContentElementState } from "@data-board";
+import { LinkContentElement } from "@feature-board-link-element";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
 import { BoardMenu } from "@ui-board";
 import {
 	KebabMenuActionDelete,
 	KebabMenuActionMoveDown,
 	KebabMenuActionMoveUp,
 } from "@ui-kebab-menu";
+import { shallowMount } from "@vue/test-utils";
+import { computed, nextTick, ref } from "vue";
+import {
+	MetaTagResult,
+	useMetaTagExtractorApi,
+} from "../composables/MetaTagExtractorApi.composable";
+import { usePreviewGenerator } from "../composables/PreviewGenerator.composable";
+import LinkContentElementCreate from "./LinkContentElementCreate.vue";
+import LinkContentElementDisplay from "./LinkContentElementDisplay.vue";
 
 jest.mock("@data-board/ContentElementState.composable");
 
@@ -464,15 +466,12 @@ describe("LinkContentElement", () => {
 							isDetailView: false,
 						});
 						const url = "https://abc.de/my-article";
-						const fakeMetaTags: MetaTagExtractorResponse = {
+						const fakeMetaTags: MetaTagResult = {
 							url,
 							title: "my title",
 							description: "",
 							originalImageUrl: "https://abc.de/foto.png",
 							imageUrl: "https://abc.de/foto.png",
-							type: "unknown",
-							parentTitle: "",
-							parentType: "unknown",
 						};
 
 						useMetaTagExtractorApiMock.getMetaTags.mockResolvedValue(

diff --git a/src/modules/feature/board-link-element/composables/MetaTagExtractorApi.composable.ts b/src/modules/feature/board-link-element/composables/MetaTagExtractorApi.composable.ts
@@ -1,11 +1,13 @@
 import {
+	MetaDataEntityType,
 	MetaTagExtractorApiFactory,
 	MetaTagExtractorResponse,
 } from "@/serverApi/v3";
 import { $axios } from "@/utils/api";
+import { AxiosResponse } from "axios";
 import { useI18n } from "vue-i18n";
 
-type MetaTagResult = {
+export type MetaTagResult = {
 	url: string;
 	title: string;
 	description: string;
@@ -26,41 +28,56 @@ export const useMetaTagExtractorApi = () => {
 			getSuffix(response.type, response.parentTitle),
 		];
 		const title = titleParts.join(" ").trim();
-		return { ...response, title };
+
+		return {
+			...response,
+			title,
+		};
 	};
 
-	const getPrefix = (type: string): string => {
-		const typeToLanguageKeyMap: Record<string, string> = {
-			course: "common.labels.course",
-			lesson: "common.words.topic",
-			task: "common.words.task",
-			board: "components.board",
+	const getPrefix = (type: MetaDataEntityType): string => {
+		const typeToLanguageKeyMap: Partial<Record<MetaDataEntityType, string>> = {
+			[MetaDataEntityType.Course]: "common.labels.course",
+			[MetaDataEntityType.Lesson]: "common.words.topic",
+			[MetaDataEntityType.Task]: "common.words.task",
+			[MetaDataEntityType.Board]: "components.board",
+			[MetaDataEntityType.BoardCard]: "components.boardCard",
 		};
 
-		const prefixKey = typeToLanguageKeyMap[type];
+		const prefixKey: string | undefined = typeToLanguageKeyMap[type];
+
 		return prefixKey ? `${t(prefixKey)}:` : "";
 	};
 
-	const getTitle = (type: string, title: string) => {
-		if (type === "board" && title == "") {
+	const getTitle = (type: MetaDataEntityType, title: string): string => {
+		if (type === MetaDataEntityType.Board && !title) {
 			return t("pages.room.boardCard.label.courseBoard");
 		}
+
 		return title;
 	};
 
-	const getSuffix = (type: string, parentTitle: string): string => {
-		if (type === "board" && parentTitle !== "") {
+	const getSuffix = (
+		type: MetaDataEntityType,
+		parentTitle: string | undefined
+	): string => {
+		if (type === MetaDataEntityType.Board && parentTitle) {
 			return `(${parentTitle})`;
 		}
+
 		return "";
 	};
 
 	const getMetaTags = async (url: string): Promise<MetaTagResult> => {
 		try {
-			const res = await metaTagApi.metaTagExtractorControllerGetMetaTags({
-				url,
-			});
-			return mapMetaTagResponse(res.data);
+			const res: AxiosResponse<MetaTagExtractorResponse> =
+				await metaTagApi.metaTagExtractorControllerGetMetaTags({
+					url,
+				});
+
+			const metaTagResult: MetaTagResult = mapMetaTagResponse(res.data);
+
+			return metaTagResult;
 		} catch (e) {
 			return {
 				url: "",

diff --git a/src/modules/feature/board-link-element/composables/MetaTagExtractorApi.composable.unit.ts b/src/modules/feature/board-link-element/composables/MetaTagExtractorApi.composable.unit.ts
@@ -1,9 +1,12 @@
 import * as serverApi from "@/serverApi/v3/api";
-import { MetaTagExtractorResponse } from "@/serverApi/v3/api";
-import { createMock, DeepMocked } from "@golevelup/ts-jest";
-import { useMetaTagExtractorApi } from "./MetaTagExtractorApi.composable";
+import {
+	MetaDataEntityType,
+	MetaTagExtractorResponse,
+} from "@/serverApi/v3/api";
 import { mockApiResponse, mountComposable } from "@@/tests/test-utils";
 import { createTestingI18n } from "@@/tests/test-utils/setup";
+import { createMock, DeepMocked } from "@golevelup/ts-jest";
+import { useMetaTagExtractorApi } from "./MetaTagExtractorApi.composable";
 
 describe("useMetaTagExtractorApi", () => {
 	let api: DeepMocked<serverApi.MetaTagExtractorApi>;
@@ -28,9 +31,9 @@ describe("useMetaTagExtractorApi", () => {
 						description: "",
 						imageUrl: "",
 						originalImageUrl: "",
-						type: "unknown",
+						type: MetaDataEntityType.Unknown,
 						parentTitle: "",
-						parentType: "unknown",
+						parentType: MetaDataEntityType.Unknown,
 					};
 
 					api.metaTagExtractorControllerGetMetaTags.mockResolvedValue(
@@ -72,9 +75,9 @@ describe("useMetaTagExtractorApi", () => {
 							description: "",
 							imageUrl: "",
 							originalImageUrl: "",
-							type: "board",
+							type: MetaDataEntityType.Board,
 							parentTitle: "English",
-							parentType: "course",
+							parentType: MetaDataEntityType.Course,
 						};
 
 						api.metaTagExtractorControllerGetMetaTags.mockResolvedValue(
@@ -117,9 +120,9 @@ describe("useMetaTagExtractorApi", () => {
 							description: "",
 							imageUrl: "",
 							originalImageUrl: "",
-							type: "board",
+							type: MetaDataEntityType.Board,
 							parentTitle: "English",
-							parentType: "course",
+							parentType: MetaDataEntityType.Course,
 						};
 
 						api.metaTagExtractorControllerGetMetaTags.mockResolvedValue(
@@ -158,9 +161,9 @@ describe("useMetaTagExtractorApi", () => {
 					description: "",
 					imageUrl: "",
 					originalImageUrl: "",
-					type: "unknown",
+					type: MetaDataEntityType.Unknown,
 					parentTitle: "",
-					parentType: "unknown",
+					parentType: MetaDataEntityType.Unknown,
 				};
 
 				api.metaTagExtractorControllerGetMetaTags.mockRejectedValue(false);

diff --git a/src/serverApi/v3/api.ts b/src/serverApi/v3/api.ts
@@ -5612,6 +5612,21 @@ export interface MessageOrigin {
      */
     page: string;
 }
+/**
+ * 
+ * @export
+ * @enum {string}
+ */
+export enum MetaDataEntityType {
+    Unknown = 'unknown',
+    External = 'external',
+    Course = 'course',
+    Board = 'board',
+    BoardCard = 'board-card',
+    Task = 'task',
+    Lesson = 'lesson'
+}
+
 /**
  * 
  * @export
@@ -5641,31 +5656,31 @@ export interface MetaTagExtractorResponse {
      * @type {string}
      * @memberof MetaTagExtractorResponse
      */
-    originalImageUrl: string;
+    originalImageUrl?: string;
     /**
      * 
      * @type {string}
      * @memberof MetaTagExtractorResponse
      */
-    imageUrl: string;
+    imageUrl?: string;
     /**
      * 
-     * @type {string}
+     * @type {MetaDataEntityType}
      * @memberof MetaTagExtractorResponse
      */
-    type: string;
+    type: MetaDataEntityType;
     /**
      * 
      * @type {string}
      * @memberof MetaTagExtractorResponse
      */
-    parentTitle: string;
+    parentTitle?: string;
     /**
      * 
-     * @type {string}
+     * @type {MetaDataEntityType}
      * @memberof MetaTagExtractorResponse
      */
-    parentType: string;
+    parentType?: MetaDataEntityType;
 }
 /**
  *