jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

3d에서 테이블 가져올 때 테이블, 컬럼 코멘트 같이 가져오기

Browse Source
This commit is contained in:
dohyeons
2025-11-21 15:44:52 +09:00
parent 6ccaa85413
commit dd913d3ecf
3 changed files with 137 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
frontend/components/admin/dashboard/widgets/yard-3d/HierarchyConfigPanel.tsx
View File

@@ -40,13 +40,24 @@ export interface HierarchyConfig {
};
}
interface TableInfo {
table_name: string;
description?: string;
}
interface ColumnInfo {
column_name: string;
data_type?: string;
description?: string;
}
interface HierarchyConfigPanelProps {
externalDbConnectionId: number | null;
hierarchyConfig: HierarchyConfig | null;
onHierarchyConfigChange: (config: HierarchyConfig) => void;
availableTables: string[];
availableTables: TableInfo[];
onLoadTables: () => Promise<void>;
onLoadColumns: (tableName: string) => Promise<string[]>;
onLoadColumns: (tableName: string) => Promise<ColumnInfo[]>;
}
export default function HierarchyConfigPanel({
@@ -65,7 +76,7 @@ export default function HierarchyConfigPanel({
);
const [loadingColumns, setLoadingColumns] = useState(false);
const [columnsCache, setColumnsCache] = useState<{ [tableName: string]: string[] }>({});
const [columnsCache, setColumnsCache] = useState<{ [tableName: string]: ColumnInfo[] }>({});
// 외부에서 변경된 경우 동기화
useEffect(() => {
@@ -187,8 +198,13 @@ export default function HierarchyConfigPanel({
</SelectTrigger>
<SelectContent>
{availableTables.map((table) => (
<SelectItem key={table} value={table} className="text-[10px]">
{table}
<SelectItem key={table.table_name} value={table.table_name} className="text-[10px]">
<div className="flex flex-col">
<span>{table.table_name}</span>
{table.description && (
<span className="text-[9px] text-muted-foreground">{table.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -209,8 +225,13 @@ export default function HierarchyConfigPanel({
</SelectTrigger>
<SelectContent>
{columnsCache[localConfig.warehouse.tableName].map((col) => (
<SelectItem key={col} value={col} className="text-[10px]">
{col}
<SelectItem key={col.column_name} value={col.column_name} className="text-[10px]">
<div className="flex flex-col">
<span>{col.column_name}</span>
{col.description && (
<span className="text-[8px] text-muted-foreground">{col.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -228,8 +249,13 @@ export default function HierarchyConfigPanel({
</SelectTrigger>
<SelectContent>
{columnsCache[localConfig.warehouse.tableName].map((col) => (
<SelectItem key={col} value={col} className="text-[10px]">
{col}
<SelectItem key={col.column_name} value={col.column_name} className="text-[10px]">
<div className="flex flex-col">
<span>{col.column_name}</span>
{col.description && (
<span className="text-[8px] text-muted-foreground">{col.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -287,8 +313,13 @@ export default function HierarchyConfigPanel({
</SelectTrigger>
<SelectContent>
{availableTables.map((table) => (
<SelectItem key={table} value={table} className="text-xs">
{table}
<SelectItem key={table.table_name} value={table.table_name} className="text-xs">
<div className="flex flex-col">
<span>{table.table_name}</span>
{table.description && (
<span className="text-[10px] text-muted-foreground">{table.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -308,8 +339,13 @@ export default function HierarchyConfigPanel({
</SelectTrigger>
<SelectContent>
{columnsCache[level.tableName].map((col) => (
<SelectItem key={col} value={col} className="text-xs">
{col}
<SelectItem key={col.column_name} value={col.column_name} className="text-xs">
<div className="flex flex-col">
<span>{col.column_name}</span>
{col.description && (
<span className="text-[9px] text-muted-foreground">{col.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -327,8 +363,13 @@ export default function HierarchyConfigPanel({
</SelectTrigger>
<SelectContent>
{columnsCache[level.tableName].map((col) => (
<SelectItem key={col} value={col} className="text-xs">
{col}
<SelectItem key={col.column_name} value={col.column_name} className="text-xs">
<div className="flex flex-col">
<span>{col.column_name}</span>
{col.description && (
<span className="text-[9px] text-muted-foreground">{col.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -409,8 +450,13 @@ export default function HierarchyConfigPanel({
</SelectTrigger>
<SelectContent>
{availableTables.map((table) => (
<SelectItem key={table} value={table} className="text-xs">
{table}
<SelectItem key={table.table_name} value={table.table_name} className="text-xs">
<div className="flex flex-col">
<span>{table.table_name}</span>
{table.description && (
<span className="text-[10px] text-muted-foreground">{table.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -430,8 +476,13 @@ export default function HierarchyConfigPanel({
</SelectTrigger>
<SelectContent>
{columnsCache[localConfig.material.tableName].map((col) => (
<SelectItem key={col} value={col} className="text-xs">
{col}
<SelectItem key={col.column_name} value={col.column_name} className="text-xs">
<div className="flex flex-col">
<span>{col.column_name}</span>
{col.description && (
<span className="text-[9px] text-muted-foreground">{col.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -449,8 +500,13 @@ export default function HierarchyConfigPanel({
</SelectTrigger>
<SelectContent>
{columnsCache[localConfig.material.tableName].map((col) => (
<SelectItem key={col} value={col} className="text-xs">
{col}
<SelectItem key={col.column_name} value={col.column_name} className="text-xs">
<div className="flex flex-col">
<span>{col.column_name}</span>
{col.description && (
<span className="text-[9px] text-muted-foreground">{col.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -469,8 +525,13 @@ export default function HierarchyConfigPanel({
<SelectContent>
<SelectItem value="__none__">없음</SelectItem>
{columnsCache[localConfig.material.tableName].map((col) => (
<SelectItem key={col} value={col} className="text-xs">
{col}
<SelectItem key={col.column_name} value={col.column_name} className="text-xs">
<div className="flex flex-col">
<span>{col.column_name}</span>
{col.description && (
<span className="text-[9px] text-muted-foreground">{col.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -489,8 +550,13 @@ export default function HierarchyConfigPanel({
<SelectContent>
<SelectItem value="__none__">없음</SelectItem>
{columnsCache[localConfig.material.tableName].map((col) => (
<SelectItem key={col} value={col} className="text-xs">
{col}
<SelectItem key={col.column_name} value={col.column_name} className="text-xs">
<div className="flex flex-col">
<span>{col.column_name}</span>
{col.description && (
<span className="text-[9px] text-muted-foreground">{col.description}</span>
)}
</div>
</SelectItem>
))}
</SelectContent>
@@ -507,30 +573,35 @@ export default function HierarchyConfigPanel({
</p>
<div className="max-h-60 space-y-2 overflow-y-auto rounded border p-2">
{columnsCache[localConfig.material.tableName].map((col) => {
const displayItem = localConfig.material?.displayColumns?.find((d) => d.column === col);
const displayItem = localConfig.material?.displayColumns?.find((d) => d.column === col.column_name);
const isSelected = !!displayItem;
return (
<div key={col} className="flex items-center gap-2">
<div key={col.column_name} className="flex items-center gap-2">
<input
type="checkbox"
checked={isSelected}
onChange={(e) => {
const currentDisplay = localConfig.material?.displayColumns || [];
const newDisplay = e.target.checked
? [...currentDisplay, { column: col, label: col }]
: currentDisplay.filter((d) => d.column !== col);
? [...currentDisplay, { column: col.column_name, label: col.column_name }]
: currentDisplay.filter((d) => d.column !== col.column_name);
handleMaterialChange("displayColumns", newDisplay);
}}
className="h-3 w-3 shrink-0"
/>
<span className="w-20 shrink-0 text-[10px]">{col}</span>
<div className="flex w-24 shrink-0 flex-col">
<span className="text-[10px]">{col.column_name}</span>
{col.description && (
<span className="text-[8px] text-muted-foreground">{col.description}</span>
)}
</div>
{isSelected && (
<Input
value={displayItem?.label ?? ""}
onChange={(e) => {
const currentDisplay = localConfig.material?.displayColumns || [];
const newDisplay = currentDisplay.map((d) =>
d.column === col ? { ...d, label: e.target.value } : d,
d.column === col.column_name ? { ...d, label: e.target.value } : d,
);
handleMaterialChange("displayColumns", newDisplay);
}}