fix(code): clean-up de parties du css and extraction de certaines log…

…iques métiers dans des fichiers séparée (#929) * fix(code): clean-up de parties du css and extraction de certaines logiques métiers dans des fichiers séparée * Fix references * make answer editable * feedbacks from review * fix tests
SocialGouv · Jun 9, 2023 · 5fb6add · 5fb6add
1 parent fc06279
commit 5fb6add
Show file tree

Hide file tree

Showing 20 changed files with 388 additions and 342 deletions.
diff --git a/targets/frontend/src/components/contributions/answers/Answer.query.ts b/targets/frontend/src/components/contributions/answers/Answer.query.ts
@@ -1,8 +1,9 @@
 import { useQuery } from "urql";
 
-import { Answer, Status } from "../type";
+import { Answer, AnswerStatus, Status } from "../type";
+import { initStatus } from "../status/utils";
 
-export const contributionAnswerQuery = `
+const contributionAnswerQuery = `
 query contribution_answer($id: uuid) {
   contribution_answers(where: {id: {_eq: $id}}) {
     id
@@ -68,7 +69,7 @@ type QueryProps = {
   id: string;
 };
 
-type AnswerWithStatus = Answer & { status: Status };
+type AnswerWithStatus = Answer & { status: AnswerStatus };
 
 type QueryResult = {
   contribution_answers: AnswerWithStatus[];
@@ -91,10 +92,10 @@ export const useContributionAnswerQuery = ({
   }
   const answer = result.data?.contribution_answers[0];
   if (!answer) {
-    return answer;
+    return;
   }
   return {
     ...answer,
-    status: answer.statuses?.[0]?.status ?? "TODO",
+    status: initStatus(answer),
   };
 };
diff --git a/targets/frontend/src/components/contributions/answers/Answer.tsx b/targets/frontend/src/components/contributions/answers/Answer.tsx
@@ -16,8 +16,8 @@ import { useUser } from "src/hooks/useUser";
 
 import { FormEditionField, FormRadioGroup } from "../../forms";
 import { StatusContainer } from "../status";
-import { statusesMapping } from "../status/data";
 import {
+  Answer,
   CdtnReference,
   KaliReference,
   LegiReference,
@@ -33,20 +33,37 @@ import {
   LegiReferenceInput,
   OtherReferenceInput,
 } from "./references";
+import { statusesMapping } from "../status/data";
+import {
+  defaultReferences,
+  formatCdtnReferences,
+  formatKaliReferences,
+  formatLegiReferences,
+  formatOtherReferences,
+} from "./answerReferences";
+import { getNextStatus, getPrimaryButtonLabel } from "../status/utils";
 
 export type ContributionsAnswerProps = {
   id: string;
 };
 
-type AnswerForm = {
+export type AnswerForm = {
   otherAnswer?: string;
   content?: string;
-  kaliReferences?: KaliReference[];
-  legiReferences?: LegiReference[];
-  otherReferences?: OtherReference[];
-  cdtnReferences?: CdtnReference[];
+  kaliReferences: KaliReference[];
+  legiReferences: LegiReference[];
+  otherReferences: OtherReference[];
+  cdtnReferences: CdtnReference[];
 };
 
+const isNotEditable = (answer: Answer | undefined) =>
+  answer?.status.status !== "REDACTING" &&
+  answer?.status.status !== "TODO" &&
+  answer?.status.status !== "VALIDATING";
+
+const isCodeDuTravail = (answer: Answer): boolean =>
+  answer.agreement.id === "0000";
+
 export const ContributionsAnswer = ({
   id,
 }: ContributionsAnswerProps): JSX.Element => {
@@ -55,34 +72,28 @@ export const ContributionsAnswer = ({
   const [status, setStatus] = useState<Status>("TODO");
   useEffect(() => {
     if (answer?.status) {
-      setStatus(answer.status);
+      setStatus(answer.status.status);
     }
   }, [answer]);
   const { control, handleSubmit, watch } = useForm<AnswerForm>({
     defaultValues: {
       content: answer?.content ?? "",
       otherAnswer: answer?.otherAnswer ?? "ANSWER",
-      kaliReferences:
-        answer?.kali_references?.map((item) => item.kali_article) ?? [],
-      legiReferences:
-        answer?.legi_references?.map((item) => item.legi_article) ?? [],
-      cdtnReferences:
-        answer?.cdtn_references?.map((item) => item.document) ?? [],
-      otherReferences: answer?.other_references ?? [],
+      ...defaultReferences(answer),
     },
   });
   const otherAnswer = watch("otherAnswer", answer?.otherAnswer);
   const updateAnswer = useContributionAnswerUpdateMutation();
   const [snack, setSnack] = useState<{
     open: boolean;
     severity?: AlertColor;
-    text?: string;
+    message?: string;
   }>({
     open: false,
   });
   const onSubmit = async (data: AnswerForm) => {
     try {
-      if (!answer?.id) {
+      if (!answer || !answer.id) {
         throw new Error("Id non définit");
       }
 
@@ -92,35 +103,18 @@ export const ContributionsAnswer = ({
         otherAnswer: data.otherAnswer,
         status,
         userId: user?.id,
-        kali_references:
-          data.kaliReferences?.map((ref) => ({
-            answer_id: answer.id,
-            article_id: ref.id,
-          })) ?? [],
-        legi_references:
-          data.legiReferences?.map((ref) => ({
-            answer_id: answer.id,
-            article_id: ref.id,
-          })) ?? [],
-        cdtn_references:
-          data.cdtnReferences?.map((ref) => ({
-            answer_id: answer.id,
-            cdtn_id: ref.cdtn_id,
-          })) ?? [],
-        other_references:
-          data.otherReferences?.map((ref) => ({
-            answer_id: answer.id,
-            label: ref.label,
-            url: ref.url,
-          })) ?? [],
+        kali_references: formatKaliReferences(answer, data),
+        legi_references: formatLegiReferences(answer, data),
+        cdtn_references: formatCdtnReferences(answer, data),
+        other_references: formatOtherReferences(answer, data),
       });
       setSnack({
         open: true,
         severity: "success",
-        text: "La réponse a été modifiée",
+        message: "La réponse a été modifiée",
       });
     } catch (e: any) {
-      setSnack({ open: true, severity: "error", text: e.message });
+      setSnack({ open: true, severity: "error", message: e.message });
     }
   };
   return (
@@ -135,12 +129,11 @@ export const ContributionsAnswer = ({
             <div>{answer?.agreement?.id}</div>
           </Breadcrumbs>
         </Grid>
-        <Grid xs={2} style={{ color: statusesMapping[status].color }}>
-          <StatusContainer
-            status={answer?.status}
-            user={answer?.statuses?.[0]?.user?.name}
-          />
-        </Grid>
+        {answer?.status && (
+          <Grid xs={2} style={{ color: statusesMapping[status].color }}>
+            <StatusContainer status={answer.status} />
+          </Grid>
+        )}
       </Grid>
       <h2>{answer?.agreement?.name}</h2>
       <Box sx={{ display: "flex", flexDirection: "row" }}>
@@ -151,118 +144,94 @@ export const ContributionsAnswer = ({
                 <FormEditionField
                   label="Réponse"
                   name="content"
-                  disabled={
-                    answer?.status !== "REDACTING" && answer?.status !== "TODO"
-                  }
+                  disabled={isNotEditable(answer)}
                   control={control}
                   rules={{ required: otherAnswer === "ANSWER" }}
                 />
               </FormControl>
-              <FormControl>
-                <FormRadioGroup
-                  label="Type de réponse"
-                  name="otherAnswer"
-                  control={control}
-                  disabled={
-                    answer?.status !== "REDACTING" && answer?.status !== "TODO"
-                  }
-                  options={[
-                    {
-                      label: "Afficher la réponse",
-                      value: "ANSWER",
-                    },
-                    {
-                      label: "La convention collective ne prévoit rien",
-                      value: "NOTHING",
-                    },
-                    {
-                      label: "Nous n'avons pas la réponse",
-                      value: "UNKNOWN",
-                    },
-                  ]}
-                />
-              </FormControl>
-              {answer?.agreement.id && (
+              {answer && !isCodeDuTravail(answer) && (
+                <FormControl>
+                  <FormRadioGroup
+                    name="otherAnswer"
+                    label="Type de réponse"
+                    control={control}
+                    disabled={isNotEditable(answer)}
+                    options={[
+                      {
+                        label: "Afficher la réponse",
+                        value: "ANSWER",
+                      },
+                      {
+                        label: "La convention collective ne prévoit rien",
+                        value: "NOTHING",
+                      },
+                      {
+                        label: "Nous n'avons pas la réponse",
+                        value: "UNKNOWN",
+                      },
+                    ]}
+                  />
+                </FormControl>
+              )}
+              {answer && !isCodeDuTravail(answer) && (
                 <KaliReferenceInput
                   name="kaliReferences"
-                  idcc={answer?.agreement.id}
+                  idcc={answer.agreement.id}
                   control={control}
-                  disabled={
-                    answer?.status !== "REDACTING" && answer?.status !== "TODO"
-                  }
+                  disabled={isNotEditable(answer)}
                 />
               )}
               <LegiReferenceInput
                 name="legiReferences"
                 control={control}
-                disabled={
-                  answer?.status !== "REDACTING" && answer?.status !== "TODO"
-                }
+                disabled={isNotEditable(answer)}
               />
               <OtherReferenceInput
                 name="otherReferences"
                 control={control}
-                disabled={
-                  answer?.status !== "REDACTING" && answer?.status !== "TODO"
-                }
+                disabled={isNotEditable(answer)}
               />
               <CdtnReferenceInput
                 name="cdtnReferences"
                 control={control}
-                disabled={
-                  answer?.status !== "REDACTING" && answer?.status !== "TODO"
-                }
+                disabled={isNotEditable(answer)}
               />
               <Stack
                 direction="row"
-                alignItems="end"
                 justifyContent="end"
                 spacing={2}
                 padding={2}
               >
                 <Button
-                  variant="contained"
+                  variant="outlined"
                   type="submit"
                   onClick={() => setStatus("REDACTING")}
+                  disabled={status === "TODO" || status === "REDACTING"}
+                >
+                  Remettre en rédaction
+                </Button>
+                <Button
+                  variant="text"
+                  type="submit"
+                  disabled={isNotEditable(answer)}
+                  onClick={() => {
+                    if (status === "TODO") {
+                      setStatus("REDACTING");
+                    }
+                  }}
                 >
-                  {answer?.status === "TODO" && "Sauvegarder"}
-                  {answer?.status === "REDACTING" && "Sauvegarder"}
-                  {answer?.status === "REDACTED" && "Modifier"}
-                  {answer?.status === "VALIDATING" && "Refuser"}
-                  {answer?.status === "VALIDATED" && "Modifier"}
-                  {answer?.status === "PUBLISHED" && "Modifier"}
+                  Sauvegarder
                 </Button>
                 <Button
                   variant="contained"
                   color="success"
                   type="submit"
-                  style={{
-                    display:
-                      answer?.status === "PUBLISHED" ? "none" : "inherit",
-                  }}
                   onClick={() => {
-                    switch (answer?.status) {
-                      case "TODO":
-                      case "REDACTING":
-                        setStatus("REDACTED");
-                        break;
-                      case "REDACTED":
-                        setStatus("VALIDATING");
-                        break;
-                      case "VALIDATING":
-                        setStatus("VALIDATED");
-                        break;
-                      case "VALIDATED":
-                        setStatus("PUBLISHED");
-                        break;
-                    }
+                    setStatus(getNextStatus(status));
                   }}
+                  disabled={status === "PUBLISHED"}
                 >
-                  {answer?.status === "TODO" && "Soumettre"}
-                  {answer?.status === "REDACTING" && "Soumettre"}
-                  {answer?.status === "REDACTED" && "Commencer Validation"}
-                  {answer?.status === "VALIDATING" && "Valider"}
-                  {answer?.status === "VALIDATED" && "Publier"}
+                  {getPrimaryButtonLabel(status)}
                 </Button>
               </Stack>
             </Stack>
@@ -277,7 +246,7 @@ export const ContributionsAnswer = ({
                 onClose={() => setSnack({ open: false })}
                 severity={snack.severity}
               >
-                {snack?.text}
+                {snack?.message}
               </Alert>
             </Snackbar>
           </form>

diff --git a/targets/frontend/src/components/contributions/answers/Comments.tsx b/targets/frontend/src/components/contributions/answers/Comments.tsx
@@ -38,7 +38,7 @@ export const Comments = (props: Props) => {
   const [snack, setSnack] = React.useState<{
     open: boolean;
     severity?: AlertColor;
-    text?: string;
+    message?: string;
   }>({
     open: false,
   });
@@ -77,11 +77,11 @@ export const Comments = (props: Props) => {
       setSnack({
         open: true,
         severity: "success",
-        text: "Le commentaire a été ajoutée",
+        message: "Le commentaire a été ajoutée",
       });
       resetField("content");
     } catch (e: any) {
-      setSnack({ open: true, severity: "error", text: e.message });
+      setSnack({ open: true, severity: "error", message: e.message });
     }
   };
 
@@ -139,7 +139,7 @@ export const Comments = (props: Props) => {
           severity={snack.severity}
           sx={{ width: "100%" }}
         >
-          {snack?.severity}
+          {snack?.message}
         </Alert>
       </Snackbar>
     </Box>