ajdj100
94b5bfcff7
Some checks failed
Continuous Deployment / Update Deployment (push) Failing after 1m18s
489 lines
14 KiB
Vue
489 lines
14 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch, nextTick, computed, onMounted } from 'vue'
|
|
import FullCalendar from '@fullcalendar/vue3'
|
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
|
import interactionPlugin from '@fullcalendar/interaction'
|
|
import { ChevronLeft, ChevronRight, Plus } from 'lucide-vue-next'
|
|
import CreateCalendarEvent from '@/components/calendar/CreateCalendarEvent.vue'
|
|
import { CalendarEvent } from '@shared/types/calendar'
|
|
import ViewCalendarEvent from '@/components/calendar/ViewCalendarEvent.vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
import { useCalendarEvents } from '@/composables/useCalendarEvents'
|
|
import { useCalendarNavigation } from '@/composables/useCalendarNavigation'
|
|
import { useUserStore } from '@/stores/user'
|
|
|
|
const monthLabels = [
|
|
'January', 'February', 'March', 'April', 'May', 'June',
|
|
'July', 'August', 'September', 'October', 'November', 'December'
|
|
]
|
|
|
|
function api() {
|
|
return calendarRef.value?.getApi()
|
|
}
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const userStore = useUserStore();
|
|
|
|
function buildFullDate(month: number, year: number): Date {
|
|
return new Date(year, month, 1); //default to first of month
|
|
}
|
|
|
|
const { selectedMonth, selectedYear, years, goPrev, goNext, goToday, onDatesSet, goToSelectedDate } = useCalendarNavigation(api)
|
|
const { events, loadEvents } = useCalendarEvents(selectedMonth, selectedYear);
|
|
|
|
const panelOpen = ref(false)
|
|
const activeEvent = ref<CalendarEvent | null>(null)
|
|
const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null)
|
|
|
|
async function onEventClick(arg: any) {
|
|
const targetEvent = arg.event.id;
|
|
router.push(`/calendar/event/${targetEvent}`)
|
|
panelOpen.value = true
|
|
}
|
|
|
|
const currentEventID = ref<number | null>(null);
|
|
|
|
const dialogRef = ref<any>(null)
|
|
|
|
// NEW: handle day/time slot clicks to start creating an event
|
|
function onDateClick(arg: { dateStr: string }) {
|
|
if (!userStore.isLoggedIn) return;
|
|
dialogRef.value?.openDialog(arg.dateStr);
|
|
// For now, just open the panel with a draft payload.
|
|
// activeEvent.value = {
|
|
// id: '__draft__',
|
|
// title: 'New event',
|
|
// start: arg.dateStr,
|
|
// extendedProps: { draft: true }
|
|
// }
|
|
// panelOpen.value = true
|
|
}
|
|
|
|
const calendarOptions = ref({
|
|
plugins: [dayGridPlugin, interactionPlugin],
|
|
initialView: 'dayGridMonth',
|
|
height: '100%',
|
|
expandRows: true,
|
|
headerToolbar: {
|
|
left: '',
|
|
center: '',
|
|
right: ''
|
|
},
|
|
events,
|
|
selectable: false,
|
|
navLinks: false,
|
|
dateClick: onDateClick,
|
|
eventClick: onEventClick,
|
|
editable: false,
|
|
|
|
// force block-mode in dayGrid so we can lay it out on one line
|
|
eventDisplay: 'block',
|
|
|
|
// compact time like "19:00"
|
|
eventTimeFormat: {
|
|
hour: "numeric",
|
|
minute: "2-digit",
|
|
hour12: true
|
|
} as const,
|
|
|
|
// custom renderer -> one-line pill
|
|
eventContent(arg) {
|
|
//debug
|
|
// console.log("Rendering event:", {
|
|
// id: arg.event.id,
|
|
// title: arg.event.title,
|
|
// extendedProps: arg.event.extendedProps,
|
|
// fullEvent: arg.event
|
|
// })
|
|
|
|
const ext = arg.event.extendedProps || {}
|
|
const color = ext.color || arg.backgroundColor || arg.borderColor || ''
|
|
const isCancelled = !!ext.cancelled;
|
|
|
|
const wrap = document.createElement('div')
|
|
wrap.className = 'ev-pill'
|
|
if (color) wrap.style.setProperty('--ev-color', String(color)) // dot color
|
|
|
|
if (isCancelled) {
|
|
wrap.classList.add('is-cancelled')
|
|
}
|
|
|
|
const dot = document.createElement('span')
|
|
dot.className = 'ev-dot'
|
|
|
|
const time = document.createElement('span')
|
|
time.className = 'ev-time'
|
|
time.textContent = arg.timeText
|
|
|
|
const title = document.createElement('span')
|
|
title.className = 'ev-title'
|
|
title.textContent = arg.event.title
|
|
|
|
wrap.append(dot, time, title)
|
|
return { domNodes: [wrap] }
|
|
},
|
|
})
|
|
|
|
//@ts-ignore (shhh)
|
|
calendarOptions.value.datesSet = onDatesSet
|
|
|
|
watch(() => route.params.id, async (newID) => {
|
|
if (newID === undefined) {
|
|
panelOpen.value = false;
|
|
currentEventID.value = null;
|
|
} else {
|
|
panelOpen.value = true;
|
|
currentEventID.value = Number(newID);
|
|
}
|
|
}, { immediate: true })
|
|
|
|
|
|
watch(panelOpen, async () => {
|
|
await nextTick()
|
|
calendarRef.value?.getApi().updateSize()
|
|
})
|
|
|
|
|
|
function onCreateEvent() {
|
|
const iso = new Date().toISOString().slice(0, 10) // YYYY-MM-DD
|
|
onDateClick({ dateStr: iso })
|
|
}
|
|
|
|
const eventViewRef = ref(null);
|
|
|
|
onMounted(() => {
|
|
onDatesSet()
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<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">
|
|
<!-- calendar header -->
|
|
<div class="flex items-center justify-between mx-5">
|
|
<!-- Left: title + pickers -->
|
|
<div class="flex items-center gap-2">
|
|
<!-- <h2 class="text-xl font-semibold tracking-tight">
|
|
{{ monthLabels[selectedMonth] }} {{ selectedYear }}
|
|
</h2> -->
|
|
<!-- Month dropdown -->
|
|
<select v-model.number="selectedMonth" @change="goToSelectedDate"
|
|
class="ml-2 rounded-md border bg-transparent px-2 py-1 text-sm"
|
|
aria-label="Select month">
|
|
<option v-for="(m, i) in monthLabels" :key="m" :value="i" class="bg-card">
|
|
{{ m }}
|
|
</option>
|
|
</select>
|
|
<!-- Year dropdown -->
|
|
<select v-model.number="selectedYear" @change="goToSelectedDate"
|
|
class="rounded-md border bg-transparent px-2 py-1 text-sm" aria-label="Select year">
|
|
<option v-for="y in years" :key="y" :value="y" class="bg-card">
|
|
{{ y }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<!-- Right: nav + today + create -->
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
class="cursor-pointer inline-flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted/40"
|
|
aria-label="Previous month" @click="goPrev">
|
|
<ChevronLeft class="h-4 w-4" />
|
|
</button>
|
|
<button
|
|
class="cursor-pointer inline-flex h-8 w-8 items-center justify-center rounded-md border hover:bg-muted/40"
|
|
aria-label="Next month" @click="goNext">
|
|
<ChevronRight class="h-4 w-4" />
|
|
</button>
|
|
<button class="cursor-pointer ml-1 rounded-md border px-3 py-1.5 text-sm hover:bg-muted/40"
|
|
@click="goToday">
|
|
Today
|
|
</button>
|
|
<button v-if="userStore.isLoggedIn"
|
|
class="cursor-pointer ml-1 inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-sm text-primary-foreground hover:opacity-90"
|
|
@click="onCreateEvent">
|
|
<Plus class="h-4 w-4" />
|
|
Create
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<FullCalendar ref="calendarRef" :options="calendarOptions" />
|
|
</div>
|
|
</div>
|
|
<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 ref="eventViewRef" @close="() => { router.push('/calendar'); }"
|
|
@reload="loadEvents()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">
|
|
</ViewCalendarEvent>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Firefox */
|
|
.scrollbar-themed {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #555 #1f1f1f;
|
|
padding-right: 6px;
|
|
}
|
|
|
|
/* Chrome, Edge, Safari */
|
|
.scrollbar-themed::-webkit-scrollbar {
|
|
width: 10px;
|
|
/* slightly wider to allow padding look */
|
|
}
|
|
|
|
.scrollbar-themed::-webkit-scrollbar-track {
|
|
background: #1f1f1f;
|
|
margin-left: 6px;
|
|
/* ❗ adds space between content + scrollbar */
|
|
}
|
|
|
|
.scrollbar-themed::-webkit-scrollbar-thumb {
|
|
background: #555;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
.scrollbar-themed::-webkit-scrollbar-thumb:hover {
|
|
background: #777;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
/* ---------- Optional container "card" around the calendar ---------- */
|
|
:global(.fc) {
|
|
height: 100% !important;
|
|
}
|
|
|
|
:global(.ev-pill.is-cancelled) {
|
|
opacity: 0.45;
|
|
text-decoration: line-through;
|
|
filter: grayscale(100%);
|
|
}
|
|
|
|
:global(.calendar-card) {
|
|
background: var(--color-card);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-xl);
|
|
box-shadow: var(--shadow-sm);
|
|
padding: 12px;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.calendar-card {
|
|
padding: 16px;
|
|
}
|
|
}
|
|
|
|
/* ---------- FullCalendar base ---------- */
|
|
:global(.fc) {
|
|
color: var(--color-foreground);
|
|
background: transparent;
|
|
font-family: var(--font-sans), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
|
|
font-size: 0.94rem;
|
|
/* compact */
|
|
}
|
|
|
|
:global(.fc .fc-daygrid .fc-scroller) {
|
|
overflow: visible !important;
|
|
/* no internal scroll for month grid */
|
|
}
|
|
|
|
:global(.fc-daygrid:hover) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Subtle borders everywhere */
|
|
:global(.fc .fc-scrollgrid),
|
|
:global(.fc .fc-scrollgrid td),
|
|
:global(.fc .fc-scrollgrid th) {
|
|
border-color: var(--color-border);
|
|
}
|
|
|
|
/* ---------- Built-in toolbar (if you keep it) ---------- */
|
|
:global(.fc .fc-toolbar) {
|
|
gap: 8px;
|
|
}
|
|
|
|
:global(.fc .fc-toolbar-title) {
|
|
font-weight: 600;
|
|
letter-spacing: 0.01em;
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
:global(.fc .fc-button) {
|
|
background: transparent;
|
|
color: var(--color-foreground);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: calc(var(--radius-lg) + 2px);
|
|
box-shadow: none;
|
|
padding: 6px 15px;
|
|
line-height: 1;
|
|
transition: background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
|
|
}
|
|
|
|
:global(.fc .fc-button:hover) {
|
|
background: color-mix(in oklab, var(--color-foreground) 5%, transparent);
|
|
}
|
|
|
|
:global(.fc .fc-button:focus) {
|
|
outline: none;
|
|
box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-ring) 55%, transparent);
|
|
}
|
|
|
|
:global(.fc .fc-button.fc-button-active) {
|
|
background: var(--color-primary);
|
|
color: var(--color-primary-foreground);
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
/* ---------- Month header + day numbers ---------- */
|
|
:global(.fc .fc-col-header-cell-cushion) {
|
|
color: var(--color-muted-foreground);
|
|
font-weight: 600;
|
|
padding: 8px 12px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
:global(.fc .fc-daygrid-day-top) {
|
|
padding: 8px 8px 0 8px;
|
|
}
|
|
|
|
:global(.fc .fc-daygrid-day-number) {
|
|
color: var(--color-muted-foreground);
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
text-decoration: none;
|
|
height: 26px;
|
|
}
|
|
|
|
/* Today: soft background + stronger number */
|
|
:global(.fc .fc-day-today) {
|
|
background: color-mix(in oklab, var(--color-primary) 12%, transparent);
|
|
}
|
|
|
|
:global(.fc .fc-day-today .fc-daygrid-day-number) {
|
|
color: var(--color-foreground);
|
|
}
|
|
|
|
/* Hover affordance inside a day cell (very subtle) */
|
|
:global(.fc .fc-daygrid-day:hover) {
|
|
background: color-mix(in oklab, var(--color-foreground) 3%, transparent);
|
|
}
|
|
|
|
/* ---------- Event chips (dayGrid) ---------- */
|
|
:global(.fc .fc-daygrid-event) {
|
|
display: block;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--color-foreground);
|
|
border-radius: 4px;
|
|
margin: 2px 6px;
|
|
text-decoration: none;
|
|
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
:global(.fc .fc-daygrid-event:hover) {
|
|
background: color-mix(in oklab, var(--color-foreground) 6%, transparent);
|
|
border-color: color-mix(in oklab, var(--color-foreground) 12%, var(--color-border));
|
|
}
|
|
|
|
|
|
|
|
:global(.ev-dot) {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex: 0 0 auto;
|
|
background: var(--ev-color, currentColor);
|
|
margin-right: 4px;
|
|
}
|
|
|
|
:global(.ev-time) {
|
|
font-weight: 600;
|
|
margin-right: 4px;
|
|
white-space: nowrap;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
:global(.ev-title) {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* One-line custom pill */
|
|
:global(.ev-pill) {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-width: 0;
|
|
padding: 4px 8px;
|
|
border-radius: 6px;
|
|
background: color-mix(in srgb, var(--ev-color) 15%, transparent);
|
|
text-decoration: none;
|
|
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
:global(.ev-pill:hover) {
|
|
/* background: color-mix(in oklab, var(--color-primary) 20%, transparent);
|
|
border-color: color-mix(in oklab, var(--color-primary) 45%, var(--color-border)); */
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ev-dot {
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.ev-time {
|
|
font-weight: 600;
|
|
margin-right: 4px;
|
|
white-space: nowrap;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.ev-title {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.ev-pill.is-colored {
|
|
color: var(--color-primary-foreground);
|
|
}
|
|
|
|
:global(.fc-daygrid-top) {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* --- Replace the default today highlight with a round badge --- */
|
|
:global(.fc .fc-daygrid-day.fc-day-today) {
|
|
background: transparent;
|
|
}
|
|
|
|
:global(.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number) {
|
|
border-radius: 6px;
|
|
background: color-mix(in oklab, var(--color-primary) 100%, transparent);
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
color: var(--color-primary-foreground);
|
|
}
|
|
|
|
:global(.fc .fc-daygrid-day:hover) {
|
|
background: color-mix(in oklab, var(--color-foreground) 3%, transparent);
|
|
}
|
|
</style>
|