display team members on team assign

src/components/TeamAssignment/TeamWithCandidates.tsx

@@ -6,6 +6,7 @@ import { selectVolunteerList } from "../../store/volunteerList"
 import { selectTeamList } from "../../store/teamList"
 import styles from "./styles.module.scss"
 import { useTeamAssign } from "./teamAssign.utils"
+import TeamMembers from "../TeamMembers/TeamMembers"
 
 const selectTeamsWithVolunteersCandidates = createSelector(
     selectVolunteerList,
@@ -64,13 +65,13 @@ const TeamWithCandidates: FC<Props> = ({ teamId }): JSX.Element | null => {
         [saveTeam]
     )
 
-    if (!currentTeam) return null
+    if (!currentTeam) return <div />
 
     return (
         <div>
-            <div>
+            <div className={styles.teamHeaderName}>Equipe {currentTeam.name}</div>
-                Equipe {currentTeam.name} ({currentTeam.volunteers.length}) :
+            <TeamMembers teamId={teamId} />
-            </div>
+            <div>Bénévoles intéressés ({currentTeam.volunteers.length}) :</div>
             <ul>
                 {currentTeam.volunteers.map(
                     ({ id, lastname, firstname, teamWishes, dayWishes, team }) => (

src/components/TeamAssignment/styles.module.scss

@@ -22,6 +22,11 @@
     }
 }
 
+.teamHeaderName {
+    margin-bottom: 20px;
+    font-weight: bold;
+}
+
 .teamWishButton {
     margin: 0 2px;
     padding: 2px;

src/components/TeamMembers/TeamMembers.tsx

@@ -0,0 +1,74 @@
+import { FC } from "react"
+import { createSelector } from "@reduxjs/toolkit"
+import { useSelector } from "react-redux"
+import classnames from "classnames"
+import { selectVolunteerList } from "../../store/volunteerList"
+import { selectTeamList } from "../../store/teamList"
+import styles from "./styles.module.scss"
+import { Volunteer } from "../../services/volunteers"
+import { Team } from "../../services/teams"
+
+interface ExtendedVolunteer extends Volunteer {
+    teamObject: Team | undefined
+}
+
+const selectVolunteersWithTeam = createSelector(
+    selectVolunteerList,
+    selectTeamList,
+    (volunteers, teams): ExtendedVolunteer[] =>
+        volunteers
+            .filter((volunteer) => volunteer.team)
+            .map((volunteer) => ({
+                ...volunteer,
+                teamObject: teams.find((team: any) => volunteer.team === team?.id),
+            }))
+)
+
+const hasDay = (day: string) => (volunteer: Volunteer) => volunteer.dayWishes.includes(day)
+
+type Props = {
+    teamId: number
+}
+
+const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
+    const volunteers = useSelector(selectVolunteersWithTeam).filter(
+        (volunteer) => volunteer?.teamObject?.id === teamId
+    )
+
+    if (volunteers.length === 0) return <div />
+
+    return (
+        <ul className={styles.volunteers}>
+            <li>
+                <div className={styles.volunteerName} />
+                <div className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</div>
+                <div className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</div>
+            </li>
+            {volunteers.map((volunteer) => (
+                <li key={volunteer.id} className={styles.volunteer}>
+                    <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>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default TeamMembers

src/components/TeamMembers/styles.module.scss

@@ -0,0 +1,45 @@
+@import "../../theme/variables";
+@import "../../theme/mixins";
+
+.volunteers {
+    padding: 0;
+    list-style: none;
+}
+
+$height: 24px;
+
+.volunteer {
+    height: $height;
+    line-height: $height;
+    margin-bottom: 3px;
+}
+
+.volunteerName {
+    display: inline-block;
+    height: $height;
+    width: 250px;
+    padding-right: 4px;
+    text-align: right;
+}
+
+.dayTitle {
+    display: inline-block;
+    width: 50px;
+    height: $height;
+    margin: 0 2px;
+    text-align: center;
+}
+
+.day {
+    display: inline-block;
+    width: 50px;
+    height: $height;
+    margin: 0 2px;
+    text-align: center;
+    background-color: $color-red;
+    color: transparent;
+
+    &.available {
+        background-color: $color-green;
+    }
+}