feat(form): Display form status and last modification time

dataforgoodfr · Jan 4, 2023 · 2c43674 · 2c43674
1 parent 463fcdc
commit 2c43674
Show file tree

Hide file tree

Showing 9 changed files with 77 additions and 3 deletions.
diff --git a/packages/client/src/modules/administration/Games/Game/Game.tsx b/packages/client/src/modules/administration/Games/Game/Game.tsx
@@ -35,7 +35,7 @@ function Game() {
     <>
       <Box sx={{ mt: 2 }}>
         <Typography variant="h3" sx={{ mb: 2 }}>
-          Atelier {game?.id}
+          Atelier {game?.code}
         </Typography>
         <GeneralInfo game={game} />
         <Players game={game} />

diff --git a/packages/client/src/modules/play/Personalization/PersonalizationForm.tsx b/packages/client/src/modules/play/Personalization/PersonalizationForm.tsx
@@ -1,12 +1,13 @@
 import { useEffect, useMemo, useState } from "react";
-import { Button, Grid, Tooltip, Typography } from "@mui/material";
+import { Button, Grid, Tooltip, Typography, useTheme } from "@mui/material";
 import { CustomContainer } from "./styles/personalization";
 import { BackArrow, BackArrowWithValidation } from "./common/BackArrow";
 import { QuestionLine, QuestionText } from "./styles/form";
 import { useForm } from "react-hook-form";
 import { PersoFormInputList, PersoFormNumberInput } from "./common/FormInputs";
 import {
   formSections,
+  FormStatus,
   formValues,
   PersoForm,
   persoFormInputs,
@@ -30,11 +31,13 @@ import { useQuery } from "react-query";
 import { IGame } from "../../../utils/types";
 import { ErrorAlert } from "../../alert";
 import { Accordion } from "../../common/components/Accordion";
+import { t } from "../../translations";
 
 export { PersonalizationForm };
 
 function PersonalizationForm() {
   const gameId = useGameId();
+  const theme = useTheme();
   const { profile, updateProfile } = usePlay();
 
   const query = useQuery(`/api/games/${gameId}`, () => {
@@ -96,6 +99,22 @@ function PersonalizationForm() {
     throw new Error("Unsupported question type");
   };
 
+  const formatLastUpdateDate = (date: Date) => {
+    if (!date) {
+      return "Aucune action enregistrée";
+    }
+
+    const dateObj = new Date(date);
+    const day = dateObj.toLocaleDateString([], {
+      dateStyle: "short",
+    });
+    const time = new Date(date).toLocaleTimeString([], {
+      timeStyle: "short",
+    });
+
+    return `le ${day} à ${time}`;
+  };
+
   const buildFormLine = (question: Question, display: boolean) => {
     return (
       <QuestionLine
@@ -174,6 +193,42 @@ function PersonalizationForm() {
         <ErrorAlert alertPosition="top" message={formBlockText} />
       )}
       <form className="flex flex-col" onSubmit={handleSubmit(onSubmit)}>
+        {profile && profile.status && (
+          <Grid
+            container
+            direction="column"
+            justifyContent="space-between"
+            sx={{
+              border: `3px solid ${theme.palette.primary.contrastText}`,
+              borderRadius: 2,
+              p: 3,
+              width: "fit-content",
+            }}
+          >
+            <Typography
+              sx={{
+                color: theme.palette.primary.contrastText,
+                fontSize: "20px",
+              }}
+            >
+              <Typography component="span" sx={{ textDecoration: "underline" }}>
+                État du formulaire:
+              </Typography>{" "}
+              {t(`form.status.${profile.status as FormStatus}`)}
+            </Typography>
+            <Typography
+              sx={{
+                color: theme.palette.primary.contrastText,
+                fontSize: "20px",
+              }}
+            >
+              <Typography component="span" sx={{ textDecoration: "underline" }}>
+                {t(`form.last-action.${profile.status as FormStatus}`)}:
+              </Typography>{" "}
+              {formatLastUpdateDate(profile.lastStatusUpdate)}
+            </Typography>
+          </Grid>
+        )}
         <Grid container direction="row" justifyContent="space-between">
           {!isDirty && (
             <BackArrow path={`/play/games/${gameId}/personalize/choice`} />

diff --git a/packages/client/src/modules/play/Personalization/models/form.tsx b/packages/client/src/modules/play/Personalization/models/form.tsx
@@ -1,6 +1,8 @@
 import { range } from "lodash";
 import { buildChoices } from "../utils/choices";
 
+export type FormStatus = "draft" | "pendingValidation" | "validated";
+
 export const persoFormInputs = [
   "numberAdults",
   "numberKids",

diff --git a/packages/client/src/modules/translations/fr.json b/packages/client/src/modules/translations/fr.json
@@ -96,5 +96,14 @@
   "step.production-2.name": "Étape 4",
   "step.production-2.title": "Choix de production 2",
   "step.production-3.name": "Étape 5",
-  "step.production-3.title": "Choix de production 3"
+  "step.production-3.title": "Choix de production 3",
+
+  "form.status.draft": "Brouillon",
+  "form.status.pendingValidation": "Transmis à l'animateur - En attente de validation",
+  "form.status.validated": "Validé",
+
+  "form.last-action.draft": "Dernière sauvegarde",
+  "form.last-action.pendingValidation": "Dernier envoi à l'animateur",
+  "form.last-action.validated": "Validation"
+
 }
diff --git a/packages/server/prisma/migrations/20230104093231_add_last_status_form_update/migration.sql b/packages/server/prisma/migrations/20230104093231_add_last_status_form_update/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Profile" ADD COLUMN     "lastStatusUpdate" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;
diff --git a/packages/server/prisma/schema.prisma b/packages/server/prisma/schema.prisma
@@ -74,6 +74,7 @@ model Profile {
   personalization   Personalization @relation(fields: [personalizationId], references: [id])
   personalizationId Int
   status            ProfileStatus   @default(draft)
+  lastStatusUpdate  DateTime        @default(now())
 }
 
 enum ProfileStatus {

diff --git a/packages/server/src/modules/players/services/index.ts b/packages/server/src/modules/players/services/index.ts
@@ -98,6 +98,7 @@ async function setDefaultProfiles(
       data: {
         personalizationId: defaultPersonalization.id,
         status: "validated",
+        lastStatusUpdate: new Date(),
       },
     });
     await model.update({
@@ -134,6 +135,7 @@ async function validateProfiles(gameId: number): Promise<void> {
         },
         data: {
           status: "validated",
+          lastStatusUpdate: new Date(),
         },
       });
     }

diff --git a/packages/server/src/modules/profiles/types/index.ts b/packages/server/src/modules/profiles/types/index.ts
@@ -7,4 +7,5 @@ interface Profile {
   personalization: Personalization;
   personalizationId: number;
   status: ProfileStatus;
+  lastStatusUpdate: Date;
 }
diff --git a/packages/server/src/modules/websocket/eventHandlers/updateProfileHandler.ts b/packages/server/src/modules/websocket/eventHandlers/updateProfileHandler.ts
@@ -80,12 +80,14 @@ function handleUpdateProfile(io: Server, socket: Socket) {
         await update(personalizationId, personalizationData);
         await profileServices.update(player?.profileId, {
           status: profileStatus as ProfileStatus,
+          lastStatusUpdate: new Date(),
         });
       } else {
         const personalization = await create(personalizationData);
         const profile = await profileServices.create({
           personalizationId: personalization.id,
           status: profileStatus as ProfileStatus,
+          lastStatusUpdate: new Date(),
         });
         await playersServices.update(gameId, userId, {
           profileId: profile?.id,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		-- AlterTable
		ALTER TABLE "Profile" ADD COLUMN "lastStatusUpdate" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP;