finalized event cancel logic

ui/src/components/calendar/CreateCalendarEvent.vue

@@ -49,12 +49,23 @@ import { createCalendarEvent } from "@/api/calendar"
 const formSchema = toTypedSchema(calendarEventSchema)
 
 // ---------- dialog state & defaults ----------
+const clickedDate = ref<string | null>(null);
 const dialogOpen = ref(false)
-function openDialog() { dialogOpen.value = true }
+function openDialog(dateStr?: string) {
+    clickedDate.value=dateStr ?? null;
+    dialogOpen.value = true
+    initialValues.value = makeInitialValues()
+}
 defineExpose({ openDialog })
 
 function makeInitialValues() {
-    const start = roundToNextHour()
+    let start: Date;
+    if (clickedDate.value) {
+        const local = new Date(clickedDate.value + "T00:00:00");
+        start = roundToNextHour(local);
+    } else {
+        start = roundToNextHour();
+    }
     const end = new Date(start.getTime() + 60 * 60 * 1000)
     return {
         name: "",
@@ -68,7 +79,7 @@ function makeInitialValues() {
         id: null as number | null,
     }
 }
-const initialValues = ref(makeInitialValues())
+const initialValues = ref(null)
 
 const formKey = ref(0)
 

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar'
-import { CircleAlert, Clock, MapPin, User, X } from 'lucide-vue-next';
+import { CircleAlert, Clock, EllipsisVertical, MapPin, User, X } from 'lucide-vue-next';
 import { computed, onMounted, ref, watch } from 'vue';
 import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
 import Button from '../ui/button/Button.vue';
-import { CalendarAttendance, getCalendarEvent, setCalendarEventAttendance } from '@/api/calendar';
+import { CalendarAttendance, getCalendarEvent, setCalendarEventAttendance, setCancelCalendarEvent } from '@/api/calendar';
 import { useUserStore } from '@/stores/user';
 import { useRoute } from 'vue-router';
+import DropdownMenu from '../ui/dropdown-menu/DropdownMenu.vue';
+import DropdownMenuTrigger from '../ui/dropdown-menu/DropdownMenuTrigger.vue';
+import DropdownMenuContent from '../ui/dropdown-menu/DropdownMenuContent.vue';
+import DropdownMenuItem from '../ui/dropdown-menu/DropdownMenuItem.vue';
 
 const route = useRoute();
 // const eventID = computed(() => {
@@ -37,6 +41,7 @@ watch(
 
 const emit = defineEmits<{
     (e: 'close'): void
+    (e: 'reload'): void
 }>()
 
 // const activeEvent = computed(() => props.event)
@@ -75,6 +80,17 @@ async function setAttendance(state: CalendarAttendance) {
     //refresh event data
     activeEvent.value = await getCalendarEvent(activeEvent.value.id);
 }
+
+const canEditEvent = computed(() => {
+    if (user.user.id == activeEvent.value.creator_id)
+        return true;
+});
+
+async function setCancel(isCancelled: boolean) {
+    await setCancelCalendarEvent(activeEvent.value.id, isCancelled);
+    emit("reload");
+    activeEvent.value = await getCalendarEvent(activeEvent.value.id);
+}
 </script>
 
 <template>
@@ -84,16 +100,40 @@ async function setAttendance(state: CalendarAttendance) {
             <h2 class="text-lg font-semibold break-all">
                 {{ activeEvent?.name || 'Event' }}
             </h2>
-            <button
-                class="inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition"
-                aria-label="Close" @click="emit('close')">
-                <X class="size-4" />
-            </button>
+            <div class="flex gap-4">
+                <DropdownMenu v-if="canEditEvent">
+                    <DropdownMenuTrigger>
+                        <button
+                            class="inline-flex flex-none size-8 items-center justify-center cursor-pointer rounded-md hover:bg-muted/40 transition">
+                            <EllipsisVertical class="size-6" />
+                        </button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent>
+                        <DropdownMenuItem>
+                            Edit
+                        </DropdownMenuItem>
+                        <DropdownMenuItem v-if="activeEvent.cancelled"
+                            @click="setCancel(false)">
+                            Un-Cancel
+                        </DropdownMenuItem>
+                        <DropdownMenuItem v-else @click="setCancel(true)">
+                            Cancel
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+                <button
+                    class="inline-flex flex-none size-8 items-center justify-center rounded-md border hover:bg-muted/40 transition cursor-pointer"
+                    aria-label="Close" @click="emit('close')">
+                    <X class="size-4" />
+                </button>
+            </div>
         </div>
         <!-- Body -->
         <div class="flex-1 flex flex-col items-center min-h-0 overflow-y-auto px-4 py-4 space-y-6 w-full">
             <section v-if="activeEvent.cancelled == true" class="w-full">
-                <div class="flex p-2 rounded-md w-full bg-destructive gap-3"><CircleAlert></CircleAlert> This event has been cancelled</div>
+                <div class="flex p-2 rounded-md w-full bg-destructive gap-3">
+                    <CircleAlert></CircleAlert> This event has been cancelled
+                </div>
             </section>
             <section class="w-full">
                 <ButtonGroup class="flex w-full">