Add childquestions backend integration and refactor datainput datastructure

docker-compose.yml

@@ -5,6 +5,7 @@ services:
     volumes:
       - ${STATIC_FILES_PATH:-./static}:/app/static
       - ${DATABASE_PATH:-./db}:/app/db
+      - ${PRIVATE_FILES_PATH:-./private}:/app/private
     environment:
       - SECRET=${SECRET:-}
       - STATIC_FILES_PATH=/app/static

frontend/src/lib/admin.svelte.ts

@@ -1,17 +1,19 @@
 import {
 	authCookieLogin,
+	getChildQuestionsAdmin,
 	getMilestoneGroupsAdmin,
 	getUserQuestionsAdmin,
 	usersCurrentUser,
 } from "$lib/client/services.gen";
 import type {
 	Body_auth_cookie_login_auth_login_post,
-	GetLanguagesResponse,
-	MilestoneGroupAdmin,
-	UserQuestionAdmin,
 	UserRead,
 } from "$lib/client/types.gen";
-import { milestoneGroups, userQuestions } from "$lib/stores/adminStore";
+import {
+	childQuestions,
+	milestoneGroups,
+	userQuestions,
+} from "$lib/stores/adminStore";
 
 function AdminUser() {
 	let user = $state(null as UserRead | null);
@@ -70,3 +72,14 @@ export async function refreshUserQuestions() {
 		userQuestions.set(data);
 	}
 }
+
+export async function refreshChildQuestions() {
+	console.log("refreshQuestions...");
+	const { data, error } = await getChildQuestionsAdmin();
+	if (error || data === undefined) {
+		console.log("Failed to get child questions");
+		childQuestions.set([]);
+	} else {
+		childQuestions.set(data);
+	}
+}

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

@@ -1,7 +1,7 @@
 // This file is auto-generated by @hey-api/openapi-ts
 
 import { createClient, createConfig, type Options, formDataBodySerializer, urlSearchParamsBodySerializer } from '@hey-api/client-fetch';
-import type { GetLanguagesError, GetLanguagesResponse, GetMilestonesError, GetMilestonesResponse, GetMilestoneData, GetMilestoneError, GetMilestoneResponse, GetMilestoneGroupsData, GetMilestoneGroupsError, GetMilestoneGroupsResponse, GetUserQuestionsError, GetUserQuestionsResponse, GetChildQuestionsError, GetChildQuestionsResponse, CreateLanguageData, CreateLanguageError, CreateLanguageResponse, DeleteLanguageData, DeleteLanguageError, DeleteLanguageResponse, UpdateI18NData, UpdateI18NError, UpdateI18NResponse, GetMilestoneGroupsAdminError, GetMilestoneGroupsAdminResponse, CreateMilestoneGroupAdminError, CreateMilestoneGroupAdminResponse, UpdateMilestoneGroupAdminData, UpdateMilestoneGroupAdminError, UpdateMilestoneGroupAdminResponse, DeleteMilestoneGroupAdminData, DeleteMilestoneGroupAdminError, DeleteMilestoneGroupAdminResponse, UploadMilestoneGroupImageData, UploadMilestoneGroupImageError, UploadMilestoneGroupImageResponse, CreateMilestoneData, CreateMilestoneError, CreateMilestoneResponse, UpdateMilestoneData, UpdateMilestoneError, UpdateMilestoneResponse, DeleteMilestoneData, DeleteMilestoneError, DeleteMilestoneResponse, UploadMilestoneImageData, UploadMilestoneImageError, UploadMilestoneImageResponse, GetUserQuestionsAdminError, GetUserQuestionsAdminResponse, UpdateUserQuestionData, UpdateUserQuestionError, UpdateUserQuestionResponse, CreateUserQuestionError, CreateUserQuestionResponse, DeleteUserQuestionData, DeleteUserQuestionError, DeleteUserQuestionResponse, GetChildQuestionsAdminError, GetChildQuestionsAdminResponse, UpdateChildQuestionData, UpdateChildQuestionError, UpdateChildQuestionResponse, CreateChildQuestionError, CreateChildQuestionResponse, DeleteChildQuestionData, DeleteChildQuestionError, DeleteChildQuestionResponse, UsersCurrentUserError, UsersCurrentUserResponse, UsersPatchCurrentUserData, UsersPatchCurrentUserError, UsersPatchCurrentUserResponse, UsersUserData, UsersUserError, UsersUserResponse, UsersPatchUserData, UsersPatchUserError, UsersPatchUserResponse, UsersDeleteUserData, UsersDeleteUserError, UsersDeleteUserResponse, GetChildrenError, GetChildrenResponse, UpdateChildData, UpdateChildError, UpdateChildResponse, CreateChildData, CreateChildError, CreateChildResponse, GetChildData, GetChildError, GetChildResponse, DeleteChildData, DeleteChildError, DeleteChildResponse, GetChildImageData, GetChildImageError, GetChildImageResponse, UploadChildImageData, UploadChildImageError, UploadChildImageResponse, GetCurrentMilestoneAnswerSessionData, GetCurrentMilestoneAnswerSessionError, GetCurrentMilestoneAnswerSessionResponse, UpdateMilestoneAnswerData, UpdateMilestoneAnswerError, UpdateMilestoneAnswerResponse, GetCurrentUserAnswersError, GetCurrentUserAnswersResponse, UpdateCurrentUserAnswersData, UpdateCurrentUserAnswersError, UpdateCurrentUserAnswersResponse, GetCurrentChildAnswersData, GetCurrentChildAnswersError, GetCurrentChildAnswersResponse, UpdateCurrentChildAnswersData, UpdateCurrentChildAnswersError, UpdateCurrentChildAnswersResponse, AuthCookieLoginData, AuthCookieLoginError, AuthCookieLoginResponse, AuthCookieLogoutError, AuthCookieLogoutResponse, RegisterRegisterData, RegisterRegisterError, RegisterRegisterResponse, ResetForgotPasswordData, ResetForgotPasswordError, ResetForgotPasswordResponse, ResetResetPasswordData, ResetResetPasswordError, ResetResetPasswordResponse, VerifyRequestTokenData, VerifyRequestTokenError, VerifyRequestTokenResponse, VerifyVerifyData, VerifyVerifyError, VerifyVerifyResponse, AuthError, AuthResponse } from './types.gen';
+import type { GetLanguagesError, GetLanguagesResponse, GetMilestonesError, GetMilestonesResponse, GetMilestoneData, GetMilestoneError, GetMilestoneResponse, GetMilestoneGroupsData, GetMilestoneGroupsError, GetMilestoneGroupsResponse, GetUserQuestionsError, GetUserQuestionsResponse, GetChildQuestionsError, GetChildQuestionsResponse, CreateLanguageData, CreateLanguageError, CreateLanguageResponse, DeleteLanguageData, DeleteLanguageError, DeleteLanguageResponse, UpdateI18NData, UpdateI18NError, UpdateI18NResponse, GetMilestoneGroupsAdminError, GetMilestoneGroupsAdminResponse, CreateMilestoneGroupAdminError, CreateMilestoneGroupAdminResponse, UpdateMilestoneGroupAdminData, UpdateMilestoneGroupAdminError, UpdateMilestoneGroupAdminResponse, DeleteMilestoneGroupAdminData, DeleteMilestoneGroupAdminError, DeleteMilestoneGroupAdminResponse, UploadMilestoneGroupImageData, UploadMilestoneGroupImageError, UploadMilestoneGroupImageResponse, CreateMilestoneData, CreateMilestoneError, CreateMilestoneResponse, UpdateMilestoneData, UpdateMilestoneError, UpdateMilestoneResponse, DeleteMilestoneData, DeleteMilestoneError, DeleteMilestoneResponse, UploadMilestoneImageData, UploadMilestoneImageError, UploadMilestoneImageResponse, GetUserQuestionsAdminError, GetUserQuestionsAdminResponse, UpdateUserQuestionData, UpdateUserQuestionError, UpdateUserQuestionResponse, CreateUserQuestionError, CreateUserQuestionResponse, DeleteUserQuestionData, DeleteUserQuestionError, DeleteUserQuestionResponse, GetChildQuestionsAdminError, GetChildQuestionsAdminResponse, UpdateChildQuestionData, UpdateChildQuestionError, UpdateChildQuestionResponse, CreateChildQuestionError, CreateChildQuestionResponse, DeleteChildQuestionData, DeleteChildQuestionError, DeleteChildQuestionResponse, UsersCurrentUserError, UsersCurrentUserResponse, UsersPatchCurrentUserData, UsersPatchCurrentUserError, UsersPatchCurrentUserResponse, UsersUserData, UsersUserError, UsersUserResponse, UsersPatchUserData, UsersPatchUserError, UsersPatchUserResponse, UsersDeleteUserData, UsersDeleteUserError, UsersDeleteUserResponse, GetChildrenError, GetChildrenResponse, UpdateChildData, UpdateChildError, UpdateChildResponse, CreateChildData, CreateChildError, CreateChildResponse, GetChildData, GetChildError, GetChildResponse, DeleteChildData, DeleteChildError, DeleteChildResponse, GetChildImageData, GetChildImageError, GetChildImageResponse, UploadChildImageData, UploadChildImageError, UploadChildImageResponse, DeleteChildImageData, DeleteChildImageError, DeleteChildImageResponse, GetCurrentMilestoneAnswerSessionData, GetCurrentMilestoneAnswerSessionError, GetCurrentMilestoneAnswerSessionResponse, UpdateMilestoneAnswerData, UpdateMilestoneAnswerError, UpdateMilestoneAnswerResponse, GetCurrentUserAnswersError, GetCurrentUserAnswersResponse, UpdateCurrentUserAnswersData, UpdateCurrentUserAnswersError, UpdateCurrentUserAnswersResponse, GetCurrentChildAnswersData, GetCurrentChildAnswersError, GetCurrentChildAnswersResponse, UpdateCurrentChildAnswersData, UpdateCurrentChildAnswersError, UpdateCurrentChildAnswersResponse, AuthCookieLoginData, AuthCookieLoginError, AuthCookieLoginResponse, AuthCookieLogoutError, AuthCookieLogoutResponse, RegisterRegisterData, RegisterRegisterError, RegisterRegisterResponse, ResetForgotPasswordData, ResetForgotPasswordError, ResetForgotPasswordResponse, ResetResetPasswordData, ResetResetPasswordError, ResetResetPasswordResponse, VerifyRequestTokenData, VerifyRequestTokenError, VerifyRequestTokenResponse, VerifyVerifyData, VerifyVerifyError, VerifyVerifyResponse, AuthError, AuthResponse } from './types.gen';
 
 export const client = createClient(createConfig());
 
@@ -324,6 +324,14 @@ export const uploadChildImage = <ThrowOnError extends boolean = false>(options:
     url: '/users/children-images/{child_id}'
 }); };
 
+/**
+ * Delete Child Image
+ */
+export const deleteChildImage = <ThrowOnError extends boolean = false>(options: Options<DeleteChildImageData, ThrowOnError>) => { return (options?.client ?? client).delete<DeleteChildImageResponse, DeleteChildImageError, ThrowOnError>({
+    ...options,
+    url: '/users/children-images/{child_id}'
+}); };
+
 /**
  * Get Current Milestone Answer Session
  */

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

@@ -569,6 +569,16 @@ export type UploadChildImageResponse = (unknown);
 
 export type UploadChildImageError = (HTTPValidationError);
 
+export type DeleteChildImageData = {
+    path: {
+        child_id: number;
+    };
+};
+
+export type DeleteChildImageResponse = (unknown);
+
+export type DeleteChildImageError = (HTTPValidationError);
+
 export type GetCurrentMilestoneAnswerSessionData = {
     path: {
         child_id: number;
@@ -608,12 +618,16 @@ export type GetCurrentChildAnswersData = {
     };
 };
 
-export type GetCurrentChildAnswersResponse = (Array<ChildAnswerPublic>);
+export type GetCurrentChildAnswersResponse = ({
+    [key: string]: ChildAnswerPublic;
+});
 
 export type GetCurrentChildAnswersError = (HTTPValidationError);
 
 export type UpdateCurrentChildAnswersData = {
-    body: Array<ChildAnswerPublic>;
+    body: {
+        [key: string]: ChildAnswerPublic;
+    };
     path: {
         child_id: number;
     };

frontend/src/lib/components/Admin/EditUserQuestionModal.svelte → frontend/src/lib/components/Admin/EditQuestionModal.svelte

@@ -1,9 +1,15 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
-import { refreshUserQuestions } from "$lib/admin.svelte";
-import { updateUserQuestion } from "$lib/client/services.gen";
-import type { UserQuestionAdmin } from "$lib/client/types.gen";
+import { refreshChildQuestions, refreshUserQuestions } from "$lib/admin.svelte";
+import {
+	updateChildQuestion,
+	updateUserQuestion,
+} from "$lib/client/services.gen";
+import type {
+	ChildQuestionAdmin,
+	UserQuestionAdmin,
+} from "$lib/client/types.gen";
 import CancelButton from "$lib/components/Admin/CancelButton.svelte";
 import InputPreview from "$lib/components/Admin/InputPreview.svelte";
 import SaveButton from "$lib/components/Admin/SaveButton.svelte";
@@ -24,13 +30,31 @@ import { _, locales } from "svelte-i18n";
 
 let {
 	open = $bindable(false),
-	userQuestion,
-}: { open: boolean; userQuestion: UserQuestionAdmin | undefined } = $props();
-
+	question,
+	kind,
+}: {
+	open: boolean;
+	question: UserQuestionAdmin | ChildQuestionAdmin | undefined;
+	kind: string;
+} = $props();
 let preview_lang = $state("de");
 let preview_answer = $state("");
+let update: any;
+let refresh: any;
+
+if (kind === "user") {
+	update = updateUserQuestion;
+	refresh = refreshUserQuestions;
+} else if (kind === "child") {
+	update = updateChildQuestion;
+	refresh = refreshChildQuestions;
+} else {
+	console.log(
+		"Error, kind must be either 'user' or 'child', currently is: ",
+		kind,
+	);
+}
 
-// FIXME: use the componentTable here
 const inputTypes: Array<SelectOptionType<string>> = [
 	{ value: "textarea", name: "text" },
 	{ value: "select", name: "select" },
@@ -39,48 +63,50 @@ const inputTypes: Array<SelectOptionType<string>> = [
 ];
 
 function updateOptionsJson() {
-	if (!userQuestion) {
+	if (!question) {
 		return;
 	}
-	const values = userQuestion.options.split(";");
+	const values = question.options.split(";");
 	for (const lang_id of $locales) {
-		const items = userQuestion.text[lang_id].options.split(";");
-		userQuestion.text[lang_id].options_json = JSON.stringify(
-			values.map((value, index) => ({ value: value, name: items[index] })),
+		const items = question.text[lang_id].options.split(";");
+		question.text[lang_id].options_json = JSON.stringify(
+			values.map((value, index) => ({
+				value: value,
+				name: items[index],
+			})),
 		);
 	}
 }
 
 async function saveChanges() {
-	if (!userQuestion) {
+	if (!question) {
 		return;
 	}
-	const { data, error } = await updateUserQuestion({ body: userQuestion });
+	const { data, error } = await update({
+		body: question,
+	});
 	if (error) {
 		console.log(error);
 	} else {
 		console.log(data);
-		await refreshUserQuestions();
+		await refresh();
 	}
 }
 </script>
 
 <Modal title="Edit user question" bind:open autoclose size="xl">
-	{#if userQuestion}
+	{#if question}
 		<div class="flex flex-row items-center">
 			<div class="mr-5 grow">
 				<div class="mb-5">
-					<Label class="mb-2">{$_('admin.question')}</Label>
-					{#each Object.values(userQuestion.text) as text}
+					<Label class="mb-2">{$_("admin.question")}</Label>
+					{#each Object.values(question.text) as text}
 						<div class="mb-1">
 							<ButtonGroup class="w-full">
 								<InputAddon>{text.lang_id}</InputAddon>
 								<Input
 									bind:value={text.question}
-									on:input={() => {
-										userQuestion = userQuestion;
-									}}
-									placeholder={$_('admin.placeholder')}
+									placeholder={$_("admin.placeholder")}
 								/>
 							</ButtonGroup>
 						</div>
@@ -91,25 +117,24 @@ async function saveChanges() {
 					<Select
 						class="mt-2"
 						items={inputTypes}
-						bind:value={userQuestion.component}
+						bind:value={question.component}
 						placeholder=""
 					/>
 				</div>
-				{#if userQuestion.component === 'select'}
+				{#if question.component === "select"}
 					<div class="mb-5">
 						<Label class="mb-2">Options</Label>
 						<div class="mb-1">
 							<ButtonGroup class="w-full">
 								<InputAddon>Option values</InputAddon>
 								<Textarea
-									bind:value={userQuestion.options}
+									bind:value={question.options}
 									on:input={updateOptionsJson}
 									placeholder="Option values"
 								/>
 							</ButtonGroup>
 						</div>
-						{#each Object.values(userQuestion.text) as text}
-							{console.log('text: ', text)}
+						{#each Object.values(question.text) as text}
 							<div class="mb-1">
 								<ButtonGroup class="w-full">
 									<InputAddon>{text.lang_id}</InputAddon>
@@ -125,7 +150,7 @@ async function saveChanges() {
 						<div class="mb-1">
 							<ButtonGroup class="w-full">
 								<Textarea
-									bind:value={userQuestion.additional_option}
+									bind:value={question.additional_option}
 									placeholder="Displayed additional option"
 								/>
 							</ButtonGroup>
@@ -151,10 +176,11 @@ async function saveChanges() {
 							</ButtonGroup>
 						</div>
 						<Card class="mb-4 bg-blue-300">
-							<InputPreview data={userQuestion} lang={preview_lang} bind:answer={preview_answer} />
+							<InputPreview data={question} lang={preview_lang} bind:answer={preview_answer} />
 						</Card>
 						<Label class="mb-2">Generated answer:</Label>
-						<Badge large border color="dark">{preview_answer}</Badge>
+						<Badge large border color="dark">{preview_answer}</Badge
+						>
 					</div>
 				</Card>
 			</div>

frontend/src/lib/components/Admin/InputPreview.svelte

@@ -6,7 +6,7 @@ import { Input, Label, Select, type SelectOptionType } from "flowbite-svelte";
 let {
 	data,
 	lang,
-	answer,
+	answer = $bindable(),
 }: { data: UserQuestionAdmin; lang: string; answer: string } = $props();
 let items: Array<SelectOptionType<string>> = $derived(parse_options_json());