[agent-pipeline] pipe-20260311221723-l7a9 round-2
This commit is contained in:
DDD1542
@@ -16,6 +16,7 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/component
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
Database,
|
||||
Link2,
|
||||
@@ -30,6 +31,7 @@ import {
|
||||
LayoutGrid,
|
||||
Paintbrush,
|
||||
ChevronDown,
|
||||
ChevronRight,
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { tableManagementApi } from "@/lib/api/tableManagement";
|
||||
@@ -238,6 +240,8 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
|
||||
const [filterOpen, setFilterOpen] = useState(false);
|
||||
const [layoutOpen, setLayoutOpen] = useState(false);
|
||||
const [styleOpen, setStyleOpen] = useState(false);
|
||||
const [itemsOpen, setItemsOpen] = useState(true);
|
||||
const [expandedItemId, setExpandedItemId] = useState<string | null>(null);
|
||||
|
||||
const dataSourceType = config.dataSourceType || "table";
|
||||
|
||||
@@ -650,144 +654,156 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
|
||||
{/* ═══════════════════════════════════════ */}
|
||||
{/* 2단계: 집계 항목 */}
|
||||
{/* ═══════════════════════════════════════ */}
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<SectionHeader icon={Calculator} title="집계 항목" description="집계할 컬럼과 연산을 설정하세요" />
|
||||
<Button type="button" variant="outline" size="sm" onClick={addItem} className="h-6 shrink-0 px-2 text-xs">
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
<Separator />
|
||||
|
||||
{(config.items || []).length === 0 ? (
|
||||
<div className="rounded-lg border-2 border-dashed py-6 text-center">
|
||||
<Calculator className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
|
||||
<p className="text-sm text-muted-foreground">아직 집계 항목이 없어요</p>
|
||||
<p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{(config.items || []).map((item, index) => (
|
||||
<div key={item.id} className="space-y-2 rounded-md border p-2.5">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-medium">항목 {index + 1}</span>
|
||||
<Button
|
||||
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>
|
||||
<Collapsible open={itemsOpen} onOpenChange={setItemsOpen}>
|
||||
<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">
|
||||
<Calculator className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">집계 항목</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">{(config.items || []).length}개</Badge>
|
||||
</div>
|
||||
<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">
|
||||
<Plus className="mr-1 h-3 w-3" />추가
|
||||
</Button>
|
||||
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", itemsOpen && "rotate-180")} />
|
||||
</div>
|
||||
</button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<div className="rounded-b-lg border border-t-0 p-3 space-y-1.5">
|
||||
{(config.items || []).length === 0 ? (
|
||||
<div className="rounded-lg border-2 border-dashed py-6 text-center">
|
||||
<Calculator className="mx-auto mb-2 h-8 w-8 text-muted-foreground opacity-30" />
|
||||
<p className="text-sm text-muted-foreground">아직 집계 항목이 없어요</p>
|
||||
<p className="text-xs text-muted-foreground">위의 추가 버튼으로 항목을 만들어보세요</p>
|
||||
</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>
|
||||
</Collapsible>
|
||||
|
||||
{/* ═══════════════════════════════════════ */}
|
||||
{/* 3단계: 필터 조건 (접힘) */}
|
||||
@@ -803,9 +819,9 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
|
||||
<Filter className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">필터 조건</span>
|
||||
{(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}
|
||||
</span>
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="max-h-[250px] space-y-2 overflow-y-auto">
|
||||
{(config.filters || []).map((filter, index) => (
|
||||
<div
|
||||
key={filter.id}
|
||||
@@ -1067,6 +1083,7 @@ export const V2AggregationWidgetConfigPanel: React.FC<V2AggregationWidgetConfigP
|
||||
<div className="flex items-center gap-2">
|
||||
<LayoutGrid className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">레이아웃</span>
|
||||
<Badge variant="secondary" className="text-[10px] h-5">{config.layout === "vertical" ? "세로" : "가로"}</Badge>
|
||||
</div>
|
||||
<ChevronDown className={cn("h-4 w-4 text-muted-foreground transition-transform duration-200", layoutOpen && "rotate-180")} />
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user