fix(FormVerification): Turn modal into page

dataforgoodfr · Mar 2, 2023 · a8f596b · a8f596b
1 parent 74cbf3e
commit a8f596b
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 47 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>
   );
 }