feat(contributions): edit references labels (#935)

Co-authored-by: Martial Maillot <martial.maillot@gmail.com>
SocialGouv · Jun 12, 2023 · ad63b82 · ad63b82
1 parent f83dd0f
commit ad63b82
Show file tree

Hide file tree

Showing 31 changed files with 224 additions and 81 deletions.
diff --git a/targets/frontend/src/components/contributions/answers/Answer.tsx b/targets/frontend/src/components/contributions/answers/Answer.tsx
@@ -9,7 +9,6 @@ import {
   Snackbar,
   Stack,
 } from "@mui/material";
-import Link from "next/link";
 import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { useUser } from "src/hooks/useUser";
@@ -24,8 +23,8 @@ import {
   OtherReference,
   Status,
 } from "../type";
-import { useContributionAnswerUpdateMutation } from "./Answer.mutation";
-import { useContributionAnswerQuery } from "./Answer.query";
+import { useContributionAnswerUpdateMutation } from "./answer.mutation";
+import { useContributionAnswerQuery } from "./answer.query";
 import { Comments } from "./Comments";
 import {
   CdtnReferenceInput,
@@ -42,6 +41,7 @@ import {
   formatOtherReferences,
 } from "./answerReferences";
 import { getNextStatus, getPrimaryButtonLabel } from "../status/utils";
+import { SimpleLink } from "../../utils/SimpleLink";
 
 export type ContributionsAnswerProps = {
   id: string;
@@ -122,10 +122,12 @@ export const ContributionsAnswer = ({
       <Grid container>
         <Grid xs={10}>
           <Breadcrumbs aria-label="breadcrumb">
-            <Link href={"/contributions"}>Contributions</Link>
-            <Link href={`/contributions/questions/${answer?.question.id}`}>
+            <SimpleLink href={"/contributions"}>Contributions</SimpleLink>
+            <SimpleLink
+              href={`/contributions/questions/${answer?.question.id}`}
+            >
               {answer?.question?.content}
-            </Link>
+            </SimpleLink>
             <div>{answer?.agreement?.id}</div>
           </Breadcrumbs>
         </Grid>

diff --git a/targets/frontend/src/components/contributions/answers/Comments.tsx b/targets/frontend/src/components/contributions/answers/Comments.tsx
@@ -14,7 +14,7 @@ import { useUser } from "src/hooks/useUser";
 
 import { Comments as AnswerComments } from "../type";
 import { Comment } from "./Comment";
-import { MutationProps, useCommentsInsert } from "./Comments.mutation";
+import { MutationProps, useCommentsInsert } from "./comments.mutation";
 
 type Props = {
   answerId: string;

diff --git a/.../contributions/answers/Answer.mutation.ts → .../contributions/answers/answer.mutation.ts b/.../contributions/answers/Answer.mutation.ts → .../contributions/answers/answer.mutation.ts
@@ -41,6 +41,7 @@ mutation contributionAnswerUpdate($id: uuid!, $content: String, $otherAnswer: St
 type LegiKaliReference = {
   answer_id: string;
   article_id: string;
+  label?: string;
 };
 
 type CdtnDocument = {

diff --git a/...nts/contributions/answers/Answer.query.ts → ...nts/contributions/answers/answer.query.ts b/...nts/contributions/answers/Answer.query.ts → ...nts/contributions/answers/answer.query.ts
@@ -1,6 +1,6 @@
 import { useQuery } from "urql";
 
-import { Answer, AnswerStatus, Status } from "../type";
+import { Answer, AnswerStatus } from "../type";
 import { initStatus } from "../status/utils";
 
 const contributionAnswerQuery = `
@@ -35,17 +35,19 @@ query contribution_answer($id: uuid) {
       }
     }
     kali_references {
+     label
       kali_article {
         id
         path
         cid
         agreement_id
+        label
       }
     }
     legi_references {
       legi_article {
         id
-        index
+        label
         cid
       }
     }

diff --git a/targets/frontend/src/components/contributions/answers/answerReferences.ts b/targets/frontend/src/components/contributions/answers/answerReferences.ts
@@ -4,7 +4,9 @@ import { AnswerForm } from "./Answer";
 export const defaultReferences = (answer: Answer | undefined) => {
   return {
     kaliReferences:
-      answer?.kali_references?.map((item) => item.kali_article) ?? [],
+      answer?.kali_references?.map((item) => {
+        return Object.assign({}, item.kali_article, { label: item.label });
+      }) ?? [],
     legiReferences:
       answer?.legi_references?.map((item) => item.legi_article) ?? [],
     cdtnReferences: answer?.cdtn_references?.map((item) => item.document) ?? [],
@@ -13,37 +15,30 @@ export const defaultReferences = (answer: Answer | undefined) => {
 };
 
 export const formatKaliReferences = (answer: Answer, data: AnswerForm) => {
-  return (
-    data.kaliReferences.map((ref) => ({
-      answer_id: answer.id,
-      article_id: ref.id,
-    })) ?? []
-  );
+  return data.kaliReferences.map((ref) => ({
+    answer_id: answer.id,
+    article_id: ref.id,
+    label: ref.label,
+  }));
 };
 export const formatLegiReferences = (answer: Answer, data: AnswerForm) => {
-  return (
-    data.legiReferences.map((ref) => ({
-      answer_id: answer.id,
-      article_id: ref.id,
-    })) ?? []
-  );
+  return data.legiReferences.map((ref) => ({
+    answer_id: answer.id,
+    article_id: ref.id,
+  }));
 };
 
 export const formatCdtnReferences = (answer: Answer, data: AnswerForm) => {
-  return (
-    data.cdtnReferences.map((ref) => ({
-      answer_id: answer.id,
-      cdtn_id: ref.cdtn_id,
-    })) ?? []
-  );
+  return data.cdtnReferences.map((ref) => ({
+    answer_id: answer.id,
+    cdtn_id: ref.cdtn_id,
+  }));
 };
 
 export const formatOtherReferences = (answer: Answer, data: AnswerForm) => {
-  return (
-    data.otherReferences.map((ref) => ({
-      answer_id: answer.id,
-      label: ref.label,
-      url: ref.url,
-    })) ?? []
-  );
+  return data.otherReferences.map((ref) => ({
+    answer_id: answer.id,
+    label: ref.label,
+    url: ref.url,
+  }));
 };
diff --git a/...ontributions/answers/Comments.mutation.ts → ...ontributions/answers/comments.mutation.ts b/...ontributions/answers/Comments.mutation.ts → ...ontributions/answers/comments.mutation.ts
diff --git a/targets/frontend/src/components/contributions/answers/index.ts b/targets/frontend/src/components/contributions/answers/index.ts
@@ -1,3 +1,3 @@
 export * from "./Answer";
-export * from "./Answer.mutation";
-export * from "./Answer.query";
+export * from "./answer.mutation";
+export * from "./answer.query";
diff --git a/targets/frontend/src/components/contributions/answers/references/CdtnReferenceInput.tsx b/targets/frontend/src/components/contributions/answers/references/CdtnReferenceInput.tsx
@@ -1,7 +1,7 @@
 import { getRouteBySource } from "@socialgouv/cdtn-sources";
 import { Control } from "react-hook-form";
 import { CdtnReference } from "../../type";
-import { useContributionSearchCdtnReferencesQuery } from "./CdtnReferencesSearch.query";
+import { useContributionSearchCdtnReferencesQuery } from "./cdtnReferencesSearch.query";
 import { ReferenceInput } from "./ReferenceInput";
 
 type Props = {

diff --git a/targets/frontend/src/components/contributions/answers/references/KaliReferenceInput.tsx b/targets/frontend/src/components/contributions/answers/references/KaliReferenceInput.tsx
@@ -1,8 +1,81 @@
-import { ReactElement } from "react";
-import { Control } from "react-hook-form";
+import React, { ReactElement, useEffect, useState } from "react";
+import { Control, useFieldArray } from "react-hook-form";
+import { TitleBox } from "../../../forms/TitleBox";
+import {
+  Autocomplete,
+  CircularProgress,
+  Grid,
+  IconButton,
+  Stack,
+  TextField,
+} from "@mui/material";
+import { FormTextField } from "../../../forms";
+import DeleteIcon from "@mui/icons-material/Delete";
+import { useContributionSearchKaliReferenceQuery } from "./kaliReferencesSearch.query";
 import { KaliReference } from "../../type";
-import { useContributionSearchKaliReferenceQuery } from "./KaliReferencesSearch.query";
-import { ReferenceInput } from "./ReferenceInput";
+import { Result } from "./ReferenceInput";
+import { SimpleLink } from "../../../utils/SimpleLink";
+
+type KaliReferenceSearchProps = {
+  idcc: string;
+  disabled?: boolean;
+  onAdd: (item: KaliReference | null) => void;
+  fetcher: (
+    idcc: string
+  ) => (query: string | undefined) => Result<KaliReference>;
+};
+
+const KaliReferenceSearch = ({
+  fetcher,
+  idcc,
+  disabled,
+  onAdd,
+}: KaliReferenceSearchProps): React.ReactElement => {
+  const [value, setValue] = useState<KaliReference | null>(null);
+
+  const [query, setQuery] = useState<string | undefined>();
+  const { data, fetching, error } = fetcher(idcc)(query);
+  const [options, setOptions] = useState<readonly KaliReference[]>([]);
+
+  useEffect(() => {
+    setOptions(data);
+  }, [data]);
+
+  return (
+    <Autocomplete
+      disabled={disabled}
+      onChange={(event: any, newValue: KaliReference | null) => {
+        onAdd(newValue);
+        setValue(null);
+        setQuery("");
+      }}
+      value={value}
+      onInputChange={(event, newValue) => {
+        setQuery(newValue);
+      }}
+      options={options}
+      loading={fetching}
+      getOptionLabel={(item) => item.path}
+      renderInput={(params) => (
+        <TextField
+          {...params}
+          InputProps={{
+            ...params.InputProps,
+            endAdornment: (
+              <React.Fragment>
+                {fetching ? (
+                  <CircularProgress color="inherit" size={20} />
+                ) : null}
+                {params.InputProps.endAdornment}
+              </React.Fragment>
+            ),
+          }}
+          label="Nouvelle Référence"
+        />
+      )}
+    />
+  );
+};
 
 type Props = {
   name: string;
@@ -17,24 +90,58 @@ export const KaliReferenceInput = ({
   control,
   disabled = false,
 }: Props): ReactElement | null => {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name,
+  });
+
   return (
-    <ReferenceInput<KaliReference>
-      label={`Références liées à la convention collective ${idcc}`}
-      color="secondary"
-      name={name}
+    <TitleBox
+      title={`Références liées à la convention collective ${idcc}`}
       disabled={disabled}
-      control={control}
-      fetcher={useContributionSearchKaliReferenceQuery(idcc)}
-      isEqual={(option, value) => value.id === option.id}
-      getLabel={(item) => item.path}
-      onClick={(item) => {
-        const newWindow = window.open(
-          `https://www.legifrance.gouv.fr/conv_coll/id/${item.id}/?idConteneur=KALICONT000005635550`,
-          "_blank",
-          "noopener,noreferrer"
-        );
-        if (newWindow) newWindow.opener = null;
-      }}
-    />
+    >
+      <Stack spacing={2} mt={4}>
+        {fields.map((field, index) => {
+          const ref = fields[index] as KaliReference;
+          return (
+            <Grid container key={field.id}>
+              <Grid item xs={2} mr={2}>
+                <FormTextField
+                  name={`${name}.${index}.label`}
+                  label="Label"
+                  control={control}
+                  rules={{ required: true }}
+                  size="small"
+                  disabled={disabled}
+                  fullWidth
+                />
+              </Grid>
+              <Grid item xs={7}>
+                <SimpleLink
+                  target="_blank"
+                  href={`https://www.legifrance.gouv.fr/conv_coll/id/${ref.cid}/?idConteneur=KALICONT000005635550`}
+                >
+                  {ref.path}
+                </SimpleLink>
+              </Grid>
+              <Grid item xs={2}>
+                {!disabled && (
+                  <IconButton aria-label="delete" onClick={() => remove(index)}>
+                    <DeleteIcon />
+                  </IconButton>
+                )}
+              </Grid>
+            </Grid>
+          );
+        })}
+        {!disabled && (
+          <KaliReferenceSearch
+            fetcher={useContributionSearchKaliReferenceQuery}
+            idcc={idcc}
+            onAdd={append}
+          />
+        )}
+      </Stack>
+    </TitleBox>
   );
 };
diff --git a/targets/frontend/src/components/contributions/answers/references/LegiReferenceInput.tsx b/targets/frontend/src/components/contributions/answers/references/LegiReferenceInput.tsx
@@ -1,6 +1,6 @@
 import { Control } from "react-hook-form";
 import { LegiReference } from "../../type";
-import { useContributionSearchLegiReferenceQuery } from "./LegiReferencesSearch.query";
+import { useContributionSearchLegiReferenceQuery } from "./legiReferencesSearch.query";
 import { ReferenceInput } from "./ReferenceInput";
 
 type Props = {
@@ -22,7 +22,7 @@ export const LegiReferenceInput = ({
     control={control}
     fetcher={useContributionSearchLegiReferenceQuery}
     isEqual={(option, value) => value.id === option.id}
-    getLabel={(item) => item.index}
+    getLabel={(item) => item.label}
     onClick={(item) => {
       const newWindow = window.open(
         `https://www.legifrance.gouv.fr/codes/article_lc/${item.id}`,

diff --git a/.../references/CdtnReferencesSearch.query.ts → .../references/cdtnReferencesSearch.query.ts b/.../references/CdtnReferencesSearch.query.ts → .../references/cdtnReferencesSearch.query.ts
diff --git a/.../references/KaliReferencesSearch.query.ts → .../references/kaliReferencesSearch.query.ts b/.../references/KaliReferencesSearch.query.ts → .../references/kaliReferencesSearch.query.ts
@@ -10,6 +10,7 @@ query SearchKaliReferences($idcc: bpchar, $query: String) {
     cid
     id
     path
+    label
   }
 }
 `;

diff --git a/.../references/LegiReferencesSearch.query.ts → .../references/legiReferencesSearch.query.ts b/.../references/LegiReferencesSearch.query.ts → .../references/legiReferencesSearch.query.ts
@@ -5,10 +5,10 @@ import { Result } from "./ReferenceInput";
 
 export const contributionSearchLegiReferencesSearch = `
 query SearchLegiReferences($query: String) {
-  legi_articles(where: {index: {_ilike: $query}}) {
+  legi_articles(where: {label: {_ilike: $query}}) {
     cid
     id
-    index
+    label
   }
 }
 `;

diff --git a/targets/frontend/src/components/contributions/type.ts b/targets/frontend/src/components/contributions/type.ts
@@ -32,7 +32,7 @@ export type Answer = {
   content?: string;
   question: Omit<Question, "answers">;
   answer_comments: Comments[];
-  kali_references: { kali_article: KaliReference }[];
+  kali_references: { kali_article: KaliReference; label: string }[];
   legi_references: { legi_article: LegiReference }[];
   other_references: OtherReference[];
   cdtn_references: { document: CdtnReference }[];
@@ -58,13 +58,14 @@ export type KaliReference = {
   cid: string;
   id: string;
   path: string;
+  label: string;
   agreement_id: string;
 };
 
 export type LegiReference = {
   cid: string;
   id: string;
-  index: string;
+  label: string;
 };
 
 export type OtherReference = {