fix child data loading bug, adjust breadcrumb navigation

ssciwr · Nov 13, 2024 · 8fad755 · 8fad755
1 parent b6e1452
commit 8fad755
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 22 deletions.
diff --git a/frontend/src/lib/components/Milestone.svelte b/frontend/src/lib/components/Milestone.svelte
@@ -15,16 +15,19 @@ import { Accordion, AccordionItem, Button, Checkbox } from "flowbite-svelte";
 import {
 	ArrowLeftOutline,
 	ArrowRightOutline,
+	EditOutline,
+	GridOutline,
 	InfoCircleSolid,
 	QuestionCircleSolid,
+	RectangleListOutline,
+	UserSettingsOutline,
 } from "flowbite-svelte-icons";
 import { onMount } from "svelte";
 import { _, locale } from "svelte-i18n";
 import AlertMessage from "./AlertMessage.svelte";
 import Breadcrumbs from "./Navigation/Breadcrumbs.svelte";
 
 onMount(() => {
-	console.log("onmount milestonegroup: ", contentStore.milestoneGroupData);
 	if (
 		contentStore.milestoneGroupData &&
 		contentStore.milestoneGroupData.milestones
@@ -131,7 +134,7 @@ async function setup() {
 let milestoneAnswerSession = $state(
 	null as MilestoneAnswerSessionPublic | null | undefined,
 );
-let currentMilestoneIndex = $state(0);
+let currentMilestoneIndex = $state(contentStore.milestoneIndex);
 let currentMilestone = $state(undefined as MilestonePublic | undefined);
 let selectedAnswer = $derived(
 	milestoneAnswerSession?.answers?.[`${currentMilestone?.id}`]?.answer,
@@ -142,35 +145,33 @@ let autoGoToNextMilestone = $state(false);
 let currentImageIndex = $state(0);
 const promise = setup();
 const breadcrumbdata = $derived([
-	{
-		label: $_("childData.overviewLabel"),
-		onclick: () => {
-			activeTabChildren.set("childrenGallery");
-		},
-	},
 	{
 		label: currentChild.name,
 		onclick: () => {
 			activeTabChildren.set("childrenRegistration");
 		},
+		symbol: UserSettingsOutline,
 	},
 	{
 		label: $_("milestone.groupOverviewLabel"),
 		onclick: () => {
 			activeTabChildren.set("milestoneGroup");
 		},
+		symbol: RectangleListOutline,
 	},
 	{
 		label: contentStore.milestoneGroupData.text[$locale].title,
 		onclick: () => {
 			activeTabChildren.set("milestoneOverview");
 		},
+		symbol: GridOutline,
 	},
 	{
 		label:
 			String(currentMilestoneIndex + 1) +
 			"/" +
 			String(contentStore.milestoneGroupData.milestones.length),
+		symbol: EditOutline,
 	},
 ]);
 </script>
@@ -199,10 +200,10 @@ const breadcrumbdata = $derived([
 				<h2 class="mb-2 text-2xl font-bold text-gray-700 dark:text-gray-400">
 					{currentMilestone.text[$locale].title}
 				</h2>
-				<p>{currentMilestone.text[$locale].desc}</p>
+				<p class="mb-2 text-base">{currentMilestone.text[$locale].desc}</p>
 				<Accordion flush>
 					<AccordionItem>
-						<span slot="header" class="flex gap-2 text-base">
+						<span slot="header" class="flex gap-2 text-base text-gray-700 dark:text-gray-400">
 							<InfoCircleSolid class="mt-0.5" />
 							<span>{$_('milestone.observation')}</span>
 						</span>
@@ -211,7 +212,7 @@ const breadcrumbdata = $derived([
 						</p>
 					</AccordionItem>
 					<AccordionItem>
-						<span slot="header" class="flex gap-2 text-base">
+						<span slot="header" class="flex gap-2 text-base text-gray-700 dark:text-gray-400">
 							<QuestionCircleSolid class="mt-0.5" />
 							<span>{$_('milestone.help')}</span>
 						</span>
@@ -234,24 +235,24 @@ const breadcrumbdata = $derived([
 						{$_(`milestone.answer${answerIndex}-text`)}
 					</MilestoneButton>
 				{/each}
-				<div class="flex flex-row justify-center">
+				<div class="flex flex-row justify-center ">
 					<Button
 						color="light"
 						disabled={currentMilestoneIndex === 0}
 						on:click={prevMilestone}
-						class="m-1 mt-4"
+						class="m-1 mt-4 text-gray-700 dark:text-gray-400"
 					>
-						<ArrowLeftOutline class="me-2 h-5 w-5" />
+						<ArrowLeftOutline class="me-2 h-5 w-5 text-gray-700 dark:text-gray-400" />
 						{$_('milestone.prev')}
 					</Button>
 					<Button
 						color="light"
 						disabled={selectedAnswer === undefined}
 						on:click={nextMilestone}
-						class="m-1 mt-4"
+						class="m-1 mt-4 text-gray-700 dark:text-gray-400"
 					>
 						{$_('milestone.next')}
-						<ArrowRightOutline class="ms-2 h-5 w-5" />
+						<ArrowRightOutline class="ms-2 h-5 w-5 text-gray-700 dark:text-gray-400" />
 					</Button>
 				</div>
 				<Checkbox class="m-1 justify-center" bind:checked={autoGoToNextMilestone}>

diff --git a/frontend/src/lib/components/MilestoneOverview.svelte b/frontend/src/lib/components/MilestoneOverview.svelte
@@ -13,8 +13,8 @@ import { activeTabChildren } from "$lib/stores/componentStore";
 import { contentStore } from "$lib/stores/contentStore.svelte";
 import {
 	CheckCircleSolid,
-	EditOutline,
 	ExclamationCircleSolid,
+	GridOutline,
 	RectangleListOutline,
 	UserSettingsOutline,
 } from "flowbite-svelte-icons";
@@ -104,14 +104,13 @@ async function setup(): Promise<void> {
 		console.log("milestoneAnswerSession", milestoneAnswerSession);
 
 		data = contentStore.milestoneGroupData.milestones.map(
-			(item: MilestonePublic) => {
+			(item: MilestonePublic, idx) => {
 				const answer = milestoneAnswerSession.answers[`${item.id}`];
 				const complete: boolean =
 					answer &&
 					answer.answer !== null &&
 					answer.answer !== undefined &&
 					answer.answer > 0;
-				console.log("answer", answer);
 				return {
 					header: item?.text?.[$locale]?.title ?? "",
 					complete: complete,
@@ -121,6 +120,7 @@ async function setup(): Promise<void> {
 							activeTabChildren.set("milestone");
 							contentStore.milestone = item.id;
 							contentStore.milestoneData = item;
+							contentStore.milestoneIndex = idx;
 						},
 					},
 					auxilliary: complete ? CheckCircleSolid : ExclamationCircleSolid,
@@ -200,7 +200,7 @@ const breadcrumbdata: any[] = [
 		onclick: () => {
 			activeTabChildren.set("milestoneOverview");
 		},
-		symbol: EditOutline,
+		symbol: GridOutline,
 	},
 ];
 </script>

diff --git a/frontend/src/lib/components/Navigation/Breadcrumbs.svelte b/frontend/src/lib/components/Navigation/Breadcrumbs.svelte
@@ -18,7 +18,7 @@ let smallScreen = $derived(windowWidth < 800);
 	{#each data as item}
 		<BreadcrumbItem
 			href={item.href}
-			linkClass="ms-1 text-lg font-medium text-gray-500 hover:text-gray-900 md:ms-2 dark:text-gray-400  hover:text-white dark:hover:text-white"
+			linkClass="ms-1 text-lg font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400  hover:text-white dark:hover:text-white"
 		>
 		<div class="flex items-center justify-center">
 			{#if item.href}
@@ -29,7 +29,7 @@ let smallScreen = $derived(windowWidth < 800);
 				{/if}
 			{:else}
 				<button
-					class="text-lg ms-1 font-medium text-gray-500 hover:text-gray-900 md:ms-2 dark:text-gray-400  dark:hover:text-white"
+					class="text-lg ms-1 font-medium text-gray-700 hover:text-gray-900 md:ms-2 dark:text-gray-400  dark:hover:text-white"
 					onclick={item.onclick}
 					>
 					<div class="flex items-center justify-center">

diff --git a/frontend/src/lib/stores/contentStore.svelte.ts b/frontend/src/lib/stores/contentStore.svelte.ts
@@ -12,6 +12,12 @@ function createContent() {
 		set milestone(value: number) {
 			content.milestone = value;
 		},
+		set milestoneIndex(value: number) {
+			content.milestoneIndex = value;
+		},
+		get milestoneIndex() {
+			return content.milestoneIndex;
+		},
 		get milestone() {
 			return content.milestone;
 		},