Add color to children (#218)

* finish frontend integration of color

* remove debug output

* adjust tests

* revise default color behavior

* update openapi.json & openapi-ts client

* add fix for test

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

frontend/src/lib/client/schemas.gen.ts

@@ -202,6 +202,17 @@ export const ChildCreateSchema = {
         birth_month: {
             type: 'integer',
             title: 'Birth Month'
+        },
+        color: {
+            anyOf: [
+                {
+                    type: 'string'
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Color'
         }
     },
     type: 'object',
@@ -224,6 +235,17 @@ export const ChildPublicSchema = {
             type: 'integer',
             title: 'Birth Month'
         },
+        color: {
+            anyOf: [
+                {
+                    type: 'string'
+                },
+                {
+                    type: 'null'
+                }
+            ],
+            title: 'Color'
+        },
         id: {
             type: 'integer',
             title: 'Id'

frontend/src/lib/client/types.gen.ts

@@ -52,12 +52,14 @@ export type ChildCreate = {
     name?: string;
     birth_year: number;
     birth_month: number;
+    color?: (string | null);
 };
 
 export type ChildPublic = {
     name?: string;
     birth_year: number;
     birth_month: number;
+    color?: (string | null);
     id: number;
     has_image: boolean;
 };

frontend/src/lib/components/ChildrenGallery.svelte

@@ -11,6 +11,55 @@ import { Heading, Spinner } from "flowbite-svelte";
 import { _ } from "svelte-i18n";
 import AlertMessage from "./AlertMessage.svelte";
 
+function createStyle(data: CardElement[]): CardStyle[] {
+	return data.map((item) => ({
+		card:
+			item.header === $_("childData.newChildHeading")
+				? {
+						class:
+							"hover:cursor-pointer m-2 max-w-prose bg-primary-700 dark:bg-primary-600 hover:bg-primary-800 dark:hover:bg-primary-700",
+						horizontal: false,
+					}
+				: {
+						class:
+							"hover:cursor-pointer m-2 max-w-prose text-gray-700 hover:text-white dark:text-white hover:dark:text-gray-400 hover:bg-primary-800 dark:hover:bg-primary-700",
+						style: item.color ? `background-color: ${item.color};` : "",
+						horizontal: false,
+					},
+		header:
+			item.header === $_("childData.newChildHeading")
+				? {
+						class:
+							"mb-2 text-2xl font-bold tracking-tight text-white dark:text-white",
+					}
+				: null,
+		summary:
+			item.header === $_("childData.newChildHeading")
+				? {
+						class:
+							"mb-3 flex font-normal leading-tight text-white dark:text-white",
+					}
+				: null,
+		button: null,
+		progress: null,
+		auxilliary: null,
+	}));
+}
+
+function searchName(data: CardElement[], key: string): CardElement[] {
+	if (key === "") {
+		return data;
+	}
+
+	const res = data.filter((item) => {
+		if (item.header === null || item.header === undefined) {
+			return false;
+		}
+
+		return item.header.toLowerCase().includes(key.toLowerCase());
+	});
+	return res;
+}
 async function setup(): Promise<CardElement[]> {
 	const children = await getChildren();
 
@@ -32,6 +81,7 @@ async function setup(): Promise<CardElement[]> {
 					header: child.name,
 					image,
 					summary: null,
+					color: child.color,
 					events: {
 						onclick: async () => {
 							currentChild.id = child.id;
@@ -57,58 +107,16 @@ async function setup(): Promise<CardElement[]> {
 				},
 			},
 		];
-	}
-	return data;
-}
 
-function createStyle(data: CardElement[]): CardStyle[] {
-	return data.map((item) => ({
-		card:
-			item.header === $_("childData.newChildHeading")
-				? {
-						class:
-							"hover:cursor-pointer m-2 max-w-prose bg-primary-700 dark:bg-primary-600 hover:bg-primary-800 dark:hover:bg-primary-700",
-						horizontal: false,
-					}
-				: { horizontal: false },
-		header:
-			item.header === $_("childData.newChildHeading")
-				? {
-						class:
-							"mb-2 text-2xl font-bold tracking-tight text-white dark:text-white",
-					}
-				: null,
-		summary:
-			item.header === $_("childData.newChildHeading")
-				? {
-						class:
-							"mb-3 flex font-normal leading-tight text-white dark:text-white",
-					}
-				: null,
-		button: null,
-		progress: null,
-		auxilliary: null,
-	}));
-}
-
-function searchName(data: CardElement[], key: string): CardElement[] {
-	if (key === "") {
-		return data;
+		style = createStyle(data);
 	}
-
-	const res = data.filter((item) => {
-		if (item.header === null || item.header === undefined) {
-			return false;
-		}
-
-		return item.header.toLowerCase().includes(key.toLowerCase());
-	});
-	return res;
+	return data;
 }
 
 let showAlert = $state(false);
 let alertMessage = $state($_("childData.alertMessageError"));
 let data: CardElement[] = $state([]);
+let style: CardStyle[] = $state([]);
 const promise = $state(setup());
 const searchData = [
 	{
@@ -147,7 +155,7 @@ const searchData = [
 			<GalleryDisplay
 				{data}
 				itemComponent={CardDisplay}
-				componentProps={createStyle(data)}
+				componentProps={style}
 				{searchData}
 			/>
 		</div>

frontend/src/lib/components/ChildrenRegistration.svelte

@@ -23,7 +23,7 @@ import Breadcrumbs from "$lib/components/Navigation/Breadcrumbs.svelte";
 import { currentChild } from "$lib/stores/childrenStore.svelte";
 import { activeTabChildren, componentTable } from "$lib/stores/componentStore";
 import { preventDefault } from "$lib/util";
-import { Button, Card, Heading, Hr, Spinner } from "flowbite-svelte";
+import { Button, Card, Heading, Hr, Input, Spinner } from "flowbite-svelte";
 import {
 	CheckCircleOutline,
 	PlayOutline,
@@ -42,11 +42,13 @@ let answers: { [k: number]: ChildAnswerPublic } = $state({});
 let {
 	name = $bindable(null),
 	image = $bindable(null),
+	color = $bindable("#ffffff"),
 	birthyear = $bindable(null),
 	birthmonth = $bindable(null),
 }: {
 	name: string | null | undefined;
 	image: File | boolean | null;
+	color: string;
 	birthyear: number | null;
 	birthmonth: number | null;
 } = $props();
@@ -98,6 +100,7 @@ async function setup(): Promise<{
 			birthyear = child.data.birth_year;
 			birthmonth = child.data.birth_month;
 			image = child.data.has_image ? true : null;
+			color = child.data.color;
 		}
 
 		// get existing answers
@@ -148,6 +151,7 @@ async function submitChildData(): Promise<void> {
 				birth_year: birthyear,
 				birth_month: birthmonth,
 				has_image: image !== null,
+				color: image !== null ? null : color,
 			} as ChildCreate,
 		});
 
@@ -159,6 +163,8 @@ async function submitChildData(): Promise<void> {
 		}
 		currentChild.id = new_child.data.id;
 	} else {
+		console.log("updating existing child");
+
 		// update existing child
 		const response = await updateChild({
 			body: {
@@ -167,6 +173,7 @@ async function submitChildData(): Promise<void> {
 				birth_month: birthmonth,
 				id: currentChild.id,
 				has_image: image !== null && imageDeleted === false,
+				color: color,
 			} as ChildPublic,
 		});
 
@@ -295,24 +302,29 @@ async function submitData(): Promise<void> {
 						required={true}
 						placeholder={$_("childData.pleaseEnter")}
 						disabled={disableEdit}
+						id="child_name"
 						kwargs = {{type: "text"}}
 						/>
+
 					<DataInput
 						component={componentTable["input"]}
 						bind:value={birthmonth}
 						label={$_("childData.childBirthMonth")}
 						required={true}
 						placeholder={$_("childData.pleaseEnterNumber")}
 						disabled={disableEdit}
+						id="child_birthmonth"
 						kwargs = {{type: "number", min: 0, max:12, step: '1'}}
 						/>
+
 					<DataInput
 						component={componentTable["input"]}
 						bind:value={birthyear}
 						label={$_("childData.childBirthYear")}
 						required={true}
 						placeholder={$_("childData.pleaseEnterNumber")}
 						disabled={disableEdit}
+						id="child_birthyear"
 						kwargs = {{type: "number", min: 2007, step: '1'}}
 						/>
 
@@ -323,9 +335,22 @@ async function submitData(): Promise<void> {
 						required={false}
 						placeholder={$_("childData.noFileChosen")}
 						disabled={disableEdit}
+						id="child_image"
 						kwargs = {{accept: ".jpg, .jpeg, .png", clearable: true}}
 						/>
 
+					<DataInput
+						component={Input}
+						bind:value={color}
+						label={$_("childData.childColor")}
+						required={false}
+						placeholder={$_("childData.chooseColor")}
+						disabled={disableEdit}
+						id="child_color"
+						kwargs = {{type: "color"}}
+						componentClass="w-1/4 h-12 rounded"
+					/>
+
 					{#if image !== null && disableEdit === false}
 						<Button
 							type="button"

frontend/src/lib/util.ts

@@ -17,6 +17,7 @@ export type CardElement = {
 	events?: { [key: string]: EventHandler } | undefined;
 	auxilliary?: any | undefined;
 	buttonIcon?: Component | undefined;
+	color?: string | undefined;
 };
 
 export type CardStyle = {

frontend/src/locales/de.json

@@ -192,6 +192,8 @@
 		"noFileChosen": "Keine Datei ausgewählt",
 		"deleteImageButton": "Bild löschen",
 		"nextButtonLabel": "Weiter zu Meilensteinen",
+		"childColor": "Hintergrundfarbe für Icon wählen",
+		"chooseColor": "Farbe wählen",
 		"feedbackButtonLabel": "Feedback zur Entwicklung"
 	},
 	"forgotPw": {

mondey_backend/src/mondey_backend/models/children.py

@@ -8,6 +8,7 @@ class ChildBase(SQLModel):
     name: str = ""
     birth_year: int
     birth_month: int
+    color: str | None = None
 
 
 class Child(ChildBase, table=True):

mondey_backend/tests/conftest.py

@@ -97,6 +97,7 @@ def children():
             "birth_year": nine_months_ago.year,
             "birth_month": nine_months_ago.month,
             "has_image": False,
+            "color": "#f0f0ff",
         },
         # ~20month old child for user (id 3)
         {
@@ -105,6 +106,7 @@ def children():
             "birth_year": twenty_months_ago.year,
             "birth_month": twenty_months_ago.month,
             "has_image": True,
+            "color": "#ffffff",
         },
         # ~5 year old child for admin user (id 1)
         {
@@ -113,6 +115,7 @@ def children():
             "id": 3,
             "name": "child3",
             "has_image": True,
+            "color": "#ffffff",
         },
     ]
 
@@ -467,7 +470,7 @@ def statistics_session(session):
         MilestoneAnswerSession(
             child_id=1,
             user_id=3,
-            created_at=datetime.datetime(today.year, last_month.month, 20),
+            created_at=datetime.datetime(last_month.year, last_month.month, 20),
         )
     )
     session.add(

mondey_backend/tests/routers/test_users.py

@@ -71,6 +71,7 @@ def test_create_update_and_delete_child(user_client: TestClient):
             "name": "child1",
             "birth_year": 2021,
             "birth_month": 3,
+            "color": "#000000",
         },
     )
     assert response_create.status_code == 200
@@ -80,6 +81,7 @@ def test_create_update_and_delete_child(user_client: TestClient):
         "birth_year": 2021,
         "birth_month": 3,
         "has_image": False,
+        "color": "#000000",
     }
     assert len(user_client.get("/users/children/").json()) == 3
     response_update = user_client.put(
@@ -90,6 +92,7 @@ def test_create_update_and_delete_child(user_client: TestClient):
             "birth_year": 2020,
             "birth_month": 9,
             "has_image": False,
+            "color": "af4413",
         },
     )
     assert response_update.status_code == 200
@@ -99,6 +102,7 @@ def test_create_update_and_delete_child(user_client: TestClient):
         "birth_year": 2020,
         "birth_month": 9,
         "has_image": False,
+        "color": "af4413",
     }
     assert len(user_client.get("/users/children/").json()) == 3
     response_delete = user_client.delete("/users/children/4")