fix: affichage d'un fil d'ariane sur la page du diag FT (#1882)

app/elm/Pages/Carnet/Diagnostic/PoleEmploi/Page.elm

@@ -172,7 +172,7 @@ toObjectif objectif =
 
 view : Model -> Html Msg
 view model =
-    Html.section [ Attr.class "fr-container flex flex-col gap-8" ]
+    Html.section [ Attr.class "flex flex-col gap-8" ]
         [ Html.h1 [] [ Html.text "Diagnostic France Travail" ]
         , case
             model

app/src/routes/(auth)/carnet/+layout.svelte

@@ -1,26 +1,71 @@
 <script lang="ts">
-	import { homeForRole } from '$lib/routes';
 	import type { MenuItem } from '$lib/types';
 	import { accountData } from '$lib/stores';
 	import { NPSRating } from '$lib/ui/NPSRating';
 	import Footer from '$lib/ui/base/Footer.svelte';
 	import Header from '$lib/ui/base/Header.svelte';
+	import { operationStore, query } from '@urql/svelte';
+	import Breadcrumbs from '$lib/ui/base/Breadcrumbs.svelte';
+	import LoaderIndicator from '$lib/ui/utils/LoaderIndicator.svelte';
+	import { GetNotebookBreadcrumbDocument, RoleEnum } from '$lib/graphql/_gen/typed-document-nodes';
+	import { homeForRole, type Segment } from '$lib/routes';
+	import { connectedUser } from '$lib/stores';
+	import { displayFullName } from '$lib/ui/format';
+	import { page } from '$app/stores';
 	const menuItems: MenuItem[] = [
 		{
 			id: 'accueil',
 			path: homeForRole($accountData.type),
 			label: 'Accueil',
 		},
 	];
+
+	const getNotebookBreadcrumb = operationStore(GetNotebookBreadcrumbDocument, {
+		notebookId: $page.data.notebookId,
+	});
+
+	query(getNotebookBreadcrumb);
+
+	$: beneficiary = $getNotebookBreadcrumb.data?.notebook.beneficiary;
+	$: structureId = beneficiary?.structures[0].structureId;
+	$: breadcrumbs = getBreadcrumbForRole($connectedUser.role, $page.data.notebookId, structureId);
+
+	function getNotebookUrlForRole(role: string, notebookId: string, structureId?: string): string {
+		switch (role) {
+			case RoleEnum.Professional:
+				return `${homeForRole(role)}/carnet/${notebookId}`;
+			case RoleEnum.AdminStructure:
+				return `${homeForRole(role)}/${structureId}/carnets/${notebookId}`;
+			case RoleEnum.Manager:
+				return `${homeForRole(role)}/carnets/${notebookId}`;
+			case RoleEnum.OrientationManager:
+				return `${homeForRole(role)}/carnets/edition/${notebookId}`;
+			default:
+				return '';
+		}
+	}
+
+	function getBreadcrumbForRole(role: string, notebookId: string, structureId?: string): Segment[] {
+		return [
+			{
+				name: 'notebook',
+				path: getNotebookUrlForRole(role, notebookId, structureId),
+				label: `Carnet de ${displayFullName(beneficiary)}`,
+			},
+			{ name: 'diagnostic', label: 'Diagnostic France Travail' },
+		];
+	}
 </script>
 
 <Header {menuItems} />
 
-<div class="fr-container fr-py-6w fr-px-1w">
-	<div class="flex flex-col gap-8">
-		<slot />
+<LoaderIndicator result={$getNotebookBreadcrumb}>
+	<div class="fr-container fr-pb-6w fr-px-2w">
+		<Breadcrumbs segments={breadcrumbs} />
+		<div class="flex flex-col gap-8">
+			<slot />
+		</div>
+		<NPSRating />
 	</div>
-	<NPSRating />
-</div>
-
+</LoaderIndicator>
 <Footer />

app/src/routes/(auth)/carnet/[notebook]/diagnostic-france-travail/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Elm as DiagnosticPE } from '$elm/Pages/Carnet/Diagnostic/PoleEmploi/Main.elm';
+
 	import ElmWrapper from '$lib/utils/ElmWrapper.svelte';
 	import type { PageData } from './$types';
 
@@ -15,6 +16,4 @@
 	};
 </script>
 
-<div>
-	<ElmWrapper setup={elmSetup} />
-</div>
+<ElmWrapper setup={elmSetup} />

app/src/routes/(auth)/carnet/[notebook]/diagnostic-france-travail/getNotebookBreadCrumb.gql

@@ -0,0 +1,11 @@
+query GetNotebookBreadcrumb($notebookId: uuid!) {
+  notebook: notebook_by_pk(id: $notebookId) {
+    beneficiary {
+      firstname
+      lastname
+      structures(where: { status: { _eq: "current" } }, limit: 1) {
+        structureId
+      }
+    }
+  }
+}