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

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

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, type ReactElement } from "react";

import { useMethodQuery } from "../../contexts/Service.tsx";
import { IllegalMessageError } from "../../errors/IllegalMessageError.ts";

import { ManagedErrorCallout } from "../ErrorCallout.ts";

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;
			}
		},
	});
}

export interface PageProps {
	workspace: Workspace;

	createButton: ReactElement;
}

export const Page: FC<PageProps> = ({ workspace, createButton }) => {
	const list = useWorkerList(workspace);

	if (list.fetchStatus === "idle" && list.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">
					{createButton}
				</Button>
			</Flex>
		);
	}

	return (
		<Flex direction="column" mt="5" gap="5">
			{!!list.error && (
				<ManagedErrorCallout
					severity={list.data ? "warning" : "danger"}
					title={list.data ? "一覧の更新に失敗しました" : "一覧の読込に失敗しました"}
					error={list.error}
					actions={
						<Button
							size="1"
							loading={list.isFetching}
							onClick={() => void list.refetch()}
						>
							{list.data ? "再試行" : "再取得"}
						</Button>
					}
				/>
			)}
			{!list.data ? <List loading /> : <List workers={list.data.workers} />}
		</Flex>
	);
};

export const Title: FC = () => "労働者一覧";

export const Actions: FC<Pick<PageProps, "workspace">> = ({ workspace }) => {
	const list = useWorkerList(workspace);

	return (
		<Button variant="soft" loading={list.isFetching} onClick={() => void list.refetch()}>
			更新
		</Button>
	);
};