-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
-
32
-
33
-
34
-
35
-
36
-
37
-
38
-
39
-
40
-
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
-
62
-
63
-
64
-
65
-
66
-
67
-
68
-
69
-
70
-
71
-
72
-
73
-
74
-
75
-
76
-
77
-
78
-
79
-
80
-
81
-
82
-
83
-
84
-
85
-
86
-
87
-
88
-
89
-
90
-
91
-
92
-
93
-
94
-
95
-
96
-
97
-
98
-
99
-
100
-
101
-
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
-
114
-
115
-
116
-
117
-
118
-
119
-
120
// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only
import "../../../polyfill.ts";
import { Button, Flex, Heading, Text } from "@radix-ui/themes";
import { type Workspace } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";
import { ListRequestSchema } from "@yamori/proto/yamori/worker/v1/list_request_pb.js";
import { ListResponseSchema } from "@yamori/proto/yamori/worker/v1/list_response_pb.js";
import { type FC } from "react";
import { ManagedErrorCallout } from "../../../components/ErrorCallout.ts";
import { useMethodQuery } from "../../../contexts/Service.tsx";
import { IllegalMessageError } from "../../../errors/IllegalMessageError.ts";
import { Layout } from "../Layout.tsx";
import { List } from "./List.tsx";
function useWorkerList(workspace: Workspace) {
return useMethodQuery({
service: "yamori.worker.v1.WorkerService",
method: "List",
request: {
schema: ListRequestSchema,
data: {
workspaceId: workspace.id!,
},
},
response: {
schema: ListResponseSchema,
},
mapResponse(resp) {
switch (resp.result.case) {
case "ok":
return resp.result.value;
case undefined:
throw new IllegalMessageError(resp);
default:
throw resp.result.value;
}
},
});
}
interface BodyProps {
workspace: Workspace;
workers: ReturnType<typeof useWorkerList>;
}
const Body: FC<BodyProps> = ({ workers, workspace }) => {
if (workers.fetchStatus === "idle" && workers.data?.workers.length === 0) {
return (
<Flex mt="7" direction="column" align="center" gap="3">
<Heading as="h2" size="4">
労働者が登録されていません
</Heading>
<Text as="p" size="2" align="center">
ワークスペース内に労働者がまだ一人も登録されていません。
</Text>
<Button asChild mt="4" size="3">
<a href={`/${workspace.id?.value}/workers/new`}>登録する</a>
</Button>
</Flex>
);
}
return (
<Flex direction="column" mt="5" gap="5">
{!!workers.error && (
<ManagedErrorCallout
severity={workers.data ? "warning" : "danger"}
title={workers.data ? "一覧の更新に失敗しました" : "一覧の読込に失敗しました"}
error={workers.error}
actions={
<Button
size="1"
loading={workers.isFetching}
onClick={() => void workers.refetch()}
>
{workers.data ? "再試行" : "再取得"}
</Button>
}
/>
)}
{!workers.data ? <List loading /> : <List workers={workers.data.workers} />}
</Flex>
);
};
export interface PageProps {
workspace: Workspace;
}
export const Page: FC<PageProps> = ({ workspace }) => {
const list = useWorkerList(workspace);
return (
<Layout
workspace={workspace}
title="労働者一覧"
actions={
<Button
variant="soft"
loading={list.isFetching}
onClick={() => void list.refetch()}
>
更新
</Button>
}
>
<Body workspace={workspace} workers={list} />
</Layout>
);
};
export const pattern = new URLPattern({
pathname: "/:workspace/workers",
});