@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/base/event-calendar/EventCalendar.vue

@@ -0,0 +1,414 @@
+<script setup lang="ts">
+import { useKeyboardNavigation } from './composables/useKeyboardNavigation';
+import { useDragAndDropSystem } from './composables/useDragAndDrop';
+import { useCompatibility } from './composables/useCompatibility';
+import type { CalendarEvent, ViewMode, MonthViewDay, DayColumnData } from './types';
+import { useEventFiltering } from './composables/useEventFiltering';
+import { useResilientErrorHandling } from './composables/useResilientErrorHandling';
+import { useColorManager } from './composables/useColorManager';
+import { useTimezone } from './composables/useTimezone';
+import { useRecurringEvents } from './composables/useRecurringEvents';
+import { useSecurity } from './composables/useSecurity';
+import { useEventStore } from './composables/useEventStore';
+import { useMonitoring } from './composables/useMonitoring';
+import { useAdvancedValidation } from './composables/useAdvancedValidation';
+import { PIXELS_PER_HOUR_CONFIG } from './composables/useCalendarUtils';
+
+const props = withDefaults(
+	defineProps<{
+		events?: CalendarEvent[];
+		initialView?: ViewMode;
+		disableDrag?: boolean;
+		isAddEvent?: boolean;
+	}>(),
+	{
+		events: () => [],
+		initialView: 'month',
+		disableDrag: false,
+		isAddEvent: false,
+	}
+);
+
+const emit = defineEmits<{
+	(e: 'eventAdd' | 'eventUpdate', event: CalendarEvent): void;
+	(e: 'eventDelete', eventId: string): void;
+}>();
+
+const currentView = ref<ViewMode>(props.initialView || 'month');
+const currentDate = ref(new Date());
+const localEvents = shallowRef<CalendarEvent[]>([]);
+
+// Initialize enhanced composables
+const { handleError, withErrorHandling } = useResilientErrorHandling();
+const { performSecurityCheck, initializeSecurity } = useSecurity();
+const { ensureUUID } = useCompatibility();
+const eventStore = useEventStore();
+const { measureOperation } = useMonitoring();
+const { validateEvent } = useAdvancedValidation();
+const { processEventsWithTimezone, convertEventToDisplayTimezone } = useTimezone();
+
+// Initialize security and compatibility on component mount
+initializeSecurity();
+
+// Process events with timezone conversion for display
+const rawEventsComputed = computed(() => localEvents.value);
+const eventsWithTimezone = processEventsWithTimezone(rawEventsComputed);
+
+// Initialize recurring events processing
+const { expandRecurringEventsInRange } = useRecurringEvents(eventsWithTimezone);
+
+// Expand recurring events based on current view
+const eventsComputed = computed(() => {
+	const viewStartDate = computed(() => {
+		if (currentView.value === 'month') {
+			return startOfWeek(startOfMonth(currentDate.value), { weekStartsOn: 1 });
+		} else if (currentView.value === 'week') {
+			return startOfWeek(currentDate.value, { weekStartsOn: 1 });
+		} else if (currentView.value === 'day') {
+			return startOfDay(currentDate.value);
+		} else {
+			// agenda view - show 3 months
+			return startOfMonth(currentDate.value);
+		}
+	});
+
+	const viewEndDate = computed(() => {
+		if (currentView.value === 'month') {
+			return endOfWeek(endOfMonth(currentDate.value), { weekStartsOn: 1 });
+		} else if (currentView.value === 'week') {
+			return endOfWeek(currentDate.value, { weekStartsOn: 1 });
+		} else if (currentView.value === 'day') {
+			return endOfDay(currentDate.value);
+		} else {
+			// agenda view - show 3 months
+			return endOfMonth(addMonths(currentDate.value, 2));
+		}
+	});
+
+	return expandRecurringEventsInRange(viewStartDate.value, viewEndDate.value).value;
+});
+const { getAllDayEventsForDay, getTimedEventsForDay, getAgendaEvents } = useEventFiltering(eventsComputed);
+
+// Initialize color manager
+const { assignUniqueColor } = useColorManager(eventsComputed);
+
+// Initialize enhanced drag and drop system
+const { globalDragState } = useDragAndDropSystem({
+	enabled: props.disableDrag,
+	crossViewEnabled: props.disableDrag,
+	visualFeedback: props.disableDrag,
+	showDuration: props.disableDrag,
+	enableResize: props.disableDrag,
+});
+
+watch(
+	() => props.events,
+	(newEvents) => {
+		localEvents.value = [...newEvents];
+	},
+	{ deep: true, immediate: true }
+);
+
+// --- State for EventModal ---
+const isEventModalOpen = ref(false);
+const popupMode = ref<'add' | 'edit'>('add');
+const eventForPopup = ref<CalendarEvent | null>(null);
+const popupTargetDate = ref<Date | null>(null);
+const popupIsAllDayFromCell = ref<boolean>(false);
+
+const navigate = (direction: 'prev' | 'next' | 'today') => {
+	if (direction === 'today') {
+		currentDate.value = new Date();
+		return;
+	}
+	const S = direction === 'prev' ? -1 : 1;
+	if (currentView.value === 'month') currentDate.value = addMonths(currentDate.value, S);
+	else if (currentView.value === 'week') currentDate.value = addWeeks(currentDate.value, S);
+	else if (currentView.value === 'day') currentDate.value = addDays(currentDate.value, S);
+	else if (currentView.value === 'agenda') currentDate.value = addMonths(currentDate.value, S);
+};
+
+const calendarTitle = computed(() => {
+	if (currentView.value === 'month') return formatDateTime(currentDate.value, 'MMMM yyyy');
+	if (currentView.value === 'week') {
+		const start = startOfWeek(currentDate.value, { weekStartsOn: 1 }); // Assuming week starts on Monday
+		const end = endOfWeek(currentDate.value, { weekStartsOn: 1 });
+		return `${formatDateTime(start, 'MMM d')} - ${formatDateTime(end, 'MMM d, yyyy')}`;
+	}
+	if (currentView.value === 'day') return formatDateTime(currentDate.value, 'MMMM d, yyyy');
+	if (currentView.value === 'agenda') return formatDateTime(currentDate.value, 'MMMM yyyy');
+	return 'Calendar';
+});
+
+const openAddModalHandler = (date?: Date, isAllDaySlot?: boolean, allDayTargetDate?: Date) => {
+	popupMode.value = 'add';
+	eventForPopup.value = null;
+	popupTargetDate.value = allDayTargetDate || date || new Date();
+	popupIsAllDayFromCell.value = !!isAllDaySlot;
+	isEventModalOpen.value = true;
+};
+
+const openEditModalHandler = (event: CalendarEvent) => {
+	popupMode.value = 'edit';
+	// Convert event to display timezone for editing
+	eventForPopup.value = convertEventToDisplayTimezone({ ...event });
+	popupTargetDate.value = null; // Not needed for edit
+	popupIsAllDayFromCell.value = event.allDay || false;
+	isEventModalOpen.value = true;
+};
+
+const handleModalSubmit = async (eventPayload: CalendarEvent, mode: 'add' | 'edit') => {
+	await measureOperation(`event_${mode}`, async () => {
+		// Security check first
+		const securityResult = performSecurityCheck(eventPayload);
+		if (!securityResult.isSecure) {
+			await handleError(new Error('Security validation failed'), {
+				component: 'EventCalendar',
+				operation: `event_${mode}`,
+			});
+			return;
+		}
+
+		// Use sanitized event data
+		const sanitizedEvent = securityResult.sanitizedEvent;
+
+		// Ensure event has an id and required properties for validation
+		const eventWithId = {
+			...sanitizedEvent,
+			id: sanitizedEvent.id || ensureUUID(),
+			title: sanitizedEvent.title || 'Untitled Event',
+			startDate: sanitizedEvent.startDate || new Date(),
+			endDate: sanitizedEvent.endDate || new Date(),
+		} as CalendarEvent;
+
+		// Advanced validation
+		const validationResult = validateEvent(eventWithId);
+		if (!validationResult.isValid) {
+			await handleError(new Error(validationResult.errors.map((e) => e.message).join(', ')), {
+				component: 'EventCalendar',
+				operation: `event_${mode}_validation`,
+			});
+			return;
+		}
+
+		await withErrorHandling(
+			async () => {
+				if (mode === 'add') {
+					// Assign unique color if not already set
+					const eventId = ensureUUID();
+					const eventWithColor = {
+						...sanitizedEvent,
+						id: eventId,
+						color: sanitizedEvent.color || assignUniqueColor({ ...sanitizedEvent, id: eventId } as CalendarEvent),
+					};
+
+					// Add to local store first
+					eventStore.addEvent(eventWithColor as CalendarEvent);
+					emit('eventAdd', eventWithColor as CalendarEvent);
+				} else {
+					// For edit mode, keep existing color or assign new one if needed
+					const eventWithColor = {
+						...sanitizedEvent,
+						color: sanitizedEvent.color || assignUniqueColor(sanitizedEvent as CalendarEvent),
+					};
+
+					// Update in local store
+					eventStore.updateEvent(eventWithColor.id as string, eventWithColor);
+					emit('eventUpdate', eventWithColor as CalendarEvent);
+				}
+
+				isEventModalOpen.value = false; // Close popup on submit
+			},
+			{
+				component: 'EventCalendar',
+				operation: `event_${mode}`,
+			}
+		);
+	});
+};
+
+const handleModalDelete = async (eventId: string) => {
+	await measureOperation('event_delete', async () => {
+		await withErrorHandling(
+			async () => {
+				// Delete from local store
+				eventStore.deleteEvent(eventId);
+				emit('eventDelete', eventId);
+				isEventModalOpen.value = false; // Close popup on delete
+			},
+			{
+				component: 'EventCalendar',
+				operation: 'event_delete',
+			}
+		);
+	});
+};
+
+// Data preparation for views
+// Memoize today's date to avoid repeated Date() calls
+const today = computed(() => new Date());
+
+const monthViewDaysComputed = computed<MonthViewDay[]>(() => {
+	const startMonth = startOfMonth(currentDate.value);
+	const endMonth = endOfMonth(currentDate.value);
+	const startCalendar = startOfWeek(startMonth, { weekStartsOn: 1 });
+	const endCalendar = endOfWeek(endMonth, { weekStartsOn: 1 });
+	const currentMonth = currentDate.value.getMonth();
+	const todayValue = today.value;
+
+	return eachDayOfInterval({ start: startCalendar, end: endCalendar }).map((day) => ({
+		date: day,
+		isCurrentMonth: day.getMonth() === currentMonth,
+		isToday: isSameDay(day, todayValue),
+		events: eventsComputed.value.filter((event) => {
+			const eventStartDay = startOfDay(new Date(event.startDate));
+			// For month view, an event ending at midnight on day X is still considered to be on day X-1
+			const eventEndDay = new Date(event.endDate);
+			const effectiveEnd = eventEndDay.getHours() === 0 && eventEndDay.getMinutes() === 0 ? subDays(eventEndDay, 1) : eventEndDay;
+
+			return isWithinInterval(day, { start: eventStartDay, end: startOfDay(effectiveEnd) });
+		}),
+	}));
+});
+
+const weekViewDaysComputed = computed<DayColumnData[]>(() => {
+	const weekStart = startOfWeek(currentDate.value, { weekStartsOn: 1 });
+	const weekEnd = endOfWeek(currentDate.value, { weekStartsOn: 1 });
+	const todayValue = today.value;
+
+	return eachDayOfInterval({ start: weekStart, end: weekEnd }).map((day) => {
+		return {
+			date: day,
+			dateKey: formatDateTime(day, 'yyyy-MM-dd'),
+			dayLabel: formatDateTime(day, 'EEE dd'),
+			isToday: isSameDay(day, todayValue),
+			allDayEvents: getAllDayEventsForDay(day).value,
+			timedEventsRaw: getTimedEventsForDay(day).value,
+		} as DayColumnData;
+	});
+});
+
+const dayViewDataComputed = computed<DayColumnData>(() => {
+	const day = currentDate.value;
+	const todayValue = today.value;
+	return {
+		date: day,
+		dateKey: formatDateTime(day, 'yyyy-MM-dd'),
+		isToday: isSameDay(day, todayValue),
+		allDayEvents: getAllDayEventsForDay(day).value,
+		timedEventsRaw: getTimedEventsForDay(day).value,
+	} as DayColumnData;
+});
+
+const agendaEventsComputed = computed<CalendarEvent[]>(() => {
+	return getAgendaEvents(currentDate.value).value;
+});
+
+const handleEventUpdateFromView = (updatedEvent: CalendarEvent) => {
+	emit('eventUpdate', updatedEvent);
+};
+
+// Initialize enhanced keyboard navigation
+useKeyboardNavigation(currentView, currentDate, isEventModalOpen, navigate, () => openAddModalHandler());
+
+// Drag and drop system is automatically initialized when useDragAndDropSystem is called
+</script>
+
+<template>
+	<div class="bg-background text-foreground border-border-base flex h-full flex-col rounded-lg border p-6">
+		<header class="mb-4 flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center sm:gap-0">
+			<!-- Navigation and title -->
+			<div class="flex w-full items-center gap-2 sm:w-auto">
+				<nav class="flex items-center gap-1 sm:gap-2" role="navigation" aria-label="Calendar navigation">
+					<DynectButton color="secondary" size="sm" class="h-9 w-9 p-0" :aria-label="`Go to previous ${currentView}`" @click="navigate('prev')">
+						<Icon name="lucide:chevron-left" size="16" aria-hidden="true" />
+						<span class="sr-only">Previous</span>
+					</DynectButton>
+					<DynectButton color="secondary" size="sm" class="h-9 px-3" aria-label="Go to today" @click="navigate('today')"> Today </DynectButton>
+					<DynectButton color="secondary" size="sm" class="h-9 w-9 p-0" :aria-label="`Go to next ${currentView}`" @click="navigate('next')">
+						<Icon name="lucide:chevron-right" size="16" aria-hidden="true" />
+						<span class="sr-only">Next</span>
+					</DynectButton>
+				</nav>
+				<h1 class="ml-2 truncate text-lg font-semibold sm:ml-4 sm:text-xl" aria-level="1">
+					{{ calendarTitle }}
+				</h1>
+			</div>
+			<!-- Actions -->
+			<div class="flex w-full items-center justify-between gap-2 sm:w-auto sm:justify-end">
+				<DynectButton v-if="props.isAddEvent" color="brand" size="sm" class="h-9 px-3" @click="openAddModalHandler()">
+					<Icon name="lucide:plus" size="16" class="mr-1" />
+					<span class="hidden sm:inline">Add Event</span>
+					<span class="sm:hidden">Add</span>
+				</DynectButton>
+				<DropdownMenu>
+					<DropdownMenuTrigger as-child>
+						<DynectButton color="secondary" size="sm" class="h-9 gap-1.5 px-3">
+							<span>
+								<span className="min-[480px]:hidden" aria-hidden="true">
+									{{ currentView.charAt(0).toUpperCase() }}
+								</span>
+								<span className="max-[479px]:sr-only">
+									{{ currentView.charAt(0).toUpperCase() + currentView.slice(1) }}
+								</span>
+							</span>
+							<Icon name="lucide:chevron-down" class="-me-1 opacity-60" size="16" aria-hidden="true" />
+						</DynectButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" class="border-border-base bg-bg-primary-medium min-w-32 overflow-hidden rounded-xl border p-2">
+						<DropdownMenuItem class="text-text-body" @click="() => (currentView = 'month')"> Month <DropdownMenuShortcut>M</DropdownMenuShortcut> </DropdownMenuItem>
+						<DropdownMenuItem class="text-text-body" @click="() => (currentView = 'week')"> Week <DropdownMenuShortcut>W</DropdownMenuShortcut> </DropdownMenuItem>
+						<DropdownMenuItem class="text-text-body" @click="() => (currentView = 'day')"> Day <DropdownMenuShortcut>D</DropdownMenuShortcut> </DropdownMenuItem>
+						<DropdownMenuItem class="text-text-body" @click="() => (currentView = 'agenda')"> Agenda <DropdownMenuShortcut>A</DropdownMenuShortcut> </DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+		</header>
+
+		<main class="grow overflow-auto">
+			<BaseEventCalendarMonthView
+				v-if="currentView === 'month'"
+				:is-add-event="props.isAddEvent"
+				:days="monthViewDaysComputed"
+				:pixels-per-hour="PIXELS_PER_HOUR_CONFIG"
+				:disable-drag="props.disableDrag"
+				@open-add-modal="openAddModalHandler"
+				@open-edit-modal="openEditModalHandler"
+				@event-update="handleEventUpdateFromView"
+			/>
+			<BaseEventCalendarWeekView
+				v-if="currentView === 'week'"
+				:week-days-data="weekViewDaysComputed"
+				:pixels-per-hour="PIXELS_PER_HOUR_CONFIG"
+				:disable-drag="props.disableDrag"
+				:is-add-event="props.isAddEvent"
+				@open-add-modal="openAddModalHandler"
+				@open-edit-modal="openEditModalHandler"
+				@event-update="handleEventUpdateFromView"
+			/>
+			<BaseEventCalendarDayView
+				v-if="currentView === 'day'"
+				:is-add-event="props.isAddEvent"
+				:day-data="dayViewDataComputed"
+				:pixels-per-hour="PIXELS_PER_HOUR_CONFIG"
+				:disable-drag="props.disableDrag"
+				@open-add-modal="openAddModalHandler"
+				@open-edit-modal="openEditModalHandler"
+				@event-update="handleEventUpdateFromView"
+			/>
+			<BaseEventCalendarAgendaView v-if="currentView === 'agenda'" :events="agendaEventsComputed" :current-date="currentDate" @open-edit-modal="openEditModalHandler" />
+		</main>
+
+		<!-- Event Add/Edit Modal (Dialog) -->
+		<BaseEventCalendarEventModal v-if="props.isAddEvent" v-model:is-open="isEventModalOpen" :mode="popupMode" :event-data="eventForPopup" :target-date="popupTargetDate" :is-all-day-from-cell="popupIsAllDayFromCell" @submit-event="handleModalSubmit" @delete-event="handleModalDelete" />
+
+		<!-- Drag and Drop Visual Feedback -->
+		<BaseEventCalendarDragDropVisualFeedback
+			:is-dragging="globalDragState?.isDragging || false"
+			:dragged-event="globalDragState?.draggedEvent"
+			:valid-drop-zones="globalDragState?.validDropZones?.map((zone) => zone.id) || []"
+			:current-drop-zone="globalDragState?.currentDropZone?.id"
+			:drag-position="globalDragState?.dragPreview ? { x: globalDragState.dragPreview.x, y: globalDragState.dragPreview.y } : { x: 0, y: 0 }"
+		/>
+	</div>
+</template>