feat: add studies management

Author: openscript

.changeset/sixty-wombats-fetch.md

@@ -0,0 +1,6 @@
+---
+"@quassel/frontend": patch
+"@quassel/backend": patch
+---
+
+Add studies management

apps/frontend/src/routeTree.gen.ts

@@ -33,7 +33,7 @@ function Root() {
     $session.set({});
     n({ to: "/session" });
   };
-  const signOutMutation = $api.useMutation("delete", "/session", { onSettled: () => signOut() });
+  const signOutMutation = $api.useMutation("delete", "/session", { onSettled: signOut });
   const handleSignOut = () => {
     signOutMutation.mutate({});
   };

apps/frontend/src/routes/__root.tsx

@@ -27,11 +27,7 @@ function AdministrationParticipantsEdit() {
       n({ to: "/administration/participants" });
     },
   });
-  const f = useForm<FormValues>({
-    initialValues: {
-      id: 0,
-    },
-  });
+  const f = useForm<FormValues>();
   const handleSubmit = (values: FormValues) => {
     editParticipantMutation.mutate({
       body: { ...values },

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

@@ -23,19 +23,19 @@ function AdministrationParticipantsIndex() {
           </Table.Tr>
         </Table.Thead>
         <Table.Tbody>
-          {participants.data?.map((c) => (
-            <Table.Tr key={c.id}>
-              <Table.Td>{c.id}</Table.Td>
-              <Table.Td>{c.birthday}</Table.Td>
+          {participants.data?.map((p) => (
+            <Table.Tr key={p.id}>
+              <Table.Td>{p.id}</Table.Td>
+              <Table.Td>{p.birthday}</Table.Td>
               <Table.Td>
-                <Button variant="default" renderRoot={(props) => <Link to={`/administration/participants/edit/${c.id}`} {...props} />}>
+                <Button variant="default" renderRoot={(props) => <Link to={`/administration/participants/edit/${p.id}`} {...props} />}>
                   Edit
                 </Button>
                 <Button
                   variant="default"
                   onClick={() =>
                     deleteParticipantMutation.mutate({
-                      params: { path: { id: c.id.toString() } },
+                      params: { path: { id: p.id.toString() } },
                     })
                   }
                 >

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

@@ -27,7 +27,7 @@ function AdministrationParticipantsNew() {
   return (
     <>
       <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
-        <TextInput label="Id" type="text" {...f.getInputProps("id")} defaultValue={undefined} required />
+        <TextInput label="Id" type="number" {...f.getInputProps("id")} defaultValue={undefined} required />
         <TextInput label="Birthday" type="date" {...f.getInputProps("birthday")} required />
 
         <Button type="submit" fullWidth mt="xl" loading={createParticipantMutation.isPending}>

apps/frontend/src/routes/_auth/administration/participants/new.tsx

@@ -1,5 +1,17 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { Title, Paper } from "@quassel/ui";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+function AdministrationStudies() {
+  return (
+    <>
+      <Title>Studies</Title>
+      <Paper my="lg">
+        <Outlet />
+      </Paper>
+    </>
+  );
+}
 
 export const Route = createFileRoute("/_auth/administration/studies")({
-  component: () => <div>Hello /_auth/administration/studies!</div>,
+  component: AdministrationStudies,
 });

apps/frontend/src/routes/_auth/administration/studies.tsx

@@ -0,0 +1,65 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { components } from "../../../../api.gen";
+import { $api } from "../../../../stores/api";
+import { useForm } from "@mantine/form";
+import { useQueryClient, useSuspenseQuery } from "@tanstack/react-query";
+import { Button, TextInput } from "@quassel/ui";
+import { useEffect } from "react";
+
+type FormValues = components["schemas"]["StudyMutationDto"];
+
+function AdministrationStudiesEdit() {
+  const p = Route.useParams();
+  const q = useQueryClient();
+  const study = useSuspenseQuery(
+    $api.queryOptions("get", "/studies/{id}", {
+      params: { path: { id: p.id } },
+    })
+  );
+  const n = useNavigate();
+  const editStudyMutation = $api.useMutation("patch", "/studies/{id}", {
+    onSuccess: () => {
+      q.invalidateQueries(
+        $api.queryOptions("get", "/studies/{id}", {
+          params: { path: { id: p.id } },
+        })
+      );
+      n({ to: "/administration/studies" });
+    },
+  });
+  const f = useForm<FormValues>();
+  const handleSubmit = (values: FormValues) => {
+    editStudyMutation.mutate({
+      body: { ...values },
+      params: { path: { id: p.id } },
+    });
+  };
+
+  useEffect(() => {
+    f.setValues(study.data ?? {});
+    f.resetDirty();
+  }, [study.isSuccess, study.data]);
+
+  return (
+    <>
+      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+        <TextInput label="Id" type="number" {...f.getInputProps("id")} required />
+        <TextInput label="Title" type="text" {...f.getInputProps("title")} required />
+
+        <Button type="submit" fullWidth mt="xl" loading={editStudyMutation.isPending}>
+          Change
+        </Button>
+      </form>
+    </>
+  );
+}
+
+export const Route = createFileRoute("/_auth/administration/studies/edit/$id")({
+  loader: ({ params, context: { queryClient } }) =>
+    queryClient.ensureQueryData(
+      $api.queryOptions("get", "/studies/{id}", {
+        params: { path: { id: params.id } },
+      })
+    ),
+  component: AdministrationStudiesEdit,
+});

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

@@ -0,0 +1,55 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { $api } from "../../../../stores/api";
+import { Button, Table } from "@quassel/ui";
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+function AdministrationStudiesIndex() {
+  const studies = useSuspenseQuery($api.queryOptions("get", "/studies"));
+  const deleteStudyMutation = $api.useMutation("delete", "/studies/{id}", {
+    onSuccess: () => studies.refetch(),
+  });
+
+  return (
+    <>
+      <Button variant="default" renderRoot={(props) => <Link to="/administration/studies/new" {...props} />}>
+        New study
+      </Button>
+      <Table>
+        <Table.Thead>
+          <Table.Tr>
+            <Table.Th>Id</Table.Th>
+            <Table.Th>Title</Table.Th>
+          </Table.Tr>
+        </Table.Thead>
+        <Table.Tbody>
+          {studies.data?.map((s) => (
+            <Table.Tr key={s.id}>
+              <Table.Td>{s.id}</Table.Td>
+              <Table.Td>{s.title}</Table.Td>
+              <Table.Td>
+                <Button variant="default" renderRoot={(props) => <Link to={`/administration/studies/edit/${s.id}`} {...props} />}>
+                  Edit
+                </Button>
+                <Button
+                  variant="default"
+                  onClick={() =>
+                    deleteStudyMutation.mutate({
+                      params: { path: { id: s.id.toString() } },
+                    })
+                  }
+                >
+                  Delete
+                </Button>
+              </Table.Td>
+            </Table.Tr>
+          ))}
+        </Table.Tbody>
+      </Table>
+    </>
+  );
+}
+
+export const Route = createFileRoute("/_auth/administration/studies/")({
+  loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/studies")),
+  component: () => <AdministrationStudiesIndex />,
+});

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

@@ -0,0 +1,44 @@
+import { useForm } from "@mantine/form";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { Button, TextInput } from "@quassel/ui";
+import { $api } from "../../../../stores/api";
+import { components } from "../../../../api.gen";
+
+type FormValues = components["schemas"]["StudyCreationDto"];
+
+function AdministrationStudiesNew() {
+  const n = useNavigate();
+  const createStudyMutation = $api.useMutation("post", "/studies", {
+    onSuccess: () => {
+      n({ to: "/administration/studies" });
+    },
+  });
+  const f = useForm<FormValues>({
+    mode: "uncontrolled",
+    initialValues: {
+      id: 0,
+      title: "",
+      questionnaires: [],
+    },
+  });
+  const handleSubmit = (values: FormValues) => {
+    createStudyMutation.mutate({ body: values });
+  };
+
+  return (
+    <>
+      <form autoComplete="off" onSubmit={f.onSubmit(handleSubmit)}>
+        <TextInput label="Id" type="number" {...f.getInputProps("id")} defaultValue={undefined} required />
+        <TextInput label="Title" type="text" {...f.getInputProps("title")} required />
+
+        <Button type="submit" fullWidth mt="xl" loading={createStudyMutation.isPending}>
+          Create
+        </Button>
+      </form>
+    </>
+  );
+}
+
+export const Route = createFileRoute("/_auth/administration/studies/new")({
+  component: AdministrationStudiesNew,
+});