fix translation mapping in admin panel

Author: Lena Emme

src/components/database/editableEntry.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
 	import type { Entry } from "$models/entry.model"
 	
-	import { academicTitleMapping } from "$lib/entryMappings"
+	import { academicTitleMapping, makeTranslatedMapping, subjectMapping, offerMapping, attributeMapping, accessibleMapping, typeMapping } from "$lib/entryMappings"
 	
 	import axios from "axios"
 	import { getObjChanges, replaceFields } from "$lib/utils"
-	import { t } from "$lib/localization"
+	import { t, tEntry } from "$lib/localization"
 	import { popupOk, popupError } from "$components/popup.svelte"
 	
 	import EditableInputField from "$components/database/editableInputField.svelte"
@@ -21,8 +21,6 @@
 	import XIcon from "lucide-icons-svelte/x.svelte"
 	import LinkIcon from "lucide-icons-svelte/link.svelte"
 	
-	const { subjectMapping, typeMapping, offerMapping, attributeMapping, accessibleMapping } = t("entryMapping");
-
 	let edit: boolean = false;
 	export let entry: Entry = null;
 	
@@ -139,7 +137,7 @@
 	<div class="auto-grid">
 		<div class="header">
 			<EditableInputField label="Name des Eintrags" bind:value={ _entry.name } { edit } />
-			<EditableSelectField label="Kategorie" bind:value={ _entry.type } mapping={ typeMapping } { edit } />
+			<EditableSelectField label="Kategorie" bind:value={ _entry.type } mapping={ makeTranslatedMapping(typeMapping, tEntry("typeMapping")) } { edit } />
 			<EditableCheckbox label="Blockiert" bind:checked={ _entry.blocked } { edit } class="narrow"/>
 			<EditableCheckbox label="Freigeschaltet" bind:checked={ _entry.approved } { edit } class="narrow"/>
 		</div>
@@ -168,7 +166,7 @@
 			<span class="group-title"> Kontaktdaten </span>
 
 			<div class="sub-grid">
-				<EditableSelectField label="Titel" bind:value={ _entry.academicTitle } mapping={ academicTitleMapping } nullMapping="Kein Titel" { edit } />
+				<EditableSelectField label="Titel" bind:value={ _entry.academicTitle } mapping={ makeTranslatedMapping(academicTitleMapping, tEntry("academicTitleMapping")) } nullMapping="Kein Titel" { edit } />
 				<EditableInputField label="Vorname" bind:value={ _entry.firstName } { edit } />
 				<EditableInputField label="Nachname" bind:value={ _entry.lastName } { edit } />
 
@@ -185,19 +183,19 @@
 		</div>
 
 		<div class="sub-grid">
-			<EditableRadioList label="Angebote" bind:value={ _entry.meta.offers } mapping={ offerMapping[_entry.type] } { edit } />
-			<EditableRadioList label="Attribute" bind:value={ _entry.meta.attributes } mapping={ attributeMapping[_entry.type] } { edit } />
+			<EditableRadioList label="Angebote" bind:value={ _entry.meta.offers } mapping={ makeTranslatedMapping(offerMapping[_entry.type], tEntry("offerMapping")) } { edit } />
+			<EditableRadioList label="Attribute" bind:value={ _entry.meta.attributes } mapping={ makeTranslatedMapping(attributeMapping[_entry.type], tEntry("attributeMapping")) } { edit } />
 		</div>
 
 		<div class="sub-grid">
 			<EditableInputField label="Besonderheiten" bind:value={ _entry.meta.specials } { edit } />
 			<EditableInputField label="Mindestalter" number bind:value={ _entry.meta.minAge } { edit } />
 
 			{#if subjectMapping[_entry.type]}
-				<EditableSelectField label="Fachrichtung" bind:value={ _entry.meta.subject } mapping={ subjectMapping[_entry.type] } { edit } />
+				<EditableSelectField label="Fachrichtung" bind:value={ _entry.meta.subject } mapping={ makeTranslatedMapping(subjectMapping[_entry.type], tEntry("subjectMapping")) } { edit } />
 			{/if}
 
-			<EditableSelectField label="Barrierefrei" bind:value={ _entry.accessible } mapping={ accessibleMapping } { edit } />
+			<EditableSelectField label="Barrierefrei" bind:value={ _entry.accessible } mapping={ makeTranslatedMapping(accessibleMapping, tEntry("accessibleMapping")) } { edit } />
 		</div>
 
 		<div class="sub-grid grid-full-width">

src/components/entry/entry.svelte

@@ -50,7 +50,7 @@
 			navigator.share({ url });
 		} else {
 			navigator.clipboard.writeText(window.location.origin + url);
-			popupOk(t("errors.copiedLinktToClipboard"));
+			popupOk(t("infos.copiedLinkToClipboard"));
 		}
 	}
 </script>

src/components/forms/submitForm.svelte

@@ -207,7 +207,7 @@
 		<Select bind:value={ newEntry.meta.subject } required>
 			<option value="" disabled selected> { t("submitForm.selectSubject") } </option>
 
-			{#each subjectMapping as subject}
+			{#each subjectMapping[newEntry.type] as subject}
 				<option value={ subject }> { tEntry("subjectMapping")[subject] } </option>
 			{/each}
 		</Select>

src/lib/entryMappings.ts

@@ -148,21 +148,33 @@ export const offerMapping = {
 	]
 } as const;
 
-export const subjectMapping = [
-	"therapist",
-	"psychologist",
-	"naturopath",
-	"other"
-] as const;
+export const subjectMapping = {
+	therapist: [
+		"therapist",
+		"psychologist",
+		"naturopath",
+		"other"
+	]
+};
 
 export const accessibleMapping = [
 	"unknown",
 	"yes",
 	"no"
-] as const;
+];
 
 export const academicTitleMapping = [
 	"dr",
 	"prof",
 	"prof_dr"
-]
+]
+
+export function makeTranslatedMapping(mapping: string[], translation: Record<string, string>) {
+	let m = {};
+
+	for (const key of mapping) {
+		m[key] = translation[key];
+	}
+
+	return m;
+}

src/locales/de.json

@@ -313,7 +313,7 @@
 	},
 	"infos": {
 		"copiedToClipboard": "Text in die Zwischenablage kopiert!",
-		"copiedLinktToClipboard": "Link in die Zwischenablage kopiert!"
+		"copiedLinkToClipboard": "Link in die Zwischenablage kopiert!"
 	},
 	"altTexts": {
 		"contribute": "Mehrere Hände beschriften einen Papierbogen",

src/locales/en.json

@@ -313,7 +313,7 @@
 	},
 	"infos": {
 		"copiedToClipboard": "Text copied to clipboard!",
-		"copiedLinktToClipboard": "Link copied to clipboard!"
+		"copiedLinkToClipboard": "Link copied to clipboard!"
 	},
 	"altTexts": {
 		"contribute": "Several hands writing a sheet of paper",