Ajout des CTA sur la vue vide des indicateurs

incubateur-ademe · Jan 29, 2025 · 95c76ef · 95c76ef
1 parent 3eb43d9
commit 95c76ef
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 11 deletions.
diff --git a/....react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx b/....react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurDetailChart.tsx
@@ -14,6 +14,8 @@ type Props = {
   source?: string;
   className?: string;
   buttonClassName?: string;
+  isReadonly?: boolean;
+  onAddValue?: () => void;
 };
 
 /**
@@ -25,6 +27,8 @@ const IndicateurDetailChart = ({
   source,
   className,
   buttonClassName,
+  isReadonly = true,
+  onAddValue,
 }: Props) => {
   /** Gère l'affichage de la modale */
   const [isChartOpen, setIsChartOpen] = useState(false);
@@ -82,6 +86,16 @@ const IndicateurDetailChart = ({
       className="h-64 w-full"
       picto={(props) => <PictoIndicateurVide {...props} />}
       title="Aucune valeur n'est associée aux résultats ou aux objectifs de la collectivité !"
+      actions={
+        !isReadonly && onAddValue
+          ? [
+              {
+                children: 'Ajouter une valeur',
+                onClick: () => onAddValue(),
+              },
+            ]
+          : undefined
+      }
     />
   );
 };

diff --git a/...s.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurValuesTabs.tsx b/...s.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurValuesTabs.tsx
@@ -1,5 +1,6 @@
 import { useCurrentCollectivite } from '@/app/core-logic/hooks/useCurrentCollectivite';
 import { Alert } from '@/ui';
+import { OpenState } from '@/ui/utils/types';
 import { SOURCE_COLLECTIVITE } from '../../constants';
 import { IndicateurTable } from '../../table/indicateur-table';
 import { TIndicateurDefinition } from '../../types';
@@ -11,9 +12,11 @@ const ID_SEQUESTRATION = 'cae_63.';
 export const IndicateurValuesTabs = ({
   definition,
   importSource,
+  openModalState,
 }: {
   definition: TIndicateurDefinition;
   importSource?: string;
+  openModalState?: OpenState;
 }) => {
   const collectivite = useCurrentCollectivite();
   const isReadonly =
@@ -41,6 +44,7 @@ export const IndicateurValuesTabs = ({
           definition={definition}
           confidentiel={confidentiel}
           readonly={!collectivite || collectivite.isReadOnly}
+          openModalState={openModalState}
         />
       )}
     </>

diff --git a/...esentransitions.react/src/app/pages/collectivite/Indicateurs/detail/DonneesIndicateur.tsx b/...esentransitions.react/src/app/pages/collectivite/Indicateurs/detail/DonneesIndicateur.tsx
@@ -1,4 +1,6 @@
 import { Divider } from '@/ui';
+import classNames from 'classnames';
+import { useState } from 'react';
 import { ImportSourcesSelector } from '../Indicateur/detail/ImportSourcesSelector';
 import IndicateurDetailChart from '../Indicateur/detail/IndicateurDetailChart';
 import { IndicateurValuesTabs } from '../Indicateur/detail/IndicateurValuesTabs';
@@ -23,6 +25,8 @@ const DonneesIndicateur = ({
   updateUnite,
   updateDescription,
 }: Props) => {
+  const [isTableModalOpen, setIsTableModalOpen] = useState(false);
+
   const { description, commentaire, unite, rempli } = definition;
 
   const { sources, currentSource, setCurrentSource } =
@@ -55,18 +59,30 @@ const DonneesIndicateur = ({
           className="mb-6"
           definition={definition}
           source={currentSource}
+          isReadonly={isReadonly}
+          onAddValue={() => setIsTableModalOpen(true)}
         />
       </div>
 
-      <Divider />
+      <div
+        className={classNames('flex flex-col gap-7', {
+          'invisible h-0': !rempli,
+        })}
+      >
+        <Divider />
 
-      {/* Tableau */}
-      <IndicateurValuesTabs
-        definition={definition}
-        importSource={currentSource}
-      />
+        {/* Tableau */}
+        <IndicateurValuesTabs
+          definition={definition}
+          importSource={currentSource}
+          openModalState={{
+            isOpen: isTableModalOpen,
+            setIsOpen: setIsTableModalOpen,
+          }}
+        />
 
-      <Divider className="mt-6" />
+        <Divider className="mt-6" />
+      </div>
 
       {/* Thématiques */}
       {isPerso && (

diff --git a/...iresentransitions.react/src/app/pages/collectivite/Indicateurs/table/indicateur-table.tsx b/...iresentransitions.react/src/app/pages/collectivite/Indicateurs/table/indicateur-table.tsx
@@ -1,6 +1,7 @@
 import { IndicateurDefinition } from '@/api/indicateurs/domain/definition.schema';
 import { Button, ButtonGroup } from '@/ui';
-import { useState } from 'react';
+import { OpenState } from '@/ui/utils/types';
+import { useEffect, useState } from 'react';
 import { SourceType } from '../types';
 import { EditValeursModal } from './edit-valeurs-modal';
 import { IndicateurValeursTable } from './indicateur-valeurs-table';
@@ -13,13 +14,14 @@ export type IndicateurTableProps = {
   definition: IndicateurDefinition;
   readonly?: boolean;
   confidentiel?: boolean;
+  openModalState?: OpenState;
 };
 
 /**
  * Affiche les boutons et le tableau des valeurs d'un indicateur
  */
 export const IndicateurTable = (props: IndicateurTableProps) => {
-  const { collectiviteId, definition, readonly } = props;
+  const { collectiviteId, definition, readonly, openModalState } = props;
   const { data: valeurs } = useIndicateurValeurs({
     collectiviteId,
     indicateurIds: [definition.id],
@@ -29,7 +31,11 @@ export const IndicateurTable = (props: IndicateurTableProps) => {
   const rawData = valeurs?.indicateurs?.[0];
   const data = prepareData(rawData, type);
 
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(openModalState?.isOpen ?? false);
+
+  useEffect(() => {
+    setIsOpen(openModalState?.isOpen ?? false);
+  }, [openModalState?.isOpen]);
 
   return (
     <div className="flex flex-col gap-4">
@@ -65,7 +71,13 @@ export const IndicateurTable = (props: IndicateurTableProps) => {
         <EditValeursModal
           collectiviteId={collectiviteId}
           definition={definition}
-          openState={{ isOpen, setIsOpen }}
+          openState={{
+            isOpen,
+            setIsOpen: (value) => {
+              setIsOpen(value);
+              openModalState?.setIsOpen(value);
+            },
+          }}
           data={data}
         />
       )}