Ajoute l'affichage et l'édition des référents sur la page Synthèse EDL

app.territoiresentransitions.react/src/app/pages/collectivite/EtatDesLieux/Accueil/Accueil.tsx

@@ -1,8 +1,19 @@
+import { useState } from 'react';
+import { Button } from '@tet/ui';
 import { referentielToName } from 'app/labels';
 import { useProgressionReferentiel } from './data/useProgressionReferentiel';
 import EtatDesLieux from './EtatDesLieux/EtatDesLieux';
-import { useCurrentCollectivite } from 'core-logic/hooks/useCurrentCollectivite';
+import {
+  CurrentCollectivite,
+  useCurrentCollectivite,
+} from 'core-logic/hooks/useCurrentCollectivite';
 import { useAuth } from 'core-logic/api/auth/AuthProvider';
+import {
+  useMembres,
+  groupeParFonction,
+} from './EtatDesLieux/referents/useMembres';
+import { ModaleReferents } from './EtatDesLieux/referents/ModaleReferents';
+import { ReferentsList } from './EtatDesLieux/referents/ReferentsList';
 
 /**
  * Affiche la page d'accueil d'une collectivité
@@ -35,16 +46,14 @@ const Accueil = (): JSX.Element => {
   /** Sinon on affiche la page.
    * Ceci permet de ne pas appeler `useProgressionReferentiel`
    * qui ne marche pas si l'utilisateur n'a pas les droits */
-  return (
-    <AccueilNonConfidentielle collectiviteId={collectivite.collectivite_id} />
-  );
+  return <AccueilNonConfidentielle collectivite={collectivite} />;
 };
 
 /** Affiche le tableau de bord de l'accueil pour les utilisateurs avec les droits nécessaires */
 const AccueilNonConfidentielle = ({
-  collectiviteId,
+  collectivite,
 }: {
-  collectiviteId: number;
+  collectivite: CurrentCollectivite;
 }) => {
   const {
     caeTable: caeProgressionScore,
@@ -54,34 +63,71 @@ const AccueilNonConfidentielle = ({
     caePotentiel,
     eciPotentiel,
   } = useProgressionReferentiel();
+
+  const { collectivite_id: collectiviteId, readonly } = collectivite;
+  const { data: referents } = useMembres({ collectiviteId, estReferent: true });
+  const referentsParFonction = groupeParFonction(referents || []);
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   return (
     <main data-test="TableauBord" className="bg-bf975 -mb-8">
       {!!collectiviteId && (
-        <div className="fr-container flex flex-col py-16 gap-16">
-          <div>
-            <div className="grid lg:grid-cols-2 gap-6">
-              {/** Climat Air Énergie */}
-              <EtatDesLieux
-                collectiviteId={collectiviteId}
-                progressionScore={caeProgressionScore}
-                repartitionPhases={caeRepartitionPhases}
-                potentiel={caePotentiel}
-                referentiel="cae"
-                title={referentielToName.cae}
-              />
-              {/** Écomomie circulaire */}
-              <EtatDesLieux
-                collectiviteId={collectiviteId}
-                progressionScore={eciProgressionScore}
-                repartitionPhases={eciRepartitionPhases}
-                potentiel={eciPotentiel}
-                referentiel="eci"
-                title={referentielToName.eci}
-              />
-            </div>
+        <div className="fr-container flex flex-col pt-8 pb-16">
+          <div className="flex flex-row justify-between content-center py-4 mb-4 border-b border-b-primary-3">
+            <h2 className="mb-0">{"Synthèse de l'état des lieux"}</h2>
+            {!readonly && (
+              <Button size="sm" onClick={() => setIsModalOpen(true)}>
+                {referents?.length
+                  ? 'Modifier les référents'
+                  : 'Renseigner les référents'}
+              </Button>
+            )}
+          </div>
+          <div className="mb-8">
+            <ReferentsList
+              nomFonction="Chef de projet"
+              referents={referentsParFonction?.technique}
+            />
+            <ReferentsList
+              nomFonction="Élu"
+              referents={referentsParFonction?.politique}
+            />
+            <ReferentsList
+              nomFonction="Conseiller"
+              referents={referentsParFonction?.conseiller}
+            />
+          </div>
+          <div className="grid lg:grid-cols-2 gap-6">
+            {/** Climat Air Énergie */}
+            <EtatDesLieux
+              collectiviteId={collectiviteId}
+              progressionScore={caeProgressionScore}
+              repartitionPhases={caeRepartitionPhases}
+              potentiel={caePotentiel}
+              referentiel="cae"
+              title={referentielToName.cae}
+            />
+            {/** Écomomie circulaire */}
+            <EtatDesLieux
+              collectiviteId={collectiviteId}
+              progressionScore={eciProgressionScore}
+              repartitionPhases={eciRepartitionPhases}
+              potentiel={eciPotentiel}
+              referentiel="eci"
+              title={referentielToName.eci}
+            />
           </div>
         </div>
       )}
+
+      {!readonly && isModalOpen && (
+        <ModaleReferents
+          collectiviteId={collectiviteId}
+          isOpen={isModalOpen}
+          setIsOpen={setIsModalOpen}
+        />
+      )}
     </main>
   );
 };

app.territoiresentransitions.react/src/app/pages/collectivite/EtatDesLieux/Accueil/EtatDesLieux/referents/ReferentItem.tsx

@@ -0,0 +1,57 @@
+import { Icon, Tooltip, useCopyToClipboard } from '@tet/ui';
+import { CollectiviteMembre } from './useMembres';
+import { referentielToName, membreFonctionToLabel } from 'app/labels';
+import { useBaseToast } from 'core-logic/hooks/useBaseToast';
+
+export type ReferentItemProps = {
+  membre: CollectiviteMembre;
+};
+
+/**
+ * Affiche des infos à propos d'un référent de la collectivité
+ */
+export const ReferentItem = (props: ReferentItemProps) => {
+  const { membre } = props;
+  const { copy } = useCopyToClipboard();
+  const { setToast, renderToast } = useBaseToast();
+
+  return (
+    <Tooltip
+      label={
+        <div>
+          <p>
+            <span className="text-grey-8">Champ d&apos;intervention :</span>{' '}
+            <span>
+              {membre.champIntervention?.length
+                ? membre.champIntervention
+                    .map((ref) => referentielToName[ref])
+                    .join(' / ')
+                : 'Non renseigné'}
+            </span>
+          </p>
+          <p>
+            <span className="text-grey-8">Intitulé de poste :</span>{' '}
+            <span>
+              {membre.fonction ? membreFonctionToLabel[membre.fonction] : ''}
+            </span>
+          </p>
+          <p className="text-primary underline">{membre.email}</p>
+        </div>
+      }
+    >
+      <div
+        className="inline-flex gap-1 items-center p-1 cursor-pointer text-grey-8 hover:rounded-md hover:bg-grey-3"
+        onClick={() => {
+          if (membre.email) {
+            copy(membre.email);
+            setToast('success', 'Courriel copié');
+          }
+        }}
+      >
+        {membre.prenom} {membre.nom}{' '}
+        <Icon icon="mail-line" className="text-grey-5" />
+        {renderToast()}
+      </div>
+    </Tooltip>
+  );
+};

app.territoiresentransitions.react/src/app/pages/collectivite/EtatDesLieux/Accueil/EtatDesLieux/referents/ReferentsList.tsx

@@ -0,0 +1,26 @@
+import { ReferentItem } from './ReferentItem';
+import { CollectiviteMembre } from './useMembres';
+
+export type ReferentsListProps = {
+  nomFonction: string;
+  referents?: CollectiviteMembre[];
+};
+
+/**
+ * Affiche une liste de membres référents de la collectivité
+ */
+export const ReferentsList = (props: ReferentsListProps) => {
+  const { nomFonction, referents } = props;
+  return (
+    <p className="mb-0">
+      <span className="text-primary">{nomFonction} :</span>{' '}
+      {referents?.length ? (
+        referents.map((membre) => (
+          <ReferentItem key={membre.userId} membre={membre} />
+        ))
+      ) : (
+        <i>Non renseigné</i>
+      )}
+    </p>
+  );
+};