forked from baron/baron-sso
599 lines
24 KiB
TypeScript
599 lines
24 KiB
TypeScript
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import type { AxiosError } from "axios";
|
|
import {
|
|
Crown,
|
|
Plus,
|
|
Search,
|
|
ShieldCheck,
|
|
Trash2,
|
|
UserPlus,
|
|
Users,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
import { useAuth } from "react-oidc-context";
|
|
import { useParams } from "react-router-dom";
|
|
import { toast } from "sonner";
|
|
import { Badge } from "../../../components/ui/badge";
|
|
import { Button } from "../../../components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "../../../components/ui/card";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "../../../components/ui/dialog";
|
|
import { Input } from "../../../components/ui/input";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "../../../components/ui/table";
|
|
import {
|
|
addTenantAdmin,
|
|
addTenantOwner,
|
|
fetchTenantAdmins,
|
|
fetchTenantOwners,
|
|
fetchUsers,
|
|
removeTenantAdmin,
|
|
removeTenantOwner,
|
|
} from "../../../lib/adminApi";
|
|
import { t } from "../../../lib/i18n";
|
|
|
|
type DialogMode = "owner" | "admin";
|
|
|
|
export function TenantAdminsAndOwnersTab() {
|
|
const auth = useAuth();
|
|
const currentUserId = auth.user?.profile.sub;
|
|
const { tenantId } = useParams<{ tenantId: string }>();
|
|
const queryClient = useQueryClient();
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [dialogMode, setDialogMode] = useState<DialogMode | null>(null);
|
|
|
|
if (!tenantId) return null;
|
|
|
|
const ownersQuery = useQuery({
|
|
queryKey: ["tenant-owners", tenantId],
|
|
queryFn: () => fetchTenantOwners(tenantId),
|
|
enabled: !!tenantId,
|
|
});
|
|
|
|
const adminsQuery = useQuery({
|
|
queryKey: ["tenant-admins", tenantId],
|
|
queryFn: () => fetchTenantAdmins(tenantId),
|
|
enabled: !!tenantId,
|
|
});
|
|
|
|
const usersQuery = useQuery({
|
|
queryKey: ["admin-users-search", searchTerm],
|
|
queryFn: () => fetchUsers(20, 0, searchTerm),
|
|
enabled: dialogMode !== null && searchTerm.length >= 2,
|
|
});
|
|
|
|
const addOwnerMutation = useMutation({
|
|
mutationFn: (userId: string) => addTenantOwner(tenantId, userId),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["tenant-owners", tenantId] });
|
|
toast.success(
|
|
t("msg.admin.tenants.owners.add_success", "소유자가 추가되었습니다."),
|
|
);
|
|
setSearchTerm("");
|
|
},
|
|
onError: (err: AxiosError<{ error?: string }>) => {
|
|
toast.error(
|
|
err.response?.data?.error ||
|
|
t("msg.common.error", "오류가 발생했습니다."),
|
|
);
|
|
},
|
|
});
|
|
|
|
const removeOwnerMutation = useMutation({
|
|
mutationFn: (userId: string) => removeTenantOwner(tenantId, userId),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["tenant-owners", tenantId] });
|
|
toast.success(
|
|
t(
|
|
"msg.admin.tenants.owners.remove_success",
|
|
"소유자 권한이 회수되었습니다.",
|
|
),
|
|
);
|
|
},
|
|
onError: (err: AxiosError<{ error?: string }>) => {
|
|
toast.error(
|
|
err.response?.data?.error ||
|
|
t("msg.common.error", "오류가 발생했습니다."),
|
|
);
|
|
},
|
|
});
|
|
|
|
const addAdminMutation = useMutation({
|
|
mutationFn: (userId: string) => addTenantAdmin(tenantId, userId),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["tenant-admins", tenantId] });
|
|
toast.success(
|
|
t("msg.admin.tenants.admins.add_success", "관리자가 추가되었습니다."),
|
|
);
|
|
setSearchTerm("");
|
|
},
|
|
onError: (err: AxiosError<{ error?: string }>) => {
|
|
toast.error(
|
|
err.response?.data?.error ||
|
|
t("msg.common.error", "오류가 발생했습니다."),
|
|
);
|
|
},
|
|
});
|
|
|
|
const removeAdminMutation = useMutation({
|
|
mutationFn: (userId: string) => removeTenantAdmin(tenantId, userId),
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: ["tenant-admins", tenantId] });
|
|
toast.success(
|
|
t("msg.admin.tenants.admins.remove_success", "권한이 회수되었습니다."),
|
|
);
|
|
},
|
|
onError: (err: AxiosError<{ error?: string }>) => {
|
|
toast.error(
|
|
err.response?.data?.error ||
|
|
t("msg.common.error", "오류가 발생했습니다."),
|
|
);
|
|
},
|
|
});
|
|
|
|
const handleAddUser = (userId: string) => {
|
|
if (dialogMode === "owner") {
|
|
addOwnerMutation.mutate(userId);
|
|
} else if (dialogMode === "admin") {
|
|
addAdminMutation.mutate(userId);
|
|
}
|
|
};
|
|
|
|
const handleRemoveOwner = (userId: string, userName: string) => {
|
|
if (
|
|
window.confirm(
|
|
t(
|
|
"msg.admin.tenants.owners.remove_confirm",
|
|
"소유자를 삭제하시겠습니까?",
|
|
{ name: userName },
|
|
),
|
|
)
|
|
) {
|
|
removeOwnerMutation.mutate(userId);
|
|
}
|
|
};
|
|
|
|
const handleRemoveAdmin = (userId: string, userName: string) => {
|
|
if (
|
|
window.confirm(
|
|
t(
|
|
"msg.admin.tenants.admins.remove_confirm",
|
|
"관리자를 삭제하시겠습니까?",
|
|
{ name: userName },
|
|
),
|
|
)
|
|
) {
|
|
removeAdminMutation.mutate(userId);
|
|
}
|
|
};
|
|
|
|
const currentOwners = ownersQuery.data || [];
|
|
const currentAdmins = adminsQuery.data || [];
|
|
const searchResults = usersQuery.data?.items || [];
|
|
const isDialogOpen = dialogMode !== null;
|
|
|
|
const dialogTitle =
|
|
dialogMode === "owner"
|
|
? t("ui.admin.tenants.owners.dialog_title", "새 소유자 추가")
|
|
: t("ui.admin.tenants.admins.dialog_title", "새 관리자 추가");
|
|
|
|
const dialogDescription =
|
|
dialogMode === "owner"
|
|
? t(
|
|
"ui.admin.tenants.owners.dialog_description",
|
|
"이름 또는 이메일로 사용자를 검색하세요.",
|
|
)
|
|
: t(
|
|
"ui.admin.tenants.admins.dialog_description",
|
|
"이름 또는 이메일로 사용자를 검색하세요.",
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-8 mt-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
|
|
<div className="flex-1 flex flex-col lg:flex-row gap-8 min-h-0">
|
|
{/* Owners Card */}
|
|
<Card className="flex-1 flex flex-col min-h-0 border-none shadow-sm bg-[var(--color-panel)]">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-7 flex-shrink-0">
|
|
<div className="space-y-1">
|
|
<CardTitle className="text-2xl font-bold flex items-center gap-2">
|
|
<Crown className="h-6 w-6 text-yellow-500" />
|
|
{t("ui.admin.tenants.owners.title", "테넌트 소유자")}
|
|
</CardTitle>
|
|
<CardDescription className="text-muted-foreground">
|
|
{t(
|
|
"msg.admin.tenants.owners.subtitle",
|
|
"이 테넌트의 최상위 권한을 가진 소유자(조직장) 목록입니다.",
|
|
)}
|
|
</CardDescription>
|
|
</div>
|
|
<Button
|
|
className="bg-primary text-primary-foreground hover:bg-primary/90"
|
|
onClick={() => setDialogMode("owner")}
|
|
>
|
|
<UserPlus className="mr-2 h-4 w-4" />
|
|
{t("ui.admin.tenants.owners.add_button", "소유자 추가")}
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 flex flex-col min-h-0 pt-0">
|
|
<div className="flex-1 rounded-md border overflow-hidden flex flex-col">
|
|
<div className="flex-1 overflow-auto relative custom-scrollbar">
|
|
<Table>
|
|
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
|
|
<TableRow>
|
|
<TableHead className="w-[250px] font-bold">
|
|
{t("ui.admin.tenants.owners.table_name", "이름")}
|
|
</TableHead>
|
|
<TableHead className="font-bold">
|
|
{t("ui.admin.tenants.owners.table_email", "이메일")}
|
|
</TableHead>
|
|
<TableHead className="text-right font-bold w-[100px]">
|
|
{t("ui.admin.tenants.owners.table_actions", "액션")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{ownersQuery.isLoading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={3} className="h-32 text-center">
|
|
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mx-auto" />
|
|
</TableCell>
|
|
</TableRow>
|
|
) : currentOwners.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={3}
|
|
className="h-32 text-center text-muted-foreground"
|
|
>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<Users className="h-8 w-8 opacity-20" />
|
|
<p>
|
|
{t(
|
|
"msg.admin.tenants.owners.empty",
|
|
"등록된 소유자가 없습니다.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
currentOwners.map((owner) => (
|
|
<TableRow
|
|
key={owner.id}
|
|
className="hover:bg-muted/30 transition-colors group"
|
|
>
|
|
<TableCell className="font-medium">
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-8 w-8 rounded-lg bg-secondary flex items-center justify-center text-secondary-foreground font-bold text-xs">
|
|
{owner.name.charAt(0)}
|
|
</div>
|
|
<span>{owner.name}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground italic">
|
|
{owner.email}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={`opacity-0 group-hover:opacity-100 transition-all ${
|
|
owner.id === currentUserId ||
|
|
currentOwners.length <= 1
|
|
? "opacity-50 cursor-not-allowed"
|
|
: "text-destructive hover:text-destructive hover:bg-destructive/10"
|
|
}`}
|
|
onClick={() =>
|
|
handleRemoveOwner(owner.id, owner.name)
|
|
}
|
|
disabled={
|
|
removeOwnerMutation.isPending ||
|
|
owner.id === currentUserId ||
|
|
currentOwners.length <= 1
|
|
}
|
|
title={
|
|
owner.id === currentUserId
|
|
? t(
|
|
"msg.admin.tenants.owners.remove_self",
|
|
"본인의 권한은 회수할 수 없습니다.",
|
|
)
|
|
: currentOwners.length <= 1
|
|
? t(
|
|
"msg.admin.tenants.owners.remove_last",
|
|
"마지막 소유자는 회수할 수 없습니다.",
|
|
)
|
|
: t(
|
|
"ui.admin.tenants.owners.remove_title",
|
|
"소유자 권한 회수",
|
|
)
|
|
}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Admins Card */}
|
|
<Card className="flex-1 flex flex-col min-h-0 border-none shadow-sm bg-[var(--color-panel)]">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-7 flex-shrink-0">
|
|
<div className="space-y-1">
|
|
<CardTitle className="text-2xl font-bold flex items-center gap-2">
|
|
<ShieldCheck className="h-6 w-6 text-primary" />
|
|
{t("ui.admin.tenants.admins.title", "테넌트 관리자")}
|
|
</CardTitle>
|
|
<CardDescription className="text-muted-foreground">
|
|
{t(
|
|
"msg.admin.tenants.admins.subtitle",
|
|
"이 테넌트의 자원을 관리할 수 있는 사용자 목록입니다.",
|
|
)}
|
|
</CardDescription>
|
|
</div>
|
|
<Button
|
|
className="bg-primary text-primary-foreground hover:bg-primary/90"
|
|
onClick={() => setDialogMode("admin")}
|
|
>
|
|
<UserPlus className="mr-2 h-4 w-4" />
|
|
{t("ui.admin.tenants.admins.add_button", "관리자 추가")}
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent className="flex-1 flex flex-col min-h-0 pt-0">
|
|
<div className="flex-1 rounded-md border overflow-hidden flex flex-col">
|
|
<div className="flex-1 overflow-auto relative custom-scrollbar">
|
|
<Table>
|
|
<TableHeader className="sticky top-0 bg-muted/90 backdrop-blur z-10 shadow-sm">
|
|
<TableRow>
|
|
<TableHead className="w-[250px] font-bold">
|
|
{t("ui.admin.tenants.admins.table_name", "이름")}
|
|
</TableHead>
|
|
<TableHead className="font-bold">
|
|
{t("ui.admin.tenants.admins.table_email", "이메일")}
|
|
</TableHead>
|
|
<TableHead className="text-right font-bold w-[100px]">
|
|
{t("ui.admin.tenants.admins.table_actions", "액션")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{adminsQuery.isLoading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={3} className="h-32 text-center">
|
|
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mx-auto" />
|
|
</TableCell>
|
|
</TableRow>
|
|
) : currentAdmins.length === 0 ? (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={3}
|
|
className="h-32 text-center text-muted-foreground"
|
|
>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<Users className="h-8 w-8 opacity-20" />
|
|
<p>
|
|
{t(
|
|
"msg.admin.tenants.admins.empty",
|
|
"등록된 관리자가 없습니다.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : (
|
|
currentAdmins.map((admin) => (
|
|
<TableRow
|
|
key={admin.id}
|
|
className="hover:bg-muted/30 transition-colors group"
|
|
>
|
|
<TableCell className="font-medium">
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-8 w-8 rounded-lg bg-secondary flex items-center justify-center text-secondary-foreground font-bold text-xs">
|
|
{admin.name.charAt(0)}
|
|
</div>
|
|
<span>{admin.name}</span>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-muted-foreground italic">
|
|
{admin.email}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={`opacity-0 group-hover:opacity-100 transition-all ${
|
|
admin.id === currentUserId ||
|
|
currentAdmins.length <= 1
|
|
? "opacity-50 cursor-not-allowed"
|
|
: "text-destructive hover:text-destructive hover:bg-destructive/10"
|
|
}`}
|
|
onClick={() =>
|
|
handleRemoveAdmin(admin.id, admin.name)
|
|
}
|
|
disabled={
|
|
removeAdminMutation.isPending ||
|
|
admin.id === currentUserId ||
|
|
currentAdmins.length <= 1
|
|
}
|
|
title={
|
|
admin.id === currentUserId
|
|
? t(
|
|
"msg.admin.tenants.admins.remove_self",
|
|
"본인의 권한은 회수할 수 없습니다.",
|
|
)
|
|
: currentAdmins.length <= 1
|
|
? t(
|
|
"msg.admin.tenants.admins.remove_last",
|
|
"마지막 관리자는 회수할 수 없습니다.",
|
|
)
|
|
: t(
|
|
"ui.admin.tenants.admins.remove_title",
|
|
"관리자 권한 회수",
|
|
)
|
|
}
|
|
>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Common Dialog for adding users */}
|
|
<Dialog
|
|
open={isDialogOpen}
|
|
onOpenChange={(open) => {
|
|
if (!open) {
|
|
setDialogMode(null);
|
|
setSearchTerm("");
|
|
}
|
|
}}
|
|
>
|
|
<DialogContent className="sm:max-w-[500px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-xl font-bold">
|
|
{dialogTitle}
|
|
</DialogTitle>
|
|
<DialogDescription>{dialogDescription}</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="py-4 space-y-4">
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder={t(
|
|
"ui.admin.tenants.admins.dialog_search_placeholder",
|
|
"사용자 검색 (최소 2자)...",
|
|
)}
|
|
className="pl-10 h-11"
|
|
autoFocus
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="max-h-[300px] overflow-y-auto rounded-lg border border-border">
|
|
{searchTerm.length < 2 ? (
|
|
<div className="p-10 text-center text-muted-foreground flex flex-col items-center gap-2">
|
|
<Search className="h-8 w-8 opacity-20" />
|
|
<p className="text-sm">
|
|
{t(
|
|
"ui.admin.tenants.admins.dialog_search_hint",
|
|
"검색어를 입력해 주세요.",
|
|
)}
|
|
</p>
|
|
</div>
|
|
) : usersQuery.isLoading ? (
|
|
<div className="p-10 text-center">
|
|
<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary mx-auto" />
|
|
</div>
|
|
) : searchResults.length === 0 ? (
|
|
<div className="p-10 text-center text-muted-foreground">
|
|
{t(
|
|
"ui.admin.tenants.admins.dialog_no_results",
|
|
"검색 결과가 없습니다.",
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="divide-y divide-border">
|
|
{searchResults.map((user) => {
|
|
const isAlreadyOwner = currentOwners.some(
|
|
(o) => o.id === user.id,
|
|
);
|
|
const isAlreadyAdmin = currentAdmins.some(
|
|
(a) => a.id === user.id,
|
|
);
|
|
const isAlreadyMember =
|
|
dialogMode === "owner" ? isAlreadyOwner : isAlreadyAdmin;
|
|
|
|
return (
|
|
<div
|
|
key={user.id}
|
|
className="flex items-center justify-between p-3 hover:bg-muted/50 transition-colors"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div className="h-9 w-9 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xs">
|
|
{user.name.charAt(0)}
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-sm font-medium">
|
|
{user.name}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground">
|
|
{user.email}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant={isAlreadyMember ? "ghost" : "outline"}
|
|
disabled={
|
|
isAlreadyMember ||
|
|
addOwnerMutation.isPending ||
|
|
addAdminMutation.isPending
|
|
}
|
|
onClick={() => handleAddUser(user.id)}
|
|
>
|
|
{isAlreadyMember ? (
|
|
<Badge variant="secondary" className="font-normal">
|
|
{dialogMode === "owner"
|
|
? t(
|
|
"ui.admin.tenants.owners.already_owner",
|
|
"이미 소유자",
|
|
)
|
|
: t(
|
|
"ui.admin.tenants.admins.already_admin",
|
|
"이미 관리자",
|
|
)}
|
|
</Badge>
|
|
) : (
|
|
<>
|
|
<Plus className="h-3 w-3 mr-1" />{" "}
|
|
{t("ui.common.add", "추가")}
|
|
</>
|
|
)}
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TenantAdminsAndOwnersTab;
|