Merge pull request #129 from ssciwr/fix_128_use_lang_code_as_primary_key

Use 2-char lang code as Language primary key
ssciwr · Oct 24, 2024 · 5fac037 · 5fac037
2 parents d9d7676 + b566083
commit 5fac037
Show file tree

Hide file tree

Showing 23 changed files with 376 additions and 401 deletions.
diff --git a/frontend/src/lib/client/schemas.gen.ts b/frontend/src/lib/client/schemas.gen.ts
@@ -238,40 +238,16 @@ export const HTTPValidationErrorSchema = {
 export const LanguageSchema = {
 	properties: {
 		id: {
-			anyOf: [
-				{
-					type: 'integer'
-				},
-				{
-					type: 'null'
-				}
-			],
-			title: 'Id'
-		},
-		lang: {
 			type: 'string',
 			maxLength: 2,
-			title: 'Lang'
+			title: 'Id'
 		}
 	},
 	type: 'object',
-	required: ['lang'],
+	required: ['id'],
 	title: 'Language'
 } as const;
 
-export const LanguageCreateSchema = {
-	properties: {
-		lang: {
-			type: 'string',
-			maxLength: 2,
-			title: 'Lang'
-		}
-	},
-	type: 'object',
-	required: ['lang'],
-	title: 'LanguageCreate'
-} as const;
-
 export const MilestoneAdminSchema = {
 	properties: {
 		id: {
@@ -482,7 +458,8 @@ export const MilestoneGroupTextSchema = {
 		lang_id: {
 			anyOf: [
 				{
-					type: 'integer'
+					type: 'string',
+					maxLength: 2
 				},
 				{
 					type: 'null'
@@ -631,7 +608,8 @@ export const MilestoneTextSchema = {
 		lang_id: {
 			anyOf: [
 				{
-					type: 'integer'
+					type: 'string',
+					maxLength: 2
 				},
 				{
 					type: 'null'
@@ -843,7 +821,8 @@ export const UserQuestionTextSchema = {
 		lang_id: {
 			anyOf: [
 				{
-					type: 'integer'
+					type: 'string',
+					maxLength: 2
 				},
 				{
 					type: 'null'

diff --git a/frontend/src/lib/client/types.gen.ts b/frontend/src/lib/client/types.gen.ts
@@ -66,12 +66,7 @@ export type HTTPValidationError = {
 };
 
 export type Language = {
-	id?: number | null;
-	lang: string;
-};
-
-export type LanguageCreate = {
-	lang: string;
+	id: string;
 };
 
 export type MilestoneAdmin = {
@@ -132,7 +127,7 @@ export type MilestoneGroupText = {
 	title?: string;
 	desc?: string;
 	group_id?: number | null;
-	lang_id?: number | null;
+	lang_id?: string | null;
 };
 
 export type MilestoneGroupTextPublic = {
@@ -166,7 +161,7 @@ export type MilestoneText = {
 	obs?: string;
 	help?: string;
 	milestone_id?: number | null;
-	lang_id?: number | null;
+	lang_id?: string | null;
 };
 
 export type MilestoneTextPublic = {
@@ -220,7 +215,7 @@ export type UserQuestionText = {
 	question?: string;
 	options_json?: string;
 	user_question_id?: number | null;
-	lang_id?: number | null;
+	lang_id?: string | null;
 	options?: string;
 };
 
@@ -253,9 +248,7 @@ export type ValidationError = {
 	type: string;
 };
 
-export type GetLanguagesResponse = {
-	[key: string]: number;
-};
+export type GetLanguagesResponse = Array<string>;
 
 export type GetLanguagesError = unknown;
 
@@ -302,7 +295,7 @@ export type GetUserQuestionsResponse = Array<UserQuestionPublic>;
 export type GetUserQuestionsError = unknown;
 
 export type CreateLanguageData = {
-	body: LanguageCreate;
+	body: Language;
 };
 
 export type CreateLanguageResponse = Language;
@@ -311,7 +304,7 @@ export type CreateLanguageError = HTTPValidationError;
 
 export type DeleteLanguageData = {
 	path: {
-		language_id: number;
+		language_id: string;
 	};
 };
 
@@ -326,7 +319,7 @@ export type UpdateI18NData = {
 		};
 	};
 	path: {
-		language_id: number;
+		language_id: string;
 	};
 };
 

diff --git a/frontend/src/lib/components/Admin/EditMilestoneGroupModal.svelte b/frontend/src/lib/components/Admin/EditMilestoneGroupModal.svelte
@@ -2,9 +2,8 @@
 
 <script lang="ts">
 	import { InputAddon, Textarea, Label, ButtonGroup, Fileupload, Modal } from 'flowbite-svelte';
-	import { _ } from 'svelte-i18n';
+	import { _, locales } from 'svelte-i18n';
 	import { onMount } from 'svelte';
-	import { languages } from '$lib/stores/langStore';
 	import type { MilestoneGroupAdmin } from '$lib/client/types.gen';
 	import { updateMilestoneGroupAdmin, uploadMilestoneGroupImage } from '$lib/client/services.gen';
 	import { milestoneGroupImageUrl, refreshMilestoneGroups } from '$lib/admin.svelte';
@@ -67,10 +66,10 @@
 			{@const title = $_(`admin.${textKey}`)}
 			<div class="mb-5">
 				<Label class="mb-2">{title}</Label>
-				{#each Object.entries($languages) as [lang, lang_id]}
+				{#each $locales as lang_id}
 					<div class="mb-1">
 						<ButtonGroup class="w-full">
-							<InputAddon>{lang}</InputAddon>
+							<InputAddon>{lang_id}</InputAddon>
 							<Textarea bind:value={milestoneGroup.text[lang_id][textKey]} placeholder={title} />
 						</ButtonGroup>
 					</div>

diff --git a/frontend/src/lib/components/Admin/EditMilestoneModal.svelte b/frontend/src/lib/components/Admin/EditMilestoneModal.svelte
@@ -2,10 +2,9 @@
 
 <script lang="ts">
 	import { InputAddon, Textarea, Label, ButtonGroup, Fileupload, Modal } from 'flowbite-svelte';
-	import { languages } from '$lib/stores/langStore';
 	import SaveButton from '$lib/components/Admin/SaveButton.svelte';
 	import CancelButton from '$lib/components/Admin/CancelButton.svelte';
-	import { _ } from 'svelte-i18n';
+	import { _, locales } from 'svelte-i18n';
 	import type { MilestoneAdmin } from '$lib/client/types.gen';
 	import { refreshMilestoneGroups } from '$lib/admin.svelte';
 	import { updateMilestone, uploadMilestoneImage } from '$lib/client/services.gen';
@@ -54,10 +53,10 @@
 			{@const title = $_(`admin.${textKey}`)}
 			<div class="mb-5">
 				<Label class="mb-2">{title}</Label>
-				{#each Object.entries($languages) as [lang, lang_id]}
+				{#each $locales as lang_id}
 					<div class="mb-1">
 						<ButtonGroup class="w-full">
-							<InputAddon>{lang}</InputAddon>
+							<InputAddon>{lang_id}</InputAddon>
 							<Textarea bind:value={milestone.text[lang_id][textKey]} placeholder={title} />
 						</ButtonGroup>
 					</div>

diff --git a/frontend/src/lib/components/Admin/EditUserQuestionModal.svelte b/frontend/src/lib/components/Admin/EditUserQuestionModal.svelte
@@ -14,8 +14,7 @@
 		Select,
 		type SelectOptionType
 	} from 'flowbite-svelte';
-	import { _ } from 'svelte-i18n';
-	import { languages } from '$lib/stores/langStore';
+	import { _, locales } from 'svelte-i18n';
 	import { updateUserQuestion } from '$lib/client/services.gen';
 	import InputPreview from '$lib/components/Admin/InputPreview.svelte';
 	import SaveButton from '$lib/components/Admin/SaveButton.svelte';
@@ -41,7 +40,7 @@
 			return;
 		}
 		const values = userQuestion.options.split(';');
-		for (const lang_id in $languages) {
+		for (const lang_id in $locales) {
 			const items = userQuestion.text[lang_id].options.split(';');
 			userQuestion.text[lang_id].options_json = JSON.stringify(
 				values.map(function (value, index) {
@@ -51,7 +50,7 @@
 		}
 	}
 
-	export async function saveChanges() {
+	async function saveChanges() {
 		if (!userQuestion) {
 			return;
 		}
@@ -74,7 +73,7 @@
 					{#each Object.values(userQuestion.text) as text}
 						<div class="mb-1">
 							<ButtonGroup class="w-full">
-								<InputAddon>{$languages[text.lang_id]}</InputAddon>
+								<InputAddon>{$locales[text.lang_id]}</InputAddon>
 								<Input
 									bind:value={text.question}
 									on:input={() => {
@@ -106,7 +105,7 @@
 						{#each Object.values(userQuestion.text) as text}
 							<div class="mb-1">
 								<ButtonGroup class="w-full">
-									<InputAddon>{$languages[text.lang_id]}</InputAddon>
+									<InputAddon>{$locales[text.lang_id]}</InputAddon>
 									<Textarea
 										bind:value={text.options}
 										on:input={updateOptionsJson}
@@ -124,13 +123,13 @@
 						<Label class="mb-2">Preview</Label>
 						<div class="flex flex-row">
 							<ButtonGroup class="mb-2 mr-2">
-								{#each Object.entries($languages) as [lang, lang_id]}
+								{#each $locales as lang_id}
 									<Button
 										checked={preview_lang_id === lang_id}
 										on:click={(e) => {
 											e.stopPropagation();
 											preview_lang_id = lang_id;
-										}}>{lang}</Button
+										}}>{lang_id}</Button
 									>
 								{/each}
 							</ButtonGroup>

diff --git a/frontend/src/lib/components/Admin/Languages.svelte b/frontend/src/lib/components/Admin/Languages.svelte
@@ -12,10 +12,9 @@
 		Select
 	} from 'flowbite-svelte';
 	import ISO6391 from 'iso-639-1';
-	import { _ } from 'svelte-i18n';
+	import { _, locales } from 'svelte-i18n';
 	import type { SelectOptionType } from 'flowbite-svelte';
 	import { getTranslations } from '$lib/i18n';
-	import { languages } from '$lib/stores/langStore';
 	import DeleteModal from '$lib/components/Admin/DeleteModal.svelte';
 	import AddButton from '$lib/components/Admin/AddButton.svelte';
 	import DeleteButton from '$lib/components/Admin/DeleteButton.svelte';
@@ -27,12 +26,12 @@
 		return { value: k, name: langNames[i] };
 	}) as SelectOptionType<string>[];
 
-	let selectedLang: string = $state('');
+	let selectedLangId: string = $state('');
 	let currentLanguageId: string = $state('');
 	let showDeleteModal: boolean = $state(false);
 
 	async function createLanguageAndUpdateLanguages() {
-		const { data, error } = await createLanguage({ body: { lang: selectedLang } });
+		const { data, error } = await createLanguage({ body: { id: selectedLangId } });
 		if (error) {
 			console.log(error);
 		} else {
@@ -43,7 +42,7 @@
 
 	async function deleteLanguageAndUpdateLanguages() {
 		const { data, error } = await deleteLanguage({
-			path: { language_id: Number(currentLanguageId) }
+			path: { language_id: currentLanguageId }
 		});
 		if (error) {
 			console.log(error);
@@ -63,19 +62,19 @@
 			<TableHeadCell>Actions</TableHeadCell>
 		</TableHead>
 		<TableBody>
-			{#each Object.entries($languages) as [lang, lang_id]}
+			{#each $locales as lang_id}
 				<TableBodyRow>
 					<TableBodyCell>
-						{lang}
+						{lang_id}
 					</TableBodyCell>
 					<TableBodyCell>
-						{ISO6391.getNativeName(lang)}
+						{ISO6391.getNativeName(lang_id)}
 					</TableBodyCell>
 					<TableBodyCell>
-						{#if lang_id > 2}
+						{#if !['de', 'en'].includes(lang_id)}
 							<DeleteButton
 								onclick={() => {
-									currentLanguageId = `${lang_id}`;
+									currentLanguageId = lang_id;
 									showDeleteModal = true;
 								}}
 							/>
@@ -89,12 +88,12 @@
 					<Select
 						class="mt-2"
 						items={langItems}
-						bind:value={selectedLang}
+						bind:value={selectedLangId}
 						placeholder="Select a language..."
 					/>
 				</TableBodyCell>
 				<TableBodyCell>
-					<AddButton onclick={createLanguageAndUpdateLanguages} disabled={selectedLang === ''} />
+					<AddButton onclick={createLanguageAndUpdateLanguages} disabled={selectedLangId === ''} />
 				</TableBodyCell>
 			</TableBodyRow>
 		</TableBody>

diff --git a/frontend/src/lib/components/Admin/MilestoneGroups.svelte b/frontend/src/lib/components/Admin/MilestoneGroups.svelte
@@ -10,7 +10,7 @@
 		TableHeadCell,
 		Card
 	} from 'flowbite-svelte';
-	import { _ } from 'svelte-i18n';
+	import { _, locale } from 'svelte-i18n';
 	import ChevronUpOutline from 'flowbite-svelte-icons/ChevronUpOutline.svelte';
 	import ChevronDownOutline from 'flowbite-svelte-icons/ChevronDownOutline.svelte';
 	import EditMilestoneGroupModal from '$lib/components/Admin/EditMilestoneGroupModal.svelte';
@@ -19,7 +19,6 @@
 	import AddButton from '$lib/components/Admin/AddButton.svelte';
 	import EditButton from '$lib/components/Admin/EditButton.svelte';
 	import DeleteButton from '$lib/components/Admin/DeleteButton.svelte';
-	import { lang_id } from '$lib/stores/langStore';
 	import { milestoneGroups } from '$lib/stores/adminStore';
 	import { refreshMilestoneGroups, milestoneGroupImageUrl } from '$lib/admin.svelte';
 	import {
@@ -129,7 +128,7 @@
 			</TableHead>
 			<TableBody>
 				{#each $milestoneGroups[`${milestone_age_group_id}`] as milestoneGroup, groupIndex (milestoneGroup.id)}
-					{@const groupTitle = milestoneGroup.text[$lang_id]?.title}
+					{@const groupTitle = milestoneGroup.text[$locale]?.title}
 					<TableBodyRow
 						on:click={() => {
 							toggleOpenGroupIndex(groupIndex);
@@ -182,7 +181,7 @@
 									</TableHead>
 									<TableBody>
 										{#each milestoneGroup.milestones as milestone (milestone.id)}
-											{@const milestoneTitle = milestone?.text[$lang_id]?.title}
+											{@const milestoneTitle = milestone?.text[$locale]?.title}
 											<TableBodyRow>
 												<TableBodyCell>
 													{#if milestone?.images?.length}