Affichage des previews pour les groupements d'indicateurs

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

@@ -59,9 +59,7 @@ export const IndicateurCompose = ({
   );
 };
 // détermine les actions liées communes à un ensemble de définitions
-export const findCommonLinkedActions = (
-  definitions: IndicateurDefinition[]
-) => {
+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/IndicateurLayout.tsx

@@ -83,7 +83,7 @@ const IndicateurLayout = ({
       />
 
       <div className="flex flex-col px-10 py-6">
-        <div className="flex items-center justify-between">
+        <div className="flex items-center justify-between mb-12">
           {/* Liste des badges */}
           {!composeSansAgregation && (
             <div className="flex gap-2">
@@ -110,14 +110,11 @@ const IndicateurLayout = ({
 
         {composeSansAgregation ? (
           // Groupe d'indicateurs sans agrégation
-          <SousIndicateurs definition={definition} enfantsIds={enfants} />
+          <SousIndicateurs enfantsIds={enfants} />
         ) : (
           // Indicateur sans enfant, groupe d'indicateurs avec agrégation,
           // ou indicateur personnalisé
-          <Tabs
-            className="mt-12"
-            tabsListClassName="!justify-start flex-nowrap overflow-x-scroll"
-          >
+          <Tabs tabsListClassName="!justify-start flex-nowrap overflow-x-scroll">
             {/* Données */}
             <Tab label="Données">
               <DonneesIndicateur
@@ -134,7 +131,7 @@ const IndicateurLayout = ({
             {/* Sous indicateurs */}
             {composeAvecAgregation ? (
               <Tab label={`${enfants.length} Sous indicateurs`}>
-                <SousIndicateurs definition={definition} enfantsIds={enfants} />
+                <SousIndicateurs enfantsIds={enfants} />
               </Tab>
             ) : undefined}
 

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

@@ -1,40 +1,20 @@
-import { findCommonLinkedActions } from '../Indicateur/detail/IndicateurCompose';
-import { IndicateurEnfant } from '../Indicateur/detail/IndicateurEnfant';
-import { useIndicateurDefinitions } from '../Indicateur/useIndicateurDefinition';
-import { TIndicateurDefinition } from '../types';
+import IndicateursListe from '../lists/indicateurs-list';
 
 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);
-  });
+const SousIndicateurs = ({ enfantsIds }: Props) => {
+  if (!enfantsIds?.length) return null;
 
   return (
-    <div>
-      {enfantsTries.map((enfant) => (
-        <IndicateurEnfant
-          key={enfant.id}
-          definition={enfant}
-          actionsLieesCommunes={actionsLieesCommunes}
-        />
-      ))}
-    </div>
+    <IndicateursListe
+      filtres={{ indicateurIds: enfantsIds }}
+      sortSettings={{
+        defaultSort: 'text',
+      }}
+      menuContainerClassname="!border-0 pb-0"
+    />
   );
 };
 

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/lists/indicateurs-list/badge-list.tsx

@@ -1,18 +1,13 @@
-import classNames from 'classnames';
-
 import { Indicateurs } from '@/api';
-import {
-  ExportIndicateursPageName,
-  useExportIndicateurs,
-} from '@/app/app/pages/collectivite/Indicateurs/Indicateur/useExportIndicateurs';
+import { ExportIndicateursPageName } from '@/app/app/pages/collectivite/Indicateurs/Indicateur/useExportIndicateurs';
 import FilterBadges, {
   CustomFilterBadges,
   useFiltersToBadges,
 } from '@/app/ui/shared/filters/filter-badges';
-import { Badge } from '@/ui';
+import ExportButton from './export-button';
 
 type Props = {
-  pageName: ExportIndicateursPageName; // tracking
+  pageName?: ExportIndicateursPageName; // tracking
   definitions?: Indicateurs.domain.IndicateurListItem[];
   filters: Indicateurs.FetchFiltre;
   customFilterBadges?: CustomFilterBadges;
@@ -30,42 +25,26 @@ const BadgeList = ({
   isEmpty,
   isLoading,
 }: Props) => {
-  // fonction d'export
-  const { mutate: exportIndicateurs, isLoading: isDownloadingExport } =
-    useExportIndicateurs(pageName, definitions);
-
   const { data: filterBadges } = useFiltersToBadges({
     filters,
     customValues: customFilterBadges,
   });
 
+  const displayBadgesList = !!filterBadges?.length;
+  const displayExportButton = !isEmpty && !isLoading && !!pageName;
+
+  if (!displayBadgesList && !pageName) return null;
+
   return (
     <div className="flex flex-row justify-between items-start">
-      {!!filterBadges?.length && (
+      {displayBadgesList && (
         <FilterBadges badges={filterBadges} resetFilters={resetFilters} />
       )}
-      {!isEmpty && !isLoading && (
-        <button
-          className={classNames('shrink-0 ml-auto', {
-            'opacity-50': isDownloadingExport,
-          })}
-          disabled={isDownloadingExport}
-          onClick={() => exportIndicateurs()}
-        >
-          <Badge
-            className="py-4"
-            icon="download-line"
-            iconPosition="left"
-            title={
-              filterBadges?.length
-                ? 'Exporter le résultat de mon filtre en Excel'
-                : 'Exporter tous les indicateurs en Excel'
-            }
-            state="default"
-            uppercase={false}
-            size="sm"
-          />
-        </button>
+      {displayExportButton && (
+        <ExportButton
+          {...{ pageName, definitions }}
+          isFiltered={!!filterBadges && filterBadges.length > 0}
+        />
       )}
     </div>
   );

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/lists/indicateurs-list/export-button.tsx

@@ -0,0 +1,45 @@
+import { Indicateurs } from '@/api';
+import {
+  ExportIndicateursPageName,
+  useExportIndicateurs,
+} from '@/app/app/pages/collectivite/Indicateurs/Indicateur/useExportIndicateurs';
+import { Badge } from '@/ui';
+import classNames from 'classnames';
+
+type Props = {
+  definitions?: Indicateurs.domain.IndicateurListItem[];
+  pageName: ExportIndicateursPageName; // tracking
+  isFiltered: boolean;
+};
+
+const ExportButton = ({ definitions, pageName, isFiltered }: Props) => {
+  // fonction d'export
+  const { mutate: exportIndicateurs, isLoading: isDownloadingExport } =
+    useExportIndicateurs(pageName, definitions);
+
+  return (
+    <button
+      className={classNames('shrink-0 ml-auto', {
+        'opacity-50': isDownloadingExport,
+      })}
+      disabled={isDownloadingExport}
+      onClick={() => exportIndicateurs()}
+    >
+      <Badge
+        className="py-4"
+        icon="download-line"
+        iconPosition="left"
+        title={
+          isFiltered
+            ? 'Exporter le résultat de mon filtre en Excel'
+            : 'Exporter tous les indicateurs en Excel'
+        }
+        state="default"
+        uppercase={false}
+        size="sm"
+      />
+    </button>
+  );
+};
+
+export default ExportButton;

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/lists/indicateurs-list/indicateurs-list.tsx

@@ -22,6 +22,7 @@ import { makeCollectiviteIndicateursUrl } from '@/app/app/paths';
 import { useCurrentCollectivite } from '@/app/core-logic/hooks/useCurrentCollectivite';
 import { CustomFilterBadges } from '@/app/ui/shared/filters/filter-badges';
 import { OpenState } from '@/ui/utils/types';
+import classNames from 'classnames';
 
 type sortByOptionsType = {
   label: string;
@@ -50,7 +51,7 @@ const sortByOptions: sortByOptionsType[] = [
 ];
 
 type Props = {
-  settings: (openState: OpenState) => React.ReactNode;
+  settings?: (openState: OpenState) => React.ReactNode;
   filtres?: Indicateurs.FetchFiltre;
   customFilterBadges?: CustomFilterBadges;
   resetFilters?: () => void;
@@ -59,7 +60,8 @@ type Props = {
   /** Rend les cartes indicateurs éditables */
   isEditable?: boolean;
   // pour le tracking
-  pageName: ExportIndicateursPageName;
+  pageName?: ExportIndicateursPageName;
+  menuContainerClassname?: string;
 };
 
 /** Liste de fiches action avec tri et options de fitlre */
@@ -74,6 +76,7 @@ const IndicateursListe = ({
   settings,
   isEditable,
   maxNbOfCards = 9,
+  menuContainerClassname,
 }: Props) => {
   const tracker = useEventTracker('app/indicateurs/tous');
 
@@ -153,8 +156,13 @@ const IndicateursListe = ({
   const [displayGraphs, setDisplayGraphs] = useState(true);
 
   return (
-    <>
-      <div className="flex items-center gap-8 py-6 border-y border-primary-3">
+    <div className="flex flex-col gap-8">
+      <div
+        className={classNames(
+          'flex items-center gap-8 py-6 border-y border-primary-3',
+          menuContainerClassname
+        )}
+      >
         {/** Tri */}
         <div className="w-64">
           <Select
@@ -203,7 +211,7 @@ const IndicateursListe = ({
           displaySize="sm"
         />
         {/** Bouton d'édition des filtres (une modale avec bouton ou un ButtonMenu) */}
-        {settings({ isOpen: isSettingsOpen, setIsOpen: setIsSettingsOpen })}
+        {settings?.({ isOpen: isSettingsOpen, setIsOpen: setIsSettingsOpen })}
       </div>
       {/** Liste des filtres appliqués et bouton d'export */}
       <BadgeList
@@ -269,7 +277,7 @@ const IndicateursListe = ({
           />
         </div>
       )}
-    </>
+    </div>
   );
 };
 

packages/api/src/collectivites/shared/domain/filtre-ressource-liees.schema.ts

@@ -17,6 +17,8 @@ export const filtreRessourceLieesSchema = z.object({
   financeurIds: z.coerce.number().array().optional(),
   partenaireIds: z.coerce.number().array().optional(),
   libreTagsIds: z.coerce.number().array().optional(),
+
+  indicateurIds: z.coerce.number().array().optional(),
 });
 
 export type FiltreRessourceLiees = z.infer<typeof filtreRessourceLieesSchema>;

packages/api/src/indicateurs/domain/fetch-options.schema.ts

@@ -24,6 +24,7 @@ export type FiltreSpecifique = z.infer<typeof filtreSpecifiqueSchema>;
  */
 export const filtreSchema = filtreRessourceLieesSchema
   .pick({
+    indicateurIds: true,
     thematiqueIds: true,
     planActionIds: true,
     utilisateurPiloteIds: true,