work on localization, add setup-await pattern to milestoneoverview

ssciwr · Nov 11, 2024 · d900c19 · d900c19
1 parent be2393d
commit d900c19
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 38 deletions.
diff --git a/frontend/src/lib/components/ChildrenGallery.svelte b/frontend/src/lib/components/ChildrenGallery.svelte
@@ -44,8 +44,9 @@ async function setup(): Promise<any> {
 					header: child.name,
 					image,
 					events: {
-						onclick: () => {
+						onclick: async () => {
 							currentChild.id = child.id;
+							await currentChild.load_data();
 							activeTabChildren.set("childrenRegistration");
 						},
 					},

diff --git a/frontend/src/lib/components/MilestoneGroup.svelte b/frontend/src/lib/components/MilestoneGroup.svelte
@@ -14,7 +14,7 @@ let alertMessage = $state("");
 let promise = $state(setup());
 
 async function setup(): Promise<any> {
-	await currentChild.data();
+	await currentChild.load_data();
 	const milestonegroup = await getMilestoneGroups({
 		path: { child_id: currentChild.id },
 	});
@@ -40,11 +40,9 @@ const breadcrumbdata: any[] = [
 		},
 	},
 	{
-		label: currentChild.data.name,
+		label: currentChild.name,
 		onclick: () => {
-			activeTabChildren.update((value) => {
-				return "childrenRegistration";
-			});
+			activeTabChildren.set("childrenRegistration");
 		},
 	},
 	{

diff --git a/frontend/src/lib/components/MilestoneOverview.svelte b/frontend/src/lib/components/MilestoneOverview.svelte
@@ -1,11 +1,15 @@
+<svelte:options runes={true} />
 <script lang="ts">
 import CardDisplay from "$lib/components/DataDisplay/CardDisplay.svelte";
 import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte";
 import { convertData, data } from "$lib/components/MilestoneOverview";
 import Breadcrumbs from "$lib/components/Navigation/Breadcrumbs.svelte";
+import { currentChild } from "$lib/stores/childrenStore.svelte";
 import { activeTabChildren } from "$lib/stores/componentStore";
+import { _ } from "svelte-i18n";
+import AlertMessage from "./AlertMessage.svelte";
 
-export let milestones = data.milestones;
+let milestones = $state(data.milestones);
 
 interface MilestoneData {
 	header: string;
@@ -22,9 +26,9 @@ function searchStatus(data: MilestoneData[], key: string): MilestoneData[] {
 	} else {
 		return data.filter((item) => {
 			// button label contains info about completion status => use for search
-			if (key === "fertig") {
+			if (key === $_("milestone.complete")) {
 				return item.complete === true;
-			} else if (key === "unfertig") {
+			} else if (key === $_("milestone.incomplete")) {
 				return item.complete === false;
 			}
 		});
@@ -94,7 +98,7 @@ const searchData = [
 	},
 	{
 		label: "Titel",
-		placeholder: "Nach Meilenstein durchsuchen",
+		placeholder: "Nach Titel durchsuchen",
 		filterFunction: searchTitle,
 	},
 	{
@@ -106,35 +110,21 @@ const searchData = [
 
 const breadcrumbdata: any[] = [
 	{
-		label: "Benutzer",
+		label: $_("childData.overviewLabel"),
 		onclick: () => {
-			activeTabChildren.update((_) => {
-				return "";
-			});
+			activeTabChildren.set("childrenGallery");
 		},
 	},
 	{
-		label: "Kinderübersicht",
+		label: currentChild.name,
 		onclick: () => {
-			activeTabChildren.update((value) => {
-				return "childrenGallery";
-			});
+			activeTabChildren.set("childrenRegistration");
 		},
 	},
 	{
-		label: "Meike",
+		label: $_("milestone.groupOverviewLabel"),
 		onclick: () => {
-			activeTabChildren.update((value) => {
-				return "childrenRegistration";
-			});
-		},
-	},
-	{
-		label: "Bereichsübersicht",
-		onclick: () => {
-			activeTabChildren.update((value) => {
-				return "milestoneGroup";
-			});
+			activeTabChildren.set("milestoneGroup");
 		},
 	},
 	{
@@ -148,9 +138,19 @@ const breadcrumbdata: any[] = [
 	},
 ];
 
+async function setup(): Promise<void> {
+	console.log("setup overview");
+	await currentChild.load_data();
+	console.log("done");
+}
+
 const rawdata = convertData(milestones).sort((a, b) => a.complete - b.complete); // FIXME: the convert step should not be here and will be handeled backend-side
-</script>
 
+const promise = setup();
+</script>
+{#await promise}
+<p>Loading...</p>
+{:then}
 <div class="mx-auto flex flex-col border border-gray-200 p-4 md:rounded-t-lg dark:border-gray-700">
 	<Breadcrumbs data={breadcrumbdata} />
 	<div class="grid gap-y-4 p-4">
@@ -174,3 +174,6 @@ const rawdata = convertData(milestones).sort((a, b) => a.complete - b.complete);
 		/>
 	</div>
 </div>
+{:catch error}
+<AlertMessage message={error} />
+{/await}
diff --git a/frontend/src/lib/stores/childrenStore.svelte.ts b/frontend/src/lib/stores/childrenStore.svelte.ts
@@ -2,18 +2,29 @@ import { type ChildPublic, getChild } from "$lib/client";
 
 function createCurrentChild() {
 	let currentChild: number | null = $state(null);
-	let data: ChildPublic | null = $state(null);
+	let childdata: ChildPublic | null = $state(null);
 	return {
 		get id() {
 			return currentChild;
 		},
+		get name() {
+			return childdata?.name;
+		},
+		get month() {
+			return childdata?.birth_month;
+		},
+		get year() {
+			return childdata?.birth_year;
+		},
 		set id(value: number | null) {
 			currentChild = value;
 		},
-		async data() {
+		async load_data() {
 			if (currentChild === null) {
 				return null;
-			} else if (data === null) {
+			}
+
+			if (childdata === null) {
 				const response = await getChild({
 					path: {
 						child_id: currentChild,
@@ -23,11 +34,8 @@ function createCurrentChild() {
 					console.log("Error during child retrieval: ", response.error);
 					return null;
 				} else {
-					data = response.data;
-					return data;
+					childdata = response.data;
 				}
-			} else {
-				return data;
 			}
 		},
 	};