Ajoute les informations de création et modification dans le header pl…

…utôt que la colonne de la FA et renomme le dossier header
incubateur-ademe · Dec 19, 2024 · 9def16c · 9def16c
1 parent 5be7025
commit 9def16c
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 55 deletions.
diff --git a/...esentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheAction.tsx b/...esentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheAction.tsx
@@ -6,7 +6,7 @@ import { useFicheAction } from './data/useFicheAction';
 import { useUpdateFicheAction } from './data/useUpdateFicheAction';
 import FicheActionActeurs from './FicheActionActeurs/FicheActionActeurs';
 import FicheActionDescription from './FicheActionDescription/FicheActionDescription';
-import FicheActionHeader from './FicheActionHeader/FicheActionHeader';
+import Header from './Header';
 import FicheActionImpact from './FicheActionImpact';
 import FicheActionOnglets from './FicheActionOnglets';
 import FicheActionPilotes from './FicheActionPilotes/FicheActionPilotes';
@@ -46,10 +46,8 @@ const FicheAction = ({ isReadonly }: FicheActionProps) => {
       >
         <div className="flex flex-col w-full px-2 mx-auto xl:max-w-7xl 2xl:max-w-8xl">
           {/* Header de la fiche action (titre, fil d'ariane) */}
-          <FicheActionHeader
-            titre={fiche.titre}
-            collectiviteId={fiche.collectiviteId}
-            axes={fiche.axes ?? []}
+          <Header
+            fiche={fiche}
             isReadonly={isReadonly}
             updateTitle={(titre) => updateFiche({ ...fiche, titre })}
           />
@@ -77,25 +75,6 @@ const FicheAction = ({ isReadonly }: FicheActionProps) => {
                 {/** Fiche action issue du panier d’action */}
                 <FicheActionImpact fiche={fiche} />
 
-                {/* Date de dernière modification */}
-                {fiche.modifiedAt && (
-                  <div className="bg-white border border-grey-3 rounded-lg py-2 px-3.5 text-sm text-primary-10 font-medium italic flex flex-col items-start max-md:items-center gap-1">
-                    <span>
-                      Dernière modification le{' '}
-                      {format(new Date(fiche.modifiedAt), 'dd/MM/yyyy')}
-                    </span>
-                    {fiche.createdAt && (
-                      <span className="text-sm text-primary-10 text-left">
-                        Fiche action créée le{' '}
-                        {format(new Date(fiche.createdAt), 'dd/MM/yyyy')}
-                        {fiche.createdBy !== null
-                          ? ` par ${fiche.createdBy.prenom} ${fiche.createdBy.nom}`
-                          : ''}
-                      </span>
-                    )}
-                  </div>
-                )}
-
                 {/* Pilotes */}
                 <FicheActionPilotes
                   isReadonly={isReadonly}

diff --git a/...c/app/pages/collectivite/PlansActions/FicheAction/FicheActionHeader/FicheActionHeader.tsx b/...c/app/pages/collectivite/PlansActions/FicheAction/FicheActionHeader/FicheActionHeader.tsx
diff --git a/...eAction/FicheActionHeader/CheminFiche.tsx → ...ctions/FicheAction/Header/CheminFiche.tsx b/...eAction/FicheActionHeader/CheminFiche.tsx → ...ctions/FicheAction/Header/CheminFiche.tsx
@@ -18,6 +18,7 @@ const CheminFiche = ({ titre, axeId, collectiviteId }: CheminFicheProps) => {
 
   return (
     <Breadcrumbs
+      size="sm"
       items={generateFilArianeLinks({
         collectiviteId,
         chemin: (data?.chemin ?? []) as TAxeRow[],

diff --git a/...Action/FicheActionHeader/CheminsFiche.tsx → ...tions/FicheAction/Header/CheminsFiche.tsx b/...Action/FicheActionHeader/CheminsFiche.tsx → ...tions/FicheAction/Header/CheminsFiche.tsx
@@ -9,7 +9,7 @@ import CheminFiche from './CheminFiche';
 type CheminsFicheProps = {
   titre: string | null;
   collectiviteId: number;
-  axes: Axe[] | null;
+  axes?: Axe[] | null;
 };
 
 const CheminsFiche = ({ titre, collectiviteId, axes }: CheminsFicheProps) => {

diff --git a/...entransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/Header/Header.tsx b/...entransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/Header/Header.tsx
@@ -0,0 +1,55 @@
+import { format } from 'date-fns';
+
+import { FicheAction } from '@/api/plan-actions';
+
+import { Icon } from '@/ui';
+
+import CheminsFiche from './CheminsFiche';
+import TitreFiche from './TitreFiche';
+
+type FicheActionHeaderProps = {
+  fiche: FicheAction;
+  isReadonly: boolean;
+  updateTitle: (value: string | null) => void;
+};
+
+const Header = ({ fiche, updateTitle, isReadonly }: FicheActionHeaderProps) => {
+  const { titre, collectiviteId, axes } = fiche;
+
+  return (
+    <div className="w-full mb-10" data-test="fiche-header">
+      {/* Titre éditable de la fiche action */}
+      <TitreFiche
+        titre={titre}
+        isReadonly={isReadonly}
+        updateTitle={updateTitle}
+      />
+
+      {/* Fils d'ariane avec emplacements de la fiche */}
+      <CheminsFiche titre={titre} collectiviteId={collectiviteId} axes={axes} />
+
+      {/* Création et modification de la fiche */}
+      <div className="flex max-md:flex-col gap-2 items-center mt-3 py-3 text-sm text-grey-8 border-y boder-primary-3">
+        {fiche.modifiedAt && (
+          <div className="flex gap-1">
+            <Icon icon="calendar-2-line" size="sm" />
+            Modifiée le {format(
+              new Date(fiche.modifiedAt),
+              'dd/MM/yyyy'
+            )} par {fiche.modifiedBy?.prenom} {fiche.modifiedBy?.nom}
+          </div>
+        )}
+        <div className="max-md:hidden w-[1px] h-5 bg-grey-5" />
+        {fiche.createdAt && (
+          <div className="flex gap-1">
+            <Icon icon="file-add-line" size="sm" />
+            Créée le {format(new Date(fiche.createdAt), 'dd/MM/yyyy')} par{' '}
+            {fiche.createdBy?.prenom} {fiche.createdBy?.nom}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/...heAction/FicheActionHeader/TitreFiche.tsx → ...Actions/FicheAction/Header/TitreFiche.tsx b/...heAction/FicheActionHeader/TitreFiche.tsx → ...Actions/FicheAction/Header/TitreFiche.tsx
diff --git a/...esentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/Header/index.ts b/...esentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/Header/index.ts
@@ -0,0 +1 @@
+export { default } from './Header';