From e83aa71f35c5056b1d662a806103e8242520888f Mon Sep 17 00:00:00 2001
From: Martin Ledoux <32564108+ledouxm@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:15:21 +0200
Subject: [PATCH] Mep (#34)

* fix: display correct status

* fix: edit banner spacings

* feat: set edit banner sticky on mobile

* fix: return arrow size

* feat: set menu title position to sticky

* fix: some styles

* fix: simplify header

* fix: show reports on 2 columns from 6 items

* feat: add info messages

* feat: display report item on 3 rows

* fix: new colors

* fix: informative message mb

* fix: set printable colors

* fix(pdf): set header sticky on desktop

* fix: recipients textarea styles

* fix: menu header padding and more

* fix: remove *

* fix: form labels

* fix: date picker

* fix: margins

* gitignore

* fix: pdf styles can now be italic and bold

* fix: align tab title with content on firefox
---
 .gitignore                                    |  1 +
 .../src/components/chips/SpaceTypeChips.tsx   |  2 +-
 packages/frontend/src/features/InfoForm.tsx   | 12 ++--
 packages/frontend/src/features/ReportList.tsx | 12 ++--
 .../frontend/src/features/menu/ClauseMenu.tsx | 59 ++++++++++++-------
 .../frontend/src/features/menu/HelpMenu.tsx   |  4 +-
 .../frontend/src/features/menu/MenuButton.tsx |  4 ++
 packages/frontend/src/features/menu/Share.tsx | 21 +++++--
 .../text-editor/TextEditorToolbar.tsx         | 25 ++++----
 .../frontend/src/routes/edit.$reportId.tsx    |  6 +-
 packages/frontend/src/routes/index.tsx        |  1 +
 .../frontend/src/routes/pdf.$reportId.tsx     | 28 +++++++--
 packages/pdf/src/report.tsx                   | 16 ++++-
 13 files changed, 125 insertions(+), 66 deletions(-)

diff --git a/.gitignore b/.gitignore
index b8399d2a..f58069e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 dev-dist
+vite.config.ts.timestamp*
 # dependencies
 node_modules
 /.pnp
diff --git a/packages/frontend/src/components/chips/SpaceTypeChips.tsx b/packages/frontend/src/components/chips/SpaceTypeChips.tsx
index 6e9b237c..bece3d9d 100644
--- a/packages/frontend/src/components/chips/SpaceTypeChips.tsx
+++ b/packages/frontend/src/components/chips/SpaceTypeChips.tsx
@@ -21,7 +21,7 @@ export const SpaceTypeChips = (props: FlexProps & { disabled?: boolean }) => {
       value={selected}
       {...props}
       onChange={(values) => form.setValue("projectSpaceType", values.join(","))}
-      label="Type d'espace"
+      label="Type d'espace protégé"
     />
   );
 };
diff --git a/packages/frontend/src/features/InfoForm.tsx b/packages/frontend/src/features/InfoForm.tsx
index f54f9fb5..cac17d67 100644
--- a/packages/frontend/src/features/InfoForm.tsx
+++ b/packages/frontend/src/features/InfoForm.tsx
@@ -98,7 +98,7 @@ export const InfoForm = () => {
           <Input
             className={css({ flex: { base: "none", lg: 1 }, mb: { base: "16px", lg: "16px" } })}
             disabled={isFormDisabled}
-            label="Nom du demandeur*"
+            label="Nom du demandeur"
             nativeInputProps={form.register("applicantName")}
           />
         </Stack>
@@ -142,7 +142,7 @@ export const InfoForm = () => {
         <Input
           className={css({ flex: { base: "none", lg: 2 }, mt: "16px", mb: { base: "24px", lg: undefined } })}
           disabled={isFormDisabled}
-          label="Adresse du projet"
+          label="Adresse"
           nativeInputProps={form.register("applicantAddress")}
         />
         <Stack gap={{ base: "0", lg: "16px" }} direction={{ base: "column", lg: "row" }}>
@@ -156,16 +156,16 @@ export const InfoForm = () => {
           <Input
             className={css({ flex: { base: "none", lg: 1 }, mb: { base: "24px", lg: undefined } })}
             disabled={isFormDisabled}
-            label="Commune*"
+            label="Commune"
             // hintText="Ce champ apparaitra dans la liste des compte-rendus"
             nativeInputProps={form.register("city")}
           />
         </Stack>
         <Stack gap={{ base: "0", lg: "16px" }} direction={{ base: "column", lg: "row" }}>
           <Input
-            className={css({ flex: { base: "none", lg: 1 }, mb: "16px" })}
+            className={css({ flex: { base: "none", lg: 1 }, mb: "24px" })}
             disabled={isFormDisabled}
-            label="Référence cadastrale du projet"
+            label="Référence cadastrale"
             nativeInputProps={form.register("projectCadastralRef")}
           />
           <Box
@@ -182,7 +182,7 @@ export const InfoForm = () => {
         <SpaceTypeChips className={css({ flex: { base: "none", lg: 1 } })} disabled={isFormDisabled} />
       </InputGroupWithTitle>
 
-      <Center justifyContent={{ base: "center", lg: "flex-start" }} mt={{ base: "80px", lg: 0 }} mb="120px">
+      <Center justifyContent={{ base: "center", lg: "flex-start" }} mt={{ base: "80px", lg: "50px" }} mb="120px">
         <Button
           type="button"
           iconId="ri-arrow-right-line"
diff --git a/packages/frontend/src/features/ReportList.tsx b/packages/frontend/src/features/ReportList.tsx
index 4c7f7efb..749e0ddd 100644
--- a/packages/frontend/src/features/ReportList.tsx
+++ b/packages/frontend/src/features/ReportList.tsx
@@ -114,8 +114,6 @@ const NoReport = () => {
   );
 };
 
-const nbPerColumn = 10;
-
 export const ReportList = ({
   reports,
   page,
@@ -135,7 +133,7 @@ export const ReportList = ({
 }) => {
   const error = reports.length === 0 ? <NoReport /> : null;
 
-  const columns = chunk(reports, nbPerColumn);
+  const columns = reports.length < 6 ? [reports] : chunk(reports, Math.ceil(reports.length / 2));
 
   return (
     <Stack w="100%" mt={{ base: "20px", lg: "30px" }}>
@@ -199,8 +197,6 @@ const ReportListItem = ({
   const forText = report.applicantName ? uppercaseFirstLetterIf(`pour ${report.applicantName}`, !whereText) : null;
   const byText = uppercaseFirstLetterIf(`par ${report.redactedBy ?? report.user?.name ?? ""}`, !whereText && !forText);
 
-  const description = [whereText, forText, byText].filter(Boolean).join(" ");
-
   return (
     <Flex position="relative" direction="column" w="100%">
       <Link
@@ -230,9 +226,9 @@ const ReportListItem = ({
               <styled.span ml={"5px"}>{new Date(report.meetDate).toLocaleDateString()}</styled.span>
             ) : null}
           </Flex>
-          <styled.div lineClamp={2}>
-            <styled.span>{description}</styled.span>
-          </styled.div>
+          <styled.div nowrap>{whereText}</styled.div>
+          <styled.div nowrap>{forText}</styled.div>
+          <styled.div nowrap>{byText}</styled.div>
           <styled.div mt="8px">
             <ReportBadge status={report.pdf ? "published" : "draft"} />
           </styled.div>
diff --git a/packages/frontend/src/features/menu/ClauseMenu.tsx b/packages/frontend/src/features/menu/ClauseMenu.tsx
index a52289e0..ab65a27c 100644
--- a/packages/frontend/src/features/menu/ClauseMenu.tsx
+++ b/packages/frontend/src/features/menu/ClauseMenu.tsx
@@ -37,8 +37,21 @@ export const ClauseMenu = ({ isNational, ...props }: { isNational: boolean } & M
   if (isNational)
     return (
       <>
-        <ClauseTitle isNational={isNational} buttons={null} {...props} />
-        <ClauseList clauses={(clausesQuery.results as any) ?? []} isEditing={false} />
+        <ClauseTitle
+          isNational={isNational}
+          buttons={null}
+          alert={
+            <ClauseFormBanner
+              status="idle"
+              icon={fr.cx("fr-icon-alert-fill")}
+              text={`Ces clauses sont communes à toutes les UDAP et ne peuvent pas être modifiées.`}
+            />
+          }
+          {...props}
+        />
+        <styled.div px="20px">
+          <ClauseList clauses={(clausesQuery.results as any) ?? []} isEditing={false} />
+        </styled.div>
       </>
     );
 
@@ -76,7 +89,10 @@ const ClauseForm = ({
   ...props
 }: { clauses: Clause_v2[]; isNational: boolean } & ModalContentProps) => {
   const [mode, setMode] = useState<Mode>("view");
-  const [bannerProps, setBannerProps] = useState<{ status: BannerStatus; text: string; icon: string } | null>(null);
+  const [bannerProps, setBannerProps] = useState<{ status: BannerStatus; text: string; icon: string } | null>({
+    ...initialBannerProps,
+    text: "Ces clauses sont spécifiques à votre UDAP et modifiables.",
+  });
 
   const isEditing = mode === "edit";
   const isAdding = mode === "add";
@@ -202,33 +218,34 @@ const ClauseForm = ({
         {...props}
         alert={bannerProps ? <ClauseFormBanner {...bannerProps} /> : null}
       />
-
-      {isAdding ? (
-        <ClauseAdd
-          onSuccess={() => {
-            setBannerProps({ status: "success", text: "Clause ajoutée", icon: "ri-check-fill" });
-            setMode("view");
-          }}
-          isNational={isNational}
-        />
-      ) : null}
-      <FormProvider {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} id="edit-form">
-          <ClauseList clauses={fieldsWithIndex} isEditing={isEditing} />
-        </form>
-      </FormProvider>
+      <styled.div px="20px">
+        {isAdding ? (
+          <ClauseAdd
+            onSuccess={() => {
+              setBannerProps({ status: "success", text: "Clause ajoutée", icon: "ri-check-fill" });
+              setMode("view");
+            }}
+            isNational={isNational}
+          />
+        ) : null}
+        <FormProvider {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} id="edit-form">
+            <ClauseList clauses={fieldsWithIndex} isEditing={isEditing} />
+          </form>
+        </FormProvider>
+      </styled.div>
     </>
   );
 };
 
 type BannerStatus = "idle" | "success";
 
-const ClauseFormBanner = ({ status, icon, text }: { text: string; icon: string; status: BannerStatus }) => {
+export const ClauseFormBanner = ({ status, icon, text }: { text: string; icon: string; status: BannerStatus }) => {
   const bgColor = status === "idle" ? "#E8EDFF" : "#B8FEC9";
   const iconColor = status === "idle" ? "#0063CB" : "#18753C";
 
   return (
-    <Flex ml="-32px" mr="-32px" py="16px" px="32px" bgColor={bgColor}>
+    <Flex mb="24px" py="16px" px="32px" bgColor={bgColor}>
       <i className={cx(icon, css({ color: iconColor }))} />
       <styled.div
         dangerouslySetInnerHTML={{ __html: transformBold(text) }}
@@ -240,7 +257,7 @@ const ClauseFormBanner = ({ status, icon, text }: { text: string; icon: string;
   );
 };
 
-function transformBold(str: string) {
+export function transformBold(str: string) {
   return str.replace(/\*\*(.*?)\*\*/g, "<b>$1</b>");
 }
 
diff --git a/packages/frontend/src/features/menu/HelpMenu.tsx b/packages/frontend/src/features/menu/HelpMenu.tsx
index e24f7d96..694772c7 100644
--- a/packages/frontend/src/features/menu/HelpMenu.tsx
+++ b/packages/frontend/src/features/menu/HelpMenu.tsx
@@ -14,9 +14,9 @@ export const HelpMenu = ({ backButtonOnClick }: { backButtonOnClick: () => void
     <>
       <MenuTitle backButtonOnClick={backButtonOnClick}>Assistance technique</MenuTitle>
       <Divider height="2px" my={{ base: "27px", lg: "44px" }} color="#C1C1FB" />
-      <Stack>
+      <Stack px="20px">
         <styled.div mb="10px">
-          Si vous n'arrivez pas à vous connecter, essayez de réinitialiser les données locales :
+          Vous ne voyez pas vos dernières informations enregistrées ? Essayez de réinitialiser les données locales :
         </styled.div>
         <Button onClick={() => deleteLocalData()}>Réinitialiser</Button>
       </Stack>
diff --git a/packages/frontend/src/features/menu/MenuButton.tsx b/packages/frontend/src/features/menu/MenuButton.tsx
index 31dfcc3d..d59237fd 100644
--- a/packages/frontend/src/features/menu/MenuButton.tsx
+++ b/packages/frontend/src/features/menu/MenuButton.tsx
@@ -129,6 +129,10 @@ const MenuModal = ({ menu, isOpen, className }: { menu: NestedMenu | null; isOpe
             maxHeight: "100%",
             p: 0,
           },
+          "& .fr-modal__content": {
+            pl: 0,
+            pr: 0,
+          },
           "& .fr-col-12": {
             flex: { base: 1, lg: "unset" },
             width: { base: "100%", lg: "unset" },
diff --git a/packages/frontend/src/features/menu/Share.tsx b/packages/frontend/src/features/menu/Share.tsx
index bee354aa..cb9f1536 100644
--- a/packages/frontend/src/features/menu/Share.tsx
+++ b/packages/frontend/src/features/menu/Share.tsx
@@ -7,6 +7,8 @@ import { ToggleSwitch } from "@codegouvfr/react-dsfr/ToggleSwitch";
 import { useMutation } from "@tanstack/react-query";
 import { css } from "#styled-system/css";
 import { MenuTitle } from "./MenuTitle";
+import { ClauseFormBanner } from "./ClauseMenu";
+import { fr } from "@codegouvfr/react-dsfr";
 
 export const ShareReport = ({ backButtonOnClick }: { backButtonOnClick: () => void }) => {
   const user = useUser()!;
@@ -41,15 +43,26 @@ export const ShareReport = ({ backButtonOnClick }: { backButtonOnClick: () => vo
 
   return (
     <>
-      <MenuTitle backButtonOnClick={backButtonOnClick}>Partage des CR</MenuTitle>
-      <Divider hideFrom="lg" height="2px" my={{ base: "20px", lg: "44px" }} color="#C1C1FB" />
+      <MenuTitle
+        backButtonOnClick={backButtonOnClick}
+        alert={
+          <ClauseFormBanner
+            status="idle"
+            icon={fr.cx("fr-icon-alert-fill")}
+            text={`Tous les agents de l'UDAP peuvent voir et télécharger les compte-rendus envoyés. Seuls ceux à qui vous avez donné le droit peuvent créer, modifier, et supprimer vos compte-rendus. Le compte-rendu est attribué à un agent via le champ "rédigé par" du formulaire.`}
+          />
+        }
+      >
+        Partage des CR
+      </MenuTitle>
+      {/* <Divider hideFrom="lg" height="2px" my={{ base: "20px", lg: "44px" }} color="#C1C1FB" /> */}
 
-      <Stack w="100%">
+      <Stack w="100%" px="20px">
         <styled.div>Ces personnes peuvent créer, modifier et supprimer vos CR : </styled.div>
         <ManageDelegations coworkers={coworkersQuery.results ?? []} delegations={delegationsQuery.results ?? []} />
       </Stack>
 
-      <Stack mt="49px" color="#757575">
+      <Stack mt="49px" px="20px" color="#757575">
         <styled.div>Ces personnes vous permettent de créer, modifier et supprimer leurs CR :</styled.div>
         <styled.ul>
           {delegatedToMeQuery.results?.map((delegation) => (
diff --git a/packages/frontend/src/features/text-editor/TextEditorToolbar.tsx b/packages/frontend/src/features/text-editor/TextEditorToolbar.tsx
index ac2234d4..fd46eac5 100644
--- a/packages/frontend/src/features/text-editor/TextEditorToolbar.tsx
+++ b/packages/frontend/src/features/text-editor/TextEditorToolbar.tsx
@@ -32,7 +32,7 @@ export const TextEditorToolbar = () => {
         className={toolbarButtonRecipe({
           active: editor.isActive("bold"),
         })}
-        size="small"
+        size="medium"
         priority="tertiary no outline"
         iconId="fr-icon-bold"
         type="button"
@@ -45,7 +45,7 @@ export const TextEditorToolbar = () => {
         className={toolbarButtonRecipe({
           active: editor.isActive("italic"),
         })}
-        size="small"
+        size="medium"
         priority="tertiary no outline"
         type="button"
         iconId="fr-icon-italic"
@@ -58,7 +58,7 @@ export const TextEditorToolbar = () => {
         className={toolbarButtonRecipe({
           active: editor.isActive("underline"),
         })}
-        size="small"
+        size="medium"
         priority="tertiary no outline"
         iconId="ri-underline"
         type="button"
@@ -91,7 +91,7 @@ const ColorInput = () => {
       <Popover.Trigger>
         <Button
           className={toolbarButtonRecipe({})}
-          size="small"
+          size="medium"
           priority="tertiary no outline"
           iconId="ri-palette-line"
           type="button"
@@ -105,18 +105,13 @@ const ColorInput = () => {
           <Stack p="8px">
             <Stack gap="8px" flexDir="row" justifyContent="space-around" w="100%">
               <ColorButton value={currentValue} color="black" />
-              <ColorButton value={currentValue} color="#c9191e" />
-              <ColorButton value={currentValue} color="#666666" />
+              <ColorButton value={currentValue} color="#e1000f" />
+              <ColorButton value={currentValue} color="#d64d00" />
             </Stack>
-            <Stack gap="8px" flexDir="row" justifyContent="space-around" w="100%">
-              <ColorButton value={currentValue} color="#cecece" />
-              <ColorButton value={currentValue} color="#0078f3" />
-              <ColorButton value={currentValue} color="#1f8d49" />
-            </Stack>
-            <Stack gap="8px" flexDir="row" justifyContent="space-around" w="100%">
-              <ColorButton value={currentValue} color="#68a532" />
-              <ColorButton value={currentValue} color="#e4794a" />
-              <ColorButton value={currentValue} color="#272747" />
+            <Stack flexDir="row" w="100%">
+              <ColorButton value={currentValue} color="#000091" />
+              <ColorButton value={currentValue} color="#118d49" />
+              <div />
             </Stack>
           </Stack>
         </Popover.Content>
diff --git a/packages/frontend/src/routes/edit.$reportId.tsx b/packages/frontend/src/routes/edit.$reportId.tsx
index 5b69efeb..27b119d7 100644
--- a/packages/frontend/src/routes/edit.$reportId.tsx
+++ b/packages/frontend/src/routes/edit.$reportId.tsx
@@ -89,13 +89,17 @@ const WithReport = ({ report }: { report: Report }) => {
     document.getElementById("root")!.scrollTo(0, 0);
   };
 
+  // @ts-ignore
+  const isChrome = !!window.chrome;
+
   const options = [
     {
       id: "info",
       label: "RDV",
       className: css({
         position: "absolute",
-        left: "max(calc((100vw - 800px) / 2 + 8px), 16px)",
+        // there is a difference in padding between chrome and other browsers due to scrollbar width (i guess)
+        left: isChrome ? "max(calc((100vw - 800px) / 2 + 8px), 16px)" : "max(calc((100vw - 800px) / 2 + 16px), 16px)",
       }),
     },
     {
diff --git a/packages/frontend/src/routes/index.tsx b/packages/frontend/src/routes/index.tsx
index 2b14e81b..2f9ab2c2 100644
--- a/packages/frontend/src/routes/index.tsx
+++ b/packages/frontend/src/routes/index.tsx
@@ -47,6 +47,7 @@ const Index = () => {
           id: `report-${v4()}`,
           createdBy: user.id,
           createdAt: new Date(),
+          meetDate: new Date(),
           disabled: false,
           udap_id: user.udap.id,
           redactedBy: user.name,
diff --git a/packages/frontend/src/routes/pdf.$reportId.tsx b/packages/frontend/src/routes/pdf.$reportId.tsx
index c6c8d49e..5b3c5215 100644
--- a/packages/frontend/src/routes/pdf.$reportId.tsx
+++ b/packages/frontend/src/routes/pdf.$reportId.tsx
@@ -2,7 +2,7 @@ import "@ungap/with-resolvers";
 import { Banner } from "#components/Banner.js";
 import { EnsureUser } from "#components/EnsureUser.js";
 import { Spinner } from "#components/Spinner";
-import { css } from "#styled-system/css";
+import { css, cx } from "#styled-system/css";
 import { Center, Flex, Stack, styled } from "#styled-system/jsx";
 import Button from "@codegouvfr/react-dsfr/Button";
 import Input from "@codegouvfr/react-dsfr/Input";
@@ -27,6 +27,9 @@ import { TextEditorContext, TextEditorContextProvider } from "../features/text-e
 import { TextEditorToolbar } from "../features/text-editor/TextEditorToolbar";
 import { getDiff } from "../components/SyncForm";
 import { v4 } from "uuid";
+import Alert from "@codegouvfr/react-dsfr/Alert";
+import { fr } from "@codegouvfr/react-dsfr";
+import { transformBold } from "../features/menu/ClauseMenu";
 
 type Mode = "edit" | "view" | "send" | "sent";
 
@@ -124,7 +127,7 @@ export const PDF = () => {
         <Button
           type="button"
           iconId="ri-save-line"
-          size="small"
+          size="medium"
           onClick={() =>
             saveSnapshotMutation.mutate({
               report: JSON.stringify(report),
@@ -187,6 +190,19 @@ export const PDF = () => {
 
   return (
     <styled.div w="100%" h="100%" bgColor={mode === "edit" ? "background-open-blue-france" : "unset"}>
+      <Flex justifyContent="center" py="16px" px="32px" bgColor={"#E8EDFF"}>
+        <i className={cx(fr.cx("fr-icon-alert-fill"), css({ color: "#0063CB" }))} />
+        <styled.div
+          dangerouslySetInnerHTML={{
+            __html:
+              transformBold(`**Si vous modifiez un champ dans le formulaire, votre mise en page sera ré-initialisée.** <br/>
+Les modifications du compte-rendu se font uniquement sur l'appareil utilisé. Utilisez le même appareil pour continuer les modifications et l'envoi.`),
+          }}
+          ml="16px"
+          pr="24px"
+          color={"#0063CB"}
+        ></styled.div>
+      </Flex>
       <TextEditorContextProvider>
         {report ? (
           <SendForm generatePdf={generatePdfMutation.mutate} report={report}>
@@ -298,8 +314,8 @@ const EditBanner = ({ title, buttons, reportId }: { title: ReactNode; buttons: R
     <Banner
       status="saved"
       zIndex={3}
-      position={{ base: "sticky", lg: "unset" }}
-      top={{ base: "-1px", lg: "unset" }}
+      position={{ base: "sticky", lg: "sticky" }}
+      top={{ base: "-1px", lg: "-1px" }}
       flexDir="row"
     >
       <Flex
@@ -475,9 +491,9 @@ const SendReportPage = ({ children }: PropsWithChildren) => {
 
   return (
     <Center>
-      <Flex flexDirection="column" w={{ base: "100%", lg: "800px" }}>
+      <Flex flexDirection="column" alignItems="center" w={{ base: "100%", lg: "800px" }}>
         <Input
-          className={css({ mt: "16px" })}
+          className={css({ w: "100%", mt: "16px", px: { base: "16px", lg: "unset" } })}
           label="Destinataires"
           hintText="Liste de courriels, séparés par des virgules ou des espaces"
           textArea
diff --git a/packages/pdf/src/report.tsx b/packages/pdf/src/report.tsx
index b5390990..c9932cf3 100644
--- a/packages/pdf/src/report.tsx
+++ b/packages/pdf/src/report.tsx
@@ -29,7 +29,7 @@ export const ReportPDFDocument = ({ udap, htmlString, images }: ReportPDFDocumen
         <html>
           <body>
           <style>
-          * {
+          body {
             font-family: Helvetica;
           }
 
@@ -41,7 +41,19 @@ export const ReportPDFDocument = ({ udap, htmlString, images }: ReportPDFDocumen
             font-family: Helvetica-Oblique;
           }
 
-          strong > em {
+          strong em span {
+            font-family: Helvetica-BoldOblique;
+          }
+
+          em strong span {
+            font-family: Helvetica-BoldOblique;
+          }
+
+          strong em {
+            font-family: Helvetica-BoldOblique;
+          }
+
+          em strong {
             font-family: Helvetica-BoldOblique;
           }