/packages/react_ui/src/pages/custom-attributes/page.tsx at cc29fc63e860e9124b3491ac2cf5a770bf80ce6f

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

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

import { createClient } from "@connectrpc/connect";
import {
	Button,
	Container,
	DropdownMenu,
	Flex,
	Separator,
	Spinner,
	Text,
} from "@radix-ui/themes";
import { useQuery } from "@tanstack/react-query";
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, Fragment, useState } from "react";

import * as Empty from "../../components/Empty.ts";
import * as HelpDialog from "../../components/HelpDialog.ts";
import { ManagedErrorCallout } from "../../components/ErrorCallout.ts";
import { useConnectTransport } from "../../contexts/ConnectTransport.tsx";
import { IllegalMessageError } from "../../errors/IllegalMessageError.ts";

import * as edit from "./:id/edit/page.tsx";

import { LoggedInLayout } from "../LoggedInLayout.tsx";
import * as DeleteDialog from "./DeleteDialog.tsx";

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

interface BodyProps {
	canMutate: boolean;
}

const Body: FC<BodyProps> = ({ canMutate }) => {
	const transport = useConnectTransport();
	const client = createClient(WorkspaceService, transport);

	const [isDeleting, setIsDeleting] = useState(false);

	const defs = useQuery({
		queryKey: [
			WorkspaceService.typeName,
			WorkspaceService.method.get.name,
			import.meta.url,
		],
		async queryFn() {
			const resp = await client.get({});
			if (resp.result.case === "ok") {
				return resp.result.value.customAttributeDefinition;
			}

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

			throw new IllegalMessageError(resp);
		},
	});

	if (!defs.data || !defs.data.length) {
		if (defs.error) {
			return (
				<Empty.Root>
					<Empty.Title>カスタムフィールド定義の一覧を読み込めませんでした</Empty.Title>
					<ManagedErrorCallout
						error={defs.error}
						title="カスタムフィールド定義の一覧取得中にエラーが発生しました"
					/>
					<Empty.Actions>
						<Button loading={defs.isFetching} onClick={() => void defs.refetch()}>
							再取得
						</Button>
					</Empty.Actions>
				</Empty.Root>
			);
		}

		if (defs.isFetching) {
			return (
				<Flex mt="5" justify="center" align="center" gap="2">
					<Spinner />
					<Text size="2" color="gray">
						一覧を取得中...
					</Text>
				</Flex>
			);
		}

		// TODO: 新規作成画面への導線
		return (
			<Empty.Root>
				<Empty.Title>カスタムフィールドは定義されていません</Empty.Title>
				<Empty.Description>
					システムにカスタムフィールドの定義は登録されていません。
				</Empty.Description>
				<Empty.Description>
					社員 ID などの属性を紐づける場合はカスタムフィールドを定義してください。
				</Empty.Description>
			</Empty.Root>
		);
	}

	return (
		<Flex direction="column" mt="5" gap="5">
			{defs.error && (
				<ManagedErrorCallout
					severity="warning"
					title="一覧の更新取得に失敗しました"
					error={defs.error}
					actions={
						<Button
							size="1"
							loading={defs.isFetching}
							onClick={() => void defs.refetch()}
						>
							再試行
						</Button>
					}
				/>
			)}
			<Flex direction="column" gap="4" role="list">
				{defs.data.map((def, i) => {
					if (!def.id) {
						return null;
					}

					return (
						<Fragment key={def.id.value}>
							{i > 0 && <Separator size="4" />}
							<DeleteDialog.Root>
								<DropdownMenu.Root>
									<Flex gap="2" align="center" justify="between" role="listitem">
										<Text weight="bold">{def.displayName}</Text>
										{canMutate && (
											<DropdownMenu.Trigger disabled={isDeleting}>
												<Button variant="soft">
													操作
													<DropdownMenu.TriggerIcon />
												</Button>
											</DropdownMenu.Trigger>
										)}
									</Flex>
									<DropdownMenu.Content>
										<DropdownMenu.Item asChild>
											<a href={edit.createHref({ definition: def })}>編集</a>
										</DropdownMenu.Item>
										<DeleteDialog.Trigger>
											<DropdownMenu.Item color="red">削除</DropdownMenu.Item>
										</DeleteDialog.Trigger>
									</DropdownMenu.Content>
									<DeleteDialog.Content
										id={def.id}
										onDeleteStart={() => void setIsDeleting(true)}
										onDeleted={() => {
											setIsDeleting(false);
											defs.refetch();
										}}
										onDeleteError={() => void setIsDeleting(false)}
									/>
								</DropdownMenu.Root>
							</DeleteDialog.Root>
						</Fragment>
					);
				})}
			</Flex>
		</Flex>
	);
};

export interface PageProps {
	loginUser: User;
}

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

				<HelpDialog.Description>
					システムに登録されているユーザの一覧です。
				</HelpDialog.Description>

				<HelpDialog.Paragraph>
					システム上で定義されているカスタムフィールドの一覧です。
					ここで定義されているカスタムフィールドはユーザ情報内の項目として編集できるようになります。
				</HelpDialog.Paragraph>
			</HelpDialog.Content>
		</HelpDialog.Root>
	);
};

export function createHref(): string {
	return "/custom-attributes";
}

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