Merge branch 'main' into BC-6930-layout-finish

src/components/administration/ProvisioningOptionsPage.vue

@@ -2,7 +2,7 @@
 	<default-wireframe
 		:headline="t('components.administration.provisioningOptions.page.title')"
 		:breadcrumbs="breadcrumbs"
-		:full-width="false"
+		max-width="short"
 	>
 		<v-checkbox
 			:label="t('components.administration.provisioningOptions.class.label')"

src/components/templates/DefaultWireframe.unit.ts

@@ -1,13 +1,13 @@
-import { ComponentMountingOptions, mount } from "@vue/test-utils";
-import DefaultWireframe from "../templates/DefaultWireframe.vue";
+import { ConfigResponse } from "@/serverApi/v3";
+import EnvConfigModule from "@/store/env-config";
+import { ENV_CONFIG_MODULE_KEY } from "@/utils/inject";
+import { createModuleMocks } from "@/utils/mock-store-module";
 import {
 	createTestingI18n,
 	createTestingVuetify,
 } from "@@/tests/test-utils/setup";
-import { ENV_CONFIG_MODULE_KEY } from "@/utils/inject";
-import { createModuleMocks } from "@/utils/mock-store-module";
-import EnvConfigModule from "@/store/env-config";
-import { ConfigResponse } from "@/serverApi/v3";
+import { ComponentMountingOptions, mount } from "@vue/test-utils";
+import DefaultWireframe from "../templates/DefaultWireframe.vue";
 
 describe("DefaultWireframe", () => {
 	const setup = (
@@ -32,7 +32,7 @@ describe("DefaultWireframe", () => {
 
 	it("shows title", () => {
 		const wrapper = setup({
-			props: { fullWidth: true, headline: "dummy title" },
+			props: { maxWidth: "full", headline: "dummy title" },
 		});
 
 		const h1 = wrapper.find("h1");
@@ -67,27 +67,37 @@ describe("DefaultWireframe", () => {
 
 	it("has full width", () => {
 		const wrapper = setup({
-			props: { fullWidth: true, headline: "dummy title" },
+			props: { maxWidth: "full", headline: "dummy title" },
 		});
 
 		const contentWrapper = wrapper.find(".main-content");
 		expect(contentWrapper.classes("container-full-width")).toBeTruthy();
-		expect(contentWrapper.classes("container-max-width")).toBeFalsy();
+		expect(contentWrapper.classes("container-short-width")).toBeFalsy();
 	});
 
 	it("has small width", () => {
 		const wrapper = setup({
-			props: { headline: "dummy title" },
+			props: { maxWidth: "short", headline: "dummy title" },
+		});
+
+		const contentWrapper = wrapper.find(".main-content");
+		expect(contentWrapper.classes("container-full-width")).toBeFalsy();
+		expect(contentWrapper.classes("container-short-width")).toBeTruthy();
+	});
+
+	it("has nativ width", () => {
+		const wrapper = setup({
+			props: { maxWidth: "nativ", headline: "dummy title" },
 		});
 
 		const contentWrapper = wrapper.find(".main-content");
 		expect(contentWrapper.classes("container-full-width")).toBeFalsy();
-		expect(contentWrapper.classes("container-max-width")).toBeTruthy();
+		expect(contentWrapper.classes("container-short-width")).toBeFalsy();
 	});
 
 	it("displays content in slot", () => {
 		const wrapper = setup({
-			props: { fullWidth: true, headline: "dummy title" },
+			props: { maxWidth: "full", headline: "dummy title" },
 			slots: {
 				default: ["<p>some stuff</p>", "text"],
 			},

src/components/templates/DefaultWireframe.vue

@@ -59,11 +59,11 @@
 			<div v-if="showBorder" class="border" />
 		</div>
 		<v-container
-			fluid
+			:fluid="maxWidth !== 'nativ'"
 			class="main-content"
 			:class="{
-				'container-max-width': !fullWidth,
-				'container-full-width': fullWidth,
+				'container-short-width': maxWidth === 'short',
+				'container-full-width': maxWidth === 'full',
 				'overflow-x-auto': allowOverflowX,
 			}"
 		>
@@ -73,12 +73,12 @@
 </template>
 
 <script setup lang="ts">
-import vCustomBreadcrumbs from "@/components/atoms/vCustomBreadcrumbs.vue";
+import VCustomBreadcrumbs from "@/components/atoms/vCustomBreadcrumbs.vue";
+import EnvConfigModule from "@/store/env-config";
 import { SpeedDialMenu, SpeedDialMenuAction } from "@ui-speed-dial-menu";
 import { useVuetifyBreakpoints } from "@util-device-detection";
-import { PropType, computed, useSlots } from "vue";
+import { computed, PropType, useSlots } from "vue";
 import { Fab } from "./default-wireframe.types";
-import EnvConfigModule from "@/store/env-config";
 
 const props = defineProps({
 	breadcrumbs: {
@@ -91,8 +91,8 @@ const props = defineProps({
 		required: false,
 		default: null,
 	},
-	fullWidth: {
-		type: Boolean,
+	maxWidth: {
+		type: String as PropType<"full" | "short" | "nativ">,
 	},
 	fabItems: {
 		type: Object as PropType<Fab>,
@@ -160,7 +160,7 @@ const showBorder = computed(() => {
 	padding: 0 var(--space-lg);
 }
 
-.container-max-width {
+.container-short-width {
 	max-width: var(--size-content-width-max);
 }
 

src/components/templates/RoomWrapper.vue

@@ -1,7 +1,7 @@
 <template>
 	<DefaultWireframe
 		ref="main"
-		:full-width="false"
+		max-width="short"
 		:fab-items="fabItems"
 		:env-config-module="envConfigModule"
 		@onFabItemClick="fabItemClickHandler"

src/components/templates/TasksDashboardMain.vue

@@ -1,7 +1,7 @@
 <template>
 	<default-wireframe
 		:headline="$t('common.words.tasks')"
-		:full-width="false"
+		max-width="short"
 		:fab-items="fabItems"
 	>
 		<template #header>
@@ -101,12 +101,12 @@ import { authModule } from "@/store";
 import { ImportUserResponseRoleNamesEnum as Roles } from "@/serverApi/v3";
 import CopyResultModal from "@/components/copy-result-modal/CopyResultModal";
 import {
-	mdiPlus,
-	mdiFormatListChecks,
 	mdiArchiveOutline,
+	mdiCheck,
 	mdiCheckCircleOutline,
+	mdiFormatListChecks,
 	mdiPlaylistEdit,
-	mdiCheck,
+	mdiPlus,
 } from "@mdi/js";
 
 import TasksDashboardStudent from "./TasksDashboardStudent";

src/modules/feature/board-file-element/content/inputs/FileInputs.vue

@@ -2,11 +2,13 @@
 	<div v-if="isEditMode" class="px-4 pt-4">
 		<CaptionText
 			:caption="fileProperties.element.content.caption"
+			:isEditMode="isEditMode"
 			@update:caption="onUpdateCaption"
 		/>
 		<AlternativeText
 			v-if="fileProperties.previewUrl && !hasPdfMimeType"
 			:alternativeText="fileProperties.element.content.alternativeText"
+			:isEditMode="isEditMode"
 			@update:alternativeText="onUpdateText"
 		/>
 	</div>

src/modules/feature/board-file-element/content/inputs/alternative-text/AlternativeText.unit.ts

@@ -54,15 +54,6 @@ describe("AlternativeText", () => {
 		expect(wrapper.emitted("update:alternativeText")?.[0][0]).toBe(newText);
 	});
 
-	it("should pass text value to textarea", async () => {
-		const { wrapper, alternativeText } = shallowMountSetup();
-
-		const textarea = wrapper.find("v-textarea-stub");
-		const hint = textarea.attributes("modelvalue");
-
-		expect(hint).toBe(alternativeText);
-	});
-
 	it("should have a hint translation", async () => {
 		const { wrapper } = shallowMountSetup();
 

src/modules/feature/board-file-element/content/inputs/alternative-text/AlternativeText.vue

@@ -11,8 +11,7 @@
 </template>
 
 <script lang="ts">
-import { useVModel } from "@vueuse/core";
-import { defineComponent } from "vue";
+import { defineComponent, onMounted, ref, watch } from "vue";
 
 export default defineComponent({
 	name: "AlternativeText",
@@ -21,10 +20,23 @@ export default defineComponent({
 			type: String,
 			required: false,
 		},
+		isEditMode: { type: Boolean, required: true },
 	},
 	emits: ["update:alternativeText"],
 	setup(props, { emit }) {
-		const modelValue = useVModel(props, "alternativeText", emit);
+		const modelValue = ref("");
+
+		onMounted(() => {
+			if (props.alternativeText !== undefined) {
+				modelValue.value = props.alternativeText;
+			}
+		});
+
+		watch(modelValue, (newValue) => {
+			if (newValue !== props.alternativeText) {
+				emit("update:alternativeText", newValue);
+			}
+		});
 
 		return {
 			modelValue,

src/modules/feature/board-file-element/content/inputs/caption/CaptionText.unit.ts

@@ -17,6 +17,7 @@ describe("CaptionText", () => {
 
 		return {
 			wrapper,
+			caption,
 		};
 	};
 
@@ -56,15 +57,6 @@ describe("CaptionText", () => {
 		expect(wrapper.emitted("update:caption")?.[0][0]).toBe(newText);
 	});
 
-	it("should pass caption value to textarea", () => {
-		const { wrapper, caption } = shallowMountSetup();
-
-		const textarea = wrapper.find("v-textarea-stub");
-		const hint = textarea.attributes("modelvalue");
-
-		expect(hint).toBe(caption);
-	});
-
 	it("should have a label translation", () => {
 		const { wrapper } = shallowMountSetup();
 

src/modules/feature/board-file-element/content/inputs/caption/CaptionText.vue

@@ -10,8 +10,7 @@
 </template>
 
 <script lang="ts">
-import { useVModel } from "@vueuse/core";
-import { defineComponent } from "vue";
+import { defineComponent, onMounted, ref, watch } from "vue";
 
 export default defineComponent({
 	name: "CaptionText",
@@ -20,10 +19,23 @@ export default defineComponent({
 			type: String,
 			required: false,
 		},
+		isEditMode: { type: Boolean, required: true },
 	},
 	emits: ["update:caption"],
 	setup(props, { emit }) {
-		const modelValue = useVModel(props, "caption", emit);
+		const modelValue = ref("");
+
+		onMounted(() => {
+			if (props.caption !== undefined) {
+				modelValue.value = props.caption;
+			}
+		});
+
+		watch(modelValue, (newValue) => {
+			if (newValue !== props.caption) {
+				emit("update:caption", newValue);
+			}
+		});
 
 		return { modelValue };
 	},

src/modules/feature/board-text-element/RichTextContentElement.vue

@@ -3,7 +3,7 @@
 		<RichTextContentElementDisplay
 			v-if="!isEditMode"
 			class="rich_text"
-			:value="element.content.text"
+			:value="modelValue.text"
 		/>
 		<RichTextContentElementEdit
 			v-if="isEditMode"

src/modules/feature/board-text-element/RichTextContentElementEdit.unit.ts

@@ -1,4 +1,5 @@
 import { mount } from "@vue/test-utils";
+import { nextTick } from "vue";
 import RichTextContentElementEdit from "./RichTextContentElementEdit.vue";
 import {
 	createTestingI18n,
@@ -29,6 +30,7 @@ describe("RichTextContentElementEdit", () => {
 		it("should pass props to ck-editor component", async () => {
 			const { wrapper } = setup({ value: "test value", autofocus: true });
 			const ckEditorComponent = wrapper.findComponent({ name: "ck-editor" });
+			await nextTick();
 			const ckEditorValue = ckEditorComponent.findComponent({
 				name: "ckeditor",
 			}).vm.modelValue;
@@ -43,5 +45,15 @@ describe("RichTextContentElementEdit", () => {
 			const emitted = wrapper.emitted();
 			expect(emitted["delete:element"]).toHaveLength(1);
 		});
+
+		it("should update modalValue when prop value changes", async () => {
+			const { wrapper } = setup({ value: "test value", autofocus: true });
+			const newValue = "new title";
+			await wrapper.setProps({ value: newValue });
+			await nextTick();
+
+			const emitted = wrapper.emitted();
+			expect(emitted["update:value"]).toHaveLength(1);
+		});
 	});
 });

src/modules/feature/board-text-element/RichTextContentElementEdit.vue

@@ -15,8 +15,8 @@
 </template>
 <script lang="ts">
 import { CkEditor } from "@feature-editor";
-import { useEventListener, useVModel } from "@vueuse/core";
-import { defineComponent } from "vue";
+import { useEventListener } from "@vueuse/core";
+import { defineComponent, onMounted, ref, watch } from "vue";
 
 export default defineComponent({
 	name: "RichTextContentElementEdit",
@@ -33,7 +33,20 @@ export default defineComponent({
 	},
 	emits: ["update:value", "delete:element", "blur"],
 	setup(props, { emit }) {
-		const modelValue = useVModel(props, "value", emit);
+		const modelValue = ref("");
+
+		onMounted(() => {
+			if (props.value !== undefined) {
+				modelValue.value = props.value;
+			}
+		});
+
+		watch(modelValue, (newValue) => {
+			if (newValue !== props.value) {
+				emit("update:value", newValue);
+			}
+		});
+
 		const onUpdateValue = (newValue: string) => (modelValue.value = newValue);
 
 		const onFocus = () => {
@@ -47,7 +60,10 @@ export default defineComponent({
 			}
 		};
 
-		const onBlur = () => emit("blur");
+		const onBlur = () => {
+			emit("update:value", modelValue.value);
+			emit("blur");
+		};
 
 		const onDelete = () => emit("delete:element");