feat: implement questionnaire creation

Author: stampaaaron

apps/backend/src/research/questionnaires/questionnaire.dto.ts

@@ -1,6 +1,6 @@
 import { ApiProperty, OmitType, PartialType } from "@nestjs/swagger";
 import { Type } from "class-transformer";
-import { IsDate, IsNotEmpty } from "class-validator";
+import { IsDateString, IsNotEmpty } from "class-validator";
 import { ParticipantDto } from "../participants/participant.dto";
 import { StudyDto } from "../studies/study.dto";
 
@@ -9,11 +9,11 @@ export class QuestionnaireDto {
   id: number;
 
   @ApiProperty({ example: "2024-11-01T07:00:00.000Z", description: "The starting date of the questionnaire" })
-  @IsDate()
+  @IsDateString()
   startedAt?: Date;
 
   @ApiProperty({ example: "2024-11-01T08:00:00.00Z", description: "The ending date of the questionnaire" })
-  @IsDate()
+  @IsDateString()
   endedAt?: Date;
 
   @ApiProperty({ example: "First few months", description: "The title of the questionnaire" })
@@ -33,5 +33,8 @@ export class QuestionnaireDto {
   entries?: number[];
 }
 export class QuestionnaireResponseDto extends QuestionnaireDto {}
-export class QuestionnaireCreationDto extends OmitType(QuestionnaireDto, ["id"]) {}
+export class QuestionnaireCreationDto extends OmitType(QuestionnaireDto, ["id", "study", "participant"]) {
+  study: number;
+  participant: number;
+}
 export class QuestionnaireMutationDto extends PartialType(QuestionnaireCreationDto) {}

apps/backend/src/research/questionnaires/questionnaires.service.ts

@@ -14,7 +14,7 @@ export class QuestionnairesService {
 
   async create(questionnaireCreationDto: QuestionnaireCreationDto) {
     const questionnaire = new Questionnaire();
-    questionnaire.assign(questionnaireCreationDto);
+    questionnaire.assign(questionnaireCreationDto, { em: this.em });
 
     try {
       await this.em.persist(questionnaire).flush();

apps/frontend/src/api.gen.ts

@@ -750,8 +750,8 @@ export interface components {
              * @example We went on holidays for 2 weeks and only spoke Esperanto
              */
             remark?: string;
-            study?: components["schemas"]["StudyDto"];
-            participant?: components["schemas"]["ParticipantDto"];
+            study: number;
+            participant: number;
             entries?: number[];
         };
         QuestionnaireResponseDto: {
@@ -809,9 +809,9 @@ export interface components {
              * @example We went on holidays for 2 weeks and only spoke Esperanto
              */
             remark?: string;
-            study?: components["schemas"]["StudyDto"];
-            participant?: components["schemas"]["ParticipantDto"];
             entries?: number[];
+            study?: number;
+            participant?: number;
         };
         LanguageDto: {
             /**

apps/frontend/src/components/questionnaire/PeriodForm.tsx

@@ -0,0 +1,44 @@
+import { useForm } from "@mantine/form";
+import { Button, Flex, MonthPicker, Stack, TextInput } from "@quassel/ui";
+import { i18n } from "../../stores/i18n";
+import { useStore } from "@nanostores/react";
+import { components } from "../../api.gen";
+
+type FormValues = {
+  title: string;
+  range: [Date, Date];
+};
+
+type ResultType = Pick<components["schemas"]["QuestionnaireMutationDto"], "startedAt" | "endedAt" | "title">;
+
+type PeriodFormProps = {
+  onSave: (questionnaire: ResultType) => void;
+  actionLabel: string;
+};
+
+const mapValues = ({ range: [startedAt, endedAt], ...rest }: FormValues): ResultType => ({
+  ...rest,
+  startedAt: startedAt.toISOString(),
+  endedAt: endedAt.toISOString(),
+});
+
+export const messages = i18n("periodForm", {
+  labelTitle: "Title",
+});
+
+export function PeriodForm({ onSave, actionLabel }: PeriodFormProps) {
+  const f = useForm<FormValues>({});
+  const t = useStore(messages);
+
+  return (
+    <form onSubmit={f.onSubmit((values) => onSave(mapValues(values)))}>
+      <Stack>
+        <Flex justify="center">
+          <MonthPicker {...f.getInputProps("range")} size="md" type="range" numberOfColumns={2} />
+        </Flex>
+        <TextInput {...f.getInputProps("title")} label={t.labelTitle} />
+        <Button type="submit">{actionLabel}</Button>
+      </Stack>
+    </form>
+  );
+}

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/new.tsx

@@ -1,7 +1,9 @@
-import { Button } from "@quassel/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { i18n } from "../../../../stores/i18n";
 import { useStore } from "@nanostores/react";
+import { PeriodForm } from "../../../../components/questionnaire/PeriodForm";
+import { $api } from "../../../../stores/api";
+import { $questionnaire } from "../../../../stores/questionnaire";
 
 export const messages = i18n("questionnaireNew", {
   title: "Create new period of life",
@@ -12,19 +14,25 @@ function QuestionnaireNew() {
   const n = useNavigate();
   const t = useStore(messages);
 
-  const handleSubmit = () => {
-    // TODO create new questionnaire and receive ID
+  const questionnaire = useStore($questionnaire);
 
-    n({ to: "/questionnaire/$id/entries", params: { id: "123" } });
-  };
+  const createQuestionnaireMutation = $api.useMutation("post", "/questionnaires", {
+    onSuccess: (questionnaire) => {
+      n({ to: "/questionnaire/$id/entries", params: { id: questionnaire.id.toString() } });
+    },
+  });
 
   return (
     <>
       <h3>{t.title}</h3>
-      <form onSubmit={handleSubmit}>
-        {/* TODO period form */}
-        <Button type="submit">{t.formAction}</Button>
-      </form>
+      <PeriodForm
+        onSave={(period) =>
+          createQuestionnaireMutation.mutate({
+            body: { ...period, study: questionnaire!.study.id, participant: questionnaire!.participant.id },
+          })
+        }
+        actionLabel={t.formAction}
+      />
     </>
   );
 }

libs/ui/package.json

@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@mantine/core": "^7.13.5",
+    "@mantine/dates": "^7.14.1",
     "@mantine/hooks": "^7.13.5",
     "@tabler/icons-react": "3.17.0",
     "react": "^18.3.1",

libs/ui/src/index.ts

@@ -27,6 +27,7 @@ import "@mantine/core/styles/Title.css";
 import "@mantine/core/styles/ActionIcon.css";
 import "@mantine/core/styles/Combobox.css";
 import "@mantine/core/styles/Stack.css";
+import "@mantine/dates/styles.css";
 
 export { ThemeProvider } from "./theme/ThemeProvider";
 
@@ -41,6 +42,7 @@ export {
   Checkbox,
   Container,
   Divider,
+  Flex,
   Group,
   NavLink,
   Paper,
@@ -55,6 +57,8 @@ export {
   useMantineTheme,
 } from "@mantine/core";
 
+export { MonthPicker } from "@mantine/dates";
+
 export {
   IconLogout,
   IconUsers,