kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

[agent-pipeline] pipe-20260311221723-l7a9 round-2

This commit is contained in:
DDD1542 2026-03-12 07:54:21 +09:00
parent 8ad0c8797d
commit db3ad9d639
3 changed files with 560 additions and 374 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

295
frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx
View File

@ -16,6 +16,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/component
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 { Separator } from "@/components/ui/separator"; import { Separator } from "@/components/ui/separator";
import { Badge } from "@/components/ui/badge";
import { import {
Database, Database,
Link2, Link2,
@ -30,6 +31,7 @@ import {
LayoutGrid, LayoutGrid,
Paintbrush, Paintbrush,
ChevronDown, ChevronDown,
ChevronRight,
} from "lucide-react"; } from "lucide-react";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { tableManagementApi } from "@/lib/api/tableManagement"; import { tableManagementApi } from "@/lib/api/tableManagement";
@ -238,6 +240,8 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
const [filterOpen, setFilterOpen] = useState(false); const [filterOpen, setFilterOpen] = useState(false);
const [layoutOpen, setLayoutOpen] = useState(false); const [layoutOpen, setLayoutOpen] = useState(false);
const [styleOpen, setStyleOpen] = useState(false); const [styleOpen, setStyleOpen] = useState(false);
const [itemsOpen, setItemsOpen] = useState(true);
const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
const dataSourceType = config.dataSourceType || "table"; const dataSourceType = config.dataSourceType || "table";
@ -650,144 +654,156 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
{/* ═══════════════════════════════════════ */} {/* ═══════════════════════════════════════ */}
{/* 2단계: 집계 항목 */} {/* 2단계: 집계 항목 */}
{/* ═══════════════════════════════════════ */} {/* ═══════════════════════════════════════ */}
<div className="space-y-3"> <Collapsible open={itemsOpen} onOpenChange={setItemsOpen}>
<div className="flex items-center justify-between"> <CollapsibleTrigger asChild>
<SectionHeader icon={Calculator} title="집계 항목" description="집계할 컬럼과 연산을 설정하세요" /> <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">
<Button type="button" variant="outline" size="sm" onClick={addItem} className="h-6 shrink-0 px-2 text-xs"> <div className="flex items-center gap-2">
<Plus className="mr-1 h-3 w-3" /> <Calculator className="h-4 w-4 text-muted-foreground" />
추가 <span className="text-sm font-medium">집계 항목</span>
</Button> <Badge variant="secondary" className="text-[10px] h-5">{(config.items || []).length}개</Badge>
</div> </div>
<Separator /> <div className="flex items-center gap-1">
<Button type="button" variant="outline" size="sm" onClick={(e) => { e.stopPropagation(); addItem(); }} className="h-6 shrink-0 px-2 text-xs">
{(config.items || []).length === 0 ? ( <Plus className="mr-1 h-3 w-3" />추가
<div className="rounded-lg border-2 border-dashed py-6 text-center"> </Button>
<Calculator className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" /> <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", itemsOpen && "rotate-180")} />
<p className="text-sm text-muted-foreground">아직 집계 항목이 없어요</p> </div>
<p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p> </button>
</div> </CollapsibleTrigger>
) : ( <CollapsibleContent>
<div className="space-y-2"> <div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
{(config.items || []).map((item, index) => ( {(config.items || []).length === 0 ? (
<div key={item.id} className="space-y-2 rounded-md border p-2.5"> <div className="rounded-lg border-2 border-dashed py-6 text-center">
<div className="flex items-center justify-between"> <Calculator className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
<span className="text-xs font-medium">항목 {index + 1}</span> <p className="text-sm text-muted-foreground">아직 집계 항목이 없어요</p>
<Button <p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p>
type="button"
variant="ghost"
size="sm"
onClick={() => removeItem(item.id)}
className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive"
>
<Trash2 className="h-3 w-3" />
</Button>
</div>
<div className="grid grid-cols-2 gap-2">
{/* 컬럼 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">컬럼</span>
<Select
value={item.columnName}
onValueChange={(value) => {
const col = columns.find((c) => c.columnName === value);
updateItem(item.id, { columnName: value, columnLabel: col?.label || value });
}}
disabled={loadingColumns || columns.length === 0}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : columns.length === 0 ? "테이블을 선택하세요" : "컬럼 선택"} />
</SelectTrigger>
<SelectContent>
{(item.type === "count" ? columns : numericColumns).length === 0 ? (
<div className="p-2 text-center text-xs text-muted-foreground">
{item.type === "count" ? "컬럼이 없습니다" : "숫자형 컬럼이 없습니다"}
</div>
) : (
(item.type === "count" ? columns : numericColumns).map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.label || col.columnName}
</SelectItem>
))
)}
</SelectContent>
</Select>
</div>
{/* 집계 타입 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">집계 타입</span>
<Select
value={item.type}
onValueChange={(value) => updateItem(item.id, { type: value as AggregationType })}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{AGGREGATION_TYPE_OPTIONS.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 표시 라벨 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">표시 라벨</span>
<Input
value={item.columnLabel || ""}
onChange={(e) => updateItem(item.id, { columnLabel: e.target.value })}
placeholder="표시될 라벨"
className="h-7 text-xs"
/>
</div>
{/* 표시 형식 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">표시 형식</span>
<Select
value={item.format || "number"}
onValueChange={(value) => updateItem(item.id, { format: value as "number" | "currency" | "percent" })}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{FORMAT_OPTIONS.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 접두사 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">접두사</span>
<Input
value={item.prefix || ""}
onChange={(e) => updateItem(item.id, { prefix: e.target.value })}
placeholder="예: ₩"
className="h-7 text-xs"
/>
</div>
{/* 접미사 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">접미사</span>
<Input
value={item.suffix || ""}
onChange={(e) => updateItem(item.id, { suffix: e.target.value })}
placeholder="예: 원, 개"
className="h-7 text-xs"
/>
</div>
</div>
</div> </div>
))} ) : (
<div className="max-h-[300px] space-y-1.5 overflow-y-auto">
{(config.items || []).map((item, index) => (
<div key={item.id} className="rounded-md border">
<button
type="button"
onClick={() => setExpandedItemId(expandedItemId === item.id ? null : item.id)}
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={cn("h-3 w-3 text-muted-foreground transition-transform shrink-0", expandedItemId === item.id && "rotate-90")} />
<span className="text-[10px] text-muted-foreground font-medium shrink-0">#{index + 1}</span>
<span className="text-xs font-medium truncate flex-1 min-w-0">{item.columnLabel || item.columnName || "미설정"}</span>
<Badge variant="outline" className="text-[9px] h-4 shrink-0">{AGGREGATION_TYPE_OPTIONS.find((o) => o.value === item.type)?.label || item.type}</Badge>
<Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); removeItem(item.id); }} className="h-5 w-5 p-0 text-muted-foreground hover:text-destructive shrink-0">
<Trash2 className="h-3 w-3" />
</Button>
</button>
{expandedItemId === item.id && (
<div className="grid grid-cols-2 gap-2 border-t px-2.5 py-2">
{/* 컬럼 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">컬럼</span>
<Select
value={item.columnName}
onValueChange={(value) => {
const col = columns.find((c) => c.columnName === value);
updateItem(item.id, { columnName: value, columnLabel: col?.label || value });
}}
disabled={loadingColumns || columns.length === 0}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue placeholder={loadingColumns ? "로딩 중..." : columns.length === 0 ? "테이블을 선택하세요" : "컬럼 선택"} />
</SelectTrigger>
<SelectContent>
{(item.type === "count" ? columns : numericColumns).length === 0 ? (
<div className="p-2 text-center text-xs text-muted-foreground">
{item.type === "count" ? "컬럼이 없습니다" : "숫자형 컬럼이 없습니다"}
</div>
) : (
(item.type === "count" ? columns : numericColumns).map((col) => (
<SelectItem key={col.columnName} value={col.columnName}>
{col.label || col.columnName}
</SelectItem>
))
)}
</SelectContent>
</Select>
</div>
{/* 집계 타입 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">집계 타입</span>
<Select
value={item.type}
onValueChange={(value) => updateItem(item.id, { type: value as AggregationType })}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{AGGREGATION_TYPE_OPTIONS.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 표시 라벨 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">표시 라벨</span>
<Input
value={item.columnLabel || ""}
onChange={(e) => updateItem(item.id, { columnLabel: e.target.value })}
placeholder="표시될 라벨"
className="h-7 text-xs"
/>
</div>
{/* 표시 형식 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">표시 형식</span>
<Select
value={item.format || "number"}
onValueChange={(value) => updateItem(item.id, { format: value as "number" | "currency" | "percent" })}
>
<SelectTrigger className="h-7 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{FORMAT_OPTIONS.map((opt) => (
<SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* 접두사 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">접두사</span>
<Input
value={item.prefix || ""}
onChange={(e) => updateItem(item.id, { prefix: e.target.value })}
placeholder="예: ₩"
className="h-7 text-xs"
/>
</div>
{/* 접미사 */}
<div className="space-y-1">
<span className="text-[10px] text-muted-foreground">접미사</span>
<Input
value={item.suffix || ""}
onChange={(e) => updateItem(item.id, { suffix: e.target.value })}
placeholder="예: 원, 개"
className="h-7 text-xs"
/>
</div>
</div>
)}
</div>
))}
</div>
)}
</div> </div>
)} </CollapsibleContent>
</div> </Collapsible>
{/* ═══════════════════════════════════════ */} {/* ═══════════════════════════════════════ */}
{/* 3단계: 필터 조건 (접힘) */} {/* 3단계: 필터 조건 (접힘) */}
@ -803,9 +819,9 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
<Filter className="h-4 w-4 text-muted-foreground" /> <Filter className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">필터 조건</span> <span className="text-sm font-medium">필터 조건</span>
{(config.filters || []).length > 0 && ( {(config.filters || []).length > 0 && (
<span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[10px] font-medium text-primary"> <Badge variant="secondary" className="text-[10px] h-5">
{(config.filters || []).length} {(config.filters || []).length}
</span> </Badge>
)} )}
</div> </div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", filterOpen && "rotate-180")} /> <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", filterOpen && "rotate-180")} />
@ -845,7 +861,7 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
<p className="text-xs text-muted-foreground">필터 없음 - 전체 데이터를 집계합니다</p> <p className="text-xs text-muted-foreground">필터 없음 - 전체 데이터를 집계합니다</p>
</div> </div>
) : ( ) : (
<div className="space-y-2"> <div className="max-h-[250px] space-y-2 overflow-y-auto">
{(config.filters || []).map((filter, index) => ( {(config.filters || []).map((filter, index) => (
<div <div
key={filter.id} key={filter.id}
@ -1067,6 +1083,7 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<LayoutGrid className="h-4 w-4 text-muted-foreground" /> <LayoutGrid 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.layout === "vertical" ? "세로" : "가로"}</Badge>
</div> </div>
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", layoutOpen && "rotate-180")} /> <ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", layoutOpen && "rotate-180")} />
</button> </button>

306
frontend/components/v2/config-panels/V2BomItemEditorConfigPanel.tsx
View File

@ -34,6 +34,7 @@ import {
Check, Check,
ChevronsUpDown, ChevronsUpDown,
GitBranch, GitBranch,
Settings,
} from "lucide-react"; } from "lucide-react";
import { import {
Command, Command,
@ -48,6 +49,12 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "@/components/ui/popover"; } from "@/components/ui/popover";
import { Badge } from "@/components/ui/badge";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { tableTypeApi } from "@/lib/api/screen"; import { tableTypeApi } from "@/lib/api/screen";
import { tableManagementApi } from "@/lib/api/tableManagement"; import { tableManagementApi } from "@/lib/api/tableManagement";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
@ -171,6 +178,9 @@ export function V2BomItemEditorConfigPanel({
const [loadingRelations, setLoadingRelations] = useState(false); const [loadingRelations, setLoadingRelations] = useState(false);
const [tableComboboxOpen, setTableComboboxOpen] = useState(false); const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
const [expandedColumn, setExpandedColumn] = useState<string | null>(null); const [expandedColumn, setExpandedColumn] = useState<string | null>(null);
const [featureOptionsOpen, setFeatureOptionsOpen] = useState(false);
const [columnSelectOpen, setColumnSelectOpen] = useState(false);
const [selectedColumnsOpen, setSelectedColumnsOpen] = useState(false);
// ─── 업데이트 헬퍼 (리피터 패턴) ─── // ─── 업데이트 헬퍼 (리피터 패턴) ───
const updateConfig = useCallback( const updateConfig = useCallback(
@ -803,145 +813,215 @@ export function V2BomItemEditorConfigPanel({
)} )}
</div> </div>
{/* 기능 옵션 - Switch + 설명 텍스트 */} {/* 기능 옵션 - Collapsible + Badge */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-1"> <Collapsible open={featureOptionsOpen} onOpenChange={setFeatureOptionsOpen}>
<span className="text-sm font-medium">기능 옵션</span> <CollapsibleTrigger asChild>
<div className="space-y-2"> <button
<div className="flex items-center justify-between py-1"> 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-sm">추가 버튼</p> >
<p className="text-[11px] text-muted-foreground">하위 품목을 추가할 수 있어요</p> <div className="flex items-center gap-2">
<Settings className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">기능 옵션</span>
<Badge
variant="secondary"
className="text-[10px] h-5"
>
{[
config.features?.showAddButton ?? true,
config.features?.showDeleteButton ?? true,
config.features?.inlineEdit ?? false,
config.features?.showRowNumber ?? false,
].filter(Boolean).length}
개
</Badge>
</div> </div>
<Switch <ChevronDown
checked={config.features?.showAddButton ?? true} className={cn(
onCheckedChange={(checked) => updateFeatures("showAddButton", checked)} "h-4 w-4 text-muted-foreground transition-transform duration-200",
featureOptionsOpen && "rotate-180",
)}
/> />
</div> </button>
<div className="flex items-center justify-between py-1"> </CollapsibleTrigger>
<div> <CollapsibleContent>
<p className="text-sm">삭제 버튼</p> <div className="rounded-b-lg border border-t-0 p-3 space-y-2">
<p className="text-[11px] text-muted-foreground">선택한 품목을 삭제할 수 있어요</p> <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.features?.showAddButton ?? true}
onCheckedChange={(checked) => updateFeatures("showAddButton", checked)}
/>
</div> </div>
<Switch <div className="flex items-center justify-between py-1">
checked={config.features?.showDeleteButton ?? true} <div>
onCheckedChange={(checked) => updateFeatures("showDeleteButton", checked)} <p className="text-sm">삭제 버튼</p>
/> <p className="text-[11px] text-muted-foreground">선택한 품목을 삭제할 수 있어요</p>
</div> </div>
<div className="flex items-center justify-between py-1"> <Switch
<div> checked={config.features?.showDeleteButton ?? true}
<p className="text-sm">인라인 편집</p> onCheckedChange={(checked) => updateFeatures("showDeleteButton", checked)}
<p className="text-[11px] text-muted-foreground">셀을 클릭하면 바로 수정할 수 있어요</p> />
</div> </div>
<Switch <div className="flex items-center justify-between py-1">
checked={config.features?.inlineEdit ?? false} <div>
onCheckedChange={(checked) => updateFeatures("inlineEdit", checked)} <p className="text-sm">인라인 편집</p>
/> <p className="text-[11px] text-muted-foreground">셀을 클릭하면 바로 수정할 수 있어요</p>
</div> </div>
<div className="flex items-center justify-between py-1"> <Switch
<div> checked={config.features?.inlineEdit ?? false}
<p className="text-sm">행 번호</p> onCheckedChange={(checked) => updateFeatures("inlineEdit", checked)}
<p className="text-[11px] text-muted-foreground">각 행에 순번을 표시해요</p> />
</div>
<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.features?.showRowNumber ?? false}
onCheckedChange={(checked) => updateFeatures("showRowNumber", checked)}
/>
</div> </div>
<Switch
checked={config.features?.showRowNumber ?? false}
onCheckedChange={(checked) => updateFeatures("showRowNumber", checked)}
/>
</div> </div>
</div> </CollapsibleContent>
</div> </Collapsible>
</TabsContent> </TabsContent>
{/* ─── 컬럼 설정 탭 ─── */} {/* ─── 컬럼 설정 탭 ─── */}
<TabsContent value="columns" className="mt-4 space-y-4"> <TabsContent value="columns" className="mt-4 space-y-4">
{/* 통합 컬럼 선택 */} {/* 컬럼 선택 - Collapsible + Badge */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
<div className="flex items-center gap-2"> <CollapsibleTrigger asChild>
<Database className="h-4 w-4 text-primary" /> <button
<span className="text-sm font-medium">어떤 컬럼을 표시하고 입력받을까요?</span> 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"> >
소스 테이블 컬럼은 표시용, 저장 테이블 컬럼은 입력용이에요 <div className="flex items-center gap-2">
</p> <Database className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">컬럼 선택</span>
{/* 소스 테이블 컬럼 (표시용) */} <Badge variant="secondary" className="text-[10px] h-5">
{config.dataSource?.sourceTable && ( {config.columns.length}개 선택됨
<> </Badge>
<div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
<Link2 className="h-3 w-3" />
소스 테이블 ({config.dataSource.sourceTable}) - 표시용
</div> </div>
{loadingSourceColumns ? ( <ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
columnSelectOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-3">
<p className="text-[11px] text-muted-foreground">
소스 테이블 컬럼은 표시용, 저장 테이블 컬럼은 입력용이에요
</p>
{/* 소스 테이블 컬럼 (표시용) */}
{config.dataSource?.sourceTable && (
<>
<div className="mb-1 flex items-center gap-1 text-[10px] font-medium text-primary">
<Link2 className="h-3 w-3" />
소스 테이블 ({config.dataSource.sourceTable}) - 표시용
</div>
{loadingSourceColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
) : sourceTableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
) : (
<div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
{sourceTableColumns.map((column) => (
<div
key={`source-${column.columnName}`}
className={cn(
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
isSourceColumnSelected(column.columnName) && "bg-primary/10",
)}
onClick={() => toggleSourceDisplayColumn(column)}
>
<Checkbox
checked={isSourceColumnSelected(column.columnName)}
onCheckedChange={() => toggleSourceDisplayColumn(column)}
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.displayName}</span>
<span className="ml-auto text-[10px] text-primary/80">표시</span>
</div>
))}
</div>
)}
</>
)}
{/* 저장 테이블 컬럼 (입력용) */}
<div className="mb-1 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
<Database className="h-3 w-3" />
저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
</div>
{loadingColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p> <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
) : sourceTableColumns.length === 0 ? ( ) : inputableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p> <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
) : ( ) : (
<div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2"> <div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
{sourceTableColumns.map((column) => ( {inputableColumns.map((column) => (
<div <div
key={`source-${column.columnName}`} key={`input-${column.columnName}`}
className={cn( className={cn(
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50", "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
isSourceColumnSelected(column.columnName) && "bg-primary/10", isColumnAdded(column.columnName) && "bg-primary/10",
)} )}
onClick={() => toggleSourceDisplayColumn(column)} onClick={() => toggleInputColumn(column)}
> >
<Checkbox <Checkbox
checked={isSourceColumnSelected(column.columnName)} checked={isColumnAdded(column.columnName)}
onCheckedChange={() => toggleSourceDisplayColumn(column)} onCheckedChange={() => toggleInputColumn(column)}
className="pointer-events-none h-3.5 w-3.5" className="pointer-events-none h-3.5 w-3.5"
/> />
<Link2 className="h-3 w-3 flex-shrink-0 text-primary" /> <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
<span className="truncate text-xs">{column.displayName}</span> <span className="truncate text-xs">{column.displayName}</span>
<span className="ml-auto text-[10px] text-primary/80">표시</span> <span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
</div> </div>
))} ))}
</div> </div>
)} )}
</>
)}
{/* 저장 테이블 컬럼 (입력용) */}
<div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
<Database className="h-3 w-3" />
저장 테이블 ({targetTableForColumns || "미선택"}) - 입력용
</div>
{loadingColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
) : inputableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
) : (
<div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
{inputableColumns.map((column) => (
<div
key={`input-${column.columnName}`}
className={cn(
"hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
isColumnAdded(column.columnName) && "bg-primary/10",
)}
onClick={() => toggleInputColumn(column)}
>
<Checkbox
checked={isColumnAdded(column.columnName)}
onCheckedChange={() => toggleInputColumn(column)}
className="pointer-events-none h-3.5 w-3.5"
/>
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
<span className="truncate text-xs">{column.displayName}</span>
<span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
</div>
))}
</div> </div>
)} </CollapsibleContent>
</div> </Collapsible>
{/* 선택된 컬럼 상세 */} {/* 선택된 컬럼 상세 - Collapsible + Badge */}
{config.columns.length > 0 && ( {config.columns.length > 0 && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <Collapsible open={selectedColumnsOpen} onOpenChange={setSelectedColumnsOpen}>
<div className="flex items-center justify-between"> <CollapsibleTrigger asChild>
<span className="text-sm font-medium">선택된 컬럼 ({config.columns.length})</span> <button
<span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span> 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"
<div className="max-h-48 space-y-1 overflow-y-auto"> >
<div className="flex items-center gap-2">
<span className="text-sm font-medium">선택된 컬럼</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.columns.length}개
</Badge>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
selectedColumnsOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-3">
<div className="flex items-center justify-between">
<span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span>
</div>
<div className="max-h-48 space-y-1 overflow-y-auto">
{config.columns.map((col, index) => ( {config.columns.map((col, index) => (
<div key={col.key} className="space-y-1"> <div key={col.key} className="space-y-1">
<div <div
@ -1067,8 +1147,10 @@ export function V2BomItemEditorConfigPanel({
)} )}
</div> </div>
))} ))}
</div> </div>
</div> </div>
</CollapsibleContent>
</Collapsible>
)} )}
</TabsContent> </TabsContent>
</Tabs> </Tabs>

333
frontend/components/v2/config-panels/V2BomTreeConfigPanel.tsx
View File

@ -22,6 +22,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"; import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { Badge } from "@/components/ui/badge";
import { import {
Database, Database,
Link2, Link2,
@ -163,6 +164,10 @@ export function V2BomTreeConfigPanel({
const [loadingRelations, setLoadingRelations] = useState(false); const [loadingRelations, setLoadingRelations] = useState(false);
const [tableComboboxOpen, setTableComboboxOpen] = useState(false); const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
const [expandedColumn, setExpandedColumn] = useState<string | null>(null); const [expandedColumn, setExpandedColumn] = useState<string | null>(null);
const [displayOptionsOpen, setDisplayOptionsOpen] = useState(false);
const [columnSelectOpen, setColumnSelectOpen] = useState(false);
const [selectedColumnsOpen, setSelectedColumnsOpen] = useState(false);
const [advancedOpen, setAdvancedOpen] = useState(false);
const updateConfig = useCallback( const updateConfig = useCallback(
(updates: Partial<BomTreeConfig>) => { (updates: Partial<BomTreeConfig>) => {
@ -680,62 +685,103 @@ export function V2BomTreeConfigPanel({
)} )}
</div> </div>
{/* 표시 옵션 - Switch + 설명 텍스트 */} {/* 표시 옵션 - Collapsible + Badge */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-1"> <Collapsible open={displayOptionsOpen} onOpenChange={setDisplayOptionsOpen}>
<span className="text-sm font-medium">표시 옵션</span>
<div className="space-y-2">
<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.features?.showExpandAll ?? true}
onCheckedChange={(checked) => updateFeatures("showExpandAll", checked)}
/>
</div>
<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.features?.showHeader ?? true}
onCheckedChange={(checked) => updateFeatures("showHeader", checked)}
/>
</div>
<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.features?.showQuantity ?? true}
onCheckedChange={(checked) => updateFeatures("showQuantity", checked)}
/>
</div>
<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.features?.showLossRate ?? true}
onCheckedChange={(checked) => updateFeatures("showLossRate", checked)}
/>
</div>
</div>
</div>
{/* 고급 설정 (이력/버전 관리) - Collapsible */}
<Collapsible>
<CollapsibleTrigger asChild> <CollapsibleTrigger asChild>
<button className="flex w-full items-center justify-between rounded-lg border bg-muted/30 px-4 py-2.5 text-left hover:bg-muted/50 transition-colors"> <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">
<Eye className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">표시 옵션</span>
<Badge
variant="secondary"
className="text-[10px] h-5"
>
{[
config.features?.showExpandAll ?? true,
config.features?.showHeader ?? true,
config.features?.showQuantity ?? true,
config.features?.showLossRate ?? true,
].filter(Boolean).length}
/4
</Badge>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
displayOptionsOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-2">
<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.features?.showExpandAll ?? true}
onCheckedChange={(checked) => updateFeatures("showExpandAll", checked)}
/>
</div>
<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.features?.showHeader ?? true}
onCheckedChange={(checked) => updateFeatures("showHeader", checked)}
/>
</div>
<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.features?.showQuantity ?? true}
onCheckedChange={(checked) => updateFeatures("showQuantity", checked)}
/>
</div>
<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.features?.showLossRate ?? true}
onCheckedChange={(checked) => updateFeatures("showLossRate", checked)}
/>
</div>
</div>
</CollapsibleContent>
</Collapsible>
{/* 고급 설정 (이력/버전 관리) - Collapsible + Badge */}
<Collapsible open={advancedOpen} onOpenChange={setAdvancedOpen}>
<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"> <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>
<Badge variant="secondary" className="text-[10px] h-5">
2개
</Badge>
</div> </div>
<ChevronDown className="h-4 w-4 text-muted-foreground" /> <ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
advancedOpen && "rotate-180",
)}
/>
</button> </button>
</CollapsibleTrigger> </CollapsibleTrigger>
<CollapsibleContent> <CollapsibleContent>
@ -880,95 +926,134 @@ export function V2BomTreeConfigPanel({
{/* ─── 컬럼 설정 탭 ─── */} {/* ─── 컬럼 설정 탭 ─── */}
<TabsContent value="columns" className="mt-4 space-y-4"> <TabsContent value="columns" className="mt-4 space-y-4">
{/* 통합 컬럼 선택 */} {/* 컬럼 선택 - Collapsible + Badge */}
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <Collapsible open={columnSelectOpen} onOpenChange={setColumnSelectOpen}>
<div className="flex items-center gap-2"> <CollapsibleTrigger asChild>
<Database className="h-4 w-4 text-primary" /> <button
<span className="text-sm font-medium">트리에 어떤 컬럼을 표시할까요?</span> 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"> >
소스 테이블 컬럼은 표시용, 디테일 테이블 컬럼은 직접 컬럼이에요 <div className="flex items-center gap-2">
</p> <Database className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">컬럼 선택</span>
{/* 소스 테이블 컬럼 (표시용) */} <Badge variant="secondary" className="text-[10px] h-5">
{config.dataSource?.sourceTable && ( {config.columns.length}개 선택됨
<> </Badge>
<div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
<Link2 className="h-3 w-3" />
소스 테이블 ({config.dataSource.sourceTable}) - 표시용
</div> </div>
{loadingSourceColumns ? ( <ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
columnSelectOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-2">
<p className="text-[11px] text-muted-foreground">
소스 테이블 컬럼은 표시용, 디테일 테이블 컬럼은 직접 컬럼이에요
</p>
{/* 소스 테이블 컬럼 (표시용) */}
{config.dataSource?.sourceTable && (
<>
<div className="mb-1 mt-2 flex items-center gap-1 text-[10px] font-medium text-primary">
<Link2 className="h-3 w-3" />
소스 테이블 ({config.dataSource.sourceTable}) - 표시용
</div>
{loadingSourceColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
) : sourceTableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
) : (
<div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2">
{sourceTableColumns.map((column) => (
<div
key={`source-${column.columnName}`}
className={cn(
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50",
isSourceColumnSelected(column.columnName) && "bg-primary/10",
)}
onClick={() => toggleSourceDisplayColumn(column)}
>
<Checkbox
checked={isSourceColumnSelected(column.columnName)}
onCheckedChange={() => toggleSourceDisplayColumn(column)}
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.displayName}</span>
<span className="ml-auto text-[10px] text-primary/80">표시</span>
</div>
))}
</div>
)}
</>
)}
{/* 디테일 테이블 컬럼 */}
<div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
<Database className="h-3 w-3" />
디테일 테이블 ({config.detailTable || "미선택"}) - 직접 컬럼
</div>
{loadingColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p> <p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
) : sourceTableColumns.length === 0 ? ( ) : displayableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p> <p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
) : ( ) : (
<div className="max-h-28 space-y-0.5 overflow-y-auto rounded-md border border-primary/20 bg-primary/10/30 p-2"> <div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
{sourceTableColumns.map((column) => ( {displayableColumns.map((column) => (
<div <div
key={`source-${column.columnName}`} key={`detail-${column.columnName}`}
className={cn( className={cn(
"flex cursor-pointer items-center gap-2 rounded px-2 py-1 hover:bg-primary/10/50", "hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
isSourceColumnSelected(column.columnName) && "bg-primary/10", isColumnAdded(column.columnName) && "bg-primary/10",
)} )}
onClick={() => toggleSourceDisplayColumn(column)} onClick={() => toggleDetailColumn(column)}
> >
<Checkbox <Checkbox
checked={isSourceColumnSelected(column.columnName)} checked={isColumnAdded(column.columnName)}
onCheckedChange={() => toggleSourceDisplayColumn(column)} onCheckedChange={() => toggleDetailColumn(column)}
className="pointer-events-none h-3.5 w-3.5" className="pointer-events-none h-3.5 w-3.5"
/> />
<Link2 className="h-3 w-3 flex-shrink-0 text-primary" /> <Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
<span className="truncate text-xs">{column.displayName}</span> <span className="truncate text-xs">{column.displayName}</span>
<span className="ml-auto text-[10px] text-primary/80">표시</span> <span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
</div> </div>
))} ))}
</div> </div>
)} )}
</>
)}
{/* 디테일 테이블 컬럼 */}
<div className="mb-1 mt-3 flex items-center gap-1 text-[10px] font-medium text-muted-foreground">
<Database className="h-3 w-3" />
디테일 테이블 ({config.detailTable || "미선택"}) - 직접 컬럼
</div>
{loadingColumns ? (
<p className="text-muted-foreground py-2 text-xs">로딩 중...</p>
) : displayableColumns.length === 0 ? (
<p className="text-muted-foreground py-2 text-xs">컬럼 정보가 없어요</p>
) : (
<div className="max-h-36 space-y-0.5 overflow-y-auto rounded-md border p-2">
{displayableColumns.map((column) => (
<div
key={`detail-${column.columnName}`}
className={cn(
"hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded px-2 py-1",
isColumnAdded(column.columnName) && "bg-primary/10",
)}
onClick={() => toggleDetailColumn(column)}
>
<Checkbox
checked={isColumnAdded(column.columnName)}
onCheckedChange={() => toggleDetailColumn(column)}
className="pointer-events-none h-3.5 w-3.5"
/>
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
<span className="truncate text-xs">{column.displayName}</span>
<span className="ml-auto text-[10px] text-muted-foreground/70">{column.inputType}</span>
</div>
))}
</div> </div>
)} </CollapsibleContent>
</div> </Collapsible>
{/* 선택된 컬럼 상세 */} {/* 선택된 컬럼 상세 - Collapsible + Badge */}
{config.columns.length > 0 && ( {config.columns.length > 0 && (
<div className="rounded-lg border bg-muted/30 p-4 space-y-3"> <Collapsible open={selectedColumnsOpen} onOpenChange={setSelectedColumnsOpen}>
<div className="flex items-center justify-between"> <CollapsibleTrigger asChild>
<span className="text-sm font-medium">선택된 컬럼 ({config.columns.length})</span> <button
<span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span> 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"
<div className="max-h-48 space-y-1 overflow-y-auto"> >
<div className="flex items-center gap-2">
<GripVertical className="h-4 w-4 text-muted-foreground" />
<span className="text-sm font-medium">선택된 컬럼</span>
<Badge variant="secondary" className="text-[10px] h-5">
{config.columns.length}개
</Badge>
</div>
<ChevronDown
className={cn(
"h-4 w-4 text-muted-foreground transition-transform duration-200",
selectedColumnsOpen && "rotate-180",
)}
/>
</button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="rounded-b-lg border border-t-0 p-3 space-y-2">
<span className="text-[11px] text-muted-foreground">드래그로 순서 변경</span>
<div className="max-h-48 space-y-1 overflow-y-auto">
{config.columns.map((col, index) => ( {config.columns.map((col, index) => (
<div key={col.key} className="space-y-1"> <div key={col.key} className="space-y-1">
<div <div
@ -1075,8 +1160,10 @@ export function V2BomTreeConfigPanel({
)} )}
</div> </div>
))} ))}
</div> </div>
</div> </div>
</CollapsibleContent>
</Collapsible>
)} )}
</TabsContent> </TabsContent>
</Tabs> </Tabs>