Implemented update event systems

ui/src/components/calendar/CreateCalendarEvent.vue

@@ -45,13 +45,18 @@ function roundToNextHour(d = new Date()) {
 }
 
 import { calendarEventSchema, parseLocalDateTime } from '@shared/schemas/calendarEventSchema'
-import { createCalendarEvent } from "@/api/calendar"
+import { createCalendarEvent, editCalendarEvent } from "@/api/calendar"
+import DialogDescription from "../ui/dialog/DialogDescription.vue"
 const formSchema = toTypedSchema(calendarEventSchema)
 
 // ---------- dialog state & defaults ----------
 const clickedDate = ref<string | null>(null);
 const dialogOpen = ref(false)
-function openDialog(dateStr?: string) {
+const dialogMode = ref<'create' | 'edit'>('create');
+const editEvent = ref<CalendarEvent | null>();
+function openDialog(dateStr?: string, mode?: 'create' | 'edit', event?: CalendarEvent) {
+    dialogMode.value = mode ?? 'create';
+    editEvent.value = event ?? null;
     clickedDate.value = dateStr ?? null;
     dialogOpen.value = true
     initialValues.value = makeInitialValues()
@@ -59,6 +64,22 @@ function openDialog(dateStr?: string) {
 defineExpose({ openDialog })
 
 function makeInitialValues() {
+
+    if (dialogMode.value === 'edit' && editEvent.value) {
+        const e = editEvent.value;
+        return {
+            name: e.name,
+            startDate: toLocalDateString(new Date(e.start)),
+            startTime: toLocalTimeString(new Date(e.start)),
+            endDate: toLocalDateString(new Date(e.end)),
+            endTime: toLocalTimeString(new Date(e.end)),
+            location: e.location,
+            color: e.color,
+            description: e.description,
+            id: e.id,
+        }
+    }
+
     let start: Date;
     if (clickedDate.value) {
         const local = new Date(clickedDate.value + "T00:00:00");
@@ -95,6 +116,7 @@ async function onSubmit(vals: z.infer<typeof calendarEventSchema>) {
     const end = parseLocalDateTime(vals.endDate, vals.endTime)
 
     const event: CalendarEvent = {
+        id: vals.id ?? null,
         name: vals.name,
         start,
         end,
@@ -104,8 +126,11 @@ async function onSubmit(vals: z.infer<typeof calendarEventSchema>) {
     }
 
     try {
-        console.log("Submitting CalendarEvent:", event)
-        await createCalendarEvent(event);
+        if (dialogMode.value === "edit") {
+            await editCalendarEvent(event);
+        } else {
+            await createCalendarEvent(event);
+        }
         emit('reload');
     } catch (error) {
         console.error(error);
@@ -128,6 +153,7 @@ const formRef = ref(null);
             <DialogContent class="sm:max-w-[520px]">
                 <DialogHeader>
                     <DialogTitle>Create Event</DialogTitle>
+                    <DialogDescription></DialogDescription>
                 </DialogHeader>
 
                 <form id="dialogForm" class="grid grid-cols-1 gap-4"

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -42,6 +42,7 @@ watch(
 const emit = defineEmits<{
     (e: 'close'): void
     (e: 'reload'): void
+    (e: 'edit', event: CalendarEvent): void
 }>()
 
 // const activeEvent = computed(() => props.event)
@@ -91,6 +92,12 @@ async function setCancel(isCancelled: boolean) {
     emit("reload");
     activeEvent.value = await getCalendarEvent(activeEvent.value.id);
 }
+
+async function forceReload() {
+    activeEvent.value = await getCalendarEvent(activeEvent.value.id);
+}
+
+defineExpose({forceReload})
 </script>
 
 <template>
@@ -109,7 +116,7 @@ async function setCancel(isCancelled: boolean) {
                         </button>
                     </DropdownMenuTrigger>
                     <DropdownMenuContent>
-                        <DropdownMenuItem>
+                        <DropdownMenuItem @click="emit('edit', activeEvent)">
                             Edit
                         </DropdownMenuItem>
                         <DropdownMenuItem v-if="activeEvent.cancelled"