LouisMazin/Boulangerie_Website
LouisMazin/Boulangerie_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test

Browse Source
This commit is contained in:
Louis Mazin 2026-09-25 16:05:56 +02:00
parent 848699ba61
commit 0cb8747e09
1 changed files with 5 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
frontend/src/pages/CalendarPage.jsx
View File

@ -1,6 +1,5 @@
import React, { import React, {
useEffect, useEffect,
useLayoutEffect,
useMemo, useMemo,
useRef, useRef,
useState, useState,
@ -113,8 +112,6 @@ const CalendarPage = () => {
); );
const [isMobile, setIsMobile] = const [isMobile, setIsMobile] =
useState(false); useState(false);
const [availableHeight, setAvailableHeight] =
useState(600);
const [events, setEvents] = const [events, setEvents] =
useState([]); useState([]);
const [loadingEvents, setLoadingEvents] = const [loadingEvents, setLoadingEvents] =
@ -162,7 +159,6 @@ const CalendarPage = () => {
end_time: '', end_time: '',
color: DEFAULT_EVENT_COLOR, color: DEFAULT_EVENT_COLOR,
}); });
const calendarRef = useRef(null);
/* SÉLECTION D'UNE PÉRIODE */ /* SÉLECTION D'UNE PÉRIODE */
const [selectionStart, setSelectionStart] = useState(null); const [selectionStart, setSelectionStart] = useState(null);
const [selectionEnd, setSelectionEnd] = useState(null); const [selectionEnd, setSelectionEnd] = useState(null);
@ -434,70 +430,6 @@ const CalendarPage = () => {
useEffect(() => { useEffect(() => {
if (isMobile) clearSelection(); if (isMobile) clearSelection();
}, [isMobile]); }, [isMobile]);
/*
* ============================================================
* DIMENSIONS CALENDRIER
* ============================================================
*/
useLayoutEffect(() => {
if (loadingEvents) return;
const updateDimensions = () => {
const calendar =
calendarRef.current;
if (!calendar) return;
const cardContent =
calendar.closest(
'[data-slot="card-content"]',
);
if (!cardContent) return;
const calendarTop =
calendar.getBoundingClientRect()
.top;
const contentRect =
cardContent.getBoundingClientRect();
const footer =
document.querySelector('footer');
const footerTop = footer
? footer.getBoundingClientRect()
.top
: window.innerHeight;
const bottom = Math.min(
contentRect.bottom,
footerTop,
window.innerHeight,
);
const height =
bottom - calendarTop - 4;
setAvailableHeight(
Math.max(300, height),
);
};
updateDimensions();
window.addEventListener(
'resize',
updateDimensions,
);
let observer = null;
if (
typeof ResizeObserver !==
'undefined' &&
calendarRef.current
) {
observer = new ResizeObserver(
updateDimensions,
);
observer.observe(
calendarRef.current,
);
}
return () => {
window.removeEventListener(
'resize',
updateDimensions,
);
observer?.disconnect();
};
}, [year, selectedMonth, isMobile, loadingEvents]);
/* /*
* ============================================================ * ============================================================
* ANNÉE * ANNÉE
@ -955,16 +887,6 @@ const CalendarPage = () => {
? getDaysInMonth(selectedMonth) ? getDaysInMonth(selectedMonth)
: 31; : 31;
const availableGridHeight = Math.max(
availableHeight - HEADER_HEIGHT,
rowCount * MIN_ROW_HEIGHT,
);
const rowHeight = Math.max(
MIN_ROW_HEIGHT,
availableGridHeight / rowCount,
);
const minimumGridWidth = isMobile const minimumGridWidth = isMobile
? 0 ? 0
: DAY_COLUMN_WIDTH + : DAY_COLUMN_WIDTH +
@ -1464,7 +1386,6 @@ const CalendarPage = () => {
)} )}
<Card className="flex min-h-0 flex-1 flex-col overflow-hidden p-0"> <Card className="flex min-h-0 flex-1 flex-col overflow-hidden p-0">
<div <div
ref={calendarRef}
className="relative min-h-0 flex-1 overflow-auto md:overflow-hidden p-0" className="relative min-h-0 flex-1 overflow-auto md:overflow-hidden p-0"
style={{ style={{
WebkitOverflowScrolling: WebkitOverflowScrolling:
@ -1474,21 +1395,16 @@ const CalendarPage = () => {
}} }}
> >
<div <div
className="grid h-fit w-full min-w-0 border-l border-t border-border" className="grid h-full w-full min-w-0 border-l border-t border-border"
style={{ style={{
minHeight: `${HEADER_HEIGHT + rowCount * MIN_ROW_HEIGHT}px`,
minWidth: isMobile minWidth: isMobile
? '100%' ? '100%'
: `${minimumGridWidth}px`, : `${minimumGridWidth}px`,
gridTemplateColumns, gridTemplateColumns,
gridTemplateRows: ` gridTemplateRows: `${HEADER_HEIGHT}px repeat(${rowCount}, minmax(${MIN_ROW_HEIGHT}px, 1fr))`,
${HEADER_HEIGHT}px
repeat(
${rowCount},
${rowHeight}px
)
`,
boxSizing: boxSizing:
'border-box', 'border-box',
}} }}
@ -1560,9 +1476,6 @@ const CalendarPage = () => {
text-xs font-medium text-xs font-medium
text-muted-foreground text-muted-foreground
" "
style={{
height: `${rowHeight}px`,
}}
> >
{day} {day}
</div> </div>
@ -1590,9 +1503,6 @@ const CalendarPage = () => {
border-b border-r border-border border-b border-r border-border
bg-transparent bg-transparent
" "
style={{
height: `${rowHeight}px`,
}}
/> />
); );
} }
@ -1656,7 +1566,6 @@ const CalendarPage = () => {
`} `}
data-calendar-date={cellDate} data-calendar-date={cellDate}
style={{ style={{
height: `${rowHeight}px`,
overflow: overflow:
'visible', 'visible',
}} }}
@ -1812,8 +1721,8 @@ const CalendarPage = () => {
rounded-full rounded-full
" "
style={{ style={{
width: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`, width: '12px',
height: `${Math.min(12, Math.max(6, rowHeight * 0.9))}px`, height: '12px',
backgroundColor: eventColor, backgroundColor: eventColor,
}} }}
onPointerDown={(pointerEvent) => { onPointerDown={(pointerEvent) => {