Implemented update event systems

ui/src/api/calendar.ts

@@ -83,7 +83,18 @@ export async function createCalendarEvent(eventData: CalendarEvent) {
 }
 
 export async function editCalendarEvent(eventData: CalendarEvent) {
+    let res = await fetch(`${addr}/calendar`, {
+        method: "PUT",
+        credentials: "include",
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(eventData)
+    });
 
+    if (res.ok) {
+        return;
+    } else {
+        throw new Error(`Failed to set attendance: ${res.status} ${res.statusText}`);
+    }
 }
 
 export async function setCancelCalendarEvent(eventID: number, cancel: boolean) {

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"

ui/src/pages/Calendar.vue

@@ -128,7 +128,6 @@ const calendarOptions = ref({
 calendarOptions.value.datesSet = onDatesSet
 
 watch(() => route.params.id, async (newID) => {
-    console.log(newID)
     if (newID === undefined) {
         panelOpen.value = false;
         currentEventID.value = null;
@@ -150,6 +149,8 @@ function onCreateEvent() {
     onDateClick({ dateStr: iso })
 }
 
+const eventViewRef = ref(null);
+
 onMounted(() => {
     onDatesSet()
 })
@@ -158,7 +159,7 @@ onMounted(() => {
 
 <template>
     <div>
-        <CreateCalendarEvent ref="dialogRef" @reload="loadEvents()"></CreateCalendarEvent>
+        <CreateCalendarEvent ref="dialogRef" @reload="loadEvents(); eventViewRef.forceReload();"></CreateCalendarEvent>
         <div class="flex">
             <div class="flex-1 min-h-0 mt-5">
                 <div class="h-[80vh] min-h-0">
@@ -215,7 +216,7 @@ onMounted(() => {
             <aside v-if="panelOpen"
                 class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
                 :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
-                <ViewCalendarEvent @close="() => { router.push('/calendar'); }" @reload="loadEvents()">
+                <ViewCalendarEvent ref="eventViewRef" @close="() => { router.push('/calendar'); }" @reload="loadEvents()" @edit="(val) => {dialogRef.openDialog(null, 'edit', val)}">
                 </ViewCalendarEvent>
             </aside>
         </div>