/packages/react_ui/src/pages/custom-attributes/:id/edit/page.tsx at 96a66729e88deb254ec34d8813271fe6893e5d01

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

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

import { type MessageInitShape } from "@bufbuild/protobuf";
import { createClient } from "@connectrpc/connect";
import { ArrowDownIcon } from "@radix-ui/react-icons";
import { Button, Box, Container, Flex, TextField } from "@radix-ui/themes";
import { useMutation } from "@tanstack/react-query";
import { type CustomAttributeDefinition } from "@yamori/proto/yamori/workspace/v2/custom_attribute_definition_pb.js";
import { type PutCustomAttributeDefinitionRequestSchema } from "@yamori/proto/yamori/workspace/v2/put_custom_attribute_definition_request_pb.js";
import { type User } from "@yamori/proto/yamori/workspace/v2/user_pb.js";
import { WorkspaceService } from "@yamori/proto/yamori/workspace/v2/workspace_service_pb.js";
import { type FC, use } from "react";
import { useForm } from "react-hook-form";

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

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

export const Title: FC = () => "カスタムフィールド定義編集";

export function hasAccess(loginUser: User): boolean {
	return !!loginUser.permissions?.canUpdateWorkspace;
}

export const NoAccess: FC = () => {
	return (
		<Empty.Root>
			<Empty.Title>編集権限がありません</Empty.Title>
			<Empty.Description>
				ワークスペースに対する操作権限がないためページを表示できません。
			</Empty.Description>
		</Empty.Root>
	);
};

interface BodyProps {
	definition: CustomAttributeDefinition;

	onUpdate?(): void;
}

const Body: FC<BodyProps> = ({ definition, onUpdate }) => {
	const toast = useToast();

	const transport = useConnectTransport();
	const client = createClient(WorkspaceService, transport);

	const creation = useMutation({
		async mutationFn(
			req: MessageInitShape<typeof PutCustomAttributeDefinitionRequestSchema>,
		) {
			const resp = await client.putCustomAttributeDefinition(req);
			if (resp.result.case === "ok") {
				return resp.result.value;
			}

			if (resp.result.case === "duplicatedDisplayName") {
				throw new UserInputError("表示名が同一の定義が既に存在します");
			}

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

			throw new IllegalMessageError(resp);
		},
		onSuccess(def) {
			onUpdate?.();

			toast.open({
				severity: "success",
				title: `カスタムフィールド定義「${def.displayName}」を更新しました`,
				dismissible: true,
				type: "foreground",
			});
		},
	});

	const form = useForm<{
		displayName: string;
	}>({
		defaultValues: {
			displayName: definition.displayName,
		},
		mode: "onBlur",
	});

	return (
		<Flex direction="column" mt="5" gap="5">
			<Flex asChild direction="column" gap="5" mt="2">
				<form
					onSubmit={form.handleSubmit(({ displayName }) => {
						creation.mutate({
							id: definition.id,
							displayName,
						});
					})}
				>
					{creation.error ? (
						<Box position="sticky" top="0" pt="2">
							<ManagedErrorCallout
								style={{ backdropFilter: "blur(2em)" }}
								role="alert"
								error={creation.error}
								actions={
									<Button
										size="1"
										variant="outline"
										type="button"
										onClick={() => void creation.reset()}
									>
										閉じる
									</Button>
								}
								title="更新に失敗しました"
							/>
						</Box>
					) : (
						<div />
					)}
					<FormField.Root>
						<FormField.Label htmlFor="c_displayName">表示名</FormField.Label>
						<Flex direction="column" gap="1">
							<TextField.Root
								readOnly
								autoComplete="off"
								value={definition.displayName}
								aria-label="変更前の表示名"
							/>
							<Flex justify="center">
								<ArrowDownIcon />
							</Flex>
							<TextField.Root
								id="c_displayName"
								disabled={creation.isPending}
								placeholder="社員番号"
								color={form.formState.errors.displayName ? "red" : undefined}
								aria-invalid={!!form.formState.errors.displayName}
								autoComplete="off"
								{...form.register("displayName", {
									setValueAs(value: string) {
										return value.trim();
									},
								})}
							/>
						</Flex>
						<FormField.Description error={form.formState.errors.displayName?.message}>
							カスタムフィールドの名前です。 前後の空白は無視されます。
						</FormField.Description>
					</FormField.Root>
					<Button loading={creation.isPending}>更新</Button>
				</form>
			</Flex>
		</Flex>
	);
};

export interface PageProps {
	definition: CustomAttributeDefinition;

	loginUser: User;
}

export const Page: FC<PageProps> = ({ definition, loginUser }) => {
	const navigation = use(NavigationContext);

	return (
		<LoggedInLayout title={<Title />} user={loginUser}>
			<Container p="2" size="2">
				{hasAccess(loginUser) ? (
					<Body
						definition={definition}
						onUpdate={() => {
							navigation.push("/custom-attributes");
						}}
					/>
				) : (
					<NoAccess />
				)}
			</Container>
		</LoggedInLayout>
	);
};

export interface CreateHrefInput {
	definition: CustomAttributeDefinition;
}

export function createHref({ definition }: CreateHrefInput): string {
	if (!definition.id) {
		return "/custom-attributes/";
	}

	return `/custom-attributes/${definition.id.value}/edit`;
}

export const pattern = new URLPattern({
	pathname: "/custom-attributes/:id/edit",
});