forked from baron/baron-sso
feat(adminfront): restore top-right tenant filter buttons in new org chart
Re-adds the group tabs ('전체', '한맥엔지니어링', etc.) to the top-right corner to allow users to filter the org chart by root tenant, restoring the lost functionality from the previous multi-tenant upgrade.
This commit is contained in:
@@ -91,6 +91,18 @@ export function TenantOrgChartPage() {
|
|||||||
return { rootNodes: roots, usersMap: uMap };
|
return { rootNodes: roots, usersMap: uMap };
|
||||||
}, [tenantsQuery.data, usersQuery.data]);
|
}, [tenantsQuery.data, usersQuery.data]);
|
||||||
|
|
||||||
|
const [selectedDept, setSelectedDept] = React.useState<string>("전체");
|
||||||
|
|
||||||
|
const depts = React.useMemo(() => {
|
||||||
|
return rootNodes.map((n) => n.name).sort();
|
||||||
|
}, [rootNodes]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (selectedDept !== "전체" && !depts.includes(selectedDept)) {
|
||||||
|
setSelectedDept("전체");
|
||||||
|
}
|
||||||
|
}, [selectedDept, depts]);
|
||||||
|
|
||||||
const buildHierarchy = (tNode: TenantNode, depth: number): OrgNode => {
|
const buildHierarchy = (tNode: TenantNode, depth: number): OrgNode => {
|
||||||
const slug = tNode.slug.toLowerCase();
|
const slug = tNode.slug.toLowerCase();
|
||||||
const members = usersMap.get(slug) || [];
|
const members = usersMap.get(slug) || [];
|
||||||
@@ -208,6 +220,11 @@ export function TenantOrgChartPage() {
|
|||||||
const totalUniqueUsers =
|
const totalUniqueUsers =
|
||||||
usersQuery.data?.items?.filter((u) => u.status === "active").length || 0;
|
usersQuery.data?.items?.filter((u) => u.status === "active").length || 0;
|
||||||
|
|
||||||
|
const targetNodes =
|
||||||
|
selectedDept === "전체"
|
||||||
|
? rootNodes
|
||||||
|
: rootNodes.filter((n) => n.name === selectedDept);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-[calc(100vh-theme(spacing.32))] bg-slate-50 rounded-xl overflow-hidden shadow-sm border border-slate-200">
|
<div className="flex flex-col h-[calc(100vh-theme(spacing.32))] bg-slate-50 rounded-xl overflow-hidden shadow-sm border border-slate-200">
|
||||||
<header className="flex items-center justify-between px-6 py-4 bg-white border-b border-slate-200 shadow-sm z-10 shrink-0">
|
<header className="flex items-center justify-between px-6 py-4 bg-white border-b border-slate-200 shadow-sm z-10 shrink-0">
|
||||||
@@ -220,6 +237,23 @@ export function TenantOrgChartPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex gap-2 overflow-x-auto max-w-2xl custom-scrollbar pb-1">
|
<div className="flex gap-2 overflow-x-auto max-w-2xl custom-scrollbar pb-1">
|
||||||
|
{["전체", ...depts].map((d) => (
|
||||||
|
<button
|
||||||
|
key={d}
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
setSelectedDept(d);
|
||||||
|
setLines([]); // Reset lines during switch
|
||||||
|
}}
|
||||||
|
className={`whitespace-nowrap px-4 py-1.5 text-sm font-semibold rounded-full border transition-colors ${
|
||||||
|
selectedDept === d
|
||||||
|
? "bg-slate-800 text-white border-slate-800"
|
||||||
|
: "bg-white text-slate-600 border-slate-200 hover:bg-slate-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{d}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
<div className="ml-2 whitespace-nowrap px-4 py-1.5 bg-blue-50 text-blue-700 font-bold rounded-full border border-blue-200 text-sm flex items-center">
|
<div className="ml-2 whitespace-nowrap px-4 py-1.5 bg-blue-50 text-blue-700 font-bold rounded-full border border-blue-200 text-sm flex items-center">
|
||||||
총 {totalUniqueUsers}명
|
총 {totalUniqueUsers}명
|
||||||
</div>
|
</div>
|
||||||
@@ -251,7 +285,7 @@ export function TenantOrgChartPage() {
|
|||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
<div className="flex flex-col gap-16 relative z-10 w-max mx-auto items-center pb-24">
|
<div className="flex flex-col gap-16 relative z-10 w-max mx-auto items-center pb-24">
|
||||||
{rootNodes.map((tNode) => {
|
{targetNodes.map((tNode) => {
|
||||||
const orgNode = buildHierarchy(tNode, 0);
|
const orgNode = buildHierarchy(tNode, 0);
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user