feat: add create entry logic

Author: stampaaaron

apps/frontend/src/components/questionnaire/calendar/EntryForm.tsx

@@ -6,11 +6,11 @@ import { useEffect } from "react";
 import { CarerSelect } from "../../CarerSelect";
 import { LanguageSelect } from "../../LanguageSelect";
 
-type FormValues = {
-  carerId?: number;
-  languageEntries: {
+export type EntryFormValues = {
+  carer?: number;
+  entryLanguages: {
     ratio: number;
-    languageId?: number;
+    language?: number;
   }[];
   startedAt: string;
   endedAt: string;
@@ -26,18 +26,18 @@ const messages = i18n("entityForm", {
 });
 
 type EntityFormProps = {
-  onSave: (entity: FormValues) => void;
-  entry?: Partial<FormValues>;
+  onSave: (entity: EntryFormValues) => void;
+  entry?: Partial<EntryFormValues>;
   actionLabel: string;
 };
 
 export function EntityForm({ onSave, actionLabel, entry }: EntityFormProps) {
   const t = useStore(messages);
-  const f = useForm<FormValues>({
+  const f = useForm<EntryFormValues>({
     initialValues: {
       startedAt: "",
       endedAt: "",
-      languageEntries: [
+      entryLanguages: [
         {
           ratio: 100,
         },
@@ -46,16 +46,16 @@ export function EntityForm({ onSave, actionLabel, entry }: EntityFormProps) {
     validate: {
       startedAt: isNotEmpty(t.validationNotEmpty),
       endedAt: isNotEmpty(t.validationNotEmpty),
-      carerId: isNotEmpty(t.validationNotEmpty),
-      languageEntries: {
+      carer: isNotEmpty(t.validationNotEmpty),
+      entryLanguages: {
         ratio: (value) => {
           const fieldError = isInRange({ min: 1, max: 100 }, t.validationRatio)(value);
           if (fieldError) return fieldError;
 
           const listError = getTotalRatio() !== 100;
           if (listError) return t.validationTotalRatio;
         },
-        languageId: isNotEmpty(t.validationNotEmpty),
+        language: isNotEmpty(t.validationNotEmpty),
       },
     },
   });
@@ -67,16 +67,16 @@ export function EntityForm({ onSave, actionLabel, entry }: EntityFormProps) {
     }
   }, [entry]);
 
-  const getTotalRatio = () => f.getValues().languageEntries.reduce((acc, cur) => (acc += cur.ratio), 0);
+  const getTotalRatio = () => f.getValues().entryLanguages.reduce((acc, cur) => (acc += cur.ratio), 0);
 
   const updateRatios = () => {
-    const currentEntries = f.getValues().languageEntries;
+    const currentEntries = f.getValues().entryLanguages;
     const lastEntryIndex = currentEntries.length - 1;
 
     const avarageRatio = Math.round(100 / currentEntries.length);
 
     f.setValues({
-      languageEntries: currentEntries.map((entry, index) => ({
+      entryLanguages: currentEntries.map((entry, index) => ({
         ...entry,
         ratio: index === lastEntryIndex ? 100 - lastEntryIndex * avarageRatio : avarageRatio,
       })),
@@ -88,7 +88,7 @@ export function EntityForm({ onSave, actionLabel, entry }: EntityFormProps) {
       <Stack>
         <CarerSelect {...f.getInputProps("carerId")} placeholder={t.labelCarer} />
 
-        {f.getValues().languageEntries.map((_, index) => (
+        {f.getValues().entryLanguages.map((_, index) => (
           // TODO: make key either languageId or name of new language entry
           <Group key={`entry-${index}`} justify="stretch">
             <NumberInput {...f.getInputProps(`languageEntries.${index}.ratio`)} max={100} min={1} w={80} rightSection="%" />

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

@@ -10,7 +10,7 @@ import interactionPlugin from "@fullcalendar/interaction";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { components } from "../../../../../api.gen";
 import { QuestionnaireEntry } from "../../../../../components/questionnaire/calendar/QuestionnaireEntry";
-import { EntityForm } from "../../../../../components/questionnaire/calendar/EntryForm";
+import { EntityForm, EntryFormValues } from "../../../../../components/questionnaire/calendar/EntryForm";
 import { useState } from "react";
 
 export type ExtendedEvent = EventInput & { extendedProps: { entryLanguages: components["schemas"]["EntryLanguageResponseDto"][] } };
@@ -44,8 +44,12 @@ function QuestionnaireEntries() {
 
   const [selectedStartTime, setSelectedStartTime] = useState<string>();
   const [selectedEndTime, setSelectedEndTime] = useState<string>();
+  const [selectedWeekday, setSelectedWeekday] = useState<number>();
 
-  const { data: questionnaire } = useSuspenseQuery($api.queryOptions("get", "/questionnaires/{id}", { params: { path: { id: p.id } } }));
+  const createMutation = $api.useMutation("post", "/entries");
+  const { data: questionnaire, refetch } = useSuspenseQuery(
+    $api.queryOptions("get", "/questionnaires/{id}", { params: { path: { id: p.id } } })
+  );
 
   const events: ExtendedEvent[] =
     questionnaire.entries?.map(({ startedAt, endedAt, weekday, carer, entryLanguages }) => ({
@@ -56,6 +60,28 @@ function QuestionnaireEntries() {
       backgroundColor: theme.colors[theme.primaryColor][4],
     })) ?? [];
 
+  const handleAddEntry = ({ entryLanguages, carer, ...rest }: EntryFormValues) => {
+    if (selectedWeekday === undefined) return;
+
+    createMutation.mutate(
+      {
+        body: {
+          ...rest,
+          carer: carer!,
+          entryLanguages: entryLanguages.map(({ ratio, language: languageId }) => ({ language: languageId!, ratio })),
+          weekday: selectedWeekday,
+          questionnaire: questionnaire.id,
+        },
+      },
+      {
+        onSuccess() {
+          refetch();
+          close();
+        },
+      }
+    );
+  };
+
   const handleSubmit = () => {
     n({ to: "/questionnaire/$id/remarks", params: p });
   };
@@ -64,7 +90,7 @@ function QuestionnaireEntries() {
     <>
       <Modal opened={opened} onClose={close} size="md">
         <EntityForm
-          onSave={console.log}
+          onSave={handleAddEntry}
           entry={!!selectedStartTime && !!selectedEndTime ? { startedAt: selectedStartTime, endedAt: selectedEndTime } : undefined}
           actionLabel={t.addEntityLabel}
         />
@@ -80,6 +106,7 @@ function QuestionnaireEntries() {
             select={(args) => {
               setSelectedStartTime(getTime(args.start));
               setSelectedEndTime(getTime(args.end));
+              setSelectedWeekday(args.start.getDay());
               open();
             }}
             eventContent={({ event }) => <QuestionnaireEntry event={event} />}