feat: introduce questionnaire start form for including validations

Author: stampaaaron

apps/backend/mikro-orm.config.ts

@@ -3,6 +3,7 @@ import { Migrator } from "@mikro-orm/migrations";
 import { TsMorphMetadataProvider } from "@mikro-orm/reflection";
 import { SeedManager } from "@mikro-orm/seeder";
 import { configuration } from "./src/config/configuration";
+import { HttpException, HttpStatus } from "@nestjs/common";
 
 const c = configuration();
 
@@ -17,6 +18,7 @@ export default defineConfig({
   driver: PostgreSqlDriver,
   metadataProvider: TsMorphMetadataProvider,
   extensions: [Migrator, SeedManager],
+  findOneOrFailHandler: (entityName) => new HttpException(`${entityName} not found.`, HttpStatus.NOT_FOUND),
   migrations: {
     path: "./db/migrations",
     pathTs: "./db/migrations",

apps/backend/src/research/participants/participants.controller.ts

@@ -1,6 +1,6 @@
 import { Body, Controller, Delete, Get, Param, Patch, Post } from "@nestjs/common";
 import { ParticipantsService } from "./participants.service";
-import { ApiOperation, ApiTags, ApiUnprocessableEntityResponse } from "@nestjs/swagger";
+import { ApiNotFoundResponse, ApiOperation, ApiTags, ApiUnprocessableEntityResponse } from "@nestjs/swagger";
 import { ParticipantCreationDto, ParticipantMutationDto, ParticipantResponseDto } from "./participant.dto";
 import { ErrorResponseDto } from "../../common/dto/error.dto";
 import { Roles } from "../../system/users/roles.decorator";
@@ -26,6 +26,7 @@ export class ParticipantsController {
 
   @Get(":id")
   @ApiOperation({ summary: "Get a participant by ID" })
+  @ApiNotFoundResponse({ description: "Entity not found exception", type: ErrorResponseDto })
   get(@Param("id") id: string): Promise<ParticipantResponseDto> {
     return this.participantService.findOne(+id);
   }

apps/backend/src/research/studies/studies.controller.ts

@@ -1,5 +1,5 @@
 import { Body, Controller, Delete, Get, Param, Patch, Post } from "@nestjs/common";
-import { ApiOperation, ApiTags, ApiUnprocessableEntityResponse } from "@nestjs/swagger";
+import { ApiNotFoundResponse, ApiOperation, ApiTags, ApiUnprocessableEntityResponse } from "@nestjs/swagger";
 import { ErrorResponseDto } from "../../common/dto/error.dto";
 import { Roles } from "../../system/users/roles.decorator";
 import { UserRole } from "../../system/users/user.entity";
@@ -26,6 +26,7 @@ export class StudiesController {
 
   @Get(":id")
   @ApiOperation({ summary: "Get a study by ID" })
+  @ApiNotFoundResponse({ description: "Entity not found exception", type: ErrorResponseDto })
   get(@Param("id") id: string): Promise<StudyResponseDto> {
     return this.studiesService.findOne(+id);
   }

apps/frontend/src/api.gen.ts

@@ -1574,6 +1574,15 @@ export interface operations {
                     "application/json": components["schemas"]["ParticipantResponseDto"];
                 };
             };
+            /** @description Entity not found exception */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponseDto"];
+                };
+            };
         };
     };
     ParticipantsController_delete: {
@@ -2038,6 +2047,15 @@ export interface operations {
                     "application/json": components["schemas"]["StudyResponseDto"];
                 };
             };
+            /** @description Entity not found exception */
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["ErrorResponseDto"];
+                };
+            };
         };
     };
     StudiesController_delete: {

apps/frontend/src/routes/_auth/questionnaire/_form/index.tsx

@@ -2,27 +2,61 @@ import { Button, Stack, TextInput } from "@quassel/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
+import { useForm } from "@mantine/form";
+import { $api } from "../../../../stores/api";
+import { $questionnaire } from "../../../../stores/questionnaire";
+
+type FormValues = {
+  participantId: string;
+  studyId: string;
+};
 
 export const messages = i18n("questionnaire", {
   title: "Start new questionnaire",
+  participantIdLabel: "Child ID",
+  studyIdLabel: "Study ID",
   formAction: "Continue",
 });
 
 function Questionnaire() {
   const n = useNavigate();
+
   const t = useStore(messages);
 
-  const handleSubmit = () => {
-    n({ to: "/questionnaire/participant" });
+  const f = useForm<FormValues>();
+
+  const validateParticipantMutation = $api.useMutation("get", "/participants/{id}", {
+    onError(error) {
+      if (error.statusCode === 404) {
+        f.setFieldError("participantId", "Participant not found.");
+      }
+    },
+  });
+  const validateStudyMutation = $api.useMutation("get", "/studies/{id}", {
+    onError(error) {
+      if (error.statusCode === 404) {
+        f.setFieldError("studyId", "Study not found.");
+      }
+    },
+  });
+
+  const handleSubmit = async (values: FormValues) => {
+    const participantCheck = validateParticipantMutation.mutateAsync({ params: { path: { id: values.participantId } } });
+    const studyCheck = validateStudyMutation.mutateAsync({ params: { path: { id: values.studyId } } });
+
+    Promise.all([participantCheck, studyCheck]).then(([participant, study]) => {
+      $questionnaire.set({ participant, study });
+      n({ to: "/questionnaire/participant" });
+    });
   };
 
   return (
     <>
       <h3>{t.title}</h3>
-      <form onSubmit={handleSubmit}>
+      <form onSubmit={f.onSubmit(handleSubmit)}>
         <Stack>
-          <TextInput />
-          <TextInput />
+          <TextInput required label={t.participantIdLabel} {...f.getInputProps("participantId")} />
+          <TextInput required label={t.studyIdLabel} {...f.getInputProps("studyId")} />
           <Button type="submit">{t.formAction}</Button>
         </Stack>
       </form>

apps/frontend/src/stores/questionnaire.ts

@@ -0,0 +1,9 @@
+import { components } from "../api.gen";
+import { map } from "nanostores";
+
+type Questionnaire = {
+  participant: components["schemas"]["ParticipantResponseDto"];
+  study: components["schemas"]["StudyResponseDto"];
+};
+
+export const $questionnaire = map<Questionnaire>();