@hellobetterdigitalnz/betterui 0.0.3-33 → 0.0.3-331

package/src/Components/DataDisplay/Calendar/Views/WeekView/WeekView.tsx

@@ -0,0 +1,356 @@
+import { useContext, useEffect, useMemo, useState } from "react";
+import {
+  addDays,
+  addMinutes,
+  differenceInMinutes,
+  endOfWeek,
+  format,
+  isBefore,
+  isEqual,
+  startOfDay,
+  startOfWeek
+} from "date-fns";
+import styles from "./weekView.module.scss";
+import WeekViewProps from "./WeekViewProps.tsx";
+import EventModal from "../../EventModal/EventModal.tsx";
+import CalendarEvent from "../../Events/CalendarEvent.tsx";
+import BetterUIContext from "../../../../BetterUIProvider/BetterUIContext.tsx";
+
+const calculateEndTime = (startTime: Date, durationInSeconds: number) => {
+  return addMinutes(startTime, durationInSeconds / 60);
+};
+
+const formatEventTime = (startTime: Date, durationInSeconds: number) => {
+  const eventEnd = calculateEndTime(startTime, durationInSeconds);
+  return `${format(startTime, "hh:mm a")} - ${format(eventEnd, "hh:mm a")}`;
+};
+
+const isOverlap = (event1: any, event2: any) => {
+  const start1 = new Date(event1?.startTime);
+  const end1 = calculateEndTime(start1, event1.timeDuration);
+  const start2 = new Date(event2?.startTime);
+  const end2 = calculateEndTime(start2, event2.timeDuration);
+  return start1 < end2 && start2 < end1;
+};
+
+const groupEvents = (events: any[]) => {
+  const groups: any[] = [];
+  events.forEach((event) => {
+    let placed = false;
+    for (const group of groups) {
+      if (group.some((e: any) => isOverlap(e, event))) {
+        group.push(event);
+        placed = true;
+        break;
+      }
+    }
+    if (!placed) {
+      groups.push([event]);
+    }
+  });
+  return groups;
+};
+
+const splitEventIfNeeded = (event: any) => {
+  const eventStart = new Date(event?.startTime);
+  const eventEnd = calculateEndTime(eventStart, event.timeDuration);
+
+  const splitEvents = [];
+  let currentStart = eventStart;
+
+  while (isBefore(currentStart, eventEnd)) {
+    const nextDayStart = startOfDay(addDays(currentStart, 1));
+    const segmentEnd = isBefore(eventEnd, nextDayStart) ? eventEnd : nextDayStart;
+
+    const segmentDuration = differenceInMinutes(segmentEnd, currentStart) * 60;
+
+    splitEvents.push({
+      ...event,
+      startTime: currentStart.toISOString(),
+      timeDuration: segmentDuration,
+      showPreBuffer: currentStart.getTime() === eventStart.getTime(),
+      showPostBuffer: isEqual(segmentEnd, eventEnd),
+    });
+
+    currentStart = nextDayStart;
+  }
+
+  return splitEvents;
+};
+
+const filterEventsByDay = (events: any[], day: Date) => {
+  const dayStart = startOfDay(day);
+  const nextDayStart = addDays(dayStart, 1);
+
+  const filteredEvents: any[] = [];
+
+  events.forEach((event) => {
+    const splitEvents = splitEventIfNeeded(event);
+    splitEvents.forEach((splitEvent) => {
+      const eventStart = new Date(splitEvent?.startTime);
+      if (eventStart >= dayStart && eventStart < nextDayStart) {
+        filteredEvents.push(splitEvent);
+      }
+    });
+  });
+
+  return filteredEvents;
+};
+
+const generateIntervals = (day: Date) => {
+  const startOfDayDate = startOfDay(day);
+  return Array.from({ length: 48 }, (_, i) => {
+    const start = addMinutes(startOfDayDate, i * 30);
+    const end = addMinutes(start, 30);
+    return { start, end, key: i };
+  });
+};
+
+// @ts-ignore
+const WeekView = ({ events, date, startOfWeekOn,holidays, showPrepTime }: WeekViewProps) => {
+
+  const [dayFormat, setDayFormat] = useState("eee");
+  const context = useContext(BetterUIContext);
+
+  const startOfWeekDate = startOfWeek(date, {
+    weekStartsOn: startOfWeekOn === "Monday" ? 1 : 0
+  });
+  const endOfWeekDate = endOfWeek(date, {
+    weekStartsOn: startOfWeekOn === "Monday" ? 1 : 0
+  });
+
+  const handleEventClick = (event: any) => {
+    const eventStart = new Date(event?.startTime);
+    const eventEnd = calculateEndTime(eventStart, event.timeDuration);
+    const eventTime = `${format(eventStart, "hh:mm a")} - ${format(eventEnd, "hh:mm a")}`;
+
+    context.openModal(
+      <EventModal title={event.startDay}>
+        <CalendarEvent
+          type={event.type}
+          label={event.label}
+          weekContent={event.weekContent}
+          color={event.color}
+          timeDuration={eventTime}
+          onClick={event?.onClick}
+        />
+      </EventModal>
+    );
+  };
+
+  useEffect(() => {
+    const updateDayFormat = () => {
+      if (window.innerWidth <= 990) {
+        setDayFormat("EEEEE");
+      } else {
+        setDayFormat("eee");
+      }
+    };
+
+    updateDayFormat();
+
+    window.addEventListener("resize", updateDayFormat);
+
+    return () => window.removeEventListener("resize", updateDayFormat);
+  }, []);
+
+  const dayNames = useMemo(() => {
+    return Array.from({ length: 7 }, (_, i) => {
+      const dayName = format(addDays(startOfWeekDate, i), dayFormat);
+      const date = format(addDays(startOfWeekDate, i), "dd");
+      return (
+        <div className={styles.dayName} key={i}>
+          <h6>{dayName}</h6>
+          <h5>{date}</h5>
+        </div>
+      );
+    });
+  }, [startOfWeekDate]);
+
+  const holidaysData = useMemo(() => {
+    return Array.from({ length: 7 }, (_, i) => {
+      const currentDay = addDays(startOfWeekDate, i); // Get the current day
+
+      const matchingHolidays = holidays?.filter((holiday:any) => {
+        const holidayStart = new Date(holiday.startDay);
+        const holidayEnd = holiday.endDay ? new Date(holiday.endDay) : holidayStart;
+
+
+        return (
+          (isEqual(currentDay, holidayStart) ||
+            (isBefore(holidayStart, currentDay) && isBefore(currentDay, holidayEnd)))
+        );
+      });
+
+
+      return (
+        <div key={i} className={styles.holidayHolder}>
+          {matchingHolidays?.map((holiday:any) => (
+            <div key={holiday.startDay} className={styles.holiday}>
+              <h5>{holiday.label}</h5>
+            </div>
+          ))}
+        </div>
+      );
+    });
+  }, [startOfWeekDate, holidays]);
+
+
+
+  const dayColumns = useMemo(() => {
+    const columns: JSX.Element[] = [];
+    let day = startOfWeekDate;
+
+    while (isBefore(day, endOfWeekDate) || isEqual(day, endOfWeekDate)) {
+      const dayEvents = filterEventsByDay(events, day);
+      const eventGroups = groupEvents(dayEvents);
+      const intervals = generateIntervals(day);
+
+      const intervalRows = intervals.map((interval) => (
+        <div
+          key={interval.key}
+          className={styles.intervalRow}
+          data-time={`${format(interval.start, "hh:mm a")}`}
+        />
+      ));
+
+      const eventElements = eventGroups.flatMap((group) => {
+        const eventWidth = 100 / group.length;
+
+        return group.map((event: any, index: number) => {
+          const eventStart = new Date(event.startTime);
+          const eventEnd = calculateEndTime(eventStart, event.timeDuration);
+
+          const topOffset = differenceInMinutes(eventStart, startOfDay(day));
+          const eventHeight = differenceInMinutes(eventEnd, eventStart);
+          const topPercent = (topOffset / (24 * 60)) * 100;
+          const heightPercent = (eventHeight / (24 * 60)) * 100;
+
+          const preBufferHeight = (event.bufferTime?.preBuffer / (24 * 60 * 60)) * 100;
+          const postBufferHeight = (event.bufferTime?.postBuffer / (24 * 60 * 60)) * 100;
+
+          return (
+            <div
+              onClick={() => handleEventClick(event)}
+              key={index}
+            >
+              {preBufferHeight > 0 && showPrepTime && event.showPreBuffer && (
+                <div
+                  className={styles.bufferTime}
+                  style={{
+                    position: "absolute",
+                    top: `${topPercent - preBufferHeight}%`,
+                    height: `${preBufferHeight}%`,
+                    backgroundColor: event.color,
+                    left: `${eventWidth * index}%`,
+                    width: `${eventWidth}%`,
+                  }}
+                ></div>
+              )}
+
+              {/* Main Event */}
+              <div
+                key={index}
+                className={styles.weekEvent}
+                style={{
+                  position: "absolute",
+                  top: `${topPercent}%`,
+                  height: `${heightPercent}%`,
+                  backgroundColor: event.color,
+                  left: `${eventWidth * index}%`,
+                  width: `${eventWidth}%`,
+                }}
+                data-event={`${formatEventTime(eventStart, event.timeDuration)}`}
+                onClick={(e: any) => {
+                  if (event?.onClick) {
+                    event.onClick(e);
+                  }
+                }}
+              >
+                <div className={styles.eventDetails}>
+                  <div className={styles.eventTitle}>{event.label}</div>
+                  {event.weekContent && (
+                    <>
+                      {event.weekContent?.__html ? (
+                        <div dangerouslySetInnerHTML={{ __html: event.weekContent.__html }} />
+                      ) : event.weekContent?.__jsx || event.weekContent?.__tsx ? (
+                        <div>{event.weekContent.__jsx || event.weekContent.__tsx}</div>
+                      ) : null}
+                    </>
+                  )}
+                  <div className={styles.eventTime}>
+                    {formatEventTime(eventStart, event.timeDuration)}
+                  </div>
+                </div>
+              </div>
+
+              {postBufferHeight > 0 && showPrepTime && event.showPostBuffer && (
+                <div
+                  className={styles.bufferTime}
+                  style={{
+                    position: "absolute",
+                    top: `${topPercent + heightPercent}%`,
+                    height: `${postBufferHeight}%`,
+                    backgroundColor: event.color,
+                    left: `${eventWidth * index}%`,
+                    width: `${eventWidth}%`,
+                  }}
+                ></div>
+              )}
+            </div>
+          );
+        });
+      });
+
+
+      columns.push(
+        <div key={day.toString()} className={styles.dayColumn}>
+          {intervalRows}
+          {eventElements}
+        </div>
+      );
+
+      day = addDays(day, 1);
+    }
+
+    return columns;
+  }, [events, startOfWeekDate, endOfWeekDate]);
+
+  const hourColumn = useMemo(
+    () => (
+      <div className={styles.hourColumn}>
+        {generateIntervals(startOfWeekDate).map((interval) => (
+          <div key={interval.key} className={styles.hour}>
+            <h6>{format(interval.start, "hh:mm a")}</h6>
+          </div>
+        ))}
+      </div>
+    ),
+    [startOfWeekDate]
+  );
+
+  return (
+    <div className={`${styles.body} weekCalendarView`}>
+      <div className={`${styles.header} weekCalendarViewHeader`}>
+        <div className={`${styles.daysRow} weekCalendarViewDaysRow`}>
+          <div className={`${styles.hourColumnHeader} weekCalendarViewHourColumnHeader`}></div>
+          {dayNames}
+        </div>
+      </div>
+      <div className={`${styles.wrapper} weekCalendarViewWrapper`}>
+        <div className={styles.holidayRow}>
+          <div className={`${styles.hourColumnHeader} weekCalendarViewHourColumnHeader`}></div>
+          <div className={styles.holidayWrapper}>
+            {holidaysData}
+          </div>
+        </div>
+        <div className={`${styles.eventsRow} weekCalendarViewEventsRow`}>
+          {hourColumn}
+          <div className={`${styles.dayColumns} weekCalendarViewDayColumns`}>{dayColumns}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WeekView;

package/src/Components/DataDisplay/Calendar/Views/WeekView/WeekViewProps.tsx

@@ -0,0 +1,7 @@
+import CalendarProps from "../../CalendarProps.tsx";
+
+interface WeekViewProps extends Omit<CalendarProps, 'calendarActionOnclick' | 'listActionOnclick' | 'showPublicHolidayDayToggle' | 'showPrepTimeToggle'> {
+  date: Date;
+}
+
+export default WeekViewProps;

package/src/Components/DataDisplay/Calendar/Views/WeekView/weekView.module.scss

@@ -0,0 +1,206 @@
+.body {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.header {
+  display: flex;
+  position: sticky;
+  top: 85px;
+  background: #FFFFFF;
+  z-index: 100;
+}
+
+.hourColumnHeader {
+  width: 73px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.hourColumn {
+  width: 73px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-right: 1px solid #ccc;
+}
+
+.daysRow {
+  display: flex;
+  width: 100%;
+}
+
+.dayName {
+  flex: 1;
+  text-align: center;
+  padding: 10px;
+
+  h6 {
+    color: var(--color-secondary-400);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.57;
+  }
+
+  h5 {
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+  }
+
+}
+
+.eventsRow {
+  display: flex;
+  padding-top: 12px;
+}
+
+.wrapper {
+  overflow-x: hidden;
+}
+
+.dayColumns {
+  display: flex;
+  flex: 1;
+  position: relative;
+}
+
+.dayColumn {
+  flex: 1;
+  position: relative;
+  border-top: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+}
+
+.intervalRow {
+  position: relative;
+  height: 40px;
+
+
+  &:nth-child(even) {
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+}
+
+.weekEvent {
+  left: 0;
+  right: 0;
+  overflow: hidden;
+  color: white;
+  cursor: pointer;
+
+  .eventDetails{
+    padding: calc(var(--space-unit) * 0.5) calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 2);
+    text-wrap: nowrap;
+
+    .eventTitle,.eventTime{
+      font-size: 10px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 1.33;
+    }
+
+  }
+
+}
+
+
+.hour {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 40px;
+  padding: 5px;
+  width: 100%;
+
+  h6 {
+    position: absolute;
+    top: -8px;
+    color: var(--color-gray-900);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.33;
+  }
+
+  &:nth-child(even) {
+    h6 {
+      opacity: 0;
+    }
+  }
+}
+
+.bufferTime{
+  opacity: 0.5;
+}
+
+.holidayRow {
+ display: flex;
+  align-items: center;
+}
+
+.holidayWrapper{
+  width: 100%;
+  display: flex;
+  align-items: center;
+
+  .holiday{
+    flex: 1;
+  }
+
+}
+
+.holidayHolder{
+  width: 100%;
+  flex: 1;
+  margin: 0 var(--space-unit);
+}
+
+.holiday{
+  flex: 1;
+  margin: var(--space-unit);
+  width: 100%;
+  background-color: var(--color-secondary-50);
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  padding: 0 var(--space-unit);
+  height: 24px;
+  overflow: hidden;
+
+  h5 {
+    color: var(--color-secondary-800);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.33;
+  }
+}
+
+@media screen and (max-width: 992px){
+
+  .hourColumnHeader {
+    width: 41px;
+  }
+
+  .hourColumn {
+    width: 41px;
+  }
+  .hour {
+    padding: 0px 3px 0px 0px;
+
+    h6 {
+      font-size: 9px;
+      top: -5px;
+    }
+  }
+
+  .dayName {
+    h5{
+      font-size: 14px;
+    }
+  }
+}