Add email listing support for mobile in component TeamMembers

src/components/Knowledge/KnowledgeCard.tsx

@@ -28,6 +28,9 @@ const boxElement = (
 
     const typeStyle = {
         "": null,
+        "Jeux à deux": null,
+        Rapide: null,
+        Enfants: null,
         Ambiance: styles.verteImg,
         Famille: styles.orangeImg,
         Expert: styles.rougeImg,

src/components/TeamMembers/TeamMembers.tsx

@@ -7,8 +7,8 @@ import { selectTeamList } from "../../store/teamList"
 import styles from "./styles.module.scss"
 import { Volunteer } from "../../services/volunteers"
 import { Team } from "../../services/teams"
-import withUserRole from "../../utils/withUserRole"
 import ROLES from "../../utils/roles.constants"
+import { selectUserRoles } from "../../store/auth"
 
 interface ExtendedVolunteer extends Volunteer {
     teamObject: Team | undefined
@@ -28,31 +28,30 @@ const selectVolunteersWithTeam = createSelector(
 
 const hasDay = (day: string) => (volunteer: Volunteer) => volunteer.dayWishes.includes(day)
 
-type VolunteerEmailProps = {
-    email: string
-}
-
-const VolunteerEmail: FC<VolunteerEmailProps> = withUserRole(ROLES.TEAMLEAD, ({ email }) => (
-    <td> {email}</td>
-), null)
-
 type DaysAvailabilityProps = {
     volunteer: Volunteer
 }
 
 const DaysAvailability: FC<DaysAvailabilityProps> = ({ volunteer }): JSX.Element => {
-    if (volunteer.dayWishes.length === 0) {
-        return (
-            <>
-                <td className={classnames(styles.day, styles.unknown)}>S</td>
-                <td className={classnames(styles.day, styles.unknown)}>D</td>
-            </>
-        )
-    }
+    const hasWishes = volunteer.dayWishes.length > 0
     return (
         <>
-            <td className={classnames(styles.day, hasDay("S")(volunteer) && styles.available)} />
-            <td className={classnames(styles.day, hasDay("D")(volunteer) && styles.available)} />
+            <td
+                className={classnames(
+                    styles.day,
+                    hasWishes ? hasDay("S")(volunteer) && styles.available : styles.unknown
+                )}
+            >
+                {hasWishes ? "" : "?"}
+            </td>
+            <td
+                className={classnames(
+                    styles.day,
+                    hasWishes ? hasDay("D")(volunteer) && styles.available : styles.unknown
+                )}
+            >
+                {hasWishes ? "" : "?"}
+            </td>
         </>
     )
 }
@@ -65,26 +64,39 @@ const TeamMembers: FC<Props> = ({ teamId }): JSX.Element => {
     const volunteers = useSelector(selectVolunteersWithTeam).filter(
         (volunteer) => volunteer?.teamObject?.id === teamId
     )
+    const roles = useSelector(selectUserRoles)
 
     if (volunteers.length === 0) return <div />
 
     return (
-        <table>
-            <tr>
-                <th>Volontaires</th>
-                <th className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</th>
-                <th className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</th>
-                <th>@</th>
-            </tr>
-            {volunteers.map((volunteer) => (
-                <tr key={volunteer.id}>
-                    <td>
-                        {volunteer.firstname} {volunteer.lastname}
-                    </td>
-                    <DaysAvailability volunteer={volunteer} />
-                    <VolunteerEmail email={volunteer.email} />
+        <table className={styles.teamMembers}>
+            <tbody>
+                <tr>
+                    <th>Bénévoles</th>
+                    <th className={styles.dayTitle}>S ({volunteers.filter(hasDay("S")).length})</th>
+                    <th className={styles.dayTitle}>D ({volunteers.filter(hasDay("D")).length})</th>
                 </tr>
-            ))}
+                {volunteers.map((volunteer) => (
+                    <tr key={volunteer.id}>
+                        <td
+                            className={classnames(
+                                styles.volunteerName,
+                                roles.includes(ROLES.TEAMLEAD) && styles.extendedVolunteerName
+                            )}
+                        >
+                            {volunteer.firstname} {volunteer.lastname}
+                            {roles.includes(ROLES.TEAMLEAD) && (
+                                <>
+                                    {" "}
+                                    <span className={styles.email}>&lt;{volunteer.email}&gt;</span>
+                                    <span className={styles.hiddenText}>,</span>
+                                </>
+                            )}
+                        </td>
+                        <DaysAvailability volunteer={volunteer} />
+                    </tr>
+                ))}
+            </tbody>
         </table>
     )
 }

src/components/TeamMembers/styles.module.scss

@@ -2,6 +2,8 @@
 @import "../../theme/mixins";
 .day {
     background-color: $color-red;
+    text-align: center;
+    min-width: 10%;
     &.unknown {
         background-color: $color-grey-medium;
     }
@@ -9,3 +11,30 @@
         background-color: $color-green;
     }
 }
+
+.teamMembers {
+    @include mobile {
+        width: 100%;
+    }
+}
+
+.volunteerName {
+    text-align: left;
+    word-wrap: break-word;
+}
+
+.extendedVolunteerName {
+    @include mobile {
+        width: 100%;
+        max-width: 0;
+    }
+}
+
+.email {
+    font-size: smaller;
+}
+
+.hiddenText {
+    font-size: 1px;
+    width: 0.1px;
+}