-
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
-
121
-
122
-
123
-
124
-
125
-
126
-
127
-
128
-
129
-
130
-
131
-
132
-
133
-
134
-
135
-
136
-
137
-
138
-
139
-
140
-
141
-
142
-
143
-
144
-
145
-
146
// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only
import "../../../polyfill.ts";
import * as proto from "@bufbuild/protobuf";
import {
Box,
Button,
Container,
Flex,
Heading,
Section,
Spinner,
Text,
} from "@radix-ui/themes";
import { GetRequestSchema } from "@yamori/proto/yamori/workspace/v1/get_request_pb.js";
import { GetResponseSchema } from "@yamori/proto/yamori/workspace/v1/get_response_pb.js";
import { WorkspaceSchema } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";
import { PaidLeaveProvisionTableSchema } from "@yamori/proto/yamori/paid_leave_provision/v1/paid_leave_provision_table_pb.js";
import { type FC } from "react";
import { ManagedErrorCallout } from "../../../components/ErrorCallout.ts";
import { PaidLeaveProvisionTableView } from "../../../components/PaidLeaveProvisionTableView.tsx";
import { useMethodQuery } from "../../../contexts/Service.tsx";
import { IllegalMessageError } from "../../../errors/IllegalMessageError.ts";
import { Layout } from "../Layout.tsx";
export const Title: FC = () => "有給休暇付与テーブル";
export interface HrefInput {
workspace: proto.MessageShape<typeof WorkspaceSchema>;
}
export function href({ workspace }: HrefInput): string {
if (!workspace.id) {
return "/";
}
return `/${workspace.id.value}/paid-leave-provision-table`;
}
export const pattern = new URLPattern({
pathname: "/:workspace/paid-leave-provision-table",
});
export interface PageProps {
workspace: proto.MessageShape<typeof WorkspaceSchema>;
}
export const Page: FC<PageProps> = ({ workspace }) => {
return (
<Layout workspace={workspace} title={<Title />}>
<Body workspaceID={workspace.id} />
</Layout>
);
};
interface BodyProps {
workspaceID: proto.MessageShape<typeof WorkspaceSchema>["id"];
}
const Body: FC<BodyProps> = ({ workspaceID }) => {
const query = useMethodQuery({
service: "yamori.workspace.v1.WorkspaceService",
method: "Get",
request: {
schema: GetRequestSchema,
data: {
workspaceId: workspaceID,
readMask: {
fields: [WorkspaceSchema.field.paidLeaveProvisionTables.number],
paidLeaveProvisionTableMask: {
fields: [
PaidLeaveProvisionTableSchema.field.id.number,
PaidLeaveProvisionTableSchema.field.displayName.number,
PaidLeaveProvisionTableSchema.field.currentRevision.number,
],
},
},
},
},
response: {
schema: GetResponseSchema,
},
mapResponse(resp) {
switch (resp.result.case) {
case "ok":
return resp.result.value.paidLeaveProvisionTables.sort(
(a, b) =>
(b.currentRevision?.firstProvisionAmountDays ?? 0) -
(a.currentRevision?.firstProvisionAmountDays ?? 0),
);
case undefined:
throw new IllegalMessageError(resp);
default:
throw resp.result.value;
}
},
});
return (
<Container asChild p="2" size="2">
<Flex direction="column" gap="2">
{query.isError && (
<ManagedErrorCallout
error={query.error}
title="一覧の取得に失敗しました"
actions={
<Button
size="1"
loading={query.isFetching}
onClick={() => void query.refetch()}
>
再取得
</Button>
}
/>
)}
{query.isLoading && (
<Flex mt="5" justify="center" align="center" gap="2">
<Spinner />
<Text size="2" color="gray">
テーブルの一覧を取得中...
</Text>
</Flex>
)}
{query.data && (
<Box>
{query.data.map((table) => {
return (
<Section key={table.id?.value}>
<Heading as="h2" mb="2">
{table.displayName}
</Heading>
<PaidLeaveProvisionTableView paidLeaveProvisionTable={table} />
</Section>
);
})}
</Box>
)}
</Flex>
</Container>
);
};