forked from baron/baron-sso
feat: integrate orgfront and expose internal ids
This commit is contained in:
135
orgfront/src/features/orgchart/pickerTree.ts
Normal file
135
orgfront/src/features/orgchart/pickerTree.ts
Normal file
@@ -0,0 +1,135 @@
|
||||
import type { TenantSummary, UserSummary } from "../../lib/adminApi";
|
||||
import { type TenantNode, buildTenantFullTree } from "../../lib/tenantTree";
|
||||
import type { OrgPickerTreeNode } from "./pickerTypes";
|
||||
import { getOrgChartUserDisplayName } from "./userDisplay";
|
||||
|
||||
function getUserTenantSlug(user: UserSummary) {
|
||||
return (
|
||||
user.companyCode?.toLowerCase() || user.tenantSlug?.toLowerCase() || ""
|
||||
);
|
||||
}
|
||||
|
||||
function getCompanyGroupId(node: TenantNode, allTenants: TenantSummary[]) {
|
||||
let cursor: TenantSummary | undefined = node;
|
||||
const byId = new Map(allTenants.map((tenant) => [tenant.id, tenant]));
|
||||
|
||||
while (cursor?.parentId) {
|
||||
const parent = byId.get(cursor.parentId);
|
||||
if (!parent) break;
|
||||
cursor = parent;
|
||||
}
|
||||
|
||||
return cursor?.type === "COMPANY_GROUP" ? cursor.id : node.id;
|
||||
}
|
||||
|
||||
function tenantToPickerNode(
|
||||
tenant: TenantNode,
|
||||
usersBySlug: Map<string, UserSummary[]>,
|
||||
): OrgPickerTreeNode {
|
||||
const tenantChildren = tenant.children.map((child) =>
|
||||
tenantToPickerNode(child, usersBySlug),
|
||||
);
|
||||
const userChildren = (usersBySlug.get(tenant.slug.toLowerCase()) || []).map(
|
||||
(user) => ({
|
||||
type: "user" as const,
|
||||
id: user.id,
|
||||
name: getOrgChartUserDisplayName(user, tenant),
|
||||
parentId: tenant.id,
|
||||
user,
|
||||
children: [],
|
||||
}),
|
||||
);
|
||||
|
||||
return {
|
||||
type: "tenant",
|
||||
id: tenant.id,
|
||||
name: tenant.name,
|
||||
parentId: tenant.parentId ?? null,
|
||||
tenant,
|
||||
children: [...userChildren, ...tenantChildren],
|
||||
};
|
||||
}
|
||||
|
||||
function findTenantNode(
|
||||
roots: TenantNode[],
|
||||
tenantId: string,
|
||||
): TenantNode | undefined {
|
||||
for (const root of roots) {
|
||||
if (root.id === tenantId) return root;
|
||||
const child = findTenantNode(root.children, tenantId);
|
||||
if (child) return child;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
export function buildOrgPickerTree({
|
||||
tenants,
|
||||
users,
|
||||
rootTenantId,
|
||||
tenantId,
|
||||
}: {
|
||||
tenants: TenantSummary[];
|
||||
users: UserSummary[];
|
||||
rootTenantId?: string;
|
||||
tenantId?: string;
|
||||
}) {
|
||||
const usersBySlug = new Map<string, UserSummary[]>();
|
||||
for (const user of users) {
|
||||
if (user.status !== "active") continue;
|
||||
const slug = getUserTenantSlug(user);
|
||||
if (!slug) continue;
|
||||
const list = usersBySlug.get(slug) || [];
|
||||
list.push(user);
|
||||
usersBySlug.set(slug, list);
|
||||
}
|
||||
|
||||
const companyGroup =
|
||||
tenants.find((tenant) => tenant.id === rootTenantId) ??
|
||||
tenants.find((tenant) => tenant.type === "COMPANY_GROUP") ??
|
||||
tenants.find((tenant) => !tenant.parentId);
|
||||
|
||||
if (!companyGroup) return { roots: [], companies: [], companyGroupId: "" };
|
||||
|
||||
const { currentBase } = buildTenantFullTree(tenants, companyGroup.id);
|
||||
const groupNode =
|
||||
currentBase ??
|
||||
buildTenantFullTree(tenants).subTree.find(
|
||||
(node) => node.id === companyGroup.id,
|
||||
);
|
||||
|
||||
if (!groupNode) return { roots: [], companies: [], companyGroupId: "" };
|
||||
|
||||
const companies = groupNode.children.filter(
|
||||
(node) => node.type === "COMPANY",
|
||||
);
|
||||
const scopedRoot = tenantId
|
||||
? findTenantNode([groupNode], tenantId)
|
||||
: groupNode;
|
||||
const filteredRoots = scopedRoot ? [scopedRoot] : [];
|
||||
const roots = filteredRoots.map((node) =>
|
||||
tenantToPickerNode(node, usersBySlug),
|
||||
);
|
||||
|
||||
return {
|
||||
roots,
|
||||
companies: companies.map((company) => ({
|
||||
id: company.id,
|
||||
name: company.name,
|
||||
companyGroupTenantId: getCompanyGroupId(company, tenants),
|
||||
})),
|
||||
companyGroupId: companyGroup.id,
|
||||
};
|
||||
}
|
||||
|
||||
export function flattenDescendants(node: OrgPickerTreeNode) {
|
||||
const descendants: OrgPickerTreeNode[] = [];
|
||||
const walk = (current: OrgPickerTreeNode) => {
|
||||
for (const child of current.children) {
|
||||
descendants.push(child);
|
||||
walk(child);
|
||||
}
|
||||
};
|
||||
|
||||
walk(node);
|
||||
return descendants;
|
||||
}
|
||||
98
orgfront/src/features/orgchart/pickerTypes.ts
Normal file
98
orgfront/src/features/orgchart/pickerTypes.ts
Normal file
@@ -0,0 +1,98 @@
|
||||
import type { TenantSummary, UserSummary } from "../../lib/adminApi";
|
||||
|
||||
export type OrgPickerMode = "single" | "multiple";
|
||||
export type OrgPickerSelectableType = "tenant" | "user" | "both";
|
||||
export type OrgPickerObjectType = "tenant" | "user";
|
||||
|
||||
export type OrgPickerSelection = {
|
||||
type: OrgPickerObjectType;
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
export type OrgPickerResult = {
|
||||
mode: OrgPickerMode;
|
||||
selections: OrgPickerSelection[];
|
||||
};
|
||||
|
||||
export type OrgPickerEmbedOptions = {
|
||||
mode: OrgPickerMode;
|
||||
select: OrgPickerSelectableType;
|
||||
includeDescendants: boolean;
|
||||
showDescendantToggle: boolean;
|
||||
tenantId: string;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
export type OrgPickerTreeNode = {
|
||||
type: OrgPickerObjectType;
|
||||
id: string;
|
||||
name: string;
|
||||
parentId: string | null;
|
||||
tenant?: TenantSummary;
|
||||
user?: UserSummary;
|
||||
children: OrgPickerTreeNode[];
|
||||
};
|
||||
|
||||
export function nodeKey(node: Pick<OrgPickerTreeNode, "type" | "id">) {
|
||||
return `${node.type}:${node.id}`;
|
||||
}
|
||||
|
||||
export function selectionKey(selection: OrgPickerSelection) {
|
||||
return `${selection.type}:${selection.id}`;
|
||||
}
|
||||
|
||||
export function parseOrgPickerMode(value: string | null): OrgPickerMode {
|
||||
return value === "multiple" ? "multiple" : "single";
|
||||
}
|
||||
|
||||
export function parseOrgPickerSelectableType(
|
||||
value: string | null,
|
||||
): OrgPickerSelectableType {
|
||||
if (value === "tenant" || value === "user") return value;
|
||||
return "both";
|
||||
}
|
||||
|
||||
function parseEmbedDimension(value: string | null, fallback: number) {
|
||||
const parsed = Number.parseInt(value ?? "", 10);
|
||||
if (!Number.isFinite(parsed)) return fallback;
|
||||
return Math.min(1600, Math.max(240, parsed));
|
||||
}
|
||||
|
||||
export function parseOrgPickerEmbedOptions(search: string) {
|
||||
const params = new URLSearchParams(search);
|
||||
return {
|
||||
mode:
|
||||
params.get("mode") === "single"
|
||||
? ("single" as const)
|
||||
: ("multiple" as const),
|
||||
select: parseOrgPickerSelectableType(params.get("select")),
|
||||
includeDescendants: params.get("includeDescendants") !== "false",
|
||||
showDescendantToggle: params.get("showDescendantToggle") !== "false",
|
||||
tenantId: params.get("tenantId") ?? params.get("companyTenantId") ?? "",
|
||||
width: parseEmbedDimension(params.get("width"), 400),
|
||||
height: parseEmbedDimension(params.get("height"), 600),
|
||||
};
|
||||
}
|
||||
|
||||
export function buildOrgPickerEmbedSrc(options: OrgPickerEmbedOptions) {
|
||||
const params = new URLSearchParams({
|
||||
mode: options.mode,
|
||||
select: options.select,
|
||||
width: String(options.width),
|
||||
height: String(options.height),
|
||||
});
|
||||
|
||||
const tenantId = options.tenantId.trim();
|
||||
if (tenantId) {
|
||||
params.set("tenantId", tenantId);
|
||||
}
|
||||
|
||||
if (options.mode === "multiple") {
|
||||
params.set("includeDescendants", String(options.includeDescendants));
|
||||
params.set("showDescendantToggle", String(options.showDescendantToggle));
|
||||
}
|
||||
|
||||
return `/embed/picker?${params.toString()}`;
|
||||
}
|
||||
881
orgfront/src/features/orgchart/routes/OrgChartPage.tsx
Normal file
881
orgfront/src/features/orgchart/routes/OrgChartPage.tsx
Normal file
@@ -0,0 +1,881 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import * as React from "react";
|
||||
import { useLocation, useParams } from "react-router-dom";
|
||||
import {
|
||||
type TenantSummary,
|
||||
type UserSummary,
|
||||
fetchPublicOrgChart,
|
||||
fetchTenants,
|
||||
fetchUsers,
|
||||
} from "../../../lib/adminApi";
|
||||
import { type TenantNode, buildTenantFullTree } from "../../../lib/tenantTree";
|
||||
import { getOrgChartUserDisplayName, getUserOrgProfile } from "../userDisplay";
|
||||
|
||||
type OrgNode = {
|
||||
id: string;
|
||||
name: string;
|
||||
level: number;
|
||||
members: UserSummary[];
|
||||
children: OrgNode[];
|
||||
totalCount: number;
|
||||
totalMemberIds: Set<string>;
|
||||
companyCode?: string;
|
||||
type?: string;
|
||||
};
|
||||
|
||||
type ViewBox = {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
type VisualNode = {
|
||||
node: OrgNode;
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
members: UserSummary[];
|
||||
collapsed: boolean;
|
||||
};
|
||||
|
||||
type VisualEdge = {
|
||||
key: string;
|
||||
path: string;
|
||||
};
|
||||
|
||||
type ChartLayout = {
|
||||
nodes: VisualNode[];
|
||||
edges: VisualEdge[];
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
const NODE_WIDTH = 340;
|
||||
const HEADER_HEIGHT = 42;
|
||||
const MEMBER_ROW_HEIGHT = 24;
|
||||
const NODE_PADDING_Y = 12;
|
||||
const ROOT_GAP_X = 120;
|
||||
const CHILD_GAP_X = 80;
|
||||
const CHILD_GAP_Y = 96;
|
||||
const CHART_MARGIN = 72;
|
||||
const MIN_SCALE = 0.45;
|
||||
const MAX_SCALE = 2.4;
|
||||
const ZOOM_SENSITIVITY = 0.0015;
|
||||
const FAMILY_FILTER_ID = "hanmac-family";
|
||||
|
||||
const ROLE_ORDER = [
|
||||
"사장",
|
||||
"부사장",
|
||||
"전무",
|
||||
"상무",
|
||||
"이사",
|
||||
"수석",
|
||||
"책임",
|
||||
"선임",
|
||||
"주임",
|
||||
"사원",
|
||||
];
|
||||
|
||||
function getRankWeight(
|
||||
user: UserSummary,
|
||||
tenant?: { id: string; slug: string },
|
||||
) {
|
||||
const profile = getUserOrgProfile(user, tenant);
|
||||
const role = profile.position || "";
|
||||
const order = ROLE_ORDER.indexOf(role);
|
||||
const isLeader =
|
||||
profile.position.endsWith("장") || profile.jobTitle.endsWith("장");
|
||||
return (isLeader ? -100 : 0) + (order === -1 ? 99 : order);
|
||||
}
|
||||
|
||||
function getNodeHeight(members: UserSummary[]) {
|
||||
return (
|
||||
HEADER_HEIGHT +
|
||||
NODE_PADDING_Y * 2 +
|
||||
Math.max(members.length, 1) * MEMBER_ROW_HEIGHT
|
||||
);
|
||||
}
|
||||
|
||||
function clampScale(scale: number) {
|
||||
return Math.min(MAX_SCALE, Math.max(MIN_SCALE, scale));
|
||||
}
|
||||
|
||||
function buildOrgNode(
|
||||
tenantNode: TenantNode,
|
||||
usersMap: Map<string, UserSummary[]>,
|
||||
depth: number,
|
||||
): OrgNode {
|
||||
const slug = tenantNode.slug.toLowerCase();
|
||||
const members = usersMap.get(slug) || [];
|
||||
const children = tenantNode.children.map((child) =>
|
||||
buildOrgNode(child, usersMap, depth + 1),
|
||||
);
|
||||
const totalMemberIds = new Set(members.map((member) => member.id));
|
||||
for (const child of children) {
|
||||
for (const memberId of child.totalMemberIds) {
|
||||
totalMemberIds.add(memberId);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
id: tenantNode.id,
|
||||
name: tenantNode.name,
|
||||
level: depth,
|
||||
members,
|
||||
children,
|
||||
totalCount: totalMemberIds.size,
|
||||
totalMemberIds,
|
||||
companyCode: slug,
|
||||
type: tenantNode.type,
|
||||
};
|
||||
}
|
||||
|
||||
function layoutTree(
|
||||
node: OrgNode,
|
||||
collapsedIds: Set<string>,
|
||||
originX = 0,
|
||||
originY = 0,
|
||||
): ChartLayout {
|
||||
const members = [...node.members].sort(
|
||||
(a, b) =>
|
||||
getRankWeight(a, { id: node.id, slug: node.companyCode ?? "" }) -
|
||||
getRankWeight(b, { id: node.id, slug: node.companyCode ?? "" }),
|
||||
);
|
||||
const nodeHeight = getNodeHeight(members);
|
||||
const collapsed = collapsedIds.has(node.id);
|
||||
const childLayouts = collapsed
|
||||
? []
|
||||
: node.children.map((child) => layoutTree(child, collapsedIds));
|
||||
const childrenWidth =
|
||||
childLayouts.length > 0
|
||||
? childLayouts.reduce((sum, child) => sum + child.width, 0) +
|
||||
CHILD_GAP_X * (childLayouts.length - 1)
|
||||
: 0;
|
||||
const subtreeWidth = Math.max(NODE_WIDTH, childrenWidth);
|
||||
const nodeX = originX + (subtreeWidth - NODE_WIDTH) / 2;
|
||||
const nodeY = originY;
|
||||
const visualNode: VisualNode = {
|
||||
node,
|
||||
x: nodeX,
|
||||
y: nodeY,
|
||||
width: NODE_WIDTH,
|
||||
height: nodeHeight,
|
||||
members,
|
||||
collapsed,
|
||||
};
|
||||
|
||||
let cursorX = originX;
|
||||
let maxChildHeight = 0;
|
||||
const nodes: VisualNode[] = [visualNode];
|
||||
const edges: VisualEdge[] = [];
|
||||
|
||||
for (const childLayout of childLayouts) {
|
||||
const childOffsetY = originY + nodeHeight + CHILD_GAP_Y;
|
||||
const shiftedNodes = childLayout.nodes.map((childNode) => ({
|
||||
...childNode,
|
||||
x: childNode.x + cursorX,
|
||||
y: childNode.y + childOffsetY,
|
||||
}));
|
||||
const shiftedEdges = childLayout.edges.map((edge) => ({
|
||||
...edge,
|
||||
path: offsetPath(edge.path, cursorX, childOffsetY),
|
||||
}));
|
||||
const childRoot = shiftedNodes[0];
|
||||
const parentCenterX = nodeX + NODE_WIDTH / 2;
|
||||
const parentBottomY = nodeY + nodeHeight;
|
||||
const childCenterX = childRoot.x + childRoot.width / 2;
|
||||
const childTopY = childRoot.y;
|
||||
const midY = parentBottomY + CHILD_GAP_Y / 2;
|
||||
|
||||
nodes.push(...shiftedNodes);
|
||||
edges.push({
|
||||
key: `${node.id}->${childRoot.node.id}`,
|
||||
path: `M ${parentCenterX} ${parentBottomY} L ${parentCenterX} ${midY} L ${childCenterX} ${midY} L ${childCenterX} ${childTopY}`,
|
||||
});
|
||||
edges.push(...shiftedEdges);
|
||||
cursorX += childLayout.width + CHILD_GAP_X;
|
||||
maxChildHeight = Math.max(maxChildHeight, childLayout.height);
|
||||
}
|
||||
|
||||
const height =
|
||||
childLayouts.length > 0
|
||||
? nodeHeight + CHILD_GAP_Y + maxChildHeight
|
||||
: nodeHeight;
|
||||
|
||||
return {
|
||||
nodes,
|
||||
edges,
|
||||
width: subtreeWidth,
|
||||
height,
|
||||
};
|
||||
}
|
||||
|
||||
function offsetPath(path: string, offsetX: number, offsetY: number) {
|
||||
const numbers = path.match(/-?\d+(\.\d+)?/g)?.map(Number) ?? [];
|
||||
let index = 0;
|
||||
return path.replace(/-?\d+(\.\d+)?/g, () => {
|
||||
const value = numbers[index] ?? 0;
|
||||
const nextValue = index % 2 === 0 ? value + offsetX : value + offsetY;
|
||||
index += 1;
|
||||
return String(nextValue);
|
||||
});
|
||||
}
|
||||
|
||||
function layoutForest(
|
||||
nodes: OrgNode[],
|
||||
collapsedIds: Set<string>,
|
||||
): ChartLayout {
|
||||
const layouts = nodes.map((node) => layoutTree(node, collapsedIds));
|
||||
const contentWidth =
|
||||
layouts.reduce((sum, layout) => sum + layout.width, 0) +
|
||||
ROOT_GAP_X * Math.max(layouts.length - 1, 0);
|
||||
const contentHeight = Math.max(1, ...layouts.map((layout) => layout.height));
|
||||
const visualNodes: VisualNode[] = [];
|
||||
const edges: VisualEdge[] = [];
|
||||
let cursorX = CHART_MARGIN;
|
||||
|
||||
for (const layout of layouts) {
|
||||
visualNodes.push(
|
||||
...layout.nodes.map((node) => ({
|
||||
...node,
|
||||
x: node.x + cursorX,
|
||||
y: node.y + CHART_MARGIN,
|
||||
})),
|
||||
);
|
||||
edges.push(
|
||||
...layout.edges.map((edge) => ({
|
||||
...edge,
|
||||
path: offsetPath(edge.path, cursorX, CHART_MARGIN),
|
||||
})),
|
||||
);
|
||||
cursorX += layout.width + ROOT_GAP_X;
|
||||
}
|
||||
|
||||
return {
|
||||
nodes: visualNodes,
|
||||
edges,
|
||||
width: Math.max(contentWidth + CHART_MARGIN * 2, 960),
|
||||
height: Math.max(contentHeight + CHART_MARGIN * 2, 640),
|
||||
};
|
||||
}
|
||||
|
||||
function makeInitialViewBox(
|
||||
layout: ChartLayout,
|
||||
viewport: DOMRect | null,
|
||||
): ViewBox {
|
||||
const aspect =
|
||||
viewport && viewport.height > 0 ? viewport.width / viewport.height : 16 / 9;
|
||||
const width = Math.max(layout.width, 960);
|
||||
const height = Math.max(width / aspect, layout.height);
|
||||
return {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width,
|
||||
height,
|
||||
};
|
||||
}
|
||||
|
||||
function getViewBoxScale(layout: ChartLayout, viewBox: ViewBox) {
|
||||
return layout.width / viewBox.width;
|
||||
}
|
||||
|
||||
function getColorForCompany(companyCode?: string) {
|
||||
const code = (companyCode || "").toLowerCase();
|
||||
if (code.includes("hanmac")) return "#ef4444";
|
||||
if (code.includes("saman")) return "#ffb366";
|
||||
if (code.includes("ptc")) return "#a855f7";
|
||||
if (code.includes("baron")) return "#3b82f6";
|
||||
return "#64748b";
|
||||
}
|
||||
|
||||
function isVisibleOrgChartUser(user: UserSummary) {
|
||||
return (
|
||||
!user.email.toLowerCase().endsWith("@hanmac.kr") &&
|
||||
!isSystemGlobalUser(user)
|
||||
);
|
||||
}
|
||||
|
||||
function isSystemGlobalTenant(
|
||||
tenant?: Pick<TenantSummary, "id" | "slug" | "type" | "name">,
|
||||
) {
|
||||
if (!tenant) return false;
|
||||
const values = [tenant.id, tenant.slug, tenant.type, tenant.name].map(
|
||||
(value) => value.toLowerCase().replaceAll("_", "-"),
|
||||
);
|
||||
return values.some(
|
||||
(value) =>
|
||||
value === "system" ||
|
||||
value === "global" ||
|
||||
value === "system-global" ||
|
||||
value === "tenant-global" ||
|
||||
value === "시스템 전역",
|
||||
);
|
||||
}
|
||||
|
||||
function isSystemGlobalUser(user: UserSummary) {
|
||||
const normalizedRole = user.role.toLowerCase().replaceAll("_", "-");
|
||||
|
||||
return (
|
||||
normalizedRole === "super-admin" ||
|
||||
normalizedRole === "superadmin" ||
|
||||
normalizedRole === "system-admin" ||
|
||||
isSystemGlobalTenant(user.tenant) ||
|
||||
isSystemGlobalTenant({
|
||||
id: user.companyCode || user.tenantSlug || "",
|
||||
slug: user.companyCode || user.tenantSlug || "",
|
||||
type: user.role,
|
||||
name: user.role,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
function findNodeByTenantId(
|
||||
nodes: TenantNode[],
|
||||
tenantId: string,
|
||||
): TenantNode | null {
|
||||
for (const node of nodes) {
|
||||
if (node.id === tenantId) return node;
|
||||
const child = findNodeByTenantId(node.children, tenantId);
|
||||
if (child) return child;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function filterSystemGlobalTenants(tenants: TenantSummary[]) {
|
||||
const excludedIds = new Set(
|
||||
tenants.filter(isSystemGlobalTenant).map((tenant) => tenant.id),
|
||||
);
|
||||
let changed = true;
|
||||
|
||||
while (changed) {
|
||||
changed = false;
|
||||
for (const tenant of tenants) {
|
||||
if (
|
||||
tenant.parentId &&
|
||||
excludedIds.has(tenant.parentId) &&
|
||||
!excludedIds.has(tenant.id)
|
||||
) {
|
||||
excludedIds.add(tenant.id);
|
||||
changed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return tenants.filter((tenant) => !excludedIds.has(tenant.id));
|
||||
}
|
||||
|
||||
type TenantIndexes = {
|
||||
byId: Map<string, TenantNode>;
|
||||
bySlug: Map<string, TenantNode>;
|
||||
};
|
||||
|
||||
function buildTenantIndexes(nodes: TenantNode[]): TenantIndexes {
|
||||
const byId = new Map<string, TenantNode>();
|
||||
const bySlug = new Map<string, TenantNode>();
|
||||
const visit = (node: TenantNode) => {
|
||||
byId.set(node.id, node);
|
||||
bySlug.set(node.slug.toLowerCase(), node);
|
||||
for (const child of node.children) visit(child);
|
||||
};
|
||||
|
||||
for (const node of nodes) visit(node);
|
||||
return { byId, bySlug };
|
||||
}
|
||||
|
||||
function isDescendantTenant(
|
||||
candidate: TenantNode,
|
||||
ancestor: TenantNode,
|
||||
byId: Map<string, TenantNode>,
|
||||
) {
|
||||
const visited = new Set<string>();
|
||||
let currentParentId = candidate.parentId;
|
||||
|
||||
while (currentParentId) {
|
||||
if (currentParentId === ancestor.id) return true;
|
||||
if (visited.has(currentParentId)) return false;
|
||||
visited.add(currentParentId);
|
||||
currentParentId = byId.get(currentParentId)?.parentId;
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
function getLeafMembershipSlugs(
|
||||
slugs: Set<string>,
|
||||
tenantIndexes: TenantIndexes,
|
||||
) {
|
||||
const memberships = Array.from(slugs);
|
||||
|
||||
return memberships.filter((slug) => {
|
||||
const tenant = tenantIndexes.bySlug.get(slug);
|
||||
if (!tenant) return true;
|
||||
|
||||
return !memberships.some((otherSlug) => {
|
||||
if (otherSlug === slug) return false;
|
||||
const otherTenant = tenantIndexes.bySlug.get(otherSlug);
|
||||
if (!otherTenant) return false;
|
||||
return isDescendantTenant(otherTenant, tenant, tenantIndexes.byId);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function buildUsersMap(
|
||||
users: UserSummary[],
|
||||
rootNodes: TenantNode[],
|
||||
options: { activeOnly: boolean },
|
||||
) {
|
||||
const tenantIndexes = buildTenantIndexes(rootNodes);
|
||||
const map = new Map<string, UserSummary[]>();
|
||||
|
||||
for (const user of users) {
|
||||
if (options.activeOnly && user.status !== "active") continue;
|
||||
if (!isVisibleOrgChartUser(user)) continue;
|
||||
|
||||
const slugs = new Set<string>();
|
||||
const primarySlug =
|
||||
user.companyCode?.toLowerCase() || user.tenantSlug?.toLowerCase() || "";
|
||||
if (
|
||||
primarySlug &&
|
||||
!isSystemGlobalTenant({
|
||||
id: primarySlug,
|
||||
slug: primarySlug,
|
||||
type: primarySlug,
|
||||
name: primarySlug,
|
||||
})
|
||||
) {
|
||||
slugs.add(primarySlug);
|
||||
}
|
||||
if (user.tenant?.slug && !isSystemGlobalTenant(user.tenant)) {
|
||||
slugs.add(user.tenant.slug.toLowerCase());
|
||||
}
|
||||
for (const joinedTenant of user.joinedTenants || []) {
|
||||
if (joinedTenant.slug && !isSystemGlobalTenant(joinedTenant)) {
|
||||
slugs.add(joinedTenant.slug.toLowerCase());
|
||||
}
|
||||
}
|
||||
|
||||
for (const slug of getLeafMembershipSlugs(slugs, tenantIndexes)) {
|
||||
const list = map.get(slug) || [];
|
||||
if (!list.some((existing) => existing.id === user.id)) list.push(user);
|
||||
map.set(slug, list);
|
||||
}
|
||||
}
|
||||
|
||||
return map;
|
||||
}
|
||||
|
||||
export function TenantOrgChartPage() {
|
||||
const viewportRef = React.useRef<HTMLDivElement>(null);
|
||||
const dragRef = React.useRef<{
|
||||
pointerId: number;
|
||||
startX: number;
|
||||
startY: number;
|
||||
startViewBox: ViewBox;
|
||||
} | null>(null);
|
||||
const { tenantId } = useParams<{ tenantId?: string }>();
|
||||
const location = useLocation();
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
const shareToken = searchParams.get("token");
|
||||
const [selectedTenantFilter, setSelectedTenantFilter] =
|
||||
React.useState(FAMILY_FILTER_ID);
|
||||
const [collapsedIds, setCollapsedIds] = React.useState<Set<string>>(
|
||||
() => new Set(),
|
||||
);
|
||||
const [viewBox, setViewBox] = React.useState<ViewBox>({
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 1280,
|
||||
height: 720,
|
||||
});
|
||||
const [hasUserMovedCanvas, setHasUserMovedCanvas] = React.useState(false);
|
||||
const [isDragging, setIsDragging] = React.useState(false);
|
||||
|
||||
const publicQuery = useQuery({
|
||||
queryKey: ["public-orgchart", shareToken],
|
||||
queryFn: () => {
|
||||
if (!shareToken) throw new Error("Missing share token");
|
||||
return fetchPublicOrgChart(shareToken);
|
||||
},
|
||||
enabled: !!shareToken,
|
||||
});
|
||||
|
||||
const tenantsQuery = useQuery({
|
||||
queryKey: ["tenants-full-tree-v2"],
|
||||
queryFn: () => fetchTenants(10000, 0),
|
||||
enabled: !shareToken,
|
||||
});
|
||||
|
||||
const usersQuery = useQuery({
|
||||
queryKey: ["users", { limit: 5000, offset: 0 }],
|
||||
queryFn: () => fetchUsers(5000, 0),
|
||||
enabled: !shareToken,
|
||||
});
|
||||
|
||||
const { rootNodes, usersMap, sharedWith } = React.useMemo(() => {
|
||||
if (shareToken) {
|
||||
if (!publicQuery.data) {
|
||||
return {
|
||||
rootNodes: [],
|
||||
usersMap: new Map<string, UserSummary[]>(),
|
||||
sharedWith: "",
|
||||
};
|
||||
}
|
||||
|
||||
const rootNodes = buildTenantFullTree(
|
||||
filterSystemGlobalTenants(publicQuery.data.tenants),
|
||||
).subTree;
|
||||
|
||||
return {
|
||||
rootNodes,
|
||||
usersMap: buildUsersMap(publicQuery.data.users, rootNodes, {
|
||||
activeOnly: false,
|
||||
}),
|
||||
sharedWith: publicQuery.data.sharedWith,
|
||||
};
|
||||
}
|
||||
|
||||
if (!tenantsQuery.data?.items || !usersQuery.data?.items) {
|
||||
return {
|
||||
rootNodes: [],
|
||||
usersMap: new Map<string, UserSummary[]>(),
|
||||
sharedWith: "",
|
||||
};
|
||||
}
|
||||
|
||||
const rootNodes = buildTenantFullTree(
|
||||
filterSystemGlobalTenants(tenantsQuery.data.items),
|
||||
).subTree;
|
||||
|
||||
return {
|
||||
rootNodes,
|
||||
usersMap: buildUsersMap(usersQuery.data.items, rootNodes, {
|
||||
activeOnly: true,
|
||||
}),
|
||||
sharedWith: "",
|
||||
};
|
||||
}, [publicQuery.data, shareToken, tenantsQuery.data, usersQuery.data]);
|
||||
|
||||
const familyRoot = React.useMemo(() => {
|
||||
return (
|
||||
rootNodes.find((node) => node.type === "COMPANY_GROUP") ??
|
||||
rootNodes[0] ??
|
||||
null
|
||||
);
|
||||
}, [rootNodes]);
|
||||
|
||||
const companyFilters = React.useMemo(() => {
|
||||
return (familyRoot?.children ?? [])
|
||||
.filter((node) => node.type === "COMPANY")
|
||||
.map((node) => ({ id: node.id, label: node.name }))
|
||||
.sort((a, b) => a.label.localeCompare(b.label));
|
||||
}, [familyRoot]);
|
||||
|
||||
const filterOptions = React.useMemo(
|
||||
() => [{ id: FAMILY_FILTER_ID, label: "한맥가족" }, ...companyFilters],
|
||||
[companyFilters],
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!tenantId) return;
|
||||
const searchRoots = familyRoot ? [familyRoot] : rootNodes;
|
||||
const match = searchRoots
|
||||
.flatMap((node) => [node, ...node.children])
|
||||
.find(
|
||||
(node) =>
|
||||
node.id === tenantId ||
|
||||
node.slug.toLowerCase() === tenantId.toLowerCase() ||
|
||||
node.name === tenantId,
|
||||
);
|
||||
if (match?.type === "COMPANY") setSelectedTenantFilter(match.id);
|
||||
}, [familyRoot, rootNodes, tenantId]);
|
||||
|
||||
const targetNodes = React.useMemo(() => {
|
||||
if (!familyRoot) return [];
|
||||
if (selectedTenantFilter === FAMILY_FILTER_ID) {
|
||||
return [buildOrgNode(familyRoot, usersMap, 0)];
|
||||
}
|
||||
|
||||
const companyNode = findNodeByTenantId([familyRoot], selectedTenantFilter);
|
||||
return companyNode ? [buildOrgNode(companyNode, usersMap, 0)] : [];
|
||||
}, [familyRoot, selectedTenantFilter, usersMap]);
|
||||
|
||||
const layout = React.useMemo(
|
||||
() => layoutForest(targetNodes, collapsedIds),
|
||||
[collapsedIds, targetNodes],
|
||||
);
|
||||
|
||||
React.useLayoutEffect(() => {
|
||||
if (hasUserMovedCanvas) return;
|
||||
setViewBox(
|
||||
makeInitialViewBox(
|
||||
layout,
|
||||
viewportRef.current?.getBoundingClientRect() ?? null,
|
||||
),
|
||||
);
|
||||
}, [hasUserMovedCanvas, layout]);
|
||||
|
||||
const handlePointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
|
||||
if (event.button !== 0) return;
|
||||
dragRef.current = {
|
||||
pointerId: event.pointerId,
|
||||
startX: event.clientX,
|
||||
startY: event.clientY,
|
||||
startViewBox: viewBox,
|
||||
};
|
||||
event.currentTarget.setPointerCapture(event.pointerId);
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handlePointerMove = (event: React.PointerEvent<HTMLDivElement>) => {
|
||||
const dragState = dragRef.current;
|
||||
const rect = viewportRef.current?.getBoundingClientRect();
|
||||
if (!dragState || !rect || dragState.pointerId !== event.pointerId) return;
|
||||
|
||||
const dx =
|
||||
((event.clientX - dragState.startX) / rect.width) *
|
||||
dragState.startViewBox.width;
|
||||
const dy =
|
||||
((event.clientY - dragState.startY) / rect.height) *
|
||||
dragState.startViewBox.height;
|
||||
setHasUserMovedCanvas(true);
|
||||
setViewBox({
|
||||
...dragState.startViewBox,
|
||||
x: dragState.startViewBox.x - dx,
|
||||
y: dragState.startViewBox.y - dy,
|
||||
});
|
||||
};
|
||||
|
||||
const finishDrag = (event: React.PointerEvent<HTMLDivElement>) => {
|
||||
const dragState = dragRef.current;
|
||||
if (!dragState || dragState.pointerId !== event.pointerId) return;
|
||||
if (event.currentTarget.hasPointerCapture(event.pointerId)) {
|
||||
event.currentTarget.releasePointerCapture(event.pointerId);
|
||||
}
|
||||
dragRef.current = null;
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
const rect = event.currentTarget.getBoundingClientRect();
|
||||
const currentScale = getViewBoxScale(layout, viewBox);
|
||||
const nextScale = clampScale(
|
||||
currentScale * Math.exp(-event.deltaY * ZOOM_SENSITIVITY),
|
||||
);
|
||||
const nextWidth = layout.width / nextScale;
|
||||
const nextHeight = nextWidth / (rect.width / rect.height);
|
||||
const pointX =
|
||||
viewBox.x + ((event.clientX - rect.left) / rect.width) * viewBox.width;
|
||||
const pointY =
|
||||
viewBox.y + ((event.clientY - rect.top) / rect.height) * viewBox.height;
|
||||
const ratioX = (pointX - viewBox.x) / viewBox.width;
|
||||
const ratioY = (pointY - viewBox.y) / viewBox.height;
|
||||
|
||||
setHasUserMovedCanvas(true);
|
||||
setViewBox({
|
||||
x: pointX - nextWidth * ratioX,
|
||||
y: pointY - nextHeight * ratioY,
|
||||
width: nextWidth,
|
||||
height: nextHeight,
|
||||
});
|
||||
};
|
||||
|
||||
const isLoading = shareToken
|
||||
? publicQuery.isLoading
|
||||
: tenantsQuery.isLoading || usersQuery.isLoading;
|
||||
const isError = shareToken
|
||||
? publicQuery.isError
|
||||
: tenantsQuery.isError || usersQuery.isError;
|
||||
|
||||
const totalUsers = React.useMemo(() => {
|
||||
const ids = new Set<string>();
|
||||
for (const node of targetNodes) {
|
||||
for (const memberId of node.totalMemberIds) {
|
||||
ids.add(memberId);
|
||||
}
|
||||
}
|
||||
return ids.size;
|
||||
}, [targetNodes]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="p-8 text-center text-muted-foreground">로딩 중...</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="p-8 text-center text-red-500">
|
||||
조직도를 불러올 수 없거나 만료된 링크입니다.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-theme(spacing.32))] flex-col overflow-hidden rounded-xl border border-[#e0d5c1] bg-[#f6efe6] shadow-sm">
|
||||
<header className="z-10 flex shrink-0 flex-col items-start justify-between border-b border-[#f2c484]/30 bg-[linear-gradient(145deg,rgba(10,42,34,0.98)_0%,rgba(15,58,47,0.98)_52%,rgba(26,86,69,0.98)_100%)] px-6 py-4 sm:flex-row sm:items-center">
|
||||
<div className="mb-4 flex flex-col gap-1 sm:mb-0">
|
||||
<p className="text-xs font-bold uppercase tracking-wider text-[#f2c484]">
|
||||
{shareToken ? `공유된 조직도: ${sharedWith}` : "MH Dashboard"}
|
||||
</p>
|
||||
<h2 className="text-xl font-black text-[#f7f0e4]">조직 현황</h2>
|
||||
</div>
|
||||
<div className="custom-scrollbar flex max-w-full items-center gap-2 overflow-x-auto">
|
||||
{filterOptions.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setSelectedTenantFilter(option.id);
|
||||
setCollapsedIds(new Set());
|
||||
setHasUserMovedCanvas(false);
|
||||
}}
|
||||
className={`whitespace-nowrap rounded-full border px-4 py-2 text-xs font-bold transition-all ${
|
||||
selectedTenantFilter === option.id
|
||||
? "border-[#f2c484]/40 bg-[linear-gradient(180deg,rgba(255,253,248,0.98),rgba(245,235,221,0.94))] text-[#0a2a22] shadow-sm"
|
||||
: "border-[#f2c484]/30 bg-white/10 text-[#f7f0e4]/70 hover:border-[#f2c484]/50 hover:text-[#f7f0e4]"
|
||||
}`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))}
|
||||
<div className="ml-2 whitespace-nowrap rounded-full border border-[#f2c484]/30 bg-[#f2c484]/10 px-4 py-2 text-xs font-black text-[#f2c484] shadow-sm">
|
||||
총 {totalUsers}명
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div
|
||||
className={`relative flex-1 touch-none select-none overflow-hidden ${isDragging ? "cursor-grabbing" : "cursor-grab"}`}
|
||||
data-testid="orgchart-viewport"
|
||||
onPointerCancel={finishDrag}
|
||||
onPointerDown={handlePointerDown}
|
||||
onPointerMove={handlePointerMove}
|
||||
onPointerUp={finishDrag}
|
||||
onWheel={handleWheel}
|
||||
ref={viewportRef}
|
||||
style={{
|
||||
background:
|
||||
"radial-gradient(circle at top left, rgba(214, 138, 58, 0.08), transparent 24%), radial-gradient(circle at top right, rgba(47, 153, 115, 0.05), transparent 20%), linear-gradient(180deg, rgba(246, 239, 230, 0.98), rgba(241, 234, 223, 0.96))",
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
className="h-full w-full"
|
||||
data-scale={getViewBoxScale(layout, viewBox).toFixed(3)}
|
||||
data-testid="orgchart-vector-svg"
|
||||
role="img"
|
||||
viewBox={`${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`}
|
||||
>
|
||||
<title>조직도 벡터 렌더링</title>
|
||||
<g data-testid="orgchart-canvas">
|
||||
{layout.edges.map((edge) => (
|
||||
<path
|
||||
d={edge.path}
|
||||
fill="none"
|
||||
key={edge.key}
|
||||
stroke="#bca58a"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth="2"
|
||||
vectorEffect="non-scaling-stroke"
|
||||
/>
|
||||
))}
|
||||
{layout.nodes.map((visualNode) => (
|
||||
<SvgOrgNode key={visualNode.node.id} visualNode={visualNode} />
|
||||
))}
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SvgOrgNode({
|
||||
visualNode,
|
||||
}: {
|
||||
visualNode: VisualNode;
|
||||
}) {
|
||||
const { node, x, y, width, height, members, collapsed } = visualNode;
|
||||
const headerFill = node.level === 0 ? "#0a2a22" : "#2f5547";
|
||||
const accent = getColorForCompany(node.companyCode);
|
||||
|
||||
return (
|
||||
<g transform={`translate(${x} ${y})`}>
|
||||
<rect
|
||||
fill="#ffffff"
|
||||
height={height}
|
||||
rx="10"
|
||||
stroke="#e0d5c1"
|
||||
strokeWidth="1.5"
|
||||
width={width}
|
||||
/>
|
||||
<rect fill={headerFill} height={HEADER_HEIGHT} rx="10" width={width} />
|
||||
<rect
|
||||
fill={headerFill}
|
||||
height="18"
|
||||
width={width}
|
||||
y={HEADER_HEIGHT - 18}
|
||||
/>
|
||||
<text
|
||||
fill="#f7f0e4"
|
||||
fontSize={node.level === 0 ? 17 : 15}
|
||||
fontWeight="800"
|
||||
textAnchor="middle"
|
||||
x={width / 2}
|
||||
y="27"
|
||||
>
|
||||
{node.name}
|
||||
</text>
|
||||
<g>
|
||||
<rect
|
||||
fill="rgba(0,0,0,0.22)"
|
||||
height="22"
|
||||
rx="11"
|
||||
width="52"
|
||||
x={width - 66}
|
||||
y="10"
|
||||
/>
|
||||
<text
|
||||
fill="#ffffff"
|
||||
fontSize="12"
|
||||
fontWeight="700"
|
||||
textAnchor="middle"
|
||||
x={width - 40}
|
||||
y="25"
|
||||
>
|
||||
{collapsed ? "+" : node.totalCount}
|
||||
</text>
|
||||
</g>
|
||||
|
||||
{members.length > 0 ? (
|
||||
members.map((member, index) => (
|
||||
<g
|
||||
key={member.id}
|
||||
transform={`translate(14 ${HEADER_HEIGHT + NODE_PADDING_Y + index * MEMBER_ROW_HEIGHT})`}
|
||||
>
|
||||
<rect
|
||||
fill="#ffffff"
|
||||
height="20"
|
||||
rx="4"
|
||||
stroke="#e5e7eb"
|
||||
width={width - 28}
|
||||
/>
|
||||
<rect fill={accent} height="20" rx="4" width="4" />
|
||||
<text fill="#334155" fontSize="12" fontWeight="800" x="12" y="14">
|
||||
{getOrgChartUserDisplayName(member, {
|
||||
id: node.id,
|
||||
slug: node.companyCode ?? "",
|
||||
})}
|
||||
</text>
|
||||
</g>
|
||||
))
|
||||
) : (
|
||||
<text fill="#94a3b8" fontSize="12" x="16" y={HEADER_HEIGHT + 28}>
|
||||
구성원 없음
|
||||
</text>
|
||||
)}
|
||||
</g>
|
||||
);
|
||||
}
|
||||
48
orgfront/src/features/orgchart/routes/OrgFrontLayout.tsx
Normal file
48
orgfront/src/features/orgchart/routes/OrgFrontLayout.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { GitBranch, Network, PanelTop } from "lucide-react";
|
||||
import { NavLink, Outlet } from "react-router-dom";
|
||||
|
||||
const navItems = [
|
||||
{ to: "/chart", label: "조직도", icon: Network },
|
||||
{ to: "/picker", label: "조직 선택기", icon: GitBranch },
|
||||
{ to: "/embed-preview", label: "임베딩 검증", icon: PanelTop },
|
||||
];
|
||||
|
||||
export function OrgFrontLayout() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground">
|
||||
<header className="sticky top-0 z-30 border-b border-border bg-background/95 backdrop-blur">
|
||||
<div className="mx-auto flex max-w-7xl flex-col gap-3 px-4 py-4 md:flex-row md:items-center md:justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Baron Orgfront
|
||||
</p>
|
||||
<h1 className="text-xl font-semibold">조직도 서비스</h1>
|
||||
</div>
|
||||
<nav className="flex flex-wrap gap-2" aria-label="주요 메뉴">
|
||||
{navItems.map(({ to, label, icon: Icon }) => (
|
||||
<NavLink
|
||||
key={to}
|
||||
to={to}
|
||||
className={({ isActive }) =>
|
||||
[
|
||||
"inline-flex h-10 items-center gap-2 rounded-md border px-3 text-sm font-semibold transition",
|
||||
isActive
|
||||
? "border-primary bg-primary text-primary-foreground"
|
||||
: "border-border bg-card text-muted-foreground hover:text-foreground",
|
||||
].join(" ")
|
||||
}
|
||||
>
|
||||
<Icon size={16} />
|
||||
{label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto max-w-7xl px-4 py-5">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,218 @@
|
||||
import * as React from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import {
|
||||
type OrgPickerEmbedOptions,
|
||||
type OrgPickerMode,
|
||||
type OrgPickerSelectableType,
|
||||
buildOrgPickerEmbedSrc,
|
||||
parseOrgPickerEmbedOptions,
|
||||
} from "../pickerTypes";
|
||||
|
||||
type PickerMessage = {
|
||||
type: string;
|
||||
payload?: unknown;
|
||||
error?: string;
|
||||
};
|
||||
|
||||
function PickerScenarioControls({
|
||||
options,
|
||||
onChange,
|
||||
}: {
|
||||
options: OrgPickerEmbedOptions;
|
||||
onChange: (options: OrgPickerEmbedOptions) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="grid gap-3 rounded-md border border-border bg-card p-4 md:grid-cols-2 lg:grid-cols-[1fr,1fr,1fr,auto,auto,auto,auto] lg:items-end">
|
||||
<label className="space-y-1 text-sm font-medium">
|
||||
<span className="block text-muted-foreground">선택 모드</span>
|
||||
<select
|
||||
className="h-10 w-full rounded-md border border-input bg-background px-3"
|
||||
value={options.mode}
|
||||
onChange={(event) =>
|
||||
onChange({
|
||||
...options,
|
||||
mode: event.target.value as OrgPickerMode,
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="multiple">복수 선택</option>
|
||||
<option value="single">단일 선택</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm font-medium">
|
||||
<span className="block text-muted-foreground">선택 대상</span>
|
||||
<select
|
||||
className="h-10 w-full rounded-md border border-input bg-background px-3"
|
||||
value={options.select}
|
||||
onChange={(event) =>
|
||||
onChange({
|
||||
...options,
|
||||
select: event.target.value as OrgPickerSelectableType,
|
||||
})
|
||||
}
|
||||
>
|
||||
<option value="both">조직&구성원</option>
|
||||
<option value="tenant">조직</option>
|
||||
<option value="user">구성원</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm font-medium">
|
||||
<span className="block text-muted-foreground">tenant ID</span>
|
||||
<input
|
||||
className="h-10 w-full rounded-md border border-input bg-background px-3"
|
||||
onChange={(event) =>
|
||||
onChange({
|
||||
...options,
|
||||
tenantId: event.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="company-baron"
|
||||
type="text"
|
||||
value={options.tenantId}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex h-10 items-center gap-2 rounded-md border border-border bg-background px-3 text-sm">
|
||||
<input
|
||||
checked={options.includeDescendants}
|
||||
disabled={options.mode === "single"}
|
||||
onChange={(event) =>
|
||||
onChange({
|
||||
...options,
|
||||
includeDescendants: event.target.checked,
|
||||
})
|
||||
}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span>하위 포함</span>
|
||||
</label>
|
||||
|
||||
<label className="flex h-10 items-center gap-2 rounded-md border border-border bg-background px-3 text-sm">
|
||||
<input
|
||||
checked={options.showDescendantToggle}
|
||||
disabled={options.mode === "single"}
|
||||
onChange={(event) =>
|
||||
onChange({
|
||||
...options,
|
||||
showDescendantToggle: event.target.checked,
|
||||
})
|
||||
}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span>하위 선택 스위치 표시</span>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm font-medium">
|
||||
<span className="block text-muted-foreground">임베딩 너비</span>
|
||||
<input
|
||||
className="h-10 w-full rounded-md border border-input bg-background px-3"
|
||||
min={240}
|
||||
max={1600}
|
||||
onChange={(event) =>
|
||||
onChange({
|
||||
...options,
|
||||
width: Number.parseInt(event.target.value || "400", 10),
|
||||
})
|
||||
}
|
||||
type="number"
|
||||
value={options.width}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm font-medium">
|
||||
<span className="block text-muted-foreground">임베딩 높이</span>
|
||||
<input
|
||||
className="h-10 w-full rounded-md border border-input bg-background px-3"
|
||||
min={240}
|
||||
max={1600}
|
||||
onChange={(event) =>
|
||||
onChange({
|
||||
...options,
|
||||
height: Number.parseInt(event.target.value || "600", 10),
|
||||
})
|
||||
}
|
||||
type="number"
|
||||
value={options.height}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function OrgPickerEmbedPreviewPage() {
|
||||
const location = useLocation();
|
||||
const [options, setOptions] = React.useState<OrgPickerEmbedOptions>(() =>
|
||||
parseOrgPickerEmbedOptions(location.search),
|
||||
);
|
||||
const [lastMessage, setLastMessage] = React.useState<PickerMessage | null>(
|
||||
null,
|
||||
);
|
||||
const pickerSrc = buildOrgPickerEmbedSrc(options);
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleMessage = (event: MessageEvent<PickerMessage>) => {
|
||||
if (!event.data?.type?.startsWith("orgfront:picker:")) return;
|
||||
setLastMessage(event.data);
|
||||
};
|
||||
|
||||
window.addEventListener("message", handleMessage);
|
||||
return () => window.removeEventListener("message", handleMessage);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<header className="space-y-3">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Embed Preview
|
||||
</p>
|
||||
<h1 className="text-2xl font-semibold">임베딩 검증</h1>
|
||||
</div>
|
||||
<div
|
||||
className="min-h-16 w-full overflow-x-auto rounded-md border border-border bg-card px-4 py-3 font-mono text-sm leading-6 text-foreground"
|
||||
data-testid="embed-preview-src"
|
||||
>
|
||||
{pickerSrc}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<PickerScenarioControls options={options} onChange={setOptions} />
|
||||
|
||||
<section className="grid gap-4 lg:grid-cols-[1fr,360px]">
|
||||
<div
|
||||
className="max-w-full resize overflow-auto rounded-md border border-border bg-card"
|
||||
data-testid="embed-preview-frame-shell"
|
||||
style={{
|
||||
width: options.width,
|
||||
height: options.height,
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
className="h-full w-full bg-background"
|
||||
src={pickerSrc}
|
||||
title="조직 선택기 임베딩 검증"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<aside className="space-y-3 rounded-md border border-border bg-card p-4">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
postMessage
|
||||
</p>
|
||||
<h2 className="text-lg font-semibold">수신 결과</h2>
|
||||
</div>
|
||||
<pre
|
||||
className="min-h-[280px] overflow-auto rounded-md border border-border bg-background p-3 text-xs"
|
||||
data-testid="embed-preview-output"
|
||||
>
|
||||
{lastMessage
|
||||
? JSON.stringify(lastMessage, null, 2)
|
||||
: "아직 수신된 메시지가 없습니다."}
|
||||
</pre>
|
||||
</aside>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
709
orgfront/src/features/orgchart/routes/OrgPickerPage.tsx
Normal file
709
orgfront/src/features/orgchart/routes/OrgPickerPage.tsx
Normal file
@@ -0,0 +1,709 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Check, ChevronDown, ChevronRight, Search, X } from "lucide-react";
|
||||
import * as React from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import { Button } from "../../../components/ui/button";
|
||||
import { fetchTenants, fetchUsers } from "../../../lib/adminApi";
|
||||
import { buildOrgPickerTree, flattenDescendants } from "../pickerTree";
|
||||
import {
|
||||
type OrgPickerEmbedOptions,
|
||||
type OrgPickerMode,
|
||||
type OrgPickerResult,
|
||||
type OrgPickerSelectableType,
|
||||
type OrgPickerSelection,
|
||||
type OrgPickerTreeNode,
|
||||
buildOrgPickerEmbedSrc,
|
||||
nodeKey,
|
||||
parseOrgPickerEmbedOptions,
|
||||
parseOrgPickerMode,
|
||||
parseOrgPickerSelectableType,
|
||||
} from "../pickerTypes";
|
||||
|
||||
function canSelectNode(
|
||||
node: OrgPickerTreeNode,
|
||||
select: OrgPickerSelectableType,
|
||||
) {
|
||||
return select === "both" || select === node.type;
|
||||
}
|
||||
|
||||
function toSelection(node: OrgPickerTreeNode): OrgPickerSelection {
|
||||
return {
|
||||
type: node.type,
|
||||
id: node.id,
|
||||
name: node.name,
|
||||
};
|
||||
}
|
||||
|
||||
function collectSelectedNodes({
|
||||
roots,
|
||||
selectedKeys,
|
||||
includeDescendants,
|
||||
select,
|
||||
}: {
|
||||
roots: OrgPickerTreeNode[];
|
||||
selectedKeys: Set<string>;
|
||||
includeDescendants: boolean;
|
||||
select: OrgPickerSelectableType;
|
||||
}) {
|
||||
const selected = new Map<string, OrgPickerTreeNode>();
|
||||
const visit = (node: OrgPickerTreeNode) => {
|
||||
const key = nodeKey(node);
|
||||
if (selectedKeys.has(key) && canSelectNode(node, select)) {
|
||||
selected.set(key, node);
|
||||
if (includeDescendants && node.type === "tenant") {
|
||||
for (const descendant of flattenDescendants(node)) {
|
||||
if (canSelectNode(descendant, select)) {
|
||||
selected.set(nodeKey(descendant), descendant);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const child of node.children) visit(child);
|
||||
};
|
||||
|
||||
for (const root of roots) visit(root);
|
||||
return Array.from(selected.values()).map(toSelection);
|
||||
}
|
||||
|
||||
function collectCheckedKeys({
|
||||
roots,
|
||||
selectedKeys,
|
||||
includeDescendants,
|
||||
select,
|
||||
}: {
|
||||
roots: OrgPickerTreeNode[];
|
||||
selectedKeys: Set<string>;
|
||||
includeDescendants: boolean;
|
||||
select: OrgPickerSelectableType;
|
||||
}) {
|
||||
const checkedKeys = new Set(selectedKeys);
|
||||
if (!includeDescendants) return checkedKeys;
|
||||
|
||||
const visit = (node: OrgPickerTreeNode) => {
|
||||
const key = nodeKey(node);
|
||||
if (selectedKeys.has(key) && node.type === "tenant") {
|
||||
for (const descendant of flattenDescendants(node)) {
|
||||
if (canSelectNode(descendant, select)) {
|
||||
checkedKeys.add(nodeKey(descendant));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (const child of node.children) visit(child);
|
||||
};
|
||||
|
||||
for (const root of roots) visit(root);
|
||||
return checkedKeys;
|
||||
}
|
||||
|
||||
function postPickerMessage(message: unknown) {
|
||||
window.parent.postMessage(message, "*");
|
||||
}
|
||||
|
||||
function collectSearchValues(value: unknown, depth = 0): string[] {
|
||||
if (value == null || depth > 4) return [];
|
||||
if (
|
||||
typeof value === "string" ||
|
||||
typeof value === "number" ||
|
||||
typeof value === "boolean"
|
||||
) {
|
||||
return [String(value)];
|
||||
}
|
||||
if (Array.isArray(value)) {
|
||||
return value.flatMap((item) => collectSearchValues(item, depth + 1));
|
||||
}
|
||||
if (typeof value === "object") {
|
||||
return Object.entries(value as Record<string, unknown>).flatMap(
|
||||
([key, item]) => [key, ...collectSearchValues(item, depth + 1)],
|
||||
);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
function getNodeSearchValues(node: OrgPickerTreeNode) {
|
||||
const tenantSearchValues = node.tenant
|
||||
? collectSearchValues({
|
||||
id: node.tenant.id,
|
||||
type: node.tenant.type,
|
||||
name: node.tenant.name,
|
||||
slug: node.tenant.slug,
|
||||
description: node.tenant.description,
|
||||
status: node.tenant.status,
|
||||
domains: node.tenant.domains,
|
||||
parentId: node.tenant.parentId,
|
||||
config: node.tenant.config,
|
||||
memberCount: node.tenant.memberCount,
|
||||
createdAt: node.tenant.createdAt,
|
||||
updatedAt: node.tenant.updatedAt,
|
||||
})
|
||||
: [];
|
||||
|
||||
return [
|
||||
node.type,
|
||||
node.id,
|
||||
node.name,
|
||||
node.parentId ?? "",
|
||||
...tenantSearchValues,
|
||||
...collectSearchValues(node.user),
|
||||
].map((value) => value.toLowerCase());
|
||||
}
|
||||
|
||||
function nodeMatchesSearch(node: OrgPickerTreeNode, query: string) {
|
||||
return getNodeSearchValues(node).some((value) => value.includes(query));
|
||||
}
|
||||
|
||||
function filterPickerTree(
|
||||
roots: OrgPickerTreeNode[],
|
||||
rawQuery: string,
|
||||
): OrgPickerTreeNode[] {
|
||||
const query = rawQuery.trim().toLowerCase();
|
||||
if (!query) return roots;
|
||||
|
||||
const filterNode = (node: OrgPickerTreeNode): OrgPickerTreeNode | null => {
|
||||
const filteredChildren = node.children
|
||||
.map(filterNode)
|
||||
.filter((child): child is OrgPickerTreeNode => Boolean(child));
|
||||
|
||||
if (nodeMatchesSearch(node, query) || filteredChildren.length > 0) {
|
||||
return {
|
||||
...node,
|
||||
children: filteredChildren,
|
||||
};
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
return roots
|
||||
.map(filterNode)
|
||||
.filter((node): node is OrgPickerTreeNode => Boolean(node));
|
||||
}
|
||||
|
||||
function OrgPickerTree({
|
||||
roots,
|
||||
mode,
|
||||
select,
|
||||
selectedKeys,
|
||||
onSingleSelect,
|
||||
onToggle,
|
||||
}: {
|
||||
roots: OrgPickerTreeNode[];
|
||||
mode: OrgPickerMode;
|
||||
select: OrgPickerSelectableType;
|
||||
selectedKeys: Set<string>;
|
||||
onSingleSelect: (node: OrgPickerTreeNode) => void;
|
||||
onToggle: (node: OrgPickerTreeNode, checked: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="space-y-1" data-testid="org-picker-tree">
|
||||
{roots.map((node) => (
|
||||
<OrgPickerTreeItem
|
||||
key={nodeKey(node)}
|
||||
mode={mode}
|
||||
node={node}
|
||||
onSingleSelect={onSingleSelect}
|
||||
onToggle={onToggle}
|
||||
select={select}
|
||||
selectedKeys={selectedKeys}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function OrgPickerTreeItem({
|
||||
node,
|
||||
mode,
|
||||
select,
|
||||
selectedKeys,
|
||||
onSingleSelect,
|
||||
onToggle,
|
||||
depth = 0,
|
||||
}: {
|
||||
node: OrgPickerTreeNode;
|
||||
mode: OrgPickerMode;
|
||||
select: OrgPickerSelectableType;
|
||||
selectedKeys: Set<string>;
|
||||
onSingleSelect: (node: OrgPickerTreeNode) => void;
|
||||
onToggle: (node: OrgPickerTreeNode, checked: boolean) => void;
|
||||
depth?: number;
|
||||
}) {
|
||||
const [isOpen, setIsOpen] = React.useState(true);
|
||||
const selectable = canSelectNode(node, select);
|
||||
const hasChildren = node.children.length > 0;
|
||||
const key = nodeKey(node);
|
||||
const checked = selectedKeys.has(key);
|
||||
const label = `${node.name} 선택`;
|
||||
const email = node.type === "user" ? node.user?.email : undefined;
|
||||
const nameTestId =
|
||||
node.type === "tenant"
|
||||
? "org-picker-node-name-tenant"
|
||||
: "org-picker-node-name-user";
|
||||
const content = (
|
||||
<span className="flex min-w-0 flex-col">
|
||||
<span
|
||||
className={`truncate font-semibold leading-5 ${
|
||||
node.type === "tenant" ? "text-[#0a2114]" : ""
|
||||
}`}
|
||||
data-testid={nameTestId}
|
||||
>
|
||||
{node.name}
|
||||
</span>
|
||||
{email ? (
|
||||
<span className="truncate text-xs leading-5 text-muted-foreground">
|
||||
{email}
|
||||
</span>
|
||||
) : null}
|
||||
</span>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<div
|
||||
className={`group flex min-h-7 items-center gap-1.5 rounded-sm py-0.5 pr-1.5 transition ${
|
||||
mode === "single" && checked
|
||||
? "bg-primary/15 text-foreground ring-2 ring-primary/60 shadow-sm"
|
||||
: "hover:bg-secondary/50"
|
||||
} ${depth > 0 ? "pl-4" : "pl-1"}`}
|
||||
data-selected={mode === "single" && checked ? "true" : undefined}
|
||||
>
|
||||
{hasChildren ? (
|
||||
<button
|
||||
type="button"
|
||||
className="grid h-6 w-6 shrink-0 place-items-center rounded-sm text-muted-foreground transition hover:bg-secondary"
|
||||
onClick={() => setIsOpen((current) => !current)}
|
||||
aria-label={`${node.name} ${isOpen ? "접기" : "펼치기"}`}
|
||||
>
|
||||
{isOpen ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
|
||||
</button>
|
||||
) : (
|
||||
<span className="h-6 w-6 shrink-0" aria-hidden="true" />
|
||||
)}
|
||||
|
||||
{mode === "multiple" && selectable ? (
|
||||
<input
|
||||
aria-label={label}
|
||||
checked={checked}
|
||||
className="h-3.5 w-3.5 rounded border-border"
|
||||
onChange={(event) => onToggle(node, event.target.checked)}
|
||||
type="checkbox"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{mode === "single" && selectable ? (
|
||||
<button
|
||||
type="button"
|
||||
aria-pressed={checked}
|
||||
className={`min-w-0 flex-1 rounded-sm px-1 text-left outline-none transition focus-visible:ring-2 focus-visible:ring-ring ${
|
||||
checked ? "text-primary" : ""
|
||||
}`}
|
||||
data-selected={checked ? "true" : undefined}
|
||||
onClick={() => onSingleSelect(node)}
|
||||
>
|
||||
{content}
|
||||
</button>
|
||||
) : (
|
||||
<div className="min-w-0 flex-1">{content}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isOpen && hasChildren ? (
|
||||
<div className="ml-4">
|
||||
{node.children.map((child) => (
|
||||
<OrgPickerTreeItem
|
||||
depth={depth + 1}
|
||||
key={nodeKey(child)}
|
||||
mode={mode}
|
||||
node={child}
|
||||
onSingleSelect={onSingleSelect}
|
||||
onToggle={onToggle}
|
||||
select={select}
|
||||
selectedKeys={selectedKeys}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function OrgPickerEmbedPage() {
|
||||
const location = useLocation();
|
||||
const searchParams = new URLSearchParams(location.search);
|
||||
const mode = parseOrgPickerMode(searchParams.get("mode"));
|
||||
const select = parseOrgPickerSelectableType(searchParams.get("select"));
|
||||
const rootTenantId = searchParams.get("rootTenantId") || undefined;
|
||||
const tenantId =
|
||||
searchParams.get("tenantId") ||
|
||||
searchParams.get("companyTenantId") ||
|
||||
undefined;
|
||||
const [includeDescendants, setIncludeDescendants] = React.useState(
|
||||
searchParams.get("includeDescendants") !== "false",
|
||||
);
|
||||
const showDescendantToggle =
|
||||
searchParams.get("showDescendantToggle") !== "false";
|
||||
const [searchQuery, setSearchQuery] = React.useState("");
|
||||
const [selectedKeys, setSelectedKeys] = React.useState<Set<string>>(
|
||||
() => new Set(),
|
||||
);
|
||||
|
||||
const tenantsQuery = useQuery({
|
||||
queryKey: ["org-picker-tenants"],
|
||||
queryFn: () => fetchTenants(10000, 0),
|
||||
});
|
||||
const usersQuery = useQuery({
|
||||
queryKey: ["org-picker-users"],
|
||||
queryFn: () => fetchUsers(5000, 0),
|
||||
});
|
||||
|
||||
React.useEffect(() => {
|
||||
postPickerMessage({ type: "orgfront:picker:ready" });
|
||||
}, []);
|
||||
|
||||
const tree = React.useMemo(() => {
|
||||
return buildOrgPickerTree({
|
||||
tenants: tenantsQuery.data?.items ?? [],
|
||||
users: select === "tenant" ? [] : (usersQuery.data?.items ?? []),
|
||||
rootTenantId,
|
||||
tenantId,
|
||||
});
|
||||
}, [rootTenantId, select, tenantId, tenantsQuery.data, usersQuery.data]);
|
||||
|
||||
const selectedItems = React.useMemo(
|
||||
() =>
|
||||
collectSelectedNodes({
|
||||
roots: tree.roots,
|
||||
selectedKeys,
|
||||
includeDescendants: mode === "multiple" && includeDescendants,
|
||||
select,
|
||||
}),
|
||||
[includeDescendants, mode, select, selectedKeys, tree.roots],
|
||||
);
|
||||
const checkedKeys = React.useMemo(
|
||||
() =>
|
||||
collectCheckedKeys({
|
||||
roots: tree.roots,
|
||||
selectedKeys,
|
||||
includeDescendants: mode === "multiple" && includeDescendants,
|
||||
select,
|
||||
}),
|
||||
[includeDescendants, mode, select, selectedKeys, tree.roots],
|
||||
);
|
||||
const filteredRoots = React.useMemo(
|
||||
() => filterPickerTree(tree.roots, searchQuery),
|
||||
[searchQuery, tree.roots],
|
||||
);
|
||||
|
||||
const handleSingleSelect = (node: OrgPickerTreeNode) => {
|
||||
setSelectedKeys(new Set([nodeKey(node)]));
|
||||
};
|
||||
|
||||
const handleToggle = (node: OrgPickerTreeNode, checked: boolean) => {
|
||||
setSelectedKeys((current) => {
|
||||
const next = new Set(current);
|
||||
const key = nodeKey(node);
|
||||
if (checked) next.add(key);
|
||||
else next.delete(key);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const confirmSelection = () => {
|
||||
const payload: OrgPickerResult = {
|
||||
mode,
|
||||
selections: selectedItems,
|
||||
};
|
||||
postPickerMessage({ type: "orgfront:picker:confirm", payload });
|
||||
};
|
||||
|
||||
const cancelSelection = () => {
|
||||
postPickerMessage({ type: "orgfront:picker:cancel" });
|
||||
};
|
||||
|
||||
const isLoading = tenantsQuery.isLoading || usersQuery.isLoading;
|
||||
const isError = tenantsQuery.isError || usersQuery.isError;
|
||||
|
||||
React.useEffect(() => {
|
||||
const htmlOverflow = document.documentElement.style.overflow;
|
||||
const bodyOverflow = document.body.style.overflow;
|
||||
document.documentElement.style.overflow = "hidden";
|
||||
document.body.style.overflow = "hidden";
|
||||
|
||||
return () => {
|
||||
document.documentElement.style.overflow = htmlOverflow;
|
||||
document.body.style.overflow = bodyOverflow;
|
||||
};
|
||||
}, []);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!isError) return;
|
||||
postPickerMessage({
|
||||
type: "orgfront:picker:error",
|
||||
error: "org_picker_load_failed",
|
||||
});
|
||||
}, [isError]);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="grid min-h-screen place-items-center bg-background p-6 text-muted-foreground">
|
||||
조직 선택기를 불러오는 중...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (isError) {
|
||||
return (
|
||||
<div className="grid min-h-screen place-items-center bg-background p-6 text-destructive">
|
||||
조직 선택기를 불러올 수 없습니다.
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-screen flex-col overflow-hidden bg-background text-foreground">
|
||||
<main className="flex min-h-0 flex-1 flex-col">
|
||||
<div
|
||||
className="shrink-0 border-b border-border bg-background p-2"
|
||||
data-testid="org-picker-search-section"
|
||||
>
|
||||
<div className="grid grid-cols-[minmax(0,1fr),auto] items-end gap-2">
|
||||
<div>
|
||||
<label className="sr-only" htmlFor="org-picker-search">
|
||||
조직/구성원 검색
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Search
|
||||
aria-hidden="true"
|
||||
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
|
||||
size={16}
|
||||
/>
|
||||
<input
|
||||
id="org-picker-search"
|
||||
className="h-9 w-full rounded-md border border-input bg-background pl-9 pr-3 text-sm"
|
||||
onChange={(event) => setSearchQuery(event.target.value)}
|
||||
placeholder="ID, 이름, 이메일, 메타데이터"
|
||||
type="search"
|
||||
value={searchQuery}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{mode === "multiple" && showDescendantToggle ? (
|
||||
<label
|
||||
className="inline-flex h-9 items-center gap-2 whitespace-nowrap text-sm"
|
||||
data-testid="org-picker-descendant-toggle"
|
||||
>
|
||||
<input
|
||||
checked={includeDescendants}
|
||||
className="h-3.5 w-3.5"
|
||||
onChange={(event) =>
|
||||
setIncludeDescendants(event.target.checked)
|
||||
}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span>하위 선택</span>
|
||||
</label>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="min-h-0 flex-1 overflow-y-auto p-3"
|
||||
data-testid="org-picker-tree-scroll"
|
||||
>
|
||||
{filteredRoots.length > 0 ? (
|
||||
<OrgPickerTree
|
||||
mode={mode}
|
||||
onSingleSelect={handleSingleSelect}
|
||||
onToggle={handleToggle}
|
||||
roots={filteredRoots}
|
||||
select={select}
|
||||
selectedKeys={checkedKeys}
|
||||
/>
|
||||
) : (
|
||||
<div className="grid min-h-40 place-items-center rounded-md border border-dashed border-border bg-background p-6 text-center text-sm text-muted-foreground">
|
||||
검색 결과가 없습니다.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer className="flex shrink-0 items-center justify-between gap-3 border-t border-border bg-background px-3 py-2">
|
||||
<div className="min-w-0 text-sm text-muted-foreground">
|
||||
{selectedItems.length > 0
|
||||
? `${selectedItems.length}개 항목 선택됨`
|
||||
: "선택된 항목이 없습니다."}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={cancelSelection} type="button" variant="outline">
|
||||
<X size={16} />
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
disabled={selectedItems.length === 0}
|
||||
onClick={confirmSelection}
|
||||
type="button"
|
||||
>
|
||||
<Check size={16} />
|
||||
선택 완료
|
||||
</Button>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function OrgPickerPage() {
|
||||
const location = useLocation();
|
||||
const [options, setOptions] = React.useState<OrgPickerEmbedOptions>(() =>
|
||||
parseOrgPickerEmbedOptions(location.search),
|
||||
);
|
||||
const pickerSrc = buildOrgPickerEmbedSrc(options);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<header className="flex flex-col gap-2 md:flex-row md:items-end md:justify-between">
|
||||
<div>
|
||||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted-foreground">
|
||||
Picker Workbench
|
||||
</p>
|
||||
<h1 className="text-2xl font-semibold">조직 선택기</h1>
|
||||
</div>
|
||||
<div className="rounded-md border border-border bg-card px-3 py-2 text-sm text-muted-foreground">
|
||||
{pickerSrc}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section className="grid gap-3 rounded-md border border-border bg-card p-4 md:grid-cols-2 lg:grid-cols-[1fr,1fr,1fr,auto,auto,auto,auto] lg:items-end">
|
||||
<label className="space-y-1 text-sm font-medium">
|
||||
<span className="block text-muted-foreground">선택 모드</span>
|
||||
<select
|
||||
className="h-10 w-full rounded-md border border-input bg-background px-3"
|
||||
value={options.mode}
|
||||
onChange={(event) =>
|
||||
setOptions((current) => ({
|
||||
...current,
|
||||
mode: event.target.value as OrgPickerMode,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<option value="multiple">복수 선택</option>
|
||||
<option value="single">단일 선택</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm font-medium">
|
||||
<span className="block text-muted-foreground">선택 대상</span>
|
||||
<select
|
||||
className="h-10 w-full rounded-md border border-input bg-background px-3"
|
||||
value={options.select}
|
||||
onChange={(event) =>
|
||||
setOptions((current) => ({
|
||||
...current,
|
||||
select: event.target.value as OrgPickerSelectableType,
|
||||
}))
|
||||
}
|
||||
>
|
||||
<option value="both">조직&구성원</option>
|
||||
<option value="tenant">조직</option>
|
||||
<option value="user">구성원</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm font-medium">
|
||||
<span className="block text-muted-foreground">tenant ID</span>
|
||||
<input
|
||||
className="h-10 w-full rounded-md border border-input bg-background px-3"
|
||||
onChange={(event) =>
|
||||
setOptions((current) => ({
|
||||
...current,
|
||||
tenantId: event.target.value,
|
||||
}))
|
||||
}
|
||||
placeholder="company-baron"
|
||||
type="text"
|
||||
value={options.tenantId}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="flex h-10 items-center gap-2 rounded-md border border-border bg-background px-3 text-sm">
|
||||
<input
|
||||
checked={options.includeDescendants}
|
||||
disabled={options.mode === "single"}
|
||||
onChange={(event) =>
|
||||
setOptions((current) => ({
|
||||
...current,
|
||||
includeDescendants: event.target.checked,
|
||||
}))
|
||||
}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span>하위 포함</span>
|
||||
</label>
|
||||
|
||||
<label className="flex h-10 items-center gap-2 rounded-md border border-border bg-background px-3 text-sm">
|
||||
<input
|
||||
checked={options.showDescendantToggle}
|
||||
disabled={options.mode === "single"}
|
||||
onChange={(event) =>
|
||||
setOptions((current) => ({
|
||||
...current,
|
||||
showDescendantToggle: event.target.checked,
|
||||
}))
|
||||
}
|
||||
type="checkbox"
|
||||
/>
|
||||
<span>하위 선택 스위치 표시</span>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm font-medium">
|
||||
<span className="block text-muted-foreground">임베딩 너비</span>
|
||||
<input
|
||||
className="h-10 w-full rounded-md border border-input bg-background px-3"
|
||||
max={1600}
|
||||
min={240}
|
||||
onChange={(event) =>
|
||||
setOptions((current) => ({
|
||||
...current,
|
||||
width: Number.parseInt(event.target.value || "400", 10),
|
||||
}))
|
||||
}
|
||||
type="number"
|
||||
value={options.width}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label className="space-y-1 text-sm font-medium">
|
||||
<span className="block text-muted-foreground">임베딩 높이</span>
|
||||
<input
|
||||
className="h-10 w-full rounded-md border border-input bg-background px-3"
|
||||
max={1600}
|
||||
min={240}
|
||||
onChange={(event) =>
|
||||
setOptions((current) => ({
|
||||
...current,
|
||||
height: Number.parseInt(event.target.value || "600", 10),
|
||||
}))
|
||||
}
|
||||
type="number"
|
||||
value={options.height}
|
||||
/>
|
||||
</label>
|
||||
</section>
|
||||
|
||||
<div
|
||||
className="max-w-full resize overflow-auto rounded-md border border-border bg-card"
|
||||
style={{
|
||||
width: options.width,
|
||||
height: options.height,
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
className="h-full w-full bg-background"
|
||||
src={pickerSrc}
|
||||
title="조직 선택기 테스트"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
63
orgfront/src/features/orgchart/userDisplay.ts
Normal file
63
orgfront/src/features/orgchart/userDisplay.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import type { TenantSummary, UserSummary } from "../../lib/adminApi";
|
||||
|
||||
type UserAppointment = {
|
||||
tenantId?: string;
|
||||
tenantSlug?: string;
|
||||
jobTitle?: string;
|
||||
position?: string;
|
||||
};
|
||||
|
||||
type TenantIdentity = Pick<TenantSummary, "id" | "slug">;
|
||||
|
||||
function normalizeText(value: unknown) {
|
||||
return typeof value === "string" ? value.trim() : "";
|
||||
}
|
||||
|
||||
function getUserAppointments(user: UserSummary): UserAppointment[] {
|
||||
const rawAppointments = user.metadata?.additionalAppointments;
|
||||
if (!Array.isArray(rawAppointments)) return [];
|
||||
|
||||
return rawAppointments
|
||||
.filter(
|
||||
(item): item is Record<string, unknown> =>
|
||||
typeof item === "object" && item !== null,
|
||||
)
|
||||
.map((item) => ({
|
||||
tenantId: normalizeText(item.tenantId),
|
||||
tenantSlug: normalizeText(item.tenantSlug),
|
||||
jobTitle: normalizeText(item.jobTitle),
|
||||
position: normalizeText(item.position),
|
||||
}));
|
||||
}
|
||||
|
||||
export function getUserOrgProfile(user: UserSummary, tenant?: TenantIdentity) {
|
||||
const appointment = getUserAppointments(user).find((item) => {
|
||||
if (tenant?.id && item.tenantId === tenant.id) return true;
|
||||
if (
|
||||
tenant?.slug &&
|
||||
item.tenantSlug &&
|
||||
item.tenantSlug.toLowerCase() === tenant.slug.toLowerCase()
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
return {
|
||||
jobTitle: appointment?.jobTitle || normalizeText(user.jobTitle),
|
||||
position: appointment?.position || normalizeText(user.position),
|
||||
};
|
||||
}
|
||||
|
||||
export function getOrgChartUserDisplayName(
|
||||
user: UserSummary,
|
||||
tenant?: TenantIdentity,
|
||||
) {
|
||||
const { jobTitle, position } = getUserOrgProfile(user, tenant);
|
||||
const baseName = user.name.trim();
|
||||
|
||||
if (jobTitle && position) return `${baseName} ${position}[${jobTitle}]`;
|
||||
if (jobTitle) return `${baseName}[${jobTitle}]`;
|
||||
if (position) return `${baseName} ${position}`;
|
||||
return baseName;
|
||||
}
|
||||
Reference in New Issue
Block a user