/packages/react_ui/src/pages/:workspace/leave-definitions/new/page.tsx at 8e16a06288cd5913b670dcd78c0d66e0d1687d32

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

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

import { CheckCircledIcon } from "@radix-ui/react-icons";
import { Button, Checkbox, Flex, Text, TextField } from "@radix-ui/themes";
import { CreateLeaveDefinitionRequestSchema } from "@yamori/proto/yamori/workspace/v1/create_leave_definition_request_pb.js";
import { CreateLeaveDefinitionResponseSchema } from "@yamori/proto/yamori/workspace/v1/create_leave_definition_response_pb.js";
import { type Workspace } from "@yamori/proto/yamori/workspace/v1/workspace_pb.js";
import { type FC, use } from "react";
import { Controller, useForm } from "react-hook-form";

import * as Empty from "../../../../components/Empty.ts";
import { ManagedErrorCallout } from "../../../../components/ErrorCallout.ts";
import * as FormField from "../../../../components/FormField.ts";
import { useMethodMutation } from "../../../../contexts/Service.tsx";
import { NavigationContext } from "../../../../contexts/Router.tsx";
import { useToast } from "../../../../contexts/Toast.tsx";
import { IllegalMessageError } from "../../../../errors/IllegalMessageError.ts";

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

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

interface BodyProps {
	workspace: Workspace;
}

const Body: FC<BodyProps> = ({ workspace }) => {
	const navigation = use(NavigationContext);

	const toast = useToast();

	const now = new Date();

	const form = useForm<{
		displayName: string;
		isWorkerDeemedToBeWorked: boolean;
		startAt: {
			year: number;
			month: number;
			day: number;
		};
	}>({
		defaultValues: {
			displayName: "",
			isWorkerDeemedToBeWorked: true,
			startAt: {
				year: now.getFullYear(),
				month: now.getMonth() + 1,
				day: now.getDate(),
			},
		},
		mode: "onBlur",
	});

	const creation = useMethodMutation({
		service: "yamori.workspace.v1.WorkspaceService",
		method: "CreateLeaveDefinition",
		request: {
			schema: CreateLeaveDefinitionRequestSchema,
		},
		response: {
			schema: CreateLeaveDefinitionResponseSchema,
		},
		mapResponse(resp) {
			if (resp.result.case === "ok") {
				return resp.result.value;
			}

			if (typeof resp.result.case === "string") {
				throw resp.result.value;
			}

			throw new IllegalMessageError(resp);
		},
		options: {
			onSuccess(leave) {
				toast.open({
					icon: <CheckCircledIcon />,
					severity: "success",
					title: "休暇・休業種別を登録しました",
					description: `「${leave.displayName}」をワークスペースに登録しました。`,
					type: "foreground",
				});
				navigation.push(`/${workspace.id?.value}/leave-definitions`);
			},
		},
	});

	if (!workspace.createLeaveDefinitionKey) {
		return (
			<Empty.Root>
				<Empty.Title>権限がありません</Empty.Title>
				<Empty.Description>
					このワークスペース上に休暇・休業を登録する権限がありません。
				</Empty.Description>
				<Empty.Actions>
					<Button asChild size="3">
						<a href={`/${workspace.id?.value}/leave-definitions`}>一覧へ</a>
					</Button>
				</Empty.Actions>
			</Empty.Root>
		);
	}

	return (
		<Flex asChild direction="column" gap="5" mt="2">
			<form
				onSubmit={form.handleSubmit((values) => {
					creation.mutate({
						workspaceId: workspace.id,
						leaveDefinition: {
							displayName: values.displayName,
							revisions: [
								{
									startAt: values.startAt,
									snapshot: {
										isWorkerDeemedToBeWorked: values.isWorkerDeemedToBeWorked,
									},
								},
							],
						},
						createLeaveDefinitionKey: workspace.createLeaveDefinitionKey,
					});
				})}
			>
				{creation.error ? (
					<ManagedErrorCallout
						error={creation.error}
						title="登録に失敗しました"
						actions={
							<Button
								size="1"
								variant="outline"
								type="button"
								onClick={() => void creation.reset()}
							>
								閉じる
							</Button>
						}
					/>
				) : (
					<div />
				)}
				<FormField.Root>
					<FormField.Label htmlFor="display_name_id">休暇・休業名</FormField.Label>
					<TextField.Root
						id="display_name_id"
						disabled={creation.isPending}
						placeholder="リフレッシュ休暇"
						color={form.formState.errors.displayName ? "red" : undefined}
						aria-invalid={!!form.formState.errors.displayName}
						autoComplete="off"
						{...form.register("displayName", {
							required: "休暇・休業名は必須です",
							setValueAs(value: string) {
								return value.trim();
							},
						})}
					/>
					<FormField.Description error={form.formState.errors.displayName?.message}>
						登録する休暇・休業の名前です。前後の空白は自動的に取り除かれます。
					</FormField.Description>
				</FormField.Root>
				<FormField.Root>
					<FormField.Label>有給休暇計算時の扱い</FormField.Label>
					<Flex asChild gap="2">
						<Text as="label" size="2">
							<Controller
								control={form.control}
								name="isWorkerDeemedToBeWorked"
								render={({ field }) => {
									return (
										<Checkbox
											ref={field.ref}
											disabled={creation.isPending}
											checked={field.value}
											name={field.name}
											onCheckedChange={field.onChange}
											onBlur={field.onBlur}
										/>
									);
								}}
							/>
							出勤したとみなす
						</Text>
					</Flex>
					<FormField.Description>
						有効にすると、有給休暇を付与する際の出勤率計算時にこの休暇・休業を行った日を
						出勤したものとみなします。
					</FormField.Description>
				</FormField.Root>
				<FormField.Root>
					<FormField.Label htmlFor="startAt">運用開始日</FormField.Label>
					{/* TODO: Date picker */}
					<FormField.Description error={form.formState.errors.startAt?.message}>
						この休暇・休業をいつの勤怠記録上から選択できるようにするか指定します。
					</FormField.Description>
				</FormField.Root>
				<Button mt="5" loading={creation.isPending}>
					登録
				</Button>
			</form>
		</Flex>
	);
};

export interface PageProps {
	workspace: Workspace;
}

export const Page: FC<PageProps> = ({ workspace }) => {
	return (
		<Layout workspace={workspace} title={<Title />}>
			<Body workspace={workspace} />
		</Layout>
	);
};

export function createHref(workspace: Workspace): string {
	if (!workspace.id) {
		return "/";
	}

	return `/${workspace.id.value}/leave-definitions/new`;
}

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