Applique le nouveau layout à la page indicateur prédéfini

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/Indicateur.tsx

@@ -9,7 +9,6 @@ import { useCollectiviteId } from '@/app/core-logic/hooks/params';
 import { redirect } from 'next/navigation';
 import { useParams } from 'react-router-dom';
 import IndicateurDetail from '../detail/IndicateurDetail';
-import { IndicateurPredefini } from './IndicateurPredefini';
 
 /**
  * Affiche le détail d'un indicateur
@@ -42,19 +41,12 @@ const Indicateur = () => {
   }
 
   return (
-    <div
-      className="w-full"
-      data-test={
+    <IndicateurDetail
+      dataTest={
         indicateurId !== undefined ? `ind-${indicateurId}` : `ind-v-${view}`
       }
-    >
-      {isPerso ? (
-        // <IndicateurPersonnalise indicateurId={indicateurId as number} />
-        <IndicateurDetail indicateurId={indicateurId} isPerso />
-      ) : (
-        <IndicateurPredefini indicateurId={indicateurId} />
-      )}
-    </div>
+      {...{ indicateurId, isPerso }}
+    />
   );
 };
 

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurCompose.tsx

@@ -59,7 +59,9 @@ export const IndicateurCompose = ({
   );
 };
 // détermine les actions liées communes à un ensemble de définitions
-const findCommonLinkedActions = (definitions: IndicateurDefinition[]) => {
+export const findCommonLinkedActions = (
+  definitions: IndicateurDefinition[]
+) => {
   // extrait les tableaux d'ids
   const actionsIds = definitions.map(({ actions }) => actions.map((a) => a.id));
 

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/DonneesIndicateur.tsx

@@ -1,6 +1,8 @@
+import { ImportSourcesSelector } from '../Indicateur/detail/ImportSourcesSelector';
 import IndicateurDetailChart from '../Indicateur/detail/IndicateurDetailChart';
 import { IndicateurInfoLiees } from '../Indicateur/detail/IndicateurInfoLiees';
 import { IndicateurValuesTabs } from '../Indicateur/detail/IndicateurValuesTabs';
+import { useIndicateurImportSources } from '../Indicateur/detail/useImportSources';
 import { TIndicateurDefinition } from '../types';
 import DescriptionIndicateurInput from './DescriptionIndicateurInput';
 import UniteIndicateurInput from './UniteIndicateurInput';
@@ -20,25 +22,42 @@ const DonneesIndicateur = ({
   updateUnite,
   updateDescription,
 }: Props) => {
-  const { description, unite, rempli, titre } = definition;
+  const { description, commentaire, unite, rempli, titre, titreLong } =
+    definition;
+
+  const { sources, currentSource, setCurrentSource } =
+    useIndicateurImportSources(definition.id);
 
   return (
     <div className="flex flex-col gap-8">
+      {!!sources?.length && (
+        <ImportSourcesSelector
+          definition={definition}
+          sources={sources}
+          currentSource={currentSource}
+          setCurrentSource={setCurrentSource}
+        />
+      )}
+
       {/* Graphe */}
       <IndicateurDetailChart
         className="mb-8"
         definition={definition}
+        source={currentSource}
         rempli={rempli}
-        titre={titre}
+        titre={titreLong || titre}
         fileName={titre}
       />
 
       {/* Tableau */}
-      <IndicateurValuesTabs definition={definition} />
+      <IndicateurValuesTabs
+        definition={definition}
+        importSource={currentSource}
+      />
 
       {/* Description */}
       <DescriptionIndicateurInput
-        description={description}
+        description={isPerso ? description : commentaire}
         updateDescription={updateDescription}
         disabled={isReadonly}
       />

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/IndicateurDetail.tsx

@@ -2,16 +2,21 @@ import { useIndicateurDefinition } from '../Indicateur/useIndicateurDefinition';
 import IndicateurLayout from './IndicateurLayout';
 
 type Props = {
+  dataTest?: string;
   indicateurId: number | string;
   isPerso?: boolean;
 };
 
-const IndicateurDetail = ({ indicateurId, isPerso = false }: Props) => {
+const IndicateurDetail = ({
+  dataTest,
+  indicateurId,
+  isPerso = false,
+}: Props) => {
   const definition = useIndicateurDefinition(indicateurId);
 
   if (!definition) return null;
 
-  return <IndicateurLayout definition={definition} isPerso={isPerso} />;
+  return <IndicateurLayout {...{ dataTest, definition, isPerso }} />;
 };
 
 export default IndicateurDetail;

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/IndicateurLayout.tsx

@@ -12,6 +12,7 @@ import BadgeOpenData from '../components/BadgeOpenData';
 import { TIndicateurDefinition } from '../types';
 import DonneesIndicateur from './DonneesIndicateur';
 import IndicateurToolbar from './IndicateurToolbar';
+import SousIndicateurs from './SousIndicateurs';
 
 type IndicateurLayoutProps = {
   dataTest?: string;
@@ -24,14 +25,18 @@ const IndicateurLayout = ({
   definition,
   isPerso = false,
 }: IndicateurLayoutProps) => {
-  const { titre, rempli } = definition;
+  const { enfants, sansValeur, rempli, titre } = definition;
 
   const { mutate: updateDefinition } = useUpdateIndicateurDefinition();
+
   const collectivite = useCurrentCollectivite();
 
   const collectiviteId = collectivite?.collectivite_id;
   const isReadonly = !collectivite || collectivite?.readonly;
 
+  const composeSansAgregation = !!enfants && enfants.length > 0 && sansValeur;
+  const composeAvecAgregation = !!enfants && enfants.length > 0 && !sansValeur;
+
   // Mise à jour des champs de l'indicateur
   const handleUpdate = (
     name: 'description' | 'commentaire' | 'unite' | 'titre',
@@ -45,6 +50,9 @@ const IndicateurLayout = ({
 
   const handleTitreUpdate = (value: string) => handleUpdate('titre', value);
 
+  const handleCommentaireUpdate = (value: string) =>
+    handleUpdate('commentaire', value);
+
   const handleUniteUpdate = (value: string) => handleUpdate('unite', value);
 
   /**
@@ -76,51 +84,72 @@ const IndicateurLayout = ({
 
       <div className="flex flex-col px-10 py-6">
         <div className="flex items-center justify-between">
-          <div className="flex gap-2">
-            <BadgeACompleter a_completer={!rempli} />
-            <BadgeIndicateurPerso />
-            {definition.participationScore && (
-              <Badge
-                title={`Participe au score ${referentielToName.cae}`}
-                uppercase={false}
-                state="grey"
-              />
-            )}
-            {definition.hasOpenData && <BadgeOpenData />}
-          </div>
-
+          {/* Liste des badges */}
+          {!composeSansAgregation && (
+            <div className="flex gap-2">
+              <BadgeACompleter a_completer={!rempli} />
+              {isPerso && <BadgeIndicateurPerso />}
+              {definition.participationScore && (
+                <Badge
+                  title={`Participe au score ${referentielToName.cae}`}
+                  uppercase={false}
+                  state="grey"
+                />
+              )}
+              {definition.hasOpenData && <BadgeOpenData />}
+            </div>
+          )}
+
+          {/* Menu export / infos / suppression */}
           <IndicateurToolbar
             {...{ definition, isPerso, isReadonly }}
             collectiviteId={collectiviteId!}
+            className="ml-auto"
           />
         </div>
 
-        {/* Indicateur sans enfant, groupe d'indicateurs avec agrégation,
-        ou indicateur personnalisé */}
-        <Tabs className="mt-12" tabsListClassName="!justify-start">
-          {/* Données */}
-          <Tab label="Données">
-            <DonneesIndicateur
-              {...{ definition, isPerso, isReadonly }}
-              updateUnite={handleUniteUpdate}
-              updateDescription={handleDescriptionUpdate}
-            />
-          </Tab>
-
-          {/* Actions des référentiels liées */}
-          {!isPerso ? (
-            <Tab label="Actions des référentiels liées">
-              <ActionsLieesListe
-                actionsIds={(definition.actions ?? []).map((a) => a.id)}
+        {composeSansAgregation ? (
+          // Groupe d'indicateurs sans agrégation
+          <SousIndicateurs definition={definition} enfantsIds={enfants} />
+        ) : (
+          // Indicateur sans enfant, groupe d'indicateurs avec agrégation,
+          // ou indicateur personnalisé
+          <Tabs className="mt-12" tabsListClassName="!justify-start">
+            {/* Données */}
+            <Tab label="Données">
+              <DonneesIndicateur
+                {...{ definition, isPerso, isReadonly }}
+                updateUnite={handleUniteUpdate}
+                updateDescription={(value) =>
+                  isPerso
+                    ? handleDescriptionUpdate(value)
+                    : handleCommentaireUpdate(value)
+                }
               />
             </Tab>
-          ) : undefined}
 
-          {/* Fiches des plans liées */}
-          <Tab label="Fiches des plans liées">
-            <FichesActionLiees definition={definition} />
-          </Tab>
-        </Tabs>
+            {/* Sous indicateurs */}
+            {composeAvecAgregation ? (
+              <Tab label={`${enfants.length} Sous indicateurs`}>
+                <SousIndicateurs definition={definition} enfantsIds={enfants} />
+              </Tab>
+            ) : undefined}
+
+            {/* Actions des référentiels liées */}
+            {!isPerso ? (
+              <Tab label="Actions des référentiels liées">
+                <ActionsLieesListe
+                  actionsIds={(definition.actions ?? []).map((a) => a.id)}
+                />
+              </Tab>
+            ) : undefined}
+
+            {/* Fiches des plans liées */}
+            <Tab label="Fiches des plans liées">
+              <FichesActionLiees definition={definition} />
+            </Tab>
+          </Tabs>
+        )}
 
         <ScrollTopButton className="mt-8" />
       </div>

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/IndicateurToolbar.tsx

@@ -1,5 +1,6 @@
 import { ToolbarIconButton } from '@/app/ui/buttons/ToolbarIconButton';
 import { Modal, ModalFooterOKCancel } from '@/ui';
+import classNames from 'classnames';
 import { useState } from 'react';
 import { IndicateurSidePanelToolbar } from '../Indicateur/IndicateurSidePanelToolbar';
 import { useExportIndicateurs } from '../Indicateur/useExportIndicateurs';
@@ -11,13 +12,15 @@ type Props = {
   collectiviteId: number;
   isPerso?: boolean;
   isReadonly?: boolean;
+  className?: string;
 };
 
 const IndicateurToolbar = ({
   definition,
   collectiviteId,
   isPerso = false,
   isReadonly = false,
+  className,
 }: Props) => {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
@@ -33,7 +36,7 @@ const IndicateurToolbar = ({
 
   return (
     <>
-      <div className="flex gap-2">
+      <div className={classNames('flex gap-2', className)}>
         <ToolbarIconButton
           disabled={isLoading}
           icon="download"

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/SousIndicateurs.tsx

@@ -0,0 +1,41 @@
+import { findCommonLinkedActions } from '../Indicateur/detail/IndicateurCompose';
+import { IndicateurEnfant } from '../Indicateur/detail/IndicateurEnfant';
+import { useIndicateurDefinitions } from '../Indicateur/useIndicateurDefinition';
+import { TIndicateurDefinition } from '../types';
+
+type Props = {
+  definition: TIndicateurDefinition;
+  enfantsIds: number[];
+};
+
+const SousIndicateurs = ({ definition, enfantsIds }: Props) => {
+  const { data: enfants } = useIndicateurDefinitions(definition.id, enfantsIds);
+
+  if (!enfants?.length) return null;
+
+  const actionsLieesCommunes = findCommonLinkedActions([
+    definition,
+    ...enfants,
+  ]);
+
+  const enfantsTries = enfants.sort((a, b) => {
+    if (!a.identifiant || !b.identifiant) {
+      return 0;
+    }
+    return a.identifiant.localeCompare(b.identifiant);
+  });
+
+  return (
+    <div>
+      {enfantsTries.map((enfant) => (
+        <IndicateurEnfant
+          key={enfant.id}
+          definition={enfant}
+          actionsLieesCommunes={actionsLieesCommunes}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default SousIndicateurs;