Charge la liste des catégories pour le filtrage des indicateurs depui…

…s le backend

app.territoiresentransitions.react/src/ui/dropdownLists/indicateur/IndicateurCategoriesDropdown.tsx

@@ -1,35 +1,37 @@
 import { Indicateurs } from '@/api';
 import { SelectFilter, SelectProps } from '@/ui';
+import { useCategorieTags } from './use-categorie-tags';
 import { getCategorieLabel } from './utils';
 
 type Props = Omit<SelectProps, 'values' | 'onChange' | 'options'> & {
-  values?: Indicateurs.CategorieProgramme[];
+  values?: string[];
   onChange: ({
     categories,
     selectedCategorie,
   }: {
-    categories: Indicateurs.CategorieProgramme[];
-    selectedCategorie: Indicateurs.CategorieProgramme;
+    categories: string[];
+    selectedCategorie: string;
   }) => void;
 };
 
 const IndicateurCategoriesDropdown = (props: Props) => {
+  const { data: categories } = useCategorieTags();
   return (
-    <SelectFilter
-      {...props}
-      options={Indicateurs.domain.categorieProgrammeEnumSchema.options.map(
-        (categorie) => ({
-          label: getCategorieLabel(categorie),
-          value: categorie,
-        })
-      )}
-      onChange={({ values, selectedValue }) => {
-        props.onChange({
-          categories: values as Indicateurs.CategorieProgramme[],
-          selectedCategorie: selectedValue as Indicateurs.CategorieProgramme,
-        });
-      }}
-    />
+    categories && (
+      <SelectFilter
+        {...props}
+        options={categories.map((categorie) => ({
+          label: getCategorieLabel(categorie.nom),
+          value: categorie.nom,
+        }))}
+        onChange={({ values, selectedValue }) => {
+          props.onChange({
+            categories: values as Indicateurs.CategorieProgramme[],
+            selectedCategorie: selectedValue as Indicateurs.CategorieProgramme,
+          });
+        }}
+      />
+    )
   );
 };
 

app.territoiresentransitions.react/src/ui/dropdownLists/indicateur/use-categorie-tags.tsx

@@ -0,0 +1,11 @@
+import { trpc } from '@/api/utils/trpc/client';
+import { useCollectiviteId } from '../../../core-logic/hooks/params';
+
+export const useCategorieTags = () => {
+  const collectiviteId = useCollectiviteId();
+  if (!collectiviteId) return { data: null };
+  return trpc.tags.categories.list.useQuery({
+    collectiviteId,
+    withPredefinedTags: true,
+  });
+};

app.territoiresentransitions.react/src/ui/dropdownLists/indicateur/utils.ts

@@ -1,10 +1,8 @@
-// import {Indicateurs} from '@/api';
-import { CategorieProgramme } from '@/api/indicateurs';
 import { categorieProgrammeEnumSchema } from '@/api/indicateurs/domain';
 
 const categorieEnum = categorieProgrammeEnumSchema.enum;
 
-export function getCategorieLabel(categorieNom: CategorieProgramme) {
+export function getCategorieLabel(categorieNom: string) {
   switch (categorieNom) {
     case categorieEnum.cae:
       return 'Référentiel ADEME CAE';
@@ -14,5 +12,9 @@ export function getCategorieLabel(categorieNom: CategorieProgramme) {
       return 'Indicateurs Contrat de relance et de transition écologique (CRTE)';
     case categorieEnum.clef:
       return 'Indicateurs clés';
+    case 'prioritaire':
+      return 'Indicateurs prioritaires';
+    default:
+      return `Indicateurs ${categorieNom.toUpperCase()}`;
   }
 }