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

tests

Browse Source
This commit is contained in:
Louis Mazin 2026-09-20 02:48:11 +02:00
parent 17de4fa65a
commit 7864fe058e
1 changed files with 162 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

305
frontend/src/pages/WeeklySummaryPage.jsx
View File

@ -44,24 +44,14 @@ const USER_COLORS = [
const expandOvernightAttendances = (entries) => { const expandOvernightAttendances = (entries) => {
return entries.map((entry) => { return entries.map((entry) => {
const start = if (entry.start_time && !entry.end_time) {
entry.start_time ??
entry.startTime ??
'';
const end =
entry.end_time ??
entry.endTime ??
'';
if (start && !end) {
return { return {
...entry, ...entry,
end_time: '24:00:00', end_time: '24:00:00',
}; };
} }
if (!start && end) { if (!entry.start_time && entry.end_time) {
return { return {
...entry, ...entry,
start_time: '00:00:00', start_time: '00:00:00',
@ -439,8 +429,10 @@ const WeeklySummaryPage = ({ userId }) => {
); );
/* /*
* Sur mobile, le planning possède sa propre hauteur * Sur mobile, la hauteur du conteneur est volontairement
* visible et son propre scroll. * limitée afin que le contenu interne puisse défiler.
*
* On ne calcule donc pas availableScheduleHeight ici.
*/ */
if (window.innerWidth < 768) { if (window.innerWidth < 768) {
return; return;
@ -584,11 +576,11 @@ const WeeklySummaryPage = ({ userId }) => {
: 'endTime'; : 'endTime';
const value = const value =
attendance[key] ?? attendance[key] ||
attendance[legacyKey] ?? attendance[legacyKey] ||
''; '';
return String(value).slice(0, 5); return value.slice(0, 5);
}; };
const getMinutes = (time) => { const getMinutes = (time) => {
@ -980,48 +972,6 @@ const WeeklySummaryPage = ({ userId }) => {
); );
}; };
/*
* ------------------------------------------------------------
* Créneaux réellement affichables
* ------------------------------------------------------------
*
* Cette fonction est utilisée par le rendu mobile ET permet
* de garantir que les créneaux sont filtrés de la même manière.
*/
const getRenderableAttendancesForDay = (
dayAttendances,
) => {
return getSelectedUserAttendances(
dayAttendances,
)
.map((attendance, index) => ({
attendance,
index,
start: getMinutes(
getTimeValue(
attendance,
'start_time',
),
),
end: getMinutes(
getTimeValue(
attendance,
'end_time',
),
),
}))
.filter(
({
start,
end,
}) =>
start !== null &&
end !== null &&
end > start,
);
};
/* /*
* ------------------------------------------------------------ * ------------------------------------------------------------
* États * États
@ -1071,6 +1021,14 @@ const WeeklySummaryPage = ({ userId }) => {
* ------------------------------------------------------------ * ------------------------------------------------------------
* Hauteur du planning * Hauteur du planning
* ------------------------------------------------------------ * ------------------------------------------------------------
*
* Desktop :
* la hauteur calculée doit tenir dans la Card.
*
* Mobile :
* chaque heure possède une hauteur fixe confortable.
* Le planning est donc volontairement plus haut que
* sa fenêtre visible et devient réellement scrollable.
*/ */
const scheduleHeight = isMobile const scheduleHeight = isMobile
@ -1629,54 +1587,84 @@ const WeeklySummaryPage = ({ userId }) => {
)} )}
</div> </div>
) : ( ) : (
getRenderableAttendancesForDay( getSelectedUserAttendances(
getAttendancesForDay( getAttendancesForDay(
weekDays[ weekDays[
selectedDayIndex selectedDayIndex
], ],
), ),
).map(
({
attendance,
start,
end,
index,
}) => {
const style =
getAttendanceStyle(
start,
end,
startHour,
endHour,
hourHeight,
);
return (
<div
key={
attendance.id ??
`${formatDateKey(
weekDays[
selectedDayIndex
],
)}-${start}-${end}-${index}`
}
className="absolute left-0 right-0 overflow-hidden rounded-sm border border-blue-600/30 bg-blue-500/80"
style={style}
>
<div className="p-1 text-xs text-white">
{formatSegmentTime(
start,
)}{' '}
-{' '}
{formatSegmentTime(
end,
)}
</div>
</div>
);
},
) )
.map(
(attendance, index) => ({
attendance,
index,
start: getMinutes(
getTimeValue(
attendance,
'start_time',
),
),
end: getMinutes(
getTimeValue(
attendance,
'end_time',
),
),
}),
)
.filter(
({
start,
end,
}) =>
start !== null &&
end !== null &&
end > start,
)
.map(
({
attendance,
start,
end,
index,
}) => {
const style =
getAttendanceStyle(
start,
end,
startHour,
endHour,
hourHeight,
);
return (
<div
key={
attendance.id ??
`${formatDateKey(
weekDays[
selectedDayIndex
],
)}-${start}-${end}-${index}`
}
className="absolute left-0 right-0 overflow-hidden rounded-sm border border-blue-600/30 bg-blue-500/80"
style={
style
}
>
<div className="p-1 text-xs text-white">
{formatSegmentTime(
start,
)}{' '}
-{' '}
{formatSegmentTime(
end,
)}
</div>
</div>
);
},
)
)} )}
</div> </div>
</div> </div>
@ -1875,52 +1863,83 @@ const WeeklySummaryPage = ({ userId }) => {
)} )}
</div> </div>
) : ( ) : (
getRenderableAttendancesForDay( getSelectedUserAttendances(
dayAttendances, dayAttendances,
).map( )
({ .map(
attendance, (
start, attendance,
end, index,
index, ) => ({
}) => { attendance,
const style = index,
getAttendanceStyle( start: getMinutes(
start, getTimeValue(
end, attendance,
startHour, 'start_time',
endHour, ),
hourHeight, ),
); end: getMinutes(
getTimeValue(
attendance,
'end_time',
),
),
}),
)
.filter(
({
start,
end,
}) =>
start !== null &&
end !== null &&
end > start,
)
.map(
({
attendance,
start,
end,
index,
}) => {
const style =
getAttendanceStyle(
start,
end,
startHour,
endHour,
hourHeight,
);
return ( return (
<div <div
key={ key={
attendance.id ?? attendance.id ??
`${formatDateKey( `${formatDateKey(
day, day,
)}-${start}-${end}-${index}` )}-${start}-${end}-${index}`
} }
className="absolute left-2 right-2 overflow-hidden rounded-md border border-blue-600/30 bg-blue-500/80" className="absolute left-2 right-2 overflow-hidden rounded-md border border-blue-600/30 bg-blue-500/80"
style={ style={
style style
} }
> >
<div className="p-2 text-xs text-white"> <div className="p-2 text-xs text-white">
<div className="font-medium"> <div className="font-medium">
{formatSegmentTime( {formatSegmentTime(
start, start,
)}{' '} )}{' '}
-{' '} -{' '}
{formatSegmentTime( {formatSegmentTime(
end, end,
)} )}
</div>
</div> </div>
</div> </div>
</div> );
); },
}, )
)
)} )}
</div> </div>
); );