2129 lines
89 KiB
TypeScript
2129 lines
89 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback } from "react";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Switch } from "@/components/ui/switch";
|
|
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, ChevronsUpDown, Plus, X, Settings, Columns, MousePointerClick } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { apiClient } from "@/lib/api/client";
|
|
import type { SplitPanelLayout2Config, ColumnConfig, DataTransferField, JoinTableConfig, ColumnDisplayConfig, ActionButtonConfig, SearchColumnConfig, GroupingConfig, TabConfig, ButtonDataTransferConfig } from "./types";
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
import { ColumnConfigModal } from "./ColumnConfigModal";
|
|
import { ActionButtonConfigModal } from "./ActionButtonConfigModal";
|
|
|
|
// lodash set 대체 함수
|
|
const setPath = (obj: any, path: string, value: any): any => {
|
|
const keys = path.split(".");
|
|
const result = { ...obj };
|
|
let current = result;
|
|
|
|
for (let i = 0; i < keys.length - 1; i++) {
|
|
const key = keys[i];
|
|
current[key] = current[key] ? { ...current[key] } : {};
|
|
current = current[key];
|
|
}
|
|
|
|
current[keys[keys.length - 1]] = value;
|
|
return result;
|
|
};
|
|
|
|
interface SplitPanelLayout2ConfigPanelProps {
|
|
config: SplitPanelLayout2Config;
|
|
onChange: (config: SplitPanelLayout2Config) => void;
|
|
}
|
|
|
|
interface TableInfo {
|
|
table_name: string;
|
|
table_comment?: string;
|
|
}
|
|
|
|
interface ColumnInfo {
|
|
column_name: string;
|
|
data_type: string;
|
|
column_comment?: string;
|
|
}
|
|
|
|
interface ScreenInfo {
|
|
screen_id: number;
|
|
screen_name: string;
|
|
screen_code: string;
|
|
}
|
|
|
|
export const SplitPanelLayout2ConfigPanel: React.FC<SplitPanelLayout2ConfigPanelProps> = ({ config, onChange }) => {
|
|
// updateConfig 헬퍼 함수: 경로 기반으로 config를 업데이트
|
|
const updateConfig = useCallback(
|
|
(path: string, value: any) => {
|
|
console.log(`[SplitPanelLayout2ConfigPanel] updateConfig: ${path} =`, value);
|
|
const newConfig = setPath(config, path, value);
|
|
console.log("[SplitPanelLayout2ConfigPanel] newConfig:", newConfig);
|
|
onChange(newConfig);
|
|
},
|
|
[config, onChange],
|
|
);
|
|
|
|
// 상태
|
|
const [tables, setTables] = useState<TableInfo[]>([]);
|
|
const [leftColumns, setLeftColumns] = useState<ColumnInfo[]>([]);
|
|
const [rightColumns, setRightColumns] = useState<ColumnInfo[]>([]);
|
|
const [screens, setScreens] = useState<ScreenInfo[]>([]);
|
|
const [tablesLoading, setTablesLoading] = useState(false);
|
|
const [screensLoading, setScreensLoading] = useState(false);
|
|
|
|
// Popover 상태
|
|
const [leftTableOpen, setLeftTableOpen] = useState(false);
|
|
const [rightTableOpen, setRightTableOpen] = useState(false);
|
|
const [leftModalOpen, setLeftModalOpen] = useState(false);
|
|
const [rightModalOpen, setRightModalOpen] = useState(false);
|
|
|
|
// 개별 수정 모달 화면 선택 Popover 상태
|
|
const [leftEditModalOpen, setLeftEditModalOpen] = useState(false);
|
|
const [rightEditModalOpen, setRightEditModalOpen] = useState(false);
|
|
|
|
// 컬럼 세부설정 모달 상태 (기존 - 하위 호환성)
|
|
const [columnConfigModalOpen, setColumnConfigModalOpen] = useState(false);
|
|
const [editingColumnIndex, setEditingColumnIndex] = useState<number | null>(null);
|
|
const [editingColumnConfig, setEditingColumnConfig] = useState<ColumnDisplayConfig>({
|
|
displayType: "text",
|
|
aggregate: { enabled: false, function: "DISTINCT" },
|
|
});
|
|
|
|
// 새로운 컬럼 설정 모달 상태
|
|
const [leftColumnModalOpen, setLeftColumnModalOpen] = useState(false);
|
|
const [rightColumnModalOpen, setRightColumnModalOpen] = useState(false);
|
|
|
|
// 액션 버튼 설정 모달 상태
|
|
const [leftActionButtonModalOpen, setLeftActionButtonModalOpen] = useState(false);
|
|
const [rightActionButtonModalOpen, setRightActionButtonModalOpen] = useState(false);
|
|
|
|
// 데이터 전달 설정 모달 상태
|
|
const [dataTransferModalOpen, setDataTransferModalOpen] = useState(false);
|
|
const [editingTransferIndex, setEditingTransferIndex] = useState<number | null>(null);
|
|
|
|
// 테이블 목록 로드
|
|
const loadTables = useCallback(async () => {
|
|
setTablesLoading(true);
|
|
try {
|
|
const response = await apiClient.get("/table-management/tables");
|
|
console.log("[loadTables] API 응답:", response.data);
|
|
|
|
let tableList: any[] = [];
|
|
if (response.data?.success && Array.isArray(response.data?.data)) {
|
|
tableList = response.data.data;
|
|
} else if (Array.isArray(response.data?.data)) {
|
|
tableList = response.data.data;
|
|
} else if (Array.isArray(response.data)) {
|
|
tableList = response.data;
|
|
}
|
|
|
|
console.log("[loadTables] 추출된 테이블 목록:", tableList);
|
|
|
|
if (tableList.length > 0) {
|
|
// 백엔드에서 카멜케이스(tableName)로 반환하므로 둘 다 처리
|
|
const transformedTables = tableList.map((t: any) => ({
|
|
table_name: t.tableName ?? t.table_name ?? t.name ?? "",
|
|
table_comment: t.displayName ?? t.table_comment ?? t.description ?? "",
|
|
}));
|
|
console.log("[loadTables] 변환된 테이블 목록:", transformedTables);
|
|
setTables(transformedTables);
|
|
} else {
|
|
console.warn("[loadTables] 테이블 목록이 비어있습니다");
|
|
setTables([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("테이블 목록 로드 실패:", error);
|
|
setTables([]);
|
|
} finally {
|
|
setTablesLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
// 화면 목록 로드
|
|
const loadScreens = useCallback(async () => {
|
|
setScreensLoading(true);
|
|
try {
|
|
// size를 크게 설정하여 모든 화면 가져오기
|
|
const response = await apiClient.get("/screen-management/screens?size=1000");
|
|
console.log("[loadScreens] API 응답:", response.data);
|
|
|
|
// API 응답 구조: { success, data: [...], total, page, size }
|
|
let screenList: any[] = [];
|
|
if (response.data?.success && Array.isArray(response.data?.data)) {
|
|
screenList = response.data.data;
|
|
} else if (Array.isArray(response.data?.data)) {
|
|
screenList = response.data.data;
|
|
} else if (Array.isArray(response.data)) {
|
|
screenList = response.data;
|
|
}
|
|
|
|
console.log("[loadScreens] 추출된 화면 목록:", screenList);
|
|
|
|
if (screenList.length > 0) {
|
|
// 백엔드에서 카멜케이스(screenId, screenName)로 반환하므로 둘 다 처리
|
|
const transformedScreens = screenList.map((s: any) => ({
|
|
screen_id: s.screenId ?? s.screen_id ?? s.id,
|
|
screen_name: s.screenName ?? s.screen_name ?? s.name ?? `화면 ${s.screenId || s.screen_id || s.id}`,
|
|
screen_code: s.screenCode ?? s.screen_code ?? s.code ?? "",
|
|
}));
|
|
console.log("[loadScreens] 변환된 화면 목록:", transformedScreens);
|
|
setScreens(transformedScreens);
|
|
} else {
|
|
console.warn("[loadScreens] 화면 목록이 비어있습니다");
|
|
setScreens([]);
|
|
}
|
|
} catch (error) {
|
|
console.error("화면 목록 로드 실패:", error);
|
|
setScreens([]);
|
|
} finally {
|
|
setScreensLoading(false);
|
|
}
|
|
}, []);
|
|
|
|
// 컬럼 목록 로드
|
|
const loadColumns = useCallback(async (tableName: string, side: "left" | "right") => {
|
|
if (!tableName) return;
|
|
try {
|
|
const response = await apiClient.get(`/table-management/tables/${tableName}/columns?size=200`);
|
|
console.log(`[loadColumns] ${side} API 응답:`, response.data);
|
|
|
|
// API 응답 구조: { success, data: { columns: [...], total, page, totalPages } }
|
|
let columnList: any[] = [];
|
|
if (response.data?.success && response.data?.data?.columns) {
|
|
columnList = response.data.data.columns;
|
|
} else if (Array.isArray(response.data?.data?.columns)) {
|
|
columnList = response.data.data.columns;
|
|
} else if (Array.isArray(response.data?.data)) {
|
|
columnList = response.data.data;
|
|
} else if (Array.isArray(response.data)) {
|
|
columnList = response.data;
|
|
}
|
|
|
|
console.log(`[loadColumns] ${side} 추출된 컬럼 목록:`, columnList);
|
|
|
|
if (columnList.length > 0) {
|
|
// 백엔드에서 카멜케이스(columnName)로 반환하므로 둘 다 처리
|
|
const transformedColumns = columnList.map((c: any) => ({
|
|
column_name: c.columnName ?? c.column_name ?? c.name ?? "",
|
|
data_type: c.dataType ?? c.data_type ?? c.type ?? "",
|
|
column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
|
|
}));
|
|
console.log(`[loadColumns] ${side} 변환된 컬럼 목록:`, transformedColumns);
|
|
|
|
if (side === "left") {
|
|
setLeftColumns(transformedColumns);
|
|
} else {
|
|
setRightColumns(transformedColumns);
|
|
}
|
|
} else {
|
|
console.warn(`[loadColumns] ${side} 컬럼 목록이 비어있습니다`);
|
|
if (side === "left") {
|
|
setLeftColumns([]);
|
|
} else {
|
|
setRightColumns([]);
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error(`${side} 컬럼 목록 로드 실패:`, error);
|
|
if (side === "left") {
|
|
setLeftColumns([]);
|
|
} else {
|
|
setRightColumns([]);
|
|
}
|
|
}
|
|
}, []);
|
|
|
|
// 초기 로드
|
|
useEffect(() => {
|
|
loadTables();
|
|
loadScreens();
|
|
}, [loadTables, loadScreens]);
|
|
|
|
// 테이블 변경 시 컬럼 로드
|
|
useEffect(() => {
|
|
if (config.leftPanel?.tableName) {
|
|
loadColumns(config.leftPanel.tableName, "left");
|
|
}
|
|
}, [config.leftPanel?.tableName, loadColumns]);
|
|
|
|
useEffect(() => {
|
|
if (config.rightPanel?.tableName) {
|
|
loadColumns(config.rightPanel.tableName, "right");
|
|
}
|
|
}, [config.rightPanel?.tableName, loadColumns]);
|
|
|
|
// 조인 테이블 컬럼도 우측 컬럼 목록에 추가
|
|
useEffect(() => {
|
|
const loadJoinTableColumns = async () => {
|
|
const joinTables = config.rightPanel?.joinTables || [];
|
|
if (joinTables.length === 0 || !config.rightPanel?.tableName) return;
|
|
|
|
// 메인 테이블 컬럼 먼저 로드
|
|
try {
|
|
const mainResponse = await apiClient.get(
|
|
`/table-management/tables/${config.rightPanel.tableName}/columns?size=200`,
|
|
);
|
|
let mainColumns: ColumnInfo[] = [];
|
|
|
|
if (mainResponse.data?.success) {
|
|
const columnList = mainResponse.data.data?.columns || mainResponse.data.data || [];
|
|
mainColumns = columnList.map((c: any) => ({
|
|
column_name: c.columnName ?? c.column_name ?? c.name ?? "",
|
|
data_type: c.dataType ?? c.data_type ?? c.type ?? "",
|
|
column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
|
|
}));
|
|
}
|
|
|
|
// 조인 테이블들의 선택된 컬럼 추가
|
|
const joinColumns: ColumnInfo[] = [];
|
|
for (const jt of joinTables) {
|
|
if (jt.joinTable && jt.selectColumns && jt.selectColumns.length > 0) {
|
|
try {
|
|
const joinResponse = await apiClient.get(`/table-management/tables/${jt.joinTable}/columns?size=200`);
|
|
if (joinResponse.data?.success) {
|
|
const columnList = joinResponse.data.data?.columns || joinResponse.data.data || [];
|
|
const transformedColumns = columnList.map((c: any) => ({
|
|
column_name: c.columnName ?? c.column_name ?? c.name ?? "",
|
|
data_type: c.dataType ?? c.data_type ?? c.type ?? "",
|
|
column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
|
|
}));
|
|
|
|
// 선택된 컬럼 추가 (테이블명으로 구분, 유니크 키 생성)
|
|
jt.selectColumns.forEach((selCol) => {
|
|
const col = transformedColumns.find((c: ColumnInfo) => c.column_name === selCol);
|
|
if (col) {
|
|
joinColumns.push({
|
|
...col,
|
|
// 유니크 키를 위해 테이블명_컬럼명 형태로 저장
|
|
column_name: `${jt.joinTable}.${col.column_name}`,
|
|
column_comment: col.column_comment
|
|
? `${col.column_comment} (${jt.joinTable})`
|
|
: `${col.column_name} (${jt.joinTable})`,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error(`조인 테이블 ${jt.joinTable} 컬럼 로드 실패:`, error);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 메인 + 조인 컬럼 합치기
|
|
setRightColumns([...mainColumns, ...joinColumns]);
|
|
console.log(
|
|
`[loadJoinTableColumns] 우측 컬럼 로드 완료: 메인 ${mainColumns.length}개 + 조인 ${joinColumns.length}개`,
|
|
);
|
|
} catch (error) {
|
|
console.error("조인 테이블 컬럼 로드 실패:", error);
|
|
}
|
|
};
|
|
|
|
loadJoinTableColumns();
|
|
}, [config.rightPanel?.tableName, config.rightPanel?.joinTables]);
|
|
|
|
// 테이블 선택 컴포넌트
|
|
const TableSelect: React.FC<{
|
|
value: string;
|
|
onValueChange: (value: string) => void;
|
|
placeholder: string;
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
}> = ({ value, onValueChange, placeholder, open, onOpenChange }) => {
|
|
const selectedTable = tables.find((t) => t.table_name === value);
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={onOpenChange}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
disabled={tablesLoading}
|
|
className="h-9 w-full justify-between text-sm"
|
|
>
|
|
{tablesLoading
|
|
? "로딩 중..."
|
|
: selectedTable
|
|
? selectedTable.table_comment || selectedTable.table_name
|
|
: value || placeholder}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-full p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="테이블 검색..." className="h-9" />
|
|
<CommandList>
|
|
<CommandEmpty>
|
|
{tables.length === 0 ? "테이블 목록을 불러오는 중..." : "검색 결과가 없습니다"}
|
|
</CommandEmpty>
|
|
<CommandGroup>
|
|
{tables.map((table, index) => (
|
|
<CommandItem
|
|
key={`table-${table.table_name || index}`}
|
|
value={`${table.table_name} ${table.table_comment || ""}`}
|
|
onSelect={() => {
|
|
onValueChange(table.table_name);
|
|
onOpenChange(false);
|
|
}}
|
|
>
|
|
<Check className={cn("mr-2 h-4 w-4", value === table.table_name ? "opacity-100" : "opacity-0")} />
|
|
<span className="flex flex-col">
|
|
<span>{table.table_comment || table.table_name}</span>
|
|
<span className="text-muted-foreground text-xs">{table.table_name}</span>
|
|
</span>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
// 화면 선택 컴포넌트
|
|
const ScreenSelect: React.FC<{
|
|
value: number | undefined;
|
|
onValueChange: (value: number | undefined) => void;
|
|
placeholder: string;
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
}> = ({ value, onValueChange, placeholder, open, onOpenChange }) => {
|
|
const selectedScreen = screens.find((s) => s.screen_id === value);
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={onOpenChange}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
disabled={screensLoading}
|
|
className="h-9 w-full justify-between text-sm"
|
|
>
|
|
{screensLoading
|
|
? "로딩 중..."
|
|
: selectedScreen
|
|
? selectedScreen.screen_name
|
|
: value
|
|
? `화면 ${value}`
|
|
: placeholder}
|
|
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-full p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="화면 검색..." className="h-9" />
|
|
<CommandList>
|
|
<CommandEmpty>
|
|
{screens.length === 0 ? "화면 목록을 불러오는 중..." : "검색 결과가 없습니다"}
|
|
</CommandEmpty>
|
|
<CommandGroup>
|
|
{screens.map((screen, index) => (
|
|
<CommandItem
|
|
key={`screen-${screen.screen_id ?? index}`}
|
|
value={`${screen.screen_id}-${screen.screen_name}`}
|
|
onSelect={(selectedValue: string) => {
|
|
const screenId = parseInt(selectedValue.split("-")[0]);
|
|
console.log("[ScreenSelect] onSelect:", { selectedValue, screenId, screen });
|
|
onValueChange(isNaN(screenId) ? undefined : screenId);
|
|
onOpenChange(false);
|
|
}}
|
|
className="flex items-center"
|
|
>
|
|
<div className="flex w-full items-center">
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-4 w-4 shrink-0",
|
|
value === screen.screen_id ? "opacity-100" : "opacity-0",
|
|
)}
|
|
/>
|
|
<span className="flex flex-col">
|
|
<span>{screen.screen_name}</span>
|
|
<span className="text-muted-foreground text-xs">{screen.screen_code}</span>
|
|
</span>
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
// 컬럼 선택 컴포넌트
|
|
const ColumnSelect: React.FC<{
|
|
columns: ColumnInfo[];
|
|
value: string;
|
|
onValueChange: (value: string) => void;
|
|
placeholder: string;
|
|
showTableName?: boolean; // 테이블명 표시 여부
|
|
tableName?: string; // 메인 테이블명 (조인 컬럼과 구분용)
|
|
}> = ({ columns, value, onValueChange, placeholder, showTableName = false, tableName }) => {
|
|
// 현재 선택된 값의 라벨 찾기
|
|
const selectedColumn = columns.find((col) => col.column_name === value);
|
|
const displayValue = selectedColumn ? selectedColumn.column_comment || selectedColumn.column_name : value || "";
|
|
|
|
// 컬럼이 조인 테이블에서 온 것인지 확인 (column_comment에 괄호가 있으면 조인 테이블)
|
|
const isJoinColumn = (col: ColumnInfo) => col.column_comment?.includes("(") && col.column_comment?.includes(")");
|
|
|
|
// 컬럼 표시 텍스트 생성
|
|
const getColumnDisplayText = (col: ColumnInfo) => {
|
|
const label = col.column_comment || col.column_name;
|
|
if (showTableName && tableName && !isJoinColumn(col)) {
|
|
// 메인 테이블 컬럼에 테이블명 추가
|
|
return `${label} (${tableName})`;
|
|
}
|
|
return label;
|
|
};
|
|
|
|
return (
|
|
<Select value={value || ""} onValueChange={onValueChange}>
|
|
<SelectTrigger className="h-9 min-w-[120px] text-sm">
|
|
<SelectValue placeholder={placeholder}>{displayValue || placeholder}</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{columns.length === 0 ? (
|
|
<SelectItem value="_empty" disabled>
|
|
테이블을 먼저 선택하세요
|
|
</SelectItem>
|
|
) : (
|
|
columns.map((col) => (
|
|
<SelectItem key={col.column_name} value={col.column_name}>
|
|
<span className="flex flex-col">
|
|
<span>{col.column_comment || col.column_name}</span>
|
|
{showTableName && (
|
|
<span className="text-muted-foreground text-[10px]">
|
|
{isJoinColumn(col) ? col.column_name : `${col.column_name} (${tableName || "메인"})`}
|
|
</span>
|
|
)}
|
|
</span>
|
|
</SelectItem>
|
|
))
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
};
|
|
|
|
// 검색 가능한 컬럼 선택 컴포넌트 (Combobox 패턴)
|
|
const SearchableColumnSelect: React.FC<{
|
|
columns: ColumnInfo[];
|
|
value: string;
|
|
onValueChange: (value: string) => void;
|
|
placeholder: string;
|
|
disabled?: boolean;
|
|
}> = ({ columns, value, onValueChange, placeholder, disabled = false }) => {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
// 현재 선택된 값의 라벨 찾기
|
|
const selectedColumn = columns.find((col) => col.column_name === value);
|
|
const displayValue = selectedColumn
|
|
? `${selectedColumn.column_comment || selectedColumn.column_name} (${selectedColumn.column_name})`
|
|
: "";
|
|
|
|
return (
|
|
<Popover open={open} onOpenChange={setOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={open}
|
|
disabled={disabled || columns.length === 0}
|
|
className="h-8 w-full justify-between text-xs"
|
|
>
|
|
{columns.length === 0
|
|
? "테이블을 먼저 선택하세요"
|
|
: value
|
|
? displayValue
|
|
: placeholder}
|
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-full p-0" align="start" style={{ width: "var(--radix-popover-trigger-width)" }}>
|
|
<Command>
|
|
<CommandInput placeholder="컬럼 검색 (한글/영어)..." className="h-8 text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty>검색 결과가 없습니다</CommandEmpty>
|
|
<CommandGroup>
|
|
{columns.map((col, index) => (
|
|
<CommandItem
|
|
key={`col-${col.column_name || index}`}
|
|
// 한글 라벨과 영어 컬럼명 모두 검색 가능하도록 value에 포함
|
|
value={`${col.column_name} ${col.column_comment || ""}`}
|
|
onSelect={() => {
|
|
onValueChange(col.column_name);
|
|
setOpen(false);
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
<Check
|
|
className={cn("mr-2 h-3 w-3", value === col.column_name ? "opacity-100" : "opacity-0")}
|
|
/>
|
|
<div className="flex flex-col">
|
|
<span className="font-medium">{col.column_comment || col.column_name}</span>
|
|
<span className="text-muted-foreground text-[10px]">{col.column_name}</span>
|
|
</div>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
// 조인 테이블 아이템 컴포넌트
|
|
const JoinTableItem: React.FC<{
|
|
index: number;
|
|
joinTable: JoinTableConfig;
|
|
tables: TableInfo[];
|
|
mainTableColumns: ColumnInfo[];
|
|
onUpdate: (field: keyof JoinTableConfig | Partial<JoinTableConfig>, value?: any) => void;
|
|
onRemove: () => void;
|
|
}> = ({ index, joinTable, tables, mainTableColumns, onUpdate, onRemove }) => {
|
|
const [joinTableColumns, setJoinTableColumns] = useState<ColumnInfo[]>([]);
|
|
const [joinTableOpen, setJoinTableOpen] = useState(false);
|
|
|
|
// 조인 테이블 선택 시 해당 테이블의 컬럼 로드
|
|
useEffect(() => {
|
|
const loadJoinTableColumns = async () => {
|
|
if (!joinTable.joinTable) {
|
|
setJoinTableColumns([]);
|
|
return;
|
|
}
|
|
try {
|
|
const response = await apiClient.get(`/table-management/tables/${joinTable.joinTable}/columns?size=200`);
|
|
let columnList: any[] = [];
|
|
if (response.data?.success && response.data?.data?.columns) {
|
|
columnList = response.data.data.columns;
|
|
} else if (Array.isArray(response.data?.data?.columns)) {
|
|
columnList = response.data.data.columns;
|
|
} else if (Array.isArray(response.data?.data)) {
|
|
columnList = response.data.data;
|
|
}
|
|
|
|
const transformedColumns = columnList.map((c: any) => ({
|
|
column_name: c.columnName ?? c.column_name ?? c.name ?? "",
|
|
data_type: c.dataType ?? c.data_type ?? c.type ?? "",
|
|
column_comment: c.displayName ?? c.column_comment ?? c.label ?? "",
|
|
}));
|
|
setJoinTableColumns(transformedColumns);
|
|
} catch (error) {
|
|
console.error("조인 테이블 컬럼 로드 실패:", error);
|
|
setJoinTableColumns([]);
|
|
}
|
|
};
|
|
loadJoinTableColumns();
|
|
}, [joinTable.joinTable]);
|
|
|
|
const selectedTable = tables.find((t) => t.table_name === joinTable.joinTable);
|
|
|
|
return (
|
|
<div className="space-y-3 rounded-md border p-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-muted-foreground text-xs font-medium">조인 {index + 1}</span>
|
|
<Button size="sm" variant="ghost" className="h-6 w-6 p-0" onClick={onRemove}>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 조인 테이블 선택 */}
|
|
<div>
|
|
<Label className="text-xs">조인할 테이블</Label>
|
|
<Popover open={joinTableOpen} onOpenChange={setJoinTableOpen}>
|
|
<PopoverTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
role="combobox"
|
|
aria-expanded={joinTableOpen}
|
|
className="h-8 w-full justify-between text-xs"
|
|
>
|
|
{selectedTable
|
|
? selectedTable.table_comment || selectedTable.table_name
|
|
: joinTable.joinTable || "테이블 선택"}
|
|
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
|
</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent className="w-full p-0" align="start">
|
|
<Command>
|
|
<CommandInput placeholder="테이블 검색..." className="h-8 text-xs" />
|
|
<CommandList>
|
|
<CommandEmpty>검색 결과가 없습니다</CommandEmpty>
|
|
<CommandGroup>
|
|
{tables.map((table) => (
|
|
<CommandItem
|
|
key={table.table_name}
|
|
value={`${table.table_name} ${table.table_comment || ""}`}
|
|
onSelect={() => {
|
|
// cmdk가 value를 소문자로 변환하므로 직접 table.table_name 사용
|
|
// 여러 필드를 한 번에 업데이트 (연속 호출 시 덮어쓰기 방지)
|
|
onUpdate({
|
|
joinTable: table.table_name,
|
|
selectColumns: [], // 테이블 변경 시 선택 컬럼 초기화
|
|
});
|
|
setJoinTableOpen(false);
|
|
}}
|
|
className="text-xs"
|
|
>
|
|
<Check
|
|
className={cn(
|
|
"mr-2 h-3 w-3",
|
|
joinTable.joinTable === table.table_name ? "opacity-100" : "opacity-0",
|
|
)}
|
|
/>
|
|
<span className="flex flex-col">
|
|
<span>{table.table_comment || table.table_name}</span>
|
|
<span className="text-muted-foreground text-[10px]">{table.table_name}</span>
|
|
</span>
|
|
</CommandItem>
|
|
))}
|
|
</CommandGroup>
|
|
</CommandList>
|
|
</Command>
|
|
</PopoverContent>
|
|
</Popover>
|
|
</div>
|
|
|
|
{/* 조인 타입 */}
|
|
<div>
|
|
<Label className="text-xs">조인 방식</Label>
|
|
<Select value={joinTable.joinType || "LEFT"} onValueChange={(value) => onUpdate("joinType", value)}>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="LEFT">LEFT JOIN (데이터 없어도 표시)</SelectItem>
|
|
<SelectItem value="INNER">INNER JOIN (데이터 있어야만 표시)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 조인 조건 */}
|
|
<div className="space-y-2">
|
|
<Label className="text-xs">조인 조건</Label>
|
|
<div className="bg-muted/30 space-y-2 rounded-md p-2">
|
|
<div>
|
|
<Label className="text-muted-foreground text-[10px]">메인 테이블 컬럼</Label>
|
|
<ColumnSelect
|
|
columns={mainTableColumns}
|
|
value={joinTable.mainColumn || ""}
|
|
onValueChange={(value) => onUpdate("mainColumn", value)}
|
|
placeholder="메인 테이블 컬럼"
|
|
/>
|
|
</div>
|
|
<div className="text-muted-foreground text-center text-[10px]">=</div>
|
|
<div>
|
|
<Label className="text-muted-foreground text-[10px]">조인 테이블 컬럼</Label>
|
|
<ColumnSelect
|
|
columns={joinTableColumns}
|
|
value={joinTable.joinColumn || ""}
|
|
onValueChange={(value) => onUpdate("joinColumn", value)}
|
|
placeholder="조인 테이블 컬럼"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 가져올 컬럼 선택 */}
|
|
<div>
|
|
<div className="mb-1 flex items-center justify-between">
|
|
<Label className="text-xs">가져올 컬럼</Label>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="h-5 px-1 text-[10px]"
|
|
onClick={() => {
|
|
const current = joinTable.selectColumns || [];
|
|
onUpdate("selectColumns", [...current, ""]);
|
|
}}
|
|
disabled={!joinTable.joinTable}
|
|
>
|
|
<Plus className="mr-0.5 h-2.5 w-2.5" />
|
|
추가
|
|
</Button>
|
|
</div>
|
|
<p className="text-muted-foreground mb-2 text-[10px]">조인 테이블에서 표시할 컬럼들을 선택하세요</p>
|
|
<div className="space-y-1">
|
|
{(joinTable.selectColumns || []).map((col, colIndex) => (
|
|
<div key={colIndex} className="flex items-center gap-1">
|
|
<ColumnSelect
|
|
columns={joinTableColumns}
|
|
value={col}
|
|
onValueChange={(value) => {
|
|
const current = [...(joinTable.selectColumns || [])];
|
|
current[colIndex] = value;
|
|
onUpdate("selectColumns", current);
|
|
}}
|
|
placeholder="컬럼 선택"
|
|
/>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="h-8 w-8 shrink-0 p-0"
|
|
onClick={() => {
|
|
const current = joinTable.selectColumns || [];
|
|
onUpdate(
|
|
"selectColumns",
|
|
current.filter((_, i) => i !== colIndex),
|
|
);
|
|
}}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
{(joinTable.selectColumns || []).length === 0 && (
|
|
<div className="text-muted-foreground rounded border py-2 text-center text-[10px]">
|
|
가져올 컬럼을 추가하세요
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 표시 컬럼 추가
|
|
const addDisplayColumn = (side: "left" | "right") => {
|
|
const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
|
|
const currentColumns =
|
|
side === "left" ? config.leftPanel?.displayColumns || [] : config.rightPanel?.displayColumns || [];
|
|
|
|
// 기본 테이블 설정 (메인 테이블)
|
|
const defaultTable = side === "left" ? config.leftPanel?.tableName : config.rightPanel?.tableName;
|
|
|
|
updateConfig(path, [...currentColumns, { name: "", label: "", sourceTable: defaultTable || "" }]);
|
|
};
|
|
|
|
// 표시 컬럼 삭제
|
|
const removeDisplayColumn = (side: "left" | "right", index: number) => {
|
|
const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
|
|
const currentColumns =
|
|
side === "left" ? config.leftPanel?.displayColumns || [] : config.rightPanel?.displayColumns || [];
|
|
|
|
updateConfig(
|
|
path,
|
|
currentColumns.filter((_, i) => i !== index),
|
|
);
|
|
};
|
|
|
|
// 표시 컬럼 업데이트
|
|
const updateDisplayColumn = (
|
|
side: "left" | "right",
|
|
index: number,
|
|
fieldOrPartial: keyof ColumnConfig | Partial<ColumnConfig>,
|
|
value?: any,
|
|
) => {
|
|
const path = side === "left" ? "leftPanel.displayColumns" : "rightPanel.displayColumns";
|
|
const currentColumns =
|
|
side === "left" ? [...(config.leftPanel?.displayColumns || [])] : [...(config.rightPanel?.displayColumns || [])];
|
|
|
|
if (currentColumns[index]) {
|
|
if (typeof fieldOrPartial === "object") {
|
|
// 여러 필드를 한 번에 업데이트
|
|
currentColumns[index] = { ...currentColumns[index], ...fieldOrPartial };
|
|
} else {
|
|
// 단일 필드 업데이트
|
|
currentColumns[index] = { ...currentColumns[index], [fieldOrPartial]: value };
|
|
}
|
|
updateConfig(path, currentColumns);
|
|
}
|
|
};
|
|
|
|
// 컬럼 세부설정 저장
|
|
const handleSaveColumnConfig = () => {
|
|
if (editingColumnIndex === null) return;
|
|
|
|
const currentColumns = [...(config.leftPanel?.displayColumns || [])];
|
|
if (currentColumns[editingColumnIndex]) {
|
|
currentColumns[editingColumnIndex] = {
|
|
...currentColumns[editingColumnIndex],
|
|
displayConfig: editingColumnConfig,
|
|
};
|
|
updateConfig("leftPanel.displayColumns", currentColumns);
|
|
}
|
|
|
|
setColumnConfigModalOpen(false);
|
|
setEditingColumnIndex(null);
|
|
};
|
|
|
|
// 좌측 컬럼 설정 모달 저장 핸들러
|
|
const handleLeftColumnConfigSave = (columnConfig: {
|
|
displayColumns: ColumnConfig[];
|
|
searchColumns: SearchColumnConfig[];
|
|
grouping: GroupingConfig;
|
|
showSearch: boolean;
|
|
}) => {
|
|
// 모든 변경사항을 한 번에 적용 (개별 updateConfig 호출 시 마지막 값만 적용되는 문제 방지)
|
|
const newLeftPanel = {
|
|
...config.leftPanel,
|
|
displayColumns: columnConfig.displayColumns,
|
|
searchColumns: columnConfig.searchColumns,
|
|
grouping: columnConfig.grouping,
|
|
showSearch: columnConfig.showSearch,
|
|
};
|
|
onChange({ ...config, leftPanel: newLeftPanel });
|
|
};
|
|
|
|
// 좌측 액션 버튼 설정 모달 저장 핸들러
|
|
const handleLeftActionButtonSave = (buttons: ActionButtonConfig[]) => {
|
|
updateConfig("leftPanel.actionButtons", buttons);
|
|
};
|
|
|
|
// 우측 컬럼 설정 모달 저장 핸들러
|
|
const handleRightColumnConfigSave = (columnConfig: {
|
|
displayColumns: ColumnConfig[];
|
|
searchColumns: SearchColumnConfig[];
|
|
grouping: GroupingConfig;
|
|
showSearch: boolean;
|
|
}) => {
|
|
// 모든 변경사항을 한 번에 적용 (개별 updateConfig 호출 시 마지막 값만 적용되는 문제 방지)
|
|
const newRightPanel = {
|
|
...config.rightPanel,
|
|
displayColumns: columnConfig.displayColumns,
|
|
searchColumns: columnConfig.searchColumns,
|
|
showSearch: columnConfig.showSearch,
|
|
};
|
|
onChange({ ...config, rightPanel: newRightPanel });
|
|
};
|
|
|
|
// 우측 액션 버튼 설정 모달 저장 핸들러
|
|
const handleRightActionButtonSave = (buttons: ActionButtonConfig[]) => {
|
|
updateConfig("rightPanel.actionButtons", buttons);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 p-1">
|
|
{/* 좌측 패널 설정 */}
|
|
<div className="space-y-4">
|
|
<h4 className="border-b pb-2 text-sm font-medium">좌측 패널 설정 (마스터)</h4>
|
|
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label className="text-xs">패널 제목</Label>
|
|
<Input
|
|
value={config.leftPanel?.title || ""}
|
|
onChange={(e) => updateConfig("leftPanel.title", e.target.value)}
|
|
placeholder="부서"
|
|
className="h-9 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs">테이블 선택</Label>
|
|
<TableSelect
|
|
value={config.leftPanel?.tableName || ""}
|
|
onValueChange={(value) => updateConfig("leftPanel.tableName", value)}
|
|
placeholder="테이블 선택"
|
|
open={leftTableOpen}
|
|
onOpenChange={setLeftTableOpen}
|
|
/>
|
|
</div>
|
|
|
|
{/* 표시 모드 설정 */}
|
|
<div>
|
|
<Label className="text-xs">표시 모드</Label>
|
|
<Select
|
|
value={config.leftPanel?.displayMode || "card"}
|
|
onValueChange={(value) => updateConfig("leftPanel.displayMode", value)}
|
|
>
|
|
<SelectTrigger className="h-9 text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="card">카드형</SelectItem>
|
|
<SelectItem value="table">테이블형</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 컬럼 설정 버튼 */}
|
|
<div className="border-t pt-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-xs font-medium">컬럼 설정</Label>
|
|
<p className="text-muted-foreground text-[10px]">
|
|
표시 컬럼 {(config.leftPanel?.displayColumns || []).length}개
|
|
{config.leftPanel?.grouping?.enabled && " | 그룹핑 사용"}
|
|
{config.leftPanel?.showSearch && " | 검색 사용"}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setLeftColumnModalOpen(true)}
|
|
disabled={!config.leftPanel?.tableName}
|
|
>
|
|
<Columns className="mr-1 h-4 w-4" />
|
|
설정
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 액션 버튼 설정 */}
|
|
<div className="border-t pt-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-xs font-medium">액션 버튼</Label>
|
|
<p className="text-muted-foreground text-[10px]">
|
|
{(config.leftPanel?.actionButtons || []).length > 0
|
|
? `${(config.leftPanel?.actionButtons || []).length}개 버튼`
|
|
: config.leftPanel?.showAddButton
|
|
? "기본 추가 버튼"
|
|
: "없음"}
|
|
</p>
|
|
</div>
|
|
<Button size="sm" variant="outline" onClick={() => setLeftActionButtonModalOpen(true)}>
|
|
<MousePointerClick className="mr-1 h-4 w-4" />
|
|
설정
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 개별 수정/삭제 버튼 (좌측) */}
|
|
<div className="border-t pt-3">
|
|
<Label className="text-xs font-medium">개별 수정/삭제</Label>
|
|
<p className="text-muted-foreground mb-2 text-[10px]">각 행에 표시되는 수정/삭제 버튼</p>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">수정 버튼</Label>
|
|
<Switch
|
|
checked={config.leftPanel?.showEditButton || false}
|
|
onCheckedChange={(checked) => updateConfig("leftPanel.showEditButton", checked)}
|
|
/>
|
|
</div>
|
|
{/* 수정 버튼이 켜져 있을 때 모달 화면 선택 */}
|
|
{config.leftPanel?.showEditButton && (
|
|
<div className="ml-4 mt-1">
|
|
<Label className="text-xs">수정 모달 화면</Label>
|
|
<ScreenSelect
|
|
value={config.leftPanel?.editModalScreenId}
|
|
onValueChange={(value) => updateConfig("leftPanel.editModalScreenId", value)}
|
|
placeholder="수정 모달 화면 선택"
|
|
open={leftEditModalOpen}
|
|
onOpenChange={setLeftEditModalOpen}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">삭제 버튼</Label>
|
|
<Switch
|
|
checked={config.leftPanel?.showDeleteButton || false}
|
|
onCheckedChange={(checked) => updateConfig("leftPanel.showDeleteButton", checked)}
|
|
/>
|
|
</div>
|
|
{(config.leftPanel?.showEditButton || config.leftPanel?.showDeleteButton) && (
|
|
<div className="mt-2">
|
|
<Label className="text-xs">기본키 컬럼</Label>
|
|
<ColumnSelect
|
|
columns={leftColumns}
|
|
value={config.leftPanel?.primaryKeyColumn || ""}
|
|
onValueChange={(value) => updateConfig("leftPanel.primaryKeyColumn", value)}
|
|
placeholder="기본키 컬럼 선택 (기본: id)"
|
|
/>
|
|
<p className="text-muted-foreground mt-1 text-[10px]">
|
|
수정/삭제 시 레코드 식별에 사용
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 탭 설정 (좌측) */}
|
|
<div className="border-t pt-3">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs font-medium">탭 기능</Label>
|
|
<Switch
|
|
checked={config.leftPanel?.tabConfig?.enabled || false}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
updateConfig("leftPanel.tabConfig", {
|
|
enabled: true,
|
|
mode: "manual",
|
|
showCount: true,
|
|
});
|
|
} else {
|
|
updateConfig("leftPanel.tabConfig.enabled", false);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
{config.leftPanel?.tabConfig?.enabled && (
|
|
<div className="mt-3 space-y-3 rounded-lg border p-3">
|
|
{/* 그룹핑이 설정되어 있지 않으면 안내 메시지 */}
|
|
{!config.leftPanel?.grouping?.enabled ? (
|
|
<div className="bg-destructive/10 text-destructive rounded-md p-2">
|
|
<p className="text-[10px]">
|
|
탭 기능을 사용하려면 컬럼 설정에서 그룹핑을 먼저 활성화해주세요.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div>
|
|
<Label className="text-xs">탭 소스 컬럼</Label>
|
|
<Select
|
|
value={config.leftPanel?.tabConfig?.tabSourceColumn || ""}
|
|
onValueChange={(value) => updateConfig("leftPanel.tabConfig.tabSourceColumn", value)}
|
|
>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="컬럼 선택..." />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{/* 그룹핑에 사용된 컬럼만 표시 */}
|
|
{config.leftPanel?.grouping?.groupByColumn && (
|
|
<SelectItem value={config.leftPanel.grouping.groupByColumn}>
|
|
{leftColumns.find(c => c.column_name === config.leftPanel?.grouping?.groupByColumn)?.column_comment || config.leftPanel.grouping.groupByColumn}
|
|
{" "}({config.leftPanel.grouping.groupByColumn})
|
|
</SelectItem>
|
|
)}
|
|
{/* 집계 설정된 컬럼들도 표시 */}
|
|
{(config.leftPanel?.displayColumns || [])
|
|
.filter(col => col.displayConfig?.aggregate?.enabled && col.name !== config.leftPanel?.grouping?.groupByColumn)
|
|
.map(col => (
|
|
<SelectItem key={col.name} value={col.name}>
|
|
{col.label || col.name} ({col.name})
|
|
</SelectItem>
|
|
))
|
|
}
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-muted-foreground mt-1 text-[10px]">
|
|
그룹핑/집계된 컬럼 중에서 선택
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">개수 표시</Label>
|
|
<Switch
|
|
checked={config.leftPanel?.tabConfig?.showCount || false}
|
|
onCheckedChange={(checked) => updateConfig("leftPanel.tabConfig.showCount", checked)}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 추가 조인 테이블 설정 (좌측) */}
|
|
<div className="border-t pt-3">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs font-medium">추가 조인 테이블</Label>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="h-6 text-xs"
|
|
onClick={() => {
|
|
const current = config.leftPanel?.joinTables || [];
|
|
updateConfig("leftPanel.joinTables", [
|
|
...current,
|
|
{
|
|
joinTable: "",
|
|
joinType: "LEFT",
|
|
mainColumn: "",
|
|
joinColumn: "",
|
|
selectColumns: [],
|
|
},
|
|
]);
|
|
}}
|
|
>
|
|
<Plus className="mr-1 h-3 w-3" />
|
|
추가
|
|
</Button>
|
|
</div>
|
|
<p className="text-muted-foreground mt-1 text-[10px]">
|
|
다른 테이블을 조인하면 표시할 컬럼에서 해당 테이블의 컬럼도 선택할 수 있습니다.
|
|
</p>
|
|
{(config.leftPanel?.joinTables || []).length > 0 && (
|
|
<div className="mt-2 space-y-2">
|
|
{(config.leftPanel?.joinTables || []).map((joinTable, index) => (
|
|
<JoinTableItem
|
|
key={index}
|
|
index={index}
|
|
joinTable={joinTable}
|
|
tables={tables}
|
|
mainTableColumns={leftColumns}
|
|
onUpdate={(fieldOrPartial, value) => {
|
|
const current = [...(config.leftPanel?.joinTables || [])];
|
|
if (typeof fieldOrPartial === "object") {
|
|
current[index] = { ...current[index], ...fieldOrPartial };
|
|
} else {
|
|
current[index] = { ...current[index], [fieldOrPartial]: value };
|
|
}
|
|
updateConfig("leftPanel.joinTables", current);
|
|
}}
|
|
onRemove={() => {
|
|
const current = config.leftPanel?.joinTables || [];
|
|
updateConfig(
|
|
"leftPanel.joinTables",
|
|
current.filter((_, i) => i !== index),
|
|
);
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 우측 패널 설정 */}
|
|
<div className="space-y-4">
|
|
<h4 className="border-b pb-2 text-sm font-medium">우측 패널 설정 (상세)</h4>
|
|
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label className="text-xs">패널 제목</Label>
|
|
<Input
|
|
value={config.rightPanel?.title || ""}
|
|
onChange={(e) => updateConfig("rightPanel.title", e.target.value)}
|
|
placeholder="사원"
|
|
className="h-9 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs">테이블 선택</Label>
|
|
<TableSelect
|
|
value={config.rightPanel?.tableName || ""}
|
|
onValueChange={(value) => updateConfig("rightPanel.tableName", value)}
|
|
placeholder="테이블 선택"
|
|
open={rightTableOpen}
|
|
onOpenChange={setRightTableOpen}
|
|
/>
|
|
</div>
|
|
|
|
{/* 표시 모드 설정 */}
|
|
<div>
|
|
<Label className="text-xs">표시 모드</Label>
|
|
<Select
|
|
value={config.rightPanel?.displayMode || "card"}
|
|
onValueChange={(value) => updateConfig("rightPanel.displayMode", value)}
|
|
>
|
|
<SelectTrigger className="h-9 text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="card">카드형</SelectItem>
|
|
<SelectItem value="table">테이블형</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* 추가 조인 테이블 설정 */}
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">추가 조인 테이블</Label>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="h-6 text-xs"
|
|
onClick={() => {
|
|
const current = config.rightPanel?.joinTables || [];
|
|
updateConfig("rightPanel.joinTables", [
|
|
...current,
|
|
{
|
|
joinTable: "",
|
|
joinType: "LEFT",
|
|
mainColumn: "",
|
|
joinColumn: "",
|
|
selectColumns: [],
|
|
},
|
|
]);
|
|
}}
|
|
>
|
|
<Plus className="mr-1 h-3 w-3" />
|
|
추가
|
|
</Button>
|
|
</div>
|
|
<p className="text-muted-foreground text-[10px]">
|
|
다른 테이블을 조인하면 표시할 컬럼에서 해당 테이블의 컬럼도 선택할 수 있습니다.
|
|
</p>
|
|
<div className="space-y-2">
|
|
{(config.rightPanel?.joinTables || []).map((joinTable, index) => (
|
|
<JoinTableItem
|
|
key={index}
|
|
index={index}
|
|
joinTable={joinTable}
|
|
tables={tables}
|
|
mainTableColumns={rightColumns}
|
|
onUpdate={(fieldOrPartial, value) => {
|
|
const current = [...(config.rightPanel?.joinTables || [])];
|
|
if (typeof fieldOrPartial === "object") {
|
|
// 여러 필드를 한 번에 업데이트
|
|
current[index] = { ...current[index], ...fieldOrPartial };
|
|
} else {
|
|
// 단일 필드 업데이트
|
|
current[index] = { ...current[index], [fieldOrPartial]: value };
|
|
}
|
|
updateConfig("rightPanel.joinTables", current);
|
|
}}
|
|
onRemove={() => {
|
|
const current = config.rightPanel?.joinTables || [];
|
|
updateConfig(
|
|
"rightPanel.joinTables",
|
|
current.filter((_, i) => i !== index),
|
|
);
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 컬럼 설정 버튼 */}
|
|
<div className="border-t pt-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-xs font-medium">컬럼 설정</Label>
|
|
<p className="text-muted-foreground text-[10px]">
|
|
표시 컬럼 {(config.rightPanel?.displayColumns || []).length}개
|
|
{config.rightPanel?.showSearch && " | 검색 사용"}
|
|
</p>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => setRightColumnModalOpen(true)}
|
|
disabled={!config.rightPanel?.tableName}
|
|
>
|
|
<Columns className="mr-1 h-4 w-4" />
|
|
설정
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 액션 버튼 설정 */}
|
|
<div className="border-t pt-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-xs font-medium">액션 버튼</Label>
|
|
<p className="text-muted-foreground text-[10px]">
|
|
{(config.rightPanel?.actionButtons || []).length > 0
|
|
? `${(config.rightPanel?.actionButtons || []).length}개 버튼`
|
|
: config.rightPanel?.showAddButton
|
|
? "기본 추가 버튼"
|
|
: "없음"}
|
|
</p>
|
|
</div>
|
|
<Button size="sm" variant="outline" onClick={() => setRightActionButtonModalOpen(true)}>
|
|
<MousePointerClick className="mr-1 h-4 w-4" />
|
|
설정
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 개별 수정/삭제 버튼 */}
|
|
<div className="border-t pt-3">
|
|
<Label className="text-xs font-medium">개별 수정/삭제</Label>
|
|
<p className="text-muted-foreground mb-2 text-[10px]">각 행에 표시되는 수정/삭제 버튼</p>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">수정 버튼</Label>
|
|
<Switch
|
|
checked={config.rightPanel?.showEditButton || false}
|
|
onCheckedChange={(checked) => updateConfig("rightPanel.showEditButton", checked)}
|
|
/>
|
|
</div>
|
|
{/* 수정 버튼이 켜져 있을 때 모달 화면 선택 */}
|
|
{config.rightPanel?.showEditButton && (
|
|
<div className="ml-4 mt-1">
|
|
<Label className="text-xs">수정 모달 화면</Label>
|
|
<ScreenSelect
|
|
value={config.rightPanel?.editModalScreenId}
|
|
onValueChange={(value) => updateConfig("rightPanel.editModalScreenId", value)}
|
|
placeholder="수정 모달 화면 선택"
|
|
open={rightEditModalOpen}
|
|
onOpenChange={setRightEditModalOpen}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">삭제 버튼</Label>
|
|
<Switch
|
|
checked={config.rightPanel?.showDeleteButton || false}
|
|
onCheckedChange={(checked) => updateConfig("rightPanel.showDeleteButton", checked)}
|
|
/>
|
|
</div>
|
|
{(config.rightPanel?.showEditButton || config.rightPanel?.showDeleteButton) && (
|
|
<div className="mt-2">
|
|
<Label className="text-xs">기본키 컬럼</Label>
|
|
<ColumnSelect
|
|
columns={rightColumns}
|
|
value={config.rightPanel?.primaryKeyColumn || ""}
|
|
onValueChange={(value) => updateConfig("rightPanel.primaryKeyColumn", value)}
|
|
placeholder="기본키 컬럼 선택 (기본: id)"
|
|
/>
|
|
<p className="text-muted-foreground mt-1 text-[10px]">
|
|
수정/삭제 시 레코드 식별에 사용
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 수정 시 메인 테이블 조회 설정 */}
|
|
{config.rightPanel?.showEditButton && (
|
|
<div className="mt-3 border-t pt-3">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<Label className="text-xs font-medium">수정 시 메인 테이블 조회</Label>
|
|
<Switch
|
|
checked={!!config.rightPanel?.mainTableForEdit?.tableName}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
updateConfig("rightPanel.mainTableForEdit", {
|
|
tableName: "",
|
|
linkColumn: { mainColumn: "", subColumn: "" },
|
|
});
|
|
} else {
|
|
updateConfig("rightPanel.mainTableForEdit", undefined);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="text-muted-foreground mb-2 text-[10px]">
|
|
우측 패널이 서브 테이블일 때, 수정 모달에 메인 테이블 데이터도 함께 전달
|
|
</p>
|
|
|
|
{config.rightPanel?.mainTableForEdit && (
|
|
<div className="space-y-2 rounded-lg border p-2 bg-muted/30">
|
|
<div>
|
|
<Label className="text-[10px]">메인 테이블</Label>
|
|
<Input
|
|
value={config.rightPanel.mainTableForEdit.tableName || ""}
|
|
onChange={(e) => updateConfig("rightPanel.mainTableForEdit.tableName", e.target.value)}
|
|
placeholder="예: user_info"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<Label className="text-[10px]">메인 테이블 연결 컬럼</Label>
|
|
<Input
|
|
value={config.rightPanel.mainTableForEdit.linkColumn?.mainColumn || ""}
|
|
onChange={(e) => updateConfig("rightPanel.mainTableForEdit.linkColumn.mainColumn", e.target.value)}
|
|
placeholder="예: user_id"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-[10px]">서브 테이블 연결 컬럼</Label>
|
|
<Input
|
|
value={config.rightPanel.mainTableForEdit.linkColumn?.subColumn || ""}
|
|
onChange={(e) => updateConfig("rightPanel.mainTableForEdit.linkColumn.subColumn", e.target.value)}
|
|
placeholder="예: user_id"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 탭 설정 (우측) */}
|
|
<div className="border-t pt-3">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs font-medium">탭 기능</Label>
|
|
<Switch
|
|
checked={config.rightPanel?.tabConfig?.enabled || false}
|
|
onCheckedChange={(checked) => {
|
|
if (checked) {
|
|
updateConfig("rightPanel.tabConfig", {
|
|
enabled: true,
|
|
mode: "manual",
|
|
showCount: true,
|
|
});
|
|
} else {
|
|
updateConfig("rightPanel.tabConfig.enabled", false);
|
|
}
|
|
}}
|
|
/>
|
|
</div>
|
|
{config.rightPanel?.tabConfig?.enabled && (
|
|
<div className="mt-3 space-y-3 rounded-lg border p-3">
|
|
<div>
|
|
<Label className="text-xs">탭 소스 컬럼</Label>
|
|
<SearchableColumnSelect
|
|
columns={rightColumns}
|
|
value={config.rightPanel?.tabConfig?.tabSourceColumn || ""}
|
|
onValueChange={(value) => updateConfig("rightPanel.tabConfig.tabSourceColumn", value)}
|
|
placeholder="컬럼 선택..."
|
|
disabled={!config.rightPanel?.tableName}
|
|
/>
|
|
<p className="text-muted-foreground mt-1 text-[10px]">
|
|
선택한 컬럼의 고유값으로 탭이 생성됩니다
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">개수 표시</Label>
|
|
<Switch
|
|
checked={config.rightPanel?.tabConfig?.showCount || false}
|
|
onCheckedChange={(checked) => updateConfig("rightPanel.tabConfig.showCount", checked)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 기타 옵션들 - 접힌 상태로 표시 */}
|
|
<details className="border-t pt-3">
|
|
<summary className="cursor-pointer text-xs font-medium mb-2">추가 옵션</summary>
|
|
<div className="space-y-3 pl-2">
|
|
{/* 카드 모드 전용 옵션 */}
|
|
{(config.rightPanel?.displayMode || "card") === "card" && (
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-xs">라벨 표시</Label>
|
|
<p className="text-muted-foreground text-[10px]">라벨: 값 형식으로 표시</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.rightPanel?.showLabels || false}
|
|
onCheckedChange={(checked) => updateConfig("rightPanel.showLabels", checked)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* 체크박스 표시 */}
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-xs">체크박스 표시</Label>
|
|
<p className="text-muted-foreground text-[10px]">항목 선택 기능 활성화</p>
|
|
</div>
|
|
<Switch
|
|
checked={config.rightPanel?.showCheckbox || false}
|
|
onCheckedChange={(checked) => updateConfig("rightPanel.showCheckbox", checked)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 연결 설정 */}
|
|
<div className="space-y-4">
|
|
<div className="flex items-center justify-between border-b pb-2">
|
|
<h4 className="text-sm font-medium">연결 설정 (조인)</h4>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="h-6 text-xs"
|
|
onClick={() => {
|
|
const currentKeys = config.joinConfig?.keys || [];
|
|
// 단일키에서 복합키로 전환 시 기존 값 유지
|
|
if (currentKeys.length === 0 && config.joinConfig?.leftColumn && config.joinConfig?.rightColumn) {
|
|
updateConfig("joinConfig.keys", [
|
|
{ leftColumn: config.joinConfig.leftColumn, rightColumn: config.joinConfig.rightColumn },
|
|
{ leftColumn: "", rightColumn: "" },
|
|
]);
|
|
} else {
|
|
updateConfig("joinConfig.keys", [...currentKeys, { leftColumn: "", rightColumn: "" }]);
|
|
}
|
|
}}
|
|
>
|
|
<Plus className="mr-1 h-3 w-3" />
|
|
조인 키 추가
|
|
</Button>
|
|
</div>
|
|
|
|
{/* 설명 */}
|
|
<div className="bg-muted/50 text-muted-foreground rounded-md p-3 text-xs">
|
|
<p className="text-foreground mb-1 font-medium">좌측 패널 선택 시 우측 패널 데이터 필터링</p>
|
|
<p>좌측에서 항목을 선택하면 좌측 조인 컬럼의 값으로 우측 테이블을 필터링합니다.</p>
|
|
<p className="mt-1 text-[10px]">예: 부서(dept_code) 선택 시 해당 부서의 사원만 표시</p>
|
|
<p className="mt-1 text-[10px] text-blue-600">복합키: 여러 컬럼으로 조인 (예: item_code + lot_number)</p>
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
{/* 복합키가 설정된 경우 */}
|
|
{(config.joinConfig?.keys || []).length > 0 ? (
|
|
<>
|
|
{(config.joinConfig?.keys || []).map((key, index) => (
|
|
<div key={index} className="space-y-2 rounded-md border p-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-xs font-medium">조인 키 {index + 1}</span>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
className="text-destructive h-6 w-6 p-0"
|
|
onClick={() => {
|
|
const newKeys = (config.joinConfig?.keys || []).filter((_, i) => i !== index);
|
|
updateConfig("joinConfig.keys", newKeys);
|
|
}}
|
|
>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<Label className="text-xs">좌측 컬럼</Label>
|
|
<ColumnSelect
|
|
columns={leftColumns}
|
|
value={key.leftColumn || ""}
|
|
onValueChange={(value) => {
|
|
const newKeys = [...(config.joinConfig?.keys || [])];
|
|
newKeys[index] = { ...newKeys[index], leftColumn: value };
|
|
updateConfig("joinConfig.keys", newKeys);
|
|
}}
|
|
placeholder="좌측 컬럼"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label className="text-xs">우측 컬럼</Label>
|
|
<ColumnSelect
|
|
columns={rightColumns}
|
|
value={key.rightColumn || ""}
|
|
onValueChange={(value) => {
|
|
const newKeys = [...(config.joinConfig?.keys || [])];
|
|
newKeys[index] = { ...newKeys[index], rightColumn: value };
|
|
updateConfig("joinConfig.keys", newKeys);
|
|
}}
|
|
placeholder="우측 컬럼"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</>
|
|
) : (
|
|
/* 단일키 (하위 호환성) */
|
|
<>
|
|
<div>
|
|
<Label className="text-xs">좌측 테이블 조인 컬럼</Label>
|
|
<ColumnSelect
|
|
columns={leftColumns}
|
|
value={config.joinConfig?.leftColumn || ""}
|
|
onValueChange={(value) => updateConfig("joinConfig.leftColumn", value)}
|
|
placeholder="조인 컬럼 선택"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-xs">우측 테이블 조인 컬럼</Label>
|
|
<ColumnSelect
|
|
columns={rightColumns}
|
|
value={config.joinConfig?.rightColumn || ""}
|
|
onValueChange={(value) => updateConfig("joinConfig.rightColumn", value)}
|
|
placeholder="조인 컬럼 선택"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 데이터 전달 설정 */}
|
|
<div className="space-y-3">
|
|
<h4 className="border-b pb-2 text-sm font-medium">데이터 전달 설정</h4>
|
|
|
|
<p className="text-muted-foreground text-[10px]">
|
|
버튼 클릭 시 모달에 전달할 데이터를 설정합니다.
|
|
</p>
|
|
|
|
{/* 좌측 패널 버튼 */}
|
|
{(config.leftPanel?.actionButtons || []).length > 0 && (
|
|
<div className="space-y-2">
|
|
<Label className="text-[10px] text-muted-foreground">좌측 패널 버튼</Label>
|
|
<div className="space-y-1">
|
|
{(config.leftPanel?.actionButtons || []).map((btn) => {
|
|
// 이 버튼에 대한 데이터 전달 설정 찾기
|
|
const transferConfig = (config.buttonDataTransfers || []).find(
|
|
(t) => t.targetPanel === "left" && t.targetButtonId === btn.id
|
|
);
|
|
const transferIndex = transferConfig
|
|
? (config.buttonDataTransfers || []).findIndex((t) => t.id === transferConfig.id)
|
|
: -1;
|
|
|
|
return (
|
|
<div
|
|
key={btn.id}
|
|
className="flex items-center justify-between rounded-md border p-2"
|
|
>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="truncate text-xs font-medium">{btn.label}</span>
|
|
<span className="text-muted-foreground shrink-0 text-[10px]">
|
|
({btn.action || "add"})
|
|
</span>
|
|
</div>
|
|
{transferConfig && transferConfig.fields.length > 0 && (
|
|
<div className="text-muted-foreground truncate text-[10px]">
|
|
{transferConfig.fields.length}개 필드: {transferConfig.fields.map((f) => f.sourceColumn).join(", ")}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant={transferConfig ? "outline" : "ghost"}
|
|
className="ml-2 h-7 shrink-0 text-[10px]"
|
|
onClick={() => {
|
|
if (transferConfig) {
|
|
// 기존 설정 편집
|
|
setEditingTransferIndex(transferIndex);
|
|
setDataTransferModalOpen(true);
|
|
} else {
|
|
// 새 설정 추가 후 모달 열기
|
|
const newId = `transfer_${Date.now()}`;
|
|
const newTransfer = {
|
|
id: newId,
|
|
targetPanel: "left" as const,
|
|
targetButtonId: btn.id,
|
|
fields: [],
|
|
};
|
|
const newTransfers = [...(config.buttonDataTransfers || []), newTransfer];
|
|
updateConfig("buttonDataTransfers", newTransfers);
|
|
// 새로 추가된 항목의 인덱스
|
|
setTimeout(() => {
|
|
setEditingTransferIndex(newTransfers.length - 1);
|
|
setDataTransferModalOpen(true);
|
|
}, 0);
|
|
}
|
|
}}
|
|
>
|
|
<Settings className="mr-1 h-3 w-3" />
|
|
{transferConfig ? "설정 편집" : "설정"}
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 우측 패널 버튼 */}
|
|
{(config.rightPanel?.actionButtons || []).length > 0 && (
|
|
<div className="space-y-2">
|
|
<Label className="text-[10px] text-muted-foreground">우측 패널 버튼</Label>
|
|
<div className="space-y-1">
|
|
{(config.rightPanel?.actionButtons || []).map((btn) => {
|
|
// 이 버튼에 대한 데이터 전달 설정 찾기
|
|
const transferConfig = (config.buttonDataTransfers || []).find(
|
|
(t) => t.targetPanel === "right" && t.targetButtonId === btn.id
|
|
);
|
|
const transferIndex = transferConfig
|
|
? (config.buttonDataTransfers || []).findIndex((t) => t.id === transferConfig.id)
|
|
: -1;
|
|
|
|
return (
|
|
<div
|
|
key={btn.id}
|
|
className="flex items-center justify-between rounded-md border p-2"
|
|
>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="truncate text-xs font-medium">{btn.label}</span>
|
|
<span className="text-muted-foreground shrink-0 text-[10px]">
|
|
({btn.action || "add"})
|
|
</span>
|
|
</div>
|
|
{transferConfig && transferConfig.fields.length > 0 && (
|
|
<div className="text-muted-foreground truncate text-[10px]">
|
|
{transferConfig.fields.length}개 필드: {transferConfig.fields.map((f) => f.sourceColumn).join(", ")}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant={transferConfig ? "outline" : "ghost"}
|
|
className="ml-2 h-7 shrink-0 text-[10px]"
|
|
onClick={() => {
|
|
if (transferConfig) {
|
|
// 기존 설정 편집
|
|
setEditingTransferIndex(transferIndex);
|
|
setDataTransferModalOpen(true);
|
|
} else {
|
|
// 새 설정 추가 후 모달 열기
|
|
const newId = `transfer_${Date.now()}`;
|
|
const newTransfer = {
|
|
id: newId,
|
|
targetPanel: "right" as const,
|
|
targetButtonId: btn.id,
|
|
fields: [],
|
|
};
|
|
const newTransfers = [...(config.buttonDataTransfers || []), newTransfer];
|
|
updateConfig("buttonDataTransfers", newTransfers);
|
|
// 새로 추가된 항목의 인덱스
|
|
setTimeout(() => {
|
|
setEditingTransferIndex(newTransfers.length - 1);
|
|
setDataTransferModalOpen(true);
|
|
}, 0);
|
|
}
|
|
}}
|
|
>
|
|
<Settings className="mr-1 h-3 w-3" />
|
|
{transferConfig ? "설정 편집" : "설정"}
|
|
</Button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 버튼이 없을 때 */}
|
|
{(config.leftPanel?.actionButtons || []).length === 0 &&
|
|
(config.rightPanel?.actionButtons || []).length === 0 && (
|
|
<div className="text-muted-foreground rounded-md border py-4 text-center text-xs">
|
|
설정된 버튼이 없습니다. 먼저 좌측/우측 패널에서 액션 버튼을 추가하세요.
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* 데이터 전달 상세 설정 모달 */}
|
|
<DataTransferDetailModal
|
|
open={dataTransferModalOpen}
|
|
onOpenChange={setDataTransferModalOpen}
|
|
config={config}
|
|
editingIndex={editingTransferIndex}
|
|
leftColumns={leftColumns}
|
|
onSave={(fields) => {
|
|
if (editingTransferIndex !== null) {
|
|
const current = [...(config.buttonDataTransfers || [])];
|
|
current[editingTransferIndex] = { ...current[editingTransferIndex], fields };
|
|
updateConfig("buttonDataTransfers", current);
|
|
}
|
|
setDataTransferModalOpen(false);
|
|
setEditingTransferIndex(null);
|
|
}}
|
|
/>
|
|
|
|
{/* 레이아웃 설정 */}
|
|
<div className="space-y-4">
|
|
<h4 className="border-b pb-2 text-sm font-medium">레이아웃 설정</h4>
|
|
|
|
<div className="space-y-3">
|
|
<div>
|
|
<Label className="text-xs">좌우 비율 (좌측 %)</Label>
|
|
<Input
|
|
type="number"
|
|
value={config.splitRatio || 30}
|
|
onChange={(e) => updateConfig("splitRatio", parseInt(e.target.value) || 30)}
|
|
min={10}
|
|
max={90}
|
|
className="h-9 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">크기 조절 가능</Label>
|
|
<Switch
|
|
checked={config.resizable !== false}
|
|
onCheckedChange={(checked) => updateConfig("resizable", checked)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs">자동 데이터 로드</Label>
|
|
<Switch
|
|
checked={config.autoLoad !== false}
|
|
onCheckedChange={(checked) => updateConfig("autoLoad", checked)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 컬럼 세부설정 모달 */}
|
|
<Dialog open={columnConfigModalOpen} onOpenChange={setColumnConfigModalOpen}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[400px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">컬럼 세부설정</DialogTitle>
|
|
<DialogDescription className="text-xs sm:text-sm">
|
|
{editingColumnIndex !== null &&
|
|
config.leftPanel?.displayColumns?.[editingColumnIndex] &&
|
|
`${config.leftPanel.displayColumns[editingColumnIndex].label || config.leftPanel.displayColumns[editingColumnIndex].name} 컬럼의 표시 방식을 설정합니다.`}
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-4">
|
|
{/* 표시 방식 */}
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">표시 방식</Label>
|
|
<Select
|
|
value={editingColumnConfig.displayType}
|
|
onValueChange={(value: "text" | "badge") => {
|
|
setEditingColumnConfig((prev) => ({
|
|
...prev,
|
|
displayType: value,
|
|
}));
|
|
}}
|
|
>
|
|
<SelectTrigger className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="text">텍스트 (기본)</SelectItem>
|
|
<SelectItem value="badge">배지 (태그 형태)</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
|
배지는 여러 값을 태그 형태로 나란히 표시합니다
|
|
</p>
|
|
</div>
|
|
|
|
{/* 집계 설정 */}
|
|
<div className="space-y-3 rounded-md border p-3">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<Label className="text-xs sm:text-sm">집계 사용</Label>
|
|
<p className="text-muted-foreground text-[10px] sm:text-xs">그룹핑 시 값을 집계합니다</p>
|
|
</div>
|
|
<Switch
|
|
checked={editingColumnConfig.aggregate?.enabled || false}
|
|
onCheckedChange={(checked) => {
|
|
setEditingColumnConfig((prev) => ({
|
|
...prev,
|
|
aggregate: {
|
|
enabled: checked,
|
|
function: prev.aggregate?.function || "DISTINCT",
|
|
},
|
|
}));
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{editingColumnConfig.aggregate?.enabled && (
|
|
<div>
|
|
<Label className="text-muted-foreground text-xs">집계 방식</Label>
|
|
<Select
|
|
value={editingColumnConfig.aggregate?.function || "DISTINCT"}
|
|
onValueChange={(value: "DISTINCT" | "COUNT") => {
|
|
setEditingColumnConfig((prev) => ({
|
|
...prev,
|
|
aggregate: {
|
|
enabled: true,
|
|
function: value,
|
|
},
|
|
}));
|
|
}}
|
|
>
|
|
<SelectTrigger className="mt-1 h-8 text-xs sm:h-10 sm:text-sm">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="DISTINCT">중복제거 (고유값만)</SelectItem>
|
|
<SelectItem value="COUNT">개수</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p className="text-muted-foreground mt-1 text-[10px] sm:text-xs">
|
|
{editingColumnConfig.aggregate?.function === "DISTINCT"
|
|
? "중복을 제거하고 고유한 값들만 배열로 표시합니다"
|
|
: "값의 개수를 숫자로 표시합니다"}
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setColumnConfigModalOpen(false)}
|
|
className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
|
|
>
|
|
취소
|
|
</Button>
|
|
<Button onClick={handleSaveColumnConfig} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
|
|
적용
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
{/* 좌측 패널 컬럼 설정 모달 */}
|
|
<ColumnConfigModal
|
|
open={leftColumnModalOpen}
|
|
onOpenChange={setLeftColumnModalOpen}
|
|
tableName={config.leftPanel?.tableName || ""}
|
|
displayColumns={config.leftPanel?.displayColumns || []}
|
|
searchColumns={config.leftPanel?.searchColumns}
|
|
grouping={config.leftPanel?.grouping}
|
|
showSearch={config.leftPanel?.showSearch}
|
|
onSave={handleLeftColumnConfigSave}
|
|
side="left"
|
|
/>
|
|
|
|
{/* 좌측 패널 액션 버튼 설정 모달 */}
|
|
<ActionButtonConfigModal
|
|
open={leftActionButtonModalOpen}
|
|
onOpenChange={setLeftActionButtonModalOpen}
|
|
actionButtons={config.leftPanel?.actionButtons || []}
|
|
displayColumns={config.leftPanel?.displayColumns}
|
|
onSave={handleLeftActionButtonSave}
|
|
side="left"
|
|
/>
|
|
|
|
{/* 우측 패널 컬럼 설정 모달 */}
|
|
<ColumnConfigModal
|
|
open={rightColumnModalOpen}
|
|
onOpenChange={setRightColumnModalOpen}
|
|
tableName={config.rightPanel?.tableName || ""}
|
|
displayColumns={config.rightPanel?.displayColumns || []}
|
|
searchColumns={config.rightPanel?.searchColumns}
|
|
showSearch={config.rightPanel?.showSearch}
|
|
onSave={handleRightColumnConfigSave}
|
|
side="right"
|
|
/>
|
|
|
|
{/* 우측 패널 액션 버튼 설정 모달 */}
|
|
<ActionButtonConfigModal
|
|
open={rightActionButtonModalOpen}
|
|
onOpenChange={setRightActionButtonModalOpen}
|
|
actionButtons={config.rightPanel?.actionButtons || []}
|
|
displayColumns={config.rightPanel?.displayColumns}
|
|
onSave={handleRightActionButtonSave}
|
|
side="right"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 데이터 전달 상세 설정 모달 컴포넌트
|
|
interface DataTransferDetailModalProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
config: SplitPanelLayout2Config;
|
|
editingIndex: number | null;
|
|
leftColumns: ColumnInfo[];
|
|
onSave: (fields: DataTransferField[]) => void;
|
|
}
|
|
|
|
const DataTransferDetailModal: React.FC<DataTransferDetailModalProps> = ({
|
|
open,
|
|
onOpenChange,
|
|
config,
|
|
editingIndex,
|
|
leftColumns,
|
|
onSave,
|
|
}) => {
|
|
const [fields, setFields] = useState<DataTransferField[]>([]);
|
|
|
|
// 모달 열릴 때 현재 설정 로드
|
|
useEffect(() => {
|
|
if (open && editingIndex !== null) {
|
|
const transfer = config.buttonDataTransfers?.[editingIndex];
|
|
setFields(transfer?.fields || []);
|
|
}
|
|
}, [open, editingIndex, config.buttonDataTransfers]);
|
|
|
|
const transfer = editingIndex !== null ? config.buttonDataTransfers?.[editingIndex] : null;
|
|
|
|
// 소스 컬럼: 대상 패널에 따라 반대 패널의 컬럼 사용
|
|
// left 패널 버튼이면 -> left 패널 데이터를 모달에 전달 (좌측 컬럼이 소스)
|
|
// right 패널 버튼이면 -> left 패널 데이터를 모달에 전달 (좌측 컬럼이 소스, 또는 right 컬럼)
|
|
const sourceColumns = transfer?.targetPanel === "right" ? leftColumns : leftColumns;
|
|
|
|
const addField = () => {
|
|
setFields([...fields, { sourceColumn: "", targetColumn: "" }]);
|
|
};
|
|
|
|
const removeField = (index: number) => {
|
|
setFields(fields.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const updateField = (index: number, key: keyof DataTransferField, value: string) => {
|
|
const newFields = [...fields];
|
|
newFields[index] = { ...newFields[index], [key]: value };
|
|
setFields(newFields);
|
|
};
|
|
|
|
const targetButton =
|
|
transfer?.targetPanel === "left"
|
|
? config.leftPanel?.actionButtons?.find((btn) => btn.id === transfer.targetButtonId)
|
|
: config.rightPanel?.actionButtons?.find((btn) => btn.id === transfer?.targetButtonId);
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="flex max-h-[85vh] max-w-[95vw] flex-col sm:max-w-[550px]">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-base sm:text-lg">데이터 전달 상세 설정</DialogTitle>
|
|
<DialogDescription className="text-xs sm:text-sm">
|
|
{transfer?.targetPanel === "left" ? "좌측" : "우측"} 패널의 "{targetButton?.label || "버튼"}" 클릭 시 모달에
|
|
전달할 데이터를 설정합니다.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<ScrollArea className="max-h-[50vh] flex-1">
|
|
<div className="space-y-3 pr-4">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-xs font-medium">전달할 필드</Label>
|
|
<Button size="sm" variant="ghost" className="h-6 text-xs" onClick={addField}>
|
|
<Plus className="mr-1 h-3 w-3" />
|
|
추가
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="bg-muted/50 rounded-md p-2 text-[10px]">
|
|
<p className="font-medium">소스 컬럼: 선택된 항목에서 가져올 컬럼</p>
|
|
<p>타겟 컬럼: 모달 폼에 전달할 필드명</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{fields.map((field, index) => (
|
|
<div key={index} className="flex items-center gap-2 rounded-md border p-2">
|
|
<div className="flex-1">
|
|
<Select value={field.sourceColumn} onValueChange={(value) => updateField(index, "sourceColumn", value)}>
|
|
<SelectTrigger className="h-8 text-xs">
|
|
<SelectValue placeholder="소스 컬럼" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{sourceColumns.map((col) => (
|
|
<SelectItem key={col.column_name} value={col.column_name}>
|
|
{col.column_comment || col.column_name} ({col.column_name})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<span className="text-muted-foreground text-xs">-></span>
|
|
<div className="flex-1">
|
|
<Input
|
|
value={field.targetColumn}
|
|
onChange={(e) => updateField(index, "targetColumn", e.target.value)}
|
|
placeholder="타겟 컬럼"
|
|
className="h-8 text-xs"
|
|
/>
|
|
</div>
|
|
<Button size="sm" variant="ghost" className="h-6 w-6 shrink-0 p-0" onClick={() => removeField(index)}>
|
|
<X className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
))}
|
|
|
|
{fields.length === 0 && (
|
|
<div className="text-muted-foreground rounded-md border py-4 text-center text-xs">
|
|
전달할 필드가 없습니다. 추가 버튼을 클릭하세요.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
|
|
<DialogFooter className="gap-2 sm:gap-0">
|
|
<Button variant="outline" onClick={() => onOpenChange(false)} className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
취소
|
|
</Button>
|
|
<Button onClick={() => onSave(fields)} className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
저장
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default SplitPanelLayout2ConfigPanel;
|