Skip to content

Commit 37f64b0

Browse files
stampaaaronstampaaaron
authored
Merge pull request #175 from openscript-ch/31-design-questionnaire-series-creation-interface
31 design questionnaire series creation interface
2 parents 448d2e9 + 1947e07 commit 37f64b0

File tree

11 files changed

+496
-40
lines changed

11 files changed

+496
-40
lines changed

‎apps/frontend/src/routeTree.gen.ts

Lines changed: 236 additions & 31 deletions
Large diffs are not rendered by default.

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Button, Group } from "@quassel/ui";
2+
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
3+
import { i18n } from "../../../../stores/i18n";
4+
import { useStore } from "@nanostores/react";
5+
6+
export const messages = i18n("questionnaireEntries", {
7+
formAction: "Continue",
8+
backAction: "Back",
9+
});
10+
11+
function QuestionnaireEntries() {
12+
const n = useNavigate();
13+
const p = Route.useParams();
14+
15+
const t = useStore(messages);
16+
17+
const handleSubmit = () => {
18+
n({ to: "/questionnaire/$id/remarks", params: p });
19+
};
20+
21+
return (
22+
<form onSubmit={handleSubmit}>
23+
<Group>
24+
<Link to="/questionnaire/$id/period" params={p}>
25+
<Button variant="light">{t.backAction}</Button>
26+
</Link>
27+
<Button type="submit">{t.formAction}</Button>
28+
</Group>
29+
</form>
30+
);
31+
}
32+
33+
export const Route = createFileRoute("/_auth/questionnaire/$id/entries")({
34+
component: QuestionnaireEntries,
35+
});

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Container } from "@quassel/ui";
2+
import { createFileRoute, Outlet } from "@tanstack/react-router";
3+
4+
function FormLayout() {
5+
return (
6+
<Container size="md" mt="xl">
7+
<Outlet />
8+
</Container>
9+
);
10+
}
11+
12+
export const Route = createFileRoute("/_auth/questionnaire/_form")({
13+
component: FormLayout,
14+
});

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Button, Group } from "@quassel/ui";
2+
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
3+
import { i18n } from "../../../../../stores/i18n";
4+
import { useStore } from "@nanostores/react";
5+
6+
export const messages = i18n("questionnaireOverview", {
7+
title: "Thanks for submitting the questionnaire!",
8+
newPeriodAction: "Continue with new period",
9+
closeAction: "Close",
10+
});
11+
12+
function QuestionnaireOverview() {
13+
const n = useNavigate();
14+
const t = useStore(messages);
15+
16+
const handleClose = () => {
17+
// TODO handle closing quesitonnaire ("logout")
18+
19+
n({ to: "/questionnaire" });
20+
};
21+
22+
return (
23+
<>
24+
<h3>{t.title}</h3>
25+
<Group>
26+
<Link to="/questionnaire/new">
27+
<Button variant="outline">{t.newPeriodAction}</Button>
28+
</Link>
29+
<Button onClick={handleClose}>{t.closeAction}</Button>
30+
</Group>
31+
</>
32+
);
33+
}
34+
35+
export const Route = createFileRoute("/_auth/questionnaire/_form/$id/overview")({
36+
component: QuestionnaireOverview,
37+
});

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Button } from "@quassel/ui";
2+
import { createFileRoute, useNavigate } from "@tanstack/react-router";
3+
import { i18n } from "../../../../../stores/i18n";
4+
import { useStore } from "@nanostores/react";
5+
6+
export const messages = i18n("questionnairePeriod", {
7+
title: "Period",
8+
formAction: "Continue",
9+
});
10+
11+
function QuestionnairePeriod() {
12+
const n = useNavigate();
13+
const p = Route.useParams();
14+
15+
const t = useStore(messages);
16+
17+
const handleSubmit = () => {
18+
n({ to: "/questionnaire/$id/entries", params: p });
19+
};
20+
21+
return (
22+
<>
23+
<h3>{t.title}</h3>
24+
<form onSubmit={handleSubmit}>
25+
<Button type="submit">{t.formAction}</Button>
26+
</form>
27+
</>
28+
);
29+
}
30+
31+
export const Route = createFileRoute("/_auth/questionnaire/_form/$id/period")({
32+
component: QuestionnairePeriod,
33+
});

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { Button, Group } from "@quassel/ui";
2+
import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
3+
import { i18n } from "../../../../../stores/i18n";
4+
import { useStore } from "@nanostores/react";
5+
6+
export const messages = i18n("questionnaireRemarks", {
7+
title: "Add remarks",
8+
backAction: "Back",
9+
saveAction: "Save",
10+
formAction: "Save and complete",
11+
});
12+
13+
function QuestionnaireRemarks() {
14+
const n = useNavigate();
15+
const p = Route.useParams();
16+
17+
const t = useStore(messages);
18+
19+
const handleSubmit = () => {
20+
n({ to: "/questionnaire/$id/overview", params: p });
21+
};
22+
23+
return (
24+
<form onSubmit={handleSubmit}>
25+
<h3>{t.title}</h3>
26+
<Group>
27+
<Link to="/questionnaire/$id/entries" params={p}>
28+
<Button variant="light">{t.backAction}</Button>
29+
</Link>
30+
<Button variant="outline">{t.saveAction}</Button>
31+
<Button type="submit">{t.formAction}</Button>
32+
</Group>
33+
</form>
34+
);
35+
}
36+
37+
export const Route = createFileRoute("/_auth/questionnaire/_form/$id/remarks")({
38+
component: QuestionnaireRemarks,
39+
});

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { Button, Stack, TextInput } from "@quassel/ui";
2+
import { createFileRoute, useNavigate } from "@tanstack/react-router";
3+
import { i18n } from "../../../../stores/i18n";
4+
import { useStore } from "@nanostores/react";
5+
6+
export const messages = i18n("questionnaire", {
7+
title: "Start new questionnaire",
8+
formAction: "Continue",
9+
});
10+
11+
function Questionnaire() {
12+
const n = useNavigate();
13+
const t = useStore(messages);
14+
15+
const handleSubmit = () => {
16+
n({ to: "/questionnaire/participant" });
17+
};
18+
19+
return (
20+
<>
21+
<h3>{t.title}</h3>
22+
<form onSubmit={handleSubmit}>
23+
<Stack>
24+
<TextInput />
25+
<TextInput />
26+
<Button type="submit">{t.formAction}</Button>
27+
</Stack>
28+
</form>
29+
</>
30+
);
31+
}
32+
33+
export const Route = createFileRoute("/_auth/questionnaire/_form/")({
34+
component: Questionnaire,
35+
});

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import { Button } from "@quassel/ui";
2+
import { createFileRoute, useNavigate } from "@tanstack/react-router";
3+
import { i18n } from "../../../../stores/i18n";
4+
import { useStore } from "@nanostores/react";
5+
6+
export const messages = i18n("questionnaireNew", {
7+
title: "Create new period of life",
8+
formAction: "Create",
9+
});
10+
11+
function QuestionnaireNew() {
12+
const n = useNavigate();
13+
const t = useStore(messages);
14+
15+
const handleSubmit = () => {
16+
// TODO create new questionnaire and receive ID
17+
18+
n({ to: "/questionnaire/$id/entries", params: { id: "123" } });
19+
};
20+
21+
return (
22+
<>
23+
<h3>{t.title}</h3>
24+
<form onSubmit={handleSubmit}>
25+
{/* TODO period form */}
26+
<Button type="submit">{t.formAction}</Button>
27+
</form>
28+
</>
29+
);
30+
}
31+
32+
export const Route = createFileRoute("/_auth/questionnaire/_form/new")({
33+
component: QuestionnaireNew,
34+
});

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Button } from "@quassel/ui";
2+
import { createFileRoute, useNavigate } from "@tanstack/react-router";
3+
import { i18n } from "../../../../stores/i18n";
4+
import { useStore } from "@nanostores/react";
5+
6+
export const messages = i18n("questionnaireParticipant", {
7+
title: "Participant",
8+
formAction: "Continue",
9+
});
10+
11+
function QuestionnaireParticipant() {
12+
const n = useNavigate();
13+
const t = useStore(messages);
14+
15+
const handleSubmit = () => {
16+
n({ to: "/questionnaire/new" });
17+
};
18+
19+
return (
20+
<>
21+
<h3>{t.title}</h3>
22+
<form onSubmit={handleSubmit}>
23+
<Button type="submit">{t.formAction}</Button>
24+
</form>
25+
</>
26+
);
27+
}
28+
29+
export const Route = createFileRoute("/_auth/questionnaire/_form/participant")({
30+
component: QuestionnaireParticipant,
31+
});

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

Lines changed: 0 additions & 9 deletions
This file was deleted.

0 commit comments

Comments
 (0)