From f2f23c238d24f0b4796fc224c6391b453992ae77 Mon Sep 17 00:00:00 2001
From: quirinecker <quirin.ecker@bajupa.com>
Date: Tue, 8 Jul 2025 10:00:01 +0200
Subject: [PATCH] added some final touches

---
 web/components/ui/EventFormModal.vue | 17 +++++----
 web/components/ui/Sidebar.vue        |  2 +-
 web/components/ui/TaskFormModal.vue  | 53 +++++++++++++++++++---------
 3 files changed, 49 insertions(+), 23 deletions(-)

diff --git a/web/components/ui/EventFormModal.vue b/web/components/ui/EventFormModal.vue
index 666a10d..740c4e9 100644
--- a/web/components/ui/EventFormModal.vue
+++ b/web/components/ui/EventFormModal.vue
@@ -95,18 +95,23 @@ function cancel() {
 	<UModal v-model:open="open" :title="modalTitle" :description="modalDescription">
 		<template #body>
 			<div class="flex flex-col gap-2">
-				<UInput type="text" placeholder="Name" v-model="titleField" required />
-				<div class="flex flex-row gap-2">
+				<UFormField label="Name">
+					<UInput type="text" placeholder="Name" class="w-full" v-model="titleField" required />
+				</UFormField>
+				<UFormField label="Start" :ui="{ container: 'flex flex-row gap-2' }">
 					<UInput class="grow" placeholder="2025-06-16" v-model="fromDateField" icon="i-lucide-calendar"
 						required />
 					<UInput class="grow" placeholder="15:34" v-model="fromTimeField" icon="i-lucide-clock" required />
-				</div>
-				<div class="flex flex-row gap-2">
+				</UFormField>
+				<UFormField label="End" :ui="{ container: 'flex flex-row gap-2' }">
 					<UInput class="grow" placeholder="2025-06-16" v-model="toDateField" icon="i-lucide-calendar"
 						required />
 					<UInput class="grow" placeholder="15:34" v-model="toTimeField" icon="i-lucide-clock" required />
-				</div>
-				<UTextarea type="text" placeholder="Description" v-model="descriptionField" required />
+				</UFormField>
+				<UFormField label="Name">
+					<UTextarea type="text" placeholder="Description" class="w-full" v-model="descriptionField"
+						required />
+				</UFormField>
 			</div>
 		</template>
 		<template #footer>
diff --git a/web/components/ui/Sidebar.vue b/web/components/ui/Sidebar.vue
index 8fc0ecb..1a0a932 100644
--- a/web/components/ui/Sidebar.vue
+++ b/web/components/ui/Sidebar.vue
@@ -214,7 +214,7 @@ function dismissSchedule() {
 				<UDropdownMenu :items="dropDownItems" size="xl" :ui="{
 					content: 'w-60'
 				}">
-					<UButton variant="ghost" class="flex gap-1 items-center w-full text-text">
+					<UButton variant="ghost" class="flex gap-4 items-center w-full text-text">
 						<UAvatar :src="user.user.value?.imageUrl" />
 						{{ user.user.value?.username }}
 					</UButton>
diff --git a/web/components/ui/TaskFormModal.vue b/web/components/ui/TaskFormModal.vue
index 34e43f5..1c623e2 100644
--- a/web/components/ui/TaskFormModal.vue
+++ b/web/components/ui/TaskFormModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { UFormField } from '#components';
+import { UFormField, UInputMenu } from '#components';
 import { DateTime } from 'luxon';
 import * as z from 'zod';
 
@@ -33,6 +33,20 @@ const modalDescription = computed(() => {
 	return props.action === 'create' ? 'Create task with description, due date and name' : 'Edit description, due date and name'
 })
 
+const timeSuggestions = ref<string[]>((() => {
+	const times = [];
+
+	for (let hour = 0; hour < 24; hour++) {
+		for (let minute = 0; minute < 60; minute += 10) {
+			const hh = String(hour).padStart(2, '0');
+			const mm = String(minute).padStart(2, '0');
+			times.push(`${hh}:${mm}`);
+		}
+	}
+
+	return times;
+})())
+
 watchEffect(() => {
 	titleField.value = props.input.title ?? ''
 	descriptionField.value = props.input.description ?? ''
@@ -89,6 +103,11 @@ function cancel() {
 	open.value = false
 }
 
+const formatOptions: Intl.NumberFormatOptions = {
+      signDisplay: 'negative',
+      minimumFractionDigits: 1
+}
+
 </script>
 
 <template>
@@ -96,28 +115,30 @@ function cancel() {
 		<template #body>
 			<div class="flex flex-col gap-2">
 				<div class="flex flex-row gap-2">
-					<UFormField label="Title">
-					<UInput type="text" class="w-full" placeholder="Name" v-model="titleField" required />
+					<UFormField label="Title" class="flex-1/2">
+						<UInput type="text" class="w-full" placeholder="Name" v-model="titleField" required />
 					</UFormField>
-					<UFormField label="Estimated time in hours">
-					<UInput type="number" class="grow" placeholder="estimated time in hours" v-model="estimatedTimeField"
-						icon="mdi:stopwatch-outline" required />
+					<UFormField label="Estimated time in hours" class="flex-1/2">
+						<UInputNumber class="grow" placeholder="estimated time in hours"
+							v-model="estimatedTimeField" icon="mdi:stopwatch-outline" :step-snapping="false" :format-options="formatOptions" :min="0" required />
 					</UFormField>
 				</div>
-				<UFormField label="Deadline" :ui="{ container: 'flex flex-row gap-2'}">
-					<UInput type="date" class="grow" placeholder="due data e.g 2025-06-16" v-model="dueDateField"
+				<UFormField label="Deadline" :ui="{ container: 'flex flex-row gap-2' }">
+					<UInput type="date" class="flex-1/2" placeholder="due data e.g 2025-06-16" v-model="dueDateField"
 						icon="i-lucide-calendar" required />
-					<UInput class="grow" placeholder="due time e.g 15:34" v-model="dueTimeField" icon="i-lucide-clock"
-						required />
+					<UInput class="flex-1/2" placeholder="due time e.g 15:34" v-model="dueTimeField"
+						icon="i-lucide-clock" :create-item="true" required />
 				</UFormField>
-				<UFormField label="Scheduled at" :ui="{ container: 'flex flex-row gap-2'}" v-if="props.input.scheduled_at">
-					<UInput type="date" class="grow" placeholder="schedule data e.g 2025-06-16" v-model="scheduledAtDateField"
-						icon="i-lucide-calendar" required />
-					<UInput class="grow" placeholder="schedule time e.g 15:34" v-model="scheduledAtTimeField" icon="i-lucide-clock"
-						required />
+				<UFormField label="Scheduled at" :ui="{ container: 'flex flex-row gap-2' }"
+					v-if="props.input.scheduled_at">
+					<UInput type="date" class="flex-1/2" placeholder="schedule data e.g 2025-06-16"
+						v-model="scheduledAtDateField" icon="i-lucide-calendar" required />
+					<UInput class="flex-1/2" placeholder="schedule time e.g 15:34" v-model="scheduledAtTimeField"
+						icon="i-lucide-clock" :create-item="true" required/>
 				</UFormField>
 				<UFormField label="Description">
-					<UTextarea type="text" class="w-full" placeholder="Description" v-model="descriptionField" required />
+					<UTextarea type="text" class="w-full" placeholder="Description" v-model="descriptionField"
+						required />
 				</UFormField>
 			</div>
 		</template>