From 59e35bbe0cc01d0b93d1d8a9bd54dd70f06b141f Mon Sep 17 00:00:00 2001 From: Caroline <4971715+carolineBda@users.noreply.github.com> Date: Thu, 12 Oct 2023 11:20:37 +0200 Subject: [PATCH] fix(comments ui): meilleur affiche des commentaires & changement de statuts dans les contribs (#1070) --- .../contributions/answers/Answer.tsx | 14 ++-- .../contributions/answers/Comment.tsx | 67 +++++++++++++------ .../contributions/answers/Comments.tsx | 1 + .../contributions/questions/EditQuestion.tsx | 6 +- .../components/contributions/status/data.tsx | 2 +- .../src/components/contributions/type.ts | 14 ++-- .../components/forms/EditionField/Editor.tsx | 3 +- 7 files changed, 60 insertions(+), 47 deletions(-) diff --git a/targets/frontend/src/components/contributions/answers/Answer.tsx b/targets/frontend/src/components/contributions/answers/Answer.tsx index ba14cab34..63540058d 100644 --- a/targets/frontend/src/components/contributions/answers/Answer.tsx +++ b/targets/frontend/src/components/contributions/answers/Answer.tsx @@ -2,11 +2,11 @@ import { AlertColor, Box, Stack, + styled, Tooltip, + tooltipClasses, TooltipProps, Typography, - styled, - tooltipClasses, } from "@mui/material"; import React, { useState } from "react"; import { useUser } from "src/hooks/useUser"; @@ -89,15 +89,9 @@ export const ContributionsAnswer = ({ - - {answer?.agreement?.name} - - - } + title={{answer?.agreement?.name}} > - {answer?.agreement?.id} + {answer?.agreement?.id} diff --git a/targets/frontend/src/components/contributions/answers/Comment.tsx b/targets/frontend/src/components/contributions/answers/Comment.tsx index f440c2c1a..2851b25e6 100644 --- a/targets/frontend/src/components/contributions/answers/Comment.tsx +++ b/targets/frontend/src/components/contributions/answers/Comment.tsx @@ -1,4 +1,4 @@ -import { Box } from "@mui/material"; +import { Box, Typography, Stack, Tooltip } from "@mui/material"; import * as React from "react"; import { @@ -14,44 +14,67 @@ const isAnswerComments = ( ): comment is AnswerComments => (comment as AnswerComments).content !== undefined; -const getText = (comment: AnswerComments | AnswerStatus) => - isAnswerComments(comment) - ? comment.content - : `Statut: ${statusesMapping[comment.status].text}`; - type Props = { comment: CommentsAndStatuses; }; export const Comment = ({ comment }: Props) => { - const date = comment.createdAtDate.toLocaleString("fr-FR"); + const date = comment.createdAtDate.toLocaleString("fr-FR", { + month: "short", + day: "numeric", + }); + + const dateFull = comment.createdAtDate.toLocaleString("fr-FR"); - return ( + return isAnswerComments(comment) ? ( - {comment?.user?.name} - + + {date} + + + + + {comment?.user?.name} + + + {comment.content} + + ) : ( + + + - {date} - - - - {getText(comment)} - - + {date} {comment.user?.name} + + + + {" "} + {statusesMapping[comment.status].text} + + ); }; diff --git a/targets/frontend/src/components/contributions/answers/Comments.tsx b/targets/frontend/src/components/contributions/answers/Comments.tsx index b152d1ff0..d3a01d831 100644 --- a/targets/frontend/src/components/contributions/answers/Comments.tsx +++ b/targets/frontend/src/components/contributions/answers/Comments.tsx @@ -101,6 +101,7 @@ export const Comments = ({ answerId, comments, statuses }: Props) => { }} > - {value === index && ( - - {children} - - )} + {value === index && {children}} ); } diff --git a/targets/frontend/src/components/contributions/status/data.tsx b/targets/frontend/src/components/contributions/status/data.tsx index f967be521..c32baf64d 100644 --- a/targets/frontend/src/components/contributions/status/data.tsx +++ b/targets/frontend/src/components/contributions/status/data.tsx @@ -29,7 +29,7 @@ export const statusesMapping: StatusesMapping = { REDACTED: { color: fr.colors.decisions.text.default.info.default, icon: , - text: "À validé", + text: "À valider", }, VALIDATING: { color: fr.colors.decisions.text.default.warning.default, diff --git a/targets/frontend/src/components/contributions/type.ts b/targets/frontend/src/components/contributions/type.ts index b7368f3ba..b0a3348d3 100644 --- a/targets/frontend/src/components/contributions/type.ts +++ b/targets/frontend/src/components/contributions/type.ts @@ -50,8 +50,8 @@ export const kaliArticleSchema = z.object({ id: z.string(), path: z.string(), label: z - .string({ required_error: "Un libellé doit être renseigner" }) - .min(1, "un label doit être renseigner"), + .string({ required_error: "Un libellé doit être renseigné" }) + .min(1, "un label doit être renseigné"), agreementId: z.string(), createdAt: z.string(), }); @@ -79,7 +79,7 @@ export type LegiReference = z.infer; export const otherReferenceSchema = z.object({ label: z - .string({ required_error: "un libellé doit être renseigner" }) + .string({ required_error: "un libellé doit être renseigné" }) .min(1, "un nom doit être renseigné"), url: z .string({ required_error: "Une url doit être renseigné" }) @@ -109,8 +109,8 @@ const answerBaseSchema = z.object({ contentType: z.enum( ["ANSWER", "NOTHING", "CDT", "UNFAVOURABLE", "UNKNOWN", "SP"], { - required_error: "Un type de réponse doit être sélectionner", - invalid_type_error: " type de réponse doit être sélectionner", + required_error: "Un type de réponse doit être sélectionné", + invalid_type_error: " type de réponse doit être sélectionné", } ), contentServicePublicCdtnId: z.string().nullable().optional(), @@ -122,9 +122,9 @@ export const questionBaseSchema = z.object({ id: z.string().uuid(), content: z .string({ - required_error: "une question doit être renseigner", + required_error: "une question doit être renseigné", }) - .min(1, "une question doit être renseigner"), + .min(1, "une question doit être renseigné"), order: z.number(), message_id: z .string({ diff --git a/targets/frontend/src/components/forms/EditionField/Editor.tsx b/targets/frontend/src/components/forms/EditionField/Editor.tsx index 533c0adbd..fc34cc3ad 100644 --- a/targets/frontend/src/components/forms/EditionField/Editor.tsx +++ b/targets/frontend/src/components/forms/EditionField/Editor.tsx @@ -5,7 +5,6 @@ import TableHeader from "@tiptap/extension-table-header"; import TableRow from "@tiptap/extension-table-row"; import StarterKit from "@tiptap/starter-kit"; import React, { useEffect, useState } from "react"; -import { FieldErrors } from "react-hook-form"; import { styled } from "@mui/system"; import { fr } from "@codegouvfr/react-dsfr"; @@ -132,7 +131,7 @@ const StyledEditorContent = styled(EditorContent)(() => { border: "0", padding: "1rem 0", borderTop: `1px solid ${fr.colors.decisions.text.default.grey.default}`, - ":first-child": { + ":first-of-type": { border: "none", }, "> button": {