feat: preselect start date based on previous questionnaire

stampaaaron · stampaaaron · commit 5c5eb81285a0 · 2024-12-11T13:45:27.000Z
diff --git a/apps/backend/src/research/participants/participant.dto.ts b/apps/backend/src/research/participants/participant.dto.ts
@@ -1,6 +1,7 @@
 import { ApiProperty, OmitType, PartialType } from "@nestjs/swagger";
 import { Type } from "class-transformer";
 import { IsDateString, IsOptional } from "class-validator";
+import { QuestionnaireListResponseDto } from "../questionnaires/questionnaire.dto";
 
 export class ParticipantDto {
   @ApiProperty({ example: 1, description: "The id of the participant (child id)" })
@@ -11,6 +12,9 @@ export class ParticipantDto {
   @IsOptional()
   birthday?: Date;
 
+  @Type(() => QuestionnaireListResponseDto)
+  latestQuestionnaire?: QuestionnaireListResponseDto;
+
   @Type(() => Array<number>)
   questionnaires: number[];
 
diff --git a/apps/backend/src/research/participants/participants.controller.ts b/apps/backend/src/research/participants/participants.controller.ts
@@ -5,11 +5,15 @@ import { ParticipantCreationDto, ParticipantMutationDto, ParticipantResponseDto
 import { ErrorResponseDto } from "../../common/dto/error.dto";
 import { Roles } from "../../system/users/roles.decorator";
 import { UserRole } from "../../system/users/user.entity";
+import { QuestionnairesService } from "../questionnaires/questionnaires.service";
 
 @ApiTags("Participants")
 @Controller("participants")
 export class ParticipantsController {
-  constructor(private readonly participantService: ParticipantsService) {}
+  constructor(
+    private readonly participantService: ParticipantsService,
+    private readonly questionnairesService: QuestionnairesService
+  ) {}
 
   @Post()
   @ApiOperation({ summary: "Create a participant" })
@@ -27,8 +31,10 @@ 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);
+  async get(@Param("id") id: string): Promise<ParticipantResponseDto> {
+    const participant = await this.participantService.findOne(+id);
+    const latestQuestionnaire = (await this.questionnairesService.findLatestByParticipant(+id))?.toObject();
+    return { ...participant, latestQuestionnaire };
   }
 
   @Patch(":id")
diff --git a/apps/backend/src/research/questionnaires/questionnaire.dto.ts b/apps/backend/src/research/questionnaires/questionnaire.dto.ts
@@ -35,7 +35,7 @@ export class QuestionnaireDto {
 }
 export class QuestionnaireResponseDto extends QuestionnaireDto {}
 export class EntryQuestionnaireDto extends OmitType(QuestionnaireDto, ["entries"]) {}
-export class QuestionnairesResponseDto extends OmitType(QuestionnaireDto, ["entries"]) {}
+export class QuestionnaireListResponseDto extends OmitType(QuestionnaireDto, ["entries"]) {}
 export class QuestionnaireCreationDto extends OmitType(QuestionnaireDto, ["id", "study", "participant"]) {
   study: number;
   participant: number;
diff --git a/apps/backend/src/research/questionnaires/questionnaires.controller.ts b/apps/backend/src/research/questionnaires/questionnaires.controller.ts
@@ -4,7 +4,12 @@ import { ErrorResponseDto } from "../../common/dto/error.dto";
 import { Roles } from "../../system/users/roles.decorator";
 import { UserRole } from "../../system/users/user.entity";
 import { QuestionnairesService } from "./questionnaires.service";
-import { QuestionnaireCreationDto, QuestionnaireResponseDto, QuestionnaireMutationDto, QuestionnairesResponseDto } from "./questionnaire.dto";
+import {
+  QuestionnaireCreationDto,
+  QuestionnaireResponseDto,
+  QuestionnaireMutationDto,
+  QuestionnaireListResponseDto,
+} from "./questionnaire.dto";
 
 @ApiTags("Questionnaires")
 @Controller("questionnaires")
@@ -20,7 +25,7 @@ export class QuestionnairesController {
 
   @Get()
   @ApiOperation({ summary: "Get all questionnairess" })
-  index(): Promise<QuestionnairesResponseDto[]> {
+  index(): Promise<QuestionnaireListResponseDto[]> {
     return this.questionnairesService.findAll();
   }
 
diff --git a/apps/frontend/src/api.gen.ts b/apps/frontend/src/api.gen.ts
@@ -471,6 +471,50 @@ export interface components {
              */
             role?: "ASSISTANT" | "ADMIN";
         };
+        StudyDto: {
+            /**
+             * @description The id of the study (child id)
+             * @example 1
+             */
+            id: number;
+            /**
+             * @description The title of the study
+             * @example Series 1
+             */
+            title: string;
+            questionnaires?: number[];
+        };
+        QuestionnaireListResponseDto: {
+            /**
+             * @description The id of the questionnaire
+             * @example 1
+             */
+            id: number;
+            /**
+             * Format: date-time
+             * @description The starting date of the questionnaire
+             * @example 2024-11-01T07:00:00.000Z
+             */
+            startedAt?: string;
+            /**
+             * Format: date-time
+             * @description The ending date of the questionnaire
+             * @example 2024-11-01T08:00:00.00Z
+             */
+            endedAt?: string;
+            /**
+             * @description The title of the questionnaire
+             * @example First few months
+             */
+            title?: string;
+            /**
+             * @description The remark of the questionnaire
+             * @example We went on holidays for 2 weeks and only spoke Esperanto
+             */
+            remark?: string;
+            study?: components["schemas"]["StudyDto"];
+            participant?: components["schemas"]["ParticipantDto"];
+        };
         ParticipantDto: {
             /**
              * @description The id of the participant (child id)
@@ -483,6 +527,7 @@ export interface components {
              * @example 2024-11-01T00:05:02.718Z
              */
             birthday?: string;
+            latestQuestionnaire?: components["schemas"]["QuestionnaireListResponseDto"];
             questionnaires: number[];
             carers: number[];
             languages: number[];
@@ -574,6 +619,7 @@ export interface components {
              * @example 2024-11-01T00:05:02.718Z
              */
             birthday?: string;
+            latestQuestionnaire?: components["schemas"]["QuestionnaireListResponseDto"];
         };
         ParticipantResponseDto: {
             /**
@@ -587,6 +633,7 @@ export interface components {
              * @example 2024-11-01T00:05:02.718Z
              */
             birthday?: string;
+            latestQuestionnaire?: components["schemas"]["QuestionnaireListResponseDto"];
             questionnaires: number[];
             carers: number[];
             languages: number[];
@@ -603,6 +650,7 @@ export interface components {
              * @example 2024-11-01T00:05:02.718Z
              */
             birthday?: string;
+            latestQuestionnaire?: components["schemas"]["QuestionnaireListResponseDto"];
             questionnaires?: number[];
             carers?: number[];
             languages?: number[];
@@ -640,19 +688,6 @@ export interface components {
             questionnaire: number;
             entryLanguages: components["schemas"]["EntryLanguageCreationDto"][];
         };
-        StudyDto: {
-            /**
-             * @description The id of the study (child id)
-             * @example 1
-             */
-            id: number;
-            /**
-             * @description The title of the study
-             * @example Series 1
-             */
-            title: string;
-            questionnaires?: number[];
-        };
         EntryQuestionnaireDto: {
             /**
              * @description The id of the questionnaire
@@ -873,37 +908,6 @@ export interface components {
             participant?: components["schemas"]["ParticipantDto"];
             entries?: components["schemas"]["QuestionnaireEntryDto"][];
         };
-        QuestionnairesResponseDto: {
-            /**
-             * @description The id of the questionnaire
-             * @example 1
-             */
-            id: number;
-            /**
-             * Format: date-time
-             * @description The starting date of the questionnaire
-             * @example 2024-11-01T07:00:00.000Z
-             */
-            startedAt?: string;
-            /**
-             * Format: date-time
-             * @description The ending date of the questionnaire
-             * @example 2024-11-01T08:00:00.00Z
-             */
-            endedAt?: string;
-            /**
-             * @description The title of the questionnaire
-             * @example First few months
-             */
-            title?: string;
-            /**
-             * @description The remark of the questionnaire
-             * @example We went on holidays for 2 weeks and only spoke Esperanto
-             */
-            remark?: string;
-            study?: components["schemas"]["StudyDto"];
-            participant?: components["schemas"]["ParticipantDto"];
-        };
         QuestionnaireMutationDto: {
             /**
              * Format: date-time
@@ -1827,7 +1831,7 @@ export interface operations {
                     [name: string]: unknown;
                 };
                 content: {
-                    "application/json": components["schemas"]["QuestionnairesResponseDto"][];
+                    "application/json": components["schemas"]["QuestionnaireListResponseDto"][];
                 };
             };
         };
diff --git a/apps/frontend/src/components/questionnaire/PeriodForm.tsx b/apps/frontend/src/components/questionnaire/PeriodForm.tsx
@@ -1,18 +1,19 @@
 import { useForm } from "@mantine/form";
-import { Button, Flex, formatDate, MonthPicker, Stack, TextInput } from "@quassel/ui";
+import { Button, Flex, formatDate, getNext, MonthPicker, Stack, TextInput } from "@quassel/ui";
 import { i18n } from "../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
 import { params } from "@nanostores/i18n";
 
 export type PeriodFormValues = {
   title: string;
-  range: [Date, Date];
+  range: [Date | null, Date | null];
 };
 
 type PeriodFormProps = {
   onSave: (form: PeriodFormValues) => void;
   period?: PeriodFormValues;
+  prevEndDate?: Date;
   actionLabel: string;
 };
 
@@ -21,12 +22,14 @@ const messages = i18n("periodForm", {
   defaultTitle: params("Period ({start} - {end})"),
 });
 
-export function PeriodForm({ onSave, actionLabel, period }: PeriodFormProps) {
+export function PeriodForm({ onSave, actionLabel, period, prevEndDate }: PeriodFormProps) {
   const t = useStore(messages);
 
   const f = useForm<PeriodFormValues>({
-    initialValues: period,
-    mode: "uncontrolled",
+    initialValues: {
+      range: [prevEndDate ? getNext("month", prevEndDate) : null, null],
+      title: "",
+    },
     onValuesChange(newValues, prevValues) {
       const [newStart, newEnd] = newValues.range ?? [];
       const [prevStart, prevEnd] = prevValues.range ?? [];
@@ -48,7 +51,17 @@ export function PeriodForm({ onSave, actionLabel, period }: PeriodFormProps) {
     <form onSubmit={f.onSubmit((values) => onSave(values))}>
       <Stack>
         <Flex justify="center">
-          <MonthPicker {...f.getInputProps("range")} size="md" type="range" numberOfColumns={2} selectEndOfMonth />
+          <MonthPicker
+            {...f.getInputProps("range")}
+            size="md"
+            type="range"
+            minDate={prevEndDate}
+            defaultDate={prevEndDate}
+            numberOfColumns={2}
+            columnsToScroll={1}
+            allowSingleDateInRange
+            selectEndOfMonth
+          />
         </Flex>
         <TextInput {...f.getInputProps("title")} label={t.labelTitle} />
         <Button type="submit">{actionLabel}</Button>
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/period.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/period.tsx
@@ -35,8 +35,8 @@ function QuestionnairePeriod() {
       range: [localStartedAt, localEndedAt],
     } = form;
 
-    const startedAt = localStartedAt.toISOString();
-    const endedAt = localEndedAt.toISOString();
+    const startedAt = localStartedAt!.toISOString();
+    const endedAt = localEndedAt!.toISOString();
 
     await updateQuestionnaireMutation.mutateAsync({
       params: { path: { id } },
diff --git a/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/new.tsx b/apps/frontend/src/routes/_auth/questionnaire/_questionnaire/new.tsx
@@ -22,14 +22,16 @@ function QuestionnaireNew() {
     },
   });
 
+  const prevEndDate = questionnaire?.participant.latestQuestionnaire?.endedAt;
+
   const onSave = (form: PeriodFormValues) => {
     const {
       title,
       range: [localStartedAt, localEndedAt],
     } = form;
 
-    const startedAt = localStartedAt.toISOString();
-    const endedAt = localEndedAt.toISOString();
+    const startedAt = localStartedAt!.toISOString();
+    const endedAt = localEndedAt!.toISOString();
 
     createQuestionnaireMutation.mutate({
       body: { title, startedAt, endedAt, study: questionnaire!.study.id, participant: questionnaire!.participant.id },
@@ -39,7 +41,7 @@ function QuestionnaireNew() {
   return (
     <>
       <h3>{t.title}</h3>
-      <PeriodForm onSave={onSave} actionLabel={t.formAction} />
+      <PeriodForm onSave={onSave} prevEndDate={prevEndDate ? new Date(prevEndDate) : undefined} actionLabel={t.formAction} />
     </>
   );
 }
diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts
@@ -81,4 +81,4 @@ export {
   IconMinus,
 } from "@tabler/icons-react";
 
-export { formatDate, getTime, getDateFromTimeAndWeekday } from "./utils/date";
+export { formatDate, getTime, getDateFromTimeAndWeekday, getNext } from "./utils/date";
diff --git a/libs/ui/src/utils/date.ts b/libs/ui/src/utils/date.ts
@@ -6,6 +6,10 @@ export function formatDate(date: Date, dayjsFormatTemplate: string) {
 
 export const getTime = (date: Date) => formatDate(date, "HH:mm");
 
+export const getNext = (unit: dayjs.ManipulateType, date: Date) => {
+  return dayjs(date).add(1, unit).startOf(unit).toDate();
+};
+
 export function getDateFromTimeAndWeekday(time: string, weekday: number) {
   return dayjs(time, "HH:mm:ss")
     .set("day", weekday)

Original file line number	Diff line number	Diff line change
`@@ -35,7 +35,7 @@ export class QuestionnaireDto {`
`35`	`35`	`}`
`36`	`36`	`export class QuestionnaireResponseDto extends QuestionnaireDto {}`
`37`	`37`	`export class EntryQuestionnaireDto extends OmitType(QuestionnaireDto, ["entries"]) {}`
`38`		`-export class QuestionnairesResponseDto extends OmitType(QuestionnaireDto, ["entries"]) {}`
	`38`	`+export class QuestionnaireListResponseDto extends OmitType(QuestionnaireDto, ["entries"]) {}`
`39`	`39`	`export class QuestionnaireCreationDto extends OmitType(QuestionnaireDto, ["id", "study", "participant"]) {`
`40`	`40`	`study: number;`
`41`	`41`	`participant: number;`