feat: restrict period from birthday to current date

Author: stampaaaron

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

@@ -1,4 +1,4 @@
-import { Button, Flex, formatDate, getNext, InputError, MonthPicker, Stack, TextInput, useForm } from "@quassel/ui";
+import { Button, Flex, formatDate, InputError, MonthPicker, Stack, TextInput, useForm } from "@quassel/ui";
 import { i18n } from "../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
@@ -12,7 +12,7 @@ export type PeriodFormValues = {
 type PeriodFormProps = {
   onSave: (form: PeriodFormValues) => void;
   period?: PeriodFormValues;
-  prevEndDate?: Date;
+  startDate: Date;
   actionLabel: string;
 };
 
@@ -22,26 +22,24 @@ const messages = i18n("periodForm", {
   validationStartDate: "There are no gaps allowed between questionnaires. The questionnaire must start when the previous ended.",
 });
 
-export function PeriodForm({ onSave, actionLabel, period, prevEndDate }: PeriodFormProps) {
+export function PeriodForm({ onSave, actionLabel, period, startDate }: PeriodFormProps) {
   const t = useStore(messages);
 
   const f = useForm<PeriodFormValues>({
-    mode: "uncontrolled",
     initialValues: {
-      range: [prevEndDate ? getNext("month", prevEndDate) : null, null],
+      range: [startDate, null],
       title: "",
     },
     validate: {
       range([start]) {
-        if (prevEndDate && +getNext("month", prevEndDate) !== +start!) {
+        if (+startDate !== +start!) {
           return t.validationStartDate;
         }
       },
     },
     onValuesChange(newValues, prevValues) {
       const [newStart, newEnd] = newValues.range ?? [];
       const [prevStart, prevEnd] = prevValues.range ?? [];
-
       if ((!prevStart || !prevEnd) && newStart && newEnd) {
         f.setFieldValue("title", t.defaultTitle({ start: formatDate(newStart, "M/YY"), end: formatDate(newEnd, "M/YY") }));
       }
@@ -50,22 +48,26 @@ export function PeriodForm({ onSave, actionLabel, period, prevEndDate }: PeriodF
 
   useEffect(() => {
     if (period) {
-      f.setValues(period);
-      f.resetDirty();
+      f.initialize(period);
     }
   }, [period]);
 
+  useEffect(() => {
+    if (startDate) f.reset();
+  }, [startDate]);
+
   return (
-    <form onSubmit={f.onSubmit((values) => onSave(values))}>
+    <form onSubmit={f.onSubmit(onSave)}>
       <Stack>
         <Flex justify="center">
           <Stack>
             <MonthPicker
               {...f.getInputProps("range")}
               size="md"
               type="range"
-              minDate={prevEndDate}
-              defaultDate={prevEndDate}
+              minDate={startDate}
+              maxDate={new Date()}
+              defaultDate={startDate}
               numberOfColumns={2}
               columnsToScroll={1}
               allowSingleDateInRange

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/period.tsx

@@ -49,7 +49,7 @@ function QuestionnairePeriod() {
   return (
     <>
       <h3>{t.title}</h3>
-      <PeriodForm onSave={onSave} period={period} actionLabel={t.formAction} />
+      <PeriodForm onSave={onSave} startDate={period.range[0]!} period={period} actionLabel={t.formAction} />
     </>
   );
 }

apps/frontend/src/routes/_auth/questionnaire/_questionnaire/$id/remarks.tsx

@@ -5,6 +5,7 @@ import { useStore } from "@nanostores/react";
 import { $api } from "../../../../../stores/api";
 import { useEffect } from "react";
 import { components } from "../../../../../api.gen";
+import { useQueryClient } from "@tanstack/react-query";
 
 export const messages = i18n("questionnaireRemarks", {
   title: "Add remarks",
@@ -22,6 +23,8 @@ function QuestionnaireRemarks() {
   const n = useNavigate();
   const p = Route.useParams();
 
+  const c = useQueryClient();
+
   const t = useStore(messages);
 
   const f = useForm<FormValues>({
@@ -49,6 +52,9 @@ function QuestionnaireRemarks() {
     if (isSameOrAfter(new Date(Date.parse(questionnaire.endedAt)), new Date(), "month")) {
       n({ to: "/questionnaire/$id/overview", params: p });
     } else {
+      await c.invalidateQueries(
+        $api.queryOptions("get", "/participants/{id}", { params: { path: { id: questionnaire.participant.id.toString() } } })
+      );
       n({ to: "/questionnaire/new" });
     }
   };

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

@@ -5,6 +5,7 @@ import { PeriodForm, PeriodFormValues } from "../../../../components/questionnai
 import { $api } from "../../../../stores/api";
 import { $questionnaire } from "../../../../stores/questionnaire";
 import { useEffect } from "react";
+import { getNext } from "@quassel/ui";
 
 const messages = i18n("questionnaireNew", {
   title: "Create new period of life",
@@ -33,6 +34,8 @@ function QuestionnaireNew() {
 
   const prevEndDate = questionnaire?.participant.latestQuestionnaire?.endedAt;
 
+  const startDate = prevEndDate ? getNext("month", new Date(prevEndDate)) : participant?.birthday ? new Date(participant.birthday) : undefined;
+
   const onSave = (form: PeriodFormValues) => {
     const {
       title,
@@ -50,7 +53,7 @@ function QuestionnaireNew() {
   return (
     <>
       <h3>{t.title}</h3>
-      <PeriodForm onSave={onSave} prevEndDate={prevEndDate ? new Date(prevEndDate) : undefined} actionLabel={t.formAction} />
+      {startDate && <PeriodForm onSave={onSave} startDate={startDate} actionLabel={t.formAction} />}
     </>
   );
 }