yamori

有給休暇計算を主目的とした簡易勤怠管理システム

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89
  90. 90
  91. 91
  92. 92
  93. 93
  94. 94
  95. 95
  96. 96
  97. 97
  98. 98
  99. 99
  100. 100
  101. 101
  102. 102
  103. 103
  104. 104
  105. 105
  106. 106
  107. 107
  108. 108
  109. 109
  110. 110
  111. 111
  112. 112
  113. 113
  114. 114
  115. 115
  116. 116
  117. 117
  118. 118
  119. 119
  120. 120
// SPDX-FileCopyrightText: 2025 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import { type MessageInitShape } from "@bufbuild/protobuf";
import { createClient } from "@connectrpc/connect";
import { AlertDialog, Button, Flex } from "@radix-ui/themes";
import { useMutation } from "@tanstack/react-query";
import { type UserSchema, type User } from "@yamori/proto/yamori/workspace/v2/user_pb.js";
import { type DeleteUserRequestSchema } from "@yamori/proto/yamori/workspace/v2/delete_user_request_pb.js";
import { WorkspaceService } from "@yamori/proto/yamori/workspace/v2/workspace_service_pb.js";
import { type FC } from "react";

import { useConnectTransport } from "../../contexts/ConnectTransport.tsx";
import { useToast } from "../../contexts/Toast.tsx";
import { IllegalMessageError } from "../../errors/IllegalMessageError.ts";

export interface IsAvailableInput {
	loginUser: User;
	user: User;
}

export function isAvailable({ loginUser, user }: IsAvailableInput): boolean {
	return !!(
		loginUser.id?.value !== user.id?.value &&
		(user.isAdmin ? loginUser.isAdmin : loginUser.permissions?.canDeleteRegularUser)
	);
}

export const Root = AlertDialog.Root;
export const Trigger = AlertDialog.Trigger;

export interface ContentProps {
	user: MessageInitShape<typeof UserSchema>;

	onDeleteStart?(): void;
	onDeleted?(): void;
	onDeleteError?(): void;
}

export const Content: FC<ContentProps> = ({
	user,
	onDeleted,
	onDeleteError,
	onDeleteStart,
}) => {
	const toast = useToast();

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

	const deletion = useMutation({
		async mutationFn(req: MessageInitShape<typeof DeleteUserRequestSchema>) {
			const resp = await client.deleteUser(req);
			if (resp.result.case === "ok") {
				return resp.result.value;
			}

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

			throw new IllegalMessageError(resp);
		},
		onSuccess(def) {
			toast.open({
				severity: "success",
				title: `ユーザ「${def.displayName}」を削除しました`,
				dismissible: true,
				type: "background",
			});

			onDeleted?.();
		},
		onError(error: unknown) {
			// TODO: エラーをユーザに表示する (共通のエラー文字列化処理)
			console.error(error);

			toast.open({
				severity: "danger",
				title: `ユーザの削除に失敗しました`,
				dismissible: true,
				type: "foreground",
			});

			onDeleteError?.();
		},
	});

	return (
		<AlertDialog.Content maxWidth="30em">
			<AlertDialog.Title></AlertDialog.Title>
			<AlertDialog.Description size="2">
				{user.displayName ?? user.name}
				
				<br />
				
			</AlertDialog.Description>
			<Flex gap="3" mt="4" justify="end">
				<AlertDialog.Cancel>
					<Button variant="soft" color="gray">
						
					</Button>
				</AlertDialog.Cancel>
				<AlertDialog.Action>
					<Button
						variant="solid"
						color="red"
						onClick={() => {
							deletion.mutate({ id: user.id });

							onDeleteStart?.();
						}}
					>
						
					</Button>
				</AlertDialog.Action>
			</Flex>
		</AlertDialog.Content>
	);
};