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

…oud/nuxt-client into BC-5444-typing-date

src/components/feature-board-external-tool-element/ExternalToolElement.unit.ts

@@ -26,10 +26,12 @@ import { useDeleteConfirmationDialog } from "@ui-confirmation-dialog";
 import { MountOptions, shallowMount, Wrapper } from "@vue/test-utils";
 import Vue, { ref } from "vue";
 import ExternalToolElement from "./ExternalToolElement.vue";
+import { useSharedLastCreatedElement } from "@util-board";
 
 jest.mock("@data-board");
 jest.mock("@data-external-tool");
 jest.mock("@ui-confirmation-dialog");
+jest.mock("@util-board");
 
 const EMPTY_TEST_ELEMENT: ExternalToolElementResponse = {
 	id: "external-tool-element-id",
@@ -53,6 +55,9 @@ describe("ExternalToolElement", () => {
 	let useExternalToolLaunchStateMock: DeepMocked<
 		ReturnType<typeof useExternalToolLaunchState>
 	>;
+	let useSharedLastCreatedElementMock: DeepMocked<
+		ReturnType<typeof useSharedLastCreatedElement>
+	>;
 
 	beforeEach(() => {
 		useContentElementStateMock =
@@ -63,6 +68,8 @@ describe("ExternalToolElement", () => {
 			createMock<ReturnType<typeof useExternalToolElementDisplayState>>();
 		useExternalToolLaunchStateMock =
 			createMock<ReturnType<typeof useExternalToolLaunchState>>();
+		useSharedLastCreatedElementMock =
+			createMock<ReturnType<typeof useSharedLastCreatedElement>>();
 
 		jest
 			.mocked(useContentElementState)
@@ -74,6 +81,9 @@ describe("ExternalToolElement", () => {
 		jest
 			.mocked(useExternalToolLaunchState)
 			.mockReturnValue(useExternalToolLaunchStateMock);
+		jest
+			.mocked(useSharedLastCreatedElement)
+			.mockReturnValue(useSharedLastCreatedElementMock);
 	});
 
 	afterEach(() => {
@@ -97,6 +107,7 @@ describe("ExternalToolElement", () => {
 
 		useContentElementStateMock.modelValue = ref(props.element.content);
 		useSharedExternalToolElementDisplayStateMock.displayData = ref(displayData);
+		useSharedLastCreatedElementMock.lastCreatedElementId = ref(undefined);
 
 		const wrapper: Wrapper<Vue> = shallowMount(
 			ExternalToolElement as MountOptions<Vue>,
@@ -114,9 +125,6 @@ describe("ExternalToolElement", () => {
 				provide: {
 					[I18N_KEY.valueOf()]: i18nMock,
 				},
-				stubs: {
-					ExternalToolElementConfigurationDialog: true,
-				},
 			}
 		);
 
@@ -199,6 +207,24 @@ describe("ExternalToolElement", () => {
 		});
 
 		describe("when the element does not have a tool attached", () => {
+			it("should open the configuration dialog immediately", async () => {
+				const { wrapper } = getWrapper({
+					element: EMPTY_TEST_ELEMENT,
+					isEditMode: true,
+				});
+
+				useSharedLastCreatedElementMock.lastCreatedElementId.value =
+					EMPTY_TEST_ELEMENT.id;
+
+				await Vue.nextTick();
+
+				const dialog = wrapper.find(
+					'[data-testid="board-external-tool-element-configuration-dialog"]'
+				);
+
+				expect(dialog.props("isOpen")).toEqual(true);
+			});
+
 			it("should not load the display data", async () => {
 				getWrapper({
 					element: EMPTY_TEST_ELEMENT,

src/components/feature-board-external-tool-element/ExternalToolElement.vue

@@ -73,9 +73,11 @@ import {
 	Ref,
 	ref,
 	toRef,
+	watch,
 } from "vue";
 import ExternalToolElementConfigurationDialog from "./ExternalToolElementConfigurationDialog.vue";
 import ExternalToolElementMenu from "./ExternalToolElementMenu.vue";
+import { useSharedLastCreatedElement } from "@util-board";
 
 export default defineComponent({
 	components: {
@@ -113,6 +115,16 @@ export default defineComponent({
 			autofocus.value = true;
 		});
 
+		const { lastCreatedElementId, resetLastCreatedElementId } =
+			useSharedLastCreatedElement();
+
+		watch(lastCreatedElementId, (newValue) => {
+			if (newValue !== undefined && newValue === props.element.id) {
+				isConfigurationDialogOpen.value = true;
+				resetLastCreatedElementId();
+			}
+		});
+
 		const hasLinkedTool: ComputedRef<boolean> = computed(
 			() => !!modelValue.value.contextExternalToolId
 		);

src/components/feature-board/card/CardHost.vue

@@ -96,12 +96,7 @@ import {
 	BoardMenuActionDelete,
 	BoardMenuActionEdit,
 } from "@ui-board";
-import {
-	useDebounceFn,
-	useElementHover,
-	useElementSize,
-	watchDebounced,
-} from "@vueuse/core";
+import { useDebounceFn, useElementHover, useElementSize } from "@vueuse/core";
 import { computed, defineComponent, ref, toRef } from "vue";
 import { useAddElementDialog } from "../shared/AddElementDialog.composable";
 import CardAddElementMenu from "./CardAddElementMenu.vue";
@@ -111,6 +106,7 @@ import CardTitle from "./CardTitle.vue";
 import ContentElementList from "./ContentElementList.vue";
 import CardHostDetailView from "./CardHostDetailView.vue";
 import { mdiArrowExpand } from "@mdi/js";
+import { delay } from "@/utils/helpers";
 
 export default defineComponent({
 	name: "CardHost",
@@ -172,7 +168,11 @@ export default defineComponent({
 
 		const onStartEditMode = () => startEditMode();
 
-		const onEndEditMode = () => stopEditMode();
+		const onEndEditMode = async () => {
+			stopEditMode();
+			await delay(300);
+			updateCardHeight(cardHostHeight.value);
+		};
 
 		const onOpenDetailView = () => (isDetailView.value = true);
 		const onCloseDetailView = () => (isDetailView.value = false);
@@ -204,15 +204,6 @@ export default defineComponent({
 			return "hidden";
 		});
 
-		watchDebounced(
-			cardHostHeight,
-			(newHeight: number) => updateCardHeight(newHeight),
-			{
-				debounce: 500,
-				maxWait: 2000,
-			}
-		);
-
 		return {
 			boardMenuClasses,
 			isLoading,

src/components/rooms/RoomVideoConferenceCard.vue

@@ -41,7 +41,7 @@
 <script lang="ts">
 import { I18N_KEY, injectStrict } from "@/utils/inject";
 import { mdiReload } from "@mdi/js";
-import { defineComponent, ComputedRef, computed } from "vue";
+import { computed, ComputedRef, defineComponent } from "vue";
 import RoomBaseCard from "./RoomBaseCard.vue";
 
 export default defineComponent({
@@ -122,20 +122,24 @@ $pulseIconColor: #15ba97;
 	box-shadow: 0 0 0 0 $pulseIconColor;
 	transform: scale(1);
 	animation: pulse 1.5s infinite;
-}
 
-@keyframes pulse {
-	0% {
-		transform: scale(0.95);
-		box-shadow: 0 0 0 0 $pulseIconColor;
-	}
-	70% {
-		transform: scale(1);
-		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+	@keyframes pulse {
+		0% {
+			transform: scale(0.95);
+			box-shadow: 0 0 0 0 $pulseIconColor;
+		}
+		70% {
+			transform: scale(1);
+			box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+		}
+		100% {
+			transform: scale(0.95);
+			box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+		}
 	}
-	100% {
-		transform: scale(0.95);
-		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
 	}
 }
 </style>