@eeplatform/nuxt-layer-common 1.2.11 → 1.3.0

package/components/CalendarWeek.vue

@@ -0,0 +1,545 @@
+<template>
+  <div class="calendar week-view" :style="{ height: calendarHeight }">
+    <div class="week-header">
+      <div class="time-column header-time-column"></div>
+      <div v-for="day in weekDays" :key="day.date" class="week-day-header">
+        <div class="day-name">{{ day.dayName }}</div>
+        <div class="day-date" :class="{ today: day.isToday }">
+          {{ day.dayNumber }}
+        </div>
+      </div>
+    </div>
+    <div class="week-body">
+      <div class="week-table-container">
+        <table class="week-table">
+          <colgroup>
+            <col style="width: 80px" />
+            <col
+              v-for="day in weekDays"
+              :key="day.date"
+              style="width: calc((100% - 80px) / 7)"
+            />
+          </colgroup>
+          <tbody>
+            <!-- Generate 732 rows: 12 hours × 61 rows each (60 minutes + 1 border) -->
+            <tr
+              v-for="(timeSlot, rowIndex) in getWeekTimeSlots()"
+              :key="`${timeSlot.hour}-${timeSlot.minute}`"
+              class="week-time-row"
+              :class="{
+                'hour-boundary': timeSlot.isBoundary,
+                'minute-row': !timeSlot.isBoundary,
+              }"
+            >
+              <!-- Hour column - only show hour label on boundary rows -->
+              <td v-if="timeSlot.isBoundary" class="hour-cell" :rowspan="61">
+                <div class="hour-label">{{ timeSlot.display }}</div>
+              </td>
+
+              <!-- Event columns for each day -->
+              <td
+                v-for="day in weekDays"
+                :key="day.date"
+                v-if="
+                  shouldRenderEventCell(
+                    day.date,
+                    timeSlot.hour,
+                    timeSlot.minute,
+                    rowIndex
+                  )
+                "
+                class="event-cell"
+                :rowspan="
+                  getEventRowspan(day.date, timeSlot.hour, timeSlot.minute)
+                "
+                @click="onMinuteClick(day.date, timeSlot.hour, timeSlot.minute)"
+              >
+                <!-- Render event or empty cell -->
+                <div
+                  v-if="
+                    getEventForTimeSlot(
+                      day.date,
+                      timeSlot.hour,
+                      timeSlot.minute
+                    )
+                  "
+                  class="week-event-content"
+                  :style="{
+                    backgroundColor:
+                      getEventForTimeSlot(
+                        day.date,
+                        timeSlot.hour,
+                        timeSlot.minute
+                      ).color || '#2196f3',
+                    height: '100%',
+                  }"
+                  @click.stop="
+                    onEventClick(
+                      getEventForTimeSlot(
+                        day.date,
+                        timeSlot.hour,
+                        timeSlot.minute
+                      )
+                    )
+                  "
+                >
+                  <div class="event-title">
+                    {{
+                      getEventForTimeSlot(
+                        day.date,
+                        timeSlot.hour,
+                        timeSlot.minute
+                      ).title
+                    }}
+                  </div>
+                  <div class="event-time">
+                    {{
+                      formatEventTime(
+                        getEventForTimeSlot(
+                          day.date,
+                          timeSlot.hour,
+                          timeSlot.minute
+                        )
+                      )
+                    }}
+                  </div>
+                </div>
+                <!-- Empty cell -->
+                <div v-else class="empty-cell"></div>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </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(["minuteClick", "eventClick"]);
+
+const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+
+// 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)
+  );
+};
+
+// Week view computed properties
+const weekDays = computed(() => {
+  const days = [];
+  const startOfWeek = new Date(props.current);
+  startOfWeek.setDate(props.current.getDate() - props.current.getDay());
+
+  for (let i = 0; i < 7; i++) {
+    const day = new Date(startOfWeek);
+    day.setDate(startOfWeek.getDate() + i);
+    days.push({
+      date: day,
+      dayName: weekdays[i],
+      dayNumber: day.getDate(),
+      isToday: isSameDay(day, new Date()),
+    });
+  }
+
+  return days;
+});
+
+// Week view table-based functions
+const getWeekTimeSlots = () => {
+  const slots = [];
+  for (let hour = 6; hour < 18; hour++) {
+    // 6 AM to 6 PM = 12 hours
+    // Add boundary row for hour
+    slots.push({
+      hour,
+      minute: 0,
+      isBoundary: true,
+      display: formatHour(hour),
+    });
+
+    // Add 60 minute rows
+    for (let minute = 0; minute < 60; minute++) {
+      slots.push({
+        hour,
+        minute,
+        isBoundary: false,
+        display: `${hour}:${minute.toString().padStart(2, "0")}`,
+      });
+    }
+  }
+  return slots;
+};
+
+const shouldRenderEventCell = (date, hour, minute, rowIndex) => {
+  // Don't render cells for boundary rows (they're handled by hour column)
+  const timeSlot = getWeekTimeSlots()[rowIndex];
+  if (timeSlot.isBoundary) return false;
+
+  // Check if this cell is already covered by a previous event's rowspan
+  return !isRowCoveredByPreviousEvent(date, hour, minute);
+};
+
+const isRowCoveredByPreviousEvent = (date, hour, minute) => {
+  const eventsForDate = getEventsForDate(date);
+  const currentTimeInMinutes = hour * 60 + minute;
+
+  // Check if any event that started before this time is still spanning this row
+  return eventsForDate.some((event) => {
+    const eventStartMinutes = parseTimeToMinutesEnhanced(event.startTime);
+    const eventEndMinutes = parseTimeToMinutesEnhanced(event.endTime);
+
+    return (
+      eventStartMinutes < currentTimeInMinutes &&
+      currentTimeInMinutes < eventEndMinutes
+    );
+  });
+};
+
+const getEventForTimeSlot = (date, hour, minute) => {
+  const eventsForDate = getEventsForDate(date);
+  const currentTimeInMinutes = hour * 60 + minute;
+
+  // Find event that starts exactly at this time
+  return eventsForDate.find((event) => {
+    const eventStartMinutes = parseTimeToMinutesEnhanced(event.startTime);
+    return eventStartMinutes === currentTimeInMinutes;
+  });
+};
+
+const getEventRowspan = (date, hour, minute) => {
+  const event = getEventForTimeSlot(date, hour, minute);
+
+  if (event) {
+    // Calculate duration in minutes for the event
+    const startMinutes = parseTimeToMinutesEnhanced(event.startTime);
+    const endMinutes = parseTimeToMinutesEnhanced(event.endTime);
+    return endMinutes - startMinutes; // Each minute = 1 row
+  }
+
+  // Check if we need to fill empty space until next event or end of hour
+  const currentTimeInMinutes = hour * 60 + minute;
+  const nextHourStart = (hour + 1) * 60;
+
+  // Find next event in this hour
+  const eventsForDate = getEventsForDate(date);
+  const nextEvent = eventsForDate.find((event) => {
+    const eventStartMinutes = parseTimeToMinutesEnhanced(event.startTime);
+    return (
+      eventStartMinutes > currentTimeInMinutes &&
+      eventStartMinutes < nextHourStart
+    );
+  });
+
+  if (nextEvent) {
+    const nextEventStart = parseTimeToMinutesEnhanced(nextEvent.startTime);
+    return nextEventStart - currentTimeInMinutes;
+  }
+
+  // Fill until end of hour
+  return nextHourStart - currentTimeInMinutes;
+};
+
+// Enhanced parseTimeToMinutes to handle next-day events better
+const parseTimeToMinutesEnhanced = (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;
+};
+
+// 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 hour number to display string (e.g., 9 -> "9:00 AM", 13 -> "1:00 PM")
+const formatHour = (hour) => {
+  if (hour === 0) return "12:00 AM";
+  if (hour === 12) return "12:00 PM";
+  if (hour < 12) return `${hour}:00 AM`;
+  return `${hour - 12}:00 PM`;
+};
+
+// Handle minute click for week 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>
+/* Week View Styles */
+.week-view {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.week-header {
+  display: grid;
+  grid-template-columns: 60px repeat(7, 1fr);
+  border-bottom: 1px solid #e0e0e0;
+  background-color: #f5f5f5;
+  overflow-x: auto;
+}
+
+.time-column {
+  display: flex;
+  flex-direction: column;
+  border-right: 1px solid #e0e0e0;
+  position: sticky;
+  left: 0;
+  z-index: 10;
+  background-color: #f9f9f9;
+}
+
+.header-time-column {
+  background-color: #f5f5f5;
+}
+
+.week-day-header {
+  text-align: center;
+  padding: 8px 4px;
+  border-right: 1px solid #e0e0e0;
+}
+
+.day-name {
+  font-size: 0.8em;
+  color: #666;
+  margin-bottom: 2px;
+}
+
+.day-date {
+  font-size: 1.2em;
+  font-weight: 500;
+}
+
+.day-date.today {
+  color: #1976d2;
+  font-weight: 700;
+}
+
+.week-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.week-table-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: auto;
+}
+
+.week-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+.week-time-row.hour-boundary {
+  height: 3px;
+  border-bottom: 2px solid #e0e0e0;
+}
+
+.week-time-row.minute-row {
+  height: 2px;
+  border-bottom: 1px solid transparent;
+}
+
+.hour-cell {
+  background-color: #f9f9f9;
+  border-right: 1px solid #e0e0e0;
+  vertical-align: top;
+  padding: 4px;
+  text-align: center;
+}
+
+.hour-label {
+  font-size: 0.8em;
+  color: #666;
+  font-weight: 500;
+  writing-mode: horizontal-tb;
+}
+
+.event-cell {
+  border-right: 1px solid #e0e0e0;
+  border-bottom: 1px solid transparent;
+  padding: 0;
+  margin: 0;
+  vertical-align: top;
+  position: relative;
+  cursor: pointer;
+}
+
+.event-cell:hover {
+  background-color: rgba(25, 118, 210, 0.05);
+}
+
+.week-event-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 2px 4px;
+  color: white;
+  font-size: 0.7em;
+  border-radius: 3px;
+  margin: 1px;
+  cursor: pointer;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.week-event-content .event-title {
+  font-weight: 600;
+  line-height: 1.1;
+  margin-bottom: 1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.week-event-content .event-time {
+  font-size: 0.8em;
+  opacity: 0.9;
+  line-height: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.empty-cell {
+  height: 100%;
+  width: 100%;
+}
+</style>