Merge pull request #175 from openscript-ch/31-design-questionnaire-series-creation-interface

31 design questionnaire series creation interface

Author: stampaaaron

apps/frontend/src/routeTree.gen.ts

@@ -0,0 +1,35 @@
+import { Button, Group } from "@quassel/ui";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaireEntries", {
+  formAction: "Continue",
+  backAction: "Back",
+});
+
+function QuestionnaireEntries() {
+  const n = useNavigate();
+  const p = Route.useParams();
+
+  const t = useStore(messages);
+
+  const handleSubmit = () => {
+    n({ to: "/questionnaire/$id/remarks", params: p });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Group>
+        <Link to="/questionnaire/$id/period" params={p}>
+          <Button variant="light">{t.backAction}</Button>
+        </Link>
+        <Button type="submit">{t.formAction}</Button>
+      </Group>
+    </form>
+  );
+}
+
+export const Route = createFileRoute("/_auth/questionnaire/$id/entries")({
+  component: QuestionnaireEntries,
+});

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

@@ -0,0 +1,14 @@
+import { Container } from "@quassel/ui";
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+
+function FormLayout() {
+  return (
+    <Container size="md" mt="xl">
+      <Outlet />
+    </Container>
+  );
+}
+
+export const Route = createFileRoute("/_auth/questionnaire/_form")({
+  component: FormLayout,
+});

apps/frontend/src/routes/_auth/questionnaire/_form.tsx

@@ -0,0 +1,37 @@
+import { Button, Group } from "@quassel/ui";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaireOverview", {
+  title: "Thanks for submitting the questionnaire!",
+  newPeriodAction: "Continue with new period",
+  closeAction: "Close",
+});
+
+function QuestionnaireOverview() {
+  const n = useNavigate();
+  const t = useStore(messages);
+
+  const handleClose = () => {
+    // TODO handle closing quesitonnaire ("logout")
+
+    n({ to: "/questionnaire" });
+  };
+
+  return (
+    <>
+      <h3>{t.title}</h3>
+      <Group>
+        <Link to="/questionnaire/new">
+          <Button variant="outline">{t.newPeriodAction}</Button>
+        </Link>
+        <Button onClick={handleClose}>{t.closeAction}</Button>
+      </Group>
+    </>
+  );
+}
+
+export const Route = createFileRoute("/_auth/questionnaire/_form/$id/overview")({
+  component: QuestionnaireOverview,
+});

apps/frontend/src/routes/_auth/questionnaire/_form/$id/overview.tsx

@@ -0,0 +1,33 @@
+import { Button } from "@quassel/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnairePeriod", {
+  title: "Period",
+  formAction: "Continue",
+});
+
+function QuestionnairePeriod() {
+  const n = useNavigate();
+  const p = Route.useParams();
+
+  const t = useStore(messages);
+
+  const handleSubmit = () => {
+    n({ to: "/questionnaire/$id/entries", params: p });
+  };
+
+  return (
+    <>
+      <h3>{t.title}</h3>
+      <form onSubmit={handleSubmit}>
+        <Button type="submit">{t.formAction}</Button>
+      </form>
+    </>
+  );
+}
+
+export const Route = createFileRoute("/_auth/questionnaire/_form/$id/period")({
+  component: QuestionnairePeriod,
+});

apps/frontend/src/routes/_auth/questionnaire/_form/$id/period.tsx

@@ -0,0 +1,39 @@
+import { Button, Group } from "@quassel/ui";
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaireRemarks", {
+  title: "Add remarks",
+  backAction: "Back",
+  saveAction: "Save",
+  formAction: "Save and complete",
+});
+
+function QuestionnaireRemarks() {
+  const n = useNavigate();
+  const p = Route.useParams();
+
+  const t = useStore(messages);
+
+  const handleSubmit = () => {
+    n({ to: "/questionnaire/$id/overview", params: p });
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <h3>{t.title}</h3>
+      <Group>
+        <Link to="/questionnaire/$id/entries" params={p}>
+          <Button variant="light">{t.backAction}</Button>
+        </Link>
+        <Button variant="outline">{t.saveAction}</Button>
+        <Button type="submit">{t.formAction}</Button>
+      </Group>
+    </form>
+  );
+}
+
+export const Route = createFileRoute("/_auth/questionnaire/_form/$id/remarks")({
+  component: QuestionnaireRemarks,
+});

apps/frontend/src/routes/_auth/questionnaire/_form/$id/remarks.tsx

@@ -0,0 +1,35 @@
+import { Button, Stack, TextInput } from "@quassel/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaire", {
+  title: "Start new questionnaire",
+  formAction: "Continue",
+});
+
+function Questionnaire() {
+  const n = useNavigate();
+  const t = useStore(messages);
+
+  const handleSubmit = () => {
+    n({ to: "/questionnaire/participant" });
+  };
+
+  return (
+    <>
+      <h3>{t.title}</h3>
+      <form onSubmit={handleSubmit}>
+        <Stack>
+          <TextInput />
+          <TextInput />
+          <Button type="submit">{t.formAction}</Button>
+        </Stack>
+      </form>
+    </>
+  );
+}
+
+export const Route = createFileRoute("/_auth/questionnaire/_form/")({
+  component: Questionnaire,
+});

apps/frontend/src/routes/_auth/questionnaire/_form/index.tsx

@@ -0,0 +1,34 @@
+import { Button } from "@quassel/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaireNew", {
+  title: "Create new period of life",
+  formAction: "Create",
+});
+
+function QuestionnaireNew() {
+  const n = useNavigate();
+  const t = useStore(messages);
+
+  const handleSubmit = () => {
+    // TODO create new questionnaire and receive ID
+
+    n({ to: "/questionnaire/$id/entries", params: { id: "123" } });
+  };
+
+  return (
+    <>
+      <h3>{t.title}</h3>
+      <form onSubmit={handleSubmit}>
+        {/* TODO period form */}
+        <Button type="submit">{t.formAction}</Button>
+      </form>
+    </>
+  );
+}
+
+export const Route = createFileRoute("/_auth/questionnaire/_form/new")({
+  component: QuestionnaireNew,
+});

apps/frontend/src/routes/_auth/questionnaire/_form/new.tsx

@@ -0,0 +1,31 @@
+import { Button } from "@quassel/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { i18n } from "../../../../stores/i18n";
+import { useStore } from "@nanostores/react";
+
+export const messages = i18n("questionnaireParticipant", {
+  title: "Participant",
+  formAction: "Continue",
+});
+
+function QuestionnaireParticipant() {
+  const n = useNavigate();
+  const t = useStore(messages);
+
+  const handleSubmit = () => {
+    n({ to: "/questionnaire/new" });
+  };
+
+  return (
+    <>
+      <h3>{t.title}</h3>
+      <form onSubmit={handleSubmit}>
+        <Button type="submit">{t.formAction}</Button>
+      </form>
+    </>
+  );
+}
+
+export const Route = createFileRoute("/_auth/questionnaire/_form/participant")({
+  component: QuestionnaireParticipant,
+});