Connect TerminFinder via iframe

src/modules/feature/board-appointment-finder-element/AppointmentFinderElement.vue

@@ -14,18 +14,11 @@
 		@keydown.stop
 	>
 		<ContentElementBar :hasGreyBackground="true">
-			<template #display v-if="element.content.appointmentFinderId">
+			<template #display>
 				<v-img :src="image" alt="" cover class="rounded-t" />
 			</template>
-			<template #logo v-if="!element.content.appointmentFinderId">
-				<v-icon>{{ mdiCalendarCheck }}</v-icon>
-			</template>
 			<template #title>
-				{{
-					element.content.appointmentFinderId
-						? t("components.cardElement.appointmentFinderElement")
-						: t("components.cardElement.appointmentFinderElement.createFinder")
-				}}
+				{{ t("components.cardElement.appointmentFinderElement") }}
 			</template>
 			<template #menu>
 				<AppointmentFinderElementMenu
@@ -44,7 +37,6 @@
 import image from "@/assets/img/appointmentFinder.png";
 import { AppointmentFinderElementResponse } from "@/serverApi/v3";
 import { useBoardFocusHandler } from "@data-board";
-import { mdiCalendarCheck } from "@icons/material";
 import { ContentElementBar } from "@ui-board";
 import { computed, PropType, ref, toRef } from "vue";
 import { useI18n } from "vue-i18n";
@@ -63,7 +55,6 @@ const emit = defineEmits([
 	"move-down:edit",
 	"move-up:edit",
 	"move-keyboard:edit",
-	"update-element",
 ]);
 
 const { t } = useI18n();

src/modules/feature/board/card/ContentElementList.vue

@@ -84,7 +84,6 @@
 					@move-down:edit="onMoveElementDown(index, element)"
 					@move-up:edit="onMoveElementUp(index, element)"
 					@delete:element="onDeleteElement"
-					@update-element="onUpdateElement"
 				/>
 				<DeletedElement
 					v-else-if="isDeletedElementResponse(element)"
@@ -150,9 +149,6 @@ const emit = defineEmits<{
 
 const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
 
-const onUpdateElement = (element: AnyContentElement) => {
-	emit("update:element", element);
-};
 const onDeleteElement = (elementId: string) => {
 	emit("delete:element", elementId);
 };

src/modules/feature/board/shared/AddElementDialog.composable.ts

@@ -1,15 +1,21 @@
 import { CreateElementRequestPayload } from "@/modules/data/board/cardActions/cardActionPayload";
-import { ContentElementType } from "@/serverApi/v3";
+import {
+	BoardCardApiFactory,
+	BoardElementApiFactory,
+	ContentElementType,
+} from "@/serverApi/v3";
+import { $axios } from "@/utils/api";
 import { ENV_CONFIG_MODULE_KEY, injectStrict } from "@/utils/inject";
+import { useCardStore } from "@data-board";
 import {
+	mdiCalendarCheck,
 	mdiFormatText,
 	mdiLightbulbOnOutline,
 	mdiLink,
 	mdiPresentation,
 	mdiPuzzleOutline,
 	mdiTextBoxEditOutline,
 	mdiTrayArrowUp,
-	mdiCalendarCheck,
 } from "@icons/material";
 import { useBoardNotifier } from "@util-board";
 import { useI18n } from "vue-i18n";
@@ -21,12 +27,20 @@ export const useAddElementDialog = (
 	createElementRequestFn: CreateElementRequestFn,
 	cardId: string
 ) => {
+	const cardsApi = BoardCardApiFactory(undefined, "/v3", $axios);
+	const elementApi = BoardElementApiFactory(undefined, "/v3", $axios);
+	const { createElementSuccess } = useCardStore();
+
 	const envConfigModule = injectStrict(ENV_CONFIG_MODULE_KEY);
 	const { showCustomNotifier } = useBoardNotifier();
 	const { t } = useI18n();
 
-	const { isDialogOpen, closeDialog, elementTypeOptions } =
-		useSharedElementTypeSelection();
+	const {
+		isDialogOpen,
+		closeDialog,
+		elementTypeOptions,
+		isAppointmentFinderDialogOpen,
+	} = useSharedElementTypeSelection();
 
 	const onElementClick = async (elementType: ContentElementType) => {
 		closeDialog();
@@ -35,6 +49,41 @@ export const useAddElementDialog = (
 		showNotificationByElementType(elementType);
 	};
 
+	// must be async atm because of type defs
+	const onAppointmentFinderClick = async () => {
+		closeDialog();
+		isAppointmentFinderDialogOpen.value = true;
+
+		const createAppointFinderElement = async (event: MessageEvent) => {
+			const {
+				data: { appointmentId, adminId },
+			} = event;
+			isAppointmentFinderDialogOpen.value = false;
+			const { data: element } = await cardsApi.cardControllerCreateElement(
+				cardId,
+				{
+					type: ContentElementType.AppointmentFinder,
+				}
+			);
+			const { data: updatedElement } =
+				await elementApi.elementControllerUpdateElement(element.id, {
+					data: {
+						type: ContentElementType.AppointmentFinder,
+						content: { appointmentFinderId: appointmentId, adminId },
+					},
+				});
+			createElementSuccess({
+				cardId,
+				type: ContentElementType.AppointmentFinder,
+				newElement: updatedElement,
+				isOwnAction: true,
+			});
+			window.removeEventListener("message", createAppointFinderElement);
+		};
+
+		window.addEventListener("message", createAppointFinderElement);
+	};
+
 	const showNotificationByElementType = (elementType: ContentElementType) => {
 		const translationKeyCollaborativeTextEditor =
 			"components.cardElement.collaborativeTextEditorElement.alert.info.visible";
@@ -72,7 +121,7 @@ export const useAddElementDialog = (
 		icon: mdiCalendarCheck,
 		label:
 			"components.elementTypeSelection.elements.appointmentFinderElement.subtitle",
-		action: () => onElementClick(ContentElementType.AppointmentFinder),
+		action: () => onAppointmentFinderClick(),
 		testId: "create-element-appointment-finder",
 	});
 

src/modules/feature/board/shared/AddElementDialog.vue

@@ -31,15 +31,27 @@
 			</VCardActions>
 		</VCard>
 	</VDialog>
+	<VDialog v-model="isAppointmentFinderDialogOpen">
+		<VCard class="appointmentFinderDialog">
+			<iframe
+				src="http://localhost:4200/#/home"
+				class="appointmentFinderIframe"
+			/>
+		</VCard>
+	</VDialog>
 </template>
 
 <script setup lang="ts">
 import { computed, ComputedRef } from "vue";
 import { useSharedElementTypeSelection } from "./SharedElementTypeSelection.composable";
 import { ExtendedIconBtn } from "@ui-extended-icon-btn";
 
-const { isDialogOpen, closeDialog, elementTypeOptions } =
-	useSharedElementTypeSelection();
+const {
+	isDialogOpen,
+	closeDialog,
+	elementTypeOptions,
+	isAppointmentFinderDialogOpen,
+} = useSharedElementTypeSelection();
 
 const dialogWidth: ComputedRef<number> = computed(() =>
 	elementTypeOptions.value.length >= 3 ? 426 : 320
@@ -55,4 +67,13 @@ const dialogWidth: ComputedRef<number> = computed(() =>
 .button-max-width {
 	max-width: 100px;
 }
+
+.appointmentFinderDialog {
+	height: 90vh;
+}
+
+.appointmentFinderIframe {
+	width: 100%;
+	height: 100%;
+}
 </style>

src/modules/feature/board/shared/SharedElementTypeSelection.composable.ts

@@ -11,6 +11,7 @@ interface ElementTypeSelectionOptions {
 export const useSharedElementTypeSelection = createSharedComposable(() => {
 	const isDialogOpen = ref<boolean>(false);
 	const elementTypeOptions = ref<Array<ElementTypeSelectionOptions>>([]);
+	const isAppointmentFinderDialogOpen = ref<boolean>(false);
 
 	const closeDialog = () => {
 		isDialogOpen.value = false;
@@ -20,5 +21,6 @@ export const useSharedElementTypeSelection = createSharedComposable(() => {
 		isDialogOpen,
 		closeDialog,
 		elementTypeOptions,
+		isAppointmentFinderDialogOpen,
 	};
 });