quirinecker/dayplanner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adjusted task form

Browse Source
This commit is contained in:
quirinecker
2025-07-06 14:28:33 +02:00
parent ee19cac4c3
commit 5e6cca9fe2
1 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/components/ui/TaskFormModal.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { UFormField } from '#components';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
import * as z from 'zod'; import * as z from 'zod';
@@ -21,6 +22,8 @@ const descriptionField = ref('')
const estimatedTimeField = ref(0) const estimatedTimeField = ref(0)
const dueTimeField = ref('') const dueTimeField = ref('')
const dueDateField = ref('') const dueDateField = ref('')
const scheduledAtDateField = ref('')
const scheduledAtTimeField = ref('')
const modalTitle = computed(() => { const modalTitle = computed(() => {
return props.action === 'create' ? 'Create Task' : 'Edit Task' return props.action === 'create' ? 'Create Task' : 'Edit Task'
@@ -36,6 +39,8 @@ watchEffect(() => {
estimatedTimeField.value = (((props.input.estimated_time) ?? 0) / 60) estimatedTimeField.value = (((props.input.estimated_time) ?? 0) / 60)
dueDateField.value = props.input.due_date?.toFormat('yyyy-MM-dd') ?? '' dueDateField.value = props.input.due_date?.toFormat('yyyy-MM-dd') ?? ''
dueTimeField.value = props.input.due_date?.toFormat('HH:mm') ?? '' dueTimeField.value = props.input.due_date?.toFormat('HH:mm') ?? ''
scheduledAtDateField.value = props.input.scheduled_at?.toFormat('yyyy-MM-dd') ?? ''
scheduledAtTimeField.value = props.input.scheduled_at?.toFormat('HH:mm') ?? ''
}) })
const formSchema = z.object({ const formSchema = z.object({
@@ -89,18 +94,31 @@ function cancel() {
<template> <template>
<UModal v-model:open="open" :title="modalTitle" :description="modalDescription"> <UModal v-model:open="open" :title="modalTitle" :description="modalDescription">
<template #body> <template #body>
scheduled at: {{ props.input.scheduled_at }}
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<UInput type="text" placeholder="Name" v-model="titleField" required />
<UInput type="number" class="grow" placeholder="estimated time in hours" v-model="estimatedTimeField"
icon="mdi:stopwatch-outline" required />
<div class="flex flex-row 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>
<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>
</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" <UInput type="date" class="grow" placeholder="due data e.g 2025-06-16" v-model="dueDateField"
icon="i-lucide-calendar" required /> icon="i-lucide-calendar" required />
<UInput class="grow" placeholder="due time e.g 15:34" v-model="dueTimeField" icon="i-lucide-clock" <UInput class="grow" placeholder="due time e.g 15:34" v-model="dueTimeField" icon="i-lucide-clock"
required /> required />
</div> </UFormField>
<UTextarea type="text" placeholder="Description" v-model="descriptionField" required /> <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>
<UFormField label="Description">
<UTextarea type="text" class="w-full" placeholder="Description" v-model="descriptionField" required />
</UFormField>
</div> </div>
</template> </template>
<template #footer> <template #footer>