382 lines
15 KiB
TypeScript
382 lines
15 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useEffect } from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
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 { Switch } from "@/components/ui/switch";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Plus, X, Check, ChevronsUpDown } from "lucide-react";
|
||
|
|
import { AutocompleteSearchInputConfig } from "./types";
|
||
|
|
import { tableManagementApi } from "@/lib/api/tableManagement";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
interface AutocompleteSearchInputConfigPanelProps {
|
||
|
|
config: AutocompleteSearchInputConfig;
|
||
|
|
onConfigChange: (config: AutocompleteSearchInputConfig) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function AutocompleteSearchInputConfigPanel({
|
||
|
|
config,
|
||
|
|
onConfigChange,
|
||
|
|
}: AutocompleteSearchInputConfigPanelProps) {
|
||
|
|
const [localConfig, setLocalConfig] = useState(config);
|
||
|
|
const [allTables, setAllTables] = useState<any[]>([]);
|
||
|
|
const [tableColumns, setTableColumns] = useState<any[]>([]);
|
||
|
|
const [isLoadingTables, setIsLoadingTables] = useState(false);
|
||
|
|
const [isLoadingColumns, setIsLoadingColumns] = useState(false);
|
||
|
|
const [openTableCombo, setOpenTableCombo] = useState(false);
|
||
|
|
const [openDisplayFieldCombo, setOpenDisplayFieldCombo] = useState(false);
|
||
|
|
const [openValueFieldCombo, setOpenValueFieldCombo] = useState(false);
|
||
|
|
|
||
|
|
// 전체 테이블 목록 로드
|
||
|
|
useEffect(() => {
|
||
|
|
const loadTables = async () => {
|
||
|
|
setIsLoadingTables(true);
|
||
|
|
try {
|
||
|
|
const response = await tableManagementApi.getTableList();
|
||
|
|
if (response.success && response.data) {
|
||
|
|
setAllTables(response.data);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("테이블 목록 로드 실패:", error);
|
||
|
|
} finally {
|
||
|
|
setIsLoadingTables(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
loadTables();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
// 선택된 테이블의 컬럼 목록 로드
|
||
|
|
useEffect(() => {
|
||
|
|
const loadColumns = async () => {
|
||
|
|
if (!localConfig.tableName) {
|
||
|
|
setTableColumns([]);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
setIsLoadingColumns(true);
|
||
|
|
try {
|
||
|
|
const response = await tableManagementApi.getColumnList(localConfig.tableName);
|
||
|
|
if (response.success && response.data) {
|
||
|
|
setTableColumns(response.data.columns);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error("컬럼 목록 로드 실패:", error);
|
||
|
|
setTableColumns([]);
|
||
|
|
} finally {
|
||
|
|
setIsLoadingColumns(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
loadColumns();
|
||
|
|
}, [localConfig.tableName]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setLocalConfig(config);
|
||
|
|
}, [config]);
|
||
|
|
|
||
|
|
const updateConfig = (updates: Partial<AutocompleteSearchInputConfig>) => {
|
||
|
|
const newConfig = { ...localConfig, ...updates };
|
||
|
|
setLocalConfig(newConfig);
|
||
|
|
onConfigChange(newConfig);
|
||
|
|
};
|
||
|
|
|
||
|
|
const addSearchField = () => {
|
||
|
|
const fields = localConfig.searchFields || [];
|
||
|
|
updateConfig({ searchFields: [...fields, ""] });
|
||
|
|
};
|
||
|
|
|
||
|
|
const updateSearchField = (index: number, value: string) => {
|
||
|
|
const fields = [...(localConfig.searchFields || [])];
|
||
|
|
fields[index] = value;
|
||
|
|
updateConfig({ searchFields: fields });
|
||
|
|
};
|
||
|
|
|
||
|
|
const removeSearchField = (index: number) => {
|
||
|
|
const fields = [...(localConfig.searchFields || [])];
|
||
|
|
fields.splice(index, 1);
|
||
|
|
updateConfig({ searchFields: fields });
|
||
|
|
};
|
||
|
|
|
||
|
|
const addAdditionalField = () => {
|
||
|
|
const fields = localConfig.additionalFields || [];
|
||
|
|
updateConfig({ additionalFields: [...fields, ""] });
|
||
|
|
};
|
||
|
|
|
||
|
|
const updateAdditionalField = (index: number, value: string) => {
|
||
|
|
const fields = [...(localConfig.additionalFields || [])];
|
||
|
|
fields[index] = value;
|
||
|
|
updateConfig({ additionalFields: fields });
|
||
|
|
};
|
||
|
|
|
||
|
|
const removeAdditionalField = (index: number) => {
|
||
|
|
const fields = [...(localConfig.additionalFields || [])];
|
||
|
|
fields.splice(index, 1);
|
||
|
|
updateConfig({ additionalFields: fields });
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4 p-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs sm:text-sm">테이블명 *</Label>
|
||
|
|
<Popover open={openTableCombo} onOpenChange={setOpenTableCombo}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={openTableCombo}
|
||
|
|
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||
|
|
disabled={isLoadingTables}
|
||
|
|
>
|
||
|
|
{localConfig.tableName
|
||
|
|
? allTables.find((t) => t.tableName === localConfig.tableName)?.displayName || localConfig.tableName
|
||
|
|
: isLoadingTables ? "로딩 중..." : "테이블 선택"}
|
||
|
|
<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>
|
||
|
|
{allTables.map((table) => (
|
||
|
|
<CommandItem
|
||
|
|
key={table.tableName}
|
||
|
|
value={table.tableName}
|
||
|
|
onSelect={() => {
|
||
|
|
updateConfig({ tableName: table.tableName });
|
||
|
|
setOpenTableCombo(false);
|
||
|
|
}}
|
||
|
|
className="text-xs sm:text-sm"
|
||
|
|
>
|
||
|
|
<Check className={cn("mr-2 h-4 w-4", localConfig.tableName === table.tableName ? "opacity-100" : "opacity-0")} />
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="font-medium">{table.displayName || table.tableName}</span>
|
||
|
|
{table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
|
||
|
|
</div>
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs sm:text-sm">표시 필드 *</Label>
|
||
|
|
<Popover open={openDisplayFieldCombo} onOpenChange={setOpenDisplayFieldCombo}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={openDisplayFieldCombo}
|
||
|
|
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||
|
|
disabled={!localConfig.tableName || isLoadingColumns}
|
||
|
|
>
|
||
|
|
{localConfig.displayField
|
||
|
|
? tableColumns.find((c) => c.columnName === localConfig.displayField)?.displayName || localConfig.displayField
|
||
|
|
: isLoadingColumns ? "로딩 중..." : "필드 선택"}
|
||
|
|
<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>
|
||
|
|
{tableColumns.map((column) => (
|
||
|
|
<CommandItem
|
||
|
|
key={column.columnName}
|
||
|
|
value={column.columnName}
|
||
|
|
onSelect={() => {
|
||
|
|
updateConfig({ displayField: column.columnName });
|
||
|
|
setOpenDisplayFieldCombo(false);
|
||
|
|
}}
|
||
|
|
className="text-xs sm:text-sm"
|
||
|
|
>
|
||
|
|
<Check className={cn("mr-2 h-4 w-4", localConfig.displayField === column.columnName ? "opacity-100" : "opacity-0")} />
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="font-medium">{column.displayName || column.columnName}</span>
|
||
|
|
{column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
|
||
|
|
</div>
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs sm:text-sm">값 필드 *</Label>
|
||
|
|
<Popover open={openValueFieldCombo} onOpenChange={setOpenValueFieldCombo}>
|
||
|
|
<PopoverTrigger asChild>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
role="combobox"
|
||
|
|
aria-expanded={openValueFieldCombo}
|
||
|
|
className="h-8 w-full justify-between text-xs sm:h-10 sm:text-sm"
|
||
|
|
disabled={!localConfig.tableName || isLoadingColumns}
|
||
|
|
>
|
||
|
|
{localConfig.valueField
|
||
|
|
? tableColumns.find((c) => c.columnName === localConfig.valueField)?.displayName || localConfig.valueField
|
||
|
|
: isLoadingColumns ? "로딩 중..." : "필드 선택"}
|
||
|
|
<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>
|
||
|
|
{tableColumns.map((column) => (
|
||
|
|
<CommandItem
|
||
|
|
key={column.columnName}
|
||
|
|
value={column.columnName}
|
||
|
|
onSelect={() => {
|
||
|
|
updateConfig({ valueField: column.columnName });
|
||
|
|
setOpenValueFieldCombo(false);
|
||
|
|
}}
|
||
|
|
className="text-xs sm:text-sm"
|
||
|
|
>
|
||
|
|
<Check className={cn("mr-2 h-4 w-4", localConfig.valueField === column.columnName ? "opacity-100" : "opacity-0")} />
|
||
|
|
<div className="flex flex-col">
|
||
|
|
<span className="font-medium">{column.displayName || column.columnName}</span>
|
||
|
|
{column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
|
||
|
|
</div>
|
||
|
|
</CommandItem>
|
||
|
|
))}
|
||
|
|
</CommandGroup>
|
||
|
|
</CommandList>
|
||
|
|
</Command>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs sm:text-sm">플레이스홀더</Label>
|
||
|
|
<Input
|
||
|
|
value={localConfig.placeholder || ""}
|
||
|
|
onChange={(e) => updateConfig({ placeholder: e.target.value })}
|
||
|
|
placeholder="검색..."
|
||
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<Label className="text-xs sm:text-sm">검색 필드</Label>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant="outline"
|
||
|
|
onClick={addSearchField}
|
||
|
|
className="h-7 text-xs"
|
||
|
|
disabled={!localConfig.tableName || isLoadingColumns}
|
||
|
|
>
|
||
|
|
<Plus className="h-3 w-3 mr-1" />
|
||
|
|
추가
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{(localConfig.searchFields || []).map((field, index) => (
|
||
|
|
<div key={index} className="flex items-center gap-2">
|
||
|
|
<Select
|
||
|
|
value={field}
|
||
|
|
onValueChange={(value) => updateSearchField(index, value)}
|
||
|
|
disabled={!localConfig.tableName || isLoadingColumns}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
|
||
|
|
<SelectValue placeholder="필드 선택" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{tableColumns.map((col) => (
|
||
|
|
<SelectItem key={col.columnName} value={col.columnName}>
|
||
|
|
{col.displayName || col.columnName}
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant="ghost"
|
||
|
|
onClick={() => removeSearchField(index)}
|
||
|
|
className="h-8 w-8 p-0"
|
||
|
|
>
|
||
|
|
<X className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<Label className="text-xs sm:text-sm">추가 정보 표시</Label>
|
||
|
|
<Switch
|
||
|
|
checked={localConfig.showAdditionalInfo || false}
|
||
|
|
onCheckedChange={(checked) =>
|
||
|
|
updateConfig({ showAdditionalInfo: checked })
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{localConfig.showAdditionalInfo && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<Label className="text-xs sm:text-sm">추가 필드</Label>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant="outline"
|
||
|
|
onClick={addAdditionalField}
|
||
|
|
className="h-7 text-xs"
|
||
|
|
disabled={!localConfig.tableName || isLoadingColumns}
|
||
|
|
>
|
||
|
|
<Plus className="h-3 w-3 mr-1" />
|
||
|
|
추가
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
{(localConfig.additionalFields || []).map((field, index) => (
|
||
|
|
<div key={index} className="flex items-center gap-2">
|
||
|
|
<Select
|
||
|
|
value={field}
|
||
|
|
onValueChange={(value) => updateAdditionalField(index, value)}
|
||
|
|
disabled={!localConfig.tableName || isLoadingColumns}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm flex-1">
|
||
|
|
<SelectValue placeholder="필드 선택" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{tableColumns.map((col) => (
|
||
|
|
<SelectItem key={col.columnName} value={col.columnName}>
|
||
|
|
{col.displayName || col.columnName}
|
||
|
|
</SelectItem>
|
||
|
|
))}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Button
|
||
|
|
size="sm"
|
||
|
|
variant="ghost"
|
||
|
|
onClick={() => removeAdditionalField(index)}
|
||
|
|
className="h-8 w-8 p-0"
|
||
|
|
>
|
||
|
|
<X className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|