test
This commit is contained in:
Louis Mazin
parent
db61ec30e1
commit
448dc573ee
@ -822,8 +822,9 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
attendance,
|
attendance,
|
||||||
) === userId,
|
) === userId,
|
||||||
)
|
)
|
||||||
.map((attendance) => ({
|
.map((attendance, index) => ({
|
||||||
attendance,
|
attendance,
|
||||||
|
index,
|
||||||
start: getMinutes(
|
start: getMinutes(
|
||||||
getTimeValue(
|
getTimeValue(
|
||||||
attendance,
|
attendance,
|
||||||
@ -845,33 +846,75 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getUserDayBounds = (
|
/*
|
||||||
dayAttendances,
|
* ------------------------------------------------------------
|
||||||
user,
|
* NOUVEAU :
|
||||||
|
* Utilisateurs actifs sur une période
|
||||||
|
*
|
||||||
|
* Desktop -> toute la semaine
|
||||||
|
* Mobile -> journée sélectionnée
|
||||||
|
* ------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
const getUsersWithAttendances = (
|
||||||
|
entries,
|
||||||
) => {
|
) => {
|
||||||
const schedules =
|
const activeUserIds = new Set();
|
||||||
getUserScheduleForDay(
|
|
||||||
dayAttendances,
|
entries.forEach((entry) => {
|
||||||
user,
|
const userId =
|
||||||
|
getEntryUserId(entry);
|
||||||
|
|
||||||
|
if (userId) {
|
||||||
|
activeUserIds.add(
|
||||||
|
String(userId),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return users.filter((user) =>
|
||||||
|
activeUserIds.has(
|
||||||
|
String(getUserId(user)),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getWeekActiveUsers = () => {
|
||||||
|
const weekDateKeys =
|
||||||
|
new Set(
|
||||||
|
weekDays.map(
|
||||||
|
formatDateKey,
|
||||||
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
if (!schedules.length) {
|
const weekAttendances =
|
||||||
return null;
|
expandOvernightAttendances(
|
||||||
|
attendances,
|
||||||
|
).filter(
|
||||||
|
(attendance) =>
|
||||||
|
weekDateKeys.has(
|
||||||
|
String(
|
||||||
|
attendance.date,
|
||||||
|
).slice(0, 10),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
return getUsersWithAttendances(
|
||||||
|
weekAttendances,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDayActiveUsers = () => {
|
||||||
|
const day =
|
||||||
|
weekDays[selectedDayIndex];
|
||||||
|
|
||||||
|
if (!day) {
|
||||||
|
return [];
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return getUsersWithAttendances(
|
||||||
start: Math.min(
|
getAttendancesForDay(day),
|
||||||
...schedules.map(
|
);
|
||||||
({ start }) => start,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
|
|
||||||
end: Math.max(
|
|
||||||
...schedules.map(
|
|
||||||
({ end }) => end,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
};
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/*
|
/*
|
||||||
@ -977,12 +1020,36 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
|
|
||||||
/*
|
/*
|
||||||
* ------------------------------------------------------------
|
* ------------------------------------------------------------
|
||||||
* Mobile : largeur des colonnes utilisateurs
|
* Utilisateurs réellement affichés
|
||||||
|
*
|
||||||
|
* Desktop : actifs sur la semaine
|
||||||
|
* Mobile : actifs sur le jour
|
||||||
* ------------------------------------------------------------
|
* ------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
const desktopActiveUsers =
|
||||||
|
getWeekActiveUsers();
|
||||||
|
|
||||||
|
const mobileActiveUsers =
|
||||||
|
getDayActiveUsers();
|
||||||
|
|
||||||
|
const desktopUserCount =
|
||||||
|
Math.max(
|
||||||
|
desktopActiveUsers.length,
|
||||||
|
1,
|
||||||
|
);
|
||||||
|
|
||||||
const mobileUserCount =
|
const mobileUserCount =
|
||||||
Math.max(users.length, 1);
|
Math.max(
|
||||||
|
mobileActiveUsers.length,
|
||||||
|
1,
|
||||||
|
);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ------------------------------------------------------------
|
||||||
|
* Largeur mobile
|
||||||
|
* ------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
const mobileUsersWidth =
|
const mobileUsersWidth =
|
||||||
isAdmin && showAllUsers
|
isAdmin && showAllUsers
|
||||||
@ -1365,7 +1432,7 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
|
|
||||||
{/* ==================================================
|
{/* ==================================================
|
||||||
ADMIN + TOUS LES UTILISATEURS
|
ADMIN + TOUS LES UTILISATEURS
|
||||||
1 utilisateur = 1 colonne
|
1 utilisateur actif = 1 colonne
|
||||||
================================================== */}
|
================================================== */}
|
||||||
|
|
||||||
{isAdmin &&
|
{isAdmin &&
|
||||||
@ -1376,10 +1443,10 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
gridTemplateColumns: `repeat(${mobileUserCount}, minmax(${MOBILE_USER_COLUMN_WIDTH}px, 1fr))`,
|
gridTemplateColumns: `repeat(${mobileUserCount}, minmax(${MOBILE_USER_COLUMN_WIDTH}px, 1fr))`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{users.map(
|
{mobileActiveUsers.map(
|
||||||
(user) => {
|
(user) => {
|
||||||
const bounds =
|
const schedules =
|
||||||
getUserDayBounds(
|
getUserScheduleForDay(
|
||||||
getAttendancesForDay(
|
getAttendancesForDay(
|
||||||
weekDays[
|
weekDays[
|
||||||
selectedDayIndex
|
selectedDayIndex
|
||||||
@ -1400,34 +1467,46 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
)}
|
)}
|
||||||
className="relative border-r border-border/30 last:border-r-0"
|
className="relative border-r border-border/30 last:border-r-0"
|
||||||
title={
|
title={
|
||||||
bounds
|
getUserLabel(
|
||||||
? `${getUserLabel(
|
user,
|
||||||
user,
|
)
|
||||||
)} : ${formatSegmentTime(
|
|
||||||
bounds.start,
|
|
||||||
)} - ${formatSegmentTime(
|
|
||||||
bounds.end,
|
|
||||||
)}`
|
|
||||||
: getUserLabel(
|
|
||||||
user,
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
{bounds && (
|
{schedules.map(
|
||||||
<div
|
({
|
||||||
className="absolute left-1/2 w-2 -translate-x-1/2 rounded-full"
|
attendance,
|
||||||
style={{
|
start,
|
||||||
...getAttendanceStyle(
|
end,
|
||||||
bounds.start,
|
index,
|
||||||
bounds.end,
|
}) => (
|
||||||
startHour,
|
<div
|
||||||
endHour,
|
key={
|
||||||
hourHeight,
|
attendance.id ??
|
||||||
),
|
`${getUserId(
|
||||||
backgroundColor:
|
user,
|
||||||
color,
|
)}-${start}-${end}-${index}`
|
||||||
}}
|
}
|
||||||
/>
|
className="absolute left-1/2 w-2 -translate-x-1/2 rounded-full"
|
||||||
|
style={{
|
||||||
|
...getAttendanceStyle(
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
startHour,
|
||||||
|
endHour,
|
||||||
|
hourHeight,
|
||||||
|
),
|
||||||
|
backgroundColor:
|
||||||
|
color,
|
||||||
|
}}
|
||||||
|
title={`${getUserLabel(
|
||||||
|
user,
|
||||||
|
)} : ${formatSegmentTime(
|
||||||
|
start,
|
||||||
|
)} - ${formatSegmentTime(
|
||||||
|
end,
|
||||||
|
)}`}
|
||||||
|
/>
|
||||||
|
),
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -1447,8 +1526,9 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
),
|
),
|
||||||
)
|
)
|
||||||
.map(
|
.map(
|
||||||
(attendance) => ({
|
(attendance, index) => ({
|
||||||
attendance,
|
attendance,
|
||||||
|
index,
|
||||||
start: getMinutes(
|
start: getMinutes(
|
||||||
getTimeValue(
|
getTimeValue(
|
||||||
attendance,
|
attendance,
|
||||||
@ -1474,8 +1554,10 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
)
|
)
|
||||||
.map(
|
.map(
|
||||||
({
|
({
|
||||||
|
attendance,
|
||||||
start,
|
start,
|
||||||
end,
|
end,
|
||||||
|
index,
|
||||||
}) => {
|
}) => {
|
||||||
const style =
|
const style =
|
||||||
getAttendanceStyle(
|
getAttendanceStyle(
|
||||||
@ -1488,11 +1570,14 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={`${formatDateKey(
|
key={
|
||||||
weekDays[
|
attendance.id ??
|
||||||
selectedDayIndex
|
`${formatDateKey(
|
||||||
],
|
weekDays[
|
||||||
)}-${start}-${end}`}
|
selectedDayIndex
|
||||||
|
],
|
||||||
|
)}-${start}-${end}-${index}`
|
||||||
|
}
|
||||||
className="absolute left-0 right-0 overflow-hidden rounded-sm border border-blue-600/30 bg-blue-500/80"
|
className="absolute left-0 right-0 overflow-hidden rounded-sm border border-blue-600/30 bg-blue-500/80"
|
||||||
style={
|
style={
|
||||||
style
|
style
|
||||||
@ -1636,16 +1721,26 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
{/* ==================================================
|
{/* ==================================================
|
||||||
ADMIN : TOUS LES UTILISATEURS
|
ADMIN : TOUS LES UTILISATEURS
|
||||||
|
|
||||||
1 utilisateur = 1 colonne
|
1 utilisateur ayant pointé dans la semaine
|
||||||
|
= 1 colonne
|
||||||
|
|
||||||
|
IMPORTANT :
|
||||||
|
on ne fait plus getUserDayBounds().
|
||||||
|
Chaque pointage est affiché séparément.
|
||||||
================================================== */}
|
================================================== */}
|
||||||
|
|
||||||
{isAdmin &&
|
{isAdmin &&
|
||||||
showAllUsers ? (
|
showAllUsers ? (
|
||||||
<div className="absolute inset-0 grid grid-cols-[repeat(auto-fit,minmax(0,1fr))]">
|
<div
|
||||||
{users.map(
|
className="absolute inset-0 grid"
|
||||||
|
style={{
|
||||||
|
gridTemplateColumns: `repeat(${desktopUserCount}, minmax(0, 1fr))`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{desktopActiveUsers.map(
|
||||||
(user) => {
|
(user) => {
|
||||||
const bounds =
|
const schedules =
|
||||||
getUserDayBounds(
|
getUserScheduleForDay(
|
||||||
dayAttendances,
|
dayAttendances,
|
||||||
user,
|
user,
|
||||||
);
|
);
|
||||||
@ -1661,35 +1756,47 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
user,
|
user,
|
||||||
)}
|
)}
|
||||||
className="relative min-w-0 border-r border-border/30 last:border-r-0"
|
className="relative min-w-0 border-r border-border/30 last:border-r-0"
|
||||||
title={
|
title={getUserLabel(
|
||||||
bounds
|
user,
|
||||||
? `${getUserLabel(
|
)}
|
||||||
|
>
|
||||||
|
{schedules.map(
|
||||||
|
({
|
||||||
|
attendance,
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
index,
|
||||||
|
}) => (
|
||||||
|
<div
|
||||||
|
key={
|
||||||
|
attendance.id ??
|
||||||
|
`${getUserId(
|
||||||
|
user,
|
||||||
|
)}-${formatDateKey(
|
||||||
|
day,
|
||||||
|
)}-${start}-${end}-${index}`
|
||||||
|
}
|
||||||
|
className="absolute left-1/2 w-2 -translate-x-1/2 rounded-full"
|
||||||
|
style={{
|
||||||
|
...getAttendanceStyle(
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
startHour,
|
||||||
|
endHour,
|
||||||
|
hourHeight,
|
||||||
|
),
|
||||||
|
backgroundColor:
|
||||||
|
color,
|
||||||
|
}}
|
||||||
|
title={`${getUserLabel(
|
||||||
user,
|
user,
|
||||||
)} : ${formatSegmentTime(
|
)} : ${formatSegmentTime(
|
||||||
bounds.start,
|
start,
|
||||||
)} - ${formatSegmentTime(
|
)} - ${formatSegmentTime(
|
||||||
bounds.end,
|
end,
|
||||||
)}`
|
)}`}
|
||||||
: getUserLabel(
|
/>
|
||||||
user,
|
),
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{bounds && (
|
|
||||||
<div
|
|
||||||
className="absolute left-1/2 w-2 -translate-x-1/2 rounded-full"
|
|
||||||
style={{
|
|
||||||
...getAttendanceStyle(
|
|
||||||
bounds.start,
|
|
||||||
bounds.end,
|
|
||||||
startHour,
|
|
||||||
endHour,
|
|
||||||
hourHeight,
|
|
||||||
),
|
|
||||||
backgroundColor:
|
|
||||||
color,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -1704,8 +1811,12 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
dayAttendances,
|
dayAttendances,
|
||||||
)
|
)
|
||||||
.map(
|
.map(
|
||||||
(attendance) => ({
|
(
|
||||||
attendance,
|
attendance,
|
||||||
|
index,
|
||||||
|
) => ({
|
||||||
|
attendance,
|
||||||
|
index,
|
||||||
start: getMinutes(
|
start: getMinutes(
|
||||||
getTimeValue(
|
getTimeValue(
|
||||||
attendance,
|
attendance,
|
||||||
@ -1731,8 +1842,10 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
)
|
)
|
||||||
.map(
|
.map(
|
||||||
({
|
({
|
||||||
|
attendance,
|
||||||
start,
|
start,
|
||||||
end,
|
end,
|
||||||
|
index,
|
||||||
}) => {
|
}) => {
|
||||||
const style =
|
const style =
|
||||||
getAttendanceStyle(
|
getAttendanceStyle(
|
||||||
@ -1745,9 +1858,12 @@ const WeeklySummaryPage = ({ userId }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={`${formatDateKey(
|
key={
|
||||||
day,
|
attendance.id ??
|
||||||
)}-${start}-${end}`}
|
`${formatDateKey(
|
||||||
|
day,
|
||||||
|
)}-${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
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user