feat: translate breadcrumbs and page title

intuitem · Feb 13, 2024 · 81c752c · 81c752c
1 parent 8453877
commit 81c752c
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 12 deletions.
diff --git a/frontend/messages/en.json b/frontend/messages/en.json
@@ -1,6 +1,7 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"home": "Home",
+	"edit": "Edit",
 	"overview": "Overview",
 	"context": "Context",
 	"governance": "Governance",
@@ -27,7 +28,7 @@
 	"users": "Users",
 	"userGroups": "User groups",
 	"roleAssignments": "Role assignments",
-	"xrays": "X-rays",
+	"xRays": "X-rays",
 	"scoringAssistant": "Scoring assistant",
 	"libraries": "Libraries",
 	"backupRestore": "Backup & restore"

diff --git a/frontend/messages/fr.json b/frontend/messages/fr.json
@@ -1,6 +1,7 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
 	"home": "Accueil",
+	"edit": "Modifier",
 	"overview": "Vue d'ensemble",
 	"context": "Contexte",
 	"governance": "Gouvernance",
@@ -27,7 +28,7 @@
 	"users": "Utilisateurs",
 	"userGroups": "Groupes d'utilisateurs",
 	"roleAssignments": "Affectations de rôle",
-	"xrays": "X-rays",
+	"xRays": "X-rays",
 	"scoringAssistant": "Assistat d'évaluation",
 	"libraries": "Bibliothèques",
 	"backupRestore": "Sauvegarde et restauration"

diff --git a/frontend/src/lib/components/Breadcrumbs/Breadcrumbs.svelte b/frontend/src/lib/components/Breadcrumbs/Breadcrumbs.svelte
@@ -4,8 +4,46 @@
 	import { listViewFields } from '$lib/utils/table';
 	import * as m from '$paraglide/messages';
 
+	const breadcrumbsItems: any = {
+		edit: m.edit(),
+		analytics: m.analytics(),
+		calendar: m.calendar(),
+		threats: m.threats(),
+		securityFunctions: m.securityFunctions(),
+		securityMeasures: m.securityMeasures(),
+		assets: m.assets(),
+		policies: m.policies(),
+		riskMatrices: m.riskMatrices(),
+		riskAssessments: m.riskAssessments(),
+		riskScenarios: m.riskScenarios(),
+		riskAcceptances: m.riskAcceptances(),
+		complianceAssessments: m.complianceAssessments(),
+		evidences: m.evidences(),
+		frameworks: m.frameworks(),
+		domains: m.domains(),
+		projects: m.projects(),
+		users: m.users(),
+		userGroups: m.userGroups(),
+		roleAssignments: m.roleAssignments(),
+		xRays: m.xRays(),
+		scoringAssistant: m.scoringAssistant(),
+		libraries: m.libraries(),
+		backupRestore: m.backupRestore()
+	}
+
 	let crumbs: Array<{ label: string; href: string; icon?: string }> = [];
 
+	function capitalizeSecondWord(sentence: string) {
+    var words = sentence.split(' ');
+
+    if (words.length >= 2) {
+        words[1] = words[1].charAt(0).toUpperCase() + words[1].substring(1);
+        return words.join('');
+    } else {
+        return sentence;
+    }
+}
+
 	$: {
 		// Remove zero-length tokens.
 		const tokens = $page.url.pathname.split('/').filter((t) => t !== '');
@@ -20,17 +58,17 @@
 			} else if (t === 'folders') {
 				t = 'domains';
 			}
-			t = t.charAt(0).toUpperCase() + t.slice(1);
 			t = t.replace(/-/g, ' ');
+			t = capitalizeSecondWord(t);
 			return {
 				label: $page.data.label || t,
 				href: Object.keys(listViewFields).includes(tokens[0]) ? tokenPath : null
 			};
 		});
 
 		crumbs.unshift({ label: m.home(), href: '/', icon: 'fa-regular fa-compass' });
-		if (crumbs[crumbs.length - 1].label != 'Edit') pageTitle.set(crumbs[crumbs.length - 1].label);
-		else pageTitle.set('Edit ' + crumbs[crumbs.length - 2].label);
+		if (crumbs[crumbs.length - 1].label != 'edit') pageTitle.set(crumbs[crumbs.length - 1].label);
+		else pageTitle.set(m.edit()+ ' ' + crumbs[crumbs.length - 2].label);
 	}
 </script>
 
@@ -41,7 +79,11 @@
 				{#if c.icon}
 					<i class={c.icon} />
 				{/if}
-				{c.label}
+				{#if breadcrumbsItems[c.label]}
+					{breadcrumbsItems[c.label]}
+				{:else}
+					{c.label}
+				{/if}
 			</span>
 		{:else}
 			<li class="crumb">
@@ -53,14 +95,22 @@
 						{#if c.icon}
 							<i class={c.icon} />
 						{/if}
-						{c.label}
+						{#if breadcrumbsItems[c.label]}
+							{breadcrumbsItems[c.label]}
+						{:else}
+							{c.label}
+						{/if}
 					</a>
 				{:else}
 					<span class="text-sm text-gray-500 font-semibold antialiased">
 						{#if c.icon}
 							<i class={c.icon} />
 						{/if}
-						{c.label}
+						{#if breadcrumbsItems[c.label]}
+							{breadcrumbsItems[c.label]}
+						{:else}
+							{c.label}
+						{/if}
 					</span>
 				{/if}
 			</li>

diff --git a/frontend/src/lib/components/SideBar/SideBarItem.svelte b/frontend/src/lib/components/SideBar/SideBarItem.svelte
@@ -15,7 +15,7 @@
 		securityFunctions: m.securityFunctions(),
 		securityMeasures: m.securityMeasures(),
 		assets: m.assets(),
-		policies: m.policies(), // Note: Correcting typo in "policies"
+		policies: m.policies(),
 		riskMatrices: m.riskMatrices(),
 		riskAssessments: m.riskAssessments(),
 		riskScenarios: m.riskScenarios(),
@@ -28,7 +28,7 @@
 		users: m.users(),
 		userGroups: m.userGroups(),
 		roleAssignments: m.roleAssignments(),
-		xrays: m.xrays(),
+		xRays: m.xRays(),
 		scoringAssistant: m.scoringAssistant(),
 		libraries: m.libraries(),
 		backupRestore: m.backupRestore()

diff --git a/frontend/src/lib/components/SideBar/navData.ts b/frontend/src/lib/components/SideBar/navData.ts
@@ -150,7 +150,7 @@ export const navData = {
 			name: 'extra',
 			items: [
 				{
-					name: 'xrays',
+					name: 'xRays',
 					fa_icon: 'fa-solid fa-bolt',
 					href: '/x-rays',
 					permissions: ['view_riskassessment', 'view_assessment']

diff --git a/frontend/src/routes/(app)/+layout.svelte b/frontend/src/routes/(app)/+layout.svelte
@@ -7,8 +7,36 @@
 	import Breadcrumbs from '$lib/components/Breadcrumbs/Breadcrumbs.svelte';
 	import { pageTitle } from '$lib/utils/stores';
 
+	import * as m from '$paraglide/messages';
+
 	let sidebarOpen = true;
 
+	const items: any = {
+		analytics: m.analytics(),
+		calendar: m.calendar(),
+		threats: m.threats(),
+		securityFunctions: m.securityFunctions(),
+		securityMeasures: m.securityMeasures(),
+		assets: m.assets(),
+		policies: m.policies(),
+		riskMatrices: m.riskMatrices(),
+		riskAssessments: m.riskAssessments(),
+		riskScenarios: m.riskScenarios(),
+		riskAcceptances: m.riskAcceptances(),
+		complianceAssessments: m.complianceAssessments(),
+		evidences: m.evidences(),
+		frameworks: m.frameworks(),
+		domains: m.domains(),
+		projects: m.projects(),
+		users: m.users(),
+		userGroups: m.userGroups(),
+		roleAssignments: m.roleAssignments(),
+		xRays: m.xRays(),
+		scoringAssistant: m.scoringAssistant(),
+		libraries: m.libraries(),
+		backupRestore: m.backupRestore()
+	}
+
 	$: classesSidebarOpen = (open: boolean) => (open ? 'ml-64' : 'ml-7');
 </script>
 
@@ -22,7 +50,13 @@
 	</svelte:fragment>
 	<svelte:fragment slot="pageHeader">
 		<AppBar background="bg-white" padding="py-2 px-4">
-			<span class="text-2xl font-bold pb-1" id="page-title">{$pageTitle}</span>
+			<span class="text-2xl font-bold pb-1" id="page-title">
+				{#if items[$pageTitle]}
+					{items[$pageTitle]}
+				{:else}
+					{$pageTitle}
+				{/if}
+			</span>
 			<hr class="w-screen my-1" />
 			<Breadcrumbs />
 		</AppBar>