126 lines
4.9 KiB
TypeScript
126 lines
4.9 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Table2, Check, ChevronsUpDown } from "lucide-react";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export interface BasicConfigPanelProps {
|
|
config: any;
|
|
onChange: (key: string, value: any) => void;
|
|
screenTableName?: string;
|
|
availableTables: Array<{ tableName: string; displayName: string }>;
|
|
loadingTables: boolean;
|
|
targetTableName: string | undefined;
|
|
tableComboboxOpen: boolean;
|
|
onTableComboboxOpenChange: (open: boolean) => void;
|
|
onTableChange: (newTableName: string) => void;
|
|
}
|
|
|
|
/**
|
|
* 기본 설정 패널: 테이블 선택, 데이터 소스
|
|
*/
|
|
export const BasicConfigPanel: React.FC<BasicConfigPanelProps> = ({
|
|
config,
|
|
screenTableName,
|
|
availableTables,
|
|
loadingTables,
|
|
targetTableName,
|
|
tableComboboxOpen,
|
|
onTableComboboxOpenChange,
|
|
onTableChange,
|
|
}) => {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="space-y-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold">데이터 소스</h3>
|
|
<p className="text-muted-foreground text-[10px]">
|
|
테이블을 선택하세요. 미선택 시 화면 메인 테이블을 사용합니다.
|
|
</p>
|
|
</div>
|
|
<hr className="border-border" />
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">테이블 선택</Label>
|
|
<Popover open={tableComboboxOpen} onOpenChange={onTableComboboxOpenChange}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={tableComboboxOpen}
|
|
className="h-8 w-full justify-between text-xs"
|
|
disabled={loadingTables}
|
|
>
|
|
<div className="flex items-center gap-2 truncate">
|
|
<Table2 className="h-3 w-3 shrink-0" />
|
|
<span className="truncate">
|
|
{loadingTables
|
|
? "테이블 로딩 중..."
|
|
: targetTableName
|
|
? availableTables.find((t) => t.tableName === targetTableName)?.displayName || targetTableName
|
|
: "테이블 선택"}
|
|
</span>
|
|
</div>
|
|
<ChevronsUpDown className="ml-2 h-3 w-3 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" />
|
|
<CommandList>
|
|
<CommandEmpty className="text-xs">테이블을 찾을 수 없습니다.</CommandEmpty>
|
|
<CommandGroup>
|
|
{availableTables.map((table) => (
|
|
<CommandItem
|
|
key={table.tableName}
|
|
value={`${table.tableName} ${table.displayName}`}
|
|
onSelect={() => onTableChange(table.tableName)}
|
|
className="text-xs"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-3 w-3",
|
|
targetTableName === table.tableName ? "opacity-100" : "opacity-0",
|
|
)}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span>{table.displayName}</span>
|
|
{table.displayName !== table.tableName && (
|
|
<span className="text-[10px] text-gray-400">{table.tableName}</span>
|
|
)}
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
{screenTableName && targetTableName && targetTableName !== screenTableName && (
|
|
<div className="flex items-center justify-between rounded bg-amber-50 px-2 py-1">
|
|
<span className="text-[10px] text-amber-700">
|
|
화면 기본 테이블({screenTableName})과 다른 테이블을 사용 중
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
className="h-5 px-1.5 text-[10px] text-amber-700 hover:text-amber-900"
|
|
onClick={() => onTableChange(screenTableName)}
|
|
>
|
|
기본으로
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|