17th-Ranger-Battalion-ORG/milsim-site-v4
8
1
Fork 0
Code Issues 20 Pull Requests 1 Actions 3 Packages Projects Releases 2 Wiki Activity

split event view into seperate component

Browse Source
This commit is contained in:
ajdj100
2025-11-23 23:12:58 -05:00
parent 658980d9fe
commit 0a718d36c2
6 changed files with 211 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
ui/src/pages/Calendar.vue
View File

@@ -8,6 +8,7 @@ import CreateCalendarEvent from '@/components/calendar/CreateCalendarEvent.vue'
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'
const monthLabels = [
'January', 'February', 'March', 'April', 'May', 'June',
@@ -87,7 +88,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);
console.log(activeEvent.value);
// activeEvent.value = {
// id: arg.event.id,
// title: arg.event.title,
@@ -176,24 +177,6 @@ watch(panelOpen, async () => {
})
const startFmt = new Intl.DateTimeFormat(undefined, {
weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
hour: 'numeric', minute: '2-digit'
})
const endFmt = new Intl.DateTimeFormat(undefined, {
hour: 'numeric', minute: '2-digit'
})
const whenText = computed(() => {
if (!activeEvent.value?.start) return ''
const s = new Date(activeEvent.value.start)
const e = activeEvent.value?.end ? new Date(activeEvent.value.end) : null
return e
? `${startFmt.format(s)} – ${endFmt.format(e)}`
: `${startFmt.format(s)}`
})
function onCreateEvent() {
const iso = new Date().toISOString().slice(0, 10) // YYYY-MM-DD
onDateClick({ dateStr: iso })
@@ -262,82 +245,10 @@ onMounted(() => {
<FullCalendar ref="calendarRef" :options="calendarOptions" />
</div>
</div>
<aside v-if="panelOpen && activeEvent" class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col"
<aside v-if="panelOpen && activeEvent"
class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col"
:style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
<!-- Header -->
<div class="flex items-center justify-between gap-3 border-b px-4 py-3">
<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="panelOpen = false">
<X class="size-4" />
</button>
</div>
<!-- Body -->
<div class="flex-1 min-h-0 overflow-y-auto px-4 py-4 space-y-6">
<!-- When -->
<section v-if="whenText" class="space-y-2">
<div class="inline-flex items-center gap-2 rounded-md border px-2.5 py-1.5 text-sm">
<Clock class="size-4 opacity-80" />
<span class="font-medium">{{ whenText }}</span>
</div>
</section>
<!-- Quick meta chips -->
<section class="flex flex-wrap gap-2">
<span
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
<MapPin class="size-3.5 opacity-80" />
<span class="font-medium">{{ activeEvent.location || "Unknown" }}</span>
</span>
<span
class="inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs">
<User class="size-3.5 opacity-80" />
<span class="font-medium">Created by: {{ activeEvent.creator_name || "Unknown User" }}</span>
</span>
</section>
<!-- Agenda (special-cased array) -->
<!-- <section v-if="Array.isArray(ext.agenda) && ext.agenda.length" class="space-y-2">
<div class="flex items-center gap-2 text-sm font-medium">
<ListTodo class="size-4 opacity-80" />
Agenda
</div>
<ul class="space-y-1.5">
<li v-for="(item, i) in ext.agenda" :key="i" class="flex items-start gap-2 text-sm">
<span class="mt-1.5 size-1.5 rounded-full bg-foreground/50"></span>
<span>{{ item }}</span>
</li>
</ul>
</section> -->
<!-- Generic details (extendedProps minus the ones above) -->
<!-- <section v-if="ext && Object.keys(ext).length" class="space-y-3">
<div class="text-sm font-medium opacity-80">Details</div>
<dl class="grid grid-cols-1 gap-y-3">
<template v-for="(val, key) in ext" :key="key">
<template v-if="!['agenda', 'owner', 'trainer', 'location'].includes(String(key))">
<div class="grid grid-cols-[120px_1fr] items-start gap-3">
<dt class="text-xs uppercase tracking-wide opacity-60">{{ key }}</dt>
<dd class="text-sm">
<span v-if="Array.isArray(val)">{{ val.join(', ') }}</span>
<span v-else>{{ String(val) }}</span>
</dd>
</div>
</template>
</template>
</dl>
</section> -->
</div>
<!-- Footer (optional actions) -->
<div class="border-t px-4 py-3 flex items-center justify-end gap-2">
<button class="rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40 transition">
Edit
</button>
<button
class="rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-sm hover:opacity-90 transition">
Open details
</button>
</div>
<ViewCalendarEvent @close="() => {panelOpen = false; activeEvent = null;}" :event="activeEvent"></ViewCalendarEvent>
</aside>
</div>
</div>