[VoteAg] improve results tab (#3139)

parti-renaissance · Nov 14, 2024 · 3168be6 · 3168be6
1 parent 1e30239
commit 3168be6
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 37 deletions.
diff --git a/src/components/Consultations/Components/ForecastStatistics.tsx b/src/components/Consultations/Components/ForecastStatistics.tsx
@@ -45,7 +45,7 @@ const ForecastStatistics = ({ designation }: { designation: Designation | Design
     return {
       count: voters.length,
       participants: participants,
-      participationRate: (participants * 100.0) / voters.length,
+      participationRate: ((participants * 100.0) / voters.length).toFixed(2),
     }
   }, [voters])
 
@@ -76,7 +76,7 @@ const ForecastStatistics = ({ designation }: { designation: Designation | Design
                   <TableCell>{adherentCount?.adherent || 0}</TableCell>
                   <TableCell>
                     <Typography>
-                      Adhérents à J-2, {format(designation.voteStartDate, 'HH')}h (ce chiffre varie jusqu’au{' '}
+                      Adhérents à J-2, {format(designation.voteStartDate, 'HH:mm')}h (ce chiffre varie jusqu’au{' '}
                       {format(sub(designation.voteStartDate, { days: 2 }), 'dd/MM/yyyy, HH:mm')})
                     </Typography>
                   </TableCell>

diff --git a/src/components/Consultations/Edit/FormComponent/MainForm.tsx b/src/components/Consultations/Edit/FormComponent/MainForm.tsx
@@ -1,4 +1,5 @@
 import {
+  Alert,
   Box,
   Button,
   Chip,
@@ -20,6 +21,7 @@ import Questions from '~/components/Consultations/Edit/FormComponent/Questions'
 import { Designation, DesignationType } from '~/domain/designation'
 import DateTimePicker from '~/components/Consultations/Edit/FormComponent/DateTimePicker'
 import { useEffect } from 'react'
+import { messages } from '~/components/Consultations/messages'
 
 type MainFormProps = {
   onSubmit: (data: DesignationType) => void
@@ -55,15 +57,13 @@ const MainForm = ({ apiErrors, onSubmit, designation }: MainFormProps) => {
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <Stack mt={4} spacing={5}>
-        <BlockForm
-          title={
-            designation.id
-              ? ''
-              : designation.isVote()
-                ? "1. Création d'un nouveau vote"
-                : "1. Création d'une nouvelle consultation"
-          }
-        >
+        {!designation.isFullyEditable && (
+          <Alert severity="info">
+            Vous ne pouvez plus modifier les paramètres {designation.isVote() ? 'du vote' : 'de la consultation'} car
+            vos adhérents ont déjà été notifiés.
+          </Alert>
+        )}
+        <BlockForm title={designation.id ? '' : messages[designation.type].step1}>
           <Controller
             control={control}
             name="customTitle"

diff --git a/src/components/Consultations/Show/Show.tsx b/src/components/Consultations/Show/Show.tsx
@@ -22,6 +22,7 @@ import Main from '~/components/Consultations/Show/Tabs/Main'
 import Participants from '~/components/shared/election/Participants'
 import Calendar from '~/components/Consultations/Components/Calendar'
 import Statistics from '~/components/Consultations/Show/Tabs/Statistics'
+import { OAUTH_HOST } from '~/shared/environments'
 
 const Show = () => {
   const { isMobile } = useCurrentDeviceType()
@@ -80,6 +81,16 @@ const Show = () => {
           button={
             !designation.isCanceled && (
               <Stack alignItems="center" direction="row" spacing={2}>
+                <Button
+                  startIcon={<Iconify icon={'eva:external-link-outline'} />}
+                  variant="contained"
+                  color="primary"
+                  href={`${OAUTH_HOST}/election-sas/${designation.id}`}
+                  target="_blank"
+                >
+                  Voir
+                </Button>
+
                 <Button
                   startIcon={<Iconify icon={'eva:edit-outline'} />}
                   variant="contained"
@@ -114,22 +125,22 @@ const Show = () => {
             <Stack>
               <Tabs value={selectedTab} onChange={(event, newValue) => setSelectedTab(newValue)}>
                 <Tab label="Détails" value="election-tab-0" />
-                <Tab label="Émargement" value="election-tab-1" />
-                <Tab label="Calendrier" value="election-tab-2" />
-                <Tab label="Statistiques / Résultats" value="election-tab-3" />
+                <Tab label="Calendrier" value="election-tab-1" />
+                <Tab label="Statistiques / Résultats" value="election-tab-2" />
+                <Tab label="Émargements" value="election-tab-3" />
               </Tabs>
 
               <TabPanel value="election-tab-0">
                 <Main designation={designation} />
               </TabPanel>
               <TabPanel value="election-tab-1">
-                <Participants designationId={designation.id} />
+                <Calendar designation={designation} />
               </TabPanel>
               <TabPanel value="election-tab-2">
-                <Calendar designation={designation} />
+                <Statistics designation={designation} />
               </TabPanel>
               <TabPanel value="election-tab-3">
-                <Statistics designation={designation} />
+                <Participants designationId={designation.id} />
               </TabPanel>
             </Stack>
           </TabContext>

diff --git a/src/components/Consultations/Show/Tabs/Results/FinalResults.tsx b/src/components/Consultations/Show/Tabs/Results/FinalResults.tsx
@@ -28,7 +28,7 @@ const FinalResults = ({ designation }: { designation: Designation }) => {
 
       {isFetching ? (
         <Loader isCenter />
-      ) : (
+      ) : rows.length ? (
         rows.map(row => (
           <Stack key={row.code} spacing={2}>
             <Typography variant="h6">{row.code}</Typography>
@@ -45,7 +45,10 @@ const FinalResults = ({ designation }: { designation: Designation }) => {
                 <TableBody>
                   {row.candidate_group_results.map(candidateGroupResult => (
                     <TableRow key={uuid()}>
-                      <TableCell>{candidateGroupResult.candidate_group.title}</TableCell>
+                      <TableCell>
+                        {candidateGroupResult.candidate_group.title}
+                        {candidateGroupResult.candidate_group.elected && ' ⭐'}
+                      </TableCell>
                       <TableCell>{candidateGroupResult.total}</TableCell>
                       <TableCell>{candidateGroupResult.rate} %</TableCell>
                     </TableRow>
@@ -60,6 +63,8 @@ const FinalResults = ({ designation }: { designation: Designation }) => {
             </TableContainer>
           </Stack>
         ))
+      ) : (
+        <Typography>Les résultats ne sont pas encore prêts</Typography>
       )}
     </>
   )

diff --git a/src/components/shared/election/Participants.jsx b/src/components/shared/election/Participants.jsx
@@ -79,23 +79,21 @@ const Participants = ({ designationId }) => {
   return (
     <Box>
       <Paper sx={{ borderRadius: 3 }}>
-        {sortedVoters.length > 0 && (
-          <Box sx={{ mb: 1.5, p: 2, borderBottom: '1px solid', borderBottomColor: 'colors.gray.200' }}>
-            <UIInputLabel>Rechercher par nom</UIInputLabel>
-            <Input
-              name="search"
-              onChange={event =>
-                setPageConfig(prevState => ({
-                  ...prevState,
-                  search: event.target.value,
-                }))
-              }
-              value={pageConfig.search}
-              autoFocus
-              sx={{ maxWidth: '32rem' }}
-            />
-          </Box>
-        )}
+        <Box sx={{ mb: 1.5, p: 2, borderBottom: '1px solid', borderBottomColor: 'colors.gray.200' }}>
+          <UIInputLabel>Rechercher par nom</UIInputLabel>
+          <Input
+            name="search"
+            onChange={event =>
+              setPageConfig(prevState => ({
+                ...prevState,
+                search: event.target.value,
+              }))
+            }
+            value={pageConfig.search}
+            autoFocus
+            sx={{ maxWidth: '32rem' }}
+          />
+        </Box>
         <TableContainer sx={{ borderRadius: 3 }}>
           <Table sx={{ borderCollapse: 'separate' }} stickyHeader>
             <TableHead>
@@ -172,7 +170,7 @@ const Participants = ({ designationId }) => {
                 <TableRow>
                   <TableCell colSpan={3} align={'center'}>
                     <Typography sx={{ color: 'colors.gray.500' }}>Aucun élément</Typography>
-                  </TableCell>{' '}
+                  </TableCell>
                 </TableRow>
               )}
             </TableBody>