List mesure audit statuts with trpc

Author: farnoux

apps/app/src/referentiels/ReferentielTable/useReferentiel.ts

@@ -210,7 +210,7 @@ const useReferentielData = (referentiel: string | null) => {
         ...(actionById[action.action_id] || {}),
       }));
     },
-    [actionById]
+    [actionById, rows]
   );
 
   return {
@@ -266,7 +266,7 @@ const isSousAction = (action: ActionReferentiel) =>
  * mais cela paraissait plus compliqué
  * Ref: https://github.com/TanStack/table/blob/v7/src/plugin-hooks/useExpanded.js
  */
-const useToggleRowExpandedReducer = <ActionSubset extends IAction>(
+export const useToggleRowExpandedReducer = <ActionSubset extends IAction>(
   rows: TActionsSubset<ActionSubset>
 ) => {
   // état courant des touches "modificatrices"

apps/app/src/referentiels/audits/AuditSuivi/Cells.tsx

@@ -1,17 +1,17 @@
 import { Icon } from '@/ui';
 import { CellProps } from 'react-table';
 import { BadgeAuditStatut } from '../BadgeAuditStatut';
-import { TAuditSuiviRow } from './queries';
+import { MesureAuditStatut } from './useTableData';
 
-type TCellProps = CellProps<TAuditSuiviRow>;
+type TCellProps = CellProps<MesureAuditStatut>;
 
 /**
  * Affiche une cellule contenant le statut d'audit d'une action
  */
 export const CellAuditStatut = (props: TCellProps) => {
   const { value, row } = props;
 
-  return row.original.type === 'action' ? (
+  return row.original.mesureType === 'action' ? (
     <BadgeAuditStatut statut={value || 'non_audite'} />
   ) : null;
 };

apps/app/src/referentiels/audits/AuditSuivi/FiltreOrdreDuJour.stories.tsx

@@ -1,21 +1,21 @@
-import { Meta} from '@storybook/nextjs';
-import {action} from 'storybook/actions';
-import {FiltreOrdreDuJour} from './FiltreOrdreDuJour';
+import { Meta } from '@storybook/nextjs';
+import { action } from 'storybook/actions';
+import { FiltreOrdreDuJour } from './FiltreOrdreDuJour';
 
 export default {
   component: FiltreOrdreDuJour,
 } as Meta;
 
 export const Tous = {
   args: {
-    filters: {ordre_du_jour: ['tous']},
+    filters: { ordreDuJour: ['tous'] },
     setFilters: action('setFilters'),
   },
 };
 
 export const Selection = {
   args: {
-    filters: {ordre_du_jour: ['true']},
+    filters: { ordreDuJour: ['true'] },
     setFilters: action('setFilters'),
   },
 };

apps/app/src/referentiels/audits/AuditSuivi/FiltreOrdreDuJour.tsx

@@ -5,8 +5,6 @@ import {
 import { ITEM_ALL } from '@/ui';
 import { TFiltreProps } from './filters';
 
-export const FILTER = 'ordre_du_jour';
-
 export const filterItems = [
   { value: ITEM_ALL, label: 'Tous' },
   { value: 'true', label: 'Oui' },
@@ -27,9 +25,11 @@ export const FiltreOrdreDuJour = (props: TFiltreProps) => {
           label="A discuter - Séance d'audit"
         />
       )}
-      values={filters[FILTER]}
+      values={filters.ordreDuJour}
       options={filterItems}
-      onSelect={(newValues) => setFilters({ ...filters, [FILTER]: newValues })}
+      onSelect={(newValues) =>
+        setFilters({ ...filters, ordreDuJour: newValues })
+      }
     />
   );
 };

apps/app/src/referentiels/audits/AuditSuivi/Table.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo } from 'react';
 import {
   CellProps,
   Column,
@@ -7,13 +7,13 @@ import {
   useFlexLayout,
   useTable,
 } from 'react-table';
+import { ReferentielTable } from '../../ReferentielTable';
+import { CellAction } from '../../ReferentielTable/CellAction';
 import { CellAuditStatut, CellCheckmark } from './Cells';
 import { FiltreAuditStatut } from './FiltreAuditStatut';
 import { FiltreOrdreDuJour } from './FiltreOrdreDuJour';
 import { TAuditSuiviRow } from './queries';
-import { TableData } from './useTableData';
-import { CellAction } from '../../ReferentielTable/CellAction';
-import { ReferentielTable } from '../../ReferentielTable';
+import { MesureAuditStatut, TableData } from './useTableData';
 
 export type TAuditSuiviTableProps = {
   tableData: TableData;
@@ -22,18 +22,18 @@ export type THeaderProps = HeaderProps<TAuditSuiviRow> & {
   setFilters: (filters: string[]) => void;
 };
 export type TCellProps = CellProps<TAuditSuiviRow>;
-export type TColumn = Column<TAuditSuiviRow>;
+export type TColumn = Column<MesureAuditStatut>;
 
 // défini les colonnes de la table
 const COLUMNS: TColumn[] = [
   {
-    accessor: 'nom', // la clé pour accéder à la valeur
+    accessor: 'mesureNom', // la clé pour accéder à la valeur
     Header: 'Sous-actions', // rendu dans la ligne d'en-tête
     Cell: CellAction as any, // rendu d'une cellule
     width: '100%',
   },
   {
-    accessor: 'ordre_du_jour',
+    accessor: 'ordreDuJour',
     Header: FiltreOrdreDuJour as any,
     Cell: CellCheckmark,
     width: 180,
@@ -65,15 +65,12 @@ export const Table = (props: TAuditSuiviTableProps) => {
   const { toggleAllRowsExpanded } = tableInstance;
 
   // initialement tout est déplié
-  const isInitialLoading = useRef(true);
   useEffect(() => {
-    if (table?.data?.length && isInitialLoading.current) {
-      isInitialLoading.current = false;
+    if (table.data.length) {
       toggleAllRowsExpanded(true);
     }
-  }, [table?.data?.length, toggleAllRowsExpanded, isInitialLoading]);
+  }, [table.data.length, toggleAllRowsExpanded]);
 
-  // rendu de la table
   return (
     <ReferentielTable
       dataTest="suivi-audit"

apps/app/src/referentiels/audits/AuditSuivi/filters.tsx

@@ -1,23 +1,23 @@
 import { ITEM_ALL } from '@/ui';
 
 export type TFilters = {
-  ordre_du_jour: string[];
+  ordreDuJour: string[];
   statut: string[];
 };
 
 export type TSetFilters = (newFilter: TFilters | null) => void;
 
 // valeurs par défaut des filtres
 export const initialFilters: TFilters = {
-  ordre_du_jour: [ITEM_ALL],
+  ordreDuJour: [ITEM_ALL],
   statut: [ITEM_ALL],
 };
 
 export const noFilters: TFilters = initialFilters;
 
 // mapping nom des filtres => params dans l'url
 export const nameToShortNames = {
-  ordre_du_jour: 'o',
+  ordreDuJour: 'o',
   statut: 's',
 };
 

apps/app/src/referentiels/audits/AuditSuivi/queries.tsx

@@ -1,55 +1,9 @@
-import { DBClient } from '@/api';
-
-import { ITEM_ALL } from '@/ui';
 import { ActionReferentiel } from '../../DEPRECATED_scores.types';
 import { TAuditStatut } from '../types';
-import { TFilters } from './filters';
 
 // un sous-ensemble des champs pour alimenter notre table
 export type TAuditSuiviRow = ActionReferentiel & {
   action_id: string;
   statut: TAuditStatut;
-  ordre_du_jour: boolean;
-};
-
-// toutes les entrées d'un référentiel pour une collectivité et des filtres donnés
-export const fetchRows = async (
-  supabase: DBClient,
-  collectivite_id: number | null,
-  referentiel: string | null,
-  filters: TFilters
-) => {
-  // la requête
-  const query = supabase
-    .from('suivi_audit')
-    .select('action_id,statut,ordre_du_jour')
-    .match({ collectivite_id, referentiel });
-
-  // applique les filtres
-  const { statut, ordre_du_jour } = filters;
-  const and = [];
-  if (statut?.length && !statut.includes(ITEM_ALL)) {
-    const statuts = statut.join(',');
-    and.push(`or(statut.in.(${statut}), statuts.ov.{${statuts}})`);
-  }
-  if (ordre_du_jour?.length && !ordre_du_jour.includes(ITEM_ALL)) {
-    const odj = ordre_du_jour.map((o) => o === 'true');
-    and.push(
-      `or(ordre_du_jour.in.(${odj}), ordres_du_jour.ov.{${odj.join(',')}})`
-    );
-  }
-  if (and.length) {
-    query.or(`and(${and.join(',')})`);
-  }
-
-  // attends les données
-  const { error, data, count } = await query;
-
-  if (error) {
-    throw new Error(error.message);
-  }
-
-  const rows = data as TAuditSuiviRow[];
-
-  return { rows, count };
+  ordreDuJour: boolean;
 };

apps/app/src/referentiels/audits/AuditSuivi/useTableData.ts

@@ -1,19 +1,26 @@
 import { useCollectiviteId } from '@/api/collectivites';
-import { useSupabase } from '@/api/utils/supabase/use-supabase';
+import { RouterOutput, useTRPC } from '@/api/utils/trpc/client';
 import { useSearchParams } from '@/app/core-logic/hooks/query';
+import {
+  ActionTypeEnum,
+  getIdentifiantFromActionId,
+  getLevelFromActionId,
+} from '@/domain/referentiels';
+import { ITEM_ALL } from '@/ui';
 import { useQuery } from '@tanstack/react-query';
 import { TableOptions } from 'react-table';
 import { useReferentielId } from '../../referentiel-context';
-import { useReferentiel } from '../../ReferentielTable/useReferentiel';
 import { initialFilters, nameToShortNames, TFilters } from './filters';
-import { fetchRows, TAuditSuiviRow } from './queries';
 
 export type UseTableData = () => TableData;
 
+export type MesureAuditStatut =
+  RouterOutput['referentiels']['labellisations']['listMesureAuditStatuts'][0];
+
 export type TableData = {
   /** données à passer à useTable */
   table: Pick<
-    TableOptions<TAuditSuiviRow>,
+    TableOptions<MesureAuditStatut>,
     'data' | 'getRowId' | 'getSubRows' | 'autoResetExpanded'
   >;
   /** Indique que le chargement des données est en cours */
@@ -22,10 +29,6 @@ export type TableData = {
   filters: TFilters;
   /** Nombre de filtres actifs */
   filtersCount: number;
-  /** Nombre de lignes après filtrage */
-  count: number;
-  /** Nombre total de lignes */
-  total: number;
   /** pour remettre à jour les filtres */
   setFilters: (newFilter: TFilters) => void;
 };
@@ -36,7 +39,7 @@ export type TableData = {
 export const useTableData: UseTableData = () => {
   const collectiviteId = useCollectiviteId();
   const referentielId = useReferentielId();
-  const supabase = useSupabase();
+  const trpc = useTRPC();
 
   // filtre initial
   const [filters, setFilters, filtersCount] = useSearchParams<TFilters>(
@@ -46,27 +49,91 @@ export const useTableData: UseTableData = () => {
   );
 
   // chargement des données en fonction des filtres
-  const { data, isLoading } = useQuery({
-    queryKey: ['audit-suivi', collectiviteId, referentielId, filters],
-    queryFn: () => fetchRows(supabase, collectiviteId, referentielId, filters),
+  const { data: allMesuresStatuts, isLoading } = useQuery(
+    trpc.referentiels.labellisations.listMesureAuditStatuts.queryOptions({
+      collectiviteId,
+      referentielId,
+    })
+  );
+
+  const { statut, ordreDuJour } = filters;
+
+  const filterBySelectedStatutAndOrdreDuJour = (row: MesureAuditStatut) => {
+    // Pas de filtre sur les axes et sous-axes, uniquement les mesures
+    if (row.mesureType !== ActionTypeEnum.ACTION) {
+      return true;
+    }
+
+    if (!statut.includes(ITEM_ALL) && !statut.includes(row.statut)) {
+      return false;
+    }
+
+    if (
+      !ordreDuJour.includes(ITEM_ALL) &&
+      !ordreDuJour.map((o) => o === 'true').includes(row.ordreDuJour)
+    ) {
+      return false;
+    }
+
+    return true;
+  };
+
+  const mapToMatchReferentielTableRow = (row: MesureAuditStatut) => ({
+    ...row,
+
+    // Pour compatibilité avec la gestion de l'affichage de ReferentielTable
+    // À cleaner quand tous les usages de `useReferentiel` auront été supprimés
+    action_id: row.mesureId,
+    depth: getLevelFromActionId(row.mesureId),
+    identifiant: getIdentifiantFromActionId(row.mesureId),
   });
-  const { rows: actionsAuditStatut } = data || {};
 
-  // chargement du référentiel
-  const {
-    table,
-    total,
-    count,
-    isLoading: isLoadingReferentiel,
-  } = useReferentiel(referentielId, collectiviteId, actionsAuditStatut);
+  const rows = (allMesuresStatuts ?? [])
+    .filter(filterBySelectedStatutAndOrdreDuJour)
+    .map(mapToMatchReferentielTableRow);
+
+  const level1Rows = rows.filter(
+    (row) => getLevelFromActionId(row.mesureId) === 1
+  );
+  const level2Rows = rows.filter(
+    (row) => getLevelFromActionId(row.mesureId) === 2
+  );
+  const level3Rows = rows.filter(
+    (row) => getLevelFromActionId(row.mesureId) === 3
+  );
 
   return {
-    table,
+    table: {
+      data: level1Rows.filter((level1Row) =>
+        level3Rows.some((level3Row) =>
+          level3Row.mesureId.startsWith(level1Row.mesureId)
+        )
+      ),
+      getRowId: (row) => row.mesureId,
+      getSubRows: (parentRow) => {
+        if (getLevelFromActionId(parentRow.mesureId) === 2) {
+          return level3Rows.filter((level3Row) =>
+            level3Row.mesureId.startsWith(parentRow.mesureId)
+          );
+        }
+
+        if (getLevelFromActionId(parentRow.mesureId) === 1) {
+          return level2Rows.filter(
+            (level2Row) =>
+              level2Row.mesureId.startsWith(parentRow.mesureId) &&
+              level3Rows.some((level3Row) =>
+                level3Row.mesureId.startsWith(level2Row.mesureId)
+              )
+          );
+        }
+
+        return [];
+      },
+      autoResetExpanded: false,
+    },
     filters,
     setFilters,
     filtersCount,
-    isLoading: isLoading || isLoadingReferentiel,
-    count,
-    total,
+    isLoading,
   };
 };