/packages/react_ui/src/pages/:workspace/leave-definitions/page.tsx at 30b9a80d0d24a981dc9c3f3bb2707832e63a60a5

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

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

import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons";
import { Button, Container, Flex, Separator, Spinner, Text } from "@radix-ui/themes";
import { LeaveSchema } from "@yamori/proto/yamori/work_record/v1/leave_pb.js";
import { DeleteLeaveDefinitionRequestSchema } from "@yamori/proto/yamori/workspace/v1/delete_leave_definition_request_pb.js";
import { DeleteLeaveDefinitionResponseSchema } from "@yamori/proto/yamori/workspace/v1/delete_leave_definition_response_pb.js";
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,
	type Workspace,
} from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";
import { type FC, Fragment, useRef } from "react";

import * as Empty from "../../../components/Empty.ts";
import { ManagedErrorCallout } from "../../../components/ErrorCallout.ts";
import * as HelpDialog from "../../../components/HelpDialog.ts";
import { useMethodQuery, useMethodMutation } from "../../../contexts/Service.tsx";
import { useToast } from "../../../contexts/Toast.tsx";
import { IllegalMessageError } from "../../../errors/IllegalMessageError.ts";

import { Layout } from "../Layout.tsx";
import { ListItem } from "./ListItem.tsx";

interface BodyProps {
	workspace: Workspace;
}

const Body: FC<BodyProps> = ({ workspace: { id } }) => {
	const toast = useToast();

	const definitions = useMethodQuery({
		service: "yamori.workspace.v1.WorkspaceService",
		method: "Get",
		request: {
			schema: GetRequestSchema,
			data: {
				workspaceId: id,
				readMask: {
					fields: [WorkspaceSchema.field.leaveDefinitions.number],
					leaveDefinitionsMask: {
						fields: [
							LeaveSchema.field.id.number,
							LeaveSchema.field.displayName.number,
							LeaveSchema.field.abbreviationName.number,
							LeaveSchema.field.currentRevision.number,
							LeaveSchema.field.revisions.number,
							LeaveSchema.field.deletionKey.number,
						],
					},
				},
			},
		},
		response: {
			schema: GetResponseSchema,
		},
		mapResponse(resp) {
			switch (resp.result.case) {
				case "ok":
					return resp.result.value.leaveDefinitions;
				case undefined:
					throw new IllegalMessageError(resp);
				default:
					throw resp.result.value;
			}
		},
	});

	const deletingToastCleanup = useRef<(() => void) | null>(null);

	const deleteLeaveDefinition = useMethodMutation({
		service: "yamori.workspace.v1.WorkspaceService",
		method: "DeleteLeaveDefinition",
		request: {
			schema: DeleteLeaveDefinitionRequestSchema,
		},
		response: {
			schema: DeleteLeaveDefinitionResponseSchema,
		},
		mapResponse(resp) {
			switch (resp.result.case) {
				case "ok":
					if (!resp.result.value.deleted) {
						throw new IllegalMessageError(resp);
					}

					return resp.result.value;
				case undefined:
					throw new IllegalMessageError(resp);
				default:
					throw resp.result.value;
			}
		},
		options: {
			onMutate() {
				deletingToastCleanup.current = toast.open({
					severity: "info",
					title: "休暇・休業種別を削除しています...",
					onOpenChange(isOpen) {
						if (!isOpen) {
							deletingToastCleanup.current = null;
						}
					},
				});
			},
			onSettled() {
				deletingToastCleanup.current?.();
				deletingToastCleanup.current = null;
			},
			onSuccess({ deleted }) {
				toast.open({
					severity: "success",
					icon: <CheckCircledIcon />,
					title: "休暇・休業種別を削除しました",
					description: `「${deleted?.displayName}」をワークスペースから削除しました。`,
				});

				definitions.refetch();
			},
			onError(error) {
				// TODO: Handle error
				console.error(error);
				toast.open({
					severity: "danger",
					icon: <CrossCircledIcon />,
					title: "休暇・休業種別の削除に失敗しました",
					duration: 10_000,
					dismissible: true,
				});
			},
		},
	});

	if (definitions.data?.length === 0 && !definitions.isError) {
		return (
			<Empty.Root>
				<Empty.Title>データがありません</Empty.Title>
				<Empty.Description>
					このワークスペースには休暇・休業が一つも登録されていません。
				</Empty.Description>
			</Empty.Root>
		);
	}

	return (
		<Flex direction="column" mt="5" gap="5">
			{!!definitions.error && (
				<ManagedErrorCallout
					severity={definitions.data ? "warning" : "danger"}
					title={
						definitions.data ? "一覧の更新に失敗しました" : "一覧の取得に失敗しました"
					}
					error={definitions.error}
					actions={
						<Button
							size="1"
							loading={definitions.isFetching}
							onClick={() => void definitions.refetch()}
						>
							{definitions.data ? "再試行" : "再取得"}
						</Button>
					}
				/>
			)}
			{!definitions.data ? (
				<Flex mt="5" justify="center" align="center" gap="2">
					{definitions.isError ? (
						<Text size="2" color="gray">
							取得エラー
						</Text>
					) : (
						<>
							<Spinner />
							<Text size="2" color="gray">
								一覧を取得中...
							</Text>
						</>
					)}
				</Flex>
			) : (
				<Flex direction="column" gap="4" role="list">
					{definitions.data.map((def, i) => (
						<Fragment key={def.id?.value}>
							{i > 0 && <Separator size="4" />}
							<ListItem
								leaveDefinition={def}
								pending={deleteLeaveDefinition.isPaused}
								pageTitle={<Title />}
								onDelete={() =>
									void deleteLeaveDefinition.mutate({
										workspaceId: id,
										leaveDefinitionId: def.id,
										deletionKey: def.deletionKey,
										readMask: { fields: [LeaveSchema.field.displayName.number] },
									})
								}
							/>
						</Fragment>
					))}
				</Flex>
			)}
		</Flex>
	);
};

export const Title: FC = () => "休暇・休業種別一覧";

export interface PageProps {
	workspace: Workspace;
}

export const Page: FC<PageProps> = ({ workspace }) => {
	return (
		<HelpDialog.Root>
			<Layout
				workspace={workspace}
				title={
					<Flex as="span" align="center" gap="2">
						<Title />
						<HelpDialog.Trigger>このページの説明</HelpDialog.Trigger>
					</Flex>
				}
			>
				<Container p="2" size="2">
					<Body workspace={workspace} />
				</Container>
			</Layout>
			<HelpDialog.Content>
				<HelpDialog.Title>
					<Title />
				</HelpDialog.Title>

				<HelpDialog.Description>
					このワークスペース内で利用可能な休暇と休業の一覧です。
				</HelpDialog.Description>

				<HelpDialog.Paragraph>
					労働者の勤怠記録をつける際は、この一覧にある項目から選ぶことができます。
					労働者やグループの設定ページで「休暇休業の絞り込み」が設定されている場合は、絞り込まれた項目の中からのみ選ぶことができます。
				</HelpDialog.Paragraph>
			</HelpDialog.Content>
		</HelpDialog.Root>
	);
};

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