Merge pull request #253 from dataforgoodfr/feat/D4G-255-improve-form-…

…validation-page Feat/d4 g 255 improve form validation page
dataforgoodfr · Mar 3, 2023 · 242612e · 242612e
2 parents 74cbf3e + 0552a7a
commit 242612e
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 53 deletions.
diff --git a/packages/client/src/AuthenticatedApp.tsx b/packages/client/src/AuthenticatedApp.tsx
@@ -23,6 +23,7 @@ import {
 } from "./modules/play/Personalization";
 import { PersonalizationForm } from "./modules/play/Personalization/PersonalizationForm";
 import { PersonalizationPredefinedPersona } from "./modules/play/Personalization/PersonalizationPredefinedPersona";
+import { FormVerification } from "./modules/administration/Games/Game/FormVerification";
 
 export { AuthenticatedApp };
 
@@ -36,6 +37,10 @@ function AuthenticatedApp() {
       <Route path="administration" element={<AdministrationLayout />}>
         <Route path="games" element={<Games />} />
         <Route path="games/:id" element={<Game />} />
+        <Route
+          path="games/:id/form-verification"
+          element={<FormVerification />}
+        />
         <Route path="admins" element={<Admins />} />
         <Route path="players" element={<Players />} />
         <Route path="teachers" element={<Teachers />} />

diff --git a/packages/client/src/modules/administration/Games/Game/FormVerification.styles.tsx b/packages/client/src/modules/administration/Games/Game/FormVerification.styles.tsx
@@ -1,23 +1,7 @@
-import { Box, Container, ContainerProps } from "@mui/material";
+import { Box } from "@mui/material";
 import { styled } from "@mui/material/styles";
 
-export { VerificationContainer, DataGridBox };
-
-const VerificationContainer = styled(
-  (props: ContainerProps & { show: boolean }) => <Container {...props} />
-)(({ theme, show }) => ({
-  maxWidth: "none !important",
-  position: "fixed",
-  zIndex: 1250,
-  top: 0,
-  left: 0,
-  paddingTop: "100px",
-  paddingLeft: "30px",
-  width: "100%",
-  height: "100%",
-  backdropFilter: "blur(10px)",
-  display: `${show ? "block" : "none"}`,
-}));
+export { DataGridBox };
 
 const DataGridBox = styled(Box)(({ theme }) => ({
   height: 500,

diff --git a/packages/client/src/modules/administration/Games/Game/FormVerification.tsx b/packages/client/src/modules/administration/Games/Game/FormVerification.tsx
@@ -1,4 +1,4 @@
-import { Grid, Button, Typography, useTheme } from "@mui/material";
+import { Grid, Button, Typography, useTheme, Box } from "@mui/material";
 import { DataGrid, GridCellParams, GridColumns } from "@mui/x-data-grid";
 import axios from "axios";
 import { useState } from "react";
@@ -17,7 +17,6 @@ import {
   PersoForm,
   showerTimes,
 } from "../../../play/Personalization/models/form";
-import { VerificationContainer } from "./FormVerification.styles";
 import { DataGridBox } from "./FormVerification.styles";
 import { usePlayers } from "./services/queries";
 import {
@@ -34,13 +33,7 @@ import { t } from "../../../translations";
 
 export { FormVerification };
 
-function FormVerification({
-  openFormValidation,
-  setOpenFormValidation,
-}: {
-  openFormValidation: boolean;
-  setOpenFormValidation: (value: boolean) => void;
-}): JSX.Element {
+function FormVerification(): JSX.Element {
   const [updatedRows, setUpdatedRows] = useState<FormattedRow[]>([]);
   const gameId = useGameId();
   const theme = useTheme();
@@ -79,7 +72,6 @@ function FormVerification({
       onSuccess: (response: any, variables: { draft: boolean }) => {
         if (!variables.draft) {
           validateForms.mutate();
-          setOpenFormValidation(false);
         }
         setUpdatedRows([]);
         queryClient.invalidateQueries(`/api/games/${gameId}/players`);
@@ -132,11 +124,15 @@ function FormVerification({
     });
 
   return (
-    <VerificationContainer show={openFormValidation}>
+    <Box>
       {updatePersonalizations.isError && (
         <ErrorAlert message={updatePersonalizations.error.message} />
       )}
       {updatePersonalizations.isSuccess && <SuccessAlert />}
+
+      <Typography variant="h3" sx={{ mb: 2 }}>
+        Vérification des formulaires
+      </Typography>
       <DataGridBox sx={{ backgroundColor: "white", color: "black" }}>
         <DataGrid
           sx={{ textAlign: "center" }}
@@ -161,15 +157,10 @@ function FormVerification({
           }}
         />
       </DataGridBox>
-      <Grid
-        container
-        alignItems="center"
-        sx={{ pb: 4, pt: 4, backgroundColor: "white" }}
-      >
+      <Grid container alignItems="center" sx={{ pb: 4, pt: 4 }}>
         <Button
           onClick={() => {
             setUpdatedRows([]);
-            setOpenFormValidation(false);
           }}
           variant="contained"
           sx={{ marginRight: "auto", marginLeft: "auto", height: "100%" }}
@@ -195,12 +186,11 @@ function FormVerification({
         container
         direction="column"
         alignItems="left"
-        sx={{ mb: 4, mt: 4, backgroundColor: "white" }}
+        sx={{ mb: 4, mt: 4 }}
       >
         <Typography
           sx={{
             mb: 2,
-            backgroundColor: "white",
             color: theme.palette.primary.main,
           }}
         >
@@ -213,7 +203,6 @@ function FormVerification({
         <Typography
           sx={{
             mb: 2,
-            backgroundColor: "white",
             color: theme.palette.primary.main,
           }}
         >
@@ -224,7 +213,7 @@ function FormVerification({
           {t("form.validation.heating")}
         </Typography>
       </Grid>
-    </VerificationContainer>
+    </Box>
   );
 }
 

diff --git a/packages/client/src/modules/administration/Games/Game/GamePlayers.tsx b/packages/client/src/modules/administration/Games/Game/GamePlayers.tsx
@@ -15,6 +15,7 @@ import {
 } from "@mui/x-data-grid";
 import DeleteIcon from "@mui/icons-material/Delete";
 import axios from "axios";
+import { useNavigate } from "react-router-dom";
 import { useMutation, useQueryClient } from "react-query";
 import { IGame } from "../../../../utils/types";
 import { useState } from "react";
@@ -28,13 +29,11 @@ import { useGameId } from "./utils";
 import { hasGameStarted } from "../utils";
 import { Icon } from "../../../common/components/Icon";
 import { DataGridBox } from "./GameTeams.styles";
-import { FormVerification } from "./FormVerification";
 
 export { GamePlayers };
 
 function GamePlayers({ game }: { game: IGame }): JSX.Element {
-  const [openFormValidation, setOpenFormValidation] = useState<boolean>(false);
-
+  const navigate = useNavigate();
   const gameId = useGameId();
 
   const playersQuery = usePlayers(gameId);
@@ -107,7 +106,9 @@ function GamePlayers({ game }: { game: IGame }): JSX.Element {
               } les formulaires`}
             </Button>
             <Button
-              onClick={() => setOpenFormValidation(true)}
+              onClick={() =>
+                navigate(`/administration/games/${gameId}/form-verification`)
+              }
               variant="contained"
               sx={{ marginRight: "auto", ml: 2, height: "80%" }}
             >
@@ -135,10 +136,6 @@ function GamePlayers({ game }: { game: IGame }): JSX.Element {
           }}
         />
       </DataGridBox>
-      <FormVerification
-        openFormValidation={openFormValidation}
-        setOpenFormValidation={setOpenFormValidation}
-      />
     </Grid>
   );
 }

diff --git a/packages/client/src/modules/administration/Games/Game/GameTeams.tsx b/packages/client/src/modules/administration/Games/Game/GameTeams.tsx
@@ -35,7 +35,7 @@ function GameTeams({ game }: { game: IGame }): JSX.Element {
   const gameId = useGameId();
   const { t } = useTranslation();
 
-  const [teamsQuantity, setTeamsQuantity] = useState<number>();
+  const [teamsQuantity, setTeamsQuantity] = useState<number>(TEAM_COUNT_MIN);
 
   const playersQuery = usePlayers(gameId);
   const teamQueryPath = getTeamQueryPath(gameId);

diff --git a/packages/client/src/modules/administration/Layout/Layout.tsx b/packages/client/src/modules/administration/Layout/Layout.tsx
@@ -7,7 +7,7 @@ import ListSubheader from "@mui/material/ListSubheader";
 import Typography from "@mui/material/Typography";
 import Divider from "@mui/material/Divider";
 import Container from "@mui/material/Container";
-import { Link, Navigate, Outlet, useMatch } from "react-router-dom";
+import { Link, Navigate, Outlet, PathMatch, useMatch } from "react-router-dom";
 import GamesIcon from "@mui/icons-material/Games";
 import PersonIcon from "@mui/icons-material/Person";
 import SchoolIcon from "@mui/icons-material/School";
@@ -36,7 +36,13 @@ export { Layout };
 function Layout() {
   const { permissions } = useAuth();
   const theme = useTheme();
-  const isGameAdministrationRoute = useMatch(`administration/games/:gameId/*`);
+  const routeMatch = useMatch(`administration/*`);
+
+  const isNestedRoute = useMemo(() => {
+    return (
+      routeMatch && routeMatch?.pathname.split("/").filter(Boolean).length > 2
+    );
+  }, [routeMatch]);
 
   if (!permissions.canAccessAdminPanel) {
     return <Navigate to="/" />;
@@ -50,7 +56,9 @@ function Layout() {
             pr: "24px", // keep right padding when drawer closed
           }}
         >
-          {isGameAdministrationRoute ? renderBackButton() : <></>}
+          {isNestedRoute ? (
+            <BackButton to={buildPathToPreviousPage(routeMatch)} />
+          ) : null}
           <Typography
             component="h1"
             variant="h6"
@@ -109,10 +117,14 @@ function Layout() {
   );
 }
 
-function renderBackButton(): JSX.Element {
+function buildPathToPreviousPage(match: PathMatch | null) {
+  return match?.pathname.split("/").slice(0, -1).join("/") || "";
+}
+
+function BackButton({ to }: { to: string }): JSX.Element {
   return (
     <>
-      <Button component={Link} to="/administration/games" sx={{ mr: 2 }}>
+      <Button component={Link} to={to} sx={{ mr: 2 }}>
         <ArrowBackIosNewIcon sx={{ height: "1rem" }} /> Retour
       </Button>
       <Divider