From d312d30c605745af4cbed81b00bbe4b14878e5e5 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Thu, 12 Oct 2023 10:42:26 +0200
Subject: [PATCH 01/35] don't show adjacent months

---
 src/components/feature-date-time-picker/DatePicker.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/feature-date-time-picker/DatePicker.vue b/src/components/feature-date-time-picker/DatePicker.vue
index 184043d53c..293df99ea8 100644
--- a/src/components/feature-date-time-picker/DatePicker.vue
+++ b/src/components/feature-date-time-picker/DatePicker.vue
@@ -39,7 +39,6 @@
 				first-day-of-week="1"
 				:min="minDate"
 				:max="maxDate"
-				show-adjacent-months
 				@input="onInput"
 			/>
 		</v-menu>

From 589b589957b7960069f361d899e544e48674bd46 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Fri, 13 Oct 2023 12:02:43 +0200
Subject: [PATCH 02/35] first draft time picker autocorrect

---
 .../feature-date-time-picker/TimePicker.vue   | 82 ++++++++++++-------
 1 file changed, 53 insertions(+), 29 deletions(-)

diff --git a/src/components/feature-date-time-picker/TimePicker.vue b/src/components/feature-date-time-picker/TimePicker.vue
index 3e5c94be77..749e8062f6 100644
--- a/src/components/feature-date-time-picker/TimePicker.vue
+++ b/src/components/feature-date-time-picker/TimePicker.vue
@@ -11,7 +11,7 @@
 			<template #activator="{ on, attrs }">
 				<v-text-field
 					ref="inputField"
-					v-model="modelValue"
+					v-model="timeValue"
 					v-bind="attrs"
 					v-on="on"
 					:label="label"
@@ -50,7 +50,7 @@
 
 <script lang="ts">
 import { useDebounceFn } from "@vueuse/core";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
 import { useTimePickerState } from "./TimePickerState.composable";
 import { ValidationRule } from "@/types/date-time-picker/Validation";
 import { useI18n } from "@/composables/i18n.composable";
@@ -67,20 +67,38 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const modelValue = computed({
-			get() {
-				return props.time;
-			},
-			set: (newValue) => {
-				emitTimeDebounced(newValue);
-			},
+		// const modelValue = computed({
+		// 	get() {
+		// 		return props.time;
+		// 	},
+		// 	set: (newValue) => {
+		// 		emitTimeDebounced(newValue);
+		// 	},
+		// });
+		const timeValue = ref("");
+
+		watch(
+			() => props.time,
+			(newVal) => {
+				timeValue.value = newVal;
+			}
+		);
+
+		watch(timeValue, (newVal) => {
+			emitTimeDebounced(newVal);
 		});
+
+		// Necessary because we need to wait for update:error
+		const emitTimeDebounced = useDebounceFn((newValue) => {
+			if (valid.value) {
+				emit("update:time", newValue);
+			}
+		}, 50);
+
 		const showTimeDialog = ref(false);
 		const inputField = ref<HTMLInputElement | null>(null);
-		const valid = ref(true);
-
+		const valid = ref<null | boolean>(null);
 		const { timesOfDayList } = useTimePickerState();
-
 		const timeRegex = /^([01]\d|2[0-3]):[0-5]\d$/g;
 
 		const requiredRule: ValidationRule = (value: string | null) => {
@@ -93,6 +111,19 @@ export default defineComponent({
 			if (value === "" || value === null) {
 				return true;
 			}
+
+			// add zero
+			const noZeroPrefixRegex = /^\d[0-5]\d$/g;
+			if (value.match(noZeroPrefixRegex)) {
+				timeValue.value = "0" + value;
+			}
+
+			// add colon
+			const noColonRegex = /^([01]\d|2[0-3])[0-5]\d$/g;
+			if (value.match(noColonRegex)) {
+				timeValue.value = value.slice(0, 2) + ":" + value.slice(2);
+			}
+
 			return !value.match(timeRegex)
 				? t("components.timePicker.validation.format")
 				: true;
@@ -109,9 +140,16 @@ export default defineComponent({
 			return rules;
 		});
 
+		const isNumberOrColon = (event: KeyboardEvent) => {
+			const char = String.fromCharCode(event.keyCode); // Get the character
+			if (/^[0-9|:]+$/.test(char)) return true; // Match with regex
+			else event.preventDefault(); // If it doesn't match, don't add to input text
+		};
+
 		const onSelect = async (selected: string) => {
 			inputField.value?.focus();
-			modelValue.value = selected;
+			// modelValue.value = selected;
+			timeValue.value = selected;
 			valid.value = true;
 			await closeMenu();
 		};
@@ -120,15 +158,6 @@ export default defineComponent({
 			valid.value = !hasError;
 		};
 
-		/**
-		 * Necessary because we need to wait for update:error
-		 */
-		const emitTimeDebounced = useDebounceFn((newValue) => {
-			if (valid.value) {
-				emit("update:time", newValue);
-			}
-		}, 50);
-
 		const onMenuToggle = () => {
 			if (showTimeDialog.value) {
 				valid.value = true;
@@ -139,16 +168,11 @@ export default defineComponent({
 			showTimeDialog.value = false;
 		}, 50);
 
-		const isNumberOrColon = (event: KeyboardEvent) => {
-			const char = String.fromCharCode(event.keyCode); // Get the character
-			if (/^[0-9|:]+$/.test(char)) return true; // Match with regex
-			else event.preventDefault(); // If it doesn't match, don't add to input text
-		};
-
 		return {
 			showTimeDialog,
 			timesOfDayList,
-			modelValue,
+			// modelValue,
+			timeValue,
 			rules,
 			inputField,
 			onSelect,

From 803d72f4df7c51d8175bc169012d01ae6cfecde9 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Thu, 19 Oct 2023 15:07:03 +0200
Subject: [PATCH 03/35] adjust reactivity handling

---
 .../SubmissionItemsTeacherDisplay.vue         | 17 +++++++-----
 .../feature-date-time-picker/TimePicker.vue   | 27 +++++++++++--------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue b/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue
index ee401190fb..0befc3a71a 100644
--- a/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue
+++ b/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue
@@ -91,7 +91,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, PropType, computed, ref, watch, unref } from "vue";
+import {
+	defineComponent,
+	PropType,
+	computed,
+	ref,
+	watch,
+	watchEffect,
+} from "vue";
 import { TeacherSubmission, Status } from "../types/submission";
 import { DataTableHeader } from "vuetify";
 import { useI18n } from "@/composables/i18n.composable";
@@ -184,14 +191,12 @@ export default defineComponent({
 		};
 
 		//	Filter Functionality
-		const filteredSubmissions = ref<Array<TeacherSubmission>>(
-			unref(allSubmissions)
-		);
+		const filteredSubmissions = ref<Array<TeacherSubmission>>([]);
 		const activeFilter = ref<StatusFilter>("all");
 		const panel = ref<number | undefined>(undefined);
 
-		watch(allSubmissions, (newValue) => {
-			filteredSubmissions.value = newValue;
+		watchEffect(() => {
+			filteredSubmissions.value = allSubmissions.value;
 		});
 
 		const filterByStatus = (statusFilter: StatusFilter) => {
diff --git a/src/components/feature-date-time-picker/TimePicker.vue b/src/components/feature-date-time-picker/TimePicker.vue
index 749e8062f6..25fb03f61e 100644
--- a/src/components/feature-date-time-picker/TimePicker.vue
+++ b/src/components/feature-date-time-picker/TimePicker.vue
@@ -50,7 +50,7 @@
 
 <script lang="ts">
 import { useDebounceFn } from "@vueuse/core";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, ref, watch, watchEffect } from "vue";
 import { useTimePickerState } from "./TimePickerState.composable";
 import { ValidationRule } from "@/types/date-time-picker/Validation";
 import { useI18n } from "@/composables/i18n.composable";
@@ -77,12 +77,17 @@ export default defineComponent({
 		// });
 		const timeValue = ref("");
 
-		watch(
-			() => props.time,
-			(newVal) => {
-				timeValue.value = newVal;
-			}
-		);
+		watchEffect(() => {
+			console.log("watchEffect");
+			timeValue.value = props.time;
+		});
+
+		// watch(
+		// 	() => props.time,
+		// 	(newVal) => {
+		// 		timeValue.value = newVal;
+		// 	}
+		// );
 
 		watch(timeValue, (newVal) => {
 			emitTimeDebounced(newVal);
@@ -113,10 +118,10 @@ export default defineComponent({
 			}
 
 			// add zero
-			const noZeroPrefixRegex = /^\d[0-5]\d$/g;
-			if (value.match(noZeroPrefixRegex)) {
-				timeValue.value = "0" + value;
-			}
+			// const noZeroPrefixRegex = /^\d[0-5]\d$/g;
+			// if (value.match(noZeroPrefixRegex)) {
+			// 	timeValue.value = "0" + value;
+			// }
 
 			// add colon
 			const noColonRegex = /^([01]\d|2[0-3])[0-5]\d$/g;

From 1c83c33e0bf8ac0526f0ace56dc3137c8dc60ffb Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Thu, 19 Oct 2023 15:48:26 +0200
Subject: [PATCH 04/35] rename function

---
 .../feature-date-time-picker/TimePicker.vue   | 24 +++----------------
 1 file changed, 3 insertions(+), 21 deletions(-)

diff --git a/src/components/feature-date-time-picker/TimePicker.vue b/src/components/feature-date-time-picker/TimePicker.vue
index 25fb03f61e..6282e62587 100644
--- a/src/components/feature-date-time-picker/TimePicker.vue
+++ b/src/components/feature-date-time-picker/TimePicker.vue
@@ -21,7 +21,7 @@
 					:rules="rules"
 					data-testid="time-input"
 					:class="{ 'menu-open': showTimeDialog }"
-					@keypress="isNumberOrColon"
+					@keypress="preventInvalidCharacters"
 					@keydown.prevent.space="showTimeDialog = true"
 					@keydown.prevent.enter="showTimeDialog = true"
 					@update:error="onError"
@@ -67,28 +67,12 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		// const modelValue = computed({
-		// 	get() {
-		// 		return props.time;
-		// 	},
-		// 	set: (newValue) => {
-		// 		emitTimeDebounced(newValue);
-		// 	},
-		// });
 		const timeValue = ref("");
 
 		watchEffect(() => {
-			console.log("watchEffect");
 			timeValue.value = props.time;
 		});
 
-		// watch(
-		// 	() => props.time,
-		// 	(newVal) => {
-		// 		timeValue.value = newVal;
-		// 	}
-		// );
-
 		watch(timeValue, (newVal) => {
 			emitTimeDebounced(newVal);
 		});
@@ -145,7 +129,7 @@ export default defineComponent({
 			return rules;
 		});
 
-		const isNumberOrColon = (event: KeyboardEvent) => {
+		const preventInvalidCharacters = (event: KeyboardEvent) => {
 			const char = String.fromCharCode(event.keyCode); // Get the character
 			if (/^[0-9|:]+$/.test(char)) return true; // Match with regex
 			else event.preventDefault(); // If it doesn't match, don't add to input text
@@ -153,7 +137,6 @@ export default defineComponent({
 
 		const onSelect = async (selected: string) => {
 			inputField.value?.focus();
-			// modelValue.value = selected;
 			timeValue.value = selected;
 			valid.value = true;
 			await closeMenu();
@@ -176,14 +159,13 @@ export default defineComponent({
 		return {
 			showTimeDialog,
 			timesOfDayList,
-			// modelValue,
 			timeValue,
 			rules,
 			inputField,
 			onSelect,
 			onError,
 			onMenuToggle,
-			isNumberOrColon,
+			preventInvalidCharacters,
 		};
 	},
 });

From 90ad8a3d7db8ee1ce5445a012995942d2ba41770 Mon Sep 17 00:00:00 2001
From: Oliver Happe <oliver.happe@dataport.de>
Date: Mon, 23 Oct 2023 13:22:49 +0200
Subject: [PATCH 05/35] adds wrappers for maska input masking

---
 package-lock.json                             | 11 ++++++++
 package.json                                  |  1 +
 .../LinkContentElementEdit.vue                |  1 +
 src/components/feature-board/board/Board.vue  |  3 +++
 .../feature-board/board/TestComponent.vue     | 26 +++++++++++++++++++
 .../feature-date-time-picker/TimePicker.vue   |  5 ++++
 .../util-input-masks/InputMask.factory.ts     | 21 +++++++++++++++
 .../util-input-masks/InputsMasks.ts           |  7 +++++
 src/components/util-input-masks/index.ts      |  3 +++
 tsconfig.json                                 |  2 +-
 vue.config.js                                 |  1 +
 11 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/components/feature-board/board/TestComponent.vue
 create mode 100644 src/components/util-input-masks/InputMask.factory.ts
 create mode 100644 src/components/util-input-masks/InputsMasks.ts
 create mode 100644 src/components/util-input-masks/index.ts

diff --git a/package-lock.json b/package-lock.json
index 92093ed64b..d46f5fc113 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,7 @@
 				"flush-promises": "^1.0.2",
 				"katex": "^0.12.0",
 				"kjua": "^0.9.0",
+				"maska": "^2.1.10",
 				"mobile-drag-drop": "^3.0.0-rc.0",
 				"object-hash": "^3.0.0",
 				"tiptap": "^1.32.2",
@@ -14374,6 +14375,11 @@
 				"tmpl": "1.0.5"
 			}
 		},
+		"node_modules/maska": {
+			"version": "2.1.10",
+			"resolved": "https://registry.npmjs.org/maska/-/maska-2.1.10.tgz",
+			"integrity": "sha512-oQLLUCJ4qG1YFHSGQB9P6G0LKSmAwHFFBFhmkJ9pcSUXXDZew5NNTBbPACiixqFBaU7M7LydPlrL0DmI1p+ufQ=="
+		},
 		"node_modules/mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
@@ -31075,6 +31081,11 @@
 				"tmpl": "1.0.5"
 			}
 		},
+		"maska": {
+			"version": "2.1.10",
+			"resolved": "https://registry.npmjs.org/maska/-/maska-2.1.10.tgz",
+			"integrity": "sha512-oQLLUCJ4qG1YFHSGQB9P6G0LKSmAwHFFBFhmkJ9pcSUXXDZew5NNTBbPACiixqFBaU7M7LydPlrL0DmI1p+ufQ=="
+		},
 		"mdn-data": {
 			"version": "2.0.30",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
diff --git a/package.json b/package.json
index 43b95b80af..1324953b1b 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
 		"flush-promises": "^1.0.2",
 		"katex": "^0.12.0",
 		"kjua": "^0.9.0",
+		"maska": "^2.1.10",
 		"mobile-drag-drop": "^3.0.0-rc.0",
 		"object-hash": "^3.0.0",
 		"tiptap": "^1.32.2",
diff --git a/src/components/feature-board-link-element/LinkContentElementEdit.vue b/src/components/feature-board-link-element/LinkContentElementEdit.vue
index aee3a0093f..d8fa10ee31 100644
--- a/src/components/feature-board-link-element/LinkContentElementEdit.vue
+++ b/src/components/feature-board-link-element/LinkContentElementEdit.vue
@@ -3,6 +3,7 @@
 		<v-form @submit.prevent="onSubmit(url)" ref="form" :lazy-validation="true">
 			<v-text-field
 				v-model="url"
+				dateTimeInputMask
 				:rules="[rules.isRequired, rules.isValidUrl]"
 				:label="$t('components.cardElement.LinkElement.label')"
 				type="text"
diff --git a/src/components/feature-board/board/Board.vue b/src/components/feature-board/board/Board.vue
index 479344b0d6..d180a073f1 100644
--- a/src/components/feature-board/board/Board.vue
+++ b/src/components/feature-board/board/Board.vue
@@ -4,6 +4,7 @@
 			<h3 aria-level="1" class="mt-3">
 				{{ $t("pages.room.boardCard.label.courseBoard") }}
 			</h3>
+			<test-component />
 		</div>
 		<div class="d-flex flex-row flex-shrink-1 ml-n4" @touchend="onTouchEnd">
 			<template v-if="board">
@@ -79,6 +80,7 @@ import AddElementDialog from "../shared/AddElementDialog.vue";
 import { useBodyScrolling } from "../shared/BodyScrolling.composable";
 import BoardColumn from "./BoardColumn.vue";
 import BoardColumnGhost from "./BoardColumnGhost.vue";
+import TestComponent from "./TestComponent.vue";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { Container, Draggable } = require("vue-dndrop");
 
@@ -91,6 +93,7 @@ export default defineComponent({
 		ConfirmationDialog,
 		AddElementDialog,
 		LightBox,
+		TestComponent,
 	},
 	props: {
 		boardId: { type: String, required: true },
diff --git a/src/components/feature-board/board/TestComponent.vue b/src/components/feature-board/board/TestComponent.vue
new file mode 100644
index 0000000000..49fc5c037d
--- /dev/null
+++ b/src/components/feature-board/board/TestComponent.vue
@@ -0,0 +1,26 @@
+<template>
+	<div>
+		<v-text-field v-timeInputMask v-model="modelValue" />
+		<br />
+		{{ modelValue }}
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { timeInputMask } from "@util-input-masks";
+
+export default defineComponent({
+	name: "TestComponent",
+	directives: {
+		timeInputMask,
+	},
+	setup() {
+		const modelValue = ref("");
+
+		return {
+			modelValue,
+		};
+	},
+});
+</script>
diff --git a/src/components/feature-date-time-picker/TimePicker.vue b/src/components/feature-date-time-picker/TimePicker.vue
index 25fb03f61e..8871b2b795 100644
--- a/src/components/feature-date-time-picker/TimePicker.vue
+++ b/src/components/feature-date-time-picker/TimePicker.vue
@@ -20,6 +20,7 @@
 					append-icon="$mdiClockOutline"
 					:rules="rules"
 					data-testid="time-input"
+					v-timeInputMask
 					:class="{ 'menu-open': showTimeDialog }"
 					@keypress="isNumberOrColon"
 					@keydown.prevent.space="showTimeDialog = true"
@@ -54,6 +55,7 @@ import { computed, defineComponent, ref, watch, watchEffect } from "vue";
 import { useTimePickerState } from "./TimePickerState.composable";
 import { ValidationRule } from "@/types/date-time-picker/Validation";
 import { useI18n } from "@/composables/i18n.composable";
+import { timeInputMask } from "@util-input-masks";
 
 export default defineComponent({
 	name: "TimePicker",
@@ -63,6 +65,9 @@ export default defineComponent({
 		ariaLabel: { type: String, default: "" },
 		required: { type: Boolean },
 	},
+	directives: {
+		timeInputMask,
+	},
 	emits: ["update:time"],
 	setup(props, { emit }) {
 		const { t } = useI18n();
diff --git a/src/components/util-input-masks/InputMask.factory.ts b/src/components/util-input-masks/InputMask.factory.ts
new file mode 100644
index 0000000000..0120301591
--- /dev/null
+++ b/src/components/util-input-masks/InputMask.factory.ts
@@ -0,0 +1,21 @@
+import { MaskInputOptions, vMaska } from "maska";
+import { DirectiveFunction } from "vue";
+
+/**
+ *  Creates a Maska-Directive from a given maska-configuration.
+ *
+ *  **Usage**
+ *  ```ts
+ *  const myGermanIsoDateMask = createInputMask({mask: '##.##.####'})
+ *  ```
+ *
+ *  @see https://beholdr.github.io/maska/#/?id=maskinput-options
+ */
+export const createInputMask = (options: MaskInputOptions) => {
+	const bindMaska: DirectiveFunction = (el, binding, vNode, oldVnode) => {
+		const newBinding = { ...binding, arg: options as string };
+		(vMaska as DirectiveFunction)(el, newBinding, vNode, oldVnode);
+	};
+
+	return bindMaska;
+};
diff --git a/src/components/util-input-masks/InputsMasks.ts b/src/components/util-input-masks/InputsMasks.ts
new file mode 100644
index 0000000000..63c858e562
--- /dev/null
+++ b/src/components/util-input-masks/InputsMasks.ts
@@ -0,0 +1,7 @@
+import { createInputMask } from "./InputMask.factory";
+
+export const dateInputMask = createInputMask({
+	mask: "##.##.####",
+});
+
+export const timeInputMask = createInputMask({ mask: "##:##" });
diff --git a/src/components/util-input-masks/index.ts b/src/components/util-input-masks/index.ts
new file mode 100644
index 0000000000..87a195726f
--- /dev/null
+++ b/src/components/util-input-masks/index.ts
@@ -0,0 +1,3 @@
+import { dateInputMask, timeInputMask } from "./InputsMasks";
+
+export { dateInputMask, timeInputMask };
diff --git a/tsconfig.json b/tsconfig.json
index 99d972f024..6623e788e9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -38,13 +38,13 @@
 			"@feature-date-time-picker": ["src/components/feature-date-time-picker"],
 			"@feature-editor": ["src/components/feature-editor"],
 			"@feature-render-html": ["src/components/feature-render-html"],
-
 			"@ui-alert": ["src/components/ui-alert"],
 			"@ui-board": ["src/components/ui-board"],
 			"@ui-confirmation-dialog": ["src/components/ui-confirmation-dialog"],
 			"@ui-light-box": ["src/components/ui-light-box"],
 			"@util-board": ["src/components/util-board"],
 			"@util-validators": ["src/components/util-validators"],
+			"@util-input-masks": ["src/components/util-input-masks"],
 			"@page-board": ["src/components/page-board"],
 			"@/*": ["src/*"],
 			"@@/*": ["*"]
diff --git a/vue.config.js b/vue.config.js
index fd93d2a3d8..0d81fcbc22 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -51,6 +51,7 @@ module.exports = defineConfig({
 				"@ui-light-box": getDir("src/components/ui-light-box"),
 				"@util-board": getDir("src/components/util-board"),
 				"@util-validators": getDir("src/components/util-validators"),
+				"@util-input-masks": getDir("src/components/util-input-masks"),
 				"@page-board": getDir("src/components/page-board"),
 			},
 			extensions: [".js", ".ts", ".vue", ".json"],

From 1e4b27b1690ce9b22fa1b8d4e09d5a7e9a74d8e6 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Wed, 25 Oct 2023 10:31:21 +0200
Subject: [PATCH 06/35] remove test component

---
 .../LinkContentElementEdit.vue                |  1 -
 src/components/feature-board/board/Board.vue  |  3 ---
 .../feature-board/board/TestComponent.vue     | 26 -------------------
 3 files changed, 30 deletions(-)
 delete mode 100644 src/components/feature-board/board/TestComponent.vue

diff --git a/src/components/feature-board-link-element/LinkContentElementEdit.vue b/src/components/feature-board-link-element/LinkContentElementEdit.vue
index d8fa10ee31..aee3a0093f 100644
--- a/src/components/feature-board-link-element/LinkContentElementEdit.vue
+++ b/src/components/feature-board-link-element/LinkContentElementEdit.vue
@@ -3,7 +3,6 @@
 		<v-form @submit.prevent="onSubmit(url)" ref="form" :lazy-validation="true">
 			<v-text-field
 				v-model="url"
-				dateTimeInputMask
 				:rules="[rules.isRequired, rules.isValidUrl]"
 				:label="$t('components.cardElement.LinkElement.label')"
 				type="text"
diff --git a/src/components/feature-board/board/Board.vue b/src/components/feature-board/board/Board.vue
index d180a073f1..479344b0d6 100644
--- a/src/components/feature-board/board/Board.vue
+++ b/src/components/feature-board/board/Board.vue
@@ -4,7 +4,6 @@
 			<h3 aria-level="1" class="mt-3">
 				{{ $t("pages.room.boardCard.label.courseBoard") }}
 			</h3>
-			<test-component />
 		</div>
 		<div class="d-flex flex-row flex-shrink-1 ml-n4" @touchend="onTouchEnd">
 			<template v-if="board">
@@ -80,7 +79,6 @@ import AddElementDialog from "../shared/AddElementDialog.vue";
 import { useBodyScrolling } from "../shared/BodyScrolling.composable";
 import BoardColumn from "./BoardColumn.vue";
 import BoardColumnGhost from "./BoardColumnGhost.vue";
-import TestComponent from "./TestComponent.vue";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const { Container, Draggable } = require("vue-dndrop");
 
@@ -93,7 +91,6 @@ export default defineComponent({
 		ConfirmationDialog,
 		AddElementDialog,
 		LightBox,
-		TestComponent,
 	},
 	props: {
 		boardId: { type: String, required: true },
diff --git a/src/components/feature-board/board/TestComponent.vue b/src/components/feature-board/board/TestComponent.vue
deleted file mode 100644
index 49fc5c037d..0000000000
--- a/src/components/feature-board/board/TestComponent.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-	<div>
-		<v-text-field v-timeInputMask v-model="modelValue" />
-		<br />
-		{{ modelValue }}
-	</div>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref } from "vue";
-import { timeInputMask } from "@util-input-masks";
-
-export default defineComponent({
-	name: "TestComponent",
-	directives: {
-		timeInputMask,
-	},
-	setup() {
-		const modelValue = ref("");
-
-		return {
-			modelValue,
-		};
-	},
-});
-</script>

From 613a6bac302d96b9371a26686e9dd159d96450c0 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Wed, 25 Oct 2023 10:34:53 +0200
Subject: [PATCH 07/35] remove timepicker autocorrect changes

---
 .../feature-date-time-picker/TimePicker.vue   | 35 ++++++-------------
 1 file changed, 11 insertions(+), 24 deletions(-)

diff --git a/src/components/feature-date-time-picker/TimePicker.vue b/src/components/feature-date-time-picker/TimePicker.vue
index d0f2dc823e..5ee4766f4c 100644
--- a/src/components/feature-date-time-picker/TimePicker.vue
+++ b/src/components/feature-date-time-picker/TimePicker.vue
@@ -11,7 +11,7 @@
 			<template #activator="{ on, attrs }">
 				<v-text-field
 					ref="inputField"
-					v-model="timeValue"
+					v-model="modelValue"
 					v-bind="attrs"
 					v-on="on"
 					:label="label"
@@ -72,14 +72,13 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
-		const timeValue = ref("");
-
-		watchEffect(() => {
-			timeValue.value = props.time;
-		});
-
-		watch(timeValue, (newVal) => {
-			emitTimeDebounced(newVal);
+		const modelValue = computed({
+			get() {
+				return props.time;
+			},
+			set: (newValue) => {
+				emitTimeDebounced(newValue);
+			},
 		});
 
 		// Necessary because we need to wait for update:error
@@ -91,7 +90,7 @@ export default defineComponent({
 
 		const showTimeDialog = ref(false);
 		const inputField = ref<HTMLInputElement | null>(null);
-		const valid = ref<null | boolean>(null);
+		const valid = ref(true);
 		const { timesOfDayList } = useTimePickerState();
 		const timeRegex = /^([01]\d|2[0-3]):[0-5]\d$/g;
 
@@ -106,18 +105,6 @@ export default defineComponent({
 				return true;
 			}
 
-			// add zero
-			// const noZeroPrefixRegex = /^\d[0-5]\d$/g;
-			// if (value.match(noZeroPrefixRegex)) {
-			// 	timeValue.value = "0" + value;
-			// }
-
-			// add colon
-			const noColonRegex = /^([01]\d|2[0-3])[0-5]\d$/g;
-			if (value.match(noColonRegex)) {
-				timeValue.value = value.slice(0, 2) + ":" + value.slice(2);
-			}
-
 			return !value.match(timeRegex)
 				? t("components.timePicker.validation.format")
 				: true;
@@ -142,7 +129,7 @@ export default defineComponent({
 
 		const onSelect = async (selected: string) => {
 			inputField.value?.focus();
-			timeValue.value = selected;
+			modelValue.value = selected;
 			valid.value = true;
 			await closeMenu();
 		};
@@ -164,7 +151,7 @@ export default defineComponent({
 		return {
 			showTimeDialog,
 			timesOfDayList,
-			timeValue,
+			modelValue,
 			rules,
 			inputField,
 			onSelect,

From db1b70996114880d9e404c6959747fc066d3a6df Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Wed, 25 Oct 2023 10:58:52 +0200
Subject: [PATCH 08/35] remove character prevent func, cause mask takes care of
 it

---
 src/components/feature-date-time-picker/TimePicker.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/feature-date-time-picker/TimePicker.vue b/src/components/feature-date-time-picker/TimePicker.vue
index 5ee4766f4c..20ef0269b0 100644
--- a/src/components/feature-date-time-picker/TimePicker.vue
+++ b/src/components/feature-date-time-picker/TimePicker.vue
@@ -22,7 +22,6 @@
 					data-testid="time-input"
 					v-timeInputMask
 					:class="{ 'menu-open': showTimeDialog }"
-					@keypress="preventInvalidCharacters"
 					@keydown.prevent.space="showTimeDialog = true"
 					@keydown.prevent.enter="showTimeDialog = true"
 					@update:error="onError"
@@ -51,7 +50,7 @@
 
 <script lang="ts">
 import { useDebounceFn } from "@vueuse/core";
-import { computed, defineComponent, ref, watch, watchEffect } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import { useTimePickerState } from "./TimePickerState.composable";
 import { ValidationRule } from "@/types/date-time-picker/Validation";
 import { useI18n } from "@/composables/i18n.composable";
@@ -121,12 +120,6 @@ export default defineComponent({
 			return rules;
 		});
 
-		const preventInvalidCharacters = (event: KeyboardEvent) => {
-			const char = String.fromCharCode(event.keyCode); // Get the character
-			if (/^[0-9|:]+$/.test(char)) return true; // Match with regex
-			else event.preventDefault(); // If it doesn't match, don't add to input text
-		};
-
 		const onSelect = async (selected: string) => {
 			inputField.value?.focus();
 			modelValue.value = selected;
@@ -157,7 +150,6 @@ export default defineComponent({
 			onSelect,
 			onError,
 			onMenuToggle,
-			preventInvalidCharacters,
 		};
 	},
 });

From 76910d5707a4a715d78037fa7d9643a3c837d78b Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Wed, 25 Oct 2023 12:26:28 +0200
Subject: [PATCH 09/35] add typing & mask to datepicker

---
 .../feature-date-time-picker/DatePicker.vue   | 55 +++++++++++++------
 .../feature-date-time-picker/TimePicker.vue   |  3 +-
 2 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/src/components/feature-date-time-picker/DatePicker.vue b/src/components/feature-date-time-picker/DatePicker.vue
index 293df99ea8..18dbaf4caf 100644
--- a/src/components/feature-date-time-picker/DatePicker.vue
+++ b/src/components/feature-date-time-picker/DatePicker.vue
@@ -11,7 +11,7 @@
 			<template #activator="{ on, attrs }">
 				<v-text-field
 					ref="inputField"
-					:value="formattedDate"
+					v-model="formattedDate"
 					v-bind="attrs"
 					v-on="on"
 					:label="label"
@@ -19,10 +19,10 @@
 					:placeholder="$t('common.placeholder.dateformat')"
 					:class="{ 'menu-open': showDateDialog }"
 					append-icon="$mdiCalendar"
-					readonly
 					:messages="messages"
 					:rules="rules"
 					data-testid="date-input"
+					v-dateInputMask
 					@keydown.space="showDateDialog = true"
 					@keydown.prevent.enter="showDateDialog = true"
 					@keydown.prevent.down="focusDatePicker"
@@ -46,13 +46,13 @@
 </template>
 
 <script lang="ts">
-import { mdiCalendarClock } from "@mdi/js";
 import { useDebounceFn } from "@vueuse/core";
 import dayjs from "dayjs";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, ref, watch, onMounted } from "vue";
 import { ValidationRule } from "@/types/date-time-picker/Validation";
 import { useI18n } from "@/composables/i18n.composable";
 import { DATETIME_FORMAT } from "@/plugins/datetime";
+import { dateInputMask } from "@util-input-masks";
 
 export default defineComponent({
 	name: "DatePicker",
@@ -65,6 +65,9 @@ export default defineComponent({
 		maxDate: { type: String },
 		dateTimeInPast: { type: Boolean, default: false },
 	},
+	directives: {
+		dateInputMask,
+	},
 	emits: ["update:date"],
 	setup(props, { emit }) {
 		const { t, locale } = useI18n();
@@ -77,16 +80,33 @@ export default defineComponent({
 				emitDateDebounced(newValue);
 			},
 		});
+
+		/**
+		 * Necessary because we need to wait for update:error
+		 */
+		const emitDateDebounced = useDebounceFn((newValue) => {
+			if (valid.value) {
+				emit("update:date", newValue);
+			}
+		}, 50);
+
 		const showDateDialog = ref(false);
 		const inputField = ref<HTMLInputElement | null>(null);
 		const valid = ref(true);
 
-		const formattedDate = computed(() => {
-			return modelValue.value
+		const formattedDate = ref("");
+
+		onMounted(() => {
+			formattedDate.value = modelValue.value
 				? dayjs(modelValue.value).format(DATETIME_FORMAT.date)
 				: "";
 		});
 
+		watch(formattedDate, (newVal) => {
+			const [day, month, year] = newVal.split(".");
+			modelValue.value = `${year}-${month}-${day}`;
+		});
+
 		const focusDatePicker = () => {
 			setTimeout(() => {
 				const prevMonthBtn = document.querySelector<HTMLElement>(
@@ -103,12 +123,25 @@ export default defineComponent({
 				: true;
 		};
 
+		const formatRule: ValidationRule = (value: string | null) => {
+			if (value === "" || value === null) {
+				return true;
+			}
+
+			const dateRegex = /^(0[1-9]|[12]\d|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/g;
+
+			return !value.match(dateRegex)
+				? t("components.timePicker.validation.format")
+				: true;
+		};
+
 		const rules = computed<ValidationRule[]>(() => {
 			const rules: ValidationRule[] = [];
 
 			if (props.required) {
 				rules.push(requiredRule);
 			}
+			rules.push(formatRule);
 			return rules;
 		});
 
@@ -121,15 +154,6 @@ export default defineComponent({
 			valid.value = !hasError;
 		};
 
-		/**
-		 * Necessary because we need to wait for update:error
-		 */
-		const emitDateDebounced = useDebounceFn((newValue) => {
-			if (valid.value) {
-				emit("update:date", newValue);
-			}
-		}, 50);
-
 		const onMenuToggle = () => {
 			if (showDateDialog.value) {
 				valid.value = true;
@@ -149,7 +173,6 @@ export default defineComponent({
 		});
 
 		return {
-			mdiCalendarClock,
 			locale,
 			modelValue,
 			rules,
diff --git a/src/components/feature-date-time-picker/TimePicker.vue b/src/components/feature-date-time-picker/TimePicker.vue
index 20ef0269b0..d78f97e941 100644
--- a/src/components/feature-date-time-picker/TimePicker.vue
+++ b/src/components/feature-date-time-picker/TimePicker.vue
@@ -91,7 +91,6 @@ export default defineComponent({
 		const inputField = ref<HTMLInputElement | null>(null);
 		const valid = ref(true);
 		const { timesOfDayList } = useTimePickerState();
-		const timeRegex = /^([01]\d|2[0-3]):[0-5]\d$/g;
 
 		const requiredRule: ValidationRule = (value: string | null) => {
 			return value === "" || value === null
@@ -104,6 +103,8 @@ export default defineComponent({
 				return true;
 			}
 
+			const timeRegex = /^([01]\d|2[0-3]):[0-5]\d$/g;
+
 			return !value.match(timeRegex)
 				? t("components.timePicker.validation.format")
 				: true;

From 8c4283896982c1500ebbc63f72b57ad07192ec25 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Wed, 25 Oct 2023 13:14:04 +0200
Subject: [PATCH 10/35] show error message on datepicker

---
 src/components/feature-date-time-picker/DatePicker.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/feature-date-time-picker/DatePicker.vue b/src/components/feature-date-time-picker/DatePicker.vue
index 18dbaf4caf..d47390d268 100644
--- a/src/components/feature-date-time-picker/DatePicker.vue
+++ b/src/components/feature-date-time-picker/DatePicker.vue
@@ -191,12 +191,6 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 ::v-deep {
-	.menu-open {
-		.v-text-field__details {
-			display: none;
-		}
-	}
-
 	.v-input__icon--append .v-icon {
 		width: 20px;
 		height: 20px;

From 418dc9ea739a587bd1771c0c4e6785df749d191c Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Wed, 25 Oct 2023 13:38:40 +0200
Subject: [PATCH 11/35] adjust error message for date picker

---
 src/components/feature-date-time-picker/DatePicker.vue | 2 +-
 src/locales/de.json                                    | 1 +
 src/locales/en.json                                    | 1 +
 src/locales/es.json                                    | 1 +
 src/locales/uk.json                                    | 1 +
 5 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/feature-date-time-picker/DatePicker.vue b/src/components/feature-date-time-picker/DatePicker.vue
index d47390d268..19f7acd2d8 100644
--- a/src/components/feature-date-time-picker/DatePicker.vue
+++ b/src/components/feature-date-time-picker/DatePicker.vue
@@ -131,7 +131,7 @@ export default defineComponent({
 			const dateRegex = /^(0[1-9]|[12]\d|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/g;
 
 			return !value.match(dateRegex)
-				? t("components.timePicker.validation.format")
+				? t("components.datePicker.validation.format")
 				: true;
 		};
 
diff --git a/src/locales/de.json b/src/locales/de.json
index 6d9d3b5ced..fcf27aed93 100644
--- a/src/locales/de.json
+++ b/src/locales/de.json
@@ -143,6 +143,7 @@
 	"common.words.languages.uk": "Ukrainisch",
 	"components.datePicker.messages.future": "Bitte Datum und Uhrzeit in der Zukunft angeben.",
 	"components.datePicker.validation.required": "Bitte Datum angeben.",
+	"components.datePicker.validation.format": "Bitte Format DD.MM.YYYY verwenden.",
 	"components.timePicker.validation.required": "Bitte Uhrzeit angeben.",
 	"components.timePicker.validation.format": "Bitte Format HH:MM verwenden.",
 	"components.timePicker.validation.future": "Bitte Uhrzeit in der Zukunft angeben.",
diff --git a/src/locales/en.json b/src/locales/en.json
index 50ac2a7d9b..ede1059d11 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -142,6 +142,7 @@
 	"common.words.languages.uk": "Ukrainian",
 	"components.datePicker.messages.future": "Please specify a date and time in the future.",
 	"components.datePicker.validation.required": "Please enter a date.",
+	"components.datePicker.validation.format": "Please use format DD.MM.YYYY",
 	"components.timePicker.validation.required": "Please enter a time.",
 	"components.timePicker.validation.format": "Please use format HH:MM",
 	"components.timePicker.validation.future": "Please enter a time in the future.",
diff --git a/src/locales/es.json b/src/locales/es.json
index 457b3a0a72..aaf3d31fd6 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -142,6 +142,7 @@
 	"common.words.languages.uk": "Ucranio",
 	"components.datePicker.messages.future": "Por favor, especifique una fecha y una hora en el futuro.",
 	"components.datePicker.validation.required": "Por favor ingrese una fecha.",
+	"components.datePicker.validation.format": "Por favor utilice el formato DD.MM.YYYY",
 	"components.timePicker.validation.required": "Por favor ingrese un tiempo.",
 	"components.timePicker.validation.format": "Por favor utilice el formato HH:MM",
 	"components.timePicker.validation.future": "Por favor ingrese un tiempo en el futuro.",
diff --git a/src/locales/uk.json b/src/locales/uk.json
index 7d3716ccac..425419891f 100644
--- a/src/locales/uk.json
+++ b/src/locales/uk.json
@@ -143,6 +143,7 @@
 	"common.words.languages.uk": "Українська",
 	"components.datePicker.messages.future": "Будь ласка, вкажіть дату та час у майбутньому.",
 	"components.datePicker.validation.required": "Будь ласка, введіть дату.",
+	"components.datePicker.validation.format": "Використовуйте формат ДД.ММ.РРРР",
 	"components.timePicker.validation.required": "Будь ласка, введіть час.",
 	"components.timePicker.validation.format": "Використовуйте формат ГГ:ХХ",
 	"components.timePicker.validation.future": "Будь ласка, введіть час у майбутньому.",

From 27f1de2f376fb80f5e1ccaf3a7ebafdbafc66d55 Mon Sep 17 00:00:00 2001
From: Oliver Happe <oliver.happe@dataport.de>
Date: Wed, 25 Oct 2023 14:02:42 +0200
Subject: [PATCH 12/35] adds explanatory comments

---
 src/components/util-input-masks/InputMask.factory.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/util-input-masks/InputMask.factory.ts b/src/components/util-input-masks/InputMask.factory.ts
index 0120301591..f8c9df40c1 100644
--- a/src/components/util-input-masks/InputMask.factory.ts
+++ b/src/components/util-input-masks/InputMask.factory.ts
@@ -12,6 +12,8 @@ import { DirectiveFunction } from "vue";
  *  @see https://beholdr.github.io/maska/#/?id=maskinput-options
  */
 export const createInputMask = (options: MaskInputOptions) => {
+	// DirectiveFunction type is necessary to ensure compatibility with defineComponent()-Syntax in vue 2.7
+	// going forward with Vue3 we should be able to use Directive<HTMLElement> type
 	const bindMaska: DirectiveFunction = (el, binding, vNode, oldVnode) => {
 		const newBinding = { ...binding, arg: options as string };
 		(vMaska as DirectiveFunction)(el, newBinding, vNode, oldVnode);

From 827dacc492b94fd3a87d0f5e9f2718912e027a91 Mon Sep 17 00:00:00 2001
From: Oliver Happe <oliver.happe@dataport.de>
Date: Wed, 25 Oct 2023 14:44:05 +0200
Subject: [PATCH 13/35] adds test for inputmask factory

---
 __mocks__/maska.js                            |  8 ++++
 .../util-input-masks/InputMask.factory.ts     |  3 +-
 .../util-input-masks/InputMask.unit.ts        | 40 +++++++++++++++++++
 3 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 __mocks__/maska.js
 create mode 100644 src/components/util-input-masks/InputMask.unit.ts

diff --git a/__mocks__/maska.js b/__mocks__/maska.js
new file mode 100644
index 0000000000..2e6733afbf
--- /dev/null
+++ b/__mocks__/maska.js
@@ -0,0 +1,8 @@
+/**
+ * This is a mock for the vMaska directive exported by maska package.
+ */
+
+// eslint-disable-next-line no-undef
+const vMaska = jest.fn();
+
+export { vMaska };
diff --git a/src/components/util-input-masks/InputMask.factory.ts b/src/components/util-input-masks/InputMask.factory.ts
index f8c9df40c1..34ea7bc7ad 100644
--- a/src/components/util-input-masks/InputMask.factory.ts
+++ b/src/components/util-input-masks/InputMask.factory.ts
@@ -1,4 +1,5 @@
-import { MaskInputOptions, vMaska } from "maska";
+import type { MaskInputOptions } from "maska";
+import { vMaska } from "maska";
 import { DirectiveFunction } from "vue";
 
 /**
diff --git a/src/components/util-input-masks/InputMask.unit.ts b/src/components/util-input-masks/InputMask.unit.ts
new file mode 100644
index 0000000000..9d82283c44
--- /dev/null
+++ b/src/components/util-input-masks/InputMask.unit.ts
@@ -0,0 +1,40 @@
+import { createInputMask } from "@/components/util-input-masks/InputMask.factory";
+import { DirectiveBinding, DirectiveFunction } from "vue";
+import { vMaska, MaskInputOptions } from "maska";
+import { VNode } from "vue/types/umd";
+
+jest.mock("maska");
+
+describe("InputMask.factory", () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it("should bind maska when directive function is called", () => {
+		const mockedMaska = vMaska;
+
+		const directive: DirectiveFunction = createInputMask({ mask: "" });
+		directive(
+			null as unknown as HTMLElement,
+			null as unknown as DirectiveBinding<unknown>,
+			null as unknown as VNode,
+			null as unknown as VNode
+		);
+		expect(mockedMaska).toHaveBeenCalledTimes(1);
+	});
+
+	it("should pass MaskInputOptions to maska as part of DirectiveBinding param", () => {
+		const mockedMaska = vMaska;
+
+		const options: MaskInputOptions = { mask: "##-##" };
+
+		const directive: DirectiveFunction = createInputMask(options);
+		directive(
+			{} as unknown as HTMLElement,
+			{} as unknown as DirectiveBinding<unknown>,
+			{} as unknown as VNode,
+			{} as unknown as VNode
+		);
+		expect(mockedMaska).toHaveBeenCalledWith({}, { arg: options }, {}, {});
+	});
+});

From 7fb69b63f0a7d5c92a0620c6aeb93eb871a216c7 Mon Sep 17 00:00:00 2001
From: Oliver Happe <oliver.happe@dataport.de>
Date: Wed, 25 Oct 2023 14:51:15 +0200
Subject: [PATCH 14/35] adjust tests

---
 src/components/util-input-masks/InputMask.unit.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/util-input-masks/InputMask.unit.ts b/src/components/util-input-masks/InputMask.unit.ts
index 9d82283c44..515449355d 100644
--- a/src/components/util-input-masks/InputMask.unit.ts
+++ b/src/components/util-input-masks/InputMask.unit.ts
@@ -15,10 +15,10 @@ describe("InputMask.factory", () => {
 
 		const directive: DirectiveFunction = createInputMask({ mask: "" });
 		directive(
-			null as unknown as HTMLElement,
-			null as unknown as DirectiveBinding<unknown>,
-			null as unknown as VNode,
-			null as unknown as VNode
+			{} as unknown as HTMLElement,
+			{} as unknown as DirectiveBinding<unknown>,
+			{} as unknown as VNode,
+			{} as unknown as VNode
 		);
 		expect(mockedMaska).toHaveBeenCalledTimes(1);
 	});

From fbce93f7d3b37e251e545f5e6b65fc37fe7223bd Mon Sep 17 00:00:00 2001
From: Oliver Happe <oliver.happe@dataport.de>
Date: Wed, 25 Oct 2023 15:47:54 +0200
Subject: [PATCH 15/35] refactors submission filter to use reactivity

---
 .../SubmissionItemsTeacherDisplay.vue         | 71 ++++++++-----------
 1 file changed, 31 insertions(+), 40 deletions(-)

diff --git a/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue b/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue
index 0befc3a71a..3b83112c58 100644
--- a/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue
+++ b/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue
@@ -97,11 +97,14 @@ import {
 	computed,
 	ref,
 	watch,
-	watchEffect,
+	toRef,
+	Ref,
+	unref,
 } from "vue";
 import { TeacherSubmission, Status } from "../types/submission";
 import { DataTableHeader } from "vuetify";
 import { useI18n } from "@/composables/i18n.composable";
+import { MaybeRef } from "@vueuse/core";
 
 type StatusFilter = "all" | Status;
 
@@ -139,27 +142,34 @@ export default defineComponent({
 			},
 		];
 
-		const allSubmissions = computed<Array<TeacherSubmission>>(() => {
-			return props.submissions;
-		});
+		const allSubmissions = toRef(props, "submissions");
+		const activeFilter = ref<StatusFilter>("all");
 
-		const openCount = computed<number>(() => {
-			return allSubmissions.value.filter((item) => {
-				return item.status === "open";
-			}).length;
-		});
+		const filteredSubmissions = computed(() =>
+			filterByStatus(allSubmissions, activeFilter)
+		);
 
-		const completedCount = computed<number>(() => {
-			return allSubmissions.value.filter((item) => {
-				return item.status === "completed";
-			}).length;
-		});
+		const filterByStatus = (
+			submissions: Ref<TeacherSubmission[]>,
+			statusFilter: MaybeRef<StatusFilter>
+		) => {
+			const status = unref(statusFilter);
+			return submissions.value.filter(
+				(item) => status === "all" || item.status === status
+			);
+		};
 
-		const overdueCount = computed<number>(() => {
-			return allSubmissions.value.filter((item) => {
-				return item.status === "expired";
-			}).length;
-		});
+		const openCount = computed<number>(
+			() => filterByStatus(allSubmissions, "open").length
+		);
+
+		const completedCount = computed<number>(
+			() => filterByStatus(allSubmissions, "completed").length
+		);
+
+		const overdueCount = computed<number>(
+			() => filterByStatus(allSubmissions, "expired").length
+		);
 
 		const getStatusIcon = (item: TeacherSubmission) => {
 			if (item.status === "open") {
@@ -191,27 +201,8 @@ export default defineComponent({
 		};
 
 		//	Filter Functionality
-		const filteredSubmissions = ref<Array<TeacherSubmission>>([]);
-		const activeFilter = ref<StatusFilter>("all");
 		const panel = ref<number | undefined>(undefined);
 
-		watchEffect(() => {
-			filteredSubmissions.value = allSubmissions.value;
-		});
-
-		const filterByStatus = (statusFilter: StatusFilter) => {
-			if (statusFilter === "all") {
-				filteredSubmissions.value = allSubmissions.value;
-				return;
-			}
-
-			filteredSubmissions.value = allSubmissions.value.filter(
-				(item: TeacherSubmission) => {
-					return item.status === statusFilter;
-				}
-			);
-		};
-
 		const setFilter = (filter: StatusFilter) => {
 			if (filter === activeFilter.value) {
 				activeFilter.value = "all";
@@ -220,8 +211,8 @@ export default defineComponent({
 			}
 		};
 
-		watch(activeFilter, (newFilter) => {
-			filterByStatus(newFilter);
+		watch(activeFilter, () => {
+			// filterByStatus(newFilter);
 			openPanel();
 		});
 

From 64253152ecb093e9eed778facf86f13c30273b9e Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Wed, 25 Oct 2023 16:02:50 +0200
Subject: [PATCH 16/35] rearrange file

---
 .../SubmissionItemsTeacherDisplay.vue         | 37 +++++++++----------
 1 file changed, 17 insertions(+), 20 deletions(-)

diff --git a/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue b/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue
index 3b83112c58..8f72e34aaa 100644
--- a/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue
+++ b/src/components/feature-board-submission-element/components/SubmissionItemsTeacherDisplay.vue
@@ -142,6 +142,7 @@ export default defineComponent({
 			},
 		];
 
+		const panel = ref<number | undefined>(undefined);
 		const allSubmissions = toRef(props, "submissions");
 		const activeFilter = ref<StatusFilter>("all");
 
@@ -159,6 +160,14 @@ export default defineComponent({
 			);
 		};
 
+		const setFilter = (filter: StatusFilter) => {
+			if (filter === activeFilter.value) {
+				activeFilter.value = "all";
+			} else {
+				activeFilter.value = filter;
+			}
+		};
+
 		const openCount = computed<number>(
 			() => filterByStatus(allSubmissions, "open").length
 		);
@@ -171,6 +180,14 @@ export default defineComponent({
 			() => filterByStatus(allSubmissions, "expired").length
 		);
 
+		const isDisabled = (count: number) => {
+			return count === 0;
+		};
+
+		const getTabIndex = (isDisabled: boolean) => {
+			return isDisabled ? -1 : 0;
+		};
+
 		const getStatusIcon = (item: TeacherSubmission) => {
 			if (item.status === "open") {
 				return "$mdiMinus";
@@ -192,27 +209,7 @@ export default defineComponent({
 				: "filter-chip";
 		};
 
-		const isDisabled = (count: number) => {
-			return count === 0;
-		};
-
-		const getTabIndex = (isDisabled: boolean) => {
-			return isDisabled ? -1 : 0;
-		};
-
-		//	Filter Functionality
-		const panel = ref<number | undefined>(undefined);
-
-		const setFilter = (filter: StatusFilter) => {
-			if (filter === activeFilter.value) {
-				activeFilter.value = "all";
-			} else {
-				activeFilter.value = filter;
-			}
-		};
-
 		watch(activeFilter, () => {
-			// filterByStatus(newFilter);
 			openPanel();
 		});
 

From 7dabb267f997d1b9f45218b5dad82a6bd8fe33bf Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Thu, 26 Oct 2023 10:52:50 +0200
Subject: [PATCH 17/35] use util validators and move format validation

---
 .../feature-date-time-picker/TimePicker.vue   | 29 ++++---------------
 src/components/util-validators/index.ts       |  4 +--
 src/components/util-validators/validators.ts  | 14 +++++++++
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/components/feature-date-time-picker/TimePicker.vue b/src/components/feature-date-time-picker/TimePicker.vue
index d78f97e941..2aaf2e96eb 100644
--- a/src/components/feature-date-time-picker/TimePicker.vue
+++ b/src/components/feature-date-time-picker/TimePicker.vue
@@ -52,9 +52,9 @@
 import { useDebounceFn } from "@vueuse/core";
 import { computed, defineComponent, ref } from "vue";
 import { useTimePickerState } from "./TimePickerState.composable";
-import { ValidationRule } from "@/types/date-time-picker/Validation";
 import { useI18n } from "@/composables/i18n.composable";
 import { timeInputMask } from "@util-input-masks";
+import { isRequired, isValidTimeFormat } from "@util-validators";
 
 export default defineComponent({
 	name: "TimePicker",
@@ -92,31 +92,14 @@ export default defineComponent({
 		const valid = ref(true);
 		const { timesOfDayList } = useTimePickerState();
 
-		const requiredRule: ValidationRule = (value: string | null) => {
-			return value === "" || value === null
-				? t("components.timePicker.validation.required")
-				: true;
-		};
-
-		const formatRule: ValidationRule = (value: string | null) => {
-			if (value === "" || value === null) {
-				return true;
-			}
-
-			const timeRegex = /^([01]\d|2[0-3]):[0-5]\d$/g;
-
-			return !value.match(timeRegex)
-				? t("components.timePicker.validation.format")
-				: true;
-		};
-
-		const rules = computed<ValidationRule[]>(() => {
-			const rules: ValidationRule[] = [];
+		const rules = computed(() => {
+			const rules = [
+				isValidTimeFormat(t("components.timePicker.validation.format")),
+			];
 
 			if (props.required) {
-				rules.push(requiredRule);
+				rules.push(isRequired(t("components.timePicker.validation.required")));
 			}
-			rules.push(formatRule);
 
 			return rules;
 		});
diff --git a/src/components/util-validators/index.ts b/src/components/util-validators/index.ts
index 9b071e141e..b1d335d10e 100644
--- a/src/components/util-validators/index.ts
+++ b/src/components/util-validators/index.ts
@@ -1,3 +1,3 @@
-import { isRequired, isValidUrl } from "./validators";
+import { isRequired, isValidUrl, isValidTimeFormat } from "./validators";
 
-export { isRequired, isValidUrl };
+export { isRequired, isValidUrl, isValidTimeFormat };
diff --git a/src/components/util-validators/validators.ts b/src/components/util-validators/validators.ts
index d123271e6c..6d6cbbb0b8 100644
--- a/src/components/util-validators/validators.ts
+++ b/src/components/util-validators/validators.ts
@@ -28,3 +28,17 @@ export const isValidUrl: FormValidatorFn<string> = (errMsg) => (value) => {
 	}
 	return true;
 };
+
+/**
+ * Checks if given value has valid time format
+ */
+export const isValidTimeFormat: FormValidatorFn<string> =
+	(errMsg) => (value) => {
+		if (value === "" || value === null) {
+			return true;
+		}
+
+		const timeRegex = /^([01]\d|2[0-3]):[0-5]\d$/g;
+
+		return !value.match(timeRegex) ? errMsg : true;
+	};

From 2213979c192b8dc2807643679d57007180e0c087 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Thu, 26 Oct 2023 11:07:36 +0200
Subject: [PATCH 18/35] use util validators in date picker

---
 .../feature-date-time-picker/DatePicker.vue   | 30 +++++--------------
 src/components/util-validators/index.ts       |  9 ++++--
 src/components/util-validators/validators.ts  | 14 +++++++++
 src/types/date-time-picker/Validation.ts      |  1 -
 4 files changed, 28 insertions(+), 26 deletions(-)
 delete mode 100644 src/types/date-time-picker/Validation.ts

diff --git a/src/components/feature-date-time-picker/DatePicker.vue b/src/components/feature-date-time-picker/DatePicker.vue
index 19f7acd2d8..4e657e24b9 100644
--- a/src/components/feature-date-time-picker/DatePicker.vue
+++ b/src/components/feature-date-time-picker/DatePicker.vue
@@ -49,10 +49,10 @@
 import { useDebounceFn } from "@vueuse/core";
 import dayjs from "dayjs";
 import { computed, defineComponent, ref, watch, onMounted } from "vue";
-import { ValidationRule } from "@/types/date-time-picker/Validation";
 import { useI18n } from "@/composables/i18n.composable";
 import { DATETIME_FORMAT } from "@/plugins/datetime";
 import { dateInputMask } from "@util-input-masks";
+import { isRequired, isValidDateFormat } from "@util-validators";
 
 export default defineComponent({
 	name: "DatePicker",
@@ -117,31 +117,15 @@ export default defineComponent({
 			}, 100);
 		};
 
-		const requiredRule: ValidationRule = (value: string | null) => {
-			return value === "" || value === null
-				? t("components.datePicker.validation.required")
-				: true;
-		};
-
-		const formatRule: ValidationRule = (value: string | null) => {
-			if (value === "" || value === null) {
-				return true;
-			}
-
-			const dateRegex = /^(0[1-9]|[12]\d|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/g;
-
-			return !value.match(dateRegex)
-				? t("components.datePicker.validation.format")
-				: true;
-		};
-
-		const rules = computed<ValidationRule[]>(() => {
-			const rules: ValidationRule[] = [];
+		const rules = computed(() => {
+			const rules = [
+				isValidDateFormat(t("components.datePicker.validation.format")),
+			];
 
 			if (props.required) {
-				rules.push(requiredRule);
+				rules.push(isRequired(t("components.datePicker.validation.required")));
 			}
-			rules.push(formatRule);
+
 			return rules;
 		});
 
diff --git a/src/components/util-validators/index.ts b/src/components/util-validators/index.ts
index b1d335d10e..3c70590c55 100644
--- a/src/components/util-validators/index.ts
+++ b/src/components/util-validators/index.ts
@@ -1,3 +1,8 @@
-import { isRequired, isValidUrl, isValidTimeFormat } from "./validators";
+import {
+	isRequired,
+	isValidUrl,
+	isValidTimeFormat,
+	isValidDateFormat,
+} from "./validators";
 
-export { isRequired, isValidUrl, isValidTimeFormat };
+export { isRequired, isValidUrl, isValidTimeFormat, isValidDateFormat };
diff --git a/src/components/util-validators/validators.ts b/src/components/util-validators/validators.ts
index 6d6cbbb0b8..48a4cfed84 100644
--- a/src/components/util-validators/validators.ts
+++ b/src/components/util-validators/validators.ts
@@ -42,3 +42,17 @@ export const isValidTimeFormat: FormValidatorFn<string> =
 
 		return !value.match(timeRegex) ? errMsg : true;
 	};
+
+/**
+ * Checks if given value has valid time format
+ */
+export const isValidDateFormat: FormValidatorFn<string> =
+	(errMsg) => (value) => {
+		if (value === "" || value === null) {
+			return true;
+		}
+
+		const dateRegex = /^(0[1-9]|[12]\d|3[01])\.(0[1-9]|1[0-2])\.\d{4}$/g;
+
+		return !value.match(dateRegex) ? errMsg : true;
+	};
diff --git a/src/types/date-time-picker/Validation.ts b/src/types/date-time-picker/Validation.ts
deleted file mode 100644
index 8cffab4783..0000000000
--- a/src/types/date-time-picker/Validation.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type ValidationRule = (value: string | null) => boolean | string;

From efd1ef1f4ee868ff5dad284e87c4732e5b8f52a8 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Thu, 26 Oct 2023 16:21:21 +0200
Subject: [PATCH 19/35] typing date first draft

---
 .../feature-date-time-picker/DatePicker.vue   | 35 ++++++++-----------
 .../util-input-masks/InputsMasks.ts           |  4 +++
 2 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/src/components/feature-date-time-picker/DatePicker.vue b/src/components/feature-date-time-picker/DatePicker.vue
index 4e657e24b9..3f55c40df5 100644
--- a/src/components/feature-date-time-picker/DatePicker.vue
+++ b/src/components/feature-date-time-picker/DatePicker.vue
@@ -11,7 +11,7 @@
 			<template #activator="{ on, attrs }">
 				<v-text-field
 					ref="inputField"
-					v-model="formattedDate"
+					v-model="modelValue"
 					v-bind="attrs"
 					v-on="on"
 					:label="label"
@@ -31,7 +31,7 @@
 				/>
 			</template>
 			<v-date-picker
-				v-model="modelValue"
+				:value="date"
 				:aria-expanded="showDateDialog"
 				color="primary"
 				no-title
@@ -47,10 +47,8 @@
 
 <script lang="ts">
 import { useDebounceFn } from "@vueuse/core";
-import dayjs from "dayjs";
-import { computed, defineComponent, ref, watch, onMounted } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import { useI18n } from "@/composables/i18n.composable";
-import { DATETIME_FORMAT } from "@/plugins/datetime";
 import { dateInputMask } from "@util-input-masks";
 import { isRequired, isValidDateFormat } from "@util-validators";
 
@@ -86,7 +84,12 @@ export default defineComponent({
 		 */
 		const emitDateDebounced = useDebounceFn((newValue) => {
 			if (valid.value) {
-				emit("update:date", newValue);
+				if (newValue.includes(".")) {
+					const formatted = getISODate(newValue);
+					emit("update:date", formatted);
+				} else {
+					emit("update:date", newValue);
+				}
 			}
 		}, 50);
 
@@ -94,18 +97,10 @@ export default defineComponent({
 		const inputField = ref<HTMLInputElement | null>(null);
 		const valid = ref(true);
 
-		const formattedDate = ref("");
-
-		onMounted(() => {
-			formattedDate.value = modelValue.value
-				? dayjs(modelValue.value).format(DATETIME_FORMAT.date)
-				: "";
-		});
-
-		watch(formattedDate, (newVal) => {
-			const [day, month, year] = newVal.split(".");
-			modelValue.value = `${year}-${month}-${day}`;
-		});
+		const getISODate = (date: string) => {
+			const [day, month, year] = date.split(".");
+			return `${year}-${month}-${day}`;
+		};
 
 		const focusDatePicker = () => {
 			setTimeout(() => {
@@ -129,7 +124,8 @@ export default defineComponent({
 			return rules;
 		});
 
-		const onInput = async () => {
+		const onInput = async (date: string) => {
+			modelValue.value = date;
 			inputField.value?.focus();
 			await closeMenu();
 		};
@@ -161,7 +157,6 @@ export default defineComponent({
 			modelValue,
 			rules,
 			showDateDialog,
-			formattedDate,
 			inputField,
 			focusDatePicker,
 			onInput,
diff --git a/src/components/util-input-masks/InputsMasks.ts b/src/components/util-input-masks/InputsMasks.ts
index 63c858e562..76b5ca4291 100644
--- a/src/components/util-input-masks/InputsMasks.ts
+++ b/src/components/util-input-masks/InputsMasks.ts
@@ -2,6 +2,10 @@ import { createInputMask } from "./InputMask.factory";
 
 export const dateInputMask = createInputMask({
 	mask: "##.##.####",
+	preProcess: (value: string) => {
+		const [year, month, day] = value.split("-");
+		return day + month + year;
+	},
 });
 
 export const timeInputMask = createInputMask({ mask: "##:##" });

From e6f1263bdcb240a8fd5028f45ae9279bc21d8350 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Fri, 27 Oct 2023 11:26:17 +0200
Subject: [PATCH 20/35] move datetimepicker from feature to ui

---
 .../components/SubmissionContentElementEdit.unit.ts           | 2 +-
 .../components/SubmissionContentElementEdit.vue               | 2 +-
 .../DatePicker.unit.ts                                        | 0
 .../DatePicker.vue                                            | 0
 .../DateTimePicker.unit.ts                                    | 0
 .../DateTimePicker.vue                                        | 0
 .../TimePicker.unit.ts                                        | 0
 .../TimePicker.vue                                            | 0
 .../TimePickerState.composable.ts                             | 0
 .../index.ts                                                  | 0
 tsconfig.json                                                 | 2 +-
 vue.config.js                                                 | 4 +---
 12 files changed, 4 insertions(+), 6 deletions(-)
 rename src/components/{feature-date-time-picker => ui-date-time-picker}/DatePicker.unit.ts (100%)
 rename src/components/{feature-date-time-picker => ui-date-time-picker}/DatePicker.vue (100%)
 rename src/components/{feature-date-time-picker => ui-date-time-picker}/DateTimePicker.unit.ts (100%)
 rename src/components/{feature-date-time-picker => ui-date-time-picker}/DateTimePicker.vue (100%)
 rename src/components/{feature-date-time-picker => ui-date-time-picker}/TimePicker.unit.ts (100%)
 rename src/components/{feature-date-time-picker => ui-date-time-picker}/TimePicker.vue (100%)
 rename src/components/{feature-date-time-picker => ui-date-time-picker}/TimePickerState.composable.ts (100%)
 rename src/components/{feature-date-time-picker => ui-date-time-picker}/index.ts (100%)

diff --git a/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.unit.ts b/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.unit.ts
index 1381657e3f..c503e1be24 100644
--- a/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.unit.ts
+++ b/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.unit.ts
@@ -5,7 +5,7 @@ import { shallowMount, MountOptions } from "@vue/test-utils";
 import SubmissionContentElementEdit from "./SubmissionContentElementEdit.vue";
 import SubmissionItemsTeacherDisplay from "./SubmissionItemsTeacherDisplay.vue";
 import { i18nMock, submissionsResponseFactory } from "@@/tests/test-utils";
-import { DateTimePicker } from "@feature-date-time-picker";
+import { DateTimePicker } from "@ui-date-time-picker";
 
 const mockedSubmissions = submissionsResponseFactory.build();
 
diff --git a/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.vue b/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.vue
index f54269ba2e..e4a225105b 100644
--- a/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.vue
+++ b/src/components/feature-board-submission-element/components/SubmissionContentElementEdit.vue
@@ -26,7 +26,7 @@ import { defineComponent, PropType } from "vue";
 import { useI18n } from "@/composables/i18n.composable";
 import { TeacherSubmission } from "../types/submission";
 import SubmissionContentElementTitle from "./SubmissionContentElementTitle.vue";
-import { DateTimePicker } from "@feature-date-time-picker";
+import { DateTimePicker } from "@ui-date-time-picker";
 import SubmissionItemsTeacherDisplay from "./SubmissionItemsTeacherDisplay.vue";
 
 export default defineComponent({
diff --git a/src/components/feature-date-time-picker/DatePicker.unit.ts b/src/components/ui-date-time-picker/DatePicker.unit.ts
similarity index 100%
rename from src/components/feature-date-time-picker/DatePicker.unit.ts
rename to src/components/ui-date-time-picker/DatePicker.unit.ts
diff --git a/src/components/feature-date-time-picker/DatePicker.vue b/src/components/ui-date-time-picker/DatePicker.vue
similarity index 100%
rename from src/components/feature-date-time-picker/DatePicker.vue
rename to src/components/ui-date-time-picker/DatePicker.vue
diff --git a/src/components/feature-date-time-picker/DateTimePicker.unit.ts b/src/components/ui-date-time-picker/DateTimePicker.unit.ts
similarity index 100%
rename from src/components/feature-date-time-picker/DateTimePicker.unit.ts
rename to src/components/ui-date-time-picker/DateTimePicker.unit.ts
diff --git a/src/components/feature-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
similarity index 100%
rename from src/components/feature-date-time-picker/DateTimePicker.vue
rename to src/components/ui-date-time-picker/DateTimePicker.vue
diff --git a/src/components/feature-date-time-picker/TimePicker.unit.ts b/src/components/ui-date-time-picker/TimePicker.unit.ts
similarity index 100%
rename from src/components/feature-date-time-picker/TimePicker.unit.ts
rename to src/components/ui-date-time-picker/TimePicker.unit.ts
diff --git a/src/components/feature-date-time-picker/TimePicker.vue b/src/components/ui-date-time-picker/TimePicker.vue
similarity index 100%
rename from src/components/feature-date-time-picker/TimePicker.vue
rename to src/components/ui-date-time-picker/TimePicker.vue
diff --git a/src/components/feature-date-time-picker/TimePickerState.composable.ts b/src/components/ui-date-time-picker/TimePickerState.composable.ts
similarity index 100%
rename from src/components/feature-date-time-picker/TimePickerState.composable.ts
rename to src/components/ui-date-time-picker/TimePickerState.composable.ts
diff --git a/src/components/feature-date-time-picker/index.ts b/src/components/ui-date-time-picker/index.ts
similarity index 100%
rename from src/components/feature-date-time-picker/index.ts
rename to src/components/ui-date-time-picker/index.ts
diff --git a/tsconfig.json b/tsconfig.json
index e91ceb4f3a..b42953441c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -37,12 +37,12 @@
 				"src/components/feature-board-external-tool-element"
 			],
 			"@feature-board": ["src/components/feature-board"],
-			"@feature-date-time-picker": ["src/components/feature-date-time-picker"],
 			"@feature-editor": ["src/components/feature-editor"],
 			"@feature-render-html": ["src/components/feature-render-html"],
 			"@ui-alert": ["src/components/ui-alert"],
 			"@ui-board": ["src/components/ui-board"],
 			"@ui-confirmation-dialog": ["src/components/ui-confirmation-dialog"],
+			"@ui-date-time-picker": ["src/components/ui-date-time-picker"],
 			"@ui-light-box": ["src/components/ui-light-box"],
 			"@util-board": ["src/components/util-board"],
 			"@util-validators": ["src/components/util-validators"],
diff --git a/vue.config.js b/vue.config.js
index 64e3a618ae..86c49903a9 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -40,9 +40,6 @@ module.exports = defineConfig({
 					"src/components/feature-board-external-tool-element"
 				),
 				"@feature-board": getDir("src/components/feature-board"),
-				"@feature-date-time-picker": getDir(
-					"src/components/feature-date-time-picker"
-				),
 				"@feature-editor": getDir("src/components/feature-editor"),
 				"@feature-render-html": getDir("src/components/feature-render-html"),
 				"@ui-alert": getDir("src/components/ui-alert"),
@@ -50,6 +47,7 @@ module.exports = defineConfig({
 				"@ui-confirmation-dialog": getDir(
 					"src/components/ui-confirmation-dialog"
 				),
+				"@ui-date-time-picker": getDir("src/components/ui-date-time-picker"),
 				"@ui-light-box": getDir("src/components/ui-light-box"),
 				"@util-board": getDir("src/components/util-board"),
 				"@util-validators": getDir("src/components/util-validators"),

From 92246d888eabe48429a260715f1116b6a2b5a381 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Fri, 27 Oct 2023 11:33:40 +0200
Subject: [PATCH 21/35] maska.js as ts

---
 __mocks__/{maska.js => maska.ts} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename __mocks__/{maska.js => maska.ts} (100%)

diff --git a/__mocks__/maska.js b/__mocks__/maska.ts
similarity index 100%
rename from __mocks__/maska.js
rename to __mocks__/maska.ts

From 2db93e7ef90b7e3f02618add921025bfbb4a9ba4 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Thu, 2 Nov 2023 13:38:10 +0100
Subject: [PATCH 22/35] add message field to datetimepicker

---
 .../ui-date-time-picker/DatePicker.vue        | 16 +---
 .../ui-date-time-picker/DateTimePicker.vue    | 90 ++++++++++++++-----
 .../ui-date-time-picker/TimePicker.vue        |  5 +-
 3 files changed, 74 insertions(+), 37 deletions(-)

diff --git a/src/components/ui-date-time-picker/DatePicker.vue b/src/components/ui-date-time-picker/DatePicker.vue
index 3f55c40df5..4fd8565b6f 100644
--- a/src/components/ui-date-time-picker/DatePicker.vue
+++ b/src/components/ui-date-time-picker/DatePicker.vue
@@ -19,7 +19,6 @@
 					:placeholder="$t('common.placeholder.dateformat')"
 					:class="{ 'menu-open': showDateDialog }"
 					append-icon="$mdiCalendar"
-					:messages="messages"
 					:rules="rules"
 					data-testid="date-input"
 					v-dateInputMask
@@ -61,12 +60,11 @@ export default defineComponent({
 		required: { type: Boolean },
 		minDate: { type: String },
 		maxDate: { type: String },
-		dateTimeInPast: { type: Boolean, default: false },
 	},
 	directives: {
 		dateInputMask,
 	},
-	emits: ["update:date"],
+	emits: ["update:date", "error"],
 	setup(props, { emit }) {
 		const { t, locale } = useI18n();
 
@@ -132,6 +130,9 @@ export default defineComponent({
 
 		const onError = (hasError: boolean) => {
 			valid.value = !hasError;
+			if (hasError) {
+				emit("error");
+			}
 		};
 
 		const onMenuToggle = () => {
@@ -144,14 +145,6 @@ export default defineComponent({
 			showDateDialog.value = false;
 		}, 50);
 
-		const messages = computed(() => {
-			if (props.dateTimeInPast) {
-				return t("components.datePicker.messages.future");
-			}
-
-			return [];
-		});
-
 		return {
 			locale,
 			modelValue,
@@ -162,7 +155,6 @@ export default defineComponent({
 			onInput,
 			onError,
 			onMenuToggle,
-			messages,
 		};
 	},
 });
diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index efb5604181..e3f03a647a 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -1,23 +1,30 @@
 <template>
-	<div class="d-flex flex-row">
-		<date-picker
-			class="mr-2 picker-width"
-			:required="dateRequired"
-			:date="date"
-			:label="dateInputLabel"
-			:aria-label="dateInputAriaLabel"
-			:minDate="minDate"
-			:maxDate="maxDate"
-			:date-time-in-past="dateTimeInPast"
-			@update:date="onDateUpdate"
-		/>
-		<time-picker
-			class="picker-width"
-			:time="time"
-			:label="timeInputLabel"
-			:aria-label="timeInputAriaLabel"
-			@update:time="onTimeUpdate"
-		/>
+	<div class="wrapper">
+		<div class="d-flex flex-row">
+			<date-picker
+				class="mr-2 picker-width"
+				:date="date"
+				:label="dateInputLabel"
+				:aria-label="dateInputAriaLabel"
+				:minDate="minDate"
+				:maxDate="maxDate"
+				@update:date="onDateUpdate"
+				@error="onError('date')"
+			/>
+			<time-picker
+				class="picker-width"
+				:time="time"
+				:label="timeInputLabel"
+				:aria-label="timeInputAriaLabel"
+				@update:time="onTimeUpdate"
+				@error="onError('time')"
+			/>
+		</div>
+		<v-slide-y-transition>
+			<span v-if="message" class="v-messages theme--light message">
+				{{ message }}
+			</span>
+		</v-slide-y-transition>
 	</div>
 </template>
 
@@ -25,7 +32,7 @@
 import DatePicker from "./DatePicker.vue";
 import TimePicker from "./TimePicker.vue";
 import { useVModel } from "@vueuse/core";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, ref, watch } from "vue";
 import { useI18n } from "@/composables/i18n.composable";
 import dayjs from "dayjs";
 
@@ -49,9 +56,7 @@ export default defineComponent({
 	},
 	emits: ["input"],
 	setup(props, { emit }) {
-		const { locale } = useI18n();
-
-		const dateTimeInPast = ref(false);
+		const { locale, t } = useI18n();
 
 		const getTime = (dateIsoString: string) => {
 			if (dateIsoString === "") {
@@ -64,6 +69,7 @@ export default defineComponent({
 		};
 
 		const dateTime = useVModel(props, "dateTime");
+		const dateTimeInPast = ref(new Date(dateTime.value) < new Date());
 		const date = ref(
 			dateTime.value ? dayjs(dateTime.value).format("YYYY-MM-DD") : ""
 		);
@@ -90,13 +96,37 @@ export default defineComponent({
 			emit("input", dateTime.toISOString());
 		};
 
+		const errors = ref<Array<string>>([]);
+		const message = computed(() => {
+			if (errors.value.length > 0) return "";
+
+			if (dateTimeInPast.value) {
+				return t("components.datePicker.messages.future");
+			}
+
+			if (dateRequired.value && !date.value) {
+				return t("components.datePicker.validation.required");
+			}
+
+			return "";
+		});
+
+		const onError = (errorOrigin: string) => {
+			if (errors.value.indexOf(errorOrigin) === -1) {
+				errors.value.push(errorOrigin);
+			}
+		};
+
 		const onDateUpdate = (newDate: string) => {
 			date.value = newDate;
+			errors.value = errors.value.filter((item) => item !== "date");
+
 			emitDateTime();
 		};
 
 		const onTimeUpdate = (newTime: string) => {
 			time.value = newTime;
+			errors.value = errors.value.filter((item) => item !== "time");
 			emitDateTime();
 		};
 
@@ -106,7 +136,9 @@ export default defineComponent({
 			onDateUpdate,
 			onTimeUpdate,
 			dateRequired,
-			dateTimeInPast,
+			message,
+			errors,
+			onError,
 		};
 	},
 });
@@ -116,4 +148,14 @@ export default defineComponent({
 .picker-width {
 	width: 225px;
 }
+
+.wrapper {
+	position: relative;
+}
+
+.message {
+	line-height: 14px;
+	position: absolute;
+	bottom: 0px;
+}
 </style>
diff --git a/src/components/ui-date-time-picker/TimePicker.vue b/src/components/ui-date-time-picker/TimePicker.vue
index d0672b6b52..d7d46e0073 100644
--- a/src/components/ui-date-time-picker/TimePicker.vue
+++ b/src/components/ui-date-time-picker/TimePicker.vue
@@ -69,7 +69,7 @@ export default defineComponent({
 	directives: {
 		timeInputMask,
 	},
-	emits: ["update:time"],
+	emits: ["update:time", "error"],
 	setup(props, { emit }) {
 		const { t } = useI18n();
 
@@ -115,6 +115,9 @@ export default defineComponent({
 
 		const onError = (hasError: boolean) => {
 			valid.value = !hasError;
+			if (hasError) {
+				emit("error");
+			}
 		};
 
 		const onMenuToggle = () => {

From 0276922c4b6a92b42bb82303382bc195e10faffe Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Thu, 2 Nov 2023 14:26:02 +0100
Subject: [PATCH 23/35] show date required when time is set

---
 .../ui-date-time-picker/DateTimePicker.vue       | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index e3f03a647a..3ff7f7aa2d 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -82,10 +82,16 @@ export default defineComponent({
 			}
 
 			let timeValue = time.value;
-			if (timeValue === "") {
+			if (timeValue === "" && date.value) {
 				timeValue = "23:59";
 			}
 
+			if (date.value === "" && timeValue === "") {
+				dateTimeInPast.value = false;
+				emit("input", null);
+				return;
+			}
+
 			const dateTime = new Date(date.value);
 			const hoursAndMinutes = timeValue.split(":");
 			dateTime.setHours(
@@ -100,14 +106,14 @@ export default defineComponent({
 		const message = computed(() => {
 			if (errors.value.length > 0) return "";
 
-			if (dateTimeInPast.value) {
-				return t("components.datePicker.messages.future");
-			}
-
 			if (dateRequired.value && !date.value) {
 				return t("components.datePicker.validation.required");
 			}
 
+			if (dateTimeInPast.value) {
+				return t("components.datePicker.messages.future");
+			}
+
 			return "";
 		});
 

From 1ff1fe06d08077f54bfd7584142ee0e9044a3542 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Thu, 2 Nov 2023 14:59:08 +0100
Subject: [PATCH 24/35] don't show message on open empty

---
 src/components/ui-date-time-picker/DatePicker.vue     | 2 +-
 src/components/ui-date-time-picker/DateTimePicker.vue | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/ui-date-time-picker/DatePicker.vue b/src/components/ui-date-time-picker/DatePicker.vue
index 4fd8565b6f..5efd1a5165 100644
--- a/src/components/ui-date-time-picker/DatePicker.vue
+++ b/src/components/ui-date-time-picker/DatePicker.vue
@@ -14,6 +14,7 @@
 					v-model="modelValue"
 					v-bind="attrs"
 					v-on="on"
+					v-dateInputMask
 					:label="label"
 					:aria-label="ariaLabel"
 					:placeholder="$t('common.placeholder.dateformat')"
@@ -21,7 +22,6 @@
 					append-icon="$mdiCalendar"
 					:rules="rules"
 					data-testid="date-input"
-					v-dateInputMask
 					@keydown.space="showDateDialog = true"
 					@keydown.prevent.enter="showDateDialog = true"
 					@keydown.prevent.down="focusDatePicker"
diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index 3ff7f7aa2d..f9d53f268f 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -32,7 +32,7 @@
 import DatePicker from "./DatePicker.vue";
 import TimePicker from "./TimePicker.vue";
 import { useVModel } from "@vueuse/core";
-import { computed, defineComponent, ref, watch } from "vue";
+import { computed, defineComponent, ref } from "vue";
 import { useI18n } from "@/composables/i18n.composable";
 import dayjs from "dayjs";
 
@@ -69,7 +69,9 @@ export default defineComponent({
 		};
 
 		const dateTime = useVModel(props, "dateTime");
-		const dateTimeInPast = ref(new Date(dateTime.value) < new Date());
+		const dateTimeInPast = ref(
+			dateTime.value && new Date(dateTime.value) < new Date()
+		);
 		const date = ref(
 			dateTime.value ? dayjs(dateTime.value).format("YYYY-MM-DD") : ""
 		);

From 796cbcd5158aa26c4342c96f7145acb82d8a9e9f Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Fri, 3 Nov 2023 10:37:12 +0100
Subject: [PATCH 25/35] allow empty date

---
 src/components/ui-date-time-picker/DateTimePicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index f9d53f268f..bedc8ccb0c 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -79,7 +79,7 @@ export default defineComponent({
 		const dateRequired = computed(() => time.value !== "");
 
 		const emitDateTime = () => {
-			if (date.value === "") {
+			if (date.value === "" && dateRequired.value) {
 				return;
 			}
 

From 489c6f61d4f4e49d83e92b7f56136b3b3e8d9052 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Fri, 3 Nov 2023 11:17:23 +0100
Subject: [PATCH 26/35] reduce complexity

---
 .../ui-date-time-picker/DateTimePicker.vue    | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index bedc8ccb0c..d137113c34 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -69,33 +69,30 @@ export default defineComponent({
 		};
 
 		const dateTime = useVModel(props, "dateTime");
-		const dateTimeInPast = ref(
-			dateTime.value && new Date(dateTime.value) < new Date()
-		);
 		const date = ref(
 			dateTime.value ? dayjs(dateTime.value).format("YYYY-MM-DD") : ""
 		);
 		const time = ref(dateTime.value ? getTime(dateTime.value) : "");
 		const dateRequired = computed(() => time.value !== "");
+		const dateTimeInPast = ref(
+			dateTime.value && new Date(dateTime.value) < new Date()
+		);
 
 		const emitDateTime = () => {
-			if (date.value === "" && dateRequired.value) {
+			if (date.value === "" && time.value === "") {
+				dateTimeInPast.value = false;
+				emit("input", null);
 				return;
 			}
 
-			let timeValue = time.value;
-			if (timeValue === "" && date.value) {
-				timeValue = "23:59";
-			}
-
-			if (date.value === "" && timeValue === "") {
-				dateTimeInPast.value = false;
-				emit("input", null);
+			if (date.value === "" && dateRequired.value) {
 				return;
 			}
 
+			const timeValue = time.value || "23.59";
 			const dateTime = new Date(date.value);
 			const hoursAndMinutes = timeValue.split(":");
+
 			dateTime.setHours(
 				parseInt(hoursAndMinutes[0]),
 				parseInt(hoursAndMinutes[1])

From 6d96060c1a1dc76e57470abaeaf13ba59fa72f3f Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Fri, 3 Nov 2023 12:06:50 +0100
Subject: [PATCH 27/35] fix typo

---
 src/components/ui-date-time-picker/DateTimePicker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index d137113c34..fc81d79fc4 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -89,7 +89,7 @@ export default defineComponent({
 				return;
 			}
 
-			const timeValue = time.value || "23.59";
+			const timeValue = time.value || "23:59";
 			const dateTime = new Date(date.value);
 			const hoursAndMinutes = timeValue.split(":");
 

From 81adb5a69adc77b359763560e999238358ff44df Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Tue, 7 Nov 2023 12:11:22 +0100
Subject: [PATCH 28/35] small refactors

---
 src/components/ui-date-time-picker/DatePicker.vue     | 10 ++++------
 src/components/ui-date-time-picker/DateTimePicker.vue |  5 +++--
 src/plugins/datetime.js                               |  4 ++++
 src/plugins/datetime.unit.js                          |  6 ++++++
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/ui-date-time-picker/DatePicker.vue b/src/components/ui-date-time-picker/DatePicker.vue
index 5efd1a5165..cd8676c5cc 100644
--- a/src/components/ui-date-time-picker/DatePicker.vue
+++ b/src/components/ui-date-time-picker/DatePicker.vue
@@ -82,12 +82,8 @@ export default defineComponent({
 		 */
 		const emitDateDebounced = useDebounceFn((newValue) => {
 			if (valid.value) {
-				if (newValue.includes(".")) {
-					const formatted = getISODate(newValue);
-					emit("update:date", formatted);
-				} else {
-					emit("update:date", newValue);
-				}
+				const dateISO = getISODate(newValue);
+				emit("update:date", dateISO);
 			}
 		}, 50);
 
@@ -96,6 +92,8 @@ export default defineComponent({
 		const valid = ref(true);
 
 		const getISODate = (date: string) => {
+			if (!date.includes(".")) return date;
+
 			const [day, month, year] = date.split(".");
 			return `${year}-${month}-${day}`;
 		};
diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index fc81d79fc4..fb733ad76d 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -35,6 +35,7 @@ import { useVModel } from "@vueuse/core";
 import { computed, defineComponent, ref } from "vue";
 import { useI18n } from "@/composables/i18n.composable";
 import dayjs from "dayjs";
+import { isDateTimeInPast } from "@/plugins/datetime";
 
 export default defineComponent({
 	name: "DateTimePicker",
@@ -75,7 +76,7 @@ export default defineComponent({
 		const time = ref(dateTime.value ? getTime(dateTime.value) : "");
 		const dateRequired = computed(() => time.value !== "");
 		const dateTimeInPast = ref(
-			dateTime.value && new Date(dateTime.value) < new Date()
+			dateTime.value && isDateTimeInPast(dateTime.value)
 		);
 
 		const emitDateTime = () => {
@@ -97,7 +98,7 @@ export default defineComponent({
 				parseInt(hoursAndMinutes[0]),
 				parseInt(hoursAndMinutes[1])
 			);
-			dateTimeInPast.value = dateTime < new Date();
+			dateTimeInPast.value = isDateTimeInPast(dateTime);
 			emit("input", dateTime.toISOString());
 		};
 
diff --git a/src/plugins/datetime.js b/src/plugins/datetime.js
index b8b54e1213..8779f951cf 100644
--- a/src/plugins/datetime.js
+++ b/src/plugins/datetime.js
@@ -297,6 +297,10 @@ export const currentDate = () => {
 	return dayjs.tz();
 };
 
+export const isDateTimeInPast = (dateTime) => {
+	return new Date(dateTime) < new Date();
+};
+
 export const isToday = (date) => {
 	const dateObject = typeof date === Date ? date : new Date(date);
 	const today = new Date();
diff --git a/src/plugins/datetime.unit.js b/src/plugins/datetime.unit.js
index 5a47baa896..6e295195dd 100644
--- a/src/plugins/datetime.unit.js
+++ b/src/plugins/datetime.unit.js
@@ -16,6 +16,7 @@ import {
 	calculateUTC,
 	setDefaultFormats,
 	DATETIME_FORMAT,
+	isDateTimeInPast,
 } from "@/plugins/datetime";
 import datetime from "@/plugins/datetime";
 import dayjs from "dayjs";
@@ -194,6 +195,11 @@ describe("@/plugins/datetime", () => {
 		expect(resultDateTimeString).toStrictEqual(dateString);
 	});
 
+	it("isDateTimeInPast", () => {
+		const date = new Date("1991-12-31");
+		expect(isDateTimeInPast(date)).toStrictEqual(true);
+	});
+
 	const mockApp = {
 		$cookies: {
 			get: jest

From a2828346a3df97f3326b4139d0ec56276479cb34 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Tue, 7 Nov 2023 12:15:04 +0100
Subject: [PATCH 29/35] small datetimepicker refactor

---
 .../ui-date-time-picker/DateTimePicker.vue        | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index fb733ad76d..88c8aeeec7 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -35,7 +35,7 @@ import { useVModel } from "@vueuse/core";
 import { computed, defineComponent, ref } from "vue";
 import { useI18n } from "@/composables/i18n.composable";
 import dayjs from "dayjs";
-import { isDateTimeInPast } from "@/plugins/datetime";
+import { isDateTimeInPast, DATETIME_FORMAT } from "@/plugins/datetime";
 
 export default defineComponent({
 	name: "DateTimePicker",
@@ -59,6 +59,13 @@ export default defineComponent({
 	setup(props, { emit }) {
 		const { locale, t } = useI18n();
 
+		const getDate = (dateIsoString: string) => {
+			if (dateIsoString === "") {
+				return "";
+			}
+			return dayjs(dateTime.value).format(DATETIME_FORMAT.inputDate);
+		};
+
 		const getTime = (dateIsoString: string) => {
 			if (dateIsoString === "") {
 				return "";
@@ -70,10 +77,8 @@ export default defineComponent({
 		};
 
 		const dateTime = useVModel(props, "dateTime");
-		const date = ref(
-			dateTime.value ? dayjs(dateTime.value).format("YYYY-MM-DD") : ""
-		);
-		const time = ref(dateTime.value ? getTime(dateTime.value) : "");
+		const date = ref(getDate(dateTime.value));
+		const time = ref(getTime(dateTime.value));
 		const dateRequired = computed(() => time.value !== "");
 		const dateTimeInPast = ref(
 			dateTime.value && isDateTimeInPast(dateTime.value)

From a341d583057a733f89606b1fcbda499f5d5f6e93 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Tue, 7 Nov 2023 12:17:56 +0100
Subject: [PATCH 30/35] check for falsey

---
 src/components/ui-date-time-picker/DateTimePicker.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index 88c8aeeec7..24bbb7f932 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -60,14 +60,14 @@ export default defineComponent({
 		const { locale, t } = useI18n();
 
 		const getDate = (dateIsoString: string) => {
-			if (dateIsoString === "") {
+			if (!dateIsoString) {
 				return "";
 			}
 			return dayjs(dateTime.value).format(DATETIME_FORMAT.inputDate);
 		};
 
 		const getTime = (dateIsoString: string) => {
-			if (dateIsoString === "") {
+			if (!dateIsoString) {
 				return "";
 			}
 			return new Date(dateIsoString).toLocaleTimeString(locale, {
@@ -85,6 +85,7 @@ export default defineComponent({
 		);
 
 		const emitDateTime = () => {
+			console.log(date.value, time.value);
 			if (date.value === "" && time.value === "") {
 				dateTimeInPast.value = false;
 				emit("input", null);

From 0a9849fc71509e40db9f1ff099f2773347701f35 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Tue, 7 Nov 2023 12:37:50 +0100
Subject: [PATCH 31/35] remove on menutoggle

---
 src/components/ui-date-time-picker/DatePicker.vue     | 8 --------
 src/components/ui-date-time-picker/DateTimePicker.vue | 1 -
 src/components/ui-date-time-picker/TimePicker.vue     | 8 --------
 3 files changed, 17 deletions(-)

diff --git a/src/components/ui-date-time-picker/DatePicker.vue b/src/components/ui-date-time-picker/DatePicker.vue
index cd8676c5cc..74358b0b64 100644
--- a/src/components/ui-date-time-picker/DatePicker.vue
+++ b/src/components/ui-date-time-picker/DatePicker.vue
@@ -6,7 +6,6 @@
 			transition="scale-transition"
 			nudge-bottom="70"
 			min-width="auto"
-			@input="onMenuToggle"
 		>
 			<template #activator="{ on, attrs }">
 				<v-text-field
@@ -133,12 +132,6 @@ export default defineComponent({
 			}
 		};
 
-		const onMenuToggle = () => {
-			if (showDateDialog.value) {
-				valid.value = true;
-			}
-		};
-
 		const closeMenu = useDebounceFn(() => {
 			showDateDialog.value = false;
 		}, 50);
@@ -152,7 +145,6 @@ export default defineComponent({
 			focusDatePicker,
 			onInput,
 			onError,
-			onMenuToggle,
 		};
 	},
 });
diff --git a/src/components/ui-date-time-picker/DateTimePicker.vue b/src/components/ui-date-time-picker/DateTimePicker.vue
index 24bbb7f932..f457270367 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.vue
+++ b/src/components/ui-date-time-picker/DateTimePicker.vue
@@ -85,7 +85,6 @@ export default defineComponent({
 		);
 
 		const emitDateTime = () => {
-			console.log(date.value, time.value);
 			if (date.value === "" && time.value === "") {
 				dateTimeInPast.value = false;
 				emit("input", null);
diff --git a/src/components/ui-date-time-picker/TimePicker.vue b/src/components/ui-date-time-picker/TimePicker.vue
index d7d46e0073..36c6f25ab3 100644
--- a/src/components/ui-date-time-picker/TimePicker.vue
+++ b/src/components/ui-date-time-picker/TimePicker.vue
@@ -7,7 +7,6 @@
 			nudge-bottom="70"
 			max-height="200"
 			min-width="180"
-			@input="onMenuToggle"
 		>
 			<template #activator="{ on, attrs }">
 				<v-text-field
@@ -120,12 +119,6 @@ export default defineComponent({
 			}
 		};
 
-		const onMenuToggle = () => {
-			if (showTimeDialog.value) {
-				valid.value = true;
-			}
-		};
-
 		const closeMenu = useDebounceFn(() => {
 			showTimeDialog.value = false;
 		}, 50);
@@ -138,7 +131,6 @@ export default defineComponent({
 			inputField,
 			onSelect,
 			onError,
-			onMenuToggle,
 		};
 	},
 });

From a80281744b1cb54aa3d6320c41c681fa32836e50 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Wed, 8 Nov 2023 12:00:51 +0100
Subject: [PATCH 32/35] maska directive mock variable

---
 .../util-input-masks/InputMask.unit.ts        | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/util-input-masks/InputMask.unit.ts b/src/components/util-input-masks/InputMask.unit.ts
index 515449355d..82bda59eb5 100644
--- a/src/components/util-input-masks/InputMask.unit.ts
+++ b/src/components/util-input-masks/InputMask.unit.ts
@@ -5,6 +5,13 @@ import { VNode } from "vue/types/umd";
 
 jest.mock("maska");
 
+const maskaDirectiveMock = {
+	element: {} as unknown as HTMLElement,
+	binding: {} as unknown as DirectiveBinding<unknown>,
+	vnode: {} as unknown as VNode,
+	oldVnode: {} as unknown as VNode,
+};
+
 describe("InputMask.factory", () => {
 	beforeEach(() => {
 		jest.clearAllMocks();
@@ -15,10 +22,10 @@ describe("InputMask.factory", () => {
 
 		const directive: DirectiveFunction = createInputMask({ mask: "" });
 		directive(
-			{} as unknown as HTMLElement,
-			{} as unknown as DirectiveBinding<unknown>,
-			{} as unknown as VNode,
-			{} as unknown as VNode
+			maskaDirectiveMock.element,
+			maskaDirectiveMock.binding,
+			maskaDirectiveMock.vnode,
+			maskaDirectiveMock.oldVnode
 		);
 		expect(mockedMaska).toHaveBeenCalledTimes(1);
 	});
@@ -30,10 +37,10 @@ describe("InputMask.factory", () => {
 
 		const directive: DirectiveFunction = createInputMask(options);
 		directive(
-			{} as unknown as HTMLElement,
-			{} as unknown as DirectiveBinding<unknown>,
-			{} as unknown as VNode,
-			{} as unknown as VNode
+			maskaDirectiveMock.element,
+			maskaDirectiveMock.binding,
+			maskaDirectiveMock.vnode,
+			maskaDirectiveMock.oldVnode
 		);
 		expect(mockedMaska).toHaveBeenCalledWith({}, { arg: options }, {}, {});
 	});

From e9c16d5eef0546fdcd2685a1244523c9da534b74 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Wed, 8 Nov 2023 12:12:47 +0100
Subject: [PATCH 33/35] add tests for validators

---
 .../util-validators/validators.unit.ts        | 44 ++++++++++++++++++-
 1 file changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/components/util-validators/validators.unit.ts b/src/components/util-validators/validators.unit.ts
index f3a0538447..26dfe538fb 100644
--- a/src/components/util-validators/validators.unit.ts
+++ b/src/components/util-validators/validators.unit.ts
@@ -1,8 +1,21 @@
-import { isValidUrl } from "@util-validators";
+import {
+	isValidUrl,
+	isRequired,
+	isValidTimeFormat,
+	isValidDateFormat,
+} from "@util-validators";
 
 describe("util-validators", () => {
+	const ERROR = "my error";
+
+	describe("isRequired", () => {
+		it("should accept not accept empty value", () => {
+			const isValid = isRequired(ERROR);
+			expect(isValid("")).toBe(ERROR);
+		});
+	});
+
 	describe("isValidUrl", () => {
-		const ERROR = "my error";
 		const isValid = isValidUrl(ERROR);
 
 		describe("when protocol is given", () => {
@@ -53,4 +66,31 @@ describe("util-validators", () => {
 			});
 		});
 	});
+
+	describe("isValidTimeFormat", () => {
+		const isValid = isValidTimeFormat(ERROR);
+
+		it("should accept valid time format", () => {
+			expect(isValid("12:12")).toBe(true);
+		});
+
+		it("should not accept invalid time format", () => {
+			expect(isValid("55:5")).toBe(ERROR);
+			expect(isValid("55:55")).toBe(ERROR);
+		});
+	});
+
+	describe("isValidDateFormat", () => {
+		const isValid = isValidDateFormat(ERROR);
+
+		it("should accept valid date format", () => {
+			expect(isValid("12.12.2023")).toBe(true);
+		});
+
+		it("should not accept invalid date format", () => {
+			expect(isValid("31.31.2023")).toBe(ERROR);
+			expect(isValid("1.1.2001")).toBe(ERROR);
+			expect(isValid("1.101")).toBe(ERROR);
+		});
+	});
 });

From 073c363a163ac67b66675d4c69dc982aed3960a7 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Wed, 8 Nov 2023 15:07:50 +0100
Subject: [PATCH 34/35] added unit tests

---
 .../ui-date-time-picker/DatePicker.unit.ts    | 20 +++++++++++++++++--
 .../DateTimePicker.unit.ts                    | 20 +++++++++++++++++++
 .../ui-date-time-picker/TimePicker.unit.ts    | 12 +++++------
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/src/components/ui-date-time-picker/DatePicker.unit.ts b/src/components/ui-date-time-picker/DatePicker.unit.ts
index 813cbde394..eb62ae87ab 100644
--- a/src/components/ui-date-time-picker/DatePicker.unit.ts
+++ b/src/components/ui-date-time-picker/DatePicker.unit.ts
@@ -62,8 +62,8 @@ describe("DatePicker", () => {
 		expect(wrapper.emitted("update:date")).toHaveLength(1);
 	});
 
-	describe("when date is required", () => {
-		it("should not emit update:date event on empty input", async () => {
+	describe("when date is invalid", () => {
+		it("should emit error event", async () => {
 			setup({
 				date: new Date().toISOString(),
 				required: true,
@@ -76,6 +76,22 @@ describe("DatePicker", () => {
 			await wrapper.vm.$nextTick();
 
 			expect(wrapper.emitted("update:date")).toBeUndefined();
+			expect(wrapper.emitted("error")).toHaveLength(1);
+		});
+
+		it("should emit error event", async () => {
+			setup({
+				date: "55.55.5555",
+			});
+
+			const textField = wrapper.findComponent({ name: "v-text-field" });
+			const input = textField.find("input");
+
+			await input.setValue("");
+			await wrapper.vm.$nextTick();
+
+			expect(wrapper.emitted("update:date")).toBeUndefined();
+			expect(wrapper.emitted("error")).toHaveLength(1);
 		});
 	});
 });
diff --git a/src/components/ui-date-time-picker/DateTimePicker.unit.ts b/src/components/ui-date-time-picker/DateTimePicker.unit.ts
index 8f57a6d2c9..4c0c70f8ae 100644
--- a/src/components/ui-date-time-picker/DateTimePicker.unit.ts
+++ b/src/components/ui-date-time-picker/DateTimePicker.unit.ts
@@ -97,4 +97,24 @@ describe("DateTimePicker", () => {
 			expect(wrapper.emitted("input")).toBe(undefined);
 		});
 	});
+
+	describe("if date and time values are removed", () => {
+		it("should emit input event", async () => {
+			jest.useFakeTimers();
+			setup({ dateTime: new Date().toISOString() });
+
+			const datePicker = wrapper.findComponent({ name: "date-picker" });
+			datePicker.vm.$emit("update:date", "");
+			jest.advanceTimersByTime(1000);
+
+			expect(wrapper.emitted("input")).toBe(undefined);
+
+			const timePicker = wrapper.findComponent({ name: "time-picker" });
+			timePicker.vm.$emit("update:time", "");
+
+			jest.advanceTimersByTime(1000);
+
+			expect(wrapper.emitted("input")).toHaveLength(1);
+		});
+	});
 });
diff --git a/src/components/ui-date-time-picker/TimePicker.unit.ts b/src/components/ui-date-time-picker/TimePicker.unit.ts
index 721b4adc86..6d07593698 100644
--- a/src/components/ui-date-time-picker/TimePicker.unit.ts
+++ b/src/components/ui-date-time-picker/TimePicker.unit.ts
@@ -95,7 +95,7 @@ describe("TimePicker", () => {
 		});
 
 		describe("when time is required", () => {
-			it("should no emit update:time event on empty input", async () => {
+			it("should no emit update:time event but error event on empty input", async () => {
 				setup({
 					time: "12:30",
 					required: true,
@@ -109,23 +109,22 @@ describe("TimePicker", () => {
 				await wrapper.vm.$nextTick();
 
 				expect(wrapper.emitted("update:time")).toBeUndefined();
+				expect(wrapper.emitted("error")).toHaveLength(1);
 			});
 		});
 
 		describe("when time is not required and value is empty", () => {
-			it("should not emit update:time event", async () => {
+			it("should emit update:time event", async () => {
 				setup({ time: "12:30" });
 
 				const input = wrapper
 					.findComponent({ name: "v-text-field" })
 					.find("input");
 
-				await input.trigger("focus");
 				await input.setValue("");
-				await input.trigger("blur");
-				await wrapper.vm.$nextTick();
+				jest.advanceTimersByTime(1000);
 
-				expect(wrapper.emitted("update:time")).toBe(undefined);
+				expect(wrapper.emitted("update:time")).toHaveLength(1);
 			});
 		});
 
@@ -142,6 +141,7 @@ describe("TimePicker", () => {
 				await wrapper.vm.$nextTick();
 
 				expect(wrapper.emitted("update:time")).toBeUndefined();
+				expect(wrapper.emitted("error")).toHaveLength(1);
 			});
 		});
 	});

From df4ddd4677d2d02f7b246359be66fa7d86401ee7 Mon Sep 17 00:00:00 2001
From: Odalys Adam <odalys.adam@dataport.de>
Date: Thu, 9 Nov 2023 12:15:25 +0100
Subject: [PATCH 35/35] fix typo

---
 src/components/util-validators/validators.unit.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/util-validators/validators.unit.ts b/src/components/util-validators/validators.unit.ts
index 26dfe538fb..baab820589 100644
--- a/src/components/util-validators/validators.unit.ts
+++ b/src/components/util-validators/validators.unit.ts
@@ -9,7 +9,7 @@ describe("util-validators", () => {
 	const ERROR = "my error";
 
 	describe("isRequired", () => {
-		it("should accept not accept empty value", () => {
+		it("should not accept empty value", () => {
 			const isValid = isRequired(ERROR);
 			expect(isValid("")).toBe(ERROR);
 		});