Adapted calendar to support event links

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -1,22 +1,45 @@
 <script setup lang="ts">
 import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar'
 import { Clock, MapPin, User, X } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
 import Button from '../ui/button/Button.vue';
-import { CalendarAttendance, setCalendarEventAttendance } from '@/api/calendar';
+import { CalendarAttendance, getCalendarEvent, setCalendarEventAttendance } from '@/api/calendar';
 import { useUserStore } from '@/stores/user';
+import { useRoute } from 'vue-router';
 
-const props = defineProps<{
-    event: CalendarEvent | null
-    onClose?: () => void
-}>()
+const route = useRoute();
+// const eventID = computed(() => {
+//     const id = route.params.id;
+//     if (typeof id === 'string') return id;
+//     return undefined;
+// });
+
+const loaded = ref<boolean>(false);
+const activeEvent = ref<CalendarEvent | null>(null);
+
+// onMounted(async () => {
+//     let eventID = route.params.id;
+//     console.log(eventID);
+//     activeEvent.value = await getCalendarEvent(Number(eventID));
+//     loaded.value = true;
+// });
+
+watch(
+  () => route.params.id,
+  async (id) => {
+    if (!id) return;
+    activeEvent.value = await getCalendarEvent(Number(id));
+    loaded.value = true;
+  },
+  { immediate: true }
+);
 
 const emit = defineEmits<{
     (e: 'close'): void
 }>()
 
-const activeEvent = computed(() => props.event)
+// const activeEvent = computed(() => props.event)
 
 const startFmt = new Intl.DateTimeFormat(undefined, {
     weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
@@ -53,7 +76,7 @@ async function setAttendance(state: CalendarAttendance) {
 </script>
 
 <template>
-    <div>
+    <div v-if="loaded">
         <!-- Header -->
         <div class="flex items-center justify-between gap-3 border-b px-4 py-3">
             <h2 class="text-lg font-semibold break-all">

ui/src/pages/Calendar.vue

@@ -9,6 +9,7 @@ import { getCalendarEvent, getMonthCalendarEvents } from '@/api/calendar'
 import { CalendarEvent, CalendarEventShort } from '@shared/types/calendar'
 import { Calendar } from '@fullcalendar/core'
 import ViewCalendarEvent from '@/components/calendar/ViewCalendarEvent.vue'
+import { useRouter, useRoute } from 'vue-router'
 
 const monthLabels = [
     'January', 'February', 'March', 'April', 'May', 'June',
@@ -23,6 +24,9 @@ function api() {
     return calendarRef.value?.getApi()
 }
 
+const router = useRouter();
+const route = useRoute();
+
 // keep dropdowns in sync whenever the calendar navigates
 function onDatesSet() {
     const d = api()?.getDate() ?? new Date()
@@ -87,15 +91,7 @@ const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null)
 
 async function onEventClick(arg: any) {
     const targetEvent = arg.event.id;
-    activeEvent.value = await getCalendarEvent(targetEvent);
-    console.log(activeEvent.value);
-    // activeEvent.value = {
-    //     id: arg.event.id,
-    //     title: arg.event.title,
-    //     start: arg.event.startStr,
-    //     end: arg.event.endStr,
-    //     extendedProps: arg.event.extendedProps
-    // }
+    router.push(`/calendar/event/${targetEvent}`)
     panelOpen.value = true
 }
 
@@ -170,6 +166,15 @@ const calendarOptions = ref({
 //@ts-ignore (shhh)
 calendarOptions.value.datesSet = onDatesSet
 
+watch(() => route.params.id, async (newID) => {
+    console.log(newID);
+    if (newID === undefined) {
+        panelOpen.value = false;
+    } else {
+        panelOpen.value = true;
+    }
+})
+
 
 watch(panelOpen, async () => {
     await nextTick()
@@ -245,10 +250,11 @@ onMounted(() => {
                     <FullCalendar ref="calendarRef" :options="calendarOptions" />
                 </div>
             </div>
-            <aside v-if="panelOpen && activeEvent"
+            <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="() => {panelOpen = false; activeEvent = null;}" :event="activeEvent"></ViewCalendarEvent>
+                <ViewCalendarEvent @close="() => { router.push('/calendar'); }">
+                </ViewCalendarEvent>
             </aside>
         </div>
     </div>

ui/src/router/index.js

@@ -15,7 +15,10 @@ const router = createRouter({
     { path: '/members', component: () => import('@/pages/memberList.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/loa', component: () => import('@/pages/SubmitLOA.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/transfer', component: () => import('@/pages/Transfer.vue'), meta: { requiresAuth: true, memberOnly: true } },
-    { path: '/calendar', component: () => import('@/pages/Calendar.vue'), meta: { requiresAuth: true, memberOnly: true } },
+    
+    { path: '/calendar', component: () => import('@/pages/Calendar.vue'), meta: { requiresAuth: true, memberOnly: true }, },
+    { path: '/calendar/event/:id', component: () => import('@/pages/Calendar.vue'), meta: { requiresAuth: true, memberOnly: true }, },
+    
     { path: '/trainingReport', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/trainingReport/new', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },
     { path: '/trainingReport/:id', component: () => import('@/pages/TrainingReport.vue'), meta: { requiresAuth: true, memberOnly: true } },