PeL/force-orange-2022
PeL/force-orange-2022
1
1
Fork 0
mirror of https://github.com/Paris-est-Ludique/intranet.git synced 2025-06-08 08:34:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

display day unavailability in team members in grey

Browse Source
This commit is contained in:
memeriau 2022-04-18 14:08:16 +02:00
parent 7b9507ca35
commit 12ab2220a6
2 changed files with 30 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/TeamMembers/TeamMembers.tsx
View File

@ -35,6 +35,31 @@ const VolunteerEmail: FC<VolunteerEmailProps> = withUserRole("référent", ({ em
<div className={styles.volunteerEmail}>{email}</div>
))
type DaysAvailabilityProps = {
volunteer: Volunteer
}
const DaysAvailability: FC<DaysAvailabilityProps> = ({ volunteer }): JSX.Element => {
if (volunteer.dayWishes.length === 0) {
return (
<>
<div className={classnames(styles.day, styles.unknown)}>S</div>
<div className={classnames(styles.day, styles.unknown)}>D</div>
</>
)
}
return (
<>
<div className={classnames(styles.day, hasDay("S")(volunteer) && styles.available)}>
S
</div>
<div className={classnames(styles.day, hasDay("D")(volunteer) && styles.available)}>
D
</div>
</>
)
}
type Props = {
teamId: number
}
@ -58,22 +83,7 @@ const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
<div className={styles.volunteerName}>
{volunteer.firstname} {volunteer.lastname}
</div>
<div
className={classnames(
styles.day,
hasDay("S")(volunteer) && styles.available
)}
>
S
</div>
<div
className={classnames(
styles.day,
hasDay("D")(volunteer) && styles.available
)}
>
D
</div>
<DaysAvailability volunteer={volunteer} />
<VolunteerEmail email={volunteer.email} />
</li>
))}

4
src/components/TeamMembers/styles.module.scss
View File

@ -45,6 +45,10 @@ $height: 24px;
background-color: $color-red;
color: transparent;
&.unknown {
background-color: $color-grey-medium;
}
&.available {
background-color: $color-green;
}