1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85
86. 86
87. 87
88. 88
89. 89
90. 90
91. 91
92. 92
93. 93
94. 94
95. 95
96. 96
97. 97
98. 98
99. 99
100. 100
101. 101
102. 102
103. 103
104. 104
105. 105
106. 106
107. 107
108. 108
109. 109
110. 110
111. 111
112. 112
113. 113
114. 114
115. 115
116. 116
117. 117
118. 118
119. 119
120. 120
121. 121
122. 122
123. 123
124. 124
125. 125
126. 126
127. 127
128. 128
129. 129
130. 130
131. 131
132. 132
133. 133

// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import "../../../polyfill.ts";

import { Button, Container, Flex } 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 { WorkerSchema } from "@yamori/proto/yamori/worker/v1/worker_pb.js";
import { type FC } from "react";

import * as Empty from "../../../components/Empty.ts";
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!,
				readMask: {
					fields: [WorkerSchema.field.id.number, WorkerSchema.field.displayName.number],
				},
			},
		},
		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 (
			<Empty.Root>
				<Empty.Title>労働者が登録されていません</Empty.Title>
				<Empty.Description>
					ワークスペース内に労働者がまだ一人も登録されていません。
				</Empty.Description>
				{workspace.workerAddKey && (
					<Empty.Actions>
						<Button asChild size="3">
							<a href={`/${workspace.id?.value}/workers/new`}>登録する</a>
						</Button>
					</Empty.Actions>
				)}
			</Empty.Root>
		);
	}

	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 workspace={workspace} loading />
			) : (
				<List workspace={workspace} 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>
			}
		>
			<Container p="2" size="2">
				<Body workspace={workspace} workers={list} />
			</Container>
		</Layout>
	);
};

export const pattern = new URLPattern({
	pathname: "/:workspace/workers",
});