Merge pull request #222 from openscript-ch/26-implement-questionnaire-viewing-and-editing

26 implement questionnaire viewing and editing

Author: openscript

.changeset/fast-monkeys-cheat.md

@@ -0,0 +1,6 @@
+---
+"@quassel/frontend": patch
+"@quassel/backend": patch
+---
+
+Show more infos for questionnaires in admin

.changeset/sour-ducks-relate.md

@@ -0,0 +1,5 @@
+---
+"@quassel/frontend": patch
+---
+
+Make questionnaires editable from admin

.changeset/spotty-news-draw.md

@@ -0,0 +1,5 @@
+---
+"@quassel/frontend": patch
+---
+
+Fix preselecting start date when creating next period

apps/backend/src/research/questionnaires/questionnaires.service.ts

@@ -51,17 +51,19 @@ export class QuestionnairesService {
       throw e;
     }
 
-    return (await questionnaire.populate(["entries", "entries.carer", "entries.entryLanguages.language", "participant"])).toObject();
+    return (await questionnaire.populate(["entries", "entries.carer", "entries.entryLanguages.language", "participant", "study"])).toObject();
   }
 
   async findAll() {
-    return (await this.questionnaireRepository.findAll()).map((questionnaire) => questionnaire.toObject());
+    return (await this.questionnaireRepository.findAll({ populate: ["study", "participant"] })).map((questionnaire) =>
+      questionnaire.toObject()
+    );
   }
 
   async findOne(id: number) {
     return (
       await this.questionnaireRepository.findOneOrFail(id, {
-        populate: ["entries", "entries.carer", "entries.entryLanguages.language", "participant"],
+        populate: ["entries", "entries.carer", "entries.entryLanguages.language", "participant", "study"],
       })
     ).toObject();
   }
@@ -76,11 +78,16 @@ export class QuestionnairesService {
 
   async update(id: number, questionnaireMutationDto: QuestionnaireMutationDto) {
     const questionnaire = await this.questionnaireRepository.findOneOrFail(id, {
-      populate: ["entries", "entries.carer", "entries.entryLanguages.language", "participant"],
+      populate: ["entries", "entries.carer", "entries.entryLanguages.language", "participant", "study"],
     });
+
+    const prevQuestionnaire = await this.questionnaireRepository.findOne(
+      { participant: questionnaire.participant, endedAt: { $lt: questionnaire.startedAt } },
+      { orderBy: { endedAt: "desc" } }
+    );
+
     questionnaire.assign(questionnaireMutationDto);
 
-    const prevQuestionnaire = await this.findLatestByParticipant(questionnaire.participant!.id);
     if (prevQuestionnaire?.id !== id) {
       this.validateStartDate(questionnaire, prevQuestionnaire);
     }

apps/frontend/src/api.gen.ts

@@ -296,23 +296,6 @@ export interface paths {
         patch: operations["QuestionnairesController_update"];
         trace?: never;
     };
-    "/questionnaires/{id}/complete": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        /** Completes the questionnaire by ID */
-        patch: operations["QuestionnairesController_complete"];
-        trace?: never;
-    };
     "/entry-languages": {
         parameters: {
             query?: never;
@@ -2003,27 +1986,6 @@ export interface operations {
             };
         };
     };
-    QuestionnairesController_complete: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": Record<string, never>;
-                };
-            };
-        };
-    };
     EntryLanguagesController_index: {
         parameters: {
             query?: never;

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

@@ -53,7 +53,7 @@ export function PeriodForm({ onSave, actionLabel, period, startDate }: PeriodFor
   }, [period]);
 
   useEffect(() => {
-    if (startDate) f.reset();
+    if (startDate) f.setValues({ range: [startDate, null] });
   }, [startDate]);
 
   return (

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

@@ -0,0 +1,90 @@
+import { notifications } from "@quassel/ui";
+import { $api } from "../../stores/api";
+import { EntryCalendar } from "./calendar/EntryCalendar";
+import { useQueryClient } from "@tanstack/react-query";
+import { EntryFormValues } from "./calendar/EntryForm";
+import { components } from "../../api.gen";
+import { GapsPerDay } from "../../utils/entry";
+import { i18n } from "../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+type QuestionnaireEntriesProps = {
+  questionnaire: components["schemas"]["QuestionnaireResponseDto"];
+  gaps?: GapsPerDay;
+};
+
+const messages = i18n("questionnaireEntries", {
+  notificationSuccessCreateLanguage: "Successfully add a new language.",
+  notificationSuccessCreateCarer: "Successfully add a new carer.",
+});
+
+export function QuestionnaireEntries({ questionnaire, gaps }: QuestionnaireEntriesProps) {
+  const c = useQueryClient();
+  const t = useStore(messages);
+
+  const participantId = questionnaire.participant?.id;
+
+  const createMutation = $api.useMutation("post", "/entries");
+  const updateMutation = $api.useMutation("patch", "/entries/{id}");
+  const deleteMutation = $api.useMutation("delete", "/entries/{id}");
+
+  const { data: languages } = $api.useQuery("get", "/languages", { params: { query: { participantId } } });
+  const createLanguageMutation = $api.useMutation("post", "/languages", {
+    onSuccess() {
+      notifications.show({ message: t.notificationSuccessCreateLanguage, color: "uzhGreen" });
+      c.refetchQueries($api.queryOptions("get", "/languages", { params: { query: { participantId } } }));
+    },
+  });
+
+  const { data: carers } = $api.useQuery("get", "/carers", { params: { query: { participantId } } });
+  const createCarerMutation = $api.useMutation("post", "/carers", {
+    onSuccess() {
+      notifications.show({ message: t.notificationSuccessCreateCarer, color: "uzhGreen" });
+      c.refetchQueries($api.queryOptions("get", "/carers", { params: { query: { participantId } } }));
+    },
+  });
+
+  const reloadEntries = () => {
+    c.invalidateQueries($api.queryOptions("get", "/questionnaires/{id}", { params: { path: { id: questionnaire.id.toString() } } }));
+  };
+
+  const handleCreate = ({ carer, ...rest }: EntryFormValues, weekday: number) => {
+    const entryRequest = {
+      ...rest,
+      carer: carer!,
+      weekday,
+      questionnaire: questionnaire.id,
+    };
+
+    return createMutation.mutateAsync({ body: entryRequest }, { onSuccess: reloadEntries });
+  };
+
+  const handleUpdate = (id: number, { carer, ...rest }: Partial<EntryFormValues>, weekday: number) => {
+    const entryRequest = {
+      ...rest,
+      carer: carer!,
+      weekday,
+      questionnaire: questionnaire.id,
+    };
+
+    return updateMutation.mutateAsync({ body: entryRequest, params: { path: { id: id.toString() } } }, { onSuccess: reloadEntries });
+  };
+
+  const handleDelete = (id: number) => {
+    return deleteMutation.mutateAsync({ params: { path: { id: id.toString() } } }, { onSuccess: reloadEntries });
+  };
+
+  return (
+    <EntryCalendar
+      entries={questionnaire.entries ?? []}
+      gaps={gaps}
+      onAddEntry={handleCreate}
+      onUpdateEntry={handleUpdate}
+      onDeleteEntry={handleDelete}
+      carers={carers ?? []}
+      languages={languages ?? []}
+      onAddCarer={(name) => createCarerMutation.mutateAsync({ body: { name, participant: participantId } }).then(({ id }) => id)}
+      onAddLanguage={(name) => createLanguageMutation.mutateAsync({ body: { name, participant: participantId } }).then(({ id }) => id)}
+    />
+  );
+}

apps/frontend/src/routes/_auth/administration/questionnaires/edit.$id.tsx

@@ -1,21 +1,42 @@
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
-import { components } from "../../../../api.gen";
 import { $api } from "../../../../stores/api";
 import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
-import { Button, TextInput, useForm } from "@quassel/ui";
+import { Button, DateInput, Divider, Group, Stack, Table, Textarea, TextInput, useForm } from "@quassel/ui";
 import { useEffect } from "react";
+import { QuestionnaireEntries } from "../../../../components/questionnaire/QuestionnaireEntries";
+import { format, i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
 
-type FormValues = components["schemas"]["QuestionnaireMutationDto"];
+type FormValues = {
+  startedAt: Date;
+  endedAt: Date;
+  title: string;
+  remark?: string;
+};
+
+const messages = i18n("questionnairesEdit", {
+  labelRemarks: "Remarks",
+  labelTitle: "Title",
+  labelEndedAt: "End date",
+  labelStartedAt: "Start date",
+  labelParticipant: "Participant",
+  labelStudy: "Study",
+});
 
 function AdministrationQuestionnairesEdit() {
   const p = Route.useParams();
+  const n = useNavigate();
   const q = useQueryClient();
+
+  const t = useStore(messages);
+  const { time } = useStore(format);
+
   const { data, isSuccess } = useSuspenseQuery(
     $api.queryOptions("get", "/questionnaires/{id}", {
       params: { path: { id: p.id } },
     })
   );
-  const n = useNavigate();
+
   const editQuestionnaireMutation = $api.useMutation("patch", "/questionnaires/{id}", {
     onSuccess: () => {
       q.invalidateQueries(
@@ -26,27 +47,55 @@ function AdministrationQuestionnairesEdit() {
       n({ to: "/administration/questionnaires" });
     },
   });
+
   const f = useForm<FormValues>();
-  const handleSubmit = (values: FormValues) => {
+  const handleSubmit = ({ startedAt, endedAt, ...rest }: FormValues) => {
     editQuestionnaireMutation.mutate({
-      body: { ...values },
+      body: { ...rest, startedAt: startedAt.toISOString(), endedAt: endedAt.toISOString() },
       params: { path: { id: p.id } },
     });
   };
 
   useEffect(() => {
-    f.setValues({ title: data.title });
-    f.resetDirty();
+    const { title, remark, startedAt, endedAt } = data;
+    f.initialize({ title, remark, startedAt: new Date(startedAt), endedAt: new Date(endedAt) });
   }, [isSuccess, data]);
 
   return (
-    <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-      <TextInput label="Name" type="name" {...f.getInputProps("title")} />
+    <Stack gap="xl">
+      <Table>
+        <Table.Tbody>
+          <Table.Tr>
+            <Table.Th>{t.labelParticipant}</Table.Th>
+            <Table.Td>{data.participant.id}</Table.Td>
+            <Table.Td>{data.participant.birthday && time(new Date(data.participant.birthday))}</Table.Td>
+          </Table.Tr>
+          <Table.Tr>
+            <Table.Th>{t.labelStudy}</Table.Th>
+            <Table.Td>{data?.study.id}</Table.Td>
+            <Table.Td>{data?.study.title}</Table.Td>
+          </Table.Tr>
+        </Table.Tbody>
+      </Table>
+
+      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+        <Stack>
+          <TextInput {...f.getInputProps("title")} label={t.labelTitle} />
+          <Group>
+            <DateInput {...f.getInputProps("startedAt")} label={t.labelStartedAt} flex={1} />
+            <DateInput {...f.getInputProps("endedAt")} label={t.labelEndedAt} flex={1} />
+          </Group>
+
+          <Textarea {...f.getInputProps("remark")} label={t.labelRemarks} rows={8} />
 
-      <Button type="submit" fullWidth mt="xl" loading={editQuestionnaireMutation.isPending}>
-        Change
-      </Button>
-    </form>
+          <Button type="submit" loading={editQuestionnaireMutation.isPending}>
+            Change
+          </Button>
+        </Stack>
+      </form>
+      <Divider />
+      <QuestionnaireEntries questionnaire={data} />
+    </Stack>
   );
 }
 

apps/frontend/src/routes/_auth/administration/questionnaires/index.tsx

@@ -1,6 +1,6 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { $api } from "../../../../stores/api";
-import { Button, Table } from "@quassel/ui";
+import { Button, Group, Table } from "@quassel/ui";
 import { $session } from "../../../../stores/session";
 import { useStore } from "@nanostores/react";
 
@@ -16,29 +16,36 @@ function AdministrationQuestionnairesIndex() {
       <Table.Thead>
         <Table.Tr>
           <Table.Th>Id</Table.Th>
-          <Table.Th>Name</Table.Th>
+          <Table.Th>Child</Table.Th>
+          <Table.Th>Title</Table.Th>
+          <Table.Th>Study</Table.Th>
         </Table.Tr>
       </Table.Thead>
       <Table.Tbody>
         {data?.map((q) => (
           <Table.Tr key={q.id}>
             <Table.Td>{q.id}</Table.Td>
+            <Table.Td>{q.participant.id}</Table.Td>
+            <Table.Td>{q.title}</Table.Td>
+            <Table.Td>{q.study.title}</Table.Td>
             <Table.Td>
-              <Button variant="default" renderRoot={(props) => <Link to={`/administration/questionnaires/edit/${q.id}`} {...props} />}>
-                Edit
-              </Button>
-              {sessionStore.role === "ADMIN" && (
-                <Button
-                  variant="default"
-                  onClick={() =>
-                    deleteQuestionnaireMutation.mutate({
-                      params: { path: { id: q.id.toString() } },
-                    })
-                  }
-                >
-                  Delete
+              <Group>
+                <Button variant="default" renderRoot={(props) => <Link to={`/administration/questionnaires/edit/${q.id}`} {...props} />}>
+                  Edit
                 </Button>
-              )}
+                {sessionStore.role === "ADMIN" && (
+                  <Button
+                    variant="default"
+                    onClick={() =>
+                      deleteQuestionnaireMutation.mutate({
+                        params: { path: { id: q.id.toString() } },
+                      })
+                    }
+                  >
+                    Delete
+                  </Button>
+                )}
+              </Group>
             </Table.Td>
           </Table.Tr>
         ))}