chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

노드별 컬럼 검색선택기능

Browse Source
This commit is contained in:
kjs
2025-10-24 18:05:11 +09:00
parent 31bd9c26b7
commit 6d54a4c9ea
5 changed files with 1723 additions and 869 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
frontend/components/dataflow/node-editor/panels/properties/ReferenceLookupProperties.tsx
View File

@@ -5,14 +5,13 @@
*/
import { useEffect, useState, useCallback } from "react";
import { Plus, Trash2, Search } from "lucide-react";
import { Plus, Trash2, Search, Check, ChevronsUpDown } from "lucide-react";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";
import { useFlowEditorStore } from "@/lib/stores/flowEditorStore";
import type { ReferenceLookupNodeData } from "@/types/node-editor";
@@ -62,6 +61,9 @@ export function ReferenceLookupProperties({ nodeId, data }: ReferenceLookupPrope
const [referenceColumns, setReferenceColumns] = useState<FieldDefinition[]>([]);
const [columnsLoading, setColumnsLoading] = useState(false);
// Combobox 열림 상태 관리
const [whereFieldOpenState, setWhereFieldOpenState] = useState<boolean[]>([]);
// 데이터 변경 시 로컬 상태 동기화
useEffect(() => {
setDisplayName(data.displayName || "참조 조회");
@@ -72,6 +74,11 @@ export function ReferenceLookupProperties({ nodeId, data }: ReferenceLookupPrope
setOutputFields(data.outputFields || []);
}, [data]);
// whereConditions 변경 시 whereFieldOpenState 초기화
useEffect(() => {
setWhereFieldOpenState(new Array(whereConditions.length).fill(false));
}, [whereConditions.length]);
// 🔍 소스 필드 수집 (업스트림 노드에서)
useEffect(() => {
const incomingEdges = edges.filter((e) => e.target === nodeId);
@@ -187,7 +194,7 @@ export function ReferenceLookupProperties({ nodeId, data }: ReferenceLookupPrope
// WHERE 조건 추가
const handleAddWhereCondition = () => {
setWhereConditions([
const newConditions = [
...whereConditions,
{
field: "",
@@ -195,11 +202,15 @@ export function ReferenceLookupProperties({ nodeId, data }: ReferenceLookupPrope
value: "",
valueType: "static",
},
]);
];
setWhereConditions(newConditions);
setWhereFieldOpenState(new Array(newConditions.length).fill(false));
};
const handleRemoveWhereCondition = (index: number) => {
setWhereConditions(whereConditions.filter((_, i) => i !== index));
const newConditions = whereConditions.filter((_, i) => i !== index);
setWhereConditions(newConditions);
setWhereFieldOpenState(new Array(newConditions.length).fill(false));
};
const handleWhereConditionChange = (index: number, field: string, value: any) => {
@@ -455,23 +466,81 @@ export function ReferenceLookupProperties({ nodeId, data }: ReferenceLookupPrope
</div>
<div className="space-y-2">
{/* 필드 - Combobox */}
<div>
<Label className="text-xs text-gray-600">필드</Label>
<Select
value={condition.field}
onValueChange={(value) => handleWhereConditionChange(index, "field", value)}
<Popover
open={whereFieldOpenState[index]}
onOpenChange={(open) => {
const newState = [...whereFieldOpenState];
newState[index] = open;
setWhereFieldOpenState(newState);
}}
>
<SelectTrigger className="mt-1 h-8 text-xs">
<SelectValue placeholder="필드 선택" />
</SelectTrigger>
<SelectContent>
{referenceColumns.map((field) => (
<SelectItem key={field.name} value={field.name}>
{field.label || field.name}
</SelectItem>
))}
</SelectContent>
</Select>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={whereFieldOpenState[index]}
className="mt-1 h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
>
{condition.field
? (() => {
const field = referenceColumns.find((f) => f.name === condition.field);
return (
<div className="flex items-center justify-between gap-2 overflow-hidden">
<span className="truncate">{field?.label || condition.field}</span>
{field?.type && (
<span className="text-muted-foreground text-xs">{field.type}</span>
)}
</div>
);
})()
: "필드 선택"}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent
className="p-0"
style={{ width: "var(--radix-popover-trigger-width)" }}
align="start"
>
<Command>
<CommandInput placeholder="필드 검색..." className="text-xs sm:text-sm" />
<CommandList>
<CommandEmpty className="text-xs sm:text-sm">필드를 찾을 수 없습니다.</CommandEmpty>
<CommandGroup>
{referenceColumns.map((field) => (
<CommandItem
key={field.name}
value={field.name}
onSelect={(currentValue) => {
handleWhereConditionChange(index, "field", currentValue);
const newState = [...whereFieldOpenState];
newState[index] = false;
setWhereFieldOpenState(newState);
}}
className="text-xs sm:text-sm"
>
<Check
className={cn(
"mr-2 h-4 w-4",
condition.field === field.name ? "opacity-100" : "opacity-0",
)}
/>
<div className="flex flex-col">
<span className="font-medium">{field.label || field.name}</span>
{field.type && (
<span className="text-muted-foreground text-[10px]">{field.type}</span>
)}
</div>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div>
<div>