Skip to content

Commit 3363147

Browse files
marcus-wishesmarcus-wishes
authored
Merge pull request #98 from linked-planet/dev
Dev
2 parents c078ffe + b0f29d6 commit 3363147

File tree

8 files changed

+350
-345
lines changed

8 files changed

+350
-345
lines changed

‎library/src/components/inputs/datetimepicker/DatePicker.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -317,8 +317,6 @@ const DatePickerBase = forwardRef(
317317
</div>
318318
)
319319

320-
console.log("DISABLED", disabled)
321-
322320
return (
323321
<Popover.Root
324322
triggerComponent={trigger}

‎library/src/components/timetable/TimeTable.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ import { useRateLimitHelper } from "../../utils/rateLimit"
3939
import useResizeObserver from "use-resize-observer"
4040

4141
export interface TimeSlotBooking {
42+
key: React.Key
4243
title: string
4344
startDate: Dayjs
4445
endDate: Dayjs
@@ -614,6 +615,7 @@ function moveNowBar(
614615
}
615616

616617
const nowItem: TimeSlotBooking = {
618+
key: "nowbar",
617619
title: "nowBar",
618620
startDate: now,
619621
endDate: now,

‎library/src/components/timetable/TimeTableRows.tsx‎

Lines changed: 75 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -214,19 +214,6 @@ export default function TimeTableRows<
214214
// and it should be only set to 0 when the group rows change
215215
//const groupRowsRenderedIdxRef = useRef(groupRowsRenderedIdx)
216216

217-
if (
218-
slotsArrayCurrent.current !== slotsArray ||
219-
viewTypeCurrent.current !== viewType ||
220-
timeFrameDayCurrent.current !== timeFrameDay
221-
) {
222-
// reset the rendered cells
223-
renderedGroups.current.clear()
224-
slotsArrayCurrent.current = slotsArray
225-
viewTypeCurrent.current = viewType
226-
timeFrameDayCurrent.current = timeFrameDay
227-
setGroupRowsRendered([])
228-
}
229-
230217
const rateLimiterIntersection = useIdleRateLimitHelper(renderIdleTimeout)
231218
const rateLimiterRendering = useIdleRateLimitHelper(renderIdleTimeout)
232219
const debounceIntersection = useDebounceHelper(intersectionStackDelay)
@@ -347,76 +334,90 @@ export default function TimeTableRows<
347334
}, [intersectionContainerRef.current, headerRef.current, rowHeight])
348335

349336
const currentGroupRowsRef = useRef(groupRows)
350-
const [currentGroupRows, setCurrentGroupRows] = useState(groupRows)
337+
338+
if (
339+
slotsArrayCurrent.current !== slotsArray ||
340+
viewTypeCurrent.current !== viewType ||
341+
timeFrameDayCurrent.current !== timeFrameDay
342+
) {
343+
// reset the rendered cells
344+
renderedGroups.current.clear()
345+
slotsArrayCurrent.current = slotsArray
346+
viewTypeCurrent.current = viewType
347+
timeFrameDayCurrent.current = timeFrameDay
348+
currentGroupRowsRef.current.clear()
349+
//setCurrentGroupRows(groupRows)
350+
}
351351

352352
//** ------- CHANGE DETECTION ------ */
353353
// handle changes in the group rows
354-
if (groupRows !== currentGroupRows) {
355-
setCurrentGroupRows((currentGroupRows) => {
356-
changedGroupRows.current.clear()
357-
if (!groupRows) {
358-
renderedGroups.current.clear()
359-
refCollection.current = []
360-
setGroupRowsRendered([])
361-
console.log("TimeTable - group rows are null")
362-
return groupRows
363-
}
354+
if (groupRows !== currentGroupRowsRef.current) {
355+
//changedGroupRows.current.clear() -> this misses changes on fast updates where the currentGroupRowsRef is not yet updated
356+
if (!groupRows) {
357+
renderedGroups.current.clear()
358+
refCollection.current = []
359+
setGroupRowsRendered([])
360+
console.log("TimeTable - group rows are null")
361+
return groupRows
362+
}
364363

365-
if (groupRowsRendered.length > groupRows.size) {
366-
// shorten and remove rendered elements array, if too long
367-
console.info(
368-
`Timetable - shorten rendered elements array from ${groupRowsRendered.length} to ${groupRows.size}`,
369-
)
370-
setGroupRowsRendered(groupRowsRendered.slice(0, groupRows.size))
371-
refCollection.current.length = groupRows.size
372-
}
364+
if (groupRowsRendered.length > groupRows.size) {
365+
// shorten and remove rendered elements array, if too long
366+
console.info(
367+
`Timetable - shorten rendered elements array from ${groupRowsRendered.length} to ${groupRows.size}`,
368+
)
369+
setGroupRowsRendered(groupRowsRendered.slice(0, groupRows.size))
370+
refCollection.current.length = groupRows.size
371+
}
373372

374-
// determine when new ones start
375-
let changedFound = -1
376-
const keys = groupRows.keys().toArray()
377-
let updateCounter = 0
378-
for (let i = 0; i < keys.length; i++) {
379-
const group = keys[i]
380-
const rows = groupRows.get(group)
381-
const currentRows = currentGroupRows.get(group)
382-
if (
383-
(rows !== currentRows &&
384-
renderGroupRangeRef.current[0] > -1 &&
385-
i >= renderGroupRangeRef.current[0] &&
386-
i <= renderGroupRangeRef.current[1]) ||
387-
rows?.length !== currentRows?.length
388-
) {
389-
if (changedFound === -1) {
390-
changedFound = i
391-
}
392-
updateCounter++
393-
changedGroupRows.current.add(i)
373+
// determine when new ones start
374+
let changedFound = -1
375+
const keys = groupRows.keys().toArray()
376+
let updateCounter = 0
377+
for (let i = 0; i < keys.length; i++) {
378+
const group = keys[i]
379+
const rows = groupRows.get(group)
380+
const currentRows = currentGroupRowsRef.current.get(group)
381+
if (
382+
(rows !== currentRows &&
383+
renderGroupRangeRef.current[0] > -1 &&
384+
i >= renderGroupRangeRef.current[0] &&
385+
i <= renderGroupRangeRef.current[1]) ||
386+
rows?.length !== currentRows?.length
387+
) {
388+
if (changedFound === -1) {
389+
changedFound = i
394390
}
391+
updateCounter++
392+
changedGroupRows.current.add(i)
395393
}
396-
for (const changedG of changedGroupRows.current) {
397-
if (changedG > keys.length - 1) {
398-
// delete obsolete change
399-
changedGroupRows.current.delete(changedG)
400-
}
394+
}
395+
for (const changedG of changedGroupRows.current) {
396+
if (changedG > keys.length - 1) {
397+
// delete obsolete change
398+
changedGroupRows.current.delete(changedG)
401399
}
402-
for (const renderedG of renderedGroups.current) {
403-
if (renderedG > keys.length - 1) {
404-
// delete obsolete change
405-
renderedGroups.current.delete(renderedG)
406-
}
400+
}
401+
for (const renderedG of renderedGroups.current) {
402+
if (renderedG > keys.length - 1) {
403+
// delete obsolete change
404+
renderedGroups.current.delete(renderedG)
407405
}
406+
}
408407

409-
if (updateCounter) {
410-
console.log(
411-
`TimeTable - group rows require updated rendering ${updateCounter}, with first ${changedFound}`,
412-
renderGroupRangeRef.current,
413-
currentGroupRowsRef.current.size,
414-
groupRows.size,
415-
)
416-
}
417-
currentGroupRowsRef.current = groupRows
418-
return groupRows
419-
})
408+
if (updateCounter) {
409+
console.log(
410+
`TimeTable - group rows require updated rendering ${updateCounter}, with first ${changedFound}`,
411+
renderGroupRangeRef.current,
412+
currentGroupRowsRef.current.size,
413+
groupRows.size,
414+
)
415+
} else {
416+
console.log(
417+
"TimeTable - group rows do not require updated rendering",
418+
)
419+
}
420+
currentGroupRowsRef.current = groupRows
420421
}
421422

422423
//** ------- SCROLL HANDLING ------ */
@@ -762,7 +763,7 @@ function TableCell<G extends TimeTableGroup, I extends TimeSlotBooking>({
762763

763764
return (
764765
<ItemWrapper
765-
key={it.item.title}
766+
key={it.item.key}
766767
group={group}
767768
item={it.item}
768769
width={itemWidthInColumn}

‎library/src/components/timetable/timeTableUtils.ts‎

Lines changed: 60 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@ function calculateTimeSlotsHoursView(
6565
slotsArray[i * timeSlotsPerDay + ts] = timeSlot
6666
}
6767
}
68-
6968
return slotsArray
7069
}
7170

@@ -145,17 +144,22 @@ function calculateTimeSlotPropertiesForHoursView(
145144
return { timeFrameDay, slotsArray: [], timeSlotMinutes: 0 }
146145
}
147146

148-
let timeDiff = dayjs()
147+
let endOfDay = dayjs()
149148
.startOf("day")
150149
.add(endDate.hour(), "hours")
151150
.add(endDate.minute(), "minutes")
152-
.diff(
153-
dayjs()
154-
.startOf("day")
155-
.add(startDate.hour(), "hours")
156-
.add(startDate.minute(), "minutes"),
157-
"minutes",
158-
)
151+
152+
const startOfDay = endOfDay
153+
.startOf("day")
154+
.add(startDate.hour(), "hours")
155+
.add(startDate.minute(), "minutes")
156+
157+
if (endOfDay.isBefore(startOfDay)) {
158+
endOfDay = endOfDay.add(1, "day")
159+
}
160+
161+
let timeDiff = endOfDay.diff(startOfDay, "minutes")
162+
159163
if (timeDiff === 0) {
160164
timeDiff = 24 * 60
161165
}
@@ -293,28 +297,23 @@ export function calculateTimeSlotPropertiesForView(
293297
slotsArray.push(ret)
294298
}
295299

296-
let oneDayMinutes = dayjs()
300+
let endOfDay = dayjs()
297301
.startOf("day")
298302
.add(endHour, "hours")
299303
.add(endMinute, "minutes")
300-
.diff(
301-
dayjs()
302-
.startOf("day")
303-
.add(startHour, "hours")
304-
.add(startMinute, "minutes"),
305-
"minutes",
306-
)
304+
305+
const startOfDay = endOfDay
306+
.startOf("day")
307+
.add(startHour, "hours")
308+
.add(startMinute, "minutes")
309+
310+
if (endOfDay.isBefore(startOfDay)) {
311+
endOfDay = endOfDay.add(1, "day")
312+
}
313+
314+
let oneDayMinutes = endOfDay.diff(startOfDay, "minutes")
307315
if (oneDayMinutes === 0) {
308-
const endOfDay = dayjs().endOf("day")
309-
endHour = endOfDay.hour()
310-
endMinute = endOfDay.minute()
311-
oneDayMinutes = endOfDay.diff(
312-
dayjs()
313-
.startOf("day")
314-
.add(startHour, "hours")
315-
.add(endHour, "minutes"),
316-
"minutes",
317-
)
316+
oneDayMinutes = 24 * 60
318317
}
319318

320319
const timeFrameDay: TimeFrameDay = Object.freeze({
@@ -325,28 +324,6 @@ export function calculateTimeSlotPropertiesForView(
325324
oneDayMinutes,
326325
})
327326

328-
// how many minutes has 1 time slot
329-
const unitDays = dayjs()
330-
.startOf("day")
331-
.add(1, unit)
332-
.diff(dayjs().startOf("day"), "days")
333-
//const timeSlotMinutes = unitDays * oneDayMinutes
334-
let timeSlotMinutes = timeStepsMinute
335-
switch (viewType) {
336-
case "days": {
337-
timeSlotMinutes = oneDayMinutes
338-
break
339-
}
340-
case "weeks": {
341-
timeSlotMinutes = 6 * 24 * 60 + oneDayMinutes
342-
break
343-
}
344-
case "months": {
345-
timeSlotMinutes = 29 * 24 * 60 + oneDayMinutes
346-
break
347-
}
348-
}
349-
350327
return Object.freeze({
351328
timeFrameDay,
352329
slotsArray,
@@ -422,24 +399,34 @@ export function getLeftAndWidth(
422399

423400
if (itemModEnd.isAfter(timeFrameEndEnd)) {
424401
itemModEnd = timeFrameEndEnd
425-
} else if (item.endDate.hour() === 0 && item.endDate.minute() === 0) {
402+
//} else if (item.endDate.hour() === 0 && item.endDate.minute() === 0) {
426403
//itemModEnd = itemModEnd.subtract(1, "second") // this is a hack to make the end time of the day inclusive
427404
//console.log("HACK APPLIED", itemModEnd)
428-
//itemModEnd = timeFrameEndEnd
429-
//.startOf("day")
430-
//.add(timeFrameDay.endHour, "hour")
431-
//.add(timeFrameDay.endMinute, "minutes")
405+
itemModEnd = timeFrameEndEnd
406+
.startOf("day")
407+
.add(timeFrameDay.endHour, "hour")
408+
.add(timeFrameDay.endMinute, "minutes")
432409
} else if (
433-
item.endDate.hour() > timeFrameDay.endHour ||
410+
((timeFrameDay.endHour > timeFrameDay.startHour ||
411+
(timeFrameDay.endHour === timeFrameDay.startHour &&
412+
timeFrameDay.endMinute > timeFrameDay.startMinute)) &&
413+
item.endDate.hour() > timeFrameDay.endHour) ||
434414
(item.endDate.hour() === timeFrameDay.endHour &&
435415
item.endDate.minute() > timeFrameDay.endMinute)
436416
) {
437-
if (timeFrameDay.endHour !== 0 && timeFrameDay.endMinute !== 0) {
438-
console.log("WARG", item, itemModEnd, timeFrameDay)
439-
itemModEnd = itemModEnd
440-
.startOf("day")
441-
.add(timeFrameDay.endHour, "hour")
442-
.add(timeFrameDay.endMinute, "minutes")
417+
console.log("WARG", item, itemModEnd, timeFrameDay)
418+
itemModEnd = itemModEnd
419+
.startOf("day")
420+
.add(timeFrameDay.endHour, "hour")
421+
.add(timeFrameDay.endMinute, "minutes")
422+
if (
423+
timeFrameDay.endHour < timeFrameDay.startHour ||
424+
(timeFrameDay.endHour === timeFrameDay.startHour &&
425+
timeFrameDay.endMinute <= timeFrameDay.startMinute)
426+
) {
427+
if (viewType !== "hours") {
428+
itemModEnd = itemModEnd.add(1, "day")
429+
}
443430
}
444431
}
445432
}
@@ -483,7 +470,7 @@ export function getLeftAndWidth(
483470
//width = endSlot + 1 - startSlot - (left + width)
484471
//width = endSlot - startSlot + width - left
485472

486-
if (width < 0) {
473+
if (width <= 0) {
487474
// this should not happen, but if it does, we need to log it to find the error
488475
console.error(
489476
"LPTimeTable - item with negative width found:",
@@ -624,7 +611,10 @@ export function getStartAndEndSlot(
624611
.add(timeFrameDay.startMinute, "minutes")
625612
}
626613

627-
if (item.endDate.isBefore(startSlotStart)) {
614+
if (
615+
item.endDate.isBefore(startSlotStart) ||
616+
item.endDate.isSame(startSlotStart)
617+
) {
628618
return { startSlot: startSlot, endSlot: startSlot, status: "before" }
629619
}
630620

@@ -636,7 +626,13 @@ export function getStartAndEndSlot(
636626
.add(timeFrameDay.endHour, "hours")
637627
.add(timeFrameDay.endMinute, "minutes")
638628
.add(1, viewType)
639-
.subtract(1, "day")
629+
if (
630+
timeFrameDay.endHour > timeFrameDay.startHour ||
631+
(timeFrameDay.endHour === timeFrameDay.startHour &&
632+
timeFrameDay.endMinute > timeFrameDay.startMinute)
633+
) {
634+
endSlotEnd = endSlotEnd.subtract(1, "day")
635+
}
640636
}
641637
if (item.startDate.isAfter(endSlotEnd)) {
642638
return { startSlot: endSlot, endSlot: endSlot, status: "after" }

0 commit comments

Comments
 (0)