@eeplatform/nuxt-layer-common 1.2.11 → 1.3.0

package/components/CalendarDay.vue

@@ -0,0 +1,531 @@
+<template>
+  <div class="calendar day-view" :style="{ height: calendarHeight }">
+    <div class="day-header">
+      <h3>{{ formatDayHeader(current) }}</h3>
+    </div>
+
+    <!-- Table-based Day View with Minute Grid -->
+    <div class="day-table-container">
+      <table class="day-table">
+        <colgroup>
+          <col style="width: 80px" />
+          <col style="width: calc(100% - 80px)" />
+        </colgroup>
+        <tbody>
+          <!-- Hour rows with minute subdivisions -->
+          <tr
+            v-for="timeSlot in dayTimeSlots"
+            :key="`${timeSlot.hour}-${timeSlot.minute}`"
+            class="time-row"
+            :class="{
+              'hour-boundary': timeSlot.minute === 0,
+              'quarter-hour':
+                timeSlot.minute % 15 === 0 && timeSlot.minute !== 0,
+              'five-minute':
+                timeSlot.minute % 5 === 0 && timeSlot.minute % 15 !== 0,
+            }"
+          >
+            <!-- Time cell - only show hour label on hour boundaries -->
+            <td
+              v-if="timeSlot.minute === 0"
+              class="time-cell hour-cell"
+              :rowspan="60"
+              @click="onHourClick(current, timeSlot.display)"
+            >
+              <div class="hour-label">{{ timeSlot.display }}</div>
+            </td>
+
+            <!-- Event cell -->
+            <td
+              class="event-cell minute-cell"
+              :class="{
+                'has-events': getEventForTimeSlot(
+                  timeSlot.hour,
+                  timeSlot.minute
+                ),
+                'event-start': isEventStartAtTime(
+                  timeSlot.hour,
+                  timeSlot.minute
+                ),
+                'event-continuation': isEventContinuationAtTime(
+                  timeSlot.hour,
+                  timeSlot.minute
+                ),
+              }"
+              @click="onMinuteClick(current, timeSlot.hour, timeSlot.minute)"
+            >
+              <!-- Show events horizontally stacked at their start time -->
+              <div
+                v-if="isEventStartAtTime(timeSlot.hour, timeSlot.minute)"
+                class="events-horizontal-container"
+              >
+                <div
+                  v-for="(event, eventIndex) in getEventsStartingAt(
+                    timeSlot.hour,
+                    timeSlot.minute
+                  )"
+                  :key="`${timeSlot.hour}-${timeSlot.minute}-${event.id}`"
+                  class="table-event horizontal-event"
+                  :style="{
+                    backgroundColor: event.color || '#2196f3',
+                    height: `${getEventHeightInPixels(event)}px`,
+                    width: '150px',
+                    marginRight:
+                      eventIndex <
+                      getEventsStartingAt(timeSlot.hour, timeSlot.minute)
+                        .length -
+                        1
+                        ? '8px'
+                        : '0',
+                    zIndex: 10 + eventIndex,
+                  }"
+                  @click.stop="onEventClick(event)"
+                >
+                  <div class="table-event-title">
+                    {{ event.title }}
+                  </div>
+                  <div class="table-event-time">
+                    {{ formatEventTime(event) }}
+                  </div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  current: {
+    type: Date,
+    required: true,
+  },
+  events: {
+    type: Array,
+    default: () => [],
+  },
+  calendarHeight: {
+    type: String,
+    default: "calc(100vh - 100px)",
+  },
+});
+
+const emit = defineEmits(["hourClick", "minuteClick", "eventClick"]);
+
+// Helper functions for event calculations
+const isSameDay = (date1, date2) => {
+  return date1.toDateString() === date2.toDateString();
+};
+
+const isDateInRange = (date, startDate, endDate) => {
+  const checkDate = new Date(date);
+  checkDate.setHours(0, 0, 0, 0);
+  const start = new Date(startDate);
+  start.setHours(0, 0, 0, 0);
+  const end = new Date(endDate);
+  end.setHours(0, 0, 0, 0);
+
+  return checkDate >= start && checkDate <= end;
+};
+
+const getEventsForDate = (date) => {
+  return props.events.filter((event) =>
+    isDateInRange(date, event.startDate, event.endDate)
+  );
+};
+
+// Generate time slots for minute-based day view (6 AM to 5 AM, 12*60 = 720 minutes)
+const dayTimeSlots = computed(() => {
+  const timeSlots = [];
+
+  // 6 AM to 11:59 PM (current day)
+  for (let hour = 6; hour <= 23; hour++) {
+    for (let minute = 0; minute < 60; minute++) {
+      const display =
+        hour === 12 ? "12 PM" : hour > 12 ? `${hour - 12} PM` : `${hour} AM`;
+      timeSlots.push({
+        hour: hour,
+        minute: minute,
+        display: display,
+        time24: hour * 60 + minute,
+        timeString: `${hour.toString().padStart(2, "0")}:${minute
+          .toString()
+          .padStart(2, "0")}`,
+      });
+    }
+  }
+
+  // 12 AM to 5:59 AM (next day)
+  for (let hour = 0; hour <= 5; hour++) {
+    for (let minute = 0; minute < 60; minute++) {
+      const display = hour === 0 ? "12 AM" : `${hour} AM`;
+      timeSlots.push({
+        hour: hour + 24, // Use 24+ to represent next day hours
+        minute: minute,
+        display: display,
+        time24: (hour + 24) * 60 + minute,
+        timeString: `${hour.toString().padStart(2, "0")}:${minute
+          .toString()
+          .padStart(2, "0")}`,
+      });
+    }
+  }
+
+  return timeSlots;
+});
+
+// Helper functions for table-based day view
+const getEventDurationInMinutes = (event) => {
+  if (!event.startTime || !event.endTime) return 60; // Default 1 hour
+
+  const startMinutes = parseTimeToMinutes(event.startTime);
+  const endMinutes = parseTimeToMinutes(event.endTime);
+
+  return Math.max(15, endMinutes - startMinutes); // Minimum 15 minutes
+};
+
+const parseTimeToMinutes = (timeStr) => {
+  if (!timeStr) return 0;
+
+  if (typeof timeStr === "string") {
+    // Handle 24-hour format (e.g., "08:30", "14:45")
+    const timeMatch = timeStr.match(/^(\d{1,2}):(\d{2})$/);
+    if (timeMatch) {
+      return parseInt(timeMatch[1]) * 60 + parseInt(timeMatch[2]);
+    }
+
+    // Handle 12-hour format with AM/PM (e.g., "9:30 AM", "2:45 PM")
+    const ampmMatch = timeStr.match(/(\d+):(\d+)\s*(AM|PM)/i);
+    if (ampmMatch) {
+      let hour = parseInt(ampmMatch[1]);
+      const minute = parseInt(ampmMatch[2]);
+      const period = ampmMatch[3].toUpperCase();
+
+      if (period === "PM" && hour !== 12) {
+        hour += 12;
+      } else if (period === "AM" && hour === 12) {
+        hour = 0;
+      }
+
+      return hour * 60 + minute;
+    }
+
+    // Handle hour only format (e.g., "9 AM", "2 PM")
+    const hourMatch = timeStr.match(/(\d+)\s*(AM|PM)/i);
+    if (hourMatch) {
+      let hour = parseInt(hourMatch[1]);
+      const period = hourMatch[2].toUpperCase();
+
+      if (period === "PM" && hour !== 12) {
+        hour += 12;
+      } else if (period === "AM" && hour === 12) {
+        hour = 0;
+      }
+
+      return hour * 60;
+    }
+  }
+
+  if (timeStr instanceof Date) {
+    return timeStr.getHours() * 60 + timeStr.getMinutes();
+  }
+
+  return 0;
+};
+
+// Check if an event starts at a specific time
+const isEventStartAtTime = (hour, minute) => {
+  const eventsForDay = getEventsForDate(props.current);
+  const slotTime = hour * 60 + minute;
+
+  return eventsForDay.some((event) => {
+    const startTime = parseTimeToMinutes(event.startTime);
+
+    // Handle next day slots
+    if (hour >= 24) {
+      // For slots after midnight, check if event starts at this time on next day
+      const nextDayTime = (hour - 24) * 60 + minute;
+      return (
+        startTime === nextDayTime &&
+        parseTimeToMinutes(event.endTime) < startTime
+      ); // Event spans midnight
+    } else {
+      return startTime === slotTime;
+    }
+  });
+};
+
+// Check if this time slot is a continuation of an event (not the start)
+const isEventContinuationAtTime = (hour, minute) => {
+  const event = getEventForTimeSlot(hour, minute);
+  return event && !isEventStartAtTime(hour, minute);
+};
+
+// Get all events that start at a specific hour and minute
+const getEventsStartingAt = (hour, minute) => {
+  const eventsForDay = getEventsForDate(props.current);
+  const slotTime = hour * 60 + minute;
+
+  return eventsForDay.filter((event) => {
+    const startTime = parseTimeToMinutes(event.startTime);
+
+    // Handle next day slots
+    if (hour >= 24) {
+      const nextDayTime = (hour - 24) * 60 + minute;
+      return (
+        startTime === nextDayTime &&
+        parseTimeToMinutes(event.endTime) < startTime
+      );
+    } else {
+      return startTime === slotTime;
+    }
+  });
+};
+
+// Calculate event height in pixels based on duration
+const getEventHeightInPixels = (event) => {
+  const durationMinutes = getEventDurationInMinutes(event);
+  const pixelsPerMinute = 2; // Each minute row is 2px high
+  return Math.max(20, durationMinutes * pixelsPerMinute); // Minimum 20px height
+};
+
+const getEventForTimeSlot = (hour, minute) => {
+  const eventsForDay = getEventsForDate(props.current);
+  const slotTime = hour * 60 + minute;
+
+  // Find event that starts exactly at this time
+  return eventsForDay.find((event) => {
+    const eventStartMinutes = parseTimeToMinutes(event.startTime);
+    return eventStartMinutes === slotTime;
+  });
+};
+
+// Format event time display
+const formatEventTime = (event) => {
+  if (!event.startTime && !event.endTime) return "";
+
+  const formatTime = (timeStr) => {
+    if (!timeStr) return "";
+
+    // If it's already a formatted 12-hour string (contains AM/PM), return it as-is
+    if (typeof timeStr === "string" && /AM|PM/i.test(timeStr)) {
+      return timeStr;
+    }
+
+    // If it's a 24-hour format string, convert to 12-hour
+    if (typeof timeStr === "string" && /^\d{1,2}:\d{2}$/.test(timeStr)) {
+      const [hours, minutes] = timeStr.split(":");
+      const hour24 = parseInt(hours);
+      const hour12 = hour24 === 0 ? 12 : hour24 > 12 ? hour24 - 12 : hour24;
+      const period = hour24 >= 12 ? "PM" : "AM";
+      return `${hour12}:${minutes} ${period}`;
+    }
+
+    // If it's a Date object, format it to 12-hour
+    if (timeStr instanceof Date) {
+      return timeStr.toLocaleTimeString([], {
+        hour: "numeric",
+        minute: "2-digit",
+        hour12: true,
+      });
+    }
+
+    return timeStr;
+  };
+
+  const start = formatTime(event.startTime);
+  const end = formatTime(event.endTime);
+
+  if (start && end) {
+    return `${start} - ${end}`;
+  } else if (start) {
+    return start;
+  } else if (end) {
+    return `Until ${end}`;
+  }
+
+  return "";
+};
+
+// Format day header for day view
+const formatDayHeader = (date) => {
+  return date.toLocaleDateString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+};
+
+// Handle hour click for day views
+const onHourClick = (date, hour) => {
+  emit("hourClick", {
+    date: date,
+    hour: hour,
+  });
+};
+
+// Handle minute click for table-based day view
+const onMinuteClick = (date, hour, minute) => {
+  emit("minuteClick", {
+    date: date,
+    hour: hour,
+    minute: minute,
+    time: `${hour}:${minute.toString().padStart(2, "0")}`,
+  });
+};
+
+// Handle event click
+const onEventClick = (event) => {
+  emit("eventClick", event);
+};
+</script>
+
+<style scoped>
+/* Day View Styles */
+.day-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.day-header {
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #f5f5f5;
+  text-align: center;
+}
+
+/* Table-based Day View Styles */
+.day-table-container {
+  flex: 1;
+  overflow: auto;
+  background: white;
+}
+
+.day-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed; /* Fixed layout for better control */
+}
+
+.day-table colgroup col:first-child {
+  width: 80px; /* Fixed width for time column */
+}
+
+.day-table colgroup col:last-child {
+  width: calc(100% - 80px); /* Remaining width for events */
+}
+
+.time-row {
+  height: 2px; /* Each minute row is 2px high */
+}
+
+.time-row.hour-boundary {
+  height: 2px;
+  border-top: 2px solid #d0d0d0; /* Strong border for hour boundaries */
+}
+
+.time-cell {
+  border: 1px solid #e0e0e0;
+  vertical-align: top;
+  position: relative;
+  background-color: #fafafa;
+}
+
+.hour-cell {
+  padding: 4px 6px;
+  text-align: center;
+  font-weight: 500;
+  border-right: 2px solid #d0d0d0;
+  white-space: nowrap;
+  width: 80px; /* Fixed width for time column */
+  min-width: 80px;
+  vertical-align: middle; /* Center the hour label vertically */
+  position: sticky;
+  left: 0;
+  z-index: 10;
+  background-color: #fafafa;
+  cursor: pointer;
+}
+
+.hour-label {
+  font-size: 0.75em;
+  color: #666;
+  font-weight: 600;
+}
+
+.event-cell {
+  border: 1px solid #f8f8f8;
+  position: relative;
+  cursor: default; /* Default cursor for empty cells */
+  transition: background-color 0.2s;
+  width: auto; /* Let the cell expand to fit content */
+  min-width: 200px; /* Minimum width for events */
+  padding: 0; /* Remove padding to allow full control */
+}
+
+.minute-cell {
+  border-top: none;
+  border-bottom: none;
+  border-left: 1px solid #f8f8f8;
+  padding: 0;
+  margin: 0;
+}
+
+.events-horizontal-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  position: absolute;
+  top: 0;
+  left: 2px;
+  right: 2px;
+  min-height: 2px; /* Match the minute row height */
+  overflow: visible; /* Allow events to overflow for long durations */
+}
+
+.table-event {
+  border-radius: 4px;
+  padding: 4px 6px;
+  color: white;
+  font-size: 0.75em;
+  cursor: pointer;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform 0.1s, box-shadow 0.1s;
+  min-height: 20px; /* Minimum height for very short events */
+  flex-shrink: 0; /* Prevent events from shrinking */
+}
+
+.table-event.horizontal-event {
+  position: relative; /* Changed from absolute to relative for horizontal stacking */
+}
+
+.table-event-title {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1.2;
+  margin-bottom: 2px;
+}
+
+.table-event-time {
+  font-size: 0.85em;
+  opacity: 0.9;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>