Integrate milestones userland with backend (#158)

* merge add-childquestion_backend-integration until 32304c9 * make data a member of currentChild for now, start integrating backend calls * work on localization, add setup-await pattern to milestoneoverview * Squashed commit of the following: commit 43bf1b3 Author: Liam Keegan <[email protected]> Date: Mon Nov 11 08:17:47 2024 +0100 Add admin option to delete milestone images (#150) * Add admin option to delete milestone images - add delete button below existing milestone images in admin interface - add delete /milestone-images endpoint - restate /admin route for convenience during development, can be removed again later - resolves #98 * update openapi.json & openapi-ts client --------- Co-authored-by: Harald Mack <[email protected]> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> commit 33d4f17 Author: Harald Mack <[email protected]> Date: Fri Nov 8 17:23:58 2024 +0100 Add childquestions backend integration and refactor datainput datastructure (#138) * add childanswers and base answer model * add child question models * add question admin endpoints * make current tests work again * adjust imports, add test skeleton * add dummy questions to test fixtures * start working on backend tests * work more on backend tests and model inheritance * fix errors in test data * try to get sqlmodel inheritnace to work * get rid of inheritance in question models for now * finish user question tests * finish python test draft * make use of states * adjust milestonegroup to backend data * get milestone loading right * integrate milestone * fix card styling, error message * add completion status to the milestone models * modify progress reporting to be only a userland feature * simplify progress computation, include milestone completion feedback * adjust styling * work on styling, change navigation to something hopefully more intuitive, make more use of localization * fix child data loading bug, adjust breadcrumb navigation * [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci * update openapi.json & openapi-ts client * fix backend error * adjust tests * update openapi.json & openapi-ts client * fix tests * correct merge error * use tailwind for making labels visible/invisible * work on layout * update openapi.json & openapi-ts client * remove searchByMilestone * fix styling issue * put progress computation into frontend * update openapi.json & openapi-ts client * remove debug output * simplify progress computation --------- Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
ssciwr · Nov 14, 2024 · b75ded2 · b75ded2
1 parent 1496a3a
commit b75ded2
Show file tree

Hide file tree

Showing 19 changed files with 657 additions and 880 deletions.
diff --git a/.gitignore b/.gitignore
@@ -176,3 +176,4 @@ mondey_backend/static/*.jpg
 
 # project specific
 private
+static
diff --git a/frontend/src/lib/components/ChildrenGallery.svelte b/frontend/src/lib/components/ChildrenGallery.svelte
@@ -4,9 +4,9 @@
 import { getChildImage, getChildren } from "$lib/client/services.gen";
 import CardDisplay from "$lib/components/DataDisplay/CardDisplay.svelte";
 import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte";
-import { currentChild } from "$lib/stores/childrenStore";
+import { currentChild } from "$lib/stores/childrenStore.svelte";
 import { activeTabChildren } from "$lib/stores/componentStore";
-import { Heading } from "flowbite-svelte";
+import { Heading, Spinner } from "flowbite-svelte";
 import { _ } from "svelte-i18n";
 import AlertMessage from "./AlertMessage.svelte";
 
@@ -25,7 +25,6 @@ async function setup(): Promise<any> {
 				const childImageResponse = await getChildImage({
 					path: { child_id: child.id },
 				});
-				console.log("childImageResponse", childImageResponse);
 				if (childImageResponse.error) {
 					console.log("Error when retrieving child image");
 					showAlert = true;
@@ -44,8 +43,9 @@ async function setup(): Promise<any> {
 					header: child.name,
 					image,
 					events: {
-						onclick: () => {
-							currentChild.set(child.id);
+						onclick: async () => {
+							currentChild.id = child.id;
+							await currentChild.load_data();
 							activeTabChildren.set("childrenRegistration");
 						},
 					},
@@ -61,7 +61,7 @@ async function setup(): Promise<any> {
 				summary: $_("childData.newChildHeadingLong"),
 				events: {
 					onclick: async () => {
-						currentChild.set(null);
+						currentChild.id = null;
 						activeTabChildren.set("childrenRegistration");
 					},
 				},
@@ -112,7 +112,7 @@ function searchName(data: any[], key: string): any[] {
 }
 
 let showAlert = $state(false);
-let alertMessage = $_("childData.alertMessageError");
+let alertMessage = $state($_("childData.alertMessageError"));
 let data: any[] = $state([]);
 
 const promise = $state(setup());
@@ -126,7 +126,7 @@ const searchData = [
 </script>
 
 {#await promise}
-	<p>{"Waiting for server response"}</p>
+	<Spinner /> <p>{$_("userData.loadingMessage")}</p>
 {:then data}
 	{#if showAlert}
 		<AlertMessage

diff --git a/frontend/src/lib/components/ChildrenRegistration.svelte b/frontend/src/lib/components/ChildrenRegistration.svelte
@@ -19,11 +19,16 @@ import {
 import AlertMessage from "$lib/components/AlertMessage.svelte";
 import DataInput from "$lib/components/DataInput/DataInput.svelte";
 import Breadcrumbs from "$lib/components/Navigation/Breadcrumbs.svelte";
-import { currentChild } from "$lib/stores/childrenStore";
+import { currentChild } from "$lib/stores/childrenStore.svelte";
 import { activeTabChildren, componentTable } from "$lib/stores/componentStore";
 import { preventDefault } from "$lib/util";
-import { Button, Card, Heading } from "flowbite-svelte";
-import { CheckCircleOutline, TrashBinOutline } from "flowbite-svelte-icons";
+import { Button, Card, Heading, Hr } from "flowbite-svelte";
+import {
+	CheckCircleOutline,
+	PlayOutline,
+	TrashBinOutline,
+	UserSettingsOutline,
+} from "flowbite-svelte-icons";
 import { _, locale } from "svelte-i18n";
 
 console.log("ChildrenRegistration");
@@ -55,31 +60,21 @@ let alertMessage: string = $state($_("childData.alertMessageMissing"));
 let showAlert = $state(false);
 let childLabel = $derived(name ? name : $_("childData.newChildHeadingLong"));
 let breadcrumbdata = $derived([
-	{
-		label: $_("childData.overviewLabel"),
-		onclick: () => {
-			activeTabChildren.update((value) => {
-				return "childrenGallery";
-			});
-		},
-	},
 	{
 		label: childLabel,
-	},
-	{
-		label: $_("milestone.milestones"),
-		onclick: () => {
-			activeTabChildren.set("milestoneOverview");
-		},
+		symbol: UserSettingsOutline,
 	},
 ]);
+
 let promise = $state(setup());
 
 async function setup(): Promise<{
 	questionnaire: GetChildQuestionsResponse;
 	answers: { [k: string]: ChildAnswerPublic };
 }> {
 	console.log("setup");
+	await currentChild.load_data();
+
 	// get questions
 	const questions = await getChildQuestions();
 	if (questions.error || questions.data === undefined) {
@@ -91,8 +86,8 @@ async function setup(): Promise<{
 	}
 	console.log("questionaire: ", questionnaire);
 
-	if ($currentChild !== null) {
-		const child = await getChild({ path: { child_id: $currentChild } });
+	if (currentChild.id !== null) {
+		const child = await getChild({ path: { child_id: currentChild.id } });
 
 		if (child.error) {
 			console.log("Error when getting child: ", child.error.detail);
@@ -108,7 +103,7 @@ async function setup(): Promise<{
 		// get existing answers
 		let currentAnswers = await getCurrentChildAnswers({
 			path: {
-				child_id: $currentChild,
+				child_id: currentChild.id,
 			},
 		});
 
@@ -145,7 +140,7 @@ async function setup(): Promise<{
 }
 
 async function submitChildData(): Promise<void> {
-	if ($currentChild === null) {
+	if (currentChild.id === null) {
 		// make new child if we don´t have one already
 		const new_child = await createChild({
 			body: {
@@ -162,7 +157,7 @@ async function submitChildData(): Promise<void> {
 				$_("childData.alertMessageCreate") + new_child.error.detail;
 			return;
 		} else {
-			currentChild.set(new_child.data.id);
+			currentChild.id = new_child.data.id;
 		}
 	} else {
 		// update existing child
@@ -171,7 +166,7 @@ async function submitChildData(): Promise<void> {
 				name: name,
 				birth_year: birthyear,
 				birth_month: birthmonth,
-				id: $currentChild,
+				id: currentChild.id,
 				has_image: image !== null && imageDeleted === false,
 			} as ChildPublic,
 		});
@@ -188,7 +183,7 @@ async function submitChildData(): Promise<void> {
 	const response = await updateCurrentChildAnswers({
 		body: answers,
 		path: {
-			child_id: $currentChild,
+			child_id: currentChild.id,
 		},
 	});
 
@@ -208,7 +203,7 @@ async function submitImageData(): Promise<void> {
 	if (imageDeleted === true) {
 		const response = await deleteChildImage({
 			path: {
-				child_id: $currentChild,
+				child_id: currentChild.id,
 			},
 		});
 
@@ -225,7 +220,7 @@ async function submitImageData(): Promise<void> {
 				file: image,
 			},
 			path: {
-				child_id: $currentChild,
+				child_id: currentChild.id,
 			},
 		});
 
@@ -387,15 +382,27 @@ async function submitData(): Promise<void> {
 							>{$_("childData.submitButtonLabel")}</Button
 						>
 					{/if}
-					{#if $currentChild !== null}
+					{#if currentChild.id !== null}
+						<Button
+							class=" w-full text-center text-sm text-white"
+							type="button"
+							color="green"
+							on:click={() => {
+								activeTabChildren.set("milestoneGroup");
+							}}
+							>
+							<PlayOutline size='sm'/>
+							{$_("childData.nextButtonLabel")}
+						</Button>
+						<Hr hrClass="my-8"/>
 						<Button
 							class=" w-full text-center text-sm text-white"
 							type="button"
 							color="red"
 							on:click={async () => {
 								const response = await deleteChild({
 									path: {
-										child_id: $currentChild,
+										child_id: currentChild.id,
 									}
 								});
 
@@ -408,7 +415,7 @@ async function submitData(): Promise<void> {
 									activeTabChildren.update((value) => {
 										return "childrenGallery";
 									});
-									currentChild.set(null);
+									currentChild.id = null;
 								}
 							}}
 							><TrashBinOutline size='sm'/> {$_("childData.deleteButtonLabel")}</Button

diff --git a/frontend/src/lib/components/DataDisplay/CardDisplay.svelte b/frontend/src/lib/components/DataDisplay/CardDisplay.svelte
@@ -61,7 +61,7 @@ let {
 
 	{#if data.progress}
 		<Progressbar
-			labelInside
+			labelInside ={styleProps.progress?.labelInside}
 			progress={String(100 * data.progress)}
 			animate={true}
 			color={data.progress === 1 ? styleProps.progress?.completeColor : styleProps.progress?.color}