[agent-pipeline] pipe-20260311221723-l7a9 round-1
This commit is contained in:
DDD1542
parent
5093863e08
commit
8ad0c8797d
|
|
@ -13,8 +13,9 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
|
||||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
import {
|
import {
|
||||||
Settings, ChevronDown, Plus, Trash2, Check, ChevronsUpDown,
|
Settings, ChevronDown, ChevronRight, Plus, Trash2, Check, ChevronsUpDown,
|
||||||
Database, Monitor, Columns,
|
Database, Monitor, Columns,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
@ -144,10 +145,12 @@ function ColumnCombobox({
|
||||||
variant="outline"
|
variant="outline"
|
||||||
role="combobox"
|
role="combobox"
|
||||||
aria-expanded={open}
|
aria-expanded={open}
|
||||||
className="h-7 w-[140px] justify-between text-xs"
|
className="h-7 w-full justify-between text-xs"
|
||||||
disabled={loading || !tableName}
|
disabled={loading || !tableName}
|
||||||
>
|
>
|
||||||
{loading ? "로딩..." : !tableName ? "테이블 먼저 선택" : selected ? selected.displayName || selected.columnName : placeholder || "컬럼 선택"}
|
<span className="truncate">
|
||||||
|
{loading ? "로딩..." : !tableName ? "테이블 먼저 선택" : selected ? selected.displayName || selected.columnName : placeholder || "컬럼 선택"}
|
||||||
|
</span>
|
||||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
|
|
@ -220,10 +223,12 @@ function ScreenCombobox({
|
||||||
variant="outline"
|
variant="outline"
|
||||||
role="combobox"
|
role="combobox"
|
||||||
aria-expanded={open}
|
aria-expanded={open}
|
||||||
className="h-7 w-[140px] justify-between text-xs"
|
className="h-7 w-full justify-between text-xs"
|
||||||
disabled={loading}
|
disabled={loading}
|
||||||
>
|
>
|
||||||
{loading ? "로딩..." : selected ? selected.screenName : "화면 선택"}
|
<span className="truncate">
|
||||||
|
{loading ? "로딩..." : selected ? selected.screenName : "화면 선택"}
|
||||||
|
</span>
|
||||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||||
</Button>
|
</Button>
|
||||||
</PopoverTrigger>
|
</PopoverTrigger>
|
||||||
|
|
@ -262,6 +267,8 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
}) => {
|
}) => {
|
||||||
const [tables, setTables] = useState<TableInfo[]>([]);
|
const [tables, setTables] = useState<TableInfo[]>([]);
|
||||||
const [loadingTables, setLoadingTables] = useState(false);
|
const [loadingTables, setLoadingTables] = useState(false);
|
||||||
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
|
const [columnsOpen, setColumnsOpen] = useState(false);
|
||||||
const [dataSourceOpen, setDataSourceOpen] = useState(false);
|
const [dataSourceOpen, setDataSourceOpen] = useState(false);
|
||||||
const [layoutOpen, setLayoutOpen] = useState(false);
|
const [layoutOpen, setLayoutOpen] = useState(false);
|
||||||
|
|
||||||
|
|
@ -344,107 +351,172 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{/* ─── 1단계: 모달 연동 ─── */}
|
{/* ─── 1단계: 모달 연동 (Collapsible) ─── */}
|
||||||
<div className="space-y-2">
|
<Collapsible open={modalOpen} onOpenChange={setModalOpen}>
|
||||||
<div className="flex items-center gap-2">
|
<CollapsibleTrigger asChild>
|
||||||
<Monitor className="h-4 w-4 text-muted-foreground" />
|
<button
|
||||||
<p className="text-sm font-medium">모달 연동</p>
|
type="button"
|
||||||
</div>
|
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
||||||
<p className="text-[11px] text-muted-foreground">버전 추가/공정 추가·수정 시 열리는 화면을 설정해요</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-3">
|
|
||||||
<div className="flex items-center justify-between py-1">
|
|
||||||
<span className="text-xs text-muted-foreground">버전 추가 화면</span>
|
|
||||||
<ScreenCombobox
|
|
||||||
value={config.modals.versionAddScreenId}
|
|
||||||
onChange={(v) => updateModals("versionAddScreenId", v)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-1">
|
|
||||||
<span className="text-xs text-muted-foreground">공정 추가 화면</span>
|
|
||||||
<ScreenCombobox
|
|
||||||
value={config.modals.processAddScreenId}
|
|
||||||
onChange={(v) => updateModals("processAddScreenId", v)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-1">
|
|
||||||
<span className="text-xs text-muted-foreground">공정 수정 화면</span>
|
|
||||||
<ScreenCombobox
|
|
||||||
value={config.modals.processEditScreenId}
|
|
||||||
onChange={(v) => updateModals("processEditScreenId", v)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ─── 2단계: 공정 테이블 컬럼 ─── */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Columns className="h-4 w-4 text-muted-foreground" />
|
|
||||||
<p className="text-sm font-medium">공정 테이블 컬럼</p>
|
|
||||||
</div>
|
|
||||||
<p className="text-[11px] text-muted-foreground">공정 순서 테이블에 표시할 컬럼을 설정해요</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-2">
|
|
||||||
{config.processColumns.map((col, idx) => (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className="flex items-center gap-1.5 rounded-md border bg-background p-2"
|
|
||||||
>
|
>
|
||||||
<Input
|
<div className="flex items-center gap-2">
|
||||||
value={col.name}
|
<Monitor className="h-4 w-4 text-muted-foreground" />
|
||||||
onChange={(e) => updateColumn(idx, "name", e.target.value)}
|
<span className="text-sm font-medium">모달 연동</span>
|
||||||
className="h-7 w-24 text-[10px]"
|
<Badge variant="secondary" className="text-[10px] h-5">
|
||||||
placeholder="컬럼명"
|
{[config.modals.versionAddScreenId, config.modals.processAddScreenId, config.modals.processEditScreenId].filter(Boolean).length}개 설정됨
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<ChevronDown
|
||||||
|
className={cn(
|
||||||
|
"h-4 w-4 text-muted-foreground transition-transform duration-200",
|
||||||
|
modalOpen && "rotate-180",
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
<Input
|
</button>
|
||||||
value={col.label}
|
</CollapsibleTrigger>
|
||||||
onChange={(e) => updateColumn(idx, "label", e.target.value)}
|
<CollapsibleContent>
|
||||||
className="h-7 flex-1 text-[10px]"
|
<div className="rounded-b-lg border border-t-0 p-3 space-y-2">
|
||||||
placeholder="표시명"
|
<p className="text-[10px] text-muted-foreground">버전 추가/공정 추가·수정 시 열리는 화면</p>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">버전 추가</span>
|
||||||
|
<ScreenCombobox
|
||||||
|
value={config.modals.versionAddScreenId}
|
||||||
|
onChange={(v) => updateModals("versionAddScreenId", v)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">공정 추가</span>
|
||||||
|
<ScreenCombobox
|
||||||
|
value={config.modals.processAddScreenId}
|
||||||
|
onChange={(v) => updateModals("processAddScreenId", v)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">공정 수정</span>
|
||||||
|
<ScreenCombobox
|
||||||
|
value={config.modals.processEditScreenId}
|
||||||
|
onChange={(v) => updateModals("processEditScreenId", v)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
|
|
||||||
|
{/* ─── 2단계: 공정 테이블 컬럼 (Collapsible + 접이식 카드) ─── */}
|
||||||
|
<Collapsible open={columnsOpen} onOpenChange={setColumnsOpen}>
|
||||||
|
<CollapsibleTrigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Columns className="h-4 w-4 text-muted-foreground" />
|
||||||
|
<span className="text-sm font-medium">테이블 컬럼</span>
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-5">
|
||||||
|
{config.processColumns.length}개
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<ChevronDown
|
||||||
|
className={cn(
|
||||||
|
"h-4 w-4 text-muted-foreground transition-transform duration-200",
|
||||||
|
columnsOpen && "rotate-180",
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
<Input
|
</button>
|
||||||
type="number"
|
</CollapsibleTrigger>
|
||||||
value={col.width || 100}
|
<CollapsibleContent>
|
||||||
onChange={(e) => updateColumn(idx, "width", parseInt(e.target.value) || 100)}
|
<div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
|
||||||
className="h-7 w-14 text-[10px]"
|
<p className="text-[10px] text-muted-foreground mb-1">공정 순서 테이블에 표시할 컬럼</p>
|
||||||
placeholder="너비"
|
<div className="max-h-[250px] space-y-1 overflow-y-auto">
|
||||||
/>
|
{config.processColumns.map((col, idx) => (
|
||||||
<Select
|
<Collapsible key={idx}>
|
||||||
value={col.align || "left"}
|
<div className="rounded-md border">
|
||||||
onValueChange={(v) => updateColumn(idx, "align", v)}
|
<CollapsibleTrigger asChild>
|
||||||
>
|
<button
|
||||||
<SelectTrigger className="h-7 w-16 text-[10px]">
|
type="button"
|
||||||
<SelectValue />
|
className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
|
||||||
</SelectTrigger>
|
>
|
||||||
<SelectContent>
|
<ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
|
||||||
<SelectItem value="left">좌</SelectItem>
|
<span className="text-[10px] text-muted-foreground font-medium shrink-0">#{idx + 1}</span>
|
||||||
<SelectItem value="center">중</SelectItem>
|
<span className="text-xs font-medium truncate flex-1 min-w-0">{col.name || "미설정"}</span>
|
||||||
<SelectItem value="right">우</SelectItem>
|
<span className="text-[10px] text-muted-foreground truncate max-w-[60px] shrink-0">{col.label}</span>
|
||||||
</SelectContent>
|
<Badge variant="outline" className="text-[9px] h-4 shrink-0">{col.align || "left"}</Badge>
|
||||||
</Select>
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={(e) => { e.stopPropagation(); removeColumn(idx); }}
|
||||||
|
className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
</button>
|
||||||
|
</CollapsibleTrigger>
|
||||||
|
<CollapsibleContent>
|
||||||
|
<div className="grid grid-cols-2 gap-1.5 border-t px-2.5 py-2">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<span className="text-[10px] text-muted-foreground">컬럼명</span>
|
||||||
|
<Input
|
||||||
|
value={col.name}
|
||||||
|
onChange={(e) => updateColumn(idx, "name", e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
placeholder="컬럼명"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<span className="text-[10px] text-muted-foreground">표시명</span>
|
||||||
|
<Input
|
||||||
|
value={col.label}
|
||||||
|
onChange={(e) => updateColumn(idx, "label", e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
placeholder="표시명"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<span className="text-[10px] text-muted-foreground">너비</span>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={col.width || 100}
|
||||||
|
onChange={(e) => updateColumn(idx, "width", parseInt(e.target.value) || 100)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
placeholder="100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<span className="text-[10px] text-muted-foreground">정렬</span>
|
||||||
|
<Select
|
||||||
|
value={col.align || "left"}
|
||||||
|
onValueChange={(v) => updateColumn(idx, "align", v)}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="h-7 text-xs">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="left">좌</SelectItem>
|
||||||
|
<SelectItem value="center">중</SelectItem>
|
||||||
|
<SelectItem value="right">우</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</div>
|
||||||
|
</Collapsible>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="outline"
|
||||||
size="icon"
|
size="sm"
|
||||||
className="h-6 w-6 shrink-0 text-destructive hover:text-destructive"
|
className="h-7 w-full gap-1 text-xs border-dashed"
|
||||||
onClick={() => removeColumn(idx)}
|
onClick={addColumn}
|
||||||
>
|
>
|
||||||
<Trash2 className="h-3 w-3" />
|
<Plus className="h-3 w-3" />
|
||||||
|
컬럼 추가
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="h-7 w-full gap-1 text-xs"
|
|
||||||
onClick={addColumn}
|
|
||||||
>
|
|
||||||
<Plus className="h-3 w-3" />
|
|
||||||
컬럼 추가
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ─── 3단계: 데이터 소스 (Collapsible) ─── */}
|
{/* ─── 3단계: 데이터 소스 (Collapsible) ─── */}
|
||||||
<Collapsible open={dataSourceOpen} onOpenChange={setDataSourceOpen}>
|
<Collapsible open={dataSourceOpen} onOpenChange={setDataSourceOpen}>
|
||||||
|
|
@ -456,6 +528,11 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Database className="h-4 w-4 text-muted-foreground" />
|
<Database className="h-4 w-4 text-muted-foreground" />
|
||||||
<span className="text-sm font-medium">데이터 소스 설정</span>
|
<span className="text-sm font-medium">데이터 소스 설정</span>
|
||||||
|
{config.dataSource.itemTable && (
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-5 truncate max-w-[100px]">
|
||||||
|
{config.dataSource.itemTable}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<ChevronDown
|
<ChevronDown
|
||||||
className={cn(
|
className={cn(
|
||||||
|
|
@ -476,7 +553,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
loading={loadingTables}
|
loading={loadingTables}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between py-1">
|
<div className="space-y-1">
|
||||||
<span className="text-xs text-muted-foreground">품목명 컬럼</span>
|
<span className="text-xs text-muted-foreground">품목명 컬럼</span>
|
||||||
<ColumnCombobox
|
<ColumnCombobox
|
||||||
value={config.dataSource.itemNameColumn}
|
value={config.dataSource.itemNameColumn}
|
||||||
|
|
@ -485,7 +562,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
placeholder="품목명"
|
placeholder="품목명"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between py-1">
|
<div className="space-y-1">
|
||||||
<span className="text-xs text-muted-foreground">품목코드 컬럼</span>
|
<span className="text-xs text-muted-foreground">품목코드 컬럼</span>
|
||||||
<ColumnCombobox
|
<ColumnCombobox
|
||||||
value={config.dataSource.itemCodeColumn}
|
value={config.dataSource.itemCodeColumn}
|
||||||
|
|
@ -503,7 +580,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
loading={loadingTables}
|
loading={loadingTables}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between py-1">
|
<div className="space-y-1">
|
||||||
<span className="text-xs text-muted-foreground">품목 FK 컬럼</span>
|
<span className="text-xs text-muted-foreground">품목 FK 컬럼</span>
|
||||||
<ColumnCombobox
|
<ColumnCombobox
|
||||||
value={config.dataSource.routingVersionFkColumn}
|
value={config.dataSource.routingVersionFkColumn}
|
||||||
|
|
@ -512,7 +589,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
placeholder="FK 컬럼"
|
placeholder="FK 컬럼"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between py-1">
|
<div className="space-y-1">
|
||||||
<span className="text-xs text-muted-foreground">버전명 컬럼</span>
|
<span className="text-xs text-muted-foreground">버전명 컬럼</span>
|
||||||
<ColumnCombobox
|
<ColumnCombobox
|
||||||
value={config.dataSource.routingVersionNameColumn}
|
value={config.dataSource.routingVersionNameColumn}
|
||||||
|
|
@ -530,7 +607,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
loading={loadingTables}
|
loading={loadingTables}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between py-1">
|
<div className="space-y-1">
|
||||||
<span className="text-xs text-muted-foreground">버전 FK 컬럼</span>
|
<span className="text-xs text-muted-foreground">버전 FK 컬럼</span>
|
||||||
<ColumnCombobox
|
<ColumnCombobox
|
||||||
value={config.dataSource.routingDetailFkColumn}
|
value={config.dataSource.routingDetailFkColumn}
|
||||||
|
|
@ -548,7 +625,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
loading={loadingTables}
|
loading={loadingTables}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between py-1">
|
<div className="space-y-1">
|
||||||
<span className="text-xs text-muted-foreground">공정명 컬럼</span>
|
<span className="text-xs text-muted-foreground">공정명 컬럼</span>
|
||||||
<ColumnCombobox
|
<ColumnCombobox
|
||||||
value={config.dataSource.processNameColumn}
|
value={config.dataSource.processNameColumn}
|
||||||
|
|
@ -557,7 +634,7 @@ export const V2ItemRoutingConfigPanel: React.FC<V2ItemRoutingConfigPanelProps> =
|
||||||
placeholder="공정명"
|
placeholder="공정명"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between py-1">
|
<div className="space-y-1">
|
||||||
<span className="text-xs text-muted-foreground">공정코드 컬럼</span>
|
<span className="text-xs text-muted-foreground">공정코드 컬럼</span>
|
||||||
<ColumnCombobox
|
<ColumnCombobox
|
||||||
value={config.dataSource.processCodeColumn}
|
value={config.dataSource.processCodeColumn}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* V2 공정 작업기준 설정 패널
|
* V2 공정 작업기준 설정 패널
|
||||||
* 토스식 단계별 UX: 데이터 소스 -> 작업 단계 관리 -> 상세 유형 관리 -> 레이아웃(접힘)
|
* Progressive Disclosure: 작업 단계 -> 상세 유형 -> 고급 설정(접힘)
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
|
|
@ -10,7 +10,8 @@ import { Input } from "@/components/ui/input";
|
||||||
import { Switch } from "@/components/ui/switch";
|
import { Switch } from "@/components/ui/switch";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
|
||||||
import { Settings, ChevronDown, Plus, Trash2, GripVertical, Database, Layers } from "lucide-react";
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Settings, ChevronDown, ChevronRight, Plus, Trash2, Database, Layers, List } from "lucide-react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import type {
|
import type {
|
||||||
ProcessWorkStandardConfig,
|
ProcessWorkStandardConfig,
|
||||||
|
|
@ -28,8 +29,10 @@ export const V2ProcessWorkStandardConfigPanel: React.FC<V2ProcessWorkStandardCon
|
||||||
config: configProp,
|
config: configProp,
|
||||||
onChange,
|
onChange,
|
||||||
}) => {
|
}) => {
|
||||||
|
const [phasesOpen, setPhasesOpen] = useState(false);
|
||||||
|
const [detailTypesOpen, setDetailTypesOpen] = useState(false);
|
||||||
|
const [advancedOpen, setAdvancedOpen] = useState(false);
|
||||||
const [dataSourceOpen, setDataSourceOpen] = useState(false);
|
const [dataSourceOpen, setDataSourceOpen] = useState(false);
|
||||||
const [layoutOpen, setLayoutOpen] = useState(false);
|
|
||||||
|
|
||||||
const config: ProcessWorkStandardConfig = {
|
const config: ProcessWorkStandardConfig = {
|
||||||
...defaultConfig,
|
...defaultConfig,
|
||||||
|
|
@ -90,220 +93,197 @@ export const V2ProcessWorkStandardConfigPanel: React.FC<V2ProcessWorkStandardCon
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
{/* ─── 1단계: 작업 단계 설정 ─── */}
|
{/* ─── 1단계: 작업 단계 설정 (Collapsible + 접이식 카드) ─── */}
|
||||||
<div className="space-y-2">
|
<Collapsible open={phasesOpen} onOpenChange={setPhasesOpen}>
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Layers className="h-4 w-4 text-muted-foreground" />
|
|
||||||
<p className="text-sm font-medium">작업 단계 설정</p>
|
|
||||||
</div>
|
|
||||||
<p className="text-[11px] text-muted-foreground">공정별 작업 단계(Phase)를 정의해요</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-2">
|
|
||||||
{config.phases.map((phase, idx) => (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className="flex items-center gap-1.5 rounded-md border bg-background p-2"
|
|
||||||
>
|
|
||||||
<GripVertical className="h-3.5 w-3.5 shrink-0 text-muted-foreground/50" />
|
|
||||||
<Input
|
|
||||||
value={phase.key}
|
|
||||||
onChange={(e) => updatePhase(idx, "key", e.target.value)}
|
|
||||||
className="h-7 w-20 text-[10px]"
|
|
||||||
placeholder="키"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
value={phase.label}
|
|
||||||
onChange={(e) => updatePhase(idx, "label", e.target.value)}
|
|
||||||
className="h-7 flex-1 text-[10px]"
|
|
||||||
placeholder="표시명"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
min={1}
|
|
||||||
value={phase.sortOrder}
|
|
||||||
onChange={(e) => updatePhase(idx, "sortOrder", parseInt(e.target.value) || 1)}
|
|
||||||
className="h-7 w-12 text-[10px] text-center"
|
|
||||||
placeholder="순서"
|
|
||||||
title="정렬 순서"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="h-6 w-6 shrink-0 text-destructive hover:text-destructive"
|
|
||||||
onClick={() => removePhase(idx)}
|
|
||||||
disabled={config.phases.length <= 1}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="h-7 w-full gap-1 text-xs"
|
|
||||||
onClick={addPhase}
|
|
||||||
>
|
|
||||||
<Plus className="h-3 w-3" />
|
|
||||||
단계 추가
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ─── 2단계: 상세 유형 옵션 ─── */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<p className="text-sm font-medium">상세 유형 옵션</p>
|
|
||||||
<p className="text-[11px] text-muted-foreground">작업 항목의 상세 유형 드롭다운 옵션을 설정해요</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="rounded-lg border bg-muted/30 p-4 space-y-2">
|
|
||||||
{config.detailTypes.map((dt, idx) => (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className="flex items-center gap-1.5 rounded-md border bg-background p-2"
|
|
||||||
>
|
|
||||||
<Input
|
|
||||||
value={dt.value}
|
|
||||||
onChange={(e) => updateDetailType(idx, "value", e.target.value)}
|
|
||||||
className="h-7 w-24 text-[10px]"
|
|
||||||
placeholder="값"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
value={dt.label}
|
|
||||||
onChange={(e) => updateDetailType(idx, "label", e.target.value)}
|
|
||||||
className="h-7 flex-1 text-[10px]"
|
|
||||||
placeholder="표시명"
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="h-6 w-6 shrink-0 text-destructive hover:text-destructive"
|
|
||||||
onClick={() => removeDetailType(idx)}
|
|
||||||
disabled={config.detailTypes.length <= 1}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
className="h-7 w-full gap-1 text-xs"
|
|
||||||
onClick={addDetailType}
|
|
||||||
>
|
|
||||||
<Plus className="h-3 w-3" />
|
|
||||||
유형 추가
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* ─── 3단계: 데이터 소스 (Collapsible) ─── */}
|
|
||||||
<Collapsible open={dataSourceOpen} onOpenChange={setDataSourceOpen}>
|
|
||||||
<CollapsibleTrigger asChild>
|
<CollapsibleTrigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Database className="h-4 w-4 text-muted-foreground" />
|
<Layers className="h-4 w-4 text-muted-foreground" />
|
||||||
<span className="text-sm font-medium">데이터 소스 설정</span>
|
<span className="text-sm font-medium">작업 단계</span>
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-5">
|
||||||
|
{config.phases.length}개
|
||||||
|
</Badge>
|
||||||
</div>
|
</div>
|
||||||
<ChevronDown
|
<ChevronDown
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-4 w-4 text-muted-foreground transition-transform duration-200",
|
"h-4 w-4 text-muted-foreground transition-transform duration-200",
|
||||||
dataSourceOpen && "rotate-180"
|
phasesOpen && "rotate-180",
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</CollapsibleTrigger>
|
</CollapsibleTrigger>
|
||||||
<CollapsibleContent>
|
<CollapsibleContent>
|
||||||
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
|
<div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
|
||||||
<div className="flex items-center justify-between py-1">
|
<p className="text-[10px] text-muted-foreground mb-1">공정별 작업 단계(Phase)를 정의</p>
|
||||||
<span className="text-xs text-muted-foreground">품목 테이블</span>
|
<div className="max-h-[250px] space-y-1 overflow-y-auto">
|
||||||
<Input
|
{config.phases.map((phase, idx) => (
|
||||||
value={config.dataSource.itemTable}
|
<Collapsible key={idx}>
|
||||||
onChange={(e) => updateDataSource("itemTable", e.target.value)}
|
<div className="rounded-md border">
|
||||||
className="h-7 w-[160px] text-xs"
|
<CollapsibleTrigger asChild>
|
||||||
/>
|
<button
|
||||||
</div>
|
type="button"
|
||||||
<div className="flex items-center justify-between py-1">
|
className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
|
||||||
<span className="text-xs text-muted-foreground">품목명 컬럼</span>
|
>
|
||||||
<Input
|
<ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
|
||||||
value={config.dataSource.itemNameColumn}
|
<span className="text-[10px] text-muted-foreground font-medium shrink-0">#{idx + 1}</span>
|
||||||
onChange={(e) => updateDataSource("itemNameColumn", e.target.value)}
|
<span className="text-xs font-medium truncate flex-1 min-w-0">{phase.label}</span>
|
||||||
className="h-7 w-[160px] text-xs"
|
<Badge variant="outline" className="text-[9px] h-4 shrink-0">{phase.key}</Badge>
|
||||||
/>
|
<Button
|
||||||
</div>
|
type="button"
|
||||||
<div className="flex items-center justify-between py-1">
|
variant="ghost"
|
||||||
<span className="text-xs text-muted-foreground">품목코드 컬럼</span>
|
size="sm"
|
||||||
<Input
|
onClick={(e) => { e.stopPropagation(); removePhase(idx); }}
|
||||||
value={config.dataSource.itemCodeColumn}
|
className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0"
|
||||||
onChange={(e) => updateDataSource("itemCodeColumn", e.target.value)}
|
disabled={config.phases.length <= 1}
|
||||||
className="h-7 w-[160px] text-xs"
|
>
|
||||||
/>
|
<Trash2 className="h-3 w-3" />
|
||||||
</div>
|
</Button>
|
||||||
<div className="flex items-center justify-between py-1">
|
</button>
|
||||||
<span className="text-xs text-muted-foreground">라우팅 버전 테이블</span>
|
</CollapsibleTrigger>
|
||||||
<Input
|
<CollapsibleContent>
|
||||||
value={config.dataSource.routingVersionTable}
|
<div className="grid grid-cols-3 gap-1.5 border-t px-2.5 py-2">
|
||||||
onChange={(e) => updateDataSource("routingVersionTable", e.target.value)}
|
<div className="space-y-0.5">
|
||||||
className="h-7 w-[160px] text-xs"
|
<span className="text-[10px] text-muted-foreground">키</span>
|
||||||
/>
|
<Input
|
||||||
</div>
|
value={phase.key}
|
||||||
<div className="flex items-center justify-between py-1">
|
onChange={(e) => updatePhase(idx, "key", e.target.value)}
|
||||||
<span className="text-xs text-muted-foreground">품목 연결 FK</span>
|
className="h-7 text-xs"
|
||||||
<Input
|
placeholder="키"
|
||||||
value={config.dataSource.routingFkColumn}
|
/>
|
||||||
onChange={(e) => updateDataSource("routingFkColumn", e.target.value)}
|
</div>
|
||||||
className="h-7 w-[160px] text-xs"
|
<div className="space-y-0.5">
|
||||||
/>
|
<span className="text-[10px] text-muted-foreground">표시명</span>
|
||||||
</div>
|
<Input
|
||||||
<div className="flex items-center justify-between py-1">
|
value={phase.label}
|
||||||
<span className="text-xs text-muted-foreground">버전명 컬럼</span>
|
onChange={(e) => updatePhase(idx, "label", e.target.value)}
|
||||||
<Input
|
className="h-7 text-xs"
|
||||||
value={config.dataSource.routingVersionNameColumn}
|
placeholder="표시명"
|
||||||
onChange={(e) => updateDataSource("routingVersionNameColumn", e.target.value)}
|
/>
|
||||||
className="h-7 w-[160px] text-xs"
|
</div>
|
||||||
/>
|
<div className="space-y-0.5">
|
||||||
</div>
|
<span className="text-[10px] text-muted-foreground">순서</span>
|
||||||
<div className="flex items-center justify-between py-1">
|
<Input
|
||||||
<span className="text-xs text-muted-foreground">라우팅 상세 테이블</span>
|
type="number"
|
||||||
<Input
|
min={1}
|
||||||
value={config.dataSource.routingDetailTable}
|
value={phase.sortOrder}
|
||||||
onChange={(e) => updateDataSource("routingDetailTable", e.target.value)}
|
onChange={(e) => updatePhase(idx, "sortOrder", parseInt(e.target.value) || 1)}
|
||||||
className="h-7 w-[160px] text-xs"
|
className="h-7 text-xs text-center"
|
||||||
/>
|
placeholder="1"
|
||||||
</div>
|
/>
|
||||||
<div className="flex items-center justify-between py-1">
|
</div>
|
||||||
<span className="text-xs text-muted-foreground">공정 마스터 테이블</span>
|
</div>
|
||||||
<Input
|
</CollapsibleContent>
|
||||||
value={config.dataSource.processTable}
|
</div>
|
||||||
onChange={(e) => updateDataSource("processTable", e.target.value)}
|
</Collapsible>
|
||||||
className="h-7 w-[160px] text-xs"
|
))}
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-1">
|
|
||||||
<span className="text-xs text-muted-foreground">공정명 컬럼</span>
|
|
||||||
<Input
|
|
||||||
value={config.dataSource.processNameColumn}
|
|
||||||
onChange={(e) => updateDataSource("processNameColumn", e.target.value)}
|
|
||||||
className="h-7 w-[160px] text-xs"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between py-1">
|
|
||||||
<span className="text-xs text-muted-foreground">공정코드 컬럼</span>
|
|
||||||
<Input
|
|
||||||
value={config.dataSource.processCodeColumn}
|
|
||||||
onChange={(e) => updateDataSource("processCodeColumn", e.target.value)}
|
|
||||||
className="h-7 w-[160px] text-xs"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 w-full gap-1 text-xs border-dashed"
|
||||||
|
onClick={addPhase}
|
||||||
|
>
|
||||||
|
<Plus className="h-3 w-3" />
|
||||||
|
단계 추가
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
|
|
||||||
{/* ─── 4단계: 레이아웃 & 기타 (Collapsible) ─── */}
|
{/* ─── 2단계: 상세 유형 옵션 (Collapsible + 접이식 카드) ─── */}
|
||||||
<Collapsible open={layoutOpen} onOpenChange={setLayoutOpen}>
|
<Collapsible open={detailTypesOpen} onOpenChange={setDetailTypesOpen}>
|
||||||
|
<CollapsibleTrigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<List className="h-4 w-4 text-muted-foreground" />
|
||||||
|
<span className="text-sm font-medium">상세 유형</span>
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-5">
|
||||||
|
{config.detailTypes.length}개
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<ChevronDown
|
||||||
|
className={cn(
|
||||||
|
"h-4 w-4 text-muted-foreground transition-transform duration-200",
|
||||||
|
detailTypesOpen && "rotate-180",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</CollapsibleTrigger>
|
||||||
|
<CollapsibleContent>
|
||||||
|
<div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
|
||||||
|
<p className="text-[10px] text-muted-foreground mb-1">작업 항목의 상세 유형 드롭다운 옵션</p>
|
||||||
|
<div className="max-h-[250px] space-y-1 overflow-y-auto">
|
||||||
|
{config.detailTypes.map((dt, idx) => (
|
||||||
|
<Collapsible key={idx}>
|
||||||
|
<div className="rounded-md border">
|
||||||
|
<CollapsibleTrigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left hover:bg-muted/30 transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronRight className="h-3 w-3 text-muted-foreground transition-transform [[data-state=open]>&]:rotate-90 shrink-0" />
|
||||||
|
<span className="text-[10px] text-muted-foreground font-medium shrink-0">#{idx + 1}</span>
|
||||||
|
<span className="text-xs font-medium truncate flex-1 min-w-0">{dt.label}</span>
|
||||||
|
<Badge variant="outline" className="text-[9px] h-4 shrink-0">{dt.value}</Badge>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={(e) => { e.stopPropagation(); removeDetailType(idx); }}
|
||||||
|
className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0"
|
||||||
|
disabled={config.detailTypes.length <= 1}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
|
</button>
|
||||||
|
</CollapsibleTrigger>
|
||||||
|
<CollapsibleContent>
|
||||||
|
<div className="grid grid-cols-2 gap-1.5 border-t px-2.5 py-2">
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<span className="text-[10px] text-muted-foreground">값</span>
|
||||||
|
<Input
|
||||||
|
value={dt.value}
|
||||||
|
onChange={(e) => updateDetailType(idx, "value", e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
placeholder="값"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-0.5">
|
||||||
|
<span className="text-[10px] text-muted-foreground">표시명</span>
|
||||||
|
<Input
|
||||||
|
value={dt.label}
|
||||||
|
onChange={(e) => updateDetailType(idx, "label", e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
placeholder="표시명"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</div>
|
||||||
|
</Collapsible>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 w-full gap-1 text-xs border-dashed"
|
||||||
|
onClick={addDetailType}
|
||||||
|
>
|
||||||
|
<Plus className="h-3 w-3" />
|
||||||
|
유형 추가
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
|
|
||||||
|
{/* ─── 3단계: 고급 설정 (데이터 소스 + 레이아웃 통합) ─── */}
|
||||||
|
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
|
||||||
<CollapsibleTrigger asChild>
|
<CollapsibleTrigger asChild>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|
@ -311,53 +291,170 @@ export const V2ProcessWorkStandardConfigPanel: React.FC<V2ProcessWorkStandardCon
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Settings className="h-4 w-4 text-muted-foreground" />
|
<Settings className="h-4 w-4 text-muted-foreground" />
|
||||||
<span className="text-sm font-medium">레이아웃 & 기타</span>
|
<span className="text-sm font-medium">고급 설정</span>
|
||||||
</div>
|
</div>
|
||||||
<ChevronDown
|
<ChevronDown
|
||||||
className={cn(
|
className={cn(
|
||||||
"h-4 w-4 text-muted-foreground transition-transform duration-200",
|
"h-4 w-4 text-muted-foreground transition-transform duration-200",
|
||||||
layoutOpen && "rotate-180"
|
advancedOpen && "rotate-180",
|
||||||
)}
|
)}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</CollapsibleTrigger>
|
</CollapsibleTrigger>
|
||||||
<CollapsibleContent>
|
<CollapsibleContent>
|
||||||
<div className="rounded-b-lg border border-t-0 p-4 space-y-3">
|
<div className="rounded-b-lg border border-t-0 p-3 space-y-3">
|
||||||
<div className="flex items-center justify-between py-1">
|
|
||||||
<div>
|
{/* 레이아웃 기본 설정 */}
|
||||||
<span className="text-xs text-muted-foreground">좌측 패널 비율 (%)</span>
|
<div className="space-y-2">
|
||||||
<p className="text-[10px] text-muted-foreground mt-0.5">품목/공정 선택 패널의 너비</p>
|
<div className="flex items-center justify-between py-1">
|
||||||
|
<div>
|
||||||
|
<span className="text-xs text-muted-foreground">좌측 패널 비율 (%)</span>
|
||||||
|
<p className="text-[10px] text-muted-foreground mt-0.5">품목/공정 선택 패널의 너비</p>
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
min={15}
|
||||||
|
max={50}
|
||||||
|
value={config.splitRatio || 30}
|
||||||
|
onChange={(e) => update({ splitRatio: parseInt(e.target.value) || 30 })}
|
||||||
|
className="h-7 w-[80px] text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between py-1">
|
||||||
|
<span className="text-xs text-muted-foreground">좌측 패널 제목</span>
|
||||||
|
<Input
|
||||||
|
value={config.leftPanelTitle || ""}
|
||||||
|
onChange={(e) => update({ leftPanelTitle: e.target.value })}
|
||||||
|
placeholder="품목 및 공정 선택"
|
||||||
|
className="h-7 w-[140px] text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between py-1">
|
||||||
|
<div>
|
||||||
|
<p className="text-xs">읽기 전용</p>
|
||||||
|
<p className="text-[10px] text-muted-foreground">수정/삭제 버튼을 숨겨요</p>
|
||||||
|
</div>
|
||||||
|
<Switch
|
||||||
|
checked={config.readonly || false}
|
||||||
|
onCheckedChange={(checked) => update({ readonly: checked })}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Input
|
|
||||||
type="number"
|
|
||||||
min={15}
|
|
||||||
max={50}
|
|
||||||
value={config.splitRatio || 30}
|
|
||||||
onChange={(e) => update({ splitRatio: parseInt(e.target.value) || 30 })}
|
|
||||||
className="h-7 w-[80px] text-xs"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center justify-between py-1">
|
{/* 데이터 소스 (서브 Collapsible) */}
|
||||||
<span className="text-xs text-muted-foreground">좌측 패널 제목</span>
|
<Collapsible open={dataSourceOpen} onOpenChange={setDataSourceOpen}>
|
||||||
<Input
|
<CollapsibleTrigger asChild>
|
||||||
value={config.leftPanelTitle || ""}
|
<button
|
||||||
onChange={(e) => update({ leftPanelTitle: e.target.value })}
|
type="button"
|
||||||
placeholder="품목 및 공정 선택"
|
className="flex w-full items-center justify-between rounded-md border px-3 py-2 transition-colors hover:bg-muted/30"
|
||||||
className="h-7 w-[160px] text-xs"
|
>
|
||||||
/>
|
<div className="flex items-center gap-2">
|
||||||
</div>
|
<Database className="h-3.5 w-3.5 text-muted-foreground" />
|
||||||
|
<span className="text-xs font-medium">데이터 소스</span>
|
||||||
|
{config.dataSource.itemTable && (
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-5 truncate max-w-[100px]">
|
||||||
|
{config.dataSource.itemTable}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<ChevronDown
|
||||||
|
className={cn(
|
||||||
|
"h-3.5 w-3.5 text-muted-foreground transition-transform",
|
||||||
|
dataSourceOpen && "rotate-180",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</CollapsibleTrigger>
|
||||||
|
<CollapsibleContent className="space-y-2 pt-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">품목 테이블</span>
|
||||||
|
<Input
|
||||||
|
value={config.dataSource.itemTable}
|
||||||
|
onChange={(e) => updateDataSource("itemTable", e.target.value)}
|
||||||
|
className="h-7 w-full text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">품목명 컬럼</span>
|
||||||
|
<Input
|
||||||
|
value={config.dataSource.itemNameColumn}
|
||||||
|
onChange={(e) => updateDataSource("itemNameColumn", e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">품목코드 컬럼</span>
|
||||||
|
<Input
|
||||||
|
value={config.dataSource.itemCodeColumn}
|
||||||
|
onChange={(e) => updateDataSource("itemCodeColumn", e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1 pt-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">라우팅 버전 테이블</span>
|
||||||
|
<Input
|
||||||
|
value={config.dataSource.routingVersionTable}
|
||||||
|
onChange={(e) => updateDataSource("routingVersionTable", e.target.value)}
|
||||||
|
className="h-7 w-full text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">품목 연결 FK</span>
|
||||||
|
<Input
|
||||||
|
value={config.dataSource.routingFkColumn}
|
||||||
|
onChange={(e) => updateDataSource("routingFkColumn", e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">버전명 컬럼</span>
|
||||||
|
<Input
|
||||||
|
value={config.dataSource.routingVersionNameColumn}
|
||||||
|
onChange={(e) => updateDataSource("routingVersionNameColumn", e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1 pt-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">라우팅 상세 테이블</span>
|
||||||
|
<Input
|
||||||
|
value={config.dataSource.routingDetailTable}
|
||||||
|
onChange={(e) => updateDataSource("routingDetailTable", e.target.value)}
|
||||||
|
className="h-7 w-full text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1 pt-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">공정 마스터 테이블</span>
|
||||||
|
<Input
|
||||||
|
value={config.dataSource.processTable}
|
||||||
|
onChange={(e) => updateDataSource("processTable", e.target.value)}
|
||||||
|
className="h-7 w-full text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">공정명 컬럼</span>
|
||||||
|
<Input
|
||||||
|
value={config.dataSource.processNameColumn}
|
||||||
|
onChange={(e) => updateDataSource("processNameColumn", e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<span className="text-[10px] text-muted-foreground">공정코드 컬럼</span>
|
||||||
|
<Input
|
||||||
|
value={config.dataSource.processCodeColumn}
|
||||||
|
onChange={(e) => updateDataSource("processCodeColumn", e.target.value)}
|
||||||
|
className="h-7 text-xs"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
|
|
||||||
<div className="flex items-center justify-between py-1">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm">읽기 전용</p>
|
|
||||||
<p className="text-[11px] text-muted-foreground">수정/삭제 버튼을 숨겨요</p>
|
|
||||||
</div>
|
|
||||||
<Switch
|
|
||||||
checked={config.readonly || false}
|
|
||||||
onCheckedChange={(checked) => update({ readonly: checked })}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</CollapsibleContent>
|
</CollapsibleContent>
|
||||||
</Collapsible>
|
</Collapsible>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -49,7 +49,7 @@ import { SortableContext, useSortable, verticalListSortingStrategy, arrayMove }
|
||||||
import { CSS } from "@dnd-kit/utilities";
|
import { CSS } from "@dnd-kit/utilities";
|
||||||
import type { TableListConfig, ColumnConfig } from "@/lib/registry/components/v2-table-list/types";
|
import type { TableListConfig, ColumnConfig } from "@/lib/registry/components/v2-table-list/types";
|
||||||
|
|
||||||
// ─── DnD 정렬 가능한 컬럼 행 ───
|
// ─── DnD 정렬 가능한 컬럼 행 (접이식) ───
|
||||||
function SortableColumnRow({
|
function SortableColumnRow({
|
||||||
id,
|
id,
|
||||||
col,
|
col,
|
||||||
|
|
@ -69,40 +69,57 @@ function SortableColumnRow({
|
||||||
}) {
|
}) {
|
||||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
||||||
const style = { transform: CSS.Transform.toString(transform), transition };
|
const style = { transform: CSS.Transform.toString(transform), transition };
|
||||||
|
const [expanded, setExpanded] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
ref={setNodeRef}
|
ref={setNodeRef}
|
||||||
style={style}
|
style={style}
|
||||||
className={cn(
|
className={cn(
|
||||||
"bg-card flex items-center gap-1.5 rounded-md border px-2 py-1.5",
|
"bg-card rounded-md border px-2.5 py-1.5",
|
||||||
isDragging && "z-50 opacity-50 shadow-md",
|
isDragging && "z-50 opacity-50 shadow-md",
|
||||||
isEntityJoin && "border-primary/20 bg-primary/5",
|
isEntityJoin && "border-primary/20 bg-primary/5",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
|
<div className="flex items-center gap-1.5">
|
||||||
<GripVertical className="h-3 w-3" />
|
<div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
|
||||||
|
<GripVertical className="h-3 w-3" />
|
||||||
|
</div>
|
||||||
|
{isEntityJoin ? (
|
||||||
|
<Link2 className="h-3 w-3 shrink-0 text-primary" />
|
||||||
|
) : (
|
||||||
|
<span className="text-muted-foreground text-[10px] font-medium">#{index + 1}</span>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="truncate text-xs flex-1 text-left hover:underline"
|
||||||
|
onClick={() => setExpanded(!expanded)}
|
||||||
|
>
|
||||||
|
{col.displayName || col.columnName}
|
||||||
|
</button>
|
||||||
|
{col.width && (
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-5 shrink-0">{col.width}px</Badge>
|
||||||
|
)}
|
||||||
|
<Button type="button" variant="ghost" size="sm" onClick={onRemove} className="text-muted-foreground hover:text-destructive h-5 w-5 shrink-0 p-0">
|
||||||
|
<X className="h-3 w-3" />
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{isEntityJoin ? (
|
{expanded && (
|
||||||
<Link2 className="h-3 w-3 shrink-0 text-primary" />
|
<div className="grid grid-cols-[1fr_60px] gap-1.5 pl-5 mt-1.5">
|
||||||
) : (
|
<Input
|
||||||
<span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
|
value={col.displayName || col.columnName}
|
||||||
|
onChange={(e) => onLabelChange(e.target.value)}
|
||||||
|
placeholder="표시명"
|
||||||
|
className="h-7 min-w-0 text-xs"
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
value={col.width || ""}
|
||||||
|
onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
|
||||||
|
placeholder="너비"
|
||||||
|
className="h-7 shrink-0 text-xs text-center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
<Input
|
|
||||||
value={col.displayName || col.columnName}
|
|
||||||
onChange={(e) => onLabelChange(e.target.value)}
|
|
||||||
placeholder="표시명"
|
|
||||||
className="h-6 min-w-0 flex-1 text-xs"
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
value={col.width || ""}
|
|
||||||
onChange={(e) => onWidthChange(parseInt(e.target.value) || 100)}
|
|
||||||
placeholder="너비"
|
|
||||||
className="h-6 w-14 shrink-0 text-xs"
|
|
||||||
/>
|
|
||||||
<Button type="button" variant="ghost" size="sm" onClick={onRemove} className="text-muted-foreground hover:text-destructive h-5 w-5 shrink-0 p-0">
|
|
||||||
<X className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -230,6 +247,11 @@ export const V2TableListConfigPanel: React.FC<V2TableListConfigPanelProps> = ({
|
||||||
// Collapsible 상태
|
// Collapsible 상태
|
||||||
const [advancedOpen, setAdvancedOpen] = useState(false);
|
const [advancedOpen, setAdvancedOpen] = useState(false);
|
||||||
const [entityDisplayOpen, setEntityDisplayOpen] = useState(false);
|
const [entityDisplayOpen, setEntityDisplayOpen] = useState(false);
|
||||||
|
const [columnSelectOpen, setColumnSelectOpen] = useState(() => (config.columns?.length || 0) > 0);
|
||||||
|
const [entityJoinOpen, setEntityJoinOpen] = useState(false);
|
||||||
|
const [displayColumnsOpen, setDisplayColumnsOpen] = useState(() => (config.columns?.length || 0) > 0);
|
||||||
|
const [columnSearchText, setColumnSearchText] = useState("");
|
||||||
|
const [entityJoinSubOpen, setEntityJoinSubOpen] = useState<Record<number, boolean>>({});
|
||||||
|
|
||||||
// 이전 컬럼 개수 추적 (엔티티 감지용)
|
// 이전 컬럼 개수 추적 (엔티티 감지용)
|
||||||
const prevColumnsLengthRef = useRef<number>(0);
|
const prevColumnsLengthRef = useRef<number>(0);
|
||||||
|
|
@ -740,149 +762,215 @@ export const V2TableListConfigPanel: React.FC<V2TableListConfigPanelProps> = ({
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* ═══════════════════════════════════════ */}
|
{/* ═══════════════════════════════════════ */}
|
||||||
{/* 2단계: 컬럼 선택 */}
|
{/* 2단계: 컬럼 선택 (Collapsible) */}
|
||||||
{/* ═══════════════════════════════════════ */}
|
{/* ═══════════════════════════════════════ */}
|
||||||
{targetTableName && availableColumns.length > 0 && (
|
{targetTableName && availableColumns.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<div className="space-y-3">
|
<Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
|
||||||
<SectionHeader icon={Columns3} title="컬럼 선택" description="표시할 컬럼을 선택하세요" />
|
<CollapsibleTrigger asChild>
|
||||||
<Separator />
|
<button
|
||||||
|
type="button"
|
||||||
<div className="max-h-48 space-y-0.5 overflow-y-auto rounded-md border p-2">
|
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
||||||
{availableColumns.map((column) => {
|
>
|
||||||
const isAdded = config.columns?.some((c) => c.columnName === column.columnName);
|
<div className="flex items-center gap-2">
|
||||||
return (
|
<Columns3 className="h-4 w-4 text-muted-foreground" />
|
||||||
<div
|
<span className="text-sm font-medium">컬럼 선택</span>
|
||||||
key={column.columnName}
|
<Badge variant="secondary" className="text-[10px] h-5">
|
||||||
className={cn(
|
{config.columns?.filter((c) => !c.isEntityJoin && !c.additionalJoinInfo).length || 0}개 선택됨
|
||||||
"hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
|
</Badge>
|
||||||
isAdded && "bg-primary/10",
|
</div>
|
||||||
)}
|
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", columnSelectOpen && "rotate-180")} />
|
||||||
onClick={() => {
|
</button>
|
||||||
if (isAdded) {
|
</CollapsibleTrigger>
|
||||||
updateField("columns", config.columns?.filter((c) => c.columnName !== column.columnName) || []);
|
<CollapsibleContent>
|
||||||
} else {
|
<div className="rounded-b-lg border border-t-0 p-3 space-y-2">
|
||||||
addColumn(column.columnName);
|
<Input
|
||||||
}
|
value={columnSearchText}
|
||||||
}}
|
onChange={(e) => setColumnSearchText(e.target.value)}
|
||||||
>
|
placeholder="컬럼 검색..."
|
||||||
<Checkbox
|
className="h-7 text-xs"
|
||||||
checked={isAdded}
|
/>
|
||||||
onCheckedChange={() => {
|
<div className="max-h-[250px] space-y-0.5 overflow-y-auto">
|
||||||
if (isAdded) {
|
{availableColumns
|
||||||
updateField("columns", config.columns?.filter((c) => c.columnName !== column.columnName) || []);
|
.filter((column) => {
|
||||||
} else {
|
if (!columnSearchText) return true;
|
||||||
addColumn(column.columnName);
|
const search = columnSearchText.toLowerCase();
|
||||||
}
|
return (
|
||||||
}}
|
column.columnName.toLowerCase().includes(search) ||
|
||||||
className="pointer-events-none h-3.5 w-3.5"
|
(column.label || "").toLowerCase().includes(search)
|
||||||
/>
|
);
|
||||||
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
|
})
|
||||||
<span className="truncate text-xs">{column.label || column.columnName}</span>
|
.map((column) => {
|
||||||
{isAdded && (
|
const isAdded = config.columns?.some((c) => c.columnName === column.columnName);
|
||||||
<button
|
return (
|
||||||
type="button"
|
<div
|
||||||
title={
|
key={column.columnName}
|
||||||
config.columns?.find((c) => c.columnName === column.columnName)?.editable === false
|
className={cn(
|
||||||
? "편집 잠금 (클릭하여 해제)"
|
"hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
|
||||||
: "편집 가능 (클릭하여 잠금)"
|
isAdded && "bg-primary/10",
|
||||||
}
|
)}
|
||||||
className={cn(
|
onClick={() => {
|
||||||
"ml-auto flex-shrink-0 rounded p-0.5 transition-colors",
|
if (isAdded) {
|
||||||
config.columns?.find((c) => c.columnName === column.columnName)?.editable === false
|
updateField("columns", config.columns?.filter((c) => c.columnName !== column.columnName) || []);
|
||||||
? "text-destructive hover:bg-destructive/10"
|
} else {
|
||||||
: "text-muted-foreground hover:bg-muted",
|
addColumn(column.columnName);
|
||||||
)}
|
}
|
||||||
onClick={(e) => {
|
}}
|
||||||
e.stopPropagation();
|
>
|
||||||
const currentCol = config.columns?.find((c) => c.columnName === column.columnName);
|
<Checkbox
|
||||||
if (currentCol) {
|
checked={isAdded}
|
||||||
updateColumn(column.columnName, {
|
onCheckedChange={() => {
|
||||||
editable: currentCol.editable === false ? undefined : false,
|
if (isAdded) {
|
||||||
});
|
updateField("columns", config.columns?.filter((c) => c.columnName !== column.columnName) || []);
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{config.columns?.find((c) => c.columnName === column.columnName)?.editable === false ? (
|
|
||||||
<Lock className="h-3 w-3" />
|
|
||||||
) : (
|
|
||||||
<Unlock className="h-3 w-3" />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
<span className={cn("text-[10px] text-muted-foreground/70", !isAdded && "ml-auto")}>
|
|
||||||
{column.input_type || column.dataType}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Entity 조인 컬럼 */}
|
|
||||||
{entityJoinColumns.joinTables.length > 0 && (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<SectionHeader icon={Link2} title="Entity 조인 컬럼" description="연관 테이블의 컬럼을 선택하세요" />
|
|
||||||
<Separator />
|
|
||||||
<div className="space-y-3">
|
|
||||||
{entityJoinColumns.joinTables.map((joinTable, tableIndex) => (
|
|
||||||
<div key={tableIndex} className="space-y-1">
|
|
||||||
<div className="mb-1 flex items-center gap-2 text-[10px] font-medium text-primary">
|
|
||||||
<Link2 className="h-3 w-3" />
|
|
||||||
<span>{joinTable.tableName}</span>
|
|
||||||
<Badge variant="outline" className="text-[10px]">
|
|
||||||
{joinTable.currentDisplayColumn}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/5 p-2">
|
|
||||||
{joinTable.availableColumns.map((column, colIndex) => {
|
|
||||||
const matchingJoinColumn = entityJoinColumns.availableColumns.find(
|
|
||||||
(jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
|
|
||||||
);
|
|
||||||
const isAlreadyAdded = config.columns?.some(
|
|
||||||
(col) => col.columnName === matchingJoinColumn?.joinAlias,
|
|
||||||
);
|
|
||||||
if (!matchingJoinColumn) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={colIndex}
|
|
||||||
className={cn(
|
|
||||||
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10",
|
|
||||||
isAlreadyAdded && "bg-primary/10",
|
|
||||||
)}
|
|
||||||
onClick={() => {
|
|
||||||
if (isAlreadyAdded) {
|
|
||||||
updateField("columns", config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || []);
|
|
||||||
} else {
|
} else {
|
||||||
addEntityColumn(matchingJoinColumn);
|
addColumn(column.columnName);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
className="pointer-events-none h-3.5 w-3.5"
|
||||||
<Checkbox
|
/>
|
||||||
checked={isAlreadyAdded}
|
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
|
||||||
onCheckedChange={() => {
|
<span className="truncate text-xs">{column.label || column.columnName}</span>
|
||||||
if (isAlreadyAdded) {
|
{isAdded && (
|
||||||
updateField("columns", config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || []);
|
<button
|
||||||
} else {
|
type="button"
|
||||||
addEntityColumn(matchingJoinColumn);
|
title={
|
||||||
|
config.columns?.find((c) => c.columnName === column.columnName)?.editable === false
|
||||||
|
? "편집 잠금 (클릭하여 해제)"
|
||||||
|
: "편집 가능 (클릭하여 잠금)"
|
||||||
|
}
|
||||||
|
className={cn(
|
||||||
|
"ml-auto flex-shrink-0 rounded p-0.5 transition-colors",
|
||||||
|
config.columns?.find((c) => c.columnName === column.columnName)?.editable === false
|
||||||
|
? "text-destructive hover:bg-destructive/10"
|
||||||
|
: "text-muted-foreground hover:bg-muted",
|
||||||
|
)}
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const currentCol = config.columns?.find((c) => c.columnName === column.columnName);
|
||||||
|
if (currentCol) {
|
||||||
|
updateColumn(column.columnName, {
|
||||||
|
editable: currentCol.editable === false ? undefined : false,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
className="pointer-events-none h-3.5 w-3.5"
|
>
|
||||||
/>
|
{config.columns?.find((c) => c.columnName === column.columnName)?.editable === false ? (
|
||||||
<Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
|
<Lock className="h-3 w-3" />
|
||||||
<span className="truncate text-xs">{column.columnLabel}</span>
|
) : (
|
||||||
<span className="ml-auto text-[10px] text-primary/80">
|
<Unlock className="h-3 w-3" />
|
||||||
{column.inputType || column.dataType}
|
)}
|
||||||
</span>
|
</button>
|
||||||
</div>
|
)}
|
||||||
);
|
<span className={cn("text-[10px] text-muted-foreground/70", !isAdded && "ml-auto")}>
|
||||||
})}
|
{column.input_type || column.dataType}
|
||||||
</div>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
|
|
||||||
|
{/* Entity 조인 컬럼 (Collapsible) */}
|
||||||
|
{entityJoinColumns.joinTables.length > 0 && (
|
||||||
|
<Collapsible open={entityJoinOpen} onOpenChange={setEntityJoinOpen}>
|
||||||
|
<CollapsibleTrigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Link2 className="h-4 w-4 text-muted-foreground" />
|
||||||
|
<span className="text-sm font-medium">Entity 조인</span>
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-5">
|
||||||
|
{entityJoinColumns.joinTables.length}개 테이블
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", entityJoinOpen && "rotate-180")} />
|
||||||
|
</button>
|
||||||
|
</CollapsibleTrigger>
|
||||||
|
<CollapsibleContent>
|
||||||
|
<div className="rounded-b-lg border border-t-0 p-3 space-y-2">
|
||||||
|
{entityJoinColumns.joinTables.map((joinTable, tableIndex) => {
|
||||||
|
const addedCount = joinTable.availableColumns.filter((col) => {
|
||||||
|
const match = entityJoinColumns.availableColumns.find(
|
||||||
|
(jc) => jc.tableName === joinTable.tableName && jc.columnName === col.columnName,
|
||||||
|
);
|
||||||
|
return match && config.columns?.some((c) => c.columnName === match.joinAlias);
|
||||||
|
}).length;
|
||||||
|
const isSubOpen = entityJoinSubOpen[tableIndex] ?? false;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Collapsible key={tableIndex} open={isSubOpen} onOpenChange={(open) => setEntityJoinSubOpen((prev) => ({ ...prev, [tableIndex]: open }))}>
|
||||||
|
<CollapsibleTrigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex w-full items-center justify-between rounded-md border border-primary/20 bg-primary/5 px-3 py-2 text-left transition-colors hover:bg-primary/10"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Link2 className="h-3 w-3 text-primary" />
|
||||||
|
<span className="truncate text-xs font-medium">{joinTable.tableName}</span>
|
||||||
|
<Badge variant="secondary" className="text-[10px] h-5">
|
||||||
|
{addedCount > 0 ? `${addedCount}/${joinTable.availableColumns.length}개 선택` : `${joinTable.availableColumns.length}개 컬럼`}
|
||||||
|
</Badge>
|
||||||
|
</div>
|
||||||
|
<ChevronDown className={cn("h-3 w-3 text-muted-foreground transition-transform duration-200", isSubOpen && "rotate-180")} />
|
||||||
|
</button>
|
||||||
|
</CollapsibleTrigger>
|
||||||
|
<CollapsibleContent>
|
||||||
|
<div className="max-h-[150px] space-y-0.5 overflow-y-auto rounded-b-md border border-t-0 border-primary/20 bg-primary/5 p-2">
|
||||||
|
{joinTable.availableColumns.map((column, colIndex) => {
|
||||||
|
const matchingJoinColumn = entityJoinColumns.availableColumns.find(
|
||||||
|
(jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName,
|
||||||
|
);
|
||||||
|
const isAlreadyAdded = config.columns?.some(
|
||||||
|
(col) => col.columnName === matchingJoinColumn?.joinAlias,
|
||||||
|
);
|
||||||
|
if (!matchingJoinColumn) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={colIndex}
|
||||||
|
className={cn(
|
||||||
|
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10",
|
||||||
|
isAlreadyAdded && "bg-primary/10",
|
||||||
|
)}
|
||||||
|
onClick={() => {
|
||||||
|
if (isAlreadyAdded) {
|
||||||
|
updateField("columns", config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || []);
|
||||||
|
} else {
|
||||||
|
addEntityColumn(matchingJoinColumn);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
checked={isAlreadyAdded}
|
||||||
|
onCheckedChange={() => {
|
||||||
|
if (isAlreadyAdded) {
|
||||||
|
updateField("columns", config.columns?.filter((c) => c.columnName !== matchingJoinColumn.joinAlias) || []);
|
||||||
|
} else {
|
||||||
|
addEntityColumn(matchingJoinColumn);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="pointer-events-none h-3.5 w-3.5"
|
||||||
|
/>
|
||||||
|
<Link2 className="h-3 w-3 flex-shrink-0 text-primary" />
|
||||||
|
<span className="truncate text-xs">{column.columnLabel}</span>
|
||||||
|
<span className="ml-auto text-[10px] text-primary/80">
|
||||||
|
{column.inputType || column.dataType}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
@ -905,59 +993,73 @@ export const V2TableListConfigPanel: React.FC<V2TableListConfigPanelProps> = ({
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* ═══════════════════════════════════════ */}
|
{/* ═══════════════════════════════════════ */}
|
||||||
{/* 3단계: 선택된 컬럼 순서 (DnD) */}
|
{/* 3단계: 표시할 컬럼 (Collapsible + DnD) */}
|
||||||
{/* ═══════════════════════════════════════ */}
|
{/* ═══════════════════════════════════════ */}
|
||||||
{config.columns && config.columns.length > 0 && (
|
{config.columns && config.columns.length > 0 && (
|
||||||
<div className="space-y-3">
|
<Collapsible open={displayColumnsOpen} onOpenChange={setDisplayColumnsOpen}>
|
||||||
<SectionHeader
|
<CollapsibleTrigger asChild>
|
||||||
icon={GripVertical}
|
<button
|
||||||
title={`표시할 컬럼 (${config.columns.length}개 선택)`}
|
type="button"
|
||||||
description="드래그하여 순서를 변경하거나 표시명/너비를 수정할 수 있습니다"
|
className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left transition-colors hover:bg-muted/50"
|
||||||
/>
|
|
||||||
<Separator />
|
|
||||||
<DndContext
|
|
||||||
collisionDetection={closestCenter}
|
|
||||||
onDragEnd={(event: DragEndEvent) => {
|
|
||||||
const { active, over } = event;
|
|
||||||
if (!over || active.id === over.id) return;
|
|
||||||
const columns = [...(config.columns || [])];
|
|
||||||
const oldIndex = columns.findIndex((c) => c.columnName === active.id);
|
|
||||||
const newIndex = columns.findIndex((c) => c.columnName === over.id);
|
|
||||||
if (oldIndex !== -1 && newIndex !== -1) {
|
|
||||||
const reordered = arrayMove(columns, oldIndex, newIndex);
|
|
||||||
reordered.forEach((col, idx) => { col.order = idx; });
|
|
||||||
updateField("columns", reordered);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SortableContext
|
|
||||||
items={(config.columns || []).map((c) => c.columnName)}
|
|
||||||
strategy={verticalListSortingStrategy}
|
|
||||||
>
|
>
|
||||||
<div className="space-y-1">
|
<div className="flex items-center gap-2">
|
||||||
{(config.columns || []).map((column, idx) => {
|
<GripVertical className="h-4 w-4 text-muted-foreground" />
|
||||||
const resolvedLabel =
|
<span className="text-sm font-medium">표시할 컬럼</span>
|
||||||
column.displayName && column.displayName !== column.columnName
|
<Badge variant="secondary" className="text-[10px] h-5">
|
||||||
? column.displayName
|
{config.columns.length}개 설정됨
|
||||||
: availableColumns.find((c) => c.columnName === column.columnName)?.label || column.displayName || column.columnName;
|
</Badge>
|
||||||
const colWithLabel = { ...column, displayName: resolvedLabel };
|
|
||||||
return (
|
|
||||||
<SortableColumnRow
|
|
||||||
key={column.columnName}
|
|
||||||
id={column.columnName}
|
|
||||||
col={colWithLabel}
|
|
||||||
index={idx}
|
|
||||||
isEntityJoin={!!column.isEntityJoin}
|
|
||||||
onLabelChange={(value) => updateColumn(column.columnName, { displayName: value })}
|
|
||||||
onWidthChange={(value) => updateColumn(column.columnName, { width: value })}
|
|
||||||
onRemove={() => removeColumn(column.columnName)}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
</div>
|
||||||
</SortableContext>
|
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", displayColumnsOpen && "rotate-180")} />
|
||||||
</DndContext>
|
</button>
|
||||||
</div>
|
</CollapsibleTrigger>
|
||||||
|
<CollapsibleContent>
|
||||||
|
<div className="rounded-b-lg border border-t-0 p-3">
|
||||||
|
<p className="text-[10px] text-muted-foreground mb-2">드래그하여 순서 변경, 클릭하여 표시명/너비 수정</p>
|
||||||
|
<DndContext
|
||||||
|
collisionDetection={closestCenter}
|
||||||
|
onDragEnd={(event: DragEndEvent) => {
|
||||||
|
const { active, over } = event;
|
||||||
|
if (!over || active.id === over.id) return;
|
||||||
|
const columns = [...(config.columns || [])];
|
||||||
|
const oldIndex = columns.findIndex((c) => c.columnName === active.id);
|
||||||
|
const newIndex = columns.findIndex((c) => c.columnName === over.id);
|
||||||
|
if (oldIndex !== -1 && newIndex !== -1) {
|
||||||
|
const reordered = arrayMove(columns, oldIndex, newIndex);
|
||||||
|
reordered.forEach((col, idx) => { col.order = idx; });
|
||||||
|
updateField("columns", reordered);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SortableContext
|
||||||
|
items={(config.columns || []).map((c) => c.columnName)}
|
||||||
|
strategy={verticalListSortingStrategy}
|
||||||
|
>
|
||||||
|
<div className="max-h-[300px] space-y-1 overflow-y-auto">
|
||||||
|
{(config.columns || []).map((column, idx) => {
|
||||||
|
const resolvedLabel =
|
||||||
|
column.displayName && column.displayName !== column.columnName
|
||||||
|
? column.displayName
|
||||||
|
: availableColumns.find((c) => c.columnName === column.columnName)?.label || column.displayName || column.columnName;
|
||||||
|
const colWithLabel = { ...column, displayName: resolvedLabel };
|
||||||
|
return (
|
||||||
|
<SortableColumnRow
|
||||||
|
key={column.columnName}
|
||||||
|
id={column.columnName}
|
||||||
|
col={colWithLabel}
|
||||||
|
index={idx}
|
||||||
|
isEntityJoin={!!column.isEntityJoin}
|
||||||
|
onLabelChange={(value) => updateColumn(column.columnName, { displayName: value })}
|
||||||
|
onWidthChange={(value) => updateColumn(column.columnName, { width: value })}
|
||||||
|
onRemove={() => removeColumn(column.columnName)}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</SortableContext>
|
||||||
|
</DndContext>
|
||||||
|
</div>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* ═══════════════════════════════════════ */}
|
{/* ═══════════════════════════════════════ */}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue