test
This commit is contained in:
Louis Mazin
parent
0780f2da4a
commit
17de4fa65a
@ -44,14 +44,24 @@ const USER_COLORS = [
|
|||||||
|
|
||||||
const expandOvernightAttendances = (entries) => {
|
const expandOvernightAttendances = (entries) => {
|
||||||
return entries.map((entry) => {
|
return entries.map((entry) => {
|
||||||
if (entry.start_time && !entry.end_time) {
|
const start =
|
||||||
|
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 (!entry.start_time && entry.end_time) {
|
if (!start && end) {
|
||||||
return {
|
return {
|
||||||
...entry,
|
...entry,
|
||||||
start_time: '00:00:00',
|
start_time: '00:00:00',
|
||||||
@ -429,10 +439,8 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
);
|
);
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* Sur mobile, la hauteur du conteneur est volontairement
|
* Sur mobile, le planning possède sa propre hauteur
|
||||||
* limitée afin que le contenu interne puisse défiler.
|
* visible et son propre scroll.
|
||||||
*
|
|
||||||
* On ne calcule donc pas availableScheduleHeight ici.
|
|
||||||
*/
|
*/
|
||||||
if (window.innerWidth < 768) {
|
if (window.innerWidth < 768) {
|
||||||
return;
|
return;
|
||||||
@ -576,11 +584,11 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
: 'endTime';
|
: 'endTime';
|
||||||
|
|
||||||
const value =
|
const value =
|
||||||
attendance[key] ||
|
attendance[key] ??
|
||||||
attendance[legacyKey] ||
|
attendance[legacyKey] ??
|
||||||
'';
|
'';
|
||||||
|
|
||||||
return value.slice(0, 5);
|
return String(value).slice(0, 5);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getMinutes = (time) => {
|
const getMinutes = (time) => {
|
||||||
@ -972,6 +980,48 @@ 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
|
||||||
@ -1021,14 +1071,6 @@ 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
|
||||||
@ -1587,84 +1629,54 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
getSelectedUserAttendances(
|
getRenderableAttendancesForDay(
|
||||||
getAttendancesForDay(
|
getAttendancesForDay(
|
||||||
weekDays[
|
weekDays[
|
||||||
selectedDayIndex
|
selectedDayIndex
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
)
|
).map(
|
||||||
.map(
|
({
|
||||||
(attendance, index) => ({
|
attendance,
|
||||||
attendance,
|
start,
|
||||||
index,
|
end,
|
||||||
start: getMinutes(
|
index,
|
||||||
getTimeValue(
|
}) => {
|
||||||
attendance,
|
const style =
|
||||||
'start_time',
|
getAttendanceStyle(
|
||||||
),
|
start,
|
||||||
),
|
end,
|
||||||
end: getMinutes(
|
startHour,
|
||||||
getTimeValue(
|
endHour,
|
||||||
attendance,
|
hourHeight,
|
||||||
'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>
|
|
||||||
);
|
);
|
||||||
},
|
|
||||||
)
|
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>
|
||||||
@ -1863,83 +1875,52 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
getSelectedUserAttendances(
|
getRenderableAttendancesForDay(
|
||||||
dayAttendances,
|
dayAttendances,
|
||||||
)
|
).map(
|
||||||
.map(
|
({
|
||||||
(
|
attendance,
|
||||||
attendance,
|
start,
|
||||||
index,
|
end,
|
||||||
) => ({
|
index,
|
||||||
attendance,
|
}) => {
|
||||||
index,
|
const style =
|
||||||
start: getMinutes(
|
getAttendanceStyle(
|
||||||
getTimeValue(
|
start,
|
||||||
attendance,
|
end,
|
||||||
'start_time',
|
startHour,
|
||||||
),
|
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>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user