tests
This commit is contained in:
Louis Mazin
parent
17de4fa65a
commit
7864fe058e
@ -44,24 +44,14 @@ const USER_COLORS = [
|
||||
|
||||
const expandOvernightAttendances = (entries) => {
|
||||
return entries.map((entry) => {
|
||||
const start =
|
||||
entry.start_time ??
|
||||
entry.startTime ??
|
||||
'';
|
||||
|
||||
const end =
|
||||
entry.end_time ??
|
||||
entry.endTime ??
|
||||
'';
|
||||
|
||||
if (start && !end) {
|
||||
if (entry.start_time && !entry.end_time) {
|
||||
return {
|
||||
...entry,
|
||||
end_time: '24:00:00',
|
||||
};
|
||||
}
|
||||
|
||||
if (!start && end) {
|
||||
if (!entry.start_time && entry.end_time) {
|
||||
return {
|
||||
...entry,
|
||||
start_time: '00:00:00',
|
||||
@ -439,8 +429,10 @@ const WeeklySummaryPage = ({ userId }) => {
|
||||
);
|
||||
|
||||
/*
|
||||
* Sur mobile, le planning possède sa propre hauteur
|
||||
* visible et son propre scroll.
|
||||
* Sur mobile, la hauteur du conteneur est volontairement
|
||||
* limitée afin que le contenu interne puisse défiler.
|
||||
*
|
||||
* On ne calcule donc pas availableScheduleHeight ici.
|
||||
*/
|
||||
if (window.innerWidth < 768) {
|
||||
return;
|
||||
@ -584,11 +576,11 @@ const WeeklySummaryPage = ({ userId }) => {
|
||||
: 'endTime';
|
||||
|
||||
const value =
|
||||
attendance[key] ??
|
||||
attendance[legacyKey] ??
|
||||
attendance[key] ||
|
||||
attendance[legacyKey] ||
|
||||
'';
|
||||
|
||||
return String(value).slice(0, 5);
|
||||
return value.slice(0, 5);
|
||||
};
|
||||
|
||||
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
|
||||
@ -1071,6 +1021,14 @@ const WeeklySummaryPage = ({ userId }) => {
|
||||
* ------------------------------------------------------------
|
||||
* 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
|
||||
@ -1629,54 +1587,84 @@ const WeeklySummaryPage = ({ userId }) => {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
getRenderableAttendancesForDay(
|
||||
getSelectedUserAttendances(
|
||||
getAttendancesForDay(
|
||||
weekDays[
|
||||
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>
|
||||
@ -1875,52 +1863,83 @@ const WeeklySummaryPage = ({ userId }) => {
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
getRenderableAttendancesForDay(
|
||||
getSelectedUserAttendances(
|
||||
dayAttendances,
|
||||
).map(
|
||||
({
|
||||
attendance,
|
||||
start,
|
||||
end,
|
||||
index,
|
||||
}) => {
|
||||
const style =
|
||||
getAttendanceStyle(
|
||||
start,
|
||||
end,
|
||||
startHour,
|
||||
endHour,
|
||||
hourHeight,
|
||||
);
|
||||
)
|
||||
.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(
|
||||
day,
|
||||
)}-${start}-${end}-${index}`
|
||||
}
|
||||
className="absolute left-2 right-2 overflow-hidden rounded-md border border-blue-600/30 bg-blue-500/80"
|
||||
style={
|
||||
style
|
||||
}
|
||||
>
|
||||
<div className="p-2 text-xs text-white">
|
||||
<div className="font-medium">
|
||||
{formatSegmentTime(
|
||||
start,
|
||||
)}{' '}
|
||||
-{' '}
|
||||
{formatSegmentTime(
|
||||
end,
|
||||
)}
|
||||
return (
|
||||
<div
|
||||
key={
|
||||
attendance.id ??
|
||||
`${formatDateKey(
|
||||
day,
|
||||
)}-${start}-${end}-${index}`
|
||||
}
|
||||
className="absolute left-2 right-2 overflow-hidden rounded-md border border-blue-600/30 bg-blue-500/80"
|
||||
style={
|
||||
style
|
||||
}
|
||||
>
|
||||
<div className="p-2 text-xs text-white">
|
||||
<div className="font-medium">
|
||||
{formatSegmentTime(
|
||||
start,
|
||||
)}{' '}
|
||||
-{' '}
|
||||
{formatSegmentTime(
|
||||
end,
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
)
|
||||
);
|
||||
},
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user