From 226458d1d5996adeb6c88142b264d22da535a7a0 Mon Sep 17 00:00:00 2001
From: tobinio <tobias.frischmann@proton.me>
Date: Fri, 22 May 2026 09:18:35 +0200
Subject: [PATCH] abstract edit / create todo form

---
 app/components/Edit/EditTodoSheet.vue         | 60 +++++++------------
 app/components/Edit/NewTodoSheet.vue          | 58 +++++++-----------
 .../{DataSelect.vue => TabedDataSelect.vue}   |  0
 app/components/Edit/TodoForm.vue              | 34 +++++++++++
 4 files changed, 79 insertions(+), 73 deletions(-)
 rename app/components/Edit/{DataSelect.vue => TabedDataSelect.vue} (100%)
 create mode 100644 app/components/Edit/TodoForm.vue

diff --git a/app/components/Edit/EditTodoSheet.vue b/app/components/Edit/EditTodoSheet.vue
index 17a7f0a..5cda629 100644
--- a/app/components/Edit/EditTodoSheet.vue
+++ b/app/components/Edit/EditTodoSheet.vue
@@ -2,8 +2,7 @@
 	import { computed, ref } from "vue";
 	import type { CreateTodoData, UUID } from "~/utils/types";
 	import Sheet from "../Utils/Sheet.vue";
-	import DataSelect from "./DataSelect.vue";
-	import TitleSelect from "./TitleSelect.vue";
+	import TodoForm from "./TodoForm.vue";
 
 	const isOpen = ref(false);
 
@@ -82,40 +81,27 @@
 		:size="modalSize"
 		@close="close"
 	>
-		<form
-			data-testid="edit-todo-sheet"
-			class="flex h-full flex-col justify-between"
-			@submit.prevent="onSaveTodo"
-		>
-			<TitleSelect v-model:title="todoData.title" />
-			<DataSelect
-				v-model:time="todoData.time"
-				v-model:tags="todoData.tags"
-				v-model:category="todoData.category"
-				v-model:note="todoData.note"
-			/>
-			<div class="flex h-10 gap-1">
-				<button
-					type="submit"
-					data-testid="submit-edit-todo-button"
-					:disabled="!isValid"
-					class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex aspect-square cursor-pointer items-center justify-center rounded transition-colors flex-1"
-				>
-					<Icon
-						v-if="showSaveIcon"
-						name="material-symbols:save-rounded"
-						size="24"
-					/>
-					<Icon v-else name="material-symbols:check-rounded" size="24" />
-				</button>
-				<button
-					type="button"
-					class="bg-secondary hover:bg-danger flex aspect-square cursor-pointer items-center justify-center rounded transition-colors"
-					@click="onDeleteTodo"
-				>
-					<Icon name="material-symbols:delete-outline-rounded" size="24" />
-				</button>
-			</div>
-		</form>
+		<TodoForm v-model:todo="todoData" @submit="onSaveTodo">
+			<button
+				type="submit"
+				data-testid="submit-edit-todo-button"
+				:disabled="!isValid"
+				class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex aspect-square cursor-pointer items-center justify-center rounded transition-colors flex-1"
+			>
+				<Icon
+					v-if="showSaveIcon"
+					name="material-symbols:save-rounded"
+					size="24"
+				/>
+				<Icon v-else name="material-symbols:check-rounded" size="24" />
+			</button>
+			<button
+				type="button"
+				class="bg-secondary hover:bg-danger flex aspect-square cursor-pointer items-center justify-center rounded transition-colors"
+				@click="onDeleteTodo"
+			>
+				<Icon name="material-symbols:delete-outline-rounded" size="24" />
+			</button>
+		</TodoForm>
 	</Sheet>
 </template>
diff --git a/app/components/Edit/NewTodoSheet.vue b/app/components/Edit/NewTodoSheet.vue
index 08e023e..9b41f87 100644
--- a/app/components/Edit/NewTodoSheet.vue
+++ b/app/components/Edit/NewTodoSheet.vue
@@ -2,8 +2,7 @@
 	import { computed, ref } from "vue";
 	import type { CreateTodoData } from "~/utils/types";
 	import Sheet from "../Utils/Sheet.vue";
-	import DataSelect from "./DataSelect.vue";
-	import TitleSelect from "./TitleSelect.vue";
+	import TodoForm from "./TodoForm.vue";
 
 	const { t } = useI18n();
 	const { modalSize } = useSettings();
@@ -72,39 +71,26 @@
 		:size="modalSize"
 		@close="close"
 	>
-		<form
-			data-testid="new-todo-sheet"
-			class="flex h-full flex-col justify-between"
-			@submit.prevent="onSubmitForm"
-		>
-			<TitleSelect v-model:title="todoData.title" />
-			<DataSelect
-				v-model:time="todoData.time"
-				v-model:tags="todoData.tags"
-				v-model:category="todoData.category"
-				v-model:note="todoData.note"
-			/>
-			<div class="flex h-10 gap-1">
-				<button
-					type="button"
-					data-testid="submit-new-todo-button"
-					:disabled="!isValid"
-					class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex flex-1 cursor-pointer items-center justify-center rounded transition-colors"
-					@click="onAddTodo()"
-				>
-					<Icon name="material-symbols:add-2-rounded" size="24" />
-				</button>
-				<button
-					type="button"
-					data-testid="submit-another-new-todo-button"
-					:disabled="!isValid"
-					class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex w-min cursor-pointer items-center justify-center gap-1 rounded px-2 text-sm transition-colors"
-					@click="onAddTodoNoClose"
-				>
-					<Icon name="material-symbols:add-2-rounded" size="20" />
-					{{ t("another") }}
-				</button>
-			</div>
-		</form>
+		<TodoForm v-model:todo="todoData" @submit="onSubmitForm">
+			<button
+				type="button"
+				data-testid="submit-new-todo-button"
+				:disabled="!isValid"
+				class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex flex-1 cursor-pointer items-center justify-center rounded transition-colors"
+				@click="onAddTodo()"
+			>
+				<Icon name="material-symbols:add-2-rounded" size="24" />
+			</button>
+			<button
+				type="button"
+				data-testid="submit-another-new-todo-button"
+				:disabled="!isValid"
+				class="bg-primary hover:bg-primary-hover disabled:bg-secondary flex w-min cursor-pointer items-center justify-center gap-1 rounded px-2 text-sm transition-colors"
+				@click="onAddTodoNoClose"
+			>
+				<Icon name="material-symbols:add-2-rounded" size="20" />
+				{{ t("another") }}
+			</button>
+		</TodoForm>
 	</Sheet>
 </template>
diff --git a/app/components/Edit/DataSelect.vue b/app/components/Edit/TabedDataSelect.vue
similarity index 100%
rename from app/components/Edit/DataSelect.vue
rename to app/components/Edit/TabedDataSelect.vue
diff --git a/app/components/Edit/TodoForm.vue b/app/components/Edit/TodoForm.vue
new file mode 100644
index 0000000..f2dc4d1
--- /dev/null
+++ b/app/components/Edit/TodoForm.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+	import { computed, ref } from "vue";
+	import type { CreateTodoData, UUID } from "~/utils/types";
+	import TabedDataSelect from "./TabedDataSelect.vue";
+	import TitleSelect from "./TitleSelect.vue";
+
+	const todoData = defineModel<CreateTodoData>("todo", {
+		required: true,
+	});
+	const emit = defineEmits<{ submit: [] }>();
+
+	function onSubmit() {
+		emit("submit");
+	}
+</script>
+
+<template>
+	<form
+		data-testid="edit-todo-sheet"
+		class="flex h-full flex-col justify-between"
+		@submit.prevent="onSubmit"
+	>
+		<TitleSelect v-model:title="todoData.title" />
+		<TabedDataSelect
+			v-model:time="todoData.time"
+			v-model:tags="todoData.tags"
+			v-model:category="todoData.category"
+			v-model:note="todoData.note"
+		/>
+		<div class="flex h-10 gap-1">
+			<slot />
+		</div>
+	</form>
+</template>
-- 
2.51.2