BC-4482 - add board link element

.eslintrc.js

@@ -66,7 +66,7 @@ module.exports = {
 					{
 						group: ["@components/page-*", "*/../page-*", "../**/page-*/*"],
 						message:
-							"page-Modules have to be imported using the pattern '@page-<name>'",
+							"Page-Modules have to be imported using the pattern '@page-<name>'",
 					},
 					{
 						group: ["@components/ui-*", "*/../ui-*", "../**/ui-*/*"],

package.json

@@ -15,6 +15,7 @@
 		"generate-client:h5p-editor": "node generate-client.js -u 'http://localhost:4448/api/v3/docs-json/' -p 'src/h5pEditorApi/v3' -c 'openapitools-for-h5p-editor.json'"
 	},
 	"dependencies": {
+		"@braintree/sanitize-url": "^6.0.4",
 		"@ckeditor/ckeditor5-vue2": "^3.0.1",
 		"@hpi-schul-cloud/ckeditor": "0.4.0",
 		"@mdi/js": "^7.2.96",

src/components/data-board/BoardApi.composable.ts

@@ -11,6 +11,7 @@ import {
 	CreateContentElementBodyParams,
 	ExternalToolElementContent,
 	FileElementContent,
+	LinkElementContent,
 	RichTextElementContent,
 	RoomsApiFactory,
 	SubmissionContainerElementContent,
@@ -73,7 +74,7 @@ export const useBoardApi = () => {
 		if (element.type === ContentElementType.RichText) {
 			return {
 				content: element.content as RichTextElementContent,
-				type: ContentElementType.RichText,
+				type: element.type,
 			};
 		}
 
@@ -98,6 +99,13 @@ export const useBoardApi = () => {
 			};
 		}
 
+		if (element.type === ContentElementType.Link) {
+			return {
+				content: element.content as LinkElementContent,
+				type: ContentElementType.Link,
+			};
+		}
+
 		throw new Error("element.type mapping is undefined for updateElementCall");
 	};
 

src/components/data-board/ContentElementState.composable.ts

@@ -1,5 +1,5 @@
 import { watchDebounced } from "@vueuse/core";
-import { ref, toRef, unref } from "vue";
+import { computed, ComputedRef, Ref, ref, toRef, unref } from "vue";
 import { useBoardApi } from "./BoardApi.composable";
 import { AnyContentElement } from "@/types/board/ContentElement";
 import { useErrorHandler } from "@/components/error-handling/ErrorHandler.composable";
@@ -11,28 +11,45 @@ export const useContentElementState = <T extends AnyContentElement>(
 	},
 	options: { autoSaveDebounce?: number } = { autoSaveDebounce: 300 }
 ) => {
-	const { handleError, notifyWithTemplate } = useErrorHandler();
-	const elementRef = toRef(props, "element");
-	const modelValue = ref<T["content"]>(unref<T>(elementRef).content);
+	const _elementRef: Ref<T> = toRef(props, "element");
+	const _responseValue = ref<T>(unref<T>(_elementRef));
 
+	const { handleError, notifyWithTemplate } = useErrorHandler();
 	const { updateElementCall } = useBoardApi();
 
-	watchDebounced(
-		elementRef.value,
-		async (elementRef) => {
-			await updateElement(unref(elementRef));
+	const modelValue = ref<T["content"]>(unref<T>(_elementRef).content);
+
+	const computedElement: ComputedRef<T> = computed(() => ({
+		..._elementRef.value,
+		..._responseValue.value,
+	}));
+
+	const isLoading = ref<boolean>(false);
+
+	watchDebounced<T["content"]>(
+		modelValue.value,
+		async (modelValue) => {
+			await updateElement(modelValue);
 		},
 		{ debounce: options.autoSaveDebounce, maxWait: 2500 }
 	);
 
 	// TODO: refactor this to be properly typed
-	const updateElement = async (element: T) => {
+	const updateElement = async (content: T["content"]) => {
+		isLoading.value = true;
+		const payload = {
+			...computedElement.value,
+			content: { ...content },
+		};
 		try {
-			await updateElementCall(element);
+			const response = await updateElementCall(payload);
+			_responseValue.value = response.data;
 		} catch (error) {
 			handleError(error, {
 				404: notifyWithTemplate("notUpdated", "boardElement"),
 			});
+		} finally {
+			isLoading.value = false;
 		}
 	};
 
@@ -42,5 +59,10 @@ export const useContentElementState = <T extends AnyContentElement>(
 		 * Will be saved automatically after a debounce
 		 */
 		modelValue,
+		/**
+		 * Contains the whole element as it is currently known in the backend
+		 */
+		computedElement,
+		isLoading,
 	};
 };

src/components/error-handling/ErrorHandler.composable.ts

@@ -65,7 +65,7 @@ export const useErrorHandler = () => {
 		if (handlerFunction) {
 			handlerFunction(responseError);
 		} else {
-			console.error(responseError);
+			console.error(error);
 		}
 	};