Refonte du tableau des données indicateur

.gitignore

@@ -33,7 +33,6 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
-vitest.config.mts.timestamp*
 
 # System Files
 .DS_Store

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

@@ -1,13 +1,8 @@
-import { transformeValeurs } from '@/app/app/pages/collectivite/Indicateurs/Indicateur/detail/transformeValeurs';
-import { useIndicateurValeurs } from '@/app/app/pages/collectivite/Indicateurs/useIndicateurValeurs';
 import { useCurrentCollectivite } from '@/app/core-logic/hooks/useCurrentCollectivite';
-import { Tab, Tabs, useActiveTab } from '@/app/ui/shared/Tabs';
-import { Alert, Checkbox, Tooltip } from '@/ui';
-import { useEffect } from 'react';
+import { Alert } from '@/ui';
 import { SOURCE_COLLECTIVITE } from '../../constants';
+import { IndicateurTable } from '../../table/indicateur-table';
 import { TIndicateurDefinition } from '../../types';
-import { IndicateurValuesTable } from './IndicateurValuesTable';
-import { useToggleIndicateurConfidentiel } from './useToggleIndicateurConfidentiel';
 
 // un message spécifique doit être affiché pour les indicateurs de la séquestration carbone
 const ID_SEQUESTRATION = 'cae_63.';
@@ -20,69 +15,17 @@ export const IndicateurValuesTabs = ({
   definition: TIndicateurDefinition;
   importSource?: string;
 }) => {
-  const { activeTab, onChangeTab } = useActiveTab();
   const collectivite = useCurrentCollectivite();
   const isReadonly =
     !collectivite ||
     collectivite.readonly ||
     (!!importSource && importSource !== SOURCE_COLLECTIVITE);
-  const { mutate: toggleIndicateurConfidentiel, isLoading } =
-    useToggleIndicateurConfidentiel(definition);
   const { confidentiel } = definition;
 
-  const { data: valeursBrutes } = useIndicateurValeurs({
-    id: definition.id,
-    importSource,
-  });
-  const { objectifs, resultats } = transformeValeurs(
-    valeursBrutes,
-    importSource
-  );
-
-  // force l'affichage de l'onglet Résultats sil il n'y a pas d'onglet Objectifs
-  // quand on passe d'une source de données à une autre
-  const avecResultats =
-    !importSource ||
-    importSource === SOURCE_COLLECTIVITE ||
-    resultats?.length > 0;
-  const avecObjectifs =
-    !importSource ||
-    importSource === SOURCE_COLLECTIVITE ||
-    objectifs?.length > 0;
-
-  useEffect(() => {
-    if (activeTab === 1 && !(avecObjectifs && avecResultats)) {
-      onChangeTab(0);
-    }
-  }, [avecObjectifs, avecResultats, activeTab]);
-
   return (
     <>
       {!isReadonly && (
         <>
-          <div className="flex my-10">
-            <Tooltip
-              label="Si le mode privé est activé, le résultat le plus récent n'est plus
-              consultable par les personnes n’étant pas membres de votre
-              collectivité. Seuls les autres résultats restent accessibles pour
-              tous les utilisateurs et la valeur privée reste consultable par
-              l’ADEME et le service support de la plateforme."
-            >
-              <div>
-                {' '}
-                {/** Permet de prendre en compte la checkbox + le label (autrement uniquement la checkbox trigger le tooltip) */}
-                <Checkbox
-                  variant="switch"
-                  label="Résultat récent en mode privé"
-                  checked={confidentiel}
-                  disabled={isLoading}
-                  onChange={() =>
-                    toggleIndicateurConfidentiel(confidentiel || false)
-                  }
-                />
-              </div>
-            </Tooltip>
-          </div>
           {definition.identifiant?.startsWith(ID_SEQUESTRATION) && (
             <Alert
               className="mb-8"
@@ -92,32 +35,14 @@ export const IndicateurValuesTabs = ({
           )}
         </>
       )}
-      <Tabs defaultActiveTab={activeTab} onChange={onChangeTab}>
-        {avecResultats ? (
-          <Tab label="Résultats" icon="checkbox">
-            <IndicateurValuesTable
-              definition={definition}
-              type="resultat"
-              valeurs={resultats}
-              valeursBrutes={valeursBrutes!}
-              isReadonly={isReadonly}
-              importSource={importSource}
-              confidentiel={confidentiel}
-            />
-          </Tab>
-        ) : null}
-        {avecObjectifs ? (
-          <Tab label="Objectifs" icon="calendar-2">
-            <IndicateurValuesTable
-              definition={definition}
-              type="objectif"
-              valeurs={objectifs}
-              valeursBrutes={valeursBrutes!}
-              isReadonly={isReadonly}
-            />
-          </Tab>
-        ) : null}
-      </Tabs>
+      {!!collectivite?.collectivite_id && (
+        <IndicateurTable
+          collectiviteId={collectivite.collectivite_id}
+          definition={definition}
+          confidentiel={confidentiel}
+          readonly={!collectivite || collectivite.readonly}
+        />
+      )}
     </>
   );
 };

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/table/cell-annee-list.tsx

@@ -0,0 +1,97 @@
+import { IndicateurDefinition } from '@/api/indicateurs/domain/definition.schema';
+import { Button, HEAD_CELL_STYLE, Notification, TCell, Tooltip } from '@/ui';
+import classNames from 'classnames';
+import { useState } from 'react';
+import { SourceType } from '../types';
+import { ConfirmDelete } from './confirm-delete';
+import { PreparedData } from './prepare-data';
+import { IndicateurSourceValeur } from './use-indicateur-valeurs';
+
+type CellAnneeListProps = {
+  confidentiel?: boolean;
+  data: PreparedData;
+  definition: IndicateurDefinition;
+  readonly?: boolean;
+  type: SourceType;
+  onDelete: (valeur: IndicateurSourceValeur) => void;
+};
+
+/** Affiche les cellules des années dans l'en-tête du tableau */
+export const CellAnneeList = ({
+  confidentiel,
+  data,
+  definition,
+  readonly,
+  type,
+  onDelete,
+}: CellAnneeListProps) => {
+  const { annees, anneeModePrive, valeursExistantes } = data;
+  const [toBeDeleted, setToBeDeleted] = useState<IndicateurSourceValeur | null>(
+    null
+  );
+
+  return annees?.map((annee) => {
+    const valeur = valeursExistantes.find((v) => v.annee === annee);
+    const modePrive =
+      confidentiel && type === 'resultat' && annee === anneeModePrive;
+
+    return (
+      <TCell
+        key={annee}
+        className={classNames(
+          HEAD_CELL_STYLE,
+          'font-bold text-center relative w-[8.5rem]',
+          { '!py-2': modePrive }
+        )}
+      >
+        <div className="flex items-center justify-between">
+          {modePrive && <ResultatModePrive />}
+          <span className="w-full">{annee}</span>
+          {valeur && !readonly && (
+            <Button
+              className="!bg-transparent !border-none"
+              icon="delete-bin-6-line"
+              variant="outlined"
+              size="xs"
+              onClick={() => {
+                // demande confirmation avant de supprimer
+                if (
+                  (valeur.objectif ?? false) ||
+                  (valeur.resultat ?? false) ||
+                  valeur.resultatCommentaire ||
+                  valeur.objectifCommentaire
+                ) {
+                  setToBeDeleted(valeur);
+                } else {
+                  // sauf pour les lignes n'ayant ni valeur ni commentaire
+                  onDelete(valeur);
+                }
+              }}
+            />
+          )}
+        </div>
+        {toBeDeleted && (
+          <ConfirmDelete
+            annee={annee}
+            valeur={toBeDeleted}
+            unite={definition.unite}
+            onDismissConfirm={(confirmed) => {
+              if (confirmed) {
+                onDelete(toBeDeleted);
+              }
+              setToBeDeleted(null);
+            }}
+          />
+        )}
+      </TCell>
+    );
+  });
+};
+
+const ResultatModePrive = () => (
+  <Tooltip label={<p className="min-w-max">Le résultat est en mode privé</p>}>
+    <div>
+      <Notification icon="lock-fill" classname="!h-10 w-10" />
+    </div>
+  </Tooltip>
+);

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/table/cell-source-name.tsx

@@ -0,0 +1,30 @@
+import { TCell } from '@/ui';
+import { SOURCE_TYPE_LABEL } from '../constants';
+import { SourceType } from '../types';
+
+/** Affiche le nom d'une source de données et un rappel de l'unité */
+export const CellSourceName = ({
+  nom,
+  unite,
+}: {
+  nom: string;
+  unite: string;
+}) => (
+  <TCell className="font-bold text-sm min-w-40">
+    {nom} &nbsp;
+    <sup className="text-primary-9">({unite})</sup>
+  </TCell>
+);
+
+export const getSourceLabel = (source: string, type: SourceType) => {
+  const label =
+    SOURCE_TYPE_LABEL[type][0].toUpperCase() + SOURCE_TYPE_LABEL[type].slice(1);
+  switch (source) {
+    case 'collectivite':
+      return `${label} de la collectivité`;
+    case 'snbc':
+      return `${label} SNBC territorialisée`;
+    default:
+      return `${label} ${source.toUpperCase()}`;
+  }
+};

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/table/cell-value.tsx

@@ -0,0 +1,28 @@
+import { TCell } from '@/ui';
+import { InputValue } from './input-value';
+
+// pour formater les chiffres
+export const NumFormat = Intl.NumberFormat('fr', { maximumFractionDigits: 3 });
+
+type CellValueProps = {
+  value: number | '';
+  readonly?: boolean;
+  onChange?: (value: number | null) => void;
+};
+
+// Affiche une cellule du tableau (chiffre ou champ de saisie)
+export const CellValue = ({ value, readonly, onChange }: CellValueProps) => {
+  return (
+    <TCell variant={readonly ? 'number' : 'input'}>
+      {readonly ? (
+        typeof value === 'number' ? (
+          NumFormat.format(value)
+        ) : (
+          ''
+        )
+      ) : (
+        <InputValue displaySize="sm" value={value} onChange={onChange} />
+      )}
+    </TCell>
+  );
+};

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/table/confirm-delete.tsx

@@ -0,0 +1,87 @@
+import {
+  Modal,
+  ModalFooterOKCancel,
+  Table,
+  TBody,
+  TCell,
+  THead,
+  THeadCell,
+  THeadRow,
+  TRow,
+} from '@/ui';
+import { useState } from 'react';
+import { CellValue } from './cell-value';
+import { IndicateurSourceValeur } from './use-indicateur-valeurs';
+
+type ConfirmDeleteProps = {
+  unite: string;
+  annee: number;
+  valeur: IndicateurSourceValeur;
+  onDismissConfirm: (overwrite: boolean) => void;
+};
+
+/** Affiche un dialogue de confirmation avant suppression d'une valeur
+ */
+export const ConfirmDelete = (props: ConfirmDeleteProps) => {
+  const { annee, valeur, unite, onDismissConfirm } = props;
+  const [isOpen, setIsOpen] = useState(true);
+  const { objectif, objectifCommentaire, resultat, resultatCommentaire } =
+    valeur;
+
+  return (
+    <Modal
+      disableDismiss
+      noCloseButton
+      size="lg"
+      title="Confirmer la suppression"
+      subTitle={`des données de la collectivité pour l'année ${annee}`}
+      openState={{ isOpen, setIsOpen }}
+      render={() => (
+        <>
+          <p className="text-center mb-0">
+            Attention, les données existantes pour l&apos;année <b>{annee}</b>{' '}
+            seront supprimées.
+          </p>
+          <Table>
+            <THead>
+              <THeadRow>
+                <THeadCell>&nbsp;</THeadCell>
+                <THeadCell>Valeur</THeadCell>
+                <THeadCell>Commentaire</THeadCell>
+              </THeadRow>
+            </THead>
+            <TBody>
+              <TRow>
+                <TCell className="font-medium">Résultat ({unite})</TCell>
+                <CellValue readonly value={resultat ?? ''} />
+                <TCell>{resultatCommentaire}</TCell>
+              </TRow>
+              <TRow>
+                <TCell className="font-medium">Objectif ({unite})</TCell>
+                <CellValue readonly value={objectif ?? ''} />
+                <TCell>{objectifCommentaire}</TCell>
+              </TRow>
+            </TBody>
+          </Table>
+        </>
+      )}
+      renderFooter={({ close }) => (
+        <ModalFooterOKCancel
+          btnOKProps={{
+            children: 'Confirmer',
+            onClick: () => {
+              onDismissConfirm(true);
+              close();
+            },
+          }}
+          btnCancelProps={{
+            onClick: () => {
+              onDismissConfirm(false);
+              close();
+            },
+          }}
+        />
+      )}
+    />
+  );
+};