Branchement des snapshots de score des référentiels

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/layout.tsx

@@ -0,0 +1,18 @@
+import { CollectiviteProvider } from '@/app/collectivites/collectivite-context';
+import { ReactNode } from 'react';
+
+export default async function Layout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ collectiviteId: number }>;
+}) {
+  const { collectiviteId } = await params;
+
+  return (
+    <CollectiviteProvider collectiviteId={collectiviteId}>
+      {children}
+    </CollectiviteProvider>
+  );
+}

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/(overview)/@tabs/default.tsx

@@ -0,0 +1,7 @@
+/**
+ * Default page used as a fallback when parallel slots `tabs` does not match.
+ * @see https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#defaultjs
+ */
+export default async function Default() {
+  return null;
+}

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/(overview)/@tabs/detail/page.tsx

@@ -0,0 +1,5 @@
+import { DetailTaches } from '@/app/referentiels/DetailTaches';
+
+export default function Page() {
+  return <DetailTaches />;
+}

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/(overview)/@tabs/header.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import { referentielToName } from '@/app/app/labels';
+import SaveScoreButton from '@/app/app/pages/collectivite/Referentiels/SaveScore/save-score.button';
+import { useCurrentCollectivite } from '@/app/core-logic/hooks/useCurrentCollectivite';
+import { ReferentielOfIndicateur } from '@/app/referentiels/litterals';
+import { useReferentielDownToAction } from '@/app/referentiels/referentiel-hooks';
+import ScoreProgressBar from '@/app/referentiels/scores/score.progress-bar';
+import { ScoreRatioBadge } from '@/app/referentiels/scores/score.ratio-badge';
+import { ReferentielId } from '@/domain/referentiels';
+
+export const Header = ({ referentielId }: { referentielId: ReferentielId }) => {
+  const actions = useReferentielDownToAction(referentielId);
+  const referentiel = actions.find((a) => a.type === 'referentiel')!;
+
+  const collectivite = useCurrentCollectivite();
+  const collectiviteId = collectivite?.collectiviteId;
+  const haveEditionAccess =
+    collectivite?.niveauAcces == 'edition' ||
+    collectivite?.niveauAcces == 'admin';
+
+  return (
+    <>
+      <div className="flex items-center justify-between items-baseline">
+        <h1>
+          Référentiel{' '}
+          {referentielToName[referentielId as ReferentielOfIndicateur]}
+        </h1>
+        <div className="flex gap-x-4">
+          {/**********************************************/}
+          {/*                                            */}
+          {/*       For future use: start                */}
+          {/*   (Récupérer une version du référentiel)   */}
+          {/*                                            */}
+          {/**********************************************/}
+          {/*<Select
+                  options={[]}
+                  onChange={() => {}}
+                  values={[]}
+                  customItem={(v) => <span className="text-grey-8">{v.label}</span>}
+                  small
+                />*/}
+          {/**********************************************/}
+          {/*                                            */}
+          {/*     For future use: end                    */}
+          {/*                                            */}
+          {/**********************************************/}
+          {collectiviteId && haveEditionAccess && (
+            <SaveScoreButton
+              referentielId={referentielId}
+              collectiviteId={collectiviteId}
+            />
+          )}
+        </div>
+      </div>
+
+      {referentiel && (
+        <div className="flex items-center gap-4 pb-4 mb-4 border-b border-primary-3">
+          <div className="grow">
+            <ScoreProgressBar
+              actionDefinition={referentiel}
+              progressBarStyleOptions={{ fullWidth: true }}
+            />
+          </div>
+          <ScoreRatioBadge actionId={referentiel.id} className="ml-auto" />
+        </div>
+      )}
+    </>
+  );
+};

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/(overview)/@tabs/layout.tsx

@@ -0,0 +1,36 @@
+import { ReferentielId } from '@/domain/referentiels';
+import PageContainer from '@/ui/components/layout/page-container';
+import {
+  Tabs,
+  TabsList,
+  TabsPanel,
+  TabsTab,
+} from '@/ui/design-system/Tabs/Tabs.next';
+import { ReactNode } from 'react';
+import { Header } from './header';
+
+export default async function Layout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ referentielId: ReferentielId }>;
+}) {
+  const { referentielId } = await params;
+
+  return (
+    <PageContainer>
+      <Header referentielId={referentielId} />
+
+      <Tabs tabsListClassName="!justify-start pl-0 flex-nowrap bg-transparent">
+        <TabsList>
+          <TabsTab href="progression" label="Actions"></TabsTab>
+          <TabsTab href="priorisation" label="Aide à la priorisation"></TabsTab>
+          <TabsTab href="detail" label="Détail des statuts"></TabsTab>
+        </TabsList>
+
+        <TabsPanel>{children}</TabsPanel>
+      </Tabs>
+    </PageContainer>
+  );
+}

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/(overview)/@tabs/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return null;
+}

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/(overview)/@tabs/priorisation/page.tsx

@@ -0,0 +1,5 @@
+import AidePriorisation from '@/app/referentiels/AidePriorisation';
+
+export default function Page() {
+  return <AidePriorisation />;
+}

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/(overview)/@tabs/progression/page.tsx

@@ -0,0 +1,5 @@
+import { AxesOverviewTree } from '@/app/referentiels/referentiel-overview.tree';
+
+export default async function Page() {
+  return <AxesOverviewTree />;
+}

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/(overview)/default.tsx

@@ -0,0 +1,7 @@
+/**
+ * Default page used as a fallback when implicit slot `children` does not match.
+ * @see https://nextjs.org/docs/app/building-your-application/routing/parallel-routes#defaultjs
+ */
+export default async function Default() {
+  return null;
+}

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/(overview)/layout.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+export default async function Layout({
+  tabs,
+  children,
+}: {
+  tabs: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <>
+      {tabs}
+      {children}
+    </>
+  );
+}

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/action/[actionId]/[[...actionTab]]/action.header.tsx

@@ -0,0 +1,83 @@
+import { ActionDefinitionSummary } from '@/app/referentiels/ActionDefinitionSummaryReadEndpoint';
+import { ActionTopNav } from '@/app/referentiels/actions/action.nav';
+import { ActionSidePanelToolbar } from '@/app/referentiels/actions/action.side-panel.toolbar';
+import { SuiviScoreRow } from '@/app/referentiels/actions/useScoreRealise';
+import { PersoPotentiel } from '@/app/referentiels/personnalisations/PersoPotentielModal/PersoPotentiel';
+import { ScoreProgressBar } from '@/app/referentiels/scores/score.progress-bar';
+import ScoreShow from '@/app/referentiels/scores/score.show';
+import {
+  ActionDetailed,
+  useSnapshotFlagEnabled,
+} from '@/app/referentiels/use-snapshot';
+
+/**
+ * Affiche la partie de l'en-tête de la page Action sensible à la position du
+ * défilement vertical
+ */
+export const ActionHeader = ({
+  actionDefinition,
+  DEPRECATED_actionScore,
+  action,
+  nextActionLink,
+  prevActionLink,
+}: {
+  actionDefinition: ActionDefinitionSummary;
+  DEPRECATED_actionScore: SuiviScoreRow;
+  action: ActionDetailed;
+  nextActionLink: string | undefined;
+  prevActionLink: string | undefined;
+}) => {
+  const FLAG_isSnapshotEnabled = useSnapshotFlagEnabled();
+  return (
+    <>
+      <div className="flex flex-col justify-between bg-primary text-white fr-px-5w fr-py-3w -mt-12">
+        <p className="text-white font-bold !mb-0 text-[1.375rem]">
+          {actionDefinition.identifiant} {actionDefinition.nom}
+        </p>
+
+        <ActionTopNav
+          prevActionLink={prevActionLink}
+          nextActionLink={nextActionLink}
+        />
+      </div>
+
+      <div className="flex justify-between items-center fr-text--sm my-4 !py-0">
+        <div className="flex gap-4 items-center fr-pl-1v text-grey425">
+          <ScoreProgressBar
+            actionDefinition={actionDefinition}
+            className="border-r border-r-[#ddd] fr-pr-5v"
+            // TODO(temporary): Temporary patch to display percentage
+            TEMP_displayValue={true}
+          />
+          {FLAG_isSnapshotEnabled ? (
+            <>
+              <ScoreShow
+                score={action.score.pointFait ?? null}
+                scoreMax={action.score.pointPotentiel ?? null}
+                legend="Score réalisé"
+                size="sm"
+              />
+            </>
+          ) : (
+            <>
+              <ScoreShow
+                score={DEPRECATED_actionScore?.points_realises ?? null}
+                scoreMax={
+                  DEPRECATED_actionScore?.points_max_personnalises ?? null
+                }
+                legend="Score réalisé"
+                size="sm"
+              />
+            </>
+          )}
+          {actionDefinition.have_questions && (
+            <div className="border-l border-l-[#ddd] fr-pl-3v">
+              <PersoPotentiel actionDef={actionDefinition} />
+            </div>
+          )}
+        </div>
+        <ActionSidePanelToolbar action={actionDefinition} />
+      </div>
+    </>
+  );
+};

app.territoiresentransitions.react/app/collectivite/[collectiviteId]/referentiel/[referentielId]/action/[actionId]/[[...actionTab]]/action.page.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+import CollectivitePageLayout from '@/app/app/pages/collectivite/CollectivitePageLayout/CollectivitePageLayout';
+import { useActionDownToTache } from '@/app/referentiels/referentiel-hooks';
+import { ReferentielId } from '@/domain/referentiels';
+import ActionShow from './action.show';
+
+export const ActionPage = ({ actionId }: { actionId: string }) => {
+  const [referentielId, identifiant] = actionId.split('_');
+
+  const actions = useActionDownToTache(
+    referentielId as ReferentielId,
+    identifiant
+  );
+  const action = actions.find((a) => a.id === actionId);
+
+  return (
+    <CollectivitePageLayout>
+      {action && <ActionShow actionDefinition={action} />}
+    </CollectivitePageLayout>
+  );
+};