Use new breadcrumbs for analytics

intuitem · Dec 20, 2024 · 36c924b · 36c924b
1 parent 07f5861
commit 36c924b
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 9 deletions.
diff --git a/frontend/src/lib/components/DataViz/Card.svelte b/frontend/src/lib/components/DataViz/Card.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
+
 	export let count: string = '0';
 	export let label: string;
 	export let href: string = '#';
@@ -13,8 +15,9 @@
 	export let customClass: string = '';
 </script>
 
-<a
+<Anchor
 	{href}
+	{label}
 	class="flex flex-col shadow-lg text-purple-800 p-2 h-28 bg-white hover:bg-violet-50 {cEmphasis} {customClass}"
 >
 	<div class="text-xs">
@@ -25,7 +28,7 @@
 		<p class="text-4xl font-bold text-left">{count}</p>
 		<div class="text-sm">{label}</div>
 	</div>
-</a>
+</Anchor>
 
 <style>
 	@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

diff --git a/frontend/src/routes/(app)/(internal)/analytics/+page.svelte b/frontend/src/routes/(app)/(internal)/analytics/+page.svelte
@@ -20,6 +20,7 @@
 	import { displayScoreColor, formatScoreValue } from '$lib/utils/helpers';
 	import type { PageData } from './$types';
 	import StackedBarsNormalized from '$lib/components/Chart/StackedBarsNormalized.svelte';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	interface Counters {
 		domains: number;
@@ -576,11 +577,17 @@
 									</div>
 									<div class="lg:absolute lg:top-2 lg:right-4 mt-2 space-x-1">
 										<div class="flex flex-row lg:flex-col space-x-1 lg:space-x-0 lg:space-y-1">
-											<a
+											<Anchor
 												href="/compliance-assessments/{compliance_assessment.id}/edit?next=/analytics?tab=3"
+												prefixCrumbs={[
+													{
+														label: compliance_assessment.name,
+														href: `/compliance-assessments/${compliance_assessment.id}`
+													}
+												]}
 												class="btn variant-filled-primary w-1/2 lg:w-full"
 												><i class="fa-solid fa-edit mr-2" /> {m.edit()}
-											</a>
+											</Anchor>
 											<a
 												href="/compliance-assessments/{compliance_assessment.id}/export"
 												class="btn variant-filled-primary w-1/2 lg:w-full"

diff --git a/frontend/src/routes/(app)/(internal)/analytics/ComposerSelect.svelte b/frontend/src/routes/(app)/(internal)/analytics/ComposerSelect.svelte
@@ -8,6 +8,7 @@
 	import { getOptions } from '$lib/utils/crud';
 	import * as m from '$paraglide/messages';
 	import { zod } from 'sveltekit-superforms/adapters';
+	import Anchor from '$lib/components/Anchor/Anchor.svelte';
 
 	export let composerForm: SuperValidated<Record<string, any>>;
 
@@ -41,9 +42,10 @@
 				{options}
 			/>
 			{#if data.risk_assessment && data.risk_assessment.length > 0}
-				<a
+				<Anchor
 					href={`/analytics/composer/?risk_assessment=${data.risk_assessment}`}
-					class="btn variant-filled-primary">{m.processButton()}</a
+					label={m.composer()}
+					class="btn variant-filled-primary">{m.processButton()}</Anchor
 				>
 			{:else}
 				<p class="btn-base rounded-token select-none variant-filled-surface opacity-30">

diff --git a/frontend/src/routes/(app)/(internal)/analytics/CounterCard.svelte b/frontend/src/routes/(app)/(internal)/analytics/CounterCard.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
+	import { goto } from '$lib/utils/breadcrumbs';
 
 	export let count = 0;
 	export let label: string;
@@ -9,7 +9,7 @@
 
 	const clickHandler = () => {
 		if (href) {
-			goto(href);
+			goto(href, { breadcrumbAction: 'push', label });
 		}
 	};
 

diff --git a/frontend/src/routes/(app)/(internal)/analytics/composer/+page.server.ts b/frontend/src/routes/(app)/(internal)/analytics/composer/+page.server.ts
@@ -1,6 +1,7 @@
 import { BASE_API_URL, UUID_LIST_REGEX } from '$lib/utils/constants';
 import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
+import * as m from '$paraglide/messages';
 
 export const load: PageServerLoad = async ({ fetch, url }) => {
 	const params = url.searchParams;
@@ -23,5 +24,5 @@ export const load: PageServerLoad = async ({ fetch, url }) => {
 		error(req.status, resp.error);
 	}
 
-	return resp.result;
+	return { ...resp.result, title: m.composer() };
 };