Dev

.github/workflows/build.yml

@@ -13,7 +13,7 @@ jobs:
 
       # [2] get node.
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
 

.github/workflows/deploy.yml

@@ -15,7 +15,7 @@ jobs:
 
       # [2] get node.
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
 

.github/workflows/test.yml

@@ -13,7 +13,7 @@ jobs:
 
       # [2] get node.
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
 
@@ -33,7 +33,7 @@ jobs:
 
       # [2] get node.
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
 
@@ -53,7 +53,7 @@ jobs:
 
       # [2] get node.
       - name: Use Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v2
         with:
           node-version: '16.15.1'
 

src/components/KeepRatio.tsx

@@ -3,13 +3,15 @@ import React from 'react';
 interface KeepRatioProps {
   ratio: number;
   width?: string | number;
+  height?: string | number;
   maxWidth?: string | number;
   minHeight?: string | number;
   className?: string;
 }
 
 export const KeepRatio = ({
   width = '100%',
+  height = '100%',
   maxWidth = '100%',
   minHeight = 0,
   ratio,
@@ -20,7 +22,7 @@ export const KeepRatio = ({
     <div style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
       <div style={{ width, maxWidth }}>
         <div style={{ width: '100%', paddingBottom: `${ratio * 100}%`, minHeight, position: 'relative' }}>
-          <div className={className} style={{ position: 'absolute', top: '0', left: '0', width: '100%', height: '100%' }}>
+          <div className={className} style={{ position: 'absolute', top: '0', left: '0', width: '100%', height }}>
             {children}
           </div>
         </div>

src/components/WelcomeModal/FirstPhase.tsx

@@ -272,52 +272,59 @@ export const FirstPhase = () => {
                 <PanelInput
                   value={newUser.school || ''}
                   defaultValue={'non renseignée'}
-                  label="École :"
-                  placeholder="Nom de votre école"
+                  label="École : "
+                  placeholder="Nom de votre école : "
+                  hasError={!newUser.school}
                   isEditMode
+                  isRequired
                   onChange={(school) => {
                     setNewUser((u) => ({ ...u, school }));
                   }}
                 />
                 <PanelInput
                   value={newUser.level || ''}
                   defaultValue={'non renseigné'}
-                  label="Niveau de la classe :"
+                  label="Niveau de la classe : "
                   placeholder="Niveau de votre classe"
+                  hasError={!newUser.level}
                   isEditMode
+                  isRequired
                   onChange={(level) => {
                     setNewUser((u) => ({ ...u, level }));
                   }}
                 />
                 <PanelInput
                   value={newUser.address || ''}
                   defaultValue={'non renseigné'}
-                  label="Adresse de l'école :"
+                  label="Adresse de l'école : "
                   placeholder="Adresse"
                   hasError={!newUser.address}
                   isEditMode
+                  isRequired
                   onChange={(address) => {
                     setNewUser((u) => ({ ...u, address }));
                   }}
                 />
                 <PanelInput
                   value={newUser.city || ''}
                   defaultValue={'non renseigné'}
-                  label="Ville :"
+                  label="Ville : "
                   placeholder="Ville"
                   hasError={!newUser.city}
                   isEditMode
+                  isRequired
                   onChange={(city) => {
                     setNewUser((u) => ({ ...u, city }));
                   }}
                 />
                 <PanelInput
                   value={newUser.postalCode || ''}
                   defaultValue={'non renseigné'}
-                  label="Code postal :"
+                  label="Code postal : "
                   placeholder="Code postal"
                   hasError={!newUser.postalCode}
                   isEditMode
+                  isRequired
                   onChange={(postalCode) => {
                     setNewUser((u) => ({ ...u, postalCode }));
                   }}
@@ -329,7 +336,7 @@ export const FirstPhase = () => {
                   style={{ marginTop: '2rem' }}
                   value={newUser.displayName || ''}
                   defaultValue={'non renseigné'}
-                  label="Nom affiché :"
+                  label="Nom affiché : "
                   placeholder={getUserDisplayName({ ...user, ...newUser, type: user?.type }, false)}
                   isEditMode
                   onChange={(displayName) => {

src/components/accueil/NewHome.tsx

@@ -26,24 +26,12 @@ export const NewHome = () => {
   return (
     <div className="bg-gradiant" style={{ display: 'flex', flexDirection: 'column' }}>
       <>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
-            gap: '10px',
-            background: 'white',
-            width: '95%',
-            height: '50px',
-            maxWidth: '1200px',
-            borderRadius: '10px',
-            marginBottom: '2rem',
-          }}
-        >
+        <div className="login__header">
           <Logo style={{ width: '25%', height: 'auto', margin: '0 10px', alignSelf: 'center' }} />
           <h1 style={{ placeSelf: 'center' }}>Vous êtes...</h1>
         </div>
-        <KeepRatio ratio={0.45} width="95%" maxWidth="1200px" minHeight="400px" className="login__container">
-          <div className="text-center" style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '2rem', placeItems: 'center' }}>
+        <KeepRatio ratio={0.45} width="95%" maxWidth="1200px" height="fit-content" minHeight="400px" className="login__container">
+          <div className="flex-responsive text-center">
             {/* Block Teacher */}
             <div style={{ display: 'flex', flexDirection: 'column', height: '300px' }}>
               <h2>Professeur des écoles</h2>

src/components/mon-compte/PanelInput.tsx

@@ -8,6 +8,7 @@ interface PanelInputProps {
   defaultValue?: string;
   label: string;
   placeholder?: string;
+  isRequired?: boolean;
   isEditMode?: boolean;
   errorMsg?: string;
   helperText?: string;
@@ -23,6 +24,7 @@ export const PanelInput = ({
   defaultValue = '',
   label,
   placeholder = '',
+  isRequired = false,
   isEditMode = true,
   errorMsg,
   helperText,
@@ -36,6 +38,7 @@ export const PanelInput = ({
     <div style={{ margin: '0.5rem', display: 'inline-flex', alignItems: 'flex-start', ...style }}>
       <label className="text text--bold" style={{ flexShrink: 0 }}>
         {label}
+        {isRequired && <span style={{ color: 'red' }}>*</span>}
       </label>
       {isEditMode ? (
         <TextField

src/pages/admin/users/index.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 
 import AddCircleIcon from '@mui/icons-material/AddCircle';
 import DeleteIcon from '@mui/icons-material/Delete';
+import DownloadIcon from '@mui/icons-material/Download';
 import EditIcon from '@mui/icons-material/Edit';
 import type { SelectChangeEvent } from '@mui/material';
 import { FormControl, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
@@ -22,6 +23,7 @@ import { useUsers, useUserRequests } from 'src/services/useUsers';
 import { useVillages } from 'src/services/useVillages';
 import { defaultContainedButtonStyle } from 'src/styles/variables.const';
 import { countryToFlag } from 'src/utils';
+import { exportJsonToCsv } from 'src/utils/csv-export';
 import { userTypeNames } from 'types/user.type';
 import type { Village } from 'types/village.type';
 
@@ -64,6 +66,35 @@ const Users = () => {
     setUserTypeFilter(e.target.value);
   }, []);
 
+  const handleExportToCSV = () => {
+    if (filteredUsers.length < 1) return;
+
+    const datasToExport = filteredUsers.map((user) => {
+      return {
+        firstname: user.firstname,
+        lastname: user.lastname,
+        email: user.email,
+        school: user.school ? user.school : 'Non renseignee',
+        village: user.villageId ? villageMap[user.villageId]?.name : 'Non renseigne',
+        country: user.country ? user.country.name : 'Non renseigne',
+      };
+    });
+
+    const headers = ['Prenom', 'Nom', 'Email', 'Ecole', 'Village', 'Pays'];
+
+    let userLabel = 'liste-utilisateurs-';
+
+    for (const [key, value] of Object.entries(userTypeNames)) {
+      if (key === userTypeFilter) {
+        userLabel = 'liste-' + value.toLowerCase().replaceAll(' ', '-') + 's-';
+      }
+    }
+    const todayDate = new Date().toLocaleDateString('fr-FR').replaceAll('/', '-');
+    const fileName = userLabel + todayDate;
+
+    exportJsonToCsv(fileName, headers, datasToExport);
+  };
+
   const actions = (id: number) => (
     <>
       <Tooltip title="Modifier">
@@ -157,14 +188,27 @@ const Users = () => {
               ))}
             </Select>
           </FormControl>
+          <Button
+            color="inherit"
+            sx={defaultContainedButtonStyle}
+            component="a"
+            onClick={handleExportToCSV}
+            variant="contained"
+            style={{ flexShrink: 0, marginLeft: '1rem' }}
+            startIcon={<DownloadIcon />}
+            disabled={filteredUsers.length === 0}
+          >
+            Exporter en CSV
+          </Button>
         </div>
         <AdminTable
           emptyPlaceholder="Vous n'avez pas encore d'utilisateur !"
           data={filteredUsers.map((u) =>
             u.country
               ? {
                   id: u.id,
-                  pseudo: u.pseudo,
+                  firstname: u.firstname,
+                  lastname: u.lastname,
                   email: u.email,
                   school: u.school || <span style={{ color: 'grey' }}>Non renseignée</span>,
                   country: `${countryToFlag(u.country?.isoCode)} ${u.country?.name}`,
@@ -177,7 +221,8 @@ const Users = () => {
                 }
               : {
                   id: u.id,
-                  pseudo: u.pseudo,
+                  firstname: u.firstname,
+                  lastname: u.lastname,
                   email: u.email,
                   school: u.school || <span style={{ color: 'grey' }}>Non renseignée</span>,
                   village: u.villageId ? (
@@ -189,7 +234,8 @@ const Users = () => {
                 },
           )}
           columns={[
-            { key: 'pseudo', label: 'Pseudo', sortable: true },
+            { key: 'firstname', label: 'Prénom', sortable: true },
+            { key: 'lastname', label: 'Nom', sortable: true },
             { key: 'email', label: 'Email', sortable: true },
             { key: 'school', label: 'École', sortable: true },
             { key: 'village', label: 'Village', sortable: true },