From 5fb6add6506877ab1cb5457a8f631225e56b6f31 Mon Sep 17 00:00:00 2001 From: Caroline <4971715+carolineBda@users.noreply.github.com> Date: Fri, 9 Jun 2023 09:55:44 +0200 Subject: [PATCH] =?UTF-8?q?fix(code):=20clean-up=20de=20parties=20du=20css?= =?UTF-8?q?=20and=20extraction=20de=20certaines=20logiques=20m=C3=A9tiers?= =?UTF-8?q?=20dans=20des=20fichiers=20s=C3=A9par=C3=A9e=20(#929)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .../contributions/answers/Answer.query.ts | 11 +- .../contributions/answers/Answer.tsx | 207 ++++++++---------- .../contributions/answers/Comments.tsx | 8 +- .../contributions/answers/answerReferences.ts | 49 +++++ .../answers/references/CdtnReferenceInput.tsx | 9 +- .../references/CdtnReferencesSearch.query.ts | 2 + .../references/OtherReferenceInput.tsx | 11 +- .../contributions/list/List.query.ts | 23 +- .../components/contributions/list/List.tsx | 9 +- .../src/components/contributions/list/Row.tsx | 150 ++++++------- .../questions/EditQuestionForm.tsx | 90 ++++---- .../contributions/status/Status.tsx | 16 +- .../contributions/status/StatusRecap.tsx | 16 +- .../components/contributions/status/data.tsx | 38 +++- .../components/contributions/status/utils.ts | 37 ++++ .../src/components/contributions/type.ts | 4 +- .../src/components/forms/RadioGroup/index.tsx | 44 ++-- .../contributions/answers/[answerId].tsx | 2 +- .../src/pages/contributions/index.tsx | 2 +- .../contributions/questions/[questionId].tsx | 2 +- 20 files changed, 388 insertions(+), 342 deletions(-) create mode 100644 targets/frontend/src/components/contributions/answers/answerReferences.ts create mode 100644 targets/frontend/src/components/contributions/status/utils.ts diff --git a/targets/frontend/src/components/contributions/answers/Answer.query.ts b/targets/frontend/src/components/contributions/answers/Answer.query.ts index adb8230b5..366cc0643 100644 --- 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 index 2747f53bc..cfcc6784f 100644 --- 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,20 +72,14 @@ export const ContributionsAnswer = ({ const [status, setStatus] = useState("TODO"); useEffect(() => { if (answer?.status) { - setStatus(answer.status); + setStatus(answer.status.status); } }, [answer]); const { control, handleSubmit, watch } = useForm({ 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); @@ -76,13 +87,13 @@ export const ContributionsAnswer = ({ 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 = ({
{answer?.agreement?.id}
- - - + {answer?.status && ( + + + + )}

{answer?.agreement?.name}

@@ -151,118 +144,94 @@ export const ContributionsAnswer = ({ - - - - {answer?.agreement.id && ( + {answer && !isCodeDuTravail(answer) && ( + + + + )} + {answer && !isCodeDuTravail(answer) && ( )} + @@ -277,7 +246,7 @@ export const ContributionsAnswer = ({ onClose={() => setSnack({ open: false })} severity={snack.severity} > - {snack?.text} + {snack?.message} diff --git a/targets/frontend/src/components/contributions/answers/Comments.tsx b/targets/frontend/src/components/contributions/answers/Comments.tsx index 2343b7c0e..bc487fef3 100644 --- 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} diff --git a/targets/frontend/src/components/contributions/answers/answerReferences.ts b/targets/frontend/src/components/contributions/answers/answerReferences.ts new file mode 100644 index 000000000..ab0dfc32c --- /dev/null +++ b/targets/frontend/src/components/contributions/answers/answerReferences.ts @@ -0,0 +1,49 @@ +import { Answer } from "../type"; +import { AnswerForm } from "./Answer"; + +export const defaultReferences = (answer: Answer | undefined) => { + return { + 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 ?? [], + }; +}; + +export const formatKaliReferences = (answer: Answer, data: AnswerForm) => { + return ( + data.kaliReferences.map((ref) => ({ + answer_id: answer.id, + article_id: ref.id, + })) ?? [] + ); +}; +export const formatLegiReferences = (answer: Answer, data: AnswerForm) => { + 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, + })) ?? [] + ); +}; + +export const formatOtherReferences = (answer: Answer, data: AnswerForm) => { + return ( + data.otherReferences.map((ref) => ({ + answer_id: answer.id, + label: ref.label, + url: ref.url, + })) ?? [] + ); +}; diff --git a/targets/frontend/src/components/contributions/answers/references/CdtnReferenceInput.tsx b/targets/frontend/src/components/contributions/answers/references/CdtnReferenceInput.tsx index f38f68ec6..3a16b8b50 100644 --- a/targets/frontend/src/components/contributions/answers/references/CdtnReferenceInput.tsx +++ b/targets/frontend/src/components/contributions/answers/references/CdtnReferenceInput.tsx @@ -1,3 +1,4 @@ +import { getRouteBySource } from "@socialgouv/cdtn-sources"; import { Control } from "react-hook-form"; import { CdtnReference } from "../../type"; import { useContributionSearchCdtnReferencesQuery } from "./CdtnReferencesSearch.query"; @@ -22,10 +23,14 @@ export const CdtnReferenceInput = ({ control={control} fetcher={useContributionSearchCdtnReferencesQuery} isEqual={(option, value) => value.cdtn_id === option.cdtn_id} - getLabel={(item) => `${item.source} > ${item.title}`} + getLabel={(item) => + `${getRouteBySource(item.source)} > ${item.title} (${item.slug})` + } onClick={(item) => { const newWindow = window.open( - `https://code.travail.gouv.fr/${item.source}/${item.slug}`, + `https://code.travail.gouv.fr/${getRouteBySource(item.source)}/${ + item.slug + }`, "_blank", "noopener,noreferrer" ); diff --git a/targets/frontend/src/components/contributions/answers/references/CdtnReferencesSearch.query.ts b/targets/frontend/src/components/contributions/answers/references/CdtnReferencesSearch.query.ts index 94079c58b..43dddea9f 100644 --- a/targets/frontend/src/components/contributions/answers/references/CdtnReferencesSearch.query.ts +++ b/targets/frontend/src/components/contributions/answers/references/CdtnReferencesSearch.query.ts @@ -31,6 +31,8 @@ export const useContributionSearchCdtnReferencesQuery = ( "page_fiche_ministere_travail", "information", "outils", + "modeles_de_courriers", + "contributions", ], }, }); diff --git a/targets/frontend/src/components/contributions/answers/references/OtherReferenceInput.tsx b/targets/frontend/src/components/contributions/answers/references/OtherReferenceInput.tsx index 0b049402b..3dbac9c22 100644 --- a/targets/frontend/src/components/contributions/answers/references/OtherReferenceInput.tsx +++ b/targets/frontend/src/components/contributions/answers/references/OtherReferenceInput.tsx @@ -1,11 +1,10 @@ -import { Box, Button, IconButton, Stack } from "@mui/material"; +import { Button, IconButton, Stack } from "@mui/material"; import DeleteIcon from "@mui/icons-material/Delete"; import AddIcon from "@mui/icons-material/Add"; import React from "react"; import { TitleBox } from "../../../forms/TitleBox"; import { FormTextField } from "../../../forms"; import { Control, useFieldArray } from "react-hook-form"; -import styled, { css } from "styled-components"; type OtherProps = { index: number; @@ -74,7 +73,7 @@ export const OtherReferenceInput = ({ return ( - + {fields.map((field, index) => { return ( )} - + ); }; - -const StyledStack = styled(Stack)` - margin-top: 16px; -`; diff --git a/targets/frontend/src/components/contributions/list/List.query.ts b/targets/frontend/src/components/contributions/list/List.query.ts index 262d055f0..20a402b34 100644 --- a/targets/frontend/src/components/contributions/list/List.query.ts +++ b/targets/frontend/src/components/contributions/list/List.query.ts @@ -1,6 +1,7 @@ import { useQuery } from "urql"; import { Answer, Question } from "../type"; +import { initStatus } from "../status/utils"; export const contributionListQuery = `query questions_answers($search: String, $agreementId: bpchar, $offset: Int, $limit: Int) { contribution_questions_aggregate( @@ -42,8 +43,12 @@ export const contributionListQuery = `query questions_answers($search: String, $ } } }`; +export type QueryQuestionAnswer = Pick< + Answer, + "id" | "otherAnswer" | "agreement" | "status" +>; export type QueryQuestion = Pick & { - answers: Pick[]; + answers: QueryQuestionAnswer[]; }; export type QueryResult = { @@ -63,6 +68,18 @@ export type ContributionListQueryResult = { total: number; }; +function formatAnswers(questions: QueryQuestion[] | undefined) { + if (!questions) return []; + + return questions.map((question) => { + question.answers = question.answers.map((answer) => { + answer.status = initStatus(answer); + return answer; + }); + return question; + }); +} + export const useContributionListQuery = ({ agreementId, search, @@ -80,7 +97,7 @@ export const useContributionListQuery = ({ }, }); return { - rows: result.data?.contribution_questions ?? [], - total: result?.data?.contribution_questions_aggregate.aggregate.count ?? 0, + rows: formatAnswers(result.data?.contribution_questions), + total: result.data?.contribution_questions_aggregate.aggregate.count ?? 0, }; }; diff --git a/targets/frontend/src/components/contributions/list/List.tsx b/targets/frontend/src/components/contributions/list/List.tsx index cd316cd83..26ec0a999 100644 --- a/targets/frontend/src/components/contributions/list/List.tsx +++ b/targets/frontend/src/components/contributions/list/List.tsx @@ -22,8 +22,8 @@ export const ContributionsList = (): JSX.Element => { search, }); return ( - <> - + + { setSearch(value ? `%${value}%` : undefined); setPage(0); }} - style={{ marginRight: 12 }} data-testid="contributions-list-search" /> { /> - + {rows.map((row) => ( @@ -75,6 +74,6 @@ export const ContributionsList = (): JSX.Element => { }} /> - + ); }; diff --git a/targets/frontend/src/components/contributions/list/Row.tsx b/targets/frontend/src/components/contributions/list/Row.tsx index f33abed65..892a65ef6 100644 --- a/targets/frontend/src/components/contributions/list/Row.tsx +++ b/targets/frontend/src/components/contributions/list/Row.tsx @@ -1,5 +1,3 @@ -import CheckIcon from "@mui/icons-material/Check"; -import ClearIcon from "@mui/icons-material/Clear"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp"; import ModeEditIcon from "@mui/icons-material/ModeEdit"; @@ -9,14 +7,19 @@ import IconButton from "@mui/material/IconButton"; import Table from "@mui/material/Table"; import TableBody from "@mui/material/TableBody"; import TableCell from "@mui/material/TableCell"; -import TableHead from "@mui/material/TableHead"; import TableRow from "@mui/material/TableRow"; import { useRouter } from "next/router"; import * as React from "react"; -import { StatusContainer } from "../status"; -import { StatusRecap } from "../status/StatusRecap"; -import { QueryQuestion } from "./List.query"; +import { StatusContainer, StatusRecap } from "../status"; +import { QueryQuestion, QueryQuestionAnswer } from "./List.query"; +import { Button } from "@mui/material"; + +const countAnswersWithStatus = ( + answers: QueryQuestionAnswer[] | undefined, + statusToCount: string +) => + answers?.filter(({ status }) => status?.status === statusToCount).length ?? 0; export const ContributionsRow = (props: { row: Partial; @@ -31,56 +34,36 @@ export const ContributionsRow = (props: { return ( <> - *": { borderBottom: "unset" } }} - key={row.id} - data-testid={`row-${row.id}`} - > + setOpen(!open)}> {open ? : } - {row.content} + !statuses.length).length ?? - 0 - } - redacting={ - row?.answers?.filter( - ({ statuses }) => statuses?.[0]?.status === "REDACTING" - ).length ?? 0 - } - redacted={ - row?.answers?.filter( - ({ statuses }) => statuses?.[0]?.status === "REDACTED" - ).length ?? 0 - } - validating={ - row?.answers?.filter( - ({ statuses }) => statuses?.[0]?.status === "VALIDATING" - ).length ?? 0 - } - validated={ - row?.answers?.filter( - ({ statuses }) => statuses?.[0]?.status === "VALIDATED" - ).length ?? 0 - } - published={ - row?.answers?.filter( - ({ statuses }) => statuses?.[0]?.status === "PUBLISHED" - ).length ?? 0 - } + todo={countAnswersWithStatus(row.answers, "TODO")} + redacting={countAnswersWithStatus(row.answers, "REDACTING")} + redacted={countAnswersWithStatus(row.answers, "REDACTED")} + validating={countAnswersWithStatus(row.answers, "VALIDATING")} + validated={countAnswersWithStatus(row.answers, "VALIDATED")} + published={countAnswersWithStatus(row.answers, "PUBLISHED")} /> { router.push(`/contributions/questions/${row.id}`); }} @@ -90,57 +73,46 @@ export const ContributionsRow = (props: { - + - <> - -
- - - Idcc - Convention collective - Statut - - - - - {row.answers?.map((answer) => { - const status = answer?.statuses?.[0]?.status ?? "TODO"; - return ( - - - {answer.agreement.id} - - - {answer.agreement.name} - - + +
+ + {row.answers?.map((answer) => { + return ( + + {answer.agreement.id} + + {answer.agreement.name} + + + {answer.status && ( - - - { - router.push( - `/contributions/answers/${answer.id}` - ); - }} - > - - - - - ); - })} - -
- - + )} + + + { + router.push( + `/contributions/answers/${answer.id}` + ); + }} + > + + + + + ); + })} + + + diff --git a/targets/frontend/src/components/contributions/questions/EditQuestionForm.tsx b/targets/frontend/src/components/contributions/questions/EditQuestionForm.tsx index 452d235c4..2aa1ba413 100644 --- a/targets/frontend/src/components/contributions/questions/EditQuestionForm.tsx +++ b/targets/frontend/src/components/contributions/questions/EditQuestionForm.tsx @@ -2,12 +2,11 @@ import { Alert, AlertColor, Button, - Paper, + Card, Snackbar, Stack, Typography, } from "@mui/material"; -import Grid from "@mui/material/Unstable_Grid2"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; @@ -63,33 +62,35 @@ export const EditQuestionForm = ({ const result = await updateQuestion(data); if (result.error) { setSnack({ - message: result.error.message, + message: `Erreur: ${result.error.message}`, open: true, severity: "error", }); } else { - setSnack({ open: true, severity: "success" }); + setSnack({ open: true, severity: "success", message: "Sauvegardé" }); } - } catch (e) { - setSnack({ open: true, severity: "error" }); + } catch (e: any) { + setSnack({ + open: true, + severity: "error", + message: `Erreur: ${e.message}`, + }); } }; return ( - <> -
- - - - - + + + + + ({ label: item.label, @@ -102,38 +103,32 @@ export const EditQuestionForm = ({ fullWidth /> {message && ( - Texte applicable {message.content} - + )} - - - - - - - - + + + + + +
- {snack?.severity} - {snack?.message ? `: ${snack.message}` : ""} + {snack.message} - + ); }; diff --git a/targets/frontend/src/components/contributions/status/Status.tsx b/targets/frontend/src/components/contributions/status/Status.tsx index 86f6631b5..14df8a9f5 100644 --- a/targets/frontend/src/components/contributions/status/Status.tsx +++ b/targets/frontend/src/components/contributions/status/Status.tsx @@ -1,31 +1,29 @@ import { Box, Stack, Tooltip } from "@mui/material"; -import { Status } from "../type"; +import { AnswerStatus } from "../type"; import { statusesMapping } from "./data"; export const StatusContainer = ({ - status = "TODO", - user, + status, dataTestid, }: { - user?: string; - status?: Status; + status: AnswerStatus; dataTestid?: string; }) => { return ( - + - {statusesMapping[status].text} - {statusesMapping[status].icon} + {statusesMapping[status.status].text} + {statusesMapping[status.status].icon} ); diff --git a/targets/frontend/src/components/contributions/status/StatusRecap.tsx b/targets/frontend/src/components/contributions/status/StatusRecap.tsx index 98bfc24f5..e699ed89d 100644 --- a/targets/frontend/src/components/contributions/status/StatusRecap.tsx +++ b/targets/frontend/src/components/contributions/status/StatusRecap.tsx @@ -15,19 +15,13 @@ export const StatusRecap = (props: { {Object.entries(props).map(([key, value]) => { const { icon, color } = statusesMapping[key.toUpperCase() as Status]; + if (!value) return <>; return ( - - - {value} - + {icon} + + {value} + ); })} diff --git a/targets/frontend/src/components/contributions/status/data.tsx b/targets/frontend/src/components/contributions/status/data.tsx index 526c677f2..4d7ce8a0b 100644 --- a/targets/frontend/src/components/contributions/status/data.tsx +++ b/targets/frontend/src/components/contributions/status/data.tsx @@ -1,23 +1,41 @@ import CheckIcon from "@mui/icons-material/Check"; import ClearIcon from "@mui/icons-material/Clear"; import DescriptionIcon from "@mui/icons-material/Description"; -import ModeEditIcon from "@mui/icons-material/ModeEdit"; -import SaveIcon from "@mui/icons-material/Save"; +import EditNoteIcon from "@mui/icons-material/EditNote"; +import TaskAltIcon from "@mui/icons-material/TaskAlt"; import VisibilityIcon from "@mui/icons-material/Visibility"; export const statusesMapping = { - PUBLISHED: { color: "purple", icon: , text: "PUBLIÉ" }, - REDACTED: { color: "blue", icon: , text: "RÉDIGÉ" }, + PUBLISHED: { + color: "#2e7858", + icon: , + text: "PUBLIÉ", + }, + REDACTED: { + color: "#c3992a", + icon: , + text: "RÉDIGÉ", + }, REDACTING: { - color: "turquoise", - icon: , + color: "#a9c8fb", + icon: , text: "RÉDACTION", }, - TODO: { color: "red", icon: , text: "À TRAITER" }, - VALIDATED: { color: "green", icon: , text: "VALIDÉ" }, + TODO: { + color: "#a94645", + icon: , + text: "À TRAITER", + }, + VALIDATED: { + color: "#68a532", + icon: , + text: "VALIDÉ", + }, VALIDATING: { - color: "orange", - icon: , + color: "#e4794a", + icon: ( + + ), text: "VALIDATION", }, }; diff --git a/targets/frontend/src/components/contributions/status/utils.ts b/targets/frontend/src/components/contributions/status/utils.ts new file mode 100644 index 000000000..d18d219a5 --- /dev/null +++ b/targets/frontend/src/components/contributions/status/utils.ts @@ -0,0 +1,37 @@ +import { Status } from "../type"; + +export const initStatus = (answer: any) => { + return answer.statuses?.[0] || { status: "TODO" }; +}; + +export const getNextStatus = (status: Status): Status => { + switch (status) { + case "REDACTED": + return "VALIDATING"; + case "VALIDATING": + return "VALIDATED"; + case "VALIDATED": + return "PUBLISHED"; + case "TODO": + case "REDACTING": + default: + return "REDACTED"; + } +}; + +export const getPrimaryButtonLabel = (status: Status): string => { + switch (status) { + case "REDACTED": + return "Commencer Validation"; + case "VALIDATING": + return "Valider"; + case "VALIDATED": + return "Publier"; + case "PUBLISHED": + return "Publiée"; + case "TODO": + case "REDACTING": + default: + return "Soumettre"; + } +}; diff --git a/targets/frontend/src/components/contributions/type.ts b/targets/frontend/src/components/contributions/type.ts index dc06d2bcb..ae7b9538f 100644 --- a/targets/frontend/src/components/contributions/type.ts +++ b/targets/frontend/src/components/contributions/type.ts @@ -1,4 +1,5 @@ import { User } from "src/types"; +import { SourceRoute } from "@socialgouv/cdtn-sources"; export type Agreement = { id: string; @@ -27,6 +28,7 @@ export type Answer = { otherAnswer?: string; agreement: Agreement; statuses: AnswerStatus[]; + status: AnswerStatus; content?: string; question: Omit; answer_comments: Comments[]; @@ -73,6 +75,6 @@ export type OtherReference = { export type CdtnReference = { title: string; cdtn_id: string; - source: string; + source: SourceRoute; slug: string; }; diff --git a/targets/frontend/src/components/forms/RadioGroup/index.tsx b/targets/frontend/src/components/forms/RadioGroup/index.tsx index c6d15ece1..a106a1ffd 100644 --- a/targets/frontend/src/components/forms/RadioGroup/index.tsx +++ b/targets/frontend/src/components/forms/RadioGroup/index.tsx @@ -1,14 +1,12 @@ import { FormControl, FormControlLabel, + FormLabel, Radio, RadioGroup, } from "@mui/material"; import React, { PropsWithChildren } from "react"; import { Controller } from "react-hook-form"; -import styled from "styled-components"; - -import { TitleBox } from "../TitleBox"; import { CommonFormProps } from "../type"; type OptionProps = { @@ -38,30 +36,26 @@ export const FormRadioGroup = ({ rules={rules} render={({ field: { onChange, value }, fieldState: { error } }) => ( - - ) => - onChange(event.target.value) - } - > - {options.map(({ label, value }) => ( - } - label={label} - disabled={disabled} - /> - ))} - - + {label} + + ) => + onChange(event.target.value) + } + > + {options.map(({ label, value }) => ( + } + label={label} + disabled={disabled} + /> + ))} + )} /> ); }; - -const StyledRadioGroup = styled(RadioGroup)` - width: 330px; -`; diff --git a/targets/frontend/src/pages/contributions/answers/[answerId].tsx b/targets/frontend/src/pages/contributions/answers/[answerId].tsx index e78212d2f..1771cb59d 100644 --- a/targets/frontend/src/pages/contributions/answers/[answerId].tsx +++ b/targets/frontend/src/pages/contributions/answers/[answerId].tsx @@ -11,7 +11,7 @@ export function EditInformationPage() { const answerId = router?.query?.answerId as string; return ( - + ); diff --git a/targets/frontend/src/pages/contributions/index.tsx b/targets/frontend/src/pages/contributions/index.tsx index 8551417ee..bc876bdf2 100644 --- a/targets/frontend/src/pages/contributions/index.tsx +++ b/targets/frontend/src/pages/contributions/index.tsx @@ -6,7 +6,7 @@ import { ContributionsList } from "../../components/contributions"; export function ContributionsPage() { return ( - + ); diff --git a/targets/frontend/src/pages/contributions/questions/[questionId].tsx b/targets/frontend/src/pages/contributions/questions/[questionId].tsx index cc7bf586a..38226972c 100644 --- a/targets/frontend/src/pages/contributions/questions/[questionId].tsx +++ b/targets/frontend/src/pages/contributions/questions/[questionId].tsx @@ -11,7 +11,7 @@ export function EditAnswerPage() { const questionId = router?.query?.questionId as string; return ( - + );