added edit modal. info popover. create modal. delete functionality. delete modal

2025-06-16 18:20:04 +02:00
parent ebc6358c29
commit 9fa86627b6
7 changed files with 239 additions and 96 deletions
--- a/web/components/ui/EventFormModal.vue
+++ b/web/components/ui/EventFormModal.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { type SimpleEvent } from '#imports';
+import { DateTime } from 'luxon';
+import * as z from 'zod';
+
+const open = defineModel<boolean>('open', { required: true })
+
+const emit = defineEmits<{
+	(e: 'submnitted', event: SimpleEvent): void
+	(e: 'canceled'): void
+}>()
+
+const props = defineProps<{
+	action: 'create' | 'edit'
+	input: Partial<SimpleEvent>,
+}>()
+
+const toast = useToast()
+
+const titleField = ref('')
+const descriptionField = ref('')
+const fromTimeField = ref('')
+const fromDateField = ref('')
+const toTimeField = ref('')
+const toDateField = ref('')
+
+const modalTitle = computed(() => {
+	return props.action === 'create' ? 'Create Event' : 'Edit Event'
+})
+
+const modalDescription = computed(() => {
+	return props.action === 'create' ? 'Create event and set name, description and time' : 'Edit name, description and time'
+})
+
+watchEffect(() => {
+	titleField.value = props.input.title ?? ''
+	descriptionField.value = props.input.description ?? ''
+	fromTimeField.value = props.input.from?.toFormat('HH:mm') ?? ''
+	fromDateField.value = props.input.from?.toFormat('yyyy-MM-dd') ?? ''
+	toTimeField.value = props.input.to?.toFormat('HH:mm') ?? ''
+	toDateField.value = props.input.to?.toFormat('yyyy-MM-dd') ?? ''
+})
+
+const formSchema = z.object({
+	title: z.string().trim().min(1, { message: 'Title is required' }),
+	description: z.string().default(''),
+	from: z.string().datetime({ message: 'Invalid start date', local: true }),
+	to: z.string().datetime({ message: 'Invalid end date', local: true })
+})
+
+
+function submit() {
+	console.log({
+		from: dateStringFromFields(fromDateField.value, fromTimeField.value),
+		to: dateStringFromFields(toDateField.value, toTimeField.value)
+	})
+	const form = formSchema.safeParse({
+		title: titleField.value,
+		description: descriptionField.value,
+		from: dateStringFromFields(fromDateField.value, fromTimeField.value),
+		to: dateStringFromFields(toDateField.value, toTimeField.value)
+	})
+
+	if (form.error) {
+		for (const error of form.error.errors) {
+			toast.add({
+				title: error.message
+			})
+		}
+		return
+	}
+
+	emit('submnitted', {
+		title: form.data.title,
+		description: form.data.description,
+		from: DateTime.fromISO(form.data.from),
+		to: DateTime.fromISO(form.data.to)
+	})
+	open.value = false
+}
+
+function dateStringFromFields(date: string, time: string) {
+	return `${date}T${time}:00`
+}
+
+function cancel() {
+	emit('canceled')
+	open.value = false
+}
+
+</script>
+
+<template>
+	<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">
+					<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">
+					<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 />
+			</div>
+		</template>
+		<template #footer>
+			<UButton variant="solid" @click="submit">
+				{{ action === 'create' ? 'Create' : 'Edit' }}
+			</UButton>
+			<UButton variant="soft" @click="cancel">
+				Cancel
+			</UButton>
+		</template>
+	</UModal>
+</template>
+
+<style scoped></style>