Tags personnalisés sur la fiche action

app.territoiresentransitions.react/src/app/pages/collectivite/BibliothequeDocs/PreuvesTable.tsx

@@ -17,7 +17,7 @@ import ActionPreuvePanel from 'ui/shared/actions/ActionPreuvePanel/ActionPreuveP
 
 export type TPreuvesTableProps = {
   tableData: TableData;
-  referentielId: Referentiel;
+  referentielId: Exclude<Referentiel, 'te' | 'te-test'>;
 };
 
 export type TCellProps = CellProps<ActionReferentiel>;
@@ -121,7 +121,7 @@ export const PreuvesTable = (props: TPreuvesTableProps) => {
                       title={(nom as string) || ''}
                       {...rowProps}
                     >
-                      {row.cells.map(cell => {
+                      {row.cells.map((cell) => {
                         const { key, ...cellProps } = cell.getCellProps();
                         return (
                           <div className="cell" key={key} {...cellProps}>

app.territoiresentransitions.react/src/app/pages/collectivite/BibliothequeDocs/PreuvesTabs.tsx

@@ -3,15 +3,17 @@
  * par référentiel et niveau
  */
 
-import {Tabs, Tab} from 'ui/shared/Tabs';
-import {referentielToName} from 'app/labels';
-import {Referentiel} from 'types/litterals';
-import {useTableData} from './useTableData';
-import {PreuvesTable} from './PreuvesTable';
+import { Tabs, Tab } from 'ui/shared/Tabs';
+import { referentielToName } from 'app/labels';
+import { Referentiel } from 'types/litterals';
+import { useTableData } from './useTableData';
+import { PreuvesTable } from './PreuvesTable';
 
-const REFERENTIELS: Referentiel[] = ['cae', 'eci'];
+const REFERENTIELS: Exclude<Referentiel, 'te' | 'te-test'>[] = ['cae', 'eci'];
 
-const PreuvesTab = (props: {referentielId: Referentiel}) => {
+const PreuvesTab = (props: {
+  referentielId: Exclude<Referentiel, 'te' | 'te-test'>;
+}) => {
   const tableData = useTableData(props.referentielId);
   return (
     <PreuvesTable tableData={tableData} referentielId={props.referentielId} />
@@ -21,7 +23,7 @@ const PreuvesTab = (props: {referentielId: Referentiel}) => {
 export const PreuvesTabs = () => {
   return (
     <Tabs>
-      {REFERENTIELS.map(referentielId => {
+      {REFERENTIELS.map((referentielId) => {
         return (
           <Tab
             key={referentielId}

app.territoiresentransitions.react/src/app/pages/collectivite/BibliothequeDocs/groupeParReferentielEtDemande.tsx

@@ -1,5 +1,5 @@
-import {Referentiel} from 'types/litterals';
-import {TPreuveAuditEtLabellisation} from 'ui/shared/preuves/Bibliotheque/types';
+import { Referentiel } from 'types/litterals';
+import { TPreuveAuditEtLabellisation } from 'ui/shared/preuves/Bibliotheque/types';
 
 // groupe les preuves par référentiel
 type TPreuvesParReferentiel = Record<
@@ -12,7 +12,7 @@ const groupeParReferentiel = (
   preuves.reduce((dict, preuve) => {
     const referentiel =
       preuve.demande?.referentiel || preuve.audit?.referentiel;
-    if (!referentiel) {
+    if (!referentiel || referentiel === 'te' || referentiel === 'te-test') {
       return dict;
     }
     return {

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/ExportPdf/FicheActionPdf/Description.tsx

@@ -8,12 +8,15 @@ const Description = ({ fiche }: FicheActionPdfProps) => {
     description,
     ressources,
     instanceGouvernance,
+    libresTag,
   } = fiche;
 
   return (
     <Card className="bg-primary-6 border-primary-6">
       {/* Liste des thématiques et sous-thématiques sous forme de badges */}
-      {(thematiques?.length || sousThematiques?.length) && (
+      {(thematiques?.length ||
+        sousThematiques?.length ||
+        libresTag?.length) && (
         <Stack direction="row" gap={2.5} className="flex-wrap gap-y-2">
           {thematiques?.map((thematique) => (
             <Badge key={thematique.id} title={thematique.nom} state="info" />
@@ -25,6 +28,9 @@ const Description = ({ fiche }: FicheActionPdfProps) => {
               state="info"
             />
           ))}
+          {libresTag?.map((tagPerso) => (
+            <Badge key={tagPerso.id} title={tagPerso.nom} state="default" />
+          ))}
         </Stack>
       )}
 

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionDescription/FicheActionDescription.tsx

@@ -29,6 +29,7 @@ const FicheActionDescription = ({
     description,
     ressources,
     instanceGouvernance,
+    libresTag,
   } = fiche;
 
   const {
@@ -55,11 +56,14 @@ const FicheActionDescription = ({
     >
       <div
         className={classNames('flex justify-between items-start', {
-          'max-sm:-mb-4 -mb-8': !thematiques || !thematiques?.length,
+          'max-sm:-mb-4 -mb-8':
+            (!thematiques || !thematiques?.length) && !libresTag?.length,
         })}
       >
         {/* Liste des thématiques et sous-thématiques sous forme de badges */}
-        {(thematiques?.length || sousThematiques?.length) && (
+        {(thematiques?.length ||
+          sousThematiques?.length ||
+          libresTag?.length) && (
           <div className="flex flex-wrap gap-3">
             {thematiques?.map((thematique) => (
               <Badge
@@ -77,6 +81,14 @@ const FicheActionDescription = ({
                 state="info"
               />
             ))}
+            {libresTag?.map((tagPerso) => (
+              <Badge
+                key={tagPerso.id}
+                title={tagPerso.nom}
+                uppercase={false}
+                state="default"
+              />
+            ))}
           </div>
         )}
 

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionDescription/ModaleDescription.tsx

@@ -13,6 +13,7 @@ import {
 import { FicheAction } from '@tet/api/plan-actions';
 import ThematiquesDropdown from 'ui/dropdownLists/ThematiquesDropdown/ThematiquesDropdown';
 import SousThematiquesDropdown from 'ui/dropdownLists/SousThematiquesDropdown/SousThematiquesDropdown';
+import TagsSuiviPersoDropdown from 'ui/dropdownLists/TagsSuiviPersoDropdown/TagsSuiviPersoDropdown';
 import { useCurrentCollectivite } from 'core-logic/hooks/useCurrentCollectivite';
 import { getMaxLengthMessage } from 'utils/formatUtils';
 import { Thematique } from '@tet/api/shared/domain';
@@ -67,7 +68,7 @@ const ModaleDescription = ({ fiche, updateFiche }: ModaleDescriptionProps) => {
           </Field>
 
           {/* Dropdown thématiques */}
-          <Field title="Thématique" className="col-span-2">
+          <Field title="Thématique">
             <ThematiquesDropdown
               values={editedFiche.thematiques?.map((t) => t.id)}
               onChange={({ thematiques }) =>
@@ -80,7 +81,7 @@ const ModaleDescription = ({ fiche, updateFiche }: ModaleDescriptionProps) => {
           </Field>
 
           {/* Dropdown sous-thématiques */}
-          <Field title="Sous-thématique" className="col-span-2">
+          <Field title="Sous-thématique">
             <SousThematiquesDropdown
               thematiques={(editedFiche.thematiques ?? []).map(
                 (t: Thematique) => t.id
@@ -95,6 +96,16 @@ const ModaleDescription = ({ fiche, updateFiche }: ModaleDescriptionProps) => {
             />
           </Field>
 
+          {/* Dropdown tags personnalisés */}
+          <Field title="Mes tags de suivi" className="col-span-2">
+            <TagsSuiviPersoDropdown
+              values={editedFiche.libresTag?.map((t) => t.id!)}
+              onChange={({ libresTag }) =>
+                setEditedFiche((prevState) => ({ ...prevState, libresTag }))
+              }
+            />
+          </Field>
+
           {/* Description */}
           <Field
             title="Description de l'action"

app.territoiresentransitions.react/src/app/pages/collectivite/ReferentielTable/CellAction.tsx

@@ -7,13 +7,16 @@ import { Tooltip } from '@tet/ui';
 
 export type TCellProps = CellProps<ActionReferentiel> & {
   collectiviteId: number | null;
-  referentielId: ReferentielParamOption | null;
+  referentielId: Exclude<ReferentielParamOption, 'te' | 'te-test'> | null;
   maxDepth?: number | null;
   alwaysShowExpand?: boolean;
 };
 
 // décalage à gauche des lignes en fonction du niveau
-const paddingByLevel: Record<ReferentielParamOption, Record<number, number>> = {
+const paddingByLevel: Record<
+  Exclude<ReferentielParamOption, 'te' | 'te-test'>,
+  Record<number, number>
+> = {
   cae: {
     1: 0,
     2: 16,

app.territoiresentransitions.react/src/app/paths.ts

@@ -38,10 +38,12 @@ const actionVueParam = 'actionVue';
 const labellisationVueParam = 'labellisationVue';
 export const thematiqueParam = 'thematiqueId';
 
-export type ReferentielParamOption = 'cae' | 'eci';
+export type ReferentielParamOption = 'cae' | 'eci' | 'te' | 'te-test';
 export type IndicateurViewParamOption =
   | 'cae'
   | 'eci'
+  | 'te'
+  | 'te-test'
   | 'crte'
   | 'perso'
   | 'cles'

app.territoiresentransitions.react/src/core-logic/hooks/referentiel.ts

@@ -1,11 +1,11 @@
-import {useEffect, useState} from 'react';
+import { useEffect, useState } from 'react';
 import {
   actionDownToTache,
   actionPreuve,
   referentielDownToAction,
 } from 'core-logic/api/procedures/referentielProcedures';
-import {Referentiel} from 'types/litterals';
-import {parentId} from 'utils/actions';
+import { Referentiel } from 'types/litterals';
+import { parentId } from 'utils/actions';
 import {
   ActionTitleRead,
   actionTitleReadEndpoint,
@@ -25,7 +25,7 @@ export const useActionDownToTache = (
   const [summaries, setSummaries] = useState<ActionDefinitionSummary[]>([]);
 
   useEffect(() => {
-    actionDownToTache(referentiel, identifiant).then(definitions =>
+    actionDownToTache(referentiel, identifiant).then((definitions) =>
       setSummaries(definitions)
     );
   }, [referentiel, identifiant]);
@@ -43,7 +43,7 @@ export const useReferentielDownToAction = (
   const [summaries, setSummaries] = useState<ActionDefinitionSummary[]>([]);
 
   useEffect(() => {
-    referentielDownToAction(referentiel).then(definitions =>
+    referentielDownToAction(referentiel).then((definitions) =>
       setSummaries(definitions)
     );
   }, [referentiel]);
@@ -57,7 +57,7 @@ export const useActionPreuve = (actionId: string) => {
   const [preuve, setPreuve] = useState<string>('...');
 
   useEffect(() => {
-    actionPreuve(actionId).then(preuve => setPreuve(preuve.preuve));
+    actionPreuve(actionId).then((preuve) => setPreuve(preuve.preuve));
   }, [actionId]);
 
   return preuve;
@@ -119,7 +119,7 @@ export const useSortedActionSummaryChildren = (
     [id: string]: ActionDefinitionSummary[];
   } = {};
 
-  actions.forEach(act => {
+  actions.forEach((act) => {
     if (sortedActions[act.phase]) {
       sortedActions[act.phase].push(act);
     } else {
@@ -130,22 +130,24 @@ export const useSortedActionSummaryChildren = (
     }
   });
 
-  return {sortedActions, count: actions.length};
+  return { sortedActions, count: actions.length };
 };
 
 /**
  * Returns action titles relative to the scope
  */
 export const useActionTitleList = (
-  scope: 'all' | 'cae' | 'eci'
+  scope: 'all' | 'cae' | 'eci' | 'te' | 'te-test'
 ): ActionTitleRead[] => {
   const [actionTitles, setActionTitles] = useState<ActionTitleRead[]>([]);
 
   useEffect(() => {
     if (scope === 'all')
       actionTitleReadEndpoint.getBy({}).then(setActionTitles);
     else
-      actionTitleReadEndpoint.getBy({referentiel: scope}).then(setActionTitles);
+      actionTitleReadEndpoint
+        .getBy({ referentiel: scope })
+        .then(setActionTitles);
   }, [scope]);
 
   return actionTitles;
@@ -163,8 +165,8 @@ export const useActionSummary = (
 
   useEffect(() => {
     actionDefinitionSummaryReadEndpoint
-      .getBy({referentiel, identifiant})
-      .then(list => setActionSummary(list.length === 0 ? null : list[0]));
+      .getBy({ referentiel, identifiant })
+      .then((list) => setActionSummary(list.length === 0 ? null : list[0]));
   }, [referentiel, identifiant]);
 
   return actionSummary ?? null;

app.territoiresentransitions.react/src/core-logic/hooks/scoreHooks.ts

@@ -18,7 +18,7 @@ export const getScoreQueryKey = (
 
 const fetchScoresForCollectiviteAndReferentiel = async (
   collectiviteId: number,
-  referentiel: Referentiel
+  referentiel: Exclude<Referentiel, 'te' | 'te-test'>
 ): Promise<ActionScore[]> => {
   const clientScores = await clientScoresReadEndpoint.getBy({
     collectiviteId,
@@ -28,7 +28,9 @@ const fetchScoresForCollectiviteAndReferentiel = async (
 };
 
 // donne accès aux scores d'un référentiel
-const useReferentielScores = (referentiel: Referentiel) => {
+const useReferentielScores = (
+  referentiel: Exclude<Referentiel, 'te' | 'te-test'>
+) => {
   const collectiviteId = useCollectiviteId();
 
   // écoute les changements

app.territoiresentransitions.react/src/types/litterals.ts

@@ -1,4 +1,4 @@
 // TODO : This should be defined in generated
 
-export type Referentiel = 'eci' | 'cae';
+export type Referentiel = 'eci' | 'cae' | 'te' | 'te-test';
 export type ReferentielOfIndicateur = 'eci' | 'cae' | 'crte';

app.territoiresentransitions.react/src/ui/dropdownLists/TagsSuiviPersoDropdown/TagsSuiviPersoDropdown.tsx

@@ -0,0 +1,42 @@
+import { Tag } from '@tet/api/shared/domain';
+import { SelectMultipleProps } from '@tet/ui';
+import SelectTags from '../tags/SelectTags';
+import { useTagsSuiviPersoListe } from './useTagsSuiviPersoListe';
+import { LibreTag } from '@tet/api/typeUtils';
+
+type TagsSuiviPersoDropdownProps = Omit<
+  SelectMultipleProps,
+  'values' | 'onChange' | 'options'
+> & {
+  values?: number[];
+  onChange: ({
+    libresTag,
+    selectedLibreTag,
+  }: {
+    libresTag: LibreTag[];
+    selectedLibreTag: LibreTag;
+  }) => void;
+};
+
+const TagsSuiviPersoDropdown = (props: TagsSuiviPersoDropdownProps) => {
+  const { data, refetch } = useTagsSuiviPersoListe();
+
+  return (
+    <SelectTags
+      {...props}
+      placeholder={props.placeholder ?? 'Créez un tag de suivi personnalisé'}
+      queryKey="tags_suivi_perso"
+      tagTableName="libre_tag"
+      optionsListe={data}
+      refetchOptions={refetch}
+      onChange={({ values, selectedValue }) => {
+        props.onChange({
+          libresTag: values,
+          selectedLibreTag: selectedValue,
+        });
+      }}
+    />
+  );
+};
+
+export default TagsSuiviPersoDropdown;

app.territoiresentransitions.react/src/ui/dropdownLists/TagsSuiviPersoDropdown/useTagsSuiviPersoListe.ts

@@ -0,0 +1,23 @@
+import { Tag } from '@tet/api/shared/domain';
+import { supabaseClient } from 'core-logic/api/supabase';
+import { useCollectiviteId } from 'core-logic/hooks/params';
+import { useQuery } from 'react-query';
+import { objectToCamel } from 'ts-case-convert';
+
+export const useTagsSuiviPersoListe = () => {
+  const collectiviteId = useCollectiviteId()!;
+
+  return useQuery(['tags_suivi_perso', collectiviteId], async () => {
+    const { error, data } = await supabaseClient
+      .from('libre_tag')
+      .select()
+      .eq('collectivite_id', collectiviteId)
+      .order('nom');
+
+    if (error) {
+      throw new Error(error.message);
+    }
+
+    return objectToCamel(data) as Tag[];
+  });
+};