Skip to content

Commit 27fb8ae

Browse files
openscriptopenscript
committed
feat: add actions to root context
1 parent 5c70525 commit 27fb8ae

File tree

10 files changed

+244
-254
lines changed

10 files changed

+244
-254
lines changed

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@ function AdministrationLayout() {
1616

1717
const matches = useMatches();
1818
const title = matches[matches.length - 2]?.context.title;
19+
const actions = matches[matches.length - 1]?.context.actions;
1920

2021
return (
21-
<ContentShell title={title || messages.get().title}>
22+
<ContentShell title={title || messages.get().title} actions={actions}>
2223
<Outlet />
2324
</ContentShell>
2425
);

‎apps/frontend/src/routes/_auth/administration/carers/index.tsx

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -12,50 +12,52 @@ function AdministrationCarersIndex() {
1212
});
1313

1414
return (
15-
<>
16-
<Button variant="default" renderRoot={(props) => <Link to="/administration/carers/new" {...props} />}>
17-
New carer
18-
</Button>
19-
<Table>
20-
<Table.Thead>
21-
<Table.Tr>
22-
<Table.Th>Id</Table.Th>
23-
<Table.Th>Name</Table.Th>
24-
<Table.Th>Color</Table.Th>
25-
</Table.Tr>
26-
</Table.Thead>
27-
<Table.Tbody>
28-
{carers.data?.map((c) => (
29-
<Table.Tr key={c.id}>
30-
<Table.Td>{c.id}</Table.Td>
31-
<Table.Td>{c.name}</Table.Td>
32-
<Table.Td>{c.color && <ColorSwatch color={c.color} />}</Table.Td>
33-
<Table.Td>
34-
<Button variant="default" renderRoot={(props) => <Link to={`/administration/carers/edit/${c.id}`} {...props} />}>
35-
Edit
15+
<Table>
16+
<Table.Thead>
17+
<Table.Tr>
18+
<Table.Th>Id</Table.Th>
19+
<Table.Th>Name</Table.Th>
20+
<Table.Th>Color</Table.Th>
21+
</Table.Tr>
22+
</Table.Thead>
23+
<Table.Tbody>
24+
{carers.data?.map((c) => (
25+
<Table.Tr key={c.id}>
26+
<Table.Td>{c.id}</Table.Td>
27+
<Table.Td>{c.name}</Table.Td>
28+
<Table.Td>{c.color && <ColorSwatch color={c.color} />}</Table.Td>
29+
<Table.Td>
30+
<Button variant="default" renderRoot={(props) => <Link to={`/administration/carers/edit/${c.id}`} {...props} />}>
31+
Edit
32+
</Button>
33+
{sessionStore.role === "ADMIN" && (
34+
<Button
35+
variant="default"
36+
onClick={() =>
37+
deleteCarerMutation.mutate({
38+
params: { path: { id: c.id.toString() } },
39+
})
40+
}
41+
>
42+
Delete
3643
</Button>
37-
{sessionStore.role === "ADMIN" && (
38-
<Button
39-
variant="default"
40-
onClick={() =>
41-
deleteCarerMutation.mutate({
42-
params: { path: { id: c.id.toString() } },
43-
})
44-
}
45-
>
46-
Delete
47-
</Button>
48-
)}
49-
</Table.Td>
50-
</Table.Tr>
51-
))}
52-
</Table.Tbody>
53-
</Table>
54-
</>
44+
)}
45+
</Table.Td>
46+
</Table.Tr>
47+
))}
48+
</Table.Tbody>
49+
</Table>
5550
);
5651
}
5752

5853
export const Route = createFileRoute("/_auth/administration/carers/")({
54+
beforeLoad: () => ({
55+
actions: [
56+
<Button key="new-carer" variant="default" renderRoot={(props) => <Link to="/administration/carers/new" {...props} />}>
57+
New carer
58+
</Button>,
59+
],
60+
}),
5961
loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/carers")),
6062
component: () => <AdministrationCarersIndex />,
6163
});

‎apps/frontend/src/routes/_auth/administration/languages/index.tsx

Lines changed: 41 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -13,50 +13,52 @@ function AdministrationLanguageIndex() {
1313
});
1414

1515
return (
16-
<>
17-
<Button variant="default" renderRoot={(props) => <Link to="/administration/languages/new" {...props} />}>
18-
New language
19-
</Button>
20-
<Table>
21-
<Table.Thead>
22-
<Table.Tr>
23-
<Table.Th>Id</Table.Th>
24-
<Table.Th>Name</Table.Th>
25-
<Table.Th>IETF BCP 47</Table.Th>
26-
</Table.Tr>
27-
</Table.Thead>
28-
<Table.Tbody>
29-
{languages.data?.map((l) => (
30-
<Table.Tr key={l.id}>
31-
<Table.Td>{l.id}</Table.Td>
32-
<Table.Td>{l.name}</Table.Td>
33-
<Table.Td>{l.ietfBcp47}</Table.Td>
34-
<Table.Td>
35-
<Button variant="default" renderRoot={(props) => <Link to={`/administration/languages/edit/${l.id}`} {...props} />}>
36-
Edit
16+
<Table>
17+
<Table.Thead>
18+
<Table.Tr>
19+
<Table.Th>Id</Table.Th>
20+
<Table.Th>Name</Table.Th>
21+
<Table.Th>IETF BCP 47</Table.Th>
22+
</Table.Tr>
23+
</Table.Thead>
24+
<Table.Tbody>
25+
{languages.data?.map((l) => (
26+
<Table.Tr key={l.id}>
27+
<Table.Td>{l.id}</Table.Td>
28+
<Table.Td>{l.name}</Table.Td>
29+
<Table.Td>{l.ietfBcp47}</Table.Td>
30+
<Table.Td>
31+
<Button variant="default" renderRoot={(props) => <Link to={`/administration/languages/edit/${l.id}`} {...props} />}>
32+
Edit
33+
</Button>
34+
{sessionStore.role === "ADMIN" && (
35+
<Button
36+
variant="default"
37+
onClick={() =>
38+
deleteLanguageMutation.mutate({
39+
params: { path: { id: l.id.toString() } },
40+
})
41+
}
42+
>
43+
Delete
3744
</Button>
38-
{sessionStore.role === "ADMIN" && (
39-
<Button
40-
variant="default"
41-
onClick={() =>
42-
deleteLanguageMutation.mutate({
43-
params: { path: { id: l.id.toString() } },
44-
})
45-
}
46-
>
47-
Delete
48-
</Button>
49-
)}
50-
</Table.Td>
51-
</Table.Tr>
52-
))}
53-
</Table.Tbody>
54-
</Table>
55-
</>
45+
)}
46+
</Table.Td>
47+
</Table.Tr>
48+
))}
49+
</Table.Tbody>
50+
</Table>
5651
);
5752
}
5853

5954
export const Route = createFileRoute("/_auth/administration/languages/")({
55+
beforeLoad: () => ({
56+
actions: [
57+
<Button key="new-language" variant="default" renderRoot={(props) => <Link to="/administration/languages/new" {...props} />}>
58+
New language
59+
</Button>,
60+
],
61+
}),
6062
loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/languages")),
6163
component: AdministrationLanguageIndex,
6264
});

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

Lines changed: 43 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -13,52 +13,54 @@ function AdministrationParticipantsIndex() {
1313
});
1414

1515
return (
16-
<>
17-
<Button variant="default" renderRoot={(props) => <Link to="/administration/participants/new" {...props} />}>
18-
New participant
19-
</Button>
20-
<Button variant="default" renderRoot={(props) => <Link to="/administration/participants/import" {...props} />}>
21-
Import participants
22-
</Button>
23-
<Table>
24-
<Table.Thead>
25-
<Table.Tr>
26-
<Table.Th>Id</Table.Th>
27-
<Table.Th>Birthday</Table.Th>
28-
<Table.Th>Actions</Table.Th>
29-
</Table.Tr>
30-
</Table.Thead>
31-
<Table.Tbody>
32-
{participants.data?.map((p) => (
33-
<Table.Tr key={p.id}>
34-
<Table.Td>{p.id}</Table.Td>
35-
<Table.Td>{p.birthday}</Table.Td>
36-
<Table.Td>
37-
<Button variant="default" renderRoot={(props) => <Link to={`/administration/participants/edit/${p.id}`} {...props} />}>
38-
Edit
16+
<Table>
17+
<Table.Thead>
18+
<Table.Tr>
19+
<Table.Th>Id</Table.Th>
20+
<Table.Th>Birthday</Table.Th>
21+
<Table.Th>Actions</Table.Th>
22+
</Table.Tr>
23+
</Table.Thead>
24+
<Table.Tbody>
25+
{participants.data?.map((p) => (
26+
<Table.Tr key={p.id}>
27+
<Table.Td>{p.id}</Table.Td>
28+
<Table.Td>{p.birthday}</Table.Td>
29+
<Table.Td>
30+
<Button variant="default" renderRoot={(props) => <Link to={`/administration/participants/edit/${p.id}`} {...props} />}>
31+
Edit
32+
</Button>
33+
{sessionStore.role === "ADMIN" && (
34+
<Button
35+
variant="default"
36+
onClick={() =>
37+
deleteParticipantMutation.mutate({
38+
params: { path: { id: p.id.toString() } },
39+
})
40+
}
41+
>
42+
Delete
3943
</Button>
40-
{sessionStore.role === "ADMIN" && (
41-
<Button
42-
variant="default"
43-
onClick={() =>
44-
deleteParticipantMutation.mutate({
45-
params: { path: { id: p.id.toString() } },
46-
})
47-
}
48-
>
49-
Delete
50-
</Button>
51-
)}
52-
</Table.Td>
53-
</Table.Tr>
54-
))}
55-
</Table.Tbody>
56-
</Table>
57-
</>
44+
)}
45+
</Table.Td>
46+
</Table.Tr>
47+
))}
48+
</Table.Tbody>
49+
</Table>
5850
);
5951
}
6052

6153
export const Route = createFileRoute("/_auth/administration/participants/")({
54+
beforeLoad: () => ({
55+
actions: [
56+
<Button key="new-participant" variant="default" renderRoot={(props) => <Link to="/administration/participants/new" {...props} />}>
57+
New participant
58+
</Button>,
59+
<Button key="import-participants" variant="default" renderRoot={(props) => <Link to="/administration/participants/import" {...props} />}>
60+
Import participants
61+
</Button>,
62+
],
63+
}),
6264
loader: ({ context: { queryClient } }) => queryClient.ensureQueryData($api.queryOptions("get", "/participants")),
6365
component: () => <AdministrationParticipantsIndex />,
6466
});

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

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,40 +12,38 @@ function AdministrationQuestionnairesIndex() {
1212
});
1313

1414
return (
15-
<>
16-
<Table>
17-
<Table.Thead>
18-
<Table.Tr>
19-
<Table.Th>Id</Table.Th>
20-
<Table.Th>Name</Table.Th>
21-
</Table.Tr>
22-
</Table.Thead>
23-
<Table.Tbody>
24-
{data?.map((q) => (
25-
<Table.Tr key={q.id}>
26-
<Table.Td>{q.id}</Table.Td>
27-
<Table.Td>
28-
<Button variant="default" renderRoot={(props) => <Link to={`/administration/questionnaires/edit/${q.id}`} {...props} />}>
29-
Edit
15+
<Table>
16+
<Table.Thead>
17+
<Table.Tr>
18+
<Table.Th>Id</Table.Th>
19+
<Table.Th>Name</Table.Th>
20+
</Table.Tr>
21+
</Table.Thead>
22+
<Table.Tbody>
23+
{data?.map((q) => (
24+
<Table.Tr key={q.id}>
25+
<Table.Td>{q.id}</Table.Td>
26+
<Table.Td>
27+
<Button variant="default" renderRoot={(props) => <Link to={`/administration/questionnaires/edit/${q.id}`} {...props} />}>
28+
Edit
29+
</Button>
30+
{sessionStore.role === "ADMIN" && (
31+
<Button
32+
variant="default"
33+
onClick={() =>
34+
deleteQuestionnaireMutation.mutate({
35+
params: { path: { id: q.id.toString() } },
36+
})
37+
}
38+
>
39+
Delete
3040
</Button>
31-
{sessionStore.role === "ADMIN" && (
32-
<Button
33-
variant="default"
34-
onClick={() =>
35-
deleteQuestionnaireMutation.mutate({
36-
params: { path: { id: q.id.toString() } },
37-
})
38-
}
39-
>
40-
Delete
41-
</Button>
42-
)}
43-
</Table.Td>
44-
</Table.Tr>
45-
))}
46-
</Table.Tbody>
47-
</Table>
48-
</>
41+
)}
42+
</Table.Td>
43+
</Table.Tr>
44+
))}
45+
</Table.Tbody>
46+
</Table>
4947
);
5048
}
5149

0 commit comments

Comments
 (0)