improved reactivity of event creation

ui/src/components/calendar/CreateCalendarEvent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { toTypedSchema } from "@vee-validate/zod"
-import { ref, defineExpose, watch } from "vue"
+import { ref, defineExpose, watch, nextTick } from "vue"
 import * as z from "zod"
 
 import { Button } from "@/components/ui/button"
@@ -83,13 +83,14 @@ const initialValues = ref(null)
 
 const formKey = ref(0)
 
-watch(dialogOpen, (isOpen) => {
-    if (!isOpen) {
-        formKey.value++  // remounts the form -> picks up fresh initialValues
+watch(dialogOpen, async (isOpen) => {
+    if (isOpen) {
+        await nextTick();
+        formRef.value?.resetForm({ values: makeInitialValues() })
     }
 })
 // ---------- submit ----------
-function onSubmit(vals: z.infer<typeof calendarEventSchema>) {
+async function onSubmit(vals: z.infer<typeof calendarEventSchema>) {
     const start = parseLocalDateTime(vals.startDate, vals.startTime)
     const end = parseLocalDateTime(vals.endDate, vals.endTime)
 
@@ -104,7 +105,8 @@ function onSubmit(vals: z.infer<typeof calendarEventSchema>) {
 
     try {
         console.log("Submitting CalendarEvent:", event)
-        createCalendarEvent(event);
+        await createCalendarEvent(event);
+        emit('reload');
     } catch (error) {
         console.error(error);
     }
@@ -112,10 +114,15 @@ function onSubmit(vals: z.infer<typeof calendarEventSchema>) {
     // close after success
     dialogOpen.value = false
 }
+
+const emit = defineEmits<{
+    (e: 'reload'): void
+}>()
+const formRef = ref(null);
 </script>
 
 <template>
-    <Form :key="formKey" v-slot="{ handleSubmit, resetForm }" :validation-schema="formSchema"
+    <Form ref="formRef" :key="formKey" v-slot="{ handleSubmit, resetForm }" :validation-schema="formSchema"
         :initial-values="initialValues" keep-values as="">
         <Dialog v-model:open="dialogOpen">
             <DialogContent class="sm:max-w-[520px]">

ui/src/pages/Calendar.vue

@@ -158,7 +158,7 @@ onMounted(() => {
 
 <template>
     <div>
-        <CreateCalendarEvent ref="dialogRef"></CreateCalendarEvent>
+        <CreateCalendarEvent ref="dialogRef" @reload="loadEvents()"></CreateCalendarEvent>
         <div class="flex">
             <div class="flex-1 min-h-0 mt-5">
                 <div class="h-[80vh] min-h-0">