diff --git a/src/components/TeamAssignment/TeamWithCandidates.tsx b/src/components/TeamAssignment/TeamWithCandidates.tsx index daed180..e0374a4 100644 --- a/src/components/TeamAssignment/TeamWithCandidates.tsx +++ b/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 = ({ teamId }): JSX.Element | null => { [saveTeam] ) - if (!currentTeam) return null + if (!currentTeam) return
return (
-
- Equipe {currentTeam.name} ({currentTeam.volunteers.length}) : -
+
Equipe {currentTeam.name}
+ +
Bénévoles intéressés ({currentTeam.volunteers.length}) :
    {currentTeam.volunteers.map( ({ id, lastname, firstname, teamWishes, dayWishes, team }) => ( diff --git a/src/components/TeamAssignment/styles.module.scss b/src/components/TeamAssignment/styles.module.scss index dfa6758..29dce05 100755 --- a/src/components/TeamAssignment/styles.module.scss +++ b/src/components/TeamAssignment/styles.module.scss @@ -22,6 +22,11 @@ } } +.teamHeaderName { + margin-bottom: 20px; + font-weight: bold; +} + .teamWishButton { margin: 0 2px; padding: 2px; diff --git a/src/components/TeamMembers/TeamMembers.tsx b/src/components/TeamMembers/TeamMembers.tsx new file mode 100644 index 0000000..44bcbd7 --- /dev/null +++ b/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 = ({ teamId }): JSX.Element => { + const volunteers = useSelector(selectVolunteersWithTeam).filter( + (volunteer) => volunteer?.teamObject?.id === teamId + ) + + if (volunteers.length === 0) return
    + + return ( +
      +
    • +
      +
      S ({volunteers.filter(hasDay("S")).length})
      +
      D ({volunteers.filter(hasDay("D")).length})
      +
    • + {volunteers.map((volunteer) => ( +
    • +
      + {volunteer.firstname} {volunteer.lastname} +
      +
      + S +
      +
      + D +
      +
    • + ))} +
    + ) +} + +export default TeamMembers diff --git a/src/components/TeamMembers/styles.module.scss b/src/components/TeamMembers/styles.module.scss new file mode 100755 index 0000000..eec36fe --- /dev/null +++ b/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; + } +}