109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
import React from "react";
|
||
import { TableSelector } from "./TableSelector";
|
||
import { TableDefinition } from "@/lib/api/dataflow";
|
||
import { ExtendedJsonRelationship } from "@/types/dataflowTypes";
|
||
|
||
interface DataFlowSidebarProps {
|
||
companyCode: string;
|
||
nodes: Array<{ id: string; data: { table: { tableName: string } } }>;
|
||
edges: Array<{ id: string }>;
|
||
tempRelationships: ExtendedJsonRelationship[];
|
||
hasUnsavedChanges: boolean;
|
||
currentDiagramId: number | null;
|
||
currentDiagramCategory: string;
|
||
onTableAdd: (table: TableDefinition) => void;
|
||
onRemoveOrphanedNodes: () => void;
|
||
onClearAll: () => void;
|
||
onOpenSaveModal: () => void;
|
||
getSelectedTableNames: () => string[];
|
||
}
|
||
|
||
export const DataFlowSidebar: React.FC<DataFlowSidebarProps> = ({
|
||
companyCode,
|
||
nodes,
|
||
edges,
|
||
tempRelationships,
|
||
hasUnsavedChanges,
|
||
currentDiagramId,
|
||
currentDiagramCategory,
|
||
onTableAdd,
|
||
onRemoveOrphanedNodes,
|
||
onClearAll,
|
||
onOpenSaveModal,
|
||
getSelectedTableNames,
|
||
}) => {
|
||
return (
|
||
<div className="w-80 border-r border-gray-200 bg-white shadow-lg">
|
||
<div className="p-6">
|
||
<h2 className="mb-6 text-xl font-bold text-gray-800">테이블 간 데이터 관계 설정</h2>
|
||
|
||
{/* 테이블 선택기 */}
|
||
<TableSelector companyCode={companyCode} onTableAdd={onTableAdd} selectedTables={getSelectedTableNames()} />
|
||
|
||
{/* 컨트롤 버튼들 */}
|
||
<div className="space-y-3">
|
||
<button
|
||
onClick={onRemoveOrphanedNodes}
|
||
className="w-full rounded-lg bg-orange-500 p-3 font-medium text-white transition-colors hover:bg-orange-600"
|
||
disabled={nodes.length === 0}
|
||
>
|
||
🧹 고립된 노드 정리
|
||
</button>
|
||
|
||
<button
|
||
onClick={onClearAll}
|
||
className="w-full rounded-lg bg-destructive/100 p-3 font-medium text-white transition-colors hover:bg-red-600"
|
||
>
|
||
🗑️ 전체 삭제
|
||
</button>
|
||
|
||
<button
|
||
onClick={onOpenSaveModal}
|
||
className={`w-full rounded-lg bg-green-500 p-3 font-medium text-white transition-colors hover:bg-green-600 ${
|
||
hasUnsavedChanges ? "animate-pulse" : ""
|
||
}`}
|
||
>
|
||
💾 관계 저장 {tempRelationships.length > 0 && `(${tempRelationships.length})`}
|
||
</button>
|
||
</div>
|
||
|
||
{/* 통계 정보 */}
|
||
<div className="mt-6 rounded-lg bg-gray-50 p-4">
|
||
<div className="mb-2 text-sm font-semibold text-gray-700">통계</div>
|
||
<div className="space-y-1 text-sm text-muted-foreground">
|
||
<div className="flex justify-between">
|
||
<span>테이블 노드:</span>
|
||
<span className="font-medium">{nodes.length}개</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>연결:</span>
|
||
<span className="font-medium">{edges.length}개</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>메모리 관계:</span>
|
||
<span className="font-medium text-orange-600">{tempRelationships.length}개</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>관계도 ID:</span>
|
||
<span className="font-medium">{currentDiagramId || "미설정"}</span>
|
||
</div>
|
||
<div className="flex justify-between">
|
||
<span>연결 종류:</span>
|
||
<span className="font-medium">
|
||
{currentDiagramCategory === "simple-key" && "단순 키값"}
|
||
{currentDiagramCategory === "data-save" && "데이터 저장"}
|
||
{currentDiagramCategory === "external-call" && "외부 호출"}
|
||
</span>
|
||
</div>
|
||
{hasUnsavedChanges && (
|
||
<div className="mt-2 text-xs font-medium text-orange-600">⚠️ 저장되지 않은 변경사항이 있습니다</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|