forked from baron/baron-sso
532 lines
17 KiB
TypeScript
532 lines
17 KiB
TypeScript
import { useMutation, useQuery } from "@tanstack/react-query";
|
|
import type { AxiosError } from "axios";
|
|
import {
|
|
ChevronDown,
|
|
ChevronRight,
|
|
Plus,
|
|
RefreshCw,
|
|
Shield,
|
|
Trash2,
|
|
UserMinus,
|
|
UserPlus,
|
|
Users,
|
|
} from "lucide-react";
|
|
import type React from "react";
|
|
import { useState } from "react";
|
|
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 { Input } from "../../../components/ui/input";
|
|
import { Label } from "../../../components/ui/label";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "../../../components/ui/table";
|
|
import {
|
|
type GroupSummary,
|
|
addGroupMember,
|
|
createGroup,
|
|
deleteGroup,
|
|
fetchGroups,
|
|
removeGroupMember,
|
|
} from "../../../lib/adminApi";
|
|
import { t } from "../../../lib/i18n";
|
|
|
|
type UserGroupNode = GroupSummary & { children: UserGroupNode[] };
|
|
|
|
function buildGroupTree(groups: GroupSummary[]): UserGroupNode[] {
|
|
const nodeMap = new Map<string, UserGroupNode>();
|
|
const rootNodes: UserGroupNode[] = [];
|
|
|
|
groups.forEach((group) => {
|
|
nodeMap.set(group.id, { ...group, children: [] });
|
|
});
|
|
|
|
groups.forEach((group) => {
|
|
const node = nodeMap.get(group.id)!;
|
|
if (group.parentId && nodeMap.has(group.parentId)) {
|
|
const parent = nodeMap.get(group.parentId)!;
|
|
parent.children.push(node);
|
|
} else {
|
|
rootNodes.push(node);
|
|
}
|
|
});
|
|
|
|
const sortNodes = (nodes: UserGroupNode[]) => {
|
|
nodes.sort((a, b) => a.name.localeCompare(b.name));
|
|
nodes.forEach((node) => sortNodes(node.children));
|
|
};
|
|
sortNodes(rootNodes);
|
|
|
|
return rootNodes;
|
|
}
|
|
|
|
interface UserGroupTreeNodeProps {
|
|
node: UserGroupNode;
|
|
level: number;
|
|
onSelect: (groupId: string) => void;
|
|
selectedGroupId: string | null;
|
|
onDelete: (groupId: string, groupName: string) => void;
|
|
onAddSubGroup: (parentId: string) => void;
|
|
}
|
|
|
|
const UserGroupTreeNode: React.FC<UserGroupTreeNodeProps> = ({
|
|
node,
|
|
level,
|
|
onSelect,
|
|
selectedGroupId,
|
|
onDelete,
|
|
onAddSubGroup,
|
|
}) => {
|
|
const [isExpanded, setIsExpanded] = useState(true);
|
|
const hasChildren = node.children && node.children.length > 0;
|
|
|
|
return (
|
|
<>
|
|
<TableRow
|
|
key={node.id}
|
|
className={`cursor-pointer transition-colors hover:bg-muted/50 ${
|
|
selectedGroupId === node.id ? "bg-primary/5" : ""
|
|
}`}
|
|
onClick={() => onSelect(node.id)}
|
|
>
|
|
<TableCell style={{ paddingLeft: `${1 + level * 2}rem` }}>
|
|
<div className="flex items-center gap-2">
|
|
{hasChildren && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className="h-6 w-6"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setIsExpanded(!isExpanded);
|
|
}}
|
|
>
|
|
{isExpanded ? (
|
|
<ChevronDown size={16} />
|
|
) : (
|
|
<ChevronRight size={16} />
|
|
)}
|
|
</Button>
|
|
)}
|
|
{!hasChildren && <div className="w-6" />}
|
|
<Users size={14} className="text-muted-foreground" />
|
|
<span className="font-semibold">{node.name}</span>
|
|
<Badge variant="outline" className="text-xs">
|
|
{node.unitType || "Team"}
|
|
</Badge>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<Badge variant="secondary">{node.members?.length || 0}</Badge>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onAddSubGroup(node.id);
|
|
}}
|
|
>
|
|
<Plus size={14} className="mr-1" />
|
|
{t("ui.admin.groups.add_unit", "하위 조직 추가")}
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onDelete(node.id, node.name);
|
|
}}
|
|
>
|
|
<Trash2 size={14} className="text-destructive" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
{isExpanded &&
|
|
hasChildren &&
|
|
node.children.map((child) => (
|
|
<UserGroupTreeNode
|
|
key={child.id}
|
|
node={child}
|
|
level={level + 1}
|
|
onSelect={onSelect}
|
|
selectedGroupId={selectedGroupId}
|
|
onDelete={onDelete}
|
|
onAddSubGroup={onAddSubGroup}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export function TenantUserGroupsTab() {
|
|
const params = useParams<{ tenantId: string }>();
|
|
const tenantId = params.tenantId ?? "";
|
|
|
|
const [newGroupName, setNewGroupName] = useState("");
|
|
const [newGroupDesc, setNewGroupNameDesc] = useState("");
|
|
const [newGroupUnitType, setNewGroupUnitType] = useState("Team");
|
|
const [newGroupParentId, setNewGroupParentId] = useState<string | null>(null);
|
|
|
|
const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
|
|
|
|
const groupsQuery = useQuery({
|
|
queryKey: ["groups", tenantId],
|
|
queryFn: () => fetchGroups(tenantId),
|
|
enabled: !!tenantId,
|
|
});
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: () =>
|
|
createGroup(tenantId, {
|
|
name: newGroupName,
|
|
description: newGroupDesc,
|
|
unitType: newGroupUnitType,
|
|
parentId: newGroupParentId || undefined,
|
|
}),
|
|
onSuccess: () => {
|
|
toast.success(
|
|
t(
|
|
"msg.admin.groups.list.create_success",
|
|
"그룹이 성공적으로 생성되었습니다.",
|
|
),
|
|
);
|
|
groupsQuery.refetch();
|
|
setNewGroupName("");
|
|
setNewGroupNameDesc("");
|
|
setNewGroupUnitType("Team");
|
|
setNewGroupParentId(null);
|
|
},
|
|
onError: (error: AxiosError<{ error?: string }>) => {
|
|
toast.error(t("msg.admin.groups.list.create_error", "그룹 생성 실패"), {
|
|
description: error.response?.data?.error || error.message,
|
|
});
|
|
},
|
|
});
|
|
|
|
const deleteMutation = useMutation({
|
|
mutationFn: (id: string) => deleteGroup(tenantId, id),
|
|
onSuccess: () => {
|
|
toast.success(
|
|
t("msg.admin.groups.list.delete_success", "그룹이 삭제되었습니다."),
|
|
);
|
|
groupsQuery.refetch();
|
|
if (
|
|
selectedGroupId &&
|
|
selectedGroupId === (deleteMutation.variables as any)
|
|
) {
|
|
setSelectedGroupId(null);
|
|
}
|
|
},
|
|
onError: (error: AxiosError<{ error?: string }>) => {
|
|
toast.error(t("msg.common.error", "그룹 삭제 실패"), {
|
|
description: error.response?.data?.error || error.message,
|
|
});
|
|
},
|
|
});
|
|
|
|
const addMemberMutation = useMutation({
|
|
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
|
|
addGroupMember(tenantId, groupId, userId),
|
|
onSuccess: () => {
|
|
toast.success(
|
|
t("msg.admin.groups.members.add_success", "멤버가 추가되었습니다."),
|
|
);
|
|
groupsQuery.refetch();
|
|
},
|
|
onError: (error: AxiosError<{ error?: string }>) => {
|
|
toast.error(t("msg.common.error", "오류 발생"), {
|
|
description: error.response?.data?.error || error.message,
|
|
});
|
|
},
|
|
});
|
|
|
|
const removeMemberMutation = useMutation({
|
|
mutationFn: ({ groupId, userId }: { groupId: string; userId: string }) =>
|
|
removeGroupMember(tenantId, groupId, userId),
|
|
onSuccess: () => {
|
|
toast.success(
|
|
t("msg.admin.groups.members.remove_success", "멤버가 제거되었습니다."),
|
|
);
|
|
groupsQuery.refetch();
|
|
},
|
|
onError: (error: AxiosError<{ error?: string }>) => {
|
|
toast.error(t("msg.common.error", "오류 발생"), {
|
|
description: error.response?.data?.error || error.message,
|
|
});
|
|
},
|
|
});
|
|
|
|
const groupTree = groupsQuery.data ? buildGroupTree(groupsQuery.data) : [];
|
|
|
|
const handleAddSubGroup = (parentId: string) => {
|
|
setNewGroupParentId(parentId);
|
|
};
|
|
|
|
const handleDeleteGroup = (groupId: string, groupName: string) => {
|
|
if (
|
|
window.confirm(
|
|
t(
|
|
"msg.admin.groups.list.delete_confirm",
|
|
`그룹 "{{name}}"을(를) 삭제하시겠습니까?`,
|
|
{ name: groupName },
|
|
),
|
|
)
|
|
) {
|
|
deleteMutation.mutate(groupId);
|
|
}
|
|
};
|
|
|
|
const handleAddMember = (groupId: string) => {
|
|
const userId = window.prompt(
|
|
t(
|
|
"msg.admin.groups.prompt.user_id",
|
|
"추가할 사용자의 UUID를 입력하세요:",
|
|
),
|
|
);
|
|
if (userId) {
|
|
addMemberMutation.mutate({ groupId, userId });
|
|
}
|
|
};
|
|
|
|
const currentGroup = groupsQuery.data?.find((g) => g.id === selectedGroupId);
|
|
|
|
return (
|
|
<div className="space-y-6 mt-6">
|
|
<div className="grid gap-6 md:grid-cols-3">
|
|
<Card className="bg-[var(--color-panel)] md:col-span-1 border-primary/20">
|
|
<CardHeader>
|
|
<CardTitle className="text-lg flex items-center gap-2">
|
|
<Plus size={18} />{" "}
|
|
{t("ui.admin.groups.create.title", "새 그룹 생성")}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="space-y-1">
|
|
<Label htmlFor="name">
|
|
{t("ui.admin.groups.form.name_label", "그룹 이름")}
|
|
</Label>
|
|
<Input
|
|
id="name"
|
|
value={newGroupName}
|
|
onChange={(e) => setNewGroupName(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="unitType">
|
|
{t("ui.admin.groups.form.unit_level_label", "조직 단위 레벨")}
|
|
</Label>
|
|
<Input
|
|
id="unitType"
|
|
value={newGroupUnitType}
|
|
onChange={(e) => setNewGroupUnitType(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="parentId">
|
|
{t("ui.admin.groups.form.parent_label", "상위 그룹 (선택)")}
|
|
</Label>
|
|
<select
|
|
id="parentId"
|
|
className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm"
|
|
value={newGroupParentId || ""}
|
|
onChange={(e) => setNewGroupParentId(e.target.value || null)}
|
|
>
|
|
<option value="">
|
|
{t("ui.admin.groups.form.parent_none", "없음 (최상위)")}
|
|
</option>
|
|
{groupsQuery.data?.map((group) => (
|
|
<option key={group.id} value={group.id}>
|
|
{group.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Label htmlFor="desc">
|
|
{t("ui.admin.groups.form.desc_label", "설명")}
|
|
</Label>
|
|
<Input
|
|
id="desc"
|
|
value={newGroupDesc}
|
|
onChange={(e) => setNewGroupNameDesc(e.target.value)}
|
|
/>
|
|
</div>
|
|
<Button
|
|
className="w-full"
|
|
onClick={() => createMutation.mutate()}
|
|
disabled={!newGroupName || createMutation.isPending}
|
|
>
|
|
{t("ui.admin.groups.form.submit", "생성하기")}
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<Card className="bg-[var(--color-panel)] md:col-span-2">
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<div>
|
|
<CardTitle>
|
|
{t("ui.admin.groups.list.title", "User Groups")}
|
|
</CardTitle>
|
|
<CardDescription>
|
|
{t(
|
|
"msg.admin.groups.list.subtitle",
|
|
"이 테넌트에 정의된 사용자 그룹 목록입니다.",
|
|
)}
|
|
</CardDescription>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => groupsQuery.refetch()}
|
|
>
|
|
<RefreshCw size={14} />
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>
|
|
{t("ui.admin.groups.table.name", "NAME")}
|
|
</TableHead>
|
|
<TableHead className="text-center">
|
|
{t("ui.admin.groups.table.members", "MEMBERS")}
|
|
</TableHead>
|
|
<TableHead className="text-right">
|
|
{t("ui.admin.groups.table.actions", "ACTIONS")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{groupsQuery.isLoading && (
|
|
<TableRow>
|
|
<TableCell colSpan={3}>
|
|
{t("msg.admin.groups.list.loading", "로딩 중...")}
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
{!groupsQuery.isLoading && groupTree.length === 0 && (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={3}
|
|
className="text-center py-8 text-muted-foreground"
|
|
>
|
|
{t(
|
|
"msg.admin.groups.list.empty",
|
|
"아직 등록된 그룹이 없습니다.",
|
|
)}
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
{groupTree.map((node) => (
|
|
<UserGroupTreeNode
|
|
key={node.id}
|
|
node={node}
|
|
level={0}
|
|
onSelect={setSelectedGroupId}
|
|
selectedGroupId={selectedGroupId}
|
|
onDelete={handleDeleteGroup}
|
|
onAddSubGroup={handleAddSubGroup}
|
|
/>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{currentGroup && (
|
|
<Card className="bg-[var(--color-panel)] border-t-4 border-t-primary">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Shield size={18} className="text-primary" />{" "}
|
|
{t("msg.admin.groups.members.title", "[{{name}}] 멤버 관리", {
|
|
name: currentGroup.name,
|
|
})}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex justify-end mb-4">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => handleAddMember(currentGroup.id)}
|
|
disabled={addMemberMutation.isPending}
|
|
>
|
|
<UserPlus size={14} className="mr-1" />{" "}
|
|
{t("ui.common.add", "멤버 추가")}
|
|
</Button>
|
|
</div>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>
|
|
{t("ui.admin.groups.members.table.name", "이름")}
|
|
</TableHead>
|
|
<TableHead>
|
|
{t("ui.admin.groups.members.table.email", "이메일")}
|
|
</TableHead>
|
|
<TableHead className="text-right">
|
|
{t("ui.admin.groups.members.table.remove", "제거")}
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{currentGroup.members?.length === 0 && (
|
|
<TableRow>
|
|
<TableCell
|
|
colSpan={3}
|
|
className="text-center py-4 text-muted-foreground"
|
|
>
|
|
{t("msg.admin.groups.members.empty", "멤버가 없습니다.")}
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
{currentGroup.members?.map((user) => (
|
|
<TableRow key={user.id}>
|
|
<TableCell className="font-medium">{user.name}</TableCell>
|
|
<TableCell className="text-muted-foreground">
|
|
{user.email}
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() =>
|
|
removeMemberMutation.mutate({
|
|
groupId: currentGroup.id,
|
|
userId: user.id,
|
|
})
|
|
}
|
|
disabled={removeMemberMutation.isPending}
|
|
>
|
|
<UserMinus size={14} className="text-destructive" />
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TenantUserGroupsTab;
|