@bagelink/vue 1.2.15 → 1.2.18

package/src/components/calendar/views/WeekView.vue

@@ -0,0 +1,432 @@
+<script setup lang="ts">
+import type { CalendarEvent, WeekStart } from '../CalendarTypes'
+import type { PopoverState } from '../utils'
+import { Card, formatDate } from '@bagelink/vue'
+import { ref, computed, onMounted, onUnmounted, useSlots } from 'vue'
+import {
+	openPopover as openPopoverUtil,
+	closePopover as closePopoverUtil,
+} from '../utils'
+
+interface WeekViewEvent extends CalendarEvent {
+	top: number
+	height: number
+	left: number
+	width: number
+	overlappingEvents: number
+	position: number
+}
+
+const props = withDefaults(defineProps<{
+	events?: CalendarEvent[]
+	startDate?: Date
+	weekStart?: WeekStart
+}>(), {
+	startDate: () => new Date(),
+	weekStart: 'Sunday',
+	events: () => []
+})
+
+const emit = defineEmits<{
+	(e: 'eventClick', event: CalendarEvent): void
+	(e: 'eventCreate', event: { start_time: Date, end_time: Date }): void
+}>()
+
+const slots = useSlots()
+
+// Configuration constants
+const slotHeight = 60
+const slotDuration = 60
+const timeRange = { start: 0, end: 24 }
+
+// Drag state
+const dragState = ref({
+	isDragging: false,
+	start: null as { x: number, y: number } | null,
+	end: null as { x: number, y: number } | null,
+	startTime: null as Date | null,
+	endTime: null as Date | null
+})
+
+// Popover state
+const activeEvent = ref<CalendarEvent | null>(null)
+const showPopover = ref(false)
+const popoverPosition = ref({ top: 0, left: 0, width: 0, height: 0 })
+const popoverRef = ref<HTMLElement | null>(null)
+
+const popoverState: PopoverState = {
+	activeEvent,
+	showPopover,
+	popoverPosition,
+	popoverRef
+}
+
+// Time indicators
+const currentTimeTop = ref(0)
+const isToday = ref(false)
+const currentTimeInterval = ref(null as any)
+
+// Calculate week days based on start date and week start preference
+const weekDays = computed(() => {
+	const days = []
+	const start = new Date(props.startDate)
+	const weekStartOffset = props.weekStart === 'Sunday' ? 0 : 1
+
+	// Adjust to start of week
+	const dayOfWeek = start.getDay()
+	start.setDate(start.getDate() - dayOfWeek + weekStartOffset)
+
+	// Create array of 7 day dates
+	for (let i = 0; i < 7; i++) {
+		const date = new Date(start)
+		date.setDate(start.getDate() + i)
+		days.push(date)
+	}
+	return days
+})
+
+// Generate hourly time slots
+const timeSlots = computed(() => {
+	const slots = []
+	for (let hour = timeRange.start; hour < timeRange.end; hour++) {
+		for (let minute = 0; minute < 60; minute += slotDuration) {
+			slots.push({
+				hour,
+				minute,
+				time: `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`
+			})
+		}
+	}
+	return slots
+})
+
+// Process events for display with positioning calculations
+const processedEvents = computed(() => {
+	const events: WeekViewEvent[] = []
+	const overlappingGroups: { [key: string]: WeekViewEvent[] } = {}
+
+	props.events.forEach((event) => {
+		const startDate = new Date(event.start_time)
+		const endDate = new Date(event.end_time)
+
+		// Find which day this event belongs to
+		const dayIndex = weekDays.value.findIndex(day => day.getDate() === startDate.getDate()
+			&& day.getMonth() === startDate.getMonth()
+			&& day.getFullYear() === startDate.getFullYear()
+		)
+
+		if (dayIndex === -1) return
+
+		// Calculate vertical positioning
+		const startMinutes = startDate.getHours() * 60 + startDate.getMinutes()
+		const endMinutes = endDate.getHours() * 60 + endDate.getMinutes()
+		const top = (startMinutes / slotDuration) * (slotHeight / 2)
+		const height = Math.max(((endMinutes - startMinutes) / slotDuration) * (slotHeight / 2), 30)
+
+		const weekEvent: WeekViewEvent = {
+			...event,
+			top,
+			height,
+			left: 0,
+			width: 95,
+			overlappingEvents: 0,
+			position: 0
+		}
+
+		// Group by day and time range for overlapping calculation
+		const key = `${dayIndex}-${Math.floor(startMinutes / 30)}`
+		if (!overlappingGroups[key]) {
+			overlappingGroups[key] = []
+		}
+		overlappingGroups[key].push(weekEvent)
+	})
+
+	// Adjust overlapping events
+	Object.values(overlappingGroups).forEach((group) => {
+		if (group.length > 1) {
+			const groupWidth = 95 / group.length
+			group.forEach((event, index) => {
+				event.overlappingEvents = group.length
+				event.position = index
+				event.width = groupWidth
+				event.left = index * groupWidth
+			})
+		}
+		events.push(...group)
+	})
+
+	return events
+})
+
+// Mouse event handlers for drag-to-create functionality
+function handleMouseDown(e: MouseEvent) {
+	const target = e.target as HTMLElement
+	if (!target.closest('.time-slot')) return
+
+	dragState.value.isDragging = true
+	dragState.value.start = { x: e.clientX, y: e.clientY }
+	dragState.value.startTime = getTimeFromPosition(e.clientX, e.clientY)
+
+	document.addEventListener('mousemove', handleMouseMove)
+	document.addEventListener('mouseup', handleMouseUp)
+}
+
+function handleMouseMove(e: MouseEvent) {
+	if (!dragState.value.isDragging) return
+
+	dragState.value.end = { x: e.clientX, y: e.clientY }
+	dragState.value.endTime = getTimeFromPosition(e.clientX, e.clientY)
+}
+
+function handleMouseUp() {
+	if (!dragState.value.isDragging || !dragState.value.startTime || !dragState.value.endTime) return
+
+	let start = new Date(dragState.value.startTime)
+	let end = new Date(dragState.value.endTime)
+
+	// Ensure end time is after start time
+	if (end < start) [start, end] = [end, start]
+
+	emit('eventCreate', { start_time: start, end_time: end })
+
+	// Reset drag state
+	dragState.value = {
+		isDragging: false,
+		start: null,
+		end: null,
+		startTime: null,
+		endTime: null
+	}
+
+	document.removeEventListener('mousemove', handleMouseMove)
+	document.removeEventListener('mouseup', handleMouseUp)
+}
+
+function getTimeFromPosition(x: number, y: number): Date {
+	const rect = document.querySelector('.time-slots')?.getBoundingClientRect()
+	if (!rect) return new Date()
+
+	const dayIndex = Math.floor((x - rect.left) / (rect.width / 7))
+	const minutes = Math.floor((y - rect.top) / (slotHeight / 2)) * slotDuration
+
+	const date = new Date(weekDays.value[dayIndex])
+	date.setHours(Math.floor(minutes / 60))
+	date.setMinutes(minutes % 60)
+
+	return date
+}
+
+// Update the current time indicator position
+function updateCurrentTimeIndicator() {
+	const now = new Date()
+
+	// Check if today is in our current week view
+	isToday.value = weekDays.value.some(day => day.getDate() === now.getDate()
+		&& day.getMonth() === now.getMonth()
+		&& day.getFullYear() === now.getFullYear()
+	)
+
+	// Calculate position for the current time line
+	const minutes = now.getHours() * 60 + now.getMinutes()
+	currentTimeTop.value = (minutes / slotDuration) * (slotHeight / 2)
+}
+
+// Wrapper functions for popover utilities
+function openPopover(event: CalendarEvent, e: MouseEvent) {
+	openPopoverUtil(
+		event,
+		e,
+		popoverState,
+		!!slots.eventContent,
+		(evt) => { emit('eventClick', evt) }
+	)
+}
+
+function closePopover() {
+	closePopoverUtil(popoverState)
+}
+
+// Lifecycle hooks
+onMounted(() => {
+	document.addEventListener('mousedown', handleMouseDown)
+
+	// Initialize current time indicator and set up interval to update it
+	updateCurrentTimeIndicator()
+	currentTimeInterval.value = setInterval(updateCurrentTimeIndicator, 60000)
+})
+
+onUnmounted(() => {
+	document.removeEventListener('mousedown', handleMouseDown)
+	document.removeEventListener('mousemove', handleMouseMove)
+	document.removeEventListener('mouseup', handleMouseUp)
+
+	if (currentTimeInterval.value) {
+		clearInterval(currentTimeInterval.value)
+	}
+})
+</script>
+
+<template>
+	<div class="w-100p overflow-hidden m_overflow h-100p grid">
+		<div class="weekGrid border-bottom me-1">
+			<div />
+			<div
+				v-for="day in weekDays" :key="day.toISOString()"
+				class="day-header p-05 txt-center"
+			>
+				{{ formatDate(day, 'DDD') }}
+				<span
+					class="txt-12 round p-025"
+					:class="{
+						'color-gray': day.toDateString() !== new Date().toDateString(),
+						'bg-primary color-white': day.toDateString() === new Date().toDateString(),
+					}"
+				>
+					{{ formatDate(day, 'DD') }}
+				</span>
+			</div>
+		</div>
+		<div class="overflow h-100p pe-05">
+			<div class="weekGrid border-end relative" @mousedown="handleMouseDown">
+				<div>
+					<div v-for="slot in timeSlots" :key="slot.time" class="txt-light txt-12 color-gray flex justify-content-center" :style="{ height: `${slotHeight}px` }">
+						{{ slot.time }}
+					</div>
+				</div>
+
+				<div v-if="isToday" class=" absolute end w-100p z-2 flex pointer-events-none ps-4-5" :style="{ top: `${currentTimeTop}px` }">
+					<div class="current-time-dot h-10px aspect-ratio-1 round bg-primary" />
+					<div class="current-time-line w-100p bg-primary" />
+				</div>
+
+				<div v-for="day in weekDays" :key="day.toISOString()" class="day-column top bottom border-start relative">
+					<template
+						v-for="event in processedEvents.filter(e =>
+							new Date(e.start_time).toDateString() === day.toDateString())"
+						:key="event.id"
+					>
+						<div
+							class="event absolute radius-05 overflow-hidden pointer transition z-1"
+							:style="{
+								top: `${event.top}px`,
+								height: `${event.height}px`,
+								left: `${event.left}%`,
+								width: `${event.width}%`,
+								backgroundColor: event.color || 'var(--bgl-primary)',
+							}"
+							@click.stop="slots.eventContent ? openPopover(event, $event) : emit('eventClick', event)"
+						>
+							<div class="overflow-hidden color-text-light p-025 txt12 h-100p">
+								<div class="white-space ellipsis-1">
+									{{ event.title }}
+								</div>
+								<div class="txt10 opacity-8">
+									{{ formatDate(event.start_time, 'HH:mm') }}
+								</div>
+							</div>
+						</div>
+					</template>
+				</div>
+
+				<!-- Drag selection preview -->
+				<div
+					v-if="dragState.isDragging && dragState.start && dragState.end"
+					class="drag-preview absolute bg-primary pointer-events-none"
+					:style="{
+						left: `${Math.min(dragState.start.x, dragState.end.x)}px`,
+						top: `${Math.min(dragState.start.y, dragState.end.y)}px`,
+						width: `${Math.abs(dragState.end.x - dragState.start.x)}px`,
+						height: `${Math.abs(dragState.end.y - dragState.start.y)}px`,
+					}"
+				/>
+			</div>
+		</div>
+
+		<!-- Custom Popover -->
+		<Card
+			v-if="showPopover && activeEvent"
+			ref="popoverRef"
+			v-click-outside="closePopover"
+			thin
+			class="custom-popover fixed z-999 radius-05 bg-white w350"
+			:style="{
+				top: `${popoverPosition.top}px`,
+				left: `${popoverPosition.left}px`,
+				maxWidth: `${popoverPosition.width}px`,
+			}"
+		>
+			<slot name="eventContent" :event="activeEvent" />
+		</Card>
+		<div class="border-bottom me-1" />
+	</div>
+</template>
+
+<style scoped>
+.weekGrid{
+	display: grid;
+	grid-template-columns: 5rem repeat(7, 1fr);
+}
+
+.days-column {
+  flex-grow: 1;
+  display: flex;
+
+}
+
+.time-slot {
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.time-slots {
+  flex-grow: 1;
+  display: flex;
+  overflow: auto;
+  position: relative;
+}
+
+.day-column {
+  flex: 1;
+}
+
+.event {
+  margin-right: 2px;
+}
+
+.event:hover {
+  z-index: 1;
+}
+
+.drag-preview {
+  border: 2px solid var(--bgl-primary);
+}
+
+.current-time-line {
+  height: 2px;
+}
+
+.custom-popover {
+  min-width: 250px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  animation: fadeIn 0.2s ease;
+  transform-origin: center left;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@media screen and (max-width: 910px) {
+
+}
+</style>