Implement row spanning

src/hooks/useScheduleTable.js

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { sorter, toMidnight } from '../utils.js';
+import { sorter } from '../utils.js';
 import { langs } from '../Schedule/constants.js';
 import { compareAsc, getTime, isSameDay, toDate } from 'date-fns';
 
@@ -13,20 +13,13 @@ export default function useScheduleTable({
         const filteredEvents = events.filter(event => eventTypeId > 0 ? event.event_type_id === eventTypeId : true);
         const filteredEventIds = filteredEvents.map(event => event.id);
         const filteredSlots = slots.sort(sorter('starts_at')).filter(slot => filteredEventIds.includes(slot.event_id));
-        const days = Array.from(new Set(filteredSlots.map(slot => getTime(toMidnight(slot))))).map(ts => toDate(ts));
         const microslots = Array.from(new Set(filteredSlots.flatMap(slot => [
             getTime(slot.starts_at),
             getTime(slot.ends_at),
         ]))).sort().map(ts => toDate(ts));
         const filteredHallIds = new Set(filteredSlots.map(slot => slot.hall_id));
         const filteredHalls = halls.filter(hall => filteredHallIds.has(hall.id));
-        const hallSlots = Object.fromEntries(filteredHalls.map(hall => [
-            hall.id,
-            filteredSlots.filter(slot => slot.hall_id === hall.id),
-        ]));
-
-        void(days);
-        void(hallSlots);
+        const skipHallSlots = new Map();
 
         const header = [{
                 id: 0,
@@ -41,9 +34,22 @@ export default function useScheduleTable({
             const nextDate = !isLast ? slotsArray[slotsIndex + 1] : null;
             const isFirstForTheDay = slotsIndex > 0 && !isSameDay(date, slotsArray[slotsIndex - 1]);
             const isLastForTheDay = slotsArray?.[slotsIndex + 1] && !isSameDay(date, slotsArray[slotsIndex + 1]);
-            const processedEvents = new Set();
+            const rowEvents = new Set();
 
             const eventCells = filteredHalls.flatMap((hall, hallIndex, hallsArray) => {
+                if (skipHallSlots.has(hall.id)) {
+                    const leftToSkip = skipHallSlots.get(hall.id);
+
+                    if (leftToSkip <= 1) {
+                        skipHallSlots.delete(hall.id);
+                    }
+                    else {
+                        skipHallSlots.set(hall.id, leftToSkip - 1);
+                    }
+
+                    return [];
+                }
+
                 const currentTimeSlots = filteredSlots.filter(slot => compareAsc(slot.starts_at, date) === 0);
                 const currentHallSlot = currentTimeSlots.find(slot => slot.hall_id === hall.id);
 
@@ -53,10 +59,25 @@ export default function useScheduleTable({
                     }];
                 }
 
-                if (processedEvents.has(currentHallSlot.event_id)) {
+                if (rowEvents.has(currentHallSlot.event_id)) {
                     return [];
                 }
 
+                let rowSpan = 1;
+
+                const spanningMicroslots = microslots.filter(slotDate =>
+                    currentHallSlot.starts_at <= slotDate &&
+                    currentHallSlot.ends_at >= slotDate
+                );
+
+                if (spanningMicroslots.length > 1) {
+                    rowSpan = spanningMicroslots.length - 1;
+
+                    if (rowSpan > 1) {
+                        skipHallSlots.set(hall.id, rowSpan - 1);
+                    }
+                }
+
                 let colSpan = 1;
 
                 for (const index of hallsArray.keys()) {
@@ -74,7 +95,7 @@ export default function useScheduleTable({
                         break;
                     }
 
-                    processedEvents.add(currentHallSlot.event_id);
+                    rowEvents.add(currentHallSlot.event_id);
                     colSpan++;
                 }
 
@@ -83,12 +104,13 @@ export default function useScheduleTable({
                     attributes: {
                         className: 'schedule-'.concat(currentHallSlot.event.language).concat(' ').concat(currentHallSlot.event.track?.css_class),
                         colSpan,
+                        rowSpan,
                     },
                     event: currentHallSlot.event,
                 }];
             });
 
-            const isEmptyRow = !eventCells.find(slot => !!slot?.event);
+            const isEmptyRow = false; // TODO !eventCells.find(slot => !!slot?.event);
             const showHeader = isFirst || isFirstForTheDay;
             const showSlot = !isLast && !isLastForTheDay && !isEmptyRow;