Ca 519 move from local items to safe translate to translate dynamic strings

frontend/src/lib/components/Chart/RadarChart.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { localItems } from '$lib/utils/locales';
-	import { languageTag } from '$paraglide/runtime';
+	import { safeTranslate } from '$lib/utils/i18n';
 
 	// export let name: string;
 	export let s_label = '';
@@ -17,7 +16,7 @@
 
 	for (const index in values) {
 		if (values[index].localName) {
-			values[index].name = localItems()[values[index].localName];
+			values[index].name = safeTranslate(values[index].localName);
 		}
 	}
 

frontend/src/lib/components/DetailView/DetailView.svelte

@@ -17,7 +17,7 @@
 	import { getModelInfo } from '$lib/utils/crud.js';
 	import { URL_MODEL_MAP } from '$lib/utils/crud';
 	import { isURL } from '$lib/utils/helpers';
-	import { toCamelCase, capitalizeFirstLetter } from '$lib/utils/locales.js';
+	import { toCamelCase } from '$lib/utils/locales.js';
 	import { checkConstraints } from '$lib/utils/crud';
 	import { languageTag } from '$paraglide/runtime.js';
 	import * as m from '$paraglide/messages.js';
@@ -85,7 +85,7 @@
 			type: 'component',
 			component: modalComponent,
 			// Data
-			title: safeTranslate('add' + capitalizeFirstLetter(model.info.localName))
+			title: safeTranslate('add-' + model.info.localName)
 		};
 		if (checkConstraints(model.createForm.constraints, model.foreignKeys).length > 0) {
 			modalComponent = {
@@ -95,7 +95,7 @@
 				type: 'component',
 				component: modalComponent,
 				title: m.warning(),
-				body: safeTranslate('add' + capitalizeFirstLetter(model.info.localName)).toLowerCase(),
+				body: safeTranslate('add-' + model.info.localName).toLowerCase(),
 				value: checkConstraints(model.createForm.constraints, model.foreignKeys)
 			};
 		}
@@ -330,7 +330,7 @@
 					{#if tabSet === index}
 						<div class="flex flex-row justify-between px-4 py-2">
 							<h4 class="font-semibold lowercase capitalize-first my-auto">
-								{safeTranslate('associated' + capitalizeFirstLetter(model.info.localNamePlural))}
+								{safeTranslate('associated-' + model.info.localNamePlural)}
 							</h4>
 						</div>
 						{#if model.table}
@@ -340,7 +340,7 @@
 									class="btn variant-filled-primary self-end my-auto"
 									on:click={(_) => modalCreateForm(model)}
 									><i class="fa-solid fa-plus mr-2 lowercase" />{safeTranslate(
-										'add' + capitalizeFirstLetter(model.info.localName)
+										'add-' + model.info.localName
 									)}</button
 								>
 							</ModelTable>

frontend/src/lib/components/Forms/AutocompleteSelect.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { formFieldProxy } from 'sveltekit-superforms';
-	import { localItems, toCamelCase } from '$lib/utils/locales';
 	import type { CacheLock } from '$lib/utils/types';
 	import { onMount } from 'svelte';
+	import { safeTranslate } from '$lib/utils/i18n';
 
 	interface Option {
 		label: string;
@@ -120,8 +120,8 @@
 				{#if option.suggested}
 					<span class="text-indigo-600">{option.label}</span>
 					<span class="text-sm text-gray-500"> (suggested)</span>
-				{:else if translateOptions && localItems()[toCamelCase(option.label)]}
-					{localItems()[toCamelCase(option.label)]}
+				{:else if translateOptions}
+					{safeTranslate(option.label)}
 				{:else}
 					{option.label}
 				{/if}

frontend/src/lib/components/Modals/MissingConstraintsModal.svelte

@@ -7,8 +7,8 @@
 	import type { ModalStore } from '@skeletonlabs/skeleton';
 	import { getModalStore } from '@skeletonlabs/skeleton';
 	import * as m from '$paraglide/messages';
-	import { localItems, toCamelCase } from '$lib/utils/locales';
-	import { languageTag } from '$paraglide/runtime';
+	import { toCamelCase } from '$lib/utils/locales';
+	import { safeTranslate } from '$lib/utils/i18n';
 
 	const modalStore: ModalStore = getModalStore();
 
@@ -28,7 +28,7 @@
 			{#if value}
 				{m.missingMandatoyObjects1({ model: $modalStore[0].body })}:
 				{#each value as key}
-					<li class="font-bold">{localItems()[toCamelCase(key)]}</li>
+					<li class="font-bold">{safeTranslate(key)}</li>
 				{/each}
 				{m.missingMandatoyObjects2()}.
 			{/if}

frontend/src/lib/components/ModelTable/ModelTable.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { safeTranslate } from '$lib/utils/i18n';
+	import { safeTranslate, unsafeTranslate } from '$lib/utils/i18n';
 	import { page } from '$app/stores';
 	import TableRowActions from '$lib/components/TableRowActions/TableRowActions.svelte';
 	import {
@@ -18,7 +18,7 @@
 	import type { AnyZodObject } from 'zod';
 	import type { TableSource } from './types';
 	import * as m from '$paraglide/messages';
-	import { localItems, toCamelCase } from '$lib/utils/locales';
+	import { toCamelCase } from '$lib/utils/locales';
 	import { languageTag } from '$paraglide/runtime';
 	import { ISO_8601_REGEX } from '$lib/utils/constants';
 	// Event Dispatcher
@@ -282,7 +282,7 @@
 		<thead class="table-head {regionHead}">
 			<tr>
 				{#each Object.entries(source.head) as [key, heading]}
-					<Th {handler} orderBy={key} class="{regionHeadCell}">{safeTranslate(heading) ?? heading}</Th>
+					<Th {handler} orderBy={key} class="{regionHeadCell}">{safeTranslate(heading)}</Th>
 				{/each}
         {#if displayActions}
         <th class="{regionHeadCell} select-none text-end"></th>
@@ -349,8 +349,8 @@
                             )?.urlModel
                           }/${val.id}`}
                           <a href={itemHref} class="anchor" on:click={e => e.stopPropagation()}>{val.str}</a>
-                        {:else if safeTranslate(val.split(':')[0])}
-                        	<span class="text">{safeTranslate(val.split(':')[0]+"Colon")} {val.split(':')[1]}</span>
+                        {:else if unsafeTranslate(val.split(':')[0])}
+														<span class="text">{unsafeTranslate(val.split(':')[0]+"Colon")} {val.split(':')[1]}</span>
 						{:else}
 						  {val ?? '-'}
                         {/if}
@@ -368,20 +368,12 @@
                   {/if}
                 {:else if value && value.hexcolor}
                   <p class="flex w-fit min-w-24 justify-center px-2 py-1 rounded-md ml-2 whitespace-nowrap {classesHexBackgroundText(value.hexcolor)}" style="background-color: {value.hexcolor}">
-                    {#if localItems()[toCamelCase(value.name ?? value.str ?? '-')]}
-                      {localItems()[toCamelCase(value.name ?? value.str ?? '-')]}
-                    {:else}
-                      {value.name ?? value.str ?? '-'}
-                    {/if}
+										{safeTranslate(value.name ?? value.str) ?? '-'}
                   </p>
 				{:else if ISO_8601_REGEX.test(value)}
 									{formatDateOrDateTime(value, languageTag())}
                 {:else}
-					{#if localItems()[toCamelCase(value)]}
-						{localItems()[toCamelCase(value)]}
-					{:else}
-						{value ?? '-'}
-					{/if}
+						{safeTranslate(value ?? '-')}
                 {/if}
                 </span>
 							{/if}

frontend/src/lib/utils/constants.ts

@@ -12,8 +12,6 @@ export const BACKEND_API_EXPOSED_URL = `${
 		: BASE_API_URL
 }`;
 
-export const RISK_COLOR_PALETTE: string[] = ['#BBF7D0', '#BEF264', '#FEF08A', '#FBBF24', '#F87171'];
-
 export const complianceResultColorMap: { [key: string]: string } = {
 	not_assessed: '#d1d5db',
 	partially_compliant: '#fde047',

frontend/src/lib/utils/i18n.ts

@@ -2,17 +2,24 @@ import * as m from '$paraglide/messages.js';
 import { toCamelCase } from '$lib/utils/locales';
 
 /**
- * Safe translate function that returns the key if the translation is not found.
+ * Unafe translate function that doesn't return anything if the key if the translation is not found.
  * @param key The key to translate.
  * @param params The parameters to pass to the translation function.
  * @param options The options to pass to the translation function.
  */
-export function safeTranslate(key: string, params = {}, options = {}): string {
-	if (Object.hasOwn(m, toCamelCase(key))) {
-		return m[toCamelCase(key)](params, options);
-	}
+export function unsafeTranslate(key: string, params = {}, options = {}): string | undefined {
+	key = toCamelCase(key);
 	if (Object.hasOwn(m, key)) {
 		return m[key](params, options);
 	}
-	return key;
+}
+
+/**
+ * Safe translate function that returns the key if the translation is not found.
+ * @param key The key to translate.
+ * @param params The parameters to pass to the translation function.
+ * @param options The options to pass to the translation function.
+ */
+export function safeTranslate(key: string, params = {}, options = {}): string {
+	return unsafeTranslate(key) || key;
 }