From 865ebc4ba3eaf96192df6abbfb13cf714c678550 Mon Sep 17 00:00:00 2001
From: Marc Rutkowski <marc@attractive-media.fr>
Date: Thu, 16 Jan 2025 16:27:12 +0100
Subject: [PATCH] =?UTF-8?q?Ajoute=20les=20boutons=20"objectifs/r=C3=A9sult?=
 =?UTF-8?q?ats"=20et=20"ajouter=20une=20ann=C3=A9e"=20et=20le=20tableau=20?=
 =?UTF-8?q?des=20valeurs=20d'un=20indicateur?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Indicateurs/table/indicateur-table.tsx    | 74 +++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/table/indicateur-table.tsx

diff --git a/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/table/indicateur-table.tsx b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/table/indicateur-table.tsx
new file mode 100644
index 0000000000..b94f16f073
--- /dev/null
+++ b/app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/table/indicateur-table.tsx
@@ -0,0 +1,74 @@
+import { IndicateurDefinition } from '@/api/indicateurs/domain/definition.schema';
+import { Button, ButtonGroup } from '@/ui';
+import { useState } from 'react';
+import { SourceType } from '../types';
+import { EditValeursModal } from './edit-valeurs-modal';
+import { IndicateurValeursTable } from './indicateur-valeurs-table';
+import { prepareData } from './prepare-data';
+import { PrivateModeSwitch } from './private-mode-switch';
+import { useIndicateurValeurs } from './use-indicateur-valeurs';
+
+export type IndicateurTableProps = {
+  collectiviteId: number;
+  definition: IndicateurDefinition;
+  readonly?: boolean;
+  confidentiel?: boolean;
+};
+
+/**
+ * Affiche les boutons et le tableau des valeurs d'un indicateur
+ */
+export const IndicateurTable = (props: IndicateurTableProps) => {
+  const { collectiviteId, definition, readonly } = props;
+  const { data: valeurs } = useIndicateurValeurs({
+    collectiviteId,
+    indicateurIds: [definition.id],
+  });
+
+  const [type, setType] = useState<SourceType>('resultat');
+  const rawData = valeurs?.indicateurs?.[0];
+  const data = prepareData(rawData, type);
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex">
+        {/** bascule entre résultats et objectifs */}
+        <ButtonGroup
+          size="xs"
+          activeButtonId={type}
+          buttons={[
+            {
+              id: 'resultat',
+              children: 'Mes résultats',
+              onClick: () => setType('resultat'),
+            },
+            {
+              id: 'objectif',
+              children: 'Mes objectifs',
+              onClick: () => setType('objectif'),
+            },
+          ]}
+        />
+        {/** pour ouvrir le dialogue d'édition des valeurs */}
+        <Button size="xs" onClick={() => setIsOpen(true)} disabled={readonly}>
+          Ajouter une année
+        </Button>
+      </div>
+      {/** tableau pour le type de valeurs (objectif | résultat) sélectionné */}
+      <IndicateurValeursTable {...props} data={data} type={type} />
+      {/** résultat récent en mode privé */}
+      {type === 'resultat' && <PrivateModeSwitch definition={definition} />}
+      {/** dialogue d'édition des valeurs */}
+      {isOpen && (
+        <EditValeursModal
+          collectiviteId={collectiviteId}
+          definition={definition}
+          openState={{ isOpen, setIsOpen }}
+          data={data}
+        />
+      )}
+    </div>
+  );
+};