put progress computation into frontend

frontend/src/lib/components/MilestoneGroup.svelte

@@ -1,6 +1,11 @@
 <svelte:options runes={true} />
 <script lang="ts">
-import { getMilestoneGroups } from "$lib/client";
+import {
+	type MilestoneAnswerSessionPublic,
+	type MilestonePublic,
+	getCurrentMilestoneAnswerSession,
+	getMilestoneGroups,
+} from "$lib/client";
 import CardDisplay from "$lib/components/DataDisplay/CardDisplay.svelte";
 import GalleryDisplay from "$lib/components/DataDisplay/GalleryDisplay.svelte";
 import Breadcrumbs from "$lib/components/Navigation/Breadcrumbs.svelte";
@@ -14,10 +19,40 @@ import {
 } from "flowbite-svelte-icons";
 import { _, locale } from "svelte-i18n";
 import AlertMessage from "./AlertMessage.svelte";
-let showAlert = $state(false);
-let alertMessage = $state("");
-let promise = $state(setup());
-let data: any[] = $state([]);
+
+function computeProgress(
+	milestones: MilestonePublic[],
+	answerSession: MilestoneAnswerSessionPublic,
+): number {
+	console.log("milestones", milestones);
+	console.log("answerSession", answerSession.answers);
+	if (milestones.length === 0) {
+		return 0;
+	} else {
+		const progress = milestones.reduce((p, item) => {
+			if (
+				answerSession.answers[item.id] !== undefined &&
+				answerSession.answers[item.id].answer !== null &&
+				answerSession.answers[item.id].answer >= 0
+			) {
+				console.log(
+					"  found answer: ",
+					item.id,
+					answerSession.answers[item.id].answer,
+				);
+				return p + 1.0;
+			} else {
+				return p;
+			}
+		}, 0.0);
+		console.log("final progress: ", progress);
+		if (progress < 0.01) {
+			return 0.01;
+		} else {
+			return progress / milestones.length;
+		}
+	}
+}
 
 async function setup(): Promise<any> {
 	await currentChild.load_data();
@@ -27,6 +62,19 @@ async function setup(): Promise<any> {
 		path: { child_id: currentChild.id },
 	});
 
+	const answerSession = await getCurrentMilestoneAnswerSession({
+		path: { child_id: currentChild.id },
+	});
+
+	if (answerSession.error) {
+		console.log("Error when retrieving answer data");
+		showAlert = true;
+		alertMessage =
+			$_("milestone.alertMessageRetrieving") + answerSession.error.detail;
+		data = [];
+		return data;
+	}
+
 	if (milestonegroups.error) {
 		console.log("Error when retrieving milestone group data");
 		showAlert = true;
@@ -46,7 +94,7 @@ async function setup(): Promise<any> {
 				header: item.text[$locale].title,
 				summary: item.text[$locale].desc,
 				image: null,
-				progress: item.progress < 0.01 ? 0.01 : item.progress,
+				progress: computeProgress(item.milestones, answerSession.data),
 				events: {
 					onclick: () => {
 						activeTabChildren.set("milestoneOverview");
@@ -123,6 +171,28 @@ function searchAll(data: any[], key: string): any[] {
 	];
 }
 
+export function createStyle(data: any[]) {
+	return data.map((item) => {
+		return {
+			card: {
+				class:
+					"m-2 max-w-prose dark:text-white text-white hover:cursor-pointer bg-primary-700 dark:bg-primary-900 hover:bg-primary-800 dark:hover:bg-primary-700",
+			},
+			progress: {
+				labelInside: true,
+				size: "h-4",
+				divClass: `h-full rounded-full w-${100 * item.progress}`,
+				color: "red",
+				completeColor: "green",
+			},
+		};
+	});
+}
+
+let showAlert = $state(false);
+let alertMessage = $state("");
+let promise = $state(setup());
+let data: any[] = $state([]);
 const searchData: any[] = [
 	{
 		label: $_("search.allLabel"),
@@ -145,24 +215,6 @@ const searchData: any[] = [
 		filterFunction: searchByStatus,
 	},
 ];
-
-export function createStyle(data: any[]) {
-	return data.map((item) => {
-		return {
-			card: {
-				class:
-					"m-2 max-w-prose dark:text-white text-white hover:cursor-pointer bg-primary-700 dark:bg-primary-900 hover:bg-primary-800 dark:hover:bg-primary-700",
-			},
-			progress: {
-				labelInside: true,
-				size: "h-4",
-				divClass: `h-full rounded-full w-${100 * item.progress}`,
-				color: "red",
-				completeColor: "green",
-			},
-		};
-	});
-}
 </script>
 
 {#await promise}

mondey_backend/src/mondey_backend/models/milestones.py

@@ -62,7 +62,6 @@ class MilestoneGroupPublic(SQLModel):
     id: int
     text: dict[str, MilestoneGroupTextPublic]
     milestones: list[MilestonePublic]
-    progress: float = 0.0
 
 
 class MilestoneGroupAdmin(SQLModel):

mondey_backend/src/mondey_backend/routers/milestones.py

@@ -15,7 +15,6 @@
 from .utils import get
 from .utils import get_child_age_in_months
 from .utils import get_db_child
-from .utils import get_or_create_current_milestone_answer_session
 
 
 def create_router() -> APIRouter:
@@ -71,41 +70,6 @@ def get_milestone_groups(
             )
         ).all()
 
-        # compute progress from milestone answers. While this is not
-        # the most efficient way, it is the least intrusive and concentrates
-        # progress reporting in the least amount of code - this function and the
-        # MilestonAnswerPublic model.
-        # The actual database does not need to know about progress - it's
-        # a derived value only for being displayed to the user.
-
-        answer_session = get_or_create_current_milestone_answer_session(
-            session, current_active_user, child_id
-        )
-
-        milestone_groups_public = []
-        for mgroup in milestone_groups:
-            mgroup_public = MilestoneGroupPublic(
-                id=mgroup.id,
-                order=mgroup.order,
-                text=mgroup.text,
-                milestones=mgroup.milestones,
-            )
-            mgroup_public.progress = 0.0
-
-            if len(mgroup.milestones) > 0:
-                for milestone in mgroup.milestones:
-                    if milestone.id is None:
-                        continue
-
-                    answer = answer_session.answers.get(milestone.id)
-
-                    if answer is not None and answer.answer >= 0:
-                        mgroup_public.progress += 1.0
-
-                mgroup_public.progress /= len(mgroup.milestones)
-
-            milestone_groups_public.append(mgroup_public)
-
-        return milestone_groups_public
+        return milestone_groups
 
     return router

mondey_backend/tests/conftest.py

@@ -701,7 +701,6 @@ def jpg_file(tmp_path: pathlib.Path):
 def milestone_group1():
     return {
         "id": 1,
-        "progress": 1.0,
         "text": {
             "de": {"title": "g1_de_t", "desc": "g1_de_d"},
             "en": {"title": "g1_en_t", "desc": "g1_en_d"},
@@ -943,7 +942,6 @@ def milestone_group_admin1():
 def milestone_group2():
     return {
         "id": 2,
-        "progress": 0.0,
         "text": {
             "de": {"title": "g1_de_t", "desc": "g1_de_d"},
             "en": {"title": "g1_en_t", "desc": "g1_en_d"},

mondey_backend/tests/routers/test_milestones.py

@@ -33,7 +33,6 @@ def test_get_milestone_groups_child2(
     assert len(response.json()) == 2
     # child 2 age is 20 months old, so first milestone from group1 (18m):
     milestone_group1["milestones"] = milestone_group1["milestones"][0:1]
-    milestone_group1["progress"] = 0.0
 
     # and first milestone from group2 (24m):
     milestone_group2["milestones"] = milestone_group2["milestones"][0:1]
@@ -50,8 +49,6 @@ def test_get_milestone_groups_child3(
     milestone_group1["milestones"] = []
     # and first last milestone from group2 (24m):
     milestone_group2["milestones"] = []
-    milestone_group2["progress"] = 0.0
-    milestone_group1["progress"] = 0.0
     assert response.json() == [milestone_group2, milestone_group1]