feat(frontend): add validation for period start date

Author: stampaaaron

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

@@ -1,5 +1,5 @@
 import { useForm } from "@mantine/form";
-import { Button, Flex, formatDate, getNext, MonthPicker, Stack, TextInput } from "@quassel/ui";
+import { Button, Flex, formatDate, getNext, InputError, MonthPicker, Stack, TextInput } from "@quassel/ui";
 import { i18n } from "../../stores/i18n";
 import { useStore } from "@nanostores/react";
 import { useEffect } from "react";
@@ -20,6 +20,7 @@ type PeriodFormProps = {
 const messages = i18n("periodForm", {
   labelTitle: "Title",
   defaultTitle: params("Period ({start} - {end})"),
+  validationStartDate: "There are no gaps allowed between questionnaires. The questionnaire must start when the previous ended.",
 });
 
 export function PeriodForm({ onSave, actionLabel, period, prevEndDate }: PeriodFormProps) {
@@ -30,6 +31,16 @@ export function PeriodForm({ onSave, actionLabel, period, prevEndDate }: PeriodF
       range: [prevEndDate ? getNext("month", prevEndDate) : null, null],
       title: "",
     },
+    validate: {
+      range([start]) {
+        console.log(start);
+        console.log(prevEndDate && getNext("month", prevEndDate));
+
+        if (prevEndDate && +getNext("month", prevEndDate) !== +start!) {
+          return t.validationStartDate;
+        }
+      },
+    },
     onValuesChange(newValues, prevValues) {
       const [newStart, newEnd] = newValues.range ?? [];
       const [prevStart, prevEnd] = prevValues.range ?? [];
@@ -51,17 +62,20 @@ export function PeriodForm({ onSave, actionLabel, period, prevEndDate }: PeriodF
     <form onSubmit={f.onSubmit((values) => onSave(values))}>
       <Stack>
         <Flex justify="center">
-          <MonthPicker
-            {...f.getInputProps("range")}
-            size="md"
-            type="range"
-            minDate={prevEndDate}
-            defaultDate={prevEndDate}
-            numberOfColumns={2}
-            columnsToScroll={1}
-            allowSingleDateInRange
-            selectEndOfMonth
-          />
+          <Stack>
+            <MonthPicker
+              {...f.getInputProps("range")}
+              size="md"
+              type="range"
+              minDate={prevEndDate}
+              defaultDate={prevEndDate}
+              numberOfColumns={2}
+              columnsToScroll={1}
+              allowSingleDateInRange
+              selectEndOfMonth
+            />
+            <InputError>{f.getInputProps("range").error}</InputError>
+          </Stack>
         </Flex>
         <TextInput {...f.getInputProps("title")} label={t.labelTitle} />
         <Button type="submit">{actionLabel}</Button>

libs/ui/src/index.ts

@@ -47,6 +47,7 @@ export {
   Divider,
   Flex,
   Group,
+  InputError,
   Modal,
   NavLink,
   Paper,

libs/ui/src/utils/date.ts

@@ -7,7 +7,7 @@ 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();
+  return dayjs(date).utc().add(1, unit).startOf(unit).toDate();
 };
 
 export function getDateFromTimeAndWeekday(time: string, weekday: number) {