feat(frontend): auto generate title of period

Author: stampaaaron

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

@@ -1,8 +1,9 @@
 import { useForm } from "@mantine/form";
-import { Button, Flex, MonthPicker, Stack, TextInput } from "@quassel/ui";
+import { Button, Flex, formatDate, 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;
@@ -17,14 +18,19 @@ type PeriodFormProps = {
 
 const messages = i18n("periodForm", {
   labelTitle: "Title",
+  defaultTitle: params("Period ({start} - {end})"),
 });
 
 export function PeriodForm({ onSave, actionLabel, period }: PeriodFormProps) {
   const t = useStore(messages);
 
   const f = useForm<PeriodFormValues>({
     initialValues: period,
-    mode: "uncontrolled",
+    onValuesChange({ range: [newStart, newEnd] }, { range: [prevStart, prevEnd] }) {
+      if ((!prevStart || !prevEnd) && newStart && newEnd) {
+        f.setFieldValue("title", t.defaultTitle({ start: formatDate(newStart, "M/YY"), end: formatDate(newEnd, "M/YY") }));
+      }
+    },
   });
 
   useEffect(() => {

libs/ui/src/index.ts

@@ -29,6 +29,8 @@ import "@mantine/core/styles/Combobox.css";
 import "@mantine/core/styles/Stack.css";
 import "@mantine/dates/styles.css";
 
+import { formatDate } from "./utils/date";
+
 export { ThemeProvider } from "./theme/ThemeProvider";
 
 // custom components
@@ -69,3 +71,5 @@ export {
   IconCalendarWeek,
   IconMapSearch,
 } from "@tabler/icons-react";
+
+export { formatDate };

libs/ui/src/utils/date.ts

@@ -0,0 +1,5 @@
+import dayjs from "dayjs";
+
+export function formatDate(date: Date, dayjsFormatTemplate: string) {
+  return dayjs(date).format(dayjsFormatTemplate);
+}