385 lines
15 KiB
TypeScript
385 lines
15 KiB
TypeScript
/**
|
|
* 플로우 조건 빌더
|
|
* 동적 조건 생성 UI
|
|
*/
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { Plus, Trash2, Check, ChevronsUpDown } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { FlowConditionGroup, FlowCondition, ConditionOperator } from "@/types/flow";
|
|
import { getTableColumns } from "@/lib/api/tableManagement";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface FlowConditionBuilderProps {
|
|
flowId: number;
|
|
tableName?: string; // 조회할 테이블명
|
|
dbSourceType?: "internal" | "external"; // DB 소스 타입
|
|
dbConnectionId?: number; // 외부 DB 연결 ID
|
|
condition?: FlowConditionGroup;
|
|
onChange: (condition: FlowConditionGroup | undefined) => void;
|
|
}
|
|
|
|
const OPERATORS: { value: ConditionOperator; label: string }[] = [
|
|
{ value: "equals", label: "같음 (=)" },
|
|
{ value: "not_equals", label: "같지 않음 (!=)" },
|
|
{ value: "greater_than", label: "보다 큼 (>)" },
|
|
{ value: "less_than", label: "보다 작음 (<)" },
|
|
{ value: "greater_than_or_equal", label: "이상 (>=)" },
|
|
{ value: "less_than_or_equal", label: "이하 (<=)" },
|
|
{ value: "in", label: "포함 (IN)" },
|
|
{ value: "not_in", label: "제외 (NOT IN)" },
|
|
{ value: "like", label: "유사 (LIKE)" },
|
|
{ value: "not_like", label: "유사하지 않음 (NOT LIKE)" },
|
|
{ value: "is_null", label: "NULL" },
|
|
{ value: "is_not_null", label: "NOT NULL" },
|
|
];
|
|
|
|
export function FlowConditionBuilder({
|
|
flowId,
|
|
tableName,
|
|
dbSourceType = "internal",
|
|
dbConnectionId,
|
|
condition,
|
|
onChange,
|
|
}: FlowConditionBuilderProps) {
|
|
const [columns, setColumns] = useState<any[]>([]);
|
|
const [loadingColumns, setLoadingColumns] = useState(false);
|
|
const [conditionType, setConditionType] = useState<"AND" | "OR">(condition?.type || "AND");
|
|
const [conditions, setConditions] = useState<FlowCondition[]>(condition?.conditions || []);
|
|
const [columnComboboxOpen, setColumnComboboxOpen] = useState<Record<number, boolean>>({});
|
|
|
|
// condition prop이 변경될 때 상태 동기화
|
|
useEffect(() => {
|
|
if (condition) {
|
|
setConditionType(condition.type || "AND");
|
|
setConditions(condition.conditions || []);
|
|
} else {
|
|
setConditionType("AND");
|
|
setConditions([]);
|
|
}
|
|
}, [condition]);
|
|
|
|
// 테이블 컬럼 로드 - 내부/외부 DB 모두 지원
|
|
useEffect(() => {
|
|
if (!tableName) {
|
|
setColumns([]);
|
|
return;
|
|
}
|
|
|
|
const loadColumns = async () => {
|
|
try {
|
|
setLoadingColumns(true);
|
|
console.log("🔍 [FlowConditionBuilder] Loading columns:", {
|
|
tableName,
|
|
dbSourceType,
|
|
dbConnectionId,
|
|
});
|
|
|
|
// 외부 DB인 경우
|
|
if (dbSourceType === "external" && dbConnectionId) {
|
|
const token = localStorage.getItem("authToken");
|
|
if (!token) {
|
|
console.warn("토큰이 없습니다. 외부 DB 컬럼 목록을 조회할 수 없습니다.");
|
|
setColumns([]);
|
|
return;
|
|
}
|
|
|
|
const response = await fetch(
|
|
`/api/multi-connection/connections/${dbConnectionId}/tables/${tableName}/columns`,
|
|
{
|
|
credentials: "include",
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
"Content-Type": "application/json",
|
|
},
|
|
},
|
|
).catch((err) => {
|
|
console.warn("외부 DB 컬럼 fetch 실패:", err);
|
|
return null;
|
|
});
|
|
|
|
if (response && response.ok) {
|
|
const result = await response.json();
|
|
console.log("✅ [FlowConditionBuilder] External columns response:", result);
|
|
|
|
if (result.success && result.data) {
|
|
const columnList = Array.isArray(result.data)
|
|
? result.data.map((col: any) => ({
|
|
column_name: col.column_name || col.columnName || col.name,
|
|
data_type: col.data_type || col.dataType || col.type,
|
|
}))
|
|
: [];
|
|
console.log("✅ Setting external columns:", columnList.length, "items");
|
|
setColumns(columnList);
|
|
} else {
|
|
console.warn("❌ No data in external columns response");
|
|
setColumns([]);
|
|
}
|
|
} else {
|
|
console.warn(`외부 DB 컬럼 조회 실패: ${response?.status}`);
|
|
setColumns([]);
|
|
}
|
|
} else {
|
|
// 내부 DB인 경우 (기존 로직)
|
|
const response = await getTableColumns(tableName);
|
|
console.log("📦 [FlowConditionBuilder] Internal columns response:", response);
|
|
|
|
if (response.success && response.data?.columns) {
|
|
const columnArray = Array.isArray(response.data.columns) ? response.data.columns : [];
|
|
console.log("✅ Setting internal columns:", columnArray.length, "items");
|
|
setColumns(columnArray);
|
|
} else {
|
|
console.error("❌ Failed to load internal columns:", response.message);
|
|
setColumns([]);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error("❌ Exception loading columns:", error);
|
|
setColumns([]);
|
|
} finally {
|
|
setLoadingColumns(false);
|
|
}
|
|
};
|
|
|
|
loadColumns();
|
|
}, [tableName, dbSourceType, dbConnectionId]);
|
|
|
|
// 조건 변경 시 부모에 전달
|
|
useEffect(() => {
|
|
if (conditions.length === 0) {
|
|
onChange(undefined);
|
|
} else {
|
|
onChange({
|
|
type: conditionType,
|
|
conditions,
|
|
});
|
|
}
|
|
}, [conditionType, conditions]);
|
|
|
|
// 조건 추가
|
|
const addCondition = () => {
|
|
setConditions([
|
|
...conditions,
|
|
{
|
|
column: "",
|
|
operator: "equals",
|
|
value: "",
|
|
},
|
|
]);
|
|
};
|
|
|
|
// 조건 수정
|
|
const updateCondition = (index: number, field: keyof FlowCondition, value: any) => {
|
|
const newConditions = [...conditions];
|
|
newConditions[index] = {
|
|
...newConditions[index],
|
|
[field]: value,
|
|
};
|
|
setConditions(newConditions);
|
|
};
|
|
|
|
// 조건 삭제
|
|
const removeCondition = (index: number) => {
|
|
setConditions(conditions.filter((_, i) => i !== index));
|
|
};
|
|
|
|
// value가 필요 없는 연산자 체크
|
|
const needsValue = (operator: ConditionOperator) => {
|
|
return operator !== "is_null" && operator !== "is_not_null";
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{/* 조건 타입 선택 */}
|
|
<div>
|
|
<Label>조건 결합 방식</Label>
|
|
<Select value={conditionType} onValueChange={(value) => setConditionType(value as "AND" | "OR")}>
|
|
<SelectTrigger>
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="AND">AND (모든 조건 만족)</SelectItem>
|
|
<SelectItem value="OR">OR (하나 이상 만족)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 조건 목록 */}
|
|
<div className="space-y-3">
|
|
{conditions.length === 0 ? (
|
|
<div className="text-muted-foreground rounded border-2 border-dashed py-4 text-center text-sm">
|
|
조건이 없습니다
|
|
<br />
|
|
조건을 추가하여 데이터를 필터링하세요
|
|
</div>
|
|
) : (
|
|
conditions.map((cond, index) => (
|
|
<div key={index} className="space-y-2 rounded border bg-gray-50 p-3">
|
|
{/* 조건 번호 및 삭제 버튼 */}
|
|
<div className="flex items-center justify-between">
|
|
<Badge variant="outline">조건 {index + 1}</Badge>
|
|
<Button variant="ghost" size="sm" onClick={() => removeCondition(index)}>
|
|
<Trash2 className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 컬럼 선택 */}
|
|
<div>
|
|
<Label className="text-xs">컬럼</Label>
|
|
{loadingColumns ? (
|
|
<Input value="컬럼 로딩 중..." disabled className="h-8" />
|
|
) : !Array.isArray(columns) || columns.length === 0 ? (
|
|
<Input
|
|
value={cond.column}
|
|
onChange={(e) => updateCondition(index, "column", e.target.value)}
|
|
placeholder="테이블을 먼저 선택하세요"
|
|
className="h-8"
|
|
/>
|
|
) : (
|
|
<Popover
|
|
open={columnComboboxOpen[index] || false}
|
|
onOpenChange={(open) => setColumnComboboxOpen({ ...columnComboboxOpen, [index]: open })}
|
|
>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={columnComboboxOpen[index] || false}
|
|
className="h-8 w-full justify-between text-xs font-normal"
|
|
>
|
|
{cond.column
|
|
? (() => {
|
|
const col = columns.find((c) => (c.column_name || c.columnName) === cond.column);
|
|
const displayName = col?.displayName || col?.display_name || cond.column;
|
|
const dataType = col?.data_type || col?.dataType || "";
|
|
return (
|
|
<span className="flex items-center gap-2">
|
|
<span className="font-medium">{displayName}</span>
|
|
{dataType && <span className="text-gray-500">({dataType})</span>}
|
|
</span>
|
|
);
|
|
})()
|
|
: "컬럼 선택"}
|
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-[300px] p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty className="py-2 text-center text-xs text-gray-500">
|
|
컬럼을 찾을 수 없습니다.
|
|
</CommandEmpty>
|
|
<CommandGroup>
|
|
{columns.map((col, idx) => {
|
|
const columnName = col.column_name || col.columnName || "";
|
|
const dataType = col.data_type || col.dataType || "";
|
|
const displayName = col.displayName || col.display_name || columnName;
|
|
|
|
return (
|
|
<CommandItem
|
|
key={`${columnName}-${idx}`}
|
|
value={columnName}
|
|
onSelect={(currentValue) => {
|
|
updateCondition(index, "column", currentValue);
|
|
setColumnComboboxOpen({ ...columnComboboxOpen, [index]: false });
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-3 w-3",
|
|
cond.column === columnName ? "opacity-100" : "opacity-0",
|
|
)}
|
|
/>
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium">{displayName}</span>
|
|
<span className="text-gray-500">({dataType})</span>
|
|
</div>
|
|
</CommandItem>
|
|
);
|
|
})}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
)}
|
|
</div>
|
|
|
|
{/* 연산자 선택 */}
|
|
<div>
|
|
<Label className="text-xs">연산자</Label>
|
|
<Select
|
|
value={cond.operator}
|
|
onValueChange={(value) => updateCondition(index, "operator", value as ConditionOperator)}
|
|
>
|
|
<SelectTrigger className="h-8">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{OPERATORS.map((op) => (
|
|
<SelectItem key={op.value} value={op.value}>
|
|
{op.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 값 입력 */}
|
|
{needsValue(cond.operator) && (
|
|
<div>
|
|
<Label className="text-xs">값</Label>
|
|
<Input
|
|
value={cond.value || ""}
|
|
onChange={(e) => updateCondition(index, "value", e.target.value)}
|
|
placeholder="값 입력"
|
|
className="h-8"
|
|
/>
|
|
{(cond.operator === "in" || cond.operator === "not_in") && (
|
|
<p className="text-muted-foreground mt-1 text-xs">쉼표(,)로 구분하여 여러 값 입력</p>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{/* 조건 추가 버튼 */}
|
|
<Button variant="outline" size="sm" onClick={addCondition} className="w-full">
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
조건 추가
|
|
</Button>
|
|
|
|
{/* 조건 요약 */}
|
|
{conditions.length > 0 && (
|
|
<div className="rounded bg-blue-50 p-3 text-sm">
|
|
<strong>조건 요약:</strong>
|
|
<div className="mt-2 space-y-1">
|
|
{conditions.map((cond, index) => (
|
|
<div key={index} className="flex items-center gap-2">
|
|
<Badge variant="secondary" className="text-xs">
|
|
{cond.column}
|
|
</Badge>
|
|
<span className="text-muted-foreground">
|
|
{OPERATORS.find((op) => op.value === cond.operator)?.label}
|
|
</span>
|
|
{needsValue(cond.operator) && <code className="rounded bg-white px-2 py-1 text-xs">{cond.value}</code>}
|
|
{index < conditions.length - 1 && <Badge>{conditionType}</Badge>}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|