🎨 Redesign référentiels page

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

@@ -89,7 +89,7 @@ export const CellAction = (props: TCellProps) => {
           {depth > 0 ? (
             depth > idDepth ? (
               <Link
-                className="hover:underline active:underline active:!bg-transparent"
+                className="bg-none hover:underline active:underline active:!bg-transparent"
                 onClick={(evt) => evt.stopPropagation()}
                 href={makeCollectiviteTacheUrl({
                   collectiviteId,

app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/ReferentielTabs.tsx

@@ -9,22 +9,84 @@ import {
   useReferentielId,
   useReferentielVue,
 } from '@/app/core-logic/hooks/params';
-import { ReferentielOfIndicateur } from '@/app/types/litterals';
-import { Tab, Tabs } from '@/app/ui/shared/Tabs';
+import { Referentiel, ReferentielOfIndicateur } from '@/app/types/litterals';
+import { Tab, Tabs } from '@/ui';
 import { useRouter } from 'next/navigation';
+import { useReferentielDownToAction } from '../../../../core-logic/hooks/referentiel';
+import ActionProgressBar from '../../../../ui/referentiels/ActionProgressBar';
+import { Counter } from '../../../../ui/referentiels/Counter';
 import AidePriorisation from '../AidePriorisation';
 import DetailTacheTable from '../DetailTaches';
-import Progression from './Referentiels';
+import ActionsReferentiels from './Referentiels';
 
 const TABS_INDEX: Record<ReferentielVueParamOption, number> = {
   progression: 0,
   priorisation: 1,
   detail: 2,
 };
 
-/**
- * Affiche les onglets des vues tabulaires sur le référentiel
- */
+const ReferentielHeader = ({
+  referentielId,
+  className,
+}: {
+  referentielId: ReferentielParamOption;
+  className?: string;
+}) => {
+  const current = referentielId ?? 'eci';
+  const actions = useReferentielDownToAction(current as Referentiel);
+  const referentiel = actions.find((a) => a.type === 'referentiel')!;
+
+  return (
+    <div className={className}>
+      <h2 className="mb-4">
+        Référentiel{' '}
+        {referentielToName[referentielId as ReferentielOfIndicateur]}
+      </h2>
+      {/*****************************************/}
+      {/*                                       */}
+      {/*       For future use: start           */}
+      {/*   (Figer une version du référentiel)  */}
+      {/*                                       */}
+      {/*****************************************/}
+
+      {/* <div className="flex gap-x-4"> */}
+      {/* <Select
+                  options={[]}
+                  onChange={() => {}}
+                  values={[]}
+                  customItem={(v) => <span className="text-grey-8">{v.label}</span>}
+                  small
+                />
+                <Button
+                  icon="save-3-line"
+                  size="sm"
+                  className="whitespace-nowrap min-w-fit"
+                >
+                  Figer le référentiel
+                </Button> */}
+      {/* </div> */}
+
+      {/**********************************/}
+      {/*                                */}
+      {/*     For future use: end        */}
+      {/*                                */}
+      {/**********************************/}
+
+      {referentiel && (
+        <div className="flex items-center gap-4 pb-4 mb-4 border-b border-primary-3">
+          <div className="grow">
+            <ActionProgressBar
+              action={referentiel}
+              progressBarStyleOptions={{ fullWidth: true }}
+            />
+          </div>
+          <Counter actionId={referentiel.id} className="ml-auto" />
+        </div>
+      )}
+    </div>
+  );
+};
+
 const ReferentielTabs = () => {
   const collectiviteId = useCollectiviteId();
   const referentielId = useReferentielId() as ReferentielParamOption;
@@ -60,31 +122,40 @@ const ReferentielTabs = () => {
   };
 
   return (
-    <main className="fr-container fr-mt-4w flex flex-col items-center">
-      <h1 className="fr-mb-4w">
-        Référentiel{' '}
-        {referentielToName[referentielId as ReferentielOfIndicateur]}
-      </h1>
-      <Tabs
-        className="w-full"
-        defaultActiveTab={activeTab}
-        onChange={handleChange}
-      >
-        <Tab label="Progression">
-          <Progression />
-        </Tab>
-        <Tab label="Aide à la priorisation">
-          {activeTab === TABS_INDEX['priorisation'] ? (
-            <AidePriorisation />
-          ) : (
-            '...'
-          )}
-        </Tab>
-        <Tab label="Détail des statuts">
-          {activeTab === TABS_INDEX['detail'] ? <DetailTacheTable /> : '...'}
-        </Tab>
-      </Tabs>
-    </main>
+    <div className="grow bg-grey-2 -mb-8 py-12 px-4 lg:px-6 2xl:px-0">
+      <div className="m-auto xl:max-w-[90rem] 2xl:px-6">
+        <ReferentielHeader referentielId={referentielId} />
+        <Tabs
+          defaultActiveTab={activeTab}
+          onChange={handleChange}
+          tabsListClassName="!justify-start pl-0 flex-nowrap bg-transparent"
+        >
+          <Tab label="Actions">
+            <div className="p-7 border border-primary-2 bg-white rounded-lg">
+              <ActionsReferentiels />
+            </div>
+          </Tab>
+          <Tab label="Aide à la priorisation" className="!text-primary-500">
+            {activeTab === TABS_INDEX['priorisation'] ? (
+              <div className="p-7 border border-primary-2 bg-white rounded-lg">
+                <AidePriorisation />
+              </div>
+            ) : (
+              '...'
+            )}
+          </Tab>
+          <Tab label="Détail des statuts">
+            {activeTab === TABS_INDEX['detail'] ? (
+              <div className="p-7 border border-primary-2 bg-white rounded-lg">
+                <DetailTacheTable />
+              </div>
+            ) : (
+              '...'
+            )}
+          </Tab>
+        </Tabs>
+      </div>
+    </div>
   );
 };
 

app.territoiresentransitions.react/src/app/pages/collectivite/Referentiels/Referentiels.tsx

@@ -1,23 +1,14 @@
-import { ActionDefinitionSummary } from '@/app/core-logic/api/endpoints/ActionDefinitionSummaryReadEndpoint';
 import { useReferentielId } from '@/app/core-logic/hooks/params';
 import { useReferentielDownToAction } from '@/app/core-logic/hooks/referentiel';
 import { useCurrentCollectivite } from '@/app/core-logic/hooks/useCurrentCollectivite';
 import { Referentiel } from '@/app/types/litterals';
-import ActionProgressBar from '@/app/ui/referentiels/ActionProgressBar';
 import { ExpandableAction } from '@/app/ui/shared/actions/ExpandableAction';
+import SpinnerLoader from '@/app/ui/shared/SpinnerLoader';
+import { Button, Checkbox, OptionValue, Select } from '@/ui';
+import { useState } from 'react';
+import { ReferentielCard } from '../../../../ui/referentiels/Card/ReferentielCard';
 import { useExportScore } from './useExportScore';
 
-const ReferentielHead = (props: { referentiel: ActionDefinitionSummary }) => {
-  return (
-    <>
-      <header className="flex flex-row mb-6 items-center justify-between">
-        <h2 className="fr-h2">{props.referentiel.nom}</h2>
-        <ActionProgressBar action={props.referentiel} />
-      </header>
-    </>
-  );
-};
-
 export const ActionsReferentiels = () => {
   const referentielId = useReferentielId();
   const current = referentielId ?? 'eci';
@@ -31,27 +22,78 @@ export const ActionsReferentiels = () => {
     referentielId,
     collectivite
   );
+  const [isDescriptionOn, setIsDescriptionOn] = useState(false);
+  const [displayOption, setDisplayOption] = useState<OptionValue>('axe');
 
-  if (!referentiel) return <></>;
+  if (!referentiel) return <SpinnerLoader />;
 
   return (
-    <main data-test="ActionsReferentiels" className="fr-container mt-9">
-      <ReferentielHead referentiel={referentiel} />
-      <section>
-        {axes.map((axe) => (
-          <ExpandableAction action={axe} key={axe.id} />
+    <main data-test="ActionsReferentiels" className="fr-container mt-2">
+      <div className="relative flex justify-between max-xl:flex-col xl:items-center gap-4 pb-6 border-b border-primary-3 mb-6">
+        <div className="flex max-md:flex-col gap-x-8 gap-y-4 md:items-center">
+          <div className="w-full md:w-64">
+            <Select
+              options={[
+                { value: 'axe', label: 'Par axe' },
+                { value: 'action', label: 'Par action' },
+              ]}
+              onChange={(value) => setDisplayOption(value ?? 'axe')}
+              values={[displayOption]}
+              customItem={(v) => (
+                <span className="text-grey-8 font-normal">{v.label}</span>
+              )}
+              small
+            />
+          </div>
+
+          <Checkbox
+            label="Afficher la description des actions"
+            variant="switch"
+            labelClassname="font-normal text-sm !text-grey-7"
+            containerClassname="items-center"
+            checked={isDescriptionOn}
+            onChange={() => setIsDescriptionOn(!isDescriptionOn)}
+            disabled={isLoading}
+          />
+        </div>
+
+        <Button
+          data-test="export-scores"
+          icon={'download-fill'}
+          disabled={isLoading}
+          onClick={() => exportScore()}
+          size="sm"
+        />
+      </div>
+
+      {displayOption === 'axe' &&
+        axes.map((axe) => (
+          <ExpandableAction
+            action={axe}
+            key={axe.id}
+            isDescriptionOn={isDescriptionOn}
+          />
         ))}
-      </section>
-      <button
-        data-test="export-scores"
-        className="fr-btn fr-btn--icon-left fr-fi-download-line fr-mt-6w"
-        disabled={isLoading}
-        onClick={() => {
-          exportScore();
-        }}
-      >
-        Exporter
-      </button>
+
+      {displayOption === 'action' && (
+        <div>
+          <div
+            className={`grid grid-cols-1 ${
+              !isDescriptionOn ? 'sm:grid-cols-2 lg:grid-cols-3' : ''
+            } gap-4 grid-rows-1`}
+          >
+            {actions
+              .filter((action) => action.type === 'action')
+              .map((action) => (
+                <ReferentielCard
+                  key={action.id}
+                  action={action}
+                  isDescriptionOn={isDescriptionOn}
+                />
+              ))}
+          </div>
+        </div>
+      )}
     </main>
   );
 };

app.territoiresentransitions.react/src/ui/referentiels/ActionProgressBar.tsx

@@ -1,18 +1,22 @@
 import { avancementToLabel } from '@/app/app/labels';
 import { actionAvancementColors } from '@/app/app/theme';
 import { ActionDefinitionSummary } from '@/app/core-logic/api/endpoints/ActionDefinitionSummaryReadEndpoint';
-import { useActionScore } from '@/app/core-logic/hooks/scoreHooks';
 import ProgressBarWithTooltip from '@/app/ui/score/ProgressBarWithTooltip';
+import { useActionScore } from '../../core-logic/hooks/scoreHooks';
+import { ProgressBarStyleOptions } from '../score/ProgressBar';
 
 export const ActionProgressBar = ({
   action,
   // remettre actionId au lieu de action une fois l'affichage des scores par % généralisé
   className,
+  progressBarStyleOptions,
 }: {
   action: ActionDefinitionSummary;
   className?: string;
+  progressBarStyleOptions?: ProgressBarStyleOptions;
 }) => {
   const score = useActionScore(action.id);
+
   const isReglementaire = action.identifiant.split('.').includes('0');
 
   if (score === null || (score.point_potentiel < 1e-3 && !isReglementaire))
@@ -58,8 +62,8 @@ export const ActionProgressBar = ({
           label: avancementToLabel.non_renseigne,
           color: actionAvancementColors.non_renseigne,
         }}
-        valueToDisplay={avancementToLabel.fait}
         percent={action.type === 'tache'}
+        progressBarStyleOptions={progressBarStyleOptions}
       />
     </div>
   );