Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into reportMng
This commit is contained in:
dohyeons
commit
89ce2a9cd0
|
|
@ -1973,15 +1973,21 @@ export async function multiTableSave(
|
|||
for (const subTableConfig of subTables || []) {
|
||||
const { tableName, linkColumn, items, options } = subTableConfig;
|
||||
|
||||
if (!tableName || !items || items.length === 0) {
|
||||
logger.info(`서브 테이블 ${tableName} 스킵: 데이터 없음`);
|
||||
// saveMainAsFirst가 활성화된 경우, items가 비어있어도 메인 데이터를 서브 테이블에 저장해야 함
|
||||
const hasSaveMainAsFirst = options?.saveMainAsFirst &&
|
||||
options?.mainFieldMappings &&
|
||||
options.mainFieldMappings.length > 0;
|
||||
|
||||
if (!tableName || (!items?.length && !hasSaveMainAsFirst)) {
|
||||
logger.info(`서브 테이블 ${tableName} 스킵: 데이터 없음 (saveMainAsFirst: ${hasSaveMainAsFirst})`);
|
||||
continue;
|
||||
}
|
||||
|
||||
logger.info(`서브 테이블 ${tableName} 저장 시작:`, {
|
||||
itemsCount: items.length,
|
||||
itemsCount: items?.length || 0,
|
||||
linkColumn,
|
||||
options,
|
||||
hasSaveMainAsFirst,
|
||||
});
|
||||
|
||||
// 기존 데이터 삭제 옵션
|
||||
|
|
@ -1999,7 +2005,15 @@ export async function multiTableSave(
|
|||
}
|
||||
|
||||
// 메인 데이터도 서브 테이블에 저장 (옵션)
|
||||
if (options?.saveMainAsFirst && options?.mainFieldMappings && linkColumn?.subColumn) {
|
||||
// mainFieldMappings가 비어 있으면 건너뜀 (필수 컬럼 누락 방지)
|
||||
logger.info(`saveMainAsFirst 옵션 확인:`, {
|
||||
saveMainAsFirst: options?.saveMainAsFirst,
|
||||
mainFieldMappings: options?.mainFieldMappings,
|
||||
mainFieldMappingsLength: options?.mainFieldMappings?.length,
|
||||
linkColumn,
|
||||
mainDataKeys: Object.keys(mainData),
|
||||
});
|
||||
if (options?.saveMainAsFirst && options?.mainFieldMappings && options.mainFieldMappings.length > 0 && linkColumn?.subColumn) {
|
||||
const mainSubItem: Record<string, any> = {
|
||||
[linkColumn.subColumn]: savedPkValue,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2201,15 +2201,20 @@ export class MenuCopyService {
|
|||
"system",
|
||||
]);
|
||||
|
||||
await client.query(
|
||||
const result = await client.query(
|
||||
`INSERT INTO screen_menu_assignments (
|
||||
screen_id, menu_objid, company_code, display_order, is_active, created_by
|
||||
) VALUES ${assignmentValues}`,
|
||||
) VALUES ${assignmentValues}
|
||||
ON CONFLICT (screen_id, menu_objid, company_code) DO NOTHING`,
|
||||
assignmentParams
|
||||
);
|
||||
}
|
||||
|
||||
logger.info(`✅ 화면-메뉴 할당 완료: ${validAssignments.length}개`);
|
||||
logger.info(
|
||||
`✅ 화면-메뉴 할당 완료: ${result.rowCount}개 삽입 (${validAssignments.length - (result.rowCount || 0)}개 중복 무시)`
|
||||
);
|
||||
} else {
|
||||
logger.info(`📭 화면-메뉴 할당할 항목 없음`);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -317,12 +317,16 @@ export default function MultiLangPage() {
|
|||
|
||||
<div>
|
||||
<Label htmlFor="menu">메뉴</Label>
|
||||
<Select value={selectedMenu} onValueChange={setSelectedMenu}>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
|
||||
<Select
|
||||
value={selectedMenu || "__all__"}
|
||||
onValueChange={(value) => setSelectedMenu(value === "__all__" ? "" : value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="전체 메뉴" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">전체 메뉴</SelectItem>
|
||||
<SelectItem value="__all__">전체 메뉴</SelectItem>
|
||||
{menus.map((menu) => (
|
||||
<SelectItem key={menu.code} value={menu.code}>
|
||||
{menu.name}
|
||||
|
|
@ -334,12 +338,16 @@ export default function MultiLangPage() {
|
|||
|
||||
<div>
|
||||
<Label htmlFor="keyType">키 타입</Label>
|
||||
<Select value={selectedKeyType} onValueChange={setSelectedKeyType}>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
|
||||
<Select
|
||||
value={selectedKeyType || "__all__"}
|
||||
onValueChange={(value) => setSelectedKeyType(value === "__all__" ? "" : value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="전체 타입" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">전체 타입</SelectItem>
|
||||
<SelectItem value="__all__">전체 타입</SelectItem>
|
||||
{keyTypes.map((type) => (
|
||||
<SelectItem key={type.code} value={type.code}>
|
||||
{type.name}
|
||||
|
|
|
|||
|
|
@ -172,8 +172,9 @@ export const ScreenAssignmentTab: React.FC<ScreenAssignmentTabProps> = ({ menus
|
|||
// });
|
||||
|
||||
if (!menuList || menuList.length === 0) {
|
||||
// Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__placeholder__" 사용
|
||||
return [
|
||||
<SelectItem key="no-menu" value="" disabled>
|
||||
<SelectItem key="no-menu" value="__placeholder__" disabled>
|
||||
메뉴가 없습니다
|
||||
</SelectItem>,
|
||||
];
|
||||
|
|
|
|||
|
|
@ -151,12 +151,16 @@ export function TableLogViewer({ tableName, open, onOpenChange }: TableLogViewer
|
|||
<div className="grid grid-cols-2 gap-3 md:grid-cols-3">
|
||||
<div>
|
||||
<label className="mb-1 block text-sm text-gray-600">작업 유형</label>
|
||||
<Select value={operationType} onValueChange={setOperationType}>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__all__" 사용 */}
|
||||
<Select
|
||||
value={operationType || "__all__"}
|
||||
onValueChange={(value) => setOperationType(value === "__all__" ? "" : value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="전체" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">전체</SelectItem>
|
||||
<SelectItem value="__all__">전체</SelectItem>
|
||||
<SelectItem value="INSERT">추가</SelectItem>
|
||||
<SelectItem value="UPDATE">수정</SelectItem>
|
||||
<SelectItem value="DELETE">삭제</SelectItem>
|
||||
|
|
|
|||
|
|
@ -236,12 +236,13 @@ export const DataMappingSettings: React.FC<DataMappingSettingsProps> = ({
|
|||
<SelectValue placeholder={tablesLoading ? "테이블 목록 로딩 중..." : "저장할 테이블을 선택하세요"} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__placeholder__" 사용 */}
|
||||
{tablesLoading ? (
|
||||
<SelectItem value="" disabled>
|
||||
<SelectItem value="__placeholder__" disabled>
|
||||
테이블 목록 로딩 중...
|
||||
</SelectItem>
|
||||
) : availableTables.length === 0 ? (
|
||||
<SelectItem value="" disabled>
|
||||
<SelectItem value="__placeholder__" disabled>
|
||||
사용 가능한 테이블이 없습니다
|
||||
</SelectItem>
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -1173,7 +1173,8 @@ export function FlowStepPanel({
|
|||
기본 REST API 연결
|
||||
</SelectItem>
|
||||
) : (
|
||||
<SelectItem value="" disabled>
|
||||
// Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__placeholder__" 사용
|
||||
<SelectItem value="__placeholder__" disabled>
|
||||
연결된 REST API가 없습니다
|
||||
</SelectItem>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -996,14 +996,6 @@ export const EditModal: React.FC<EditModalProps> = ({ className }) => {
|
|||
screenId: modalState.screenId, // 화면 ID 추가
|
||||
};
|
||||
|
||||
// 🔍 디버깅: enrichedFormData 확인
|
||||
console.log("🔑 [EditModal] enrichedFormData 생성:", {
|
||||
"screenData.screenInfo": screenData.screenInfo,
|
||||
"screenData.screenInfo?.tableName": screenData.screenInfo?.tableName,
|
||||
"enrichedFormData.tableName": enrichedFormData.tableName,
|
||||
"enrichedFormData.id": enrichedFormData.id,
|
||||
});
|
||||
|
||||
return (
|
||||
<InteractiveScreenViewerDynamic
|
||||
key={component.id}
|
||||
|
|
|
|||
|
|
@ -413,8 +413,9 @@ export const DynamicComponentRenderer: React.FC<DynamicComponentRendererProps> =
|
|||
groupedData: props.groupedData, // ✅ 언더스코어 제거하여 직접 전달
|
||||
_groupedData: props.groupedData, // 하위 호환성 유지
|
||||
// 🆕 UniversalFormModal용 initialData 전달
|
||||
// originalData를 사용 (최초 전달된 값, formData는 계속 변경되므로 사용하면 안됨)
|
||||
_initialData: originalData || formData,
|
||||
// originalData가 비어있지 않으면 originalData 사용, 아니면 formData 사용
|
||||
// 생성 모드에서는 originalData가 빈 객체이므로 formData를 사용해야 함
|
||||
_initialData: (originalData && Object.keys(originalData).length > 0) ? originalData : formData,
|
||||
_originalData: originalData,
|
||||
// 🆕 탭 관련 정보 전달 (탭 내부의 테이블 컴포넌트에서 사용)
|
||||
parentTabId: props.parentTabId,
|
||||
|
|
|
|||
|
|
@ -315,16 +315,17 @@ export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps
|
|||
{/* 라벨 컬럼 (선택) */}
|
||||
<div className="space-y-2 mb-3">
|
||||
<Label>라벨 컬럼 (선택사항)</Label>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__none__" 사용 */}
|
||||
<Select
|
||||
value={config.dataSource?.labelColumn || ""}
|
||||
onValueChange={(value) => updateConfig("dataSource.labelColumn", value)}
|
||||
value={config.dataSource?.labelColumn || "__none__"}
|
||||
onValueChange={(value) => updateConfig("dataSource.labelColumn", value === "__none__" ? "" : value)}
|
||||
disabled={isLoadingColumns || !config.dataSource?.tableName}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="라벨 컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">선택 안 함</SelectItem>
|
||||
<SelectItem value="__none__">선택 안 함</SelectItem>
|
||||
{columns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_name} ({col.data_type})
|
||||
|
|
@ -337,16 +338,17 @@ export default function MapConfigPanel({ config, onChange }: MapConfigPanelProps
|
|||
{/* 상태 컬럼 (선택) */}
|
||||
<div className="space-y-2 mb-3">
|
||||
<Label>상태 컬럼 (선택사항)</Label>
|
||||
{/* Radix UI Select v2.x: 빈 문자열 value="" 금지 → "__none__" 사용 */}
|
||||
<Select
|
||||
value={config.dataSource?.statusColumn || ""}
|
||||
onValueChange={(value) => updateConfig("dataSource.statusColumn", value)}
|
||||
value={config.dataSource?.statusColumn || "__none__"}
|
||||
onValueChange={(value) => updateConfig("dataSource.statusColumn", value === "__none__" ? "" : value)}
|
||||
disabled={isLoadingColumns || !config.dataSource?.tableName}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="상태 컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">선택 안 함</SelectItem>
|
||||
<SelectItem value="__none__">선택 안 함</SelectItem>
|
||||
{columns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_name} ({col.data_type})
|
||||
|
|
|
|||
|
|
@ -1636,7 +1636,7 @@ export function ModalRepeaterTableConfigPanel({
|
|||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(localConfig.columns || []).map((col) => (
|
||||
{(localConfig.columns || []).filter((col) => col.field && col.field !== "").map((col) => (
|
||||
<SelectItem key={col.field} value={col.field}>
|
||||
{col.label} ({col.field})
|
||||
</SelectItem>
|
||||
|
|
@ -1900,7 +1900,7 @@ export function ModalRepeaterTableConfigPanel({
|
|||
<SelectValue placeholder="현재 행 필드" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(localConfig.columns || []).map((col) => (
|
||||
{(localConfig.columns || []).filter((col) => col.field && col.field !== "").map((col) => (
|
||||
<SelectItem key={col.field} value={col.field}>
|
||||
{col.label}
|
||||
</SelectItem>
|
||||
|
|
@ -2056,7 +2056,7 @@ export function ModalRepeaterTableConfigPanel({
|
|||
<SelectValue placeholder="필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(localConfig.columns || []).map((col) => (
|
||||
{(localConfig.columns || []).filter((col) => col.field && col.field !== "").map((col) => (
|
||||
<SelectItem key={col.field} value={col.field}>
|
||||
{col.label} ({col.field})
|
||||
</SelectItem>
|
||||
|
|
@ -2303,7 +2303,7 @@ export function ModalRepeaterTableConfigPanel({
|
|||
<SelectValue placeholder="현재 행 필드" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(localConfig.columns || []).map((col) => (
|
||||
{(localConfig.columns || []).filter((col) => col.field && col.field !== "").map((col) => (
|
||||
<SelectItem key={col.field} value={col.field}>
|
||||
{col.label}
|
||||
</SelectItem>
|
||||
|
|
|
|||
|
|
@ -481,7 +481,7 @@ export function RepeaterTable({
|
|||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{column.selectOptions?.map((option) => (
|
||||
{column.selectOptions?.filter((option) => option.value && option.value !== "").map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
|
|
|
|||
|
|
@ -561,7 +561,7 @@ export function SimpleRepeaterTableComponent({
|
|||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{column.selectOptions?.map((option) => (
|
||||
{column.selectOptions?.filter((option) => option.value && option.value !== "").map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
|
|
|
|||
|
|
@ -1539,7 +1539,7 @@ export function SimpleRepeaterTableConfigPanel({
|
|||
<SelectValue placeholder="컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{(localConfig.columns || []).filter(c => c.type === "number").map((col) => (
|
||||
{(localConfig.columns || []).filter(c => c.type === "number" && c.field && c.field !== "").map((col) => (
|
||||
<SelectItem key={col.field} value={col.field}>
|
||||
{col.label}
|
||||
</SelectItem>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,675 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
useSortable,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { Plus, GripVertical, Settings, X, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import type { ActionButtonConfig, ModalParamMapping, ColumnConfig } from "./types";
|
||||
|
||||
interface ScreenInfo {
|
||||
screen_id: number;
|
||||
screen_name: string;
|
||||
screen_code: string;
|
||||
}
|
||||
|
||||
// 정렬 가능한 버튼 아이템
|
||||
const SortableButtonItem: React.FC<{
|
||||
id: string;
|
||||
button: ActionButtonConfig;
|
||||
index: number;
|
||||
onSettingsClick: () => void;
|
||||
onRemove: () => void;
|
||||
}> = ({ id, button, index, onSettingsClick, onRemove }) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
const getVariantColor = (variant?: string) => {
|
||||
switch (variant) {
|
||||
case "destructive":
|
||||
return "bg-destructive/10 text-destructive";
|
||||
case "outline":
|
||||
return "bg-background border";
|
||||
case "ghost":
|
||||
return "bg-muted/50";
|
||||
case "secondary":
|
||||
return "bg-secondary text-secondary-foreground";
|
||||
default:
|
||||
return "bg-primary/10 text-primary";
|
||||
}
|
||||
};
|
||||
|
||||
const getActionLabel = (action?: string) => {
|
||||
switch (action) {
|
||||
case "add":
|
||||
return "추가";
|
||||
case "edit":
|
||||
return "수정";
|
||||
case "delete":
|
||||
return "삭제";
|
||||
case "bulk-delete":
|
||||
return "일괄삭제";
|
||||
case "api":
|
||||
return "API";
|
||||
case "custom":
|
||||
return "커스텀";
|
||||
default:
|
||||
return "추가";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={cn("flex items-center gap-2 rounded-md border bg-card p-3", isDragging && "opacity-50 shadow-lg")}
|
||||
>
|
||||
{/* 드래그 핸들 */}
|
||||
<div {...attributes} {...listeners} className="cursor-grab touch-none text-muted-foreground hover:text-foreground">
|
||||
<GripVertical className="h-4 w-4" />
|
||||
</div>
|
||||
|
||||
{/* 버튼 정보 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={cn("px-2 py-0.5 rounded text-xs font-medium", getVariantColor(button.variant))}>
|
||||
{button.label || `버튼 ${index + 1}`}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
<Badge variant="outline" className="text-[10px] h-4">
|
||||
{getActionLabel(button.action)}
|
||||
</Badge>
|
||||
{button.icon && (
|
||||
<Badge variant="secondary" className="text-[10px] h-4">
|
||||
{button.icon}
|
||||
</Badge>
|
||||
)}
|
||||
{button.showCondition && button.showCondition !== "always" && (
|
||||
<Badge variant="secondary" className="text-[10px] h-4">
|
||||
{button.showCondition === "selected" ? "선택시만" : "미선택시만"}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼들 */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Button size="sm" variant="ghost" className="h-7 w-7 p-0" onClick={onSettingsClick} title="세부설정">
|
||||
<Settings className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
|
||||
onClick={onRemove}
|
||||
title="삭제"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface ActionButtonConfigModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
actionButtons: ActionButtonConfig[];
|
||||
displayColumns?: ColumnConfig[]; // 모달 파라미터 매핑용
|
||||
onSave: (buttons: ActionButtonConfig[]) => void;
|
||||
side: "left" | "right";
|
||||
}
|
||||
|
||||
export const ActionButtonConfigModal: React.FC<ActionButtonConfigModalProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
actionButtons: initialButtons,
|
||||
displayColumns = [],
|
||||
onSave,
|
||||
side,
|
||||
}) => {
|
||||
// 로컬 상태
|
||||
const [buttons, setButtons] = useState<ActionButtonConfig[]>([]);
|
||||
|
||||
// 버튼 세부설정 모달
|
||||
const [detailModalOpen, setDetailModalOpen] = useState(false);
|
||||
const [editingButtonIndex, setEditingButtonIndex] = useState<number | null>(null);
|
||||
const [editingButton, setEditingButton] = useState<ActionButtonConfig | null>(null);
|
||||
|
||||
// 화면 목록
|
||||
const [screens, setScreens] = useState<ScreenInfo[]>([]);
|
||||
const [screensLoading, setScreensLoading] = useState(false);
|
||||
const [screenSelectOpen, setScreenSelectOpen] = useState(false);
|
||||
|
||||
// 드래그 센서
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 8,
|
||||
},
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
);
|
||||
|
||||
// 초기값 설정
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setButtons(initialButtons || []);
|
||||
}
|
||||
}, [open, initialButtons]);
|
||||
|
||||
// 화면 목록 로드
|
||||
const loadScreens = useCallback(async () => {
|
||||
setScreensLoading(true);
|
||||
try {
|
||||
const response = await apiClient.get("/screen-management/screens?size=1000");
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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 ?? "",
|
||||
}));
|
||||
|
||||
setScreens(transformedScreens);
|
||||
} catch (error) {
|
||||
console.error("화면 목록 로드 실패:", error);
|
||||
setScreens([]);
|
||||
} finally {
|
||||
setScreensLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
loadScreens();
|
||||
}
|
||||
}, [open, loadScreens]);
|
||||
|
||||
// 드래그 종료 핸들러
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
if (over && active.id !== over.id) {
|
||||
const oldIndex = buttons.findIndex((btn) => btn.id === active.id);
|
||||
const newIndex = buttons.findIndex((btn) => btn.id === over.id);
|
||||
|
||||
if (oldIndex !== -1 && newIndex !== -1) {
|
||||
setButtons(arrayMove(buttons, oldIndex, newIndex));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 버튼 추가
|
||||
const handleAddButton = () => {
|
||||
const newButton: ActionButtonConfig = {
|
||||
id: `btn-${Date.now()}`,
|
||||
label: "새 버튼",
|
||||
variant: "default",
|
||||
action: "add",
|
||||
showCondition: "always",
|
||||
};
|
||||
setButtons([...buttons, newButton]);
|
||||
};
|
||||
|
||||
// 버튼 삭제
|
||||
const handleRemoveButton = (index: number) => {
|
||||
setButtons(buttons.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// 버튼 업데이트
|
||||
const handleUpdateButton = (index: number, updates: Partial<ActionButtonConfig>) => {
|
||||
const newButtons = [...buttons];
|
||||
newButtons[index] = { ...newButtons[index], ...updates };
|
||||
setButtons(newButtons);
|
||||
};
|
||||
|
||||
// 버튼 세부설정 열기
|
||||
const handleOpenDetailSettings = (index: number) => {
|
||||
setEditingButtonIndex(index);
|
||||
setEditingButton({ ...buttons[index] });
|
||||
setDetailModalOpen(true);
|
||||
};
|
||||
|
||||
// 버튼 세부설정 저장
|
||||
const handleSaveDetailSettings = () => {
|
||||
if (editingButtonIndex !== null && editingButton) {
|
||||
handleUpdateButton(editingButtonIndex, editingButton);
|
||||
}
|
||||
setDetailModalOpen(false);
|
||||
setEditingButtonIndex(null);
|
||||
setEditingButton(null);
|
||||
};
|
||||
|
||||
// 저장
|
||||
const handleSave = () => {
|
||||
onSave(buttons);
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
// 선택된 화면 정보
|
||||
const getScreenInfo = (screenId?: number) => {
|
||||
return screens.find((s) => s.screen_id === screenId);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[600px] max-h-[90vh] flex flex-col">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{side === "left" ? "좌측" : "우측"} 패널 액션 버튼 설정
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
버튼을 추가하고 순서를 드래그로 변경할 수 있습니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-hidden flex flex-col">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<Label className="text-sm font-medium">
|
||||
액션 버튼 ({buttons.length}개)
|
||||
</Label>
|
||||
<Button size="sm" variant="outline" onClick={handleAddButton}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
버튼 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1 pr-4">
|
||||
{buttons.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<p className="text-muted-foreground text-sm mb-2">
|
||||
액션 버튼이 없습니다
|
||||
</p>
|
||||
<Button size="sm" variant="outline" onClick={handleAddButton}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
첫 번째 버튼 추가
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={buttons.map((btn) => btn.id)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{buttons.map((btn, index) => (
|
||||
<SortableButtonItem
|
||||
key={btn.id}
|
||||
id={btn.id}
|
||||
button={btn}
|
||||
index={index}
|
||||
onSettingsClick={() => handleOpenDetailSettings(index)}
|
||||
onRemove={() => handleRemoveButton(index)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="mt-4">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>저장</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 버튼 세부설정 모달 */}
|
||||
<Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px] max-h-[85vh]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>버튼 세부설정</DialogTitle>
|
||||
<DialogDescription>
|
||||
{editingButton?.label || "버튼"}의 동작을 설정합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{editingButton && (
|
||||
<ScrollArea className="max-h-[60vh]">
|
||||
<div className="space-y-4 pr-4">
|
||||
{/* 기본 설정 */}
|
||||
<div className="space-y-3 p-3 border rounded-lg">
|
||||
<h4 className="text-sm font-medium">기본 설정</h4>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">버튼 라벨</Label>
|
||||
<Input
|
||||
value={editingButton.label}
|
||||
onChange={(e) =>
|
||||
setEditingButton({ ...editingButton, label: e.target.value })
|
||||
}
|
||||
placeholder="버튼 라벨"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">버튼 스타일</Label>
|
||||
<Select
|
||||
value={editingButton.variant || "default"}
|
||||
onValueChange={(value) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
variant: value as ActionButtonConfig["variant"],
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="default">기본 (Primary)</SelectItem>
|
||||
<SelectItem value="secondary">보조 (Secondary)</SelectItem>
|
||||
<SelectItem value="outline">외곽선</SelectItem>
|
||||
<SelectItem value="ghost">투명</SelectItem>
|
||||
<SelectItem value="destructive">삭제 (빨간색)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">아이콘</Label>
|
||||
<Select
|
||||
value={editingButton.icon || "none"}
|
||||
onValueChange={(value) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
icon: value === "none" ? undefined : value,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="none">없음</SelectItem>
|
||||
<SelectItem value="Plus">+ (추가)</SelectItem>
|
||||
<SelectItem value="Edit">수정</SelectItem>
|
||||
<SelectItem value="Trash2">삭제</SelectItem>
|
||||
<SelectItem value="Download">다운로드</SelectItem>
|
||||
<SelectItem value="Upload">업로드</SelectItem>
|
||||
<SelectItem value="RefreshCw">새로고침</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">표시 조건</Label>
|
||||
<Select
|
||||
value={editingButton.showCondition || "always"}
|
||||
onValueChange={(value) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
showCondition: value as ActionButtonConfig["showCondition"],
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="always">항상 표시</SelectItem>
|
||||
<SelectItem value="selected">선택 시만 표시</SelectItem>
|
||||
<SelectItem value="notSelected">미선택 시만 표시</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 동작 설정 */}
|
||||
<div className="space-y-3 p-3 border rounded-lg">
|
||||
<h4 className="text-sm font-medium">동작 설정</h4>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">동작 유형</Label>
|
||||
<Select
|
||||
value={editingButton.action || "add"}
|
||||
onValueChange={(value) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
action: value as ActionButtonConfig["action"],
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="add">추가 (모달 열기)</SelectItem>
|
||||
<SelectItem value="edit">수정 (선택 항목)</SelectItem>
|
||||
<SelectItem value="delete">삭제 (선택 항목)</SelectItem>
|
||||
<SelectItem value="bulk-delete">일괄 삭제 (체크된 항목)</SelectItem>
|
||||
<SelectItem value="api">API 호출</SelectItem>
|
||||
<SelectItem value="custom">커스텀 액션</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* 모달 설정 (add, edit 액션) */}
|
||||
{(editingButton.action === "add" || editingButton.action === "edit") && (
|
||||
<div>
|
||||
<Label className="text-xs">모달 화면</Label>
|
||||
<Popover open={screenSelectOpen} onOpenChange={setScreenSelectOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className="mt-1 h-9 w-full justify-between"
|
||||
disabled={screensLoading}
|
||||
>
|
||||
{screensLoading
|
||||
? "로딩 중..."
|
||||
: editingButton.modalScreenId
|
||||
? getScreenInfo(editingButton.modalScreenId)?.screen_name ||
|
||||
`화면 ${editingButton.modalScreenId}`
|
||||
: "화면 선택"}
|
||||
<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>검색 결과가 없습니다</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{screens.map((screen) => (
|
||||
<CommandItem
|
||||
key={screen.screen_id}
|
||||
value={`${screen.screen_id}-${screen.screen_name}`}
|
||||
onSelect={() => {
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
modalScreenId: screen.screen_id,
|
||||
});
|
||||
setScreenSelectOpen(false);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
editingButton.modalScreenId === screen.screen_id
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="flex flex-col">
|
||||
<span>{screen.screen_name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{screen.screen_code}
|
||||
</span>
|
||||
</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* API 설정 */}
|
||||
{editingButton.action === "api" && (
|
||||
<>
|
||||
<div>
|
||||
<Label className="text-xs">API 엔드포인트</Label>
|
||||
<Input
|
||||
value={editingButton.apiEndpoint || ""}
|
||||
onChange={(e) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
apiEndpoint: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="/api/example"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs">HTTP 메서드</Label>
|
||||
<Select
|
||||
value={editingButton.apiMethod || "POST"}
|
||||
onValueChange={(value) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
apiMethod: value as ActionButtonConfig["apiMethod"],
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="GET">GET</SelectItem>
|
||||
<SelectItem value="POST">POST</SelectItem>
|
||||
<SelectItem value="PUT">PUT</SelectItem>
|
||||
<SelectItem value="DELETE">DELETE</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* 확인 메시지 (삭제 계열) */}
|
||||
{(editingButton.action === "delete" ||
|
||||
editingButton.action === "bulk-delete" ||
|
||||
(editingButton.action === "api" && editingButton.apiMethod === "DELETE")) && (
|
||||
<div>
|
||||
<Label className="text-xs">확인 메시지</Label>
|
||||
<Input
|
||||
value={editingButton.confirmMessage || ""}
|
||||
onChange={(e) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
confirmMessage: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="정말 삭제하시겠습니까?"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 커스텀 액션 ID */}
|
||||
{editingButton.action === "custom" && (
|
||||
<div>
|
||||
<Label className="text-xs">커스텀 액션 ID</Label>
|
||||
<Input
|
||||
value={editingButton.customActionId || ""}
|
||||
onChange={(e) =>
|
||||
setEditingButton({
|
||||
...editingButton,
|
||||
customActionId: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="customAction1"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
커스텀 이벤트 핸들러에서 이 ID로 버튼을 구분합니다
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDetailModalOpen(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSaveDetailSettings}>적용</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ActionButtonConfigModal;
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,806 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import {
|
||||
DndContext,
|
||||
closestCenter,
|
||||
KeyboardSensor,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
type DragEndEvent,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
arrayMove,
|
||||
SortableContext,
|
||||
sortableKeyboardCoordinates,
|
||||
verticalListSortingStrategy,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { Plus, Settings2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
import { entityJoinApi } from "@/lib/api/entityJoin";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import type { ColumnConfig, SearchColumnConfig, GroupingConfig, ColumnDisplayConfig, EntityReferenceConfig } from "./types";
|
||||
import { SortableColumnItem } from "./components/SortableColumnItem";
|
||||
import { SearchableColumnSelect } from "./components/SearchableColumnSelect";
|
||||
|
||||
interface ColumnInfo {
|
||||
column_name: string;
|
||||
data_type: string;
|
||||
column_comment?: string;
|
||||
input_type?: string;
|
||||
web_type?: string;
|
||||
reference_table?: string;
|
||||
reference_column?: string;
|
||||
}
|
||||
|
||||
// 참조 테이블 컬럼 정보
|
||||
interface ReferenceColumnInfo {
|
||||
columnName: string;
|
||||
displayName: string;
|
||||
dataType: string;
|
||||
}
|
||||
|
||||
interface ColumnConfigModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
tableName: string;
|
||||
displayColumns: ColumnConfig[];
|
||||
searchColumns?: SearchColumnConfig[];
|
||||
grouping?: GroupingConfig;
|
||||
showSearch?: boolean;
|
||||
onSave: (config: {
|
||||
displayColumns: ColumnConfig[];
|
||||
searchColumns: SearchColumnConfig[];
|
||||
grouping: GroupingConfig;
|
||||
showSearch: boolean;
|
||||
}) => void;
|
||||
side: "left" | "right"; // 좌측/우측 패널 구분
|
||||
}
|
||||
|
||||
export const ColumnConfigModal: React.FC<ColumnConfigModalProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
tableName,
|
||||
displayColumns: initialDisplayColumns,
|
||||
searchColumns: initialSearchColumns,
|
||||
grouping: initialGrouping,
|
||||
showSearch: initialShowSearch,
|
||||
onSave,
|
||||
side,
|
||||
}) => {
|
||||
// 로컬 상태 (모달 내에서만 사용, 저장 시 부모로 전달)
|
||||
const [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]);
|
||||
const [searchColumns, setSearchColumns] = useState<SearchColumnConfig[]>([]);
|
||||
const [grouping, setGrouping] = useState<GroupingConfig>({ enabled: false, groupByColumn: "" });
|
||||
const [showSearch, setShowSearch] = useState(false);
|
||||
|
||||
// 컬럼 세부설정 모달
|
||||
const [detailModalOpen, setDetailModalOpen] = useState(false);
|
||||
const [editingColumnIndex, setEditingColumnIndex] = useState<number | null>(null);
|
||||
const [editingColumn, setEditingColumn] = useState<ColumnConfig | null>(null);
|
||||
|
||||
// 테이블 컬럼 목록
|
||||
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
||||
const [columnsLoading, setColumnsLoading] = useState(false);
|
||||
|
||||
// 엔티티 참조 관련 상태
|
||||
const [entityReferenceColumns, setEntityReferenceColumns] = useState<Map<string, ReferenceColumnInfo[]>>(new Map());
|
||||
const [loadingEntityColumns, setLoadingEntityColumns] = useState<Set<string>>(new Set());
|
||||
|
||||
// 드래그 센서
|
||||
const sensors = useSensors(
|
||||
useSensor(PointerSensor, {
|
||||
activationConstraint: {
|
||||
distance: 8,
|
||||
},
|
||||
}),
|
||||
useSensor(KeyboardSensor, {
|
||||
coordinateGetter: sortableKeyboardCoordinates,
|
||||
})
|
||||
);
|
||||
|
||||
// 초기값 설정
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setDisplayColumns(initialDisplayColumns || []);
|
||||
setSearchColumns(initialSearchColumns || []);
|
||||
setGrouping(initialGrouping || { enabled: false, groupByColumn: "" });
|
||||
setShowSearch(initialShowSearch || false);
|
||||
}
|
||||
}, [open, initialDisplayColumns, initialSearchColumns, initialGrouping, initialShowSearch]);
|
||||
|
||||
// 테이블 컬럼 로드 (entity 타입 정보 포함)
|
||||
const loadColumns = useCallback(async () => {
|
||||
if (!tableName) {
|
||||
setColumns([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setColumnsLoading(true);
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/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;
|
||||
}
|
||||
|
||||
// entity 타입 정보를 포함하여 변환
|
||||
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 ?? "",
|
||||
input_type: c.inputType ?? c.input_type ?? "",
|
||||
web_type: c.webType ?? c.web_type ?? "",
|
||||
reference_table: c.referenceTable ?? c.reference_table ?? "",
|
||||
reference_column: c.referenceColumn ?? c.reference_column ?? "",
|
||||
}));
|
||||
|
||||
setColumns(transformedColumns);
|
||||
} catch (error) {
|
||||
console.error("컬럼 목록 로드 실패:", error);
|
||||
setColumns([]);
|
||||
} finally {
|
||||
setColumnsLoading(false);
|
||||
}
|
||||
}, [tableName]);
|
||||
|
||||
// 엔티티 참조 테이블의 컬럼 목록 로드
|
||||
const loadEntityReferenceColumns = useCallback(async (columnName: string, referenceTable: string) => {
|
||||
if (!referenceTable || entityReferenceColumns.has(columnName)) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingEntityColumns(prev => new Set(prev).add(columnName));
|
||||
try {
|
||||
const result = await entityJoinApi.getReferenceTableColumns(referenceTable);
|
||||
if (result?.columns) {
|
||||
setEntityReferenceColumns(prev => {
|
||||
const newMap = new Map(prev);
|
||||
newMap.set(columnName, result.columns);
|
||||
return newMap;
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`엔티티 참조 컬럼 로드 실패 (${referenceTable}):`, error);
|
||||
} finally {
|
||||
setLoadingEntityColumns(prev => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.delete(columnName);
|
||||
return newSet;
|
||||
});
|
||||
}
|
||||
}, [entityReferenceColumns]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open && tableName) {
|
||||
loadColumns();
|
||||
}
|
||||
}, [open, tableName, loadColumns]);
|
||||
|
||||
// 드래그 종료 핸들러
|
||||
const handleDragEnd = (event: DragEndEvent) => {
|
||||
const { active, over } = event;
|
||||
|
||||
if (over && active.id !== over.id) {
|
||||
const oldIndex = displayColumns.findIndex((col, idx) => `col-${idx}` === active.id);
|
||||
const newIndex = displayColumns.findIndex((col, idx) => `col-${idx}` === over.id);
|
||||
|
||||
if (oldIndex !== -1 && newIndex !== -1) {
|
||||
setDisplayColumns(arrayMove(displayColumns, oldIndex, newIndex));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 컬럼 추가
|
||||
const handleAddColumn = () => {
|
||||
setDisplayColumns([
|
||||
...displayColumns,
|
||||
{
|
||||
name: "",
|
||||
label: "",
|
||||
displayRow: side === "left" ? "name" : "info",
|
||||
sourceTable: tableName,
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
// 컬럼 삭제
|
||||
const handleRemoveColumn = (index: number) => {
|
||||
setDisplayColumns(displayColumns.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// 컬럼 업데이트 (entity 타입이면 참조 테이블 컬럼도 로드)
|
||||
const handleUpdateColumn = (index: number, updates: Partial<ColumnConfig>) => {
|
||||
const newColumns = [...displayColumns];
|
||||
newColumns[index] = { ...newColumns[index], ...updates };
|
||||
setDisplayColumns(newColumns);
|
||||
|
||||
// 컬럼명이 변경된 경우 entity 타입인지 확인하고 참조 테이블 컬럼 로드
|
||||
if (updates.name) {
|
||||
const columnInfo = columns.find(c => c.column_name === updates.name);
|
||||
if (columnInfo && (columnInfo.input_type === 'entity' || columnInfo.web_type === 'entity')) {
|
||||
if (columnInfo.reference_table) {
|
||||
loadEntityReferenceColumns(updates.name, columnInfo.reference_table);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 컬럼 세부설정 열기 (entity 타입이면 참조 테이블 컬럼도 로드)
|
||||
const handleOpenDetailSettings = (index: number) => {
|
||||
const column = displayColumns[index];
|
||||
setEditingColumnIndex(index);
|
||||
setEditingColumn({ ...column });
|
||||
setDetailModalOpen(true);
|
||||
|
||||
// entity 타입인지 확인하고 참조 테이블 컬럼 로드
|
||||
if (column.name) {
|
||||
const columnInfo = columns.find(c => c.column_name === column.name);
|
||||
if (columnInfo && (columnInfo.input_type === 'entity' || columnInfo.web_type === 'entity')) {
|
||||
if (columnInfo.reference_table) {
|
||||
loadEntityReferenceColumns(column.name, columnInfo.reference_table);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 컬럼 세부설정 저장
|
||||
const handleSaveDetailSettings = () => {
|
||||
if (editingColumnIndex !== null && editingColumn) {
|
||||
handleUpdateColumn(editingColumnIndex, editingColumn);
|
||||
}
|
||||
setDetailModalOpen(false);
|
||||
setEditingColumnIndex(null);
|
||||
setEditingColumn(null);
|
||||
};
|
||||
|
||||
// 검색 컬럼 추가
|
||||
const handleAddSearchColumn = () => {
|
||||
setSearchColumns([...searchColumns, { columnName: "", label: "" }]);
|
||||
};
|
||||
|
||||
// 검색 컬럼 삭제
|
||||
const handleRemoveSearchColumn = (index: number) => {
|
||||
setSearchColumns(searchColumns.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// 검색 컬럼 업데이트
|
||||
const handleUpdateSearchColumn = (index: number, columnName: string) => {
|
||||
const newColumns = [...searchColumns];
|
||||
newColumns[index] = { ...newColumns[index], columnName };
|
||||
setSearchColumns(newColumns);
|
||||
};
|
||||
|
||||
// 저장
|
||||
const handleSave = () => {
|
||||
onSave({
|
||||
displayColumns,
|
||||
searchColumns,
|
||||
grouping,
|
||||
showSearch,
|
||||
});
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
// 엔티티 표시 컬럼 토글
|
||||
const toggleEntityDisplayColumn = (selectedColumn: string) => {
|
||||
if (!editingColumn) return;
|
||||
|
||||
const currentDisplayColumns = editingColumn.entityReference?.displayColumns || [];
|
||||
const newDisplayColumns = currentDisplayColumns.includes(selectedColumn)
|
||||
? currentDisplayColumns.filter(col => col !== selectedColumn)
|
||||
: [...currentDisplayColumns, selectedColumn];
|
||||
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
entityReference: {
|
||||
...editingColumn.entityReference,
|
||||
displayColumns: newDisplayColumns,
|
||||
} as EntityReferenceConfig,
|
||||
});
|
||||
};
|
||||
|
||||
// 현재 편집 중인 컬럼이 entity 타입인지 확인
|
||||
const getEditingColumnEntityInfo = useCallback(() => {
|
||||
if (!editingColumn?.name) return null;
|
||||
const columnInfo = columns.find(c => c.column_name === editingColumn.name);
|
||||
if (!columnInfo) return null;
|
||||
if (columnInfo.input_type !== 'entity' && columnInfo.web_type !== 'entity') return null;
|
||||
return {
|
||||
referenceTable: columnInfo.reference_table || '',
|
||||
referenceColumns: entityReferenceColumns.get(editingColumn.name) || [],
|
||||
isLoading: loadingEntityColumns.has(editingColumn.name),
|
||||
};
|
||||
}, [editingColumn, columns, entityReferenceColumns, loadingEntityColumns]);
|
||||
|
||||
// 이미 선택된 컬럼명 목록 (중복 선택 방지용)
|
||||
const selectedColumnNames = displayColumns.map((col) => col.name).filter(Boolean);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="flex h-[80vh] max-w-[95vw] flex-col overflow-hidden sm:max-w-[700px]">
|
||||
<DialogHeader className="shrink-0">
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Settings2 className="h-5 w-5" />
|
||||
{side === "left" ? "좌측" : "우측"} 패널 컬럼 설정
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
표시할 컬럼을 추가하고 순서를 드래그로 변경할 수 있습니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Tabs defaultValue="columns" className="flex min-h-0 flex-1 flex-col overflow-hidden">
|
||||
<TabsList className="grid w-full shrink-0 grid-cols-3">
|
||||
<TabsTrigger value="columns">표시 컬럼</TabsTrigger>
|
||||
<TabsTrigger value="grouping" disabled={side === "right"}>
|
||||
그룹핑
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="search">검색</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{/* 표시 컬럼 탭 */}
|
||||
<TabsContent value="columns" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
|
||||
<div className="flex shrink-0 items-center justify-between mb-3">
|
||||
<Label className="text-sm font-medium">
|
||||
표시할 컬럼 ({displayColumns.length}개)
|
||||
</Label>
|
||||
<Button size="sm" variant="outline" onClick={handleAddColumn}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
컬럼 추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="pr-4">
|
||||
{displayColumns.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<p className="text-muted-foreground text-sm mb-2">
|
||||
표시할 컬럼이 없습니다
|
||||
</p>
|
||||
<Button size="sm" variant="outline" onClick={handleAddColumn}>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
첫 번째 컬럼 추가
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<DndContext
|
||||
sensors={sensors}
|
||||
collisionDetection={closestCenter}
|
||||
onDragEnd={handleDragEnd}
|
||||
>
|
||||
<SortableContext
|
||||
items={displayColumns.map((_, idx) => `col-${idx}`)}
|
||||
strategy={verticalListSortingStrategy}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
{displayColumns.map((col, index) => (
|
||||
<div key={`col-${index}`} className="space-y-2">
|
||||
<SortableColumnItem
|
||||
id={`col-${index}`}
|
||||
column={col}
|
||||
index={index}
|
||||
onSettingsClick={() => handleOpenDetailSettings(index)}
|
||||
onRemove={() => handleRemoveColumn(index)}
|
||||
showGroupingSettings={grouping.enabled}
|
||||
/>
|
||||
{/* 컬럼 빠른 선택 (인라인) */}
|
||||
{!col.name && (
|
||||
<div className="ml-6 pl-2 border-l-2 border-muted">
|
||||
<SearchableColumnSelect
|
||||
tableName={tableName}
|
||||
value={col.name}
|
||||
onValueChange={(value) => {
|
||||
const colInfo = columns.find((c) => c.column_name === value);
|
||||
handleUpdateColumn(index, {
|
||||
name: value,
|
||||
label: colInfo?.column_comment || "",
|
||||
});
|
||||
}}
|
||||
excludeColumns={selectedColumnNames}
|
||||
placeholder="컬럼을 선택하세요"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
{/* 그룹핑 탭 (좌측 패널만) */}
|
||||
<TabsContent value="grouping" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="space-y-4 pr-4">
|
||||
<div className="flex items-center justify-between rounded-lg border p-4">
|
||||
<div>
|
||||
<Label className="text-sm font-medium">그룹핑 사용</Label>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
동일한 값을 가진 행들을 하나로 그룹화합니다
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={grouping.enabled}
|
||||
onCheckedChange={(checked) =>
|
||||
setGrouping({ ...grouping, enabled: checked })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{grouping.enabled && (
|
||||
<div className="space-y-3 p-4 border rounded-lg bg-muted/30">
|
||||
<div>
|
||||
<Label className="text-sm">그룹 기준 컬럼</Label>
|
||||
<SearchableColumnSelect
|
||||
tableName={tableName}
|
||||
value={grouping.groupByColumn}
|
||||
onValueChange={(value) =>
|
||||
setGrouping({ ...grouping, groupByColumn: value })
|
||||
}
|
||||
placeholder="그룹 기준 컬럼 선택"
|
||||
className="mt-1"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
예: item_id로 그룹핑하면 같은 품목의 데이터를 하나로 표시합니다
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
|
||||
{/* 검색 탭 */}
|
||||
<TabsContent value="search" className="mt-4 flex min-h-0 flex-1 flex-col overflow-hidden data-[state=inactive]:hidden">
|
||||
<ScrollArea className="min-h-0 flex-1">
|
||||
<div className="space-y-4 pr-4">
|
||||
<div className="flex items-center justify-between rounded-lg border p-4">
|
||||
<div>
|
||||
<Label className="text-sm font-medium">검색 표시</Label>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
검색 입력창을 표시합니다
|
||||
</p>
|
||||
</div>
|
||||
<Switch checked={showSearch} onCheckedChange={setShowSearch} />
|
||||
</div>
|
||||
|
||||
{showSearch && (
|
||||
<div className="space-y-3 p-4 border rounded-lg bg-muted/30">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm">검색 대상 컬럼</Label>
|
||||
<Button size="sm" variant="ghost" onClick={handleAddSearchColumn}>
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{searchColumns.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground text-sm border rounded-md">
|
||||
검색할 컬럼을 추가하세요
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{searchColumns.map((searchCol, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
<SearchableColumnSelect
|
||||
tableName={tableName}
|
||||
value={searchCol.columnName}
|
||||
onValueChange={(value) => handleUpdateSearchColumn(index, value)}
|
||||
placeholder="검색 컬럼 선택"
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-9 w-9 p-0 text-destructive"
|
||||
onClick={() => handleRemoveSearchColumn(index)}
|
||||
>
|
||||
×
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<DialogFooter className="mt-4 shrink-0">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave}>저장</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 컬럼 세부설정 모달 */}
|
||||
<Dialog open={detailModalOpen} onOpenChange={setDetailModalOpen}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>컬럼 세부설정</DialogTitle>
|
||||
<DialogDescription>
|
||||
{editingColumn?.label || editingColumn?.name || "컬럼"}의 표시 설정을 변경합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{editingColumn && (
|
||||
<div className="space-y-4">
|
||||
{/* 기본 설정 */}
|
||||
<div className="space-y-3 p-3 border rounded-lg">
|
||||
<h4 className="text-sm font-medium">기본 설정</h4>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">컬럼 선택</Label>
|
||||
<SearchableColumnSelect
|
||||
tableName={tableName}
|
||||
value={editingColumn.name}
|
||||
onValueChange={(value) => {
|
||||
const colInfo = columns.find((c) => c.column_name === value);
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
name: value,
|
||||
label: colInfo?.column_comment || editingColumn.label,
|
||||
});
|
||||
}}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">표시 라벨</Label>
|
||||
<Input
|
||||
value={editingColumn.label || ""}
|
||||
onChange={(e) =>
|
||||
setEditingColumn({ ...editingColumn, label: e.target.value })
|
||||
}
|
||||
placeholder="라벨명 (미입력 시 컬럼명 사용)"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">표시 위치</Label>
|
||||
<Select
|
||||
value={editingColumn.displayRow || "name"}
|
||||
onValueChange={(value: "name" | "info") =>
|
||||
setEditingColumn({ ...editingColumn, displayRow: value })
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="name">이름 행 (Name Row)</SelectItem>
|
||||
<SelectItem value="info">정보 행 (Info Row)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">컬럼 너비 (px)</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={editingColumn.width || ""}
|
||||
onChange={(e) =>
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
width: e.target.value ? parseInt(e.target.value) : undefined,
|
||||
})
|
||||
}
|
||||
placeholder="자동"
|
||||
className="mt-1 h-9"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 그룹핑/집계 설정 (그룹핑 활성화 시만) */}
|
||||
{grouping.enabled && (
|
||||
<div className="space-y-3 p-3 border rounded-lg">
|
||||
<h4 className="text-sm font-medium">그룹핑/집계 설정</h4>
|
||||
|
||||
<div>
|
||||
<Label className="text-xs">표시 방식</Label>
|
||||
<Select
|
||||
value={editingColumn.displayConfig?.displayType || "text"}
|
||||
onValueChange={(value: "text" | "badge") =>
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
displayConfig: {
|
||||
...editingColumn.displayConfig,
|
||||
displayType: value,
|
||||
} as ColumnDisplayConfig,
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="text">텍스트 (기본)</SelectItem>
|
||||
<SelectItem value="badge">배지 (태그 형태)</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
배지는 여러 값을 태그 형태로 나란히 표시합니다
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label className="text-xs">집계 사용</Label>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
그룹핑 시 값을 집계합니다
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={editingColumn.displayConfig?.aggregate?.enabled || false}
|
||||
onCheckedChange={(checked) =>
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
displayConfig: {
|
||||
displayType: editingColumn.displayConfig?.displayType || "text",
|
||||
aggregate: {
|
||||
enabled: checked,
|
||||
function: editingColumn.displayConfig?.aggregate?.function || "DISTINCT",
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{editingColumn.displayConfig?.aggregate?.enabled && (
|
||||
<div>
|
||||
<Label className="text-xs">집계 방식</Label>
|
||||
<Select
|
||||
value={editingColumn.displayConfig?.aggregate?.function || "DISTINCT"}
|
||||
onValueChange={(value: "DISTINCT" | "COUNT") =>
|
||||
setEditingColumn({
|
||||
...editingColumn,
|
||||
displayConfig: {
|
||||
displayType: editingColumn.displayConfig?.displayType || "text",
|
||||
aggregate: {
|
||||
enabled: true,
|
||||
function: value,
|
||||
},
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="DISTINCT">중복제거 (고유값만)</SelectItem>
|
||||
<SelectItem value="COUNT">개수</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 엔티티 참조 설정 (entity 타입 컬럼일 때만 표시) */}
|
||||
{(() => {
|
||||
const entityInfo = getEditingColumnEntityInfo();
|
||||
if (!entityInfo) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-3 p-3 border rounded-lg">
|
||||
<h4 className="text-sm font-medium">엔티티 표시 컬럼</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
참조 테이블: <span className="font-medium">{entityInfo.referenceTable}</span>
|
||||
</p>
|
||||
|
||||
{entityInfo.isLoading ? (
|
||||
<div className="flex items-center justify-center py-4">
|
||||
<span className="text-sm text-muted-foreground">컬럼 정보 로딩 중...</span>
|
||||
</div>
|
||||
) : entityInfo.referenceColumns.length === 0 ? (
|
||||
<div className="text-center py-4 text-muted-foreground text-sm border rounded-md">
|
||||
참조 테이블의 컬럼 정보를 불러올 수 없습니다
|
||||
</div>
|
||||
) : (
|
||||
<ScrollArea className="max-h-40">
|
||||
<div className="space-y-2 pr-4">
|
||||
{entityInfo.referenceColumns.map((col) => {
|
||||
const isSelected = (editingColumn.entityReference?.displayColumns || []).includes(col.columnName);
|
||||
return (
|
||||
<div
|
||||
key={col.columnName}
|
||||
className={cn(
|
||||
"flex items-center gap-2 p-2 rounded-md cursor-pointer hover:bg-muted/50 transition-colors",
|
||||
isSelected && "bg-muted"
|
||||
)}
|
||||
onClick={() => toggleEntityDisplayColumn(col.columnName)}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={() => toggleEntityDisplayColumn(col.columnName)}
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-sm font-medium truncate block">
|
||||
{col.displayName || col.columnName}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground truncate block">
|
||||
{col.columnName} ({col.dataType})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
)}
|
||||
|
||||
{(editingColumn.entityReference?.displayColumns || []).length > 0 && (
|
||||
<div className="mt-2 pt-2 border-t">
|
||||
<p className="text-xs text-muted-foreground mb-1">
|
||||
선택됨: {(editingColumn.entityReference?.displayColumns || []).length}개
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{(editingColumn.entityReference?.displayColumns || []).map((colName) => {
|
||||
const colInfo = entityInfo.referenceColumns.find(c => c.columnName === colName);
|
||||
return (
|
||||
<span
|
||||
key={colName}
|
||||
className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-primary/10 text-primary"
|
||||
>
|
||||
{colInfo?.displayName || colName}
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDetailModalOpen(false)}>
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSaveDetailSettings}>적용</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ColumnConfigModal;
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,423 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Plus, X, Settings, ArrowRight } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import type { DataTransferField } from "./types";
|
||||
|
||||
interface ColumnInfo {
|
||||
column_name: string;
|
||||
column_comment?: string;
|
||||
data_type?: string;
|
||||
}
|
||||
|
||||
interface DataTransferConfigModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
dataTransferFields: DataTransferField[];
|
||||
onChange: (fields: DataTransferField[]) => void;
|
||||
leftColumns: ColumnInfo[];
|
||||
rightColumns: ColumnInfo[];
|
||||
leftTableName?: string;
|
||||
rightTableName?: string;
|
||||
}
|
||||
|
||||
// 컬럼 선택 컴포넌트
|
||||
const ColumnSelect: React.FC<{
|
||||
columns: ColumnInfo[];
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
placeholder: string;
|
||||
disabled?: boolean;
|
||||
}> = ({ columns, value, onValueChange, placeholder, disabled = false }) => {
|
||||
return (
|
||||
<Select value={value} onValueChange={onValueChange} disabled={disabled}>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder={placeholder} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{columns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_comment || col.column_name}
|
||||
<span className="text-muted-foreground ml-1 text-[10px]">({col.column_name})</span>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
|
||||
// 개별 필드 편집 모달
|
||||
const FieldEditModal: React.FC<{
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
field: DataTransferField | null;
|
||||
onSave: (field: DataTransferField) => void;
|
||||
leftColumns: ColumnInfo[];
|
||||
rightColumns: ColumnInfo[];
|
||||
leftTableName?: string;
|
||||
rightTableName?: string;
|
||||
isNew?: boolean;
|
||||
}> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
field,
|
||||
onSave,
|
||||
leftColumns,
|
||||
rightColumns,
|
||||
leftTableName,
|
||||
rightTableName,
|
||||
isNew = false,
|
||||
}) => {
|
||||
const [editingField, setEditingField] = useState<DataTransferField>({
|
||||
id: "",
|
||||
panel: "left",
|
||||
sourceColumn: "",
|
||||
targetColumn: "",
|
||||
label: "",
|
||||
description: "",
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (field) {
|
||||
setEditingField({ ...field });
|
||||
} else {
|
||||
setEditingField({
|
||||
id: `field_${Date.now()}`,
|
||||
panel: "left",
|
||||
sourceColumn: "",
|
||||
targetColumn: "",
|
||||
label: "",
|
||||
description: "",
|
||||
});
|
||||
}
|
||||
}, [field, open]);
|
||||
|
||||
const handleSave = () => {
|
||||
if (!editingField.sourceColumn || !editingField.targetColumn) {
|
||||
return;
|
||||
}
|
||||
onSave(editingField);
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const currentColumns = editingField.panel === "left" ? leftColumns : rightColumns;
|
||||
const currentTableName = editingField.panel === "left" ? leftTableName : rightTableName;
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[450px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-base">{isNew ? "데이터 전달 필드 추가" : "데이터 전달 필드 편집"}</DialogTitle>
|
||||
<DialogDescription className="text-xs">
|
||||
선택한 항목의 데이터를 모달에 자동으로 전달합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-2">
|
||||
{/* 패널 선택 */}
|
||||
<div>
|
||||
<Label className="text-xs">소스 패널</Label>
|
||||
<Select
|
||||
value={editingField.panel}
|
||||
onValueChange={(value: "left" | "right") => {
|
||||
setEditingField({ ...editingField, panel: value, sourceColumn: "" });
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="mt-1 h-9">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="left">
|
||||
좌측 패널 {leftTableName && <span className="text-muted-foreground">({leftTableName})</span>}
|
||||
</SelectItem>
|
||||
<SelectItem value="right">
|
||||
우측 패널 {rightTableName && <span className="text-muted-foreground">({rightTableName})</span>}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-muted-foreground mt-1 text-[10px]">데이터를 가져올 패널을 선택합니다.</p>
|
||||
</div>
|
||||
|
||||
{/* 소스 컬럼 */}
|
||||
<div>
|
||||
<Label className="text-xs">
|
||||
소스 컬럼 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<div className="mt-1">
|
||||
<ColumnSelect
|
||||
columns={currentColumns}
|
||||
value={editingField.sourceColumn}
|
||||
onValueChange={(value) => {
|
||||
const col = currentColumns.find((c) => c.column_name === value);
|
||||
setEditingField({
|
||||
...editingField,
|
||||
sourceColumn: value,
|
||||
// 타겟 컬럼이 비어있으면 소스와 동일하게 설정
|
||||
targetColumn: editingField.targetColumn || value,
|
||||
// 라벨이 비어있으면 컬럼 코멘트 사용
|
||||
label: editingField.label || col?.column_comment || "",
|
||||
});
|
||||
}}
|
||||
placeholder="컬럼 선택..."
|
||||
disabled={currentColumns.length === 0}
|
||||
/>
|
||||
</div>
|
||||
{currentColumns.length === 0 && (
|
||||
<p className="text-destructive mt-1 text-[10px]">
|
||||
{currentTableName ? "테이블에 컬럼이 없습니다." : "테이블을 먼저 선택해주세요."}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 타겟 컬럼 */}
|
||||
<div>
|
||||
<Label className="text-xs">
|
||||
타겟 컬럼 (모달 필드명) <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
value={editingField.targetColumn}
|
||||
onChange={(e) => setEditingField({ ...editingField, targetColumn: e.target.value })}
|
||||
placeholder="모달에서 사용할 필드명"
|
||||
className="mt-1 h-9 text-sm"
|
||||
/>
|
||||
<p className="text-muted-foreground mt-1 text-[10px]">모달 폼에서 이 값을 받을 필드명입니다.</p>
|
||||
</div>
|
||||
|
||||
{/* 라벨 (선택) */}
|
||||
<div>
|
||||
<Label className="text-xs">표시 라벨 (선택)</Label>
|
||||
<Input
|
||||
value={editingField.label || ""}
|
||||
onChange={(e) => setEditingField({ ...editingField, label: e.target.value })}
|
||||
placeholder="표시용 이름"
|
||||
className="mt-1 h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 설명 (선택) */}
|
||||
<div>
|
||||
<Label className="text-xs">설명 (선택)</Label>
|
||||
<Input
|
||||
value={editingField.description || ""}
|
||||
onChange={(e) => setEditingField({ ...editingField, description: e.target.value })}
|
||||
placeholder="이 필드에 대한 설명"
|
||||
className="mt-1 h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 미리보기 */}
|
||||
{editingField.sourceColumn && editingField.targetColumn && (
|
||||
<div className="bg-muted/50 rounded-md p-3">
|
||||
<p className="mb-2 text-xs font-medium">미리보기</p>
|
||||
<div className="flex items-center gap-2 text-xs">
|
||||
<Badge variant="outline" className="text-[10px]">
|
||||
{editingField.panel === "left" ? "좌측" : "우측"}
|
||||
</Badge>
|
||||
<span className="font-mono">{editingField.sourceColumn}</span>
|
||||
<ArrowRight className="h-3 w-3" />
|
||||
<span className="font-mono">{editingField.targetColumn}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
|
||||
취소
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleSave}
|
||||
disabled={!editingField.sourceColumn || !editingField.targetColumn}
|
||||
className="h-9 text-sm"
|
||||
>
|
||||
{isNew ? "추가" : "저장"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
// 메인 모달 컴포넌트
|
||||
const DataTransferConfigModal: React.FC<DataTransferConfigModalProps> = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
dataTransferFields,
|
||||
onChange,
|
||||
leftColumns,
|
||||
rightColumns,
|
||||
leftTableName,
|
||||
rightTableName,
|
||||
}) => {
|
||||
const [fields, setFields] = useState<DataTransferField[]>([]);
|
||||
const [editModalOpen, setEditModalOpen] = useState(false);
|
||||
const [editingField, setEditingField] = useState<DataTransferField | null>(null);
|
||||
const [isNewField, setIsNewField] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
// 기존 필드에 panel이 없으면 left로 기본 설정 (하위 호환성)
|
||||
const normalizedFields = (dataTransferFields || []).map((field, idx) => ({
|
||||
...field,
|
||||
id: field.id || `field_${idx}`,
|
||||
panel: field.panel || ("left" as const),
|
||||
}));
|
||||
setFields(normalizedFields);
|
||||
}
|
||||
}, [open, dataTransferFields]);
|
||||
|
||||
const handleAddField = () => {
|
||||
setEditingField(null);
|
||||
setIsNewField(true);
|
||||
setEditModalOpen(true);
|
||||
};
|
||||
|
||||
const handleEditField = (field: DataTransferField) => {
|
||||
setEditingField(field);
|
||||
setIsNewField(false);
|
||||
setEditModalOpen(true);
|
||||
};
|
||||
|
||||
const handleSaveField = (field: DataTransferField) => {
|
||||
if (isNewField) {
|
||||
setFields([...fields, field]);
|
||||
} else {
|
||||
setFields(fields.map((f) => (f.id === field.id ? field : f)));
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveField = (id: string) => {
|
||||
setFields(fields.filter((f) => f.id !== id));
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
onChange(fields);
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const getColumnLabel = (panel: "left" | "right", columnName: string) => {
|
||||
const columns = panel === "left" ? leftColumns : rightColumns;
|
||||
const col = columns.find((c) => c.column_name === columnName);
|
||||
return col?.column_comment || columnName;
|
||||
};
|
||||
|
||||
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">데이터 전달 설정</DialogTitle>
|
||||
<DialogDescription className="text-xs">
|
||||
버튼 클릭 시 모달에 자동으로 전달할 데이터를 설정합니다.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="min-h-0 flex-1 overflow-hidden">
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<span className="text-muted-foreground text-xs">전달 필드 ({fields.length}개)</span>
|
||||
<Button size="sm" variant="outline" className="h-7 text-xs" onClick={handleAddField}>
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
추가
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="h-[300px]">
|
||||
<div className="space-y-2 pr-2">
|
||||
{fields.length === 0 ? (
|
||||
<div className="text-muted-foreground rounded-md border py-8 text-center text-xs">
|
||||
<p className="mb-2">전달할 필드가 없습니다</p>
|
||||
<Button size="sm" variant="ghost" className="h-7 text-xs" onClick={handleAddField}>
|
||||
<Plus className="mr-1 h-3 w-3" />
|
||||
필드 추가
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
fields.map((field) => (
|
||||
<div
|
||||
key={field.id}
|
||||
className="hover:bg-muted/50 flex items-center gap-2 rounded-md border p-2 transition-colors"
|
||||
>
|
||||
<Badge variant={field.panel === "left" ? "default" : "secondary"} className="shrink-0 text-[10px]">
|
||||
{field.panel === "left" ? "좌측" : "우측"}
|
||||
</Badge>
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<span className="font-mono">{getColumnLabel(field.panel, field.sourceColumn)}</span>
|
||||
<ArrowRight className="text-muted-foreground h-3 w-3 shrink-0" />
|
||||
<span className="font-mono truncate">{field.targetColumn}</span>
|
||||
</div>
|
||||
{field.description && (
|
||||
<p className="text-muted-foreground mt-0.5 truncate text-[10px]">{field.description}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-6 w-6 p-0"
|
||||
onClick={() => handleEditField(field)}
|
||||
>
|
||||
<Settings className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="text-destructive hover:text-destructive h-6 w-6 p-0"
|
||||
onClick={() => handleRemoveField(field.id || "")}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/50 text-muted-foreground rounded-md p-2 text-[10px]">
|
||||
<p>버튼별로 개별 데이터 전달 설정이 있으면 해당 설정이 우선 적용됩니다.</p>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)} className="h-9 text-sm">
|
||||
취소
|
||||
</Button>
|
||||
<Button onClick={handleSave} className="h-9 text-sm">
|
||||
저장
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* 필드 편집 모달 */}
|
||||
<FieldEditModal
|
||||
open={editModalOpen}
|
||||
onOpenChange={setEditModalOpen}
|
||||
field={editingField}
|
||||
onSave={handleSaveField}
|
||||
leftColumns={leftColumns}
|
||||
rightColumns={rightColumns}
|
||||
leftTableName={leftTableName}
|
||||
rightTableName={rightTableName}
|
||||
isNew={isNewField}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DataTransferConfigModal;
|
||||
|
|
@ -102,3 +102,4 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
|
|
@ -42,3 +42,4 @@ SplitPanelLayout2Renderer.registerSelf();
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,164 @@
|
|||
"use client";
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { Check, ChevronsUpDown, Search } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { apiClient } from "@/lib/api/client";
|
||||
|
||||
export interface ColumnInfo {
|
||||
column_name: string;
|
||||
data_type: string;
|
||||
column_comment?: string;
|
||||
}
|
||||
|
||||
interface SearchableColumnSelectProps {
|
||||
tableName: string;
|
||||
value: string;
|
||||
onValueChange: (value: string) => void;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
excludeColumns?: string[]; // 이미 선택된 컬럼 제외
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const SearchableColumnSelect: React.FC<SearchableColumnSelectProps> = ({
|
||||
tableName,
|
||||
value,
|
||||
onValueChange,
|
||||
placeholder = "컬럼 선택",
|
||||
disabled = false,
|
||||
excludeColumns = [],
|
||||
className,
|
||||
}) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [columns, setColumns] = useState<ColumnInfo[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
// 컬럼 목록 로드
|
||||
const loadColumns = useCallback(async () => {
|
||||
if (!tableName) {
|
||||
setColumns([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/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;
|
||||
} else if (Array.isArray(response.data)) {
|
||||
columnList = response.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 ?? "",
|
||||
}));
|
||||
|
||||
setColumns(transformedColumns);
|
||||
} catch (error) {
|
||||
console.error("컬럼 목록 로드 실패:", error);
|
||||
setColumns([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [tableName]);
|
||||
|
||||
useEffect(() => {
|
||||
loadColumns();
|
||||
}, [loadColumns]);
|
||||
|
||||
// 선택된 컬럼 정보 가져오기
|
||||
const selectedColumn = columns.find((col) => col.column_name === value);
|
||||
const displayValue = selectedColumn
|
||||
? selectedColumn.column_comment || selectedColumn.column_name
|
||||
: value || "";
|
||||
|
||||
// 필터링된 컬럼 목록 (이미 선택된 컬럼 제외)
|
||||
const filteredColumns = columns.filter(
|
||||
(col) => !excludeColumns.includes(col.column_name) || col.column_name === value
|
||||
);
|
||||
|
||||
return (
|
||||
<Popover open={open} onOpenChange={setOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={open}
|
||||
disabled={disabled || loading || !tableName}
|
||||
className={cn("w-full justify-between h-9 text-sm", className)}
|
||||
>
|
||||
{loading ? (
|
||||
"로딩 중..."
|
||||
) : !tableName ? (
|
||||
"테이블을 먼저 선택하세요"
|
||||
) : (
|
||||
<span className="truncate">
|
||||
{displayValue || placeholder}
|
||||
</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 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-9" />
|
||||
<CommandList>
|
||||
<CommandEmpty>
|
||||
{filteredColumns.length === 0 ? "선택 가능한 컬럼이 없습니다" : "검색 결과가 없습니다"}
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{filteredColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.column_name}
|
||||
value={`${col.column_name} ${col.column_comment || ""}`}
|
||||
onSelect={() => {
|
||||
onValueChange(col.column_name);
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4 shrink-0",
|
||||
value === col.column_name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col min-w-0">
|
||||
<span className="truncate font-medium">
|
||||
{col.column_comment || col.column_name}
|
||||
</span>
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
{col.column_name} ({col.data_type})
|
||||
</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
export default SearchableColumnSelect;
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { useSortable } from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { GripVertical, Settings, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { cn } from "@/lib/utils";
|
||||
import type { ColumnConfig } from "../types";
|
||||
|
||||
interface SortableColumnItemProps {
|
||||
id: string;
|
||||
column: ColumnConfig;
|
||||
index: number;
|
||||
onSettingsClick: () => void;
|
||||
onRemove: () => void;
|
||||
showGroupingSettings?: boolean;
|
||||
}
|
||||
|
||||
export const SortableColumnItem: React.FC<SortableColumnItemProps> = ({
|
||||
id,
|
||||
column,
|
||||
index,
|
||||
onSettingsClick,
|
||||
onRemove,
|
||||
showGroupingSettings = false,
|
||||
}) => {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id });
|
||||
|
||||
const style = {
|
||||
transform: CSS.Transform.toString(transform),
|
||||
transition,
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={cn(
|
||||
"flex items-center gap-2 rounded-md border bg-card p-2",
|
||||
isDragging && "opacity-50 shadow-lg"
|
||||
)}
|
||||
>
|
||||
{/* 드래그 핸들 */}
|
||||
<div
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="cursor-grab touch-none text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<GripVertical className="h-4 w-4" />
|
||||
</div>
|
||||
|
||||
{/* 컬럼 정보 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium truncate">
|
||||
{column.label || column.name || `컬럼 ${index + 1}`}
|
||||
</span>
|
||||
{column.name && column.label && (
|
||||
<span className="text-xs text-muted-foreground truncate">
|
||||
({column.name})
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 설정 요약 뱃지 */}
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{column.displayRow && (
|
||||
<Badge variant="outline" className="text-[10px] h-4">
|
||||
{column.displayRow === "name" ? "이름행" : "정보행"}
|
||||
</Badge>
|
||||
)}
|
||||
{showGroupingSettings && column.displayConfig?.displayType === "badge" && (
|
||||
<Badge variant="secondary" className="text-[10px] h-4">
|
||||
배지
|
||||
</Badge>
|
||||
)}
|
||||
{showGroupingSettings && column.displayConfig?.aggregate?.enabled && (
|
||||
<Badge variant="secondary" className="text-[10px] h-4">
|
||||
{column.displayConfig.aggregate.function === "DISTINCT" ? "중복제거" : "개수"}
|
||||
</Badge>
|
||||
)}
|
||||
{column.sourceTable && (
|
||||
<Badge variant="outline" className="text-[10px] h-4">
|
||||
{column.sourceTable}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 액션 버튼들 */}
|
||||
<div className="flex items-center gap-1 shrink-0">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 p-0"
|
||||
onClick={onSettingsClick}
|
||||
title="세부설정"
|
||||
>
|
||||
<Settings className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
|
||||
onClick={onRemove}
|
||||
title="삭제"
|
||||
>
|
||||
<X className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SortableColumnItem;
|
||||
|
||||
|
||||
|
|
@ -37,5 +37,13 @@ export type {
|
|||
JoinConfig,
|
||||
DataTransferField,
|
||||
ColumnConfig,
|
||||
ActionButtonConfig,
|
||||
ValueSourceConfig,
|
||||
EntityReferenceConfig,
|
||||
ModalParamMapping,
|
||||
} from "./types";
|
||||
|
||||
// 모달 컴포넌트 내보내기 (별도 사용 필요시)
|
||||
export { ColumnConfigModal } from "./ColumnConfigModal";
|
||||
export { ActionButtonConfigModal } from "./ActionButtonConfigModal";
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,65 @@
|
|||
* 마스터-디테일 패턴의 좌우 분할 레이아웃 (개선 버전)
|
||||
*/
|
||||
|
||||
// =============================================================================
|
||||
// 값 소스 및 연동 설정
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* 값 소스 설정 (화면 내 필드/폼에서 값 가져오기)
|
||||
*/
|
||||
export interface ValueSourceConfig {
|
||||
type: "none" | "field" | "dataForm" | "component"; // 소스 유형
|
||||
fieldId?: string; // 필드 컴포넌트 ID
|
||||
formId?: string; // 데이터폼 ID
|
||||
formFieldName?: string; // 데이터폼 내 필드명
|
||||
componentId?: string; // 다른 컴포넌트 ID
|
||||
componentColumn?: string; // 컴포넌트에서 참조할 컬럼
|
||||
}
|
||||
|
||||
/**
|
||||
* 엔티티 참조 설정 (엔티티에서 표시할 값 선택)
|
||||
*/
|
||||
export interface EntityReferenceConfig {
|
||||
entityId?: string; // 연결된 엔티티 ID
|
||||
displayColumns?: string[]; // 표시할 엔티티 컬럼들 (체크박스 선택)
|
||||
primaryDisplayColumn?: string; // 주 표시 컬럼
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// 컬럼 표시 설정
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* 컬럼별 표시 설정 (그룹핑 시 사용)
|
||||
*/
|
||||
export interface ColumnDisplayConfig {
|
||||
displayType: "text" | "badge"; // 표시 방식 (텍스트 또는 배지)
|
||||
aggregate?: {
|
||||
enabled: boolean; // 집계 사용 여부
|
||||
function: "DISTINCT" | "COUNT"; // 집계 방식 (중복제거 또는 개수)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 그룹핑 설정 (왼쪽 패널용)
|
||||
*/
|
||||
export interface GroupingConfig {
|
||||
enabled: boolean; // 그룹핑 사용 여부
|
||||
groupByColumn: string; // 그룹 기준 컬럼 (예: item_id)
|
||||
}
|
||||
|
||||
/**
|
||||
* 탭 설정
|
||||
*/
|
||||
export interface TabConfig {
|
||||
enabled: boolean; // 탭 사용 여부
|
||||
mode?: "auto" | "manual"; // 하위 호환성용 (실제로는 manual만 사용)
|
||||
tabSourceColumn?: string; // 탭 생성 기준 컬럼
|
||||
showCount?: boolean; // 탭에 항목 개수 표시 여부
|
||||
defaultTab?: string; // 기본 선택 탭 (값 또는 ID)
|
||||
}
|
||||
|
||||
/**
|
||||
* 컬럼 설정
|
||||
*/
|
||||
|
|
@ -13,6 +72,9 @@ export interface ColumnConfig {
|
|||
displayRow?: "name" | "info"; // 표시 위치 (name: 이름 행, info: 정보 행)
|
||||
width?: number; // 너비 (px)
|
||||
bold?: boolean; // 굵게 표시
|
||||
displayConfig?: ColumnDisplayConfig; // 컬럼별 표시 설정 (그룹핑 시)
|
||||
entityReference?: EntityReferenceConfig; // 엔티티 참조 설정
|
||||
valueSource?: ValueSourceConfig; // 값 소스 설정 (화면 내 연동)
|
||||
format?: {
|
||||
type?: "text" | "number" | "currency" | "date";
|
||||
thousandSeparator?: boolean;
|
||||
|
|
@ -23,27 +85,58 @@ export interface ColumnConfig {
|
|||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 모달 파라미터 매핑 설정
|
||||
*/
|
||||
export interface ModalParamMapping {
|
||||
sourceColumn: string; // 선택된 항목에서 가져올 컬럼
|
||||
targetParam: string; // 모달에 전달할 파라미터명
|
||||
}
|
||||
|
||||
/**
|
||||
* 액션 버튼 설정
|
||||
*/
|
||||
export interface ActionButtonConfig {
|
||||
id: string; // 고유 ID
|
||||
label: string; // 버튼 라벨
|
||||
variant?: "default" | "outline" | "destructive" | "ghost"; // 버튼 스타일
|
||||
variant?: "default" | "secondary" | "outline" | "destructive" | "ghost"; // 버튼 스타일
|
||||
icon?: string; // lucide 아이콘명 (예: "Plus", "Edit", "Trash2")
|
||||
showCondition?: "always" | "selected" | "notSelected"; // 표시 조건
|
||||
action?: "add" | "edit" | "delete" | "bulk-delete" | "api" | "custom"; // 버튼 동작 유형
|
||||
|
||||
// 모달 관련
|
||||
modalScreenId?: number; // 연결할 모달 화면 ID
|
||||
action?: "add" | "edit" | "delete" | "bulk-delete" | "custom"; // 버튼 동작 유형
|
||||
modalParams?: ModalParamMapping[]; // 모달에 전달할 파라미터 매핑
|
||||
|
||||
// API 호출 관련
|
||||
apiEndpoint?: string; // API 엔드포인트
|
||||
apiMethod?: "GET" | "POST" | "PUT" | "DELETE"; // HTTP 메서드
|
||||
confirmMessage?: string; // 확인 메시지 (삭제 등)
|
||||
|
||||
// 커스텀 액션
|
||||
customActionId?: string; // 커스텀 액션 식별자
|
||||
}
|
||||
|
||||
/**
|
||||
* 데이터 전달 필드 설정
|
||||
*/
|
||||
export interface DataTransferField {
|
||||
sourceColumn: string; // 좌측 패널의 컬럼명
|
||||
sourceColumn: string; // 소스 패널의 컬럼명
|
||||
targetColumn: string; // 모달로 전달할 컬럼명
|
||||
label?: string; // 표시용 라벨
|
||||
}
|
||||
|
||||
/**
|
||||
* 버튼별 데이터 전달 설정
|
||||
* 특정 패널의 특정 버튼에 어떤 데이터를 전달할지 설정
|
||||
*/
|
||||
export interface ButtonDataTransferConfig {
|
||||
id: string; // 고유 ID
|
||||
targetPanel: "left" | "right"; // 대상 패널
|
||||
targetButtonId: string; // 대상 버튼 ID
|
||||
fields: DataTransferField[]; // 전달할 필드 목록
|
||||
}
|
||||
|
||||
/**
|
||||
* 검색 컬럼 설정
|
||||
*/
|
||||
|
|
@ -62,15 +155,27 @@ export interface LeftPanelConfig {
|
|||
searchColumn?: string; // 검색 대상 컬럼 (단일, 하위 호환성)
|
||||
searchColumns?: SearchColumnConfig[]; // 검색 대상 컬럼들 (복수)
|
||||
showSearch?: boolean; // 검색 표시 여부
|
||||
showAddButton?: boolean; // 추가 버튼 표시
|
||||
addButtonLabel?: string; // 추가 버튼 라벨
|
||||
addModalScreenId?: number; // 추가 모달 화면 ID
|
||||
showAddButton?: boolean; // 추가 버튼 표시 (하위 호환성)
|
||||
addButtonLabel?: string; // 추가 버튼 라벨 (하위 호환성)
|
||||
addModalScreenId?: number; // 추가 모달 화면 ID (하위 호환성)
|
||||
showEditButton?: boolean; // 수정 버튼 표시
|
||||
showDeleteButton?: boolean; // 삭제 버튼 표시
|
||||
editModalScreenId?: number; // 수정 모달 화면 ID
|
||||
actionButtons?: ActionButtonConfig[]; // 복수 액션 버튼 배열
|
||||
displayMode?: "card" | "table"; // 표시 모드 (card: 카드형, table: 테이블형)
|
||||
primaryKeyColumn?: string; // 기본키 컬럼명 (선택용, 기본: id)
|
||||
// 계층 구조 설정
|
||||
hierarchyConfig?: {
|
||||
enabled: boolean;
|
||||
parentColumn: string; // 부모 참조 컬럼 (예: parent_dept_code)
|
||||
idColumn: string; // ID 컬럼 (예: dept_code)
|
||||
};
|
||||
// 그룹핑 설정
|
||||
grouping?: GroupingConfig;
|
||||
// 탭 설정
|
||||
tabConfig?: TabConfig;
|
||||
// 추가 조인 테이블 설정 (다른 테이블 참조하여 컬럼 추가 표시)
|
||||
joinTables?: JoinTableConfig[];
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -106,6 +211,22 @@ export interface RightPanelConfig {
|
|||
* - 결과: 부서별 사원 목록에 이메일, 전화번호 등 개인정보 함께 표시
|
||||
*/
|
||||
joinTables?: JoinTableConfig[];
|
||||
|
||||
/**
|
||||
* 수정 시 메인 테이블 데이터 조회 설정
|
||||
* 우측 패널이 서브 테이블(예: user_dept)이고, 수정 모달이 메인 테이블(예: user_info) 기준일 때
|
||||
* 수정 버튼 클릭 시 메인 테이블 데이터를 함께 조회하여 모달에 전달합니다.
|
||||
*/
|
||||
mainTableForEdit?: {
|
||||
tableName: string; // 메인 테이블명 (예: user_info)
|
||||
linkColumn: {
|
||||
mainColumn: string; // 메인 테이블의 연결 컬럼 (예: user_id)
|
||||
subColumn: string; // 서브 테이블의 연결 컬럼 (예: user_id)
|
||||
};
|
||||
};
|
||||
|
||||
// 탭 설정
|
||||
tabConfig?: TabConfig;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -157,9 +278,12 @@ export interface SplitPanelLayout2Config {
|
|||
// 조인 설정
|
||||
joinConfig: JoinConfig;
|
||||
|
||||
// 데이터 전달 설정 (모달로 전달할 필드)
|
||||
// 데이터 전달 설정 (하위 호환성 - 기본 설정)
|
||||
dataTransferFields?: DataTransferField[];
|
||||
|
||||
// 버튼별 데이터 전달 설정 (신규)
|
||||
buttonDataTransfers?: ButtonDataTransferConfig[];
|
||||
|
||||
// 레이아웃 설정
|
||||
splitRatio?: number; // 좌우 비율 (0-100, 기본 30)
|
||||
resizable?: boolean; // 크기 조절 가능 여부
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -102,7 +102,9 @@ const CascadingSelectField: React.FC<CascadingSelectFieldProps> = ({
|
|||
: config.noOptionsMessage || "선택 가능한 항목이 없습니다"}
|
||||
</div>
|
||||
) : (
|
||||
options.map((option) => (
|
||||
options
|
||||
.filter((option) => option.value && option.value !== "")
|
||||
.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
|
|
@ -212,16 +214,24 @@ export function UniversalFormModalComponent({
|
|||
// 마지막으로 초기화된 데이터의 ID를 추적 (수정 모달에서 다른 항목 선택 시 재초기화 필요)
|
||||
const lastInitializedId = useRef<string | undefined>(undefined);
|
||||
|
||||
// 초기화 - 최초 마운트 시 또는 initialData의 ID가 변경되었을 때 실행
|
||||
// 초기화 - 최초 마운트 시 또는 initialData가 변경되었을 때 실행
|
||||
useEffect(() => {
|
||||
// initialData에서 ID 값 추출 (id, ID, objid 등)
|
||||
const currentId = initialData?.id || initialData?.ID || initialData?.objid;
|
||||
const currentIdString = currentId !== undefined ? String(currentId) : undefined;
|
||||
|
||||
// 이미 초기화되었고, ID가 동일하면 스킵
|
||||
// 생성 모드에서 부모로부터 전달받은 데이터 해시 (ID가 없을 때만)
|
||||
const createModeDataHash = !currentIdString && initialData && Object.keys(initialData).length > 0
|
||||
? JSON.stringify(initialData)
|
||||
: undefined;
|
||||
|
||||
// 이미 초기화되었고, ID가 동일하고, 생성 모드 데이터도 동일하면 스킵
|
||||
if (hasInitialized.current && lastInitializedId.current === currentIdString) {
|
||||
// 생성 모드에서 데이터가 새로 전달된 경우는 재초기화 필요
|
||||
if (!createModeDataHash || capturedInitialData.current) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// 🆕 수정 모드: initialData에 데이터가 있으면서 ID가 변경된 경우 재초기화
|
||||
if (hasInitialized.current && currentIdString && lastInitializedId.current !== currentIdString) {
|
||||
|
|
@ -245,7 +255,7 @@ export function UniversalFormModalComponent({
|
|||
hasInitialized.current = true;
|
||||
initializeForm();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [initialData?.id, initialData?.ID, initialData?.objid]); // ID 값 변경 시 재초기화
|
||||
}, [initialData]); // initialData 전체 변경 시 재초기화
|
||||
|
||||
// config 변경 시에만 재초기화 (initialData 변경은 무시) - 채번규칙 제외
|
||||
useEffect(() => {
|
||||
|
|
@ -478,6 +488,82 @@ export function UniversalFormModalComponent({
|
|||
setActivatedOptionalFieldGroups(newActivatedGroups);
|
||||
setOriginalData(effectiveInitialData || {});
|
||||
|
||||
// 수정 모드에서 서브 테이블 데이터 로드 (겸직 등)
|
||||
const multiTable = config.saveConfig?.customApiSave?.multiTable;
|
||||
if (multiTable && effectiveInitialData) {
|
||||
const pkColumn = multiTable.mainTable?.primaryKeyColumn;
|
||||
const pkValue = effectiveInitialData[pkColumn];
|
||||
|
||||
// PK 값이 있으면 수정 모드로 판단
|
||||
if (pkValue) {
|
||||
console.log("[initializeForm] 수정 모드 - 서브 테이블 데이터 로드 시작");
|
||||
|
||||
for (const subTableConfig of multiTable.subTables || []) {
|
||||
// loadOnEdit 옵션이 활성화된 경우에만 로드
|
||||
if (!subTableConfig.enabled || !subTableConfig.options?.loadOnEdit) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const { tableName, linkColumn, repeatSectionId, fieldMappings, options } = subTableConfig;
|
||||
if (!tableName || !linkColumn?.subColumn || !repeatSectionId) {
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
// 서브 테이블에서 데이터 조회
|
||||
const filters: Record<string, any> = {
|
||||
[linkColumn.subColumn]: pkValue,
|
||||
};
|
||||
|
||||
// 서브 항목만 로드 (메인 항목 제외)
|
||||
if (options?.loadOnlySubItems && options?.mainMarkerColumn) {
|
||||
filters[options.mainMarkerColumn] = options.subMarkerValue ?? false;
|
||||
}
|
||||
|
||||
console.log(`[initializeForm] 서브 테이블 ${tableName} 조회:`, filters);
|
||||
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/data`, {
|
||||
params: {
|
||||
filters: JSON.stringify(filters),
|
||||
page: 1,
|
||||
pageSize: 100,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.data?.success && response.data?.data?.items) {
|
||||
const subItems = response.data.data.items;
|
||||
console.log(`[initializeForm] 서브 테이블 ${tableName} 데이터 ${subItems.length}건 로드됨`);
|
||||
|
||||
// 역매핑: 서브 테이블 데이터 → 반복 섹션 데이터
|
||||
const repeatItems: RepeatSectionItem[] = subItems.map((item: any, index: number) => {
|
||||
const repeatItem: RepeatSectionItem = {
|
||||
_id: generateUniqueId("repeat"),
|
||||
_index: index,
|
||||
_originalData: item, // 원본 데이터 보관 (수정 시 필요)
|
||||
};
|
||||
|
||||
// 필드 매핑 역변환 (targetColumn → formField)
|
||||
for (const mapping of fieldMappings || []) {
|
||||
if (mapping.formField && mapping.targetColumn) {
|
||||
repeatItem[mapping.formField] = item[mapping.targetColumn];
|
||||
}
|
||||
}
|
||||
|
||||
return repeatItem;
|
||||
});
|
||||
|
||||
// 반복 섹션에 데이터 설정
|
||||
newRepeatSections[repeatSectionId] = repeatItems;
|
||||
setRepeatSections({ ...newRepeatSections });
|
||||
console.log(`[initializeForm] 반복 섹션 ${repeatSectionId}에 ${repeatItems.length}건 설정`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`[initializeForm] 서브 테이블 ${tableName} 로드 실패:`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 채번규칙 자동 생성
|
||||
console.log("[initializeForm] generateNumberingValues 호출");
|
||||
await generateNumberingValues(newFormData);
|
||||
|
|
@ -997,6 +1083,14 @@ export function UniversalFormModalComponent({
|
|||
// 공통 필드 병합 + 개별 품목 데이터
|
||||
const itemToSave = { ...commonFieldsData, ...item };
|
||||
|
||||
// saveToTarget: false인 컬럼은 저장에서 제외
|
||||
const columns = section.tableConfig?.columns || [];
|
||||
for (const col of columns) {
|
||||
if (col.saveConfig?.saveToTarget === false && col.field in itemToSave) {
|
||||
delete itemToSave[col.field];
|
||||
}
|
||||
}
|
||||
|
||||
// 메인 레코드와 연결이 필요한 경우
|
||||
if (mainRecordId && config.saveConfig.primaryKeyColumn) {
|
||||
itemToSave[config.saveConfig.primaryKeyColumn] = mainRecordId;
|
||||
|
|
@ -1143,6 +1237,20 @@ export function UniversalFormModalComponent({
|
|||
});
|
||||
});
|
||||
|
||||
// 1-0. receiveFromParent 필드 값도 mainData에 추가 (서브 테이블 저장용)
|
||||
// 이 필드들은 메인 테이블에는 저장되지 않지만, 서브 테이블 저장 시 필요할 수 있음
|
||||
config.sections.forEach((section) => {
|
||||
if (section.repeatable || section.type === "table") return;
|
||||
(section.fields || []).forEach((field) => {
|
||||
if (field.receiveFromParent && !mainData[field.columnName]) {
|
||||
const value = formData[field.columnName];
|
||||
if (value !== undefined && value !== null && value !== "") {
|
||||
mainData[field.columnName] = value;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 1-1. 채번규칙 처리 (저장 시점에 실제 순번 할당)
|
||||
for (const section of config.sections) {
|
||||
if (section.repeatable || section.type === "table") continue;
|
||||
|
|
@ -1185,11 +1293,16 @@ export function UniversalFormModalComponent({
|
|||
}> = [];
|
||||
|
||||
for (const subTableConfig of multiTable.subTables || []) {
|
||||
if (!subTableConfig.enabled || !subTableConfig.tableName || !subTableConfig.repeatSectionId) {
|
||||
// 서브 테이블이 활성화되어 있고 테이블명이 있어야 함
|
||||
// repeatSectionId는 선택사항 (saveMainAsFirst만 사용하는 경우 없을 수 있음)
|
||||
if (!subTableConfig.enabled || !subTableConfig.tableName) {
|
||||
continue;
|
||||
}
|
||||
|
||||
const subItems: Record<string, any>[] = [];
|
||||
|
||||
// 반복 섹션이 있는 경우에만 반복 데이터 처리
|
||||
if (subTableConfig.repeatSectionId) {
|
||||
const repeatData = repeatSections[subTableConfig.repeatSectionId] || [];
|
||||
|
||||
// 반복 섹션 데이터를 필드 매핑에 따라 변환
|
||||
|
|
@ -1217,18 +1330,19 @@ export function UniversalFormModalComponent({
|
|||
subItems.push(mappedItem);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// saveMainAsFirst가 활성화된 경우, 메인 데이터를 서브 테이블에 저장하기 위한 매핑 생성
|
||||
let mainFieldMappings: Array<{ formField: string; targetColumn: string }> | undefined;
|
||||
if (subTableConfig.options?.saveMainAsFirst) {
|
||||
mainFieldMappings = [];
|
||||
|
||||
// 메인 섹션(비반복)의 필드들을 서브 테이블에 매핑
|
||||
// 서브 테이블의 fieldMappings에서 targetColumn을 찾아서 매핑
|
||||
// fieldMappings에 정의된 targetColumn만 매핑 (서브 테이블에 존재하는 컬럼만)
|
||||
for (const mapping of subTableConfig.fieldMappings || []) {
|
||||
if (mapping.targetColumn) {
|
||||
// 메인 데이터에서 동일한 컬럼명이 있으면 매핑
|
||||
if (mainData[mapping.targetColumn] !== undefined) {
|
||||
// formData에서 동일한 컬럼명이 있으면 매핑 (receiveFromParent 필드 포함)
|
||||
const formValue = formData[mapping.targetColumn];
|
||||
if (formValue !== undefined && formValue !== null && formValue !== "") {
|
||||
mainFieldMappings.push({
|
||||
formField: mapping.targetColumn,
|
||||
targetColumn: mapping.targetColumn,
|
||||
|
|
@ -1239,12 +1353,15 @@ export function UniversalFormModalComponent({
|
|||
config.sections.forEach((section) => {
|
||||
if (section.repeatable || section.type === "table") return;
|
||||
const matchingField = (section.fields || []).find((f) => f.columnName === mapping.targetColumn);
|
||||
if (matchingField && mainData[matchingField.columnName] !== undefined) {
|
||||
if (matchingField) {
|
||||
const fieldValue = formData[matchingField.columnName];
|
||||
if (fieldValue !== undefined && fieldValue !== null && fieldValue !== "") {
|
||||
mainFieldMappings!.push({
|
||||
formField: matchingField.columnName,
|
||||
targetColumn: mapping.targetColumn,
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -1256,6 +1373,8 @@ export function UniversalFormModalComponent({
|
|||
);
|
||||
}
|
||||
|
||||
// 서브 테이블 데이터 추가 (반복 데이터가 없어도 saveMainAsFirst가 있으면 추가)
|
||||
if (subItems.length > 0 || subTableConfig.options?.saveMainAsFirst) {
|
||||
subTablesData.push({
|
||||
tableName: subTableConfig.tableName,
|
||||
linkColumn: subTableConfig.linkColumn,
|
||||
|
|
@ -1266,6 +1385,7 @@ export function UniversalFormModalComponent({
|
|||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 범용 다중 테이블 저장 API 호출
|
||||
const response = await apiClient.post("/table-management/multi-table-save", {
|
||||
|
|
@ -1374,6 +1494,11 @@ export function UniversalFormModalComponent({
|
|||
if (onSave) {
|
||||
onSave({ ...formData, _saveCompleted: true });
|
||||
}
|
||||
|
||||
// 저장 완료 후 모달 닫기 이벤트 발생
|
||||
if (config.saveConfig.afterSave?.closeModal !== false) {
|
||||
window.dispatchEvent(new CustomEvent("closeEditModal"));
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error("저장 실패:", error);
|
||||
// axios 에러의 경우 서버 응답 메시지 추출
|
||||
|
|
@ -1485,16 +1610,39 @@ export function UniversalFormModalComponent({
|
|||
|
||||
// 표시 텍스트 생성 함수
|
||||
const getDisplayText = (row: Record<string, unknown>): string => {
|
||||
const displayVal = row[lfg.displayColumn || ""] || "";
|
||||
const valueVal = row[valueColumn] || "";
|
||||
// 메인 표시 컬럼 (displayColumn)
|
||||
const mainDisplayVal = row[lfg.displayColumn || ""] || "";
|
||||
// 서브 표시 컬럼 (subDisplayColumn이 있으면 사용, 없으면 valueColumn 사용)
|
||||
const subDisplayVal = lfg.subDisplayColumn
|
||||
? (row[lfg.subDisplayColumn] || "")
|
||||
: (row[valueColumn] || "");
|
||||
|
||||
switch (lfg.displayFormat) {
|
||||
case "code_name":
|
||||
return `${valueVal} - ${displayVal}`;
|
||||
// 서브 - 메인 형식
|
||||
return `${subDisplayVal} - ${mainDisplayVal}`;
|
||||
case "name_code":
|
||||
return `${displayVal} (${valueVal})`;
|
||||
// 메인 (서브) 형식
|
||||
return `${mainDisplayVal} (${subDisplayVal})`;
|
||||
case "custom":
|
||||
// 커스텀 형식: {컬럼명}을 실제 값으로 치환
|
||||
if (lfg.customDisplayFormat) {
|
||||
let result = lfg.customDisplayFormat;
|
||||
// {컬럼명} 패턴을 찾아서 실제 값으로 치환
|
||||
const matches = result.match(/\{([^}]+)\}/g);
|
||||
if (matches) {
|
||||
matches.forEach((match) => {
|
||||
const columnName = match.slice(1, -1); // { } 제거
|
||||
const columnValue = row[columnName];
|
||||
result = result.replace(match, columnValue !== undefined && columnValue !== null ? String(columnValue) : "");
|
||||
});
|
||||
}
|
||||
return result;
|
||||
}
|
||||
return String(mainDisplayVal);
|
||||
case "name_only":
|
||||
default:
|
||||
return String(displayVal);
|
||||
return String(mainDisplayVal);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -1542,8 +1690,10 @@ export function UniversalFormModalComponent({
|
|||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sourceData.length > 0 ? (
|
||||
sourceData.map((row, index) => (
|
||||
<SelectItem key={`${row[valueColumn] || index}_${index}`} value={String(row[valueColumn] || "")}>
|
||||
sourceData
|
||||
.filter((row) => row[valueColumn] !== null && row[valueColumn] !== undefined && String(row[valueColumn]) !== "")
|
||||
.map((row, index) => (
|
||||
<SelectItem key={`${row[valueColumn]}_${index}`} value={String(row[valueColumn])}>
|
||||
{getDisplayText(row)}
|
||||
</SelectItem>
|
||||
))
|
||||
|
|
@ -2207,7 +2357,9 @@ function SelectField({ fieldId, value, onChange, optionConfig, placeholder, disa
|
|||
<SelectValue placeholder={loading ? "로딩 중..." : placeholder} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{options.map((option) => (
|
||||
{options
|
||||
.filter((option) => option.value && option.value !== "")
|
||||
.map((option) => (
|
||||
<SelectItem key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</SelectItem>
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import React, { useState, useEffect, useCallback } from "react";
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
|
@ -47,13 +48,24 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
|
|||
<p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
|
||||
);
|
||||
|
||||
export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFormModalConfigPanelProps) {
|
||||
// 부모 화면에서 전달 가능한 필드 타입
|
||||
interface AvailableParentField {
|
||||
name: string; // 필드명 (columnName)
|
||||
label: string; // 표시 라벨
|
||||
sourceComponent?: string; // 출처 컴포넌트 (예: "TableList", "SplitPanelLayout2")
|
||||
sourceTable?: string; // 출처 테이블명
|
||||
}
|
||||
|
||||
export function UniversalFormModalConfigPanel({ config, onChange, allComponents = [] }: UniversalFormModalConfigPanelProps) {
|
||||
// 테이블 목록
|
||||
const [tables, setTables] = useState<{ name: string; label: string }[]>([]);
|
||||
const [tableColumns, setTableColumns] = useState<{
|
||||
[tableName: string]: { name: string; type: string; label: string }[];
|
||||
}>({});
|
||||
|
||||
// 부모 화면에서 전달 가능한 필드 목록
|
||||
const [availableParentFields, setAvailableParentFields] = useState<AvailableParentField[]>([]);
|
||||
|
||||
// 채번규칙 목록
|
||||
const [numberingRules, setNumberingRules] = useState<{ id: string; name: string }[]>([]);
|
||||
|
||||
|
|
@ -71,6 +83,186 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
loadNumberingRules();
|
||||
}, []);
|
||||
|
||||
// allComponents에서 부모 화면에서 전달 가능한 필드 추출
|
||||
useEffect(() => {
|
||||
const extractParentFields = async () => {
|
||||
if (!allComponents || allComponents.length === 0) {
|
||||
setAvailableParentFields([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const fields: AvailableParentField[] = [];
|
||||
|
||||
for (const comp of allComponents) {
|
||||
// 컴포넌트 타입 추출 (여러 위치에서 확인)
|
||||
const compType = comp.componentId || comp.componentConfig?.type || comp.componentConfig?.id || comp.type;
|
||||
const compConfig = comp.componentConfig || {};
|
||||
|
||||
// 1. TableList / InteractiveDataTable - 테이블 컬럼 추출
|
||||
if (compType === "table-list" || compType === "interactive-data-table") {
|
||||
const tableName = compConfig.selectedTable || compConfig.tableName;
|
||||
if (tableName) {
|
||||
// 테이블 컬럼 로드
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
|
||||
const columns = response.data?.data?.columns;
|
||||
if (response.data?.success && Array.isArray(columns)) {
|
||||
columns.forEach((col: any) => {
|
||||
const colName = col.columnName || col.column_name;
|
||||
const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
|
||||
fields.push({
|
||||
name: colName,
|
||||
label: colLabel,
|
||||
sourceComponent: "TableList",
|
||||
sourceTable: tableName,
|
||||
});
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 2. SplitPanelLayout2 - 데이터 전달 필드 및 소스 테이블 컬럼 추출
|
||||
if (compType === "split-panel-layout2") {
|
||||
// dataTransferFields 추출
|
||||
const transferFields = compConfig.dataTransferFields;
|
||||
if (transferFields && Array.isArray(transferFields)) {
|
||||
transferFields.forEach((field: any) => {
|
||||
if (field.targetColumn) {
|
||||
fields.push({
|
||||
name: field.targetColumn,
|
||||
label: field.targetColumn,
|
||||
sourceComponent: "SplitPanelLayout2",
|
||||
sourceTable: compConfig.leftPanel?.tableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 좌측 패널 테이블 컬럼도 추출
|
||||
const leftTableName = compConfig.leftPanel?.tableName;
|
||||
if (leftTableName) {
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${leftTableName}/columns`);
|
||||
const columns = response.data?.data?.columns;
|
||||
if (response.data?.success && Array.isArray(columns)) {
|
||||
columns.forEach((col: any) => {
|
||||
const colName = col.columnName || col.column_name;
|
||||
const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
|
||||
// 중복 방지
|
||||
if (!fields.some(f => f.name === colName && f.sourceTable === leftTableName)) {
|
||||
fields.push({
|
||||
name: colName,
|
||||
label: colLabel,
|
||||
sourceComponent: "SplitPanelLayout2 (좌측)",
|
||||
sourceTable: leftTableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`테이블 컬럼 로드 실패 (${leftTableName}):`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 기타 테이블 관련 컴포넌트
|
||||
if (compType === "card-display" || compType === "simple-repeater-table") {
|
||||
const tableName = compConfig.tableName || compConfig.initialDataConfig?.sourceTable;
|
||||
if (tableName) {
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${tableName}/columns`);
|
||||
const columns = response.data?.data?.columns;
|
||||
if (response.data?.success && Array.isArray(columns)) {
|
||||
columns.forEach((col: any) => {
|
||||
const colName = col.columnName || col.column_name;
|
||||
const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
|
||||
if (!fields.some(f => f.name === colName && f.sourceTable === tableName)) {
|
||||
fields.push({
|
||||
name: colName,
|
||||
label: colLabel,
|
||||
sourceComponent: compType,
|
||||
sourceTable: tableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`테이블 컬럼 로드 실패 (${tableName}):`, error);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 버튼 컴포넌트 - openModalWithData의 fieldMappings/dataMapping에서 소스 컬럼 추출
|
||||
if (compType === "button-primary" || compType === "button" || compType === "button-secondary") {
|
||||
const action = compConfig.action || {};
|
||||
|
||||
// fieldMappings에서 소스 컬럼 추출
|
||||
const fieldMappings = action.fieldMappings || [];
|
||||
fieldMappings.forEach((mapping: any) => {
|
||||
if (mapping.sourceColumn && !fields.some(f => f.name === mapping.sourceColumn)) {
|
||||
fields.push({
|
||||
name: mapping.sourceColumn,
|
||||
label: mapping.sourceColumn,
|
||||
sourceComponent: "Button (fieldMappings)",
|
||||
sourceTable: action.sourceTableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// dataMapping에서 소스 컬럼 추출
|
||||
const dataMapping = action.dataMapping || [];
|
||||
dataMapping.forEach((mapping: any) => {
|
||||
if (mapping.sourceColumn && !fields.some(f => f.name === mapping.sourceColumn)) {
|
||||
fields.push({
|
||||
name: mapping.sourceColumn,
|
||||
label: mapping.sourceColumn,
|
||||
sourceComponent: "Button (dataMapping)",
|
||||
sourceTable: action.sourceTableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 5. 현재 모달의 저장 테이블 컬럼도 추가 (부모에서 전달받을 수 있는 값들)
|
||||
const currentTableName = config.saveConfig?.tableName;
|
||||
if (currentTableName) {
|
||||
try {
|
||||
const response = await apiClient.get(`/table-management/tables/${currentTableName}/columns`);
|
||||
const columns = response.data?.data?.columns;
|
||||
if (response.data?.success && Array.isArray(columns)) {
|
||||
columns.forEach((col: any) => {
|
||||
const colName = col.columnName || col.column_name;
|
||||
const colLabel = col.displayName || col.columnComment || col.column_comment || colName;
|
||||
if (!fields.some(f => f.name === colName)) {
|
||||
fields.push({
|
||||
name: colName,
|
||||
label: colLabel,
|
||||
sourceComponent: "현재 폼 테이블",
|
||||
sourceTable: currentTableName,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`현재 테이블 컬럼 로드 실패 (${currentTableName}):`, error);
|
||||
}
|
||||
}
|
||||
|
||||
// 중복 제거 (같은 name이면 첫 번째만 유지)
|
||||
const uniqueFields = fields.filter((field, index, self) =>
|
||||
index === self.findIndex(f => f.name === field.name)
|
||||
);
|
||||
|
||||
setAvailableParentFields(uniqueFields);
|
||||
};
|
||||
|
||||
extractParentFields();
|
||||
}, [allComponents, config.saveConfig?.tableName]);
|
||||
|
||||
// 저장 테이블 변경 시 컬럼 로드
|
||||
useEffect(() => {
|
||||
if (config.saveConfig.tableName) {
|
||||
|
|
@ -84,9 +276,10 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
const data = response.data?.data;
|
||||
if (response.data?.success && Array.isArray(data)) {
|
||||
setTables(
|
||||
data.map((t: { tableName?: string; table_name?: string; tableLabel?: string; table_label?: string }) => ({
|
||||
data.map((t: { tableName?: string; table_name?: string; displayName?: string; tableLabel?: string; table_label?: string }) => ({
|
||||
name: t.tableName || t.table_name || "",
|
||||
label: t.tableLabel || t.table_label || t.tableName || t.table_name || "",
|
||||
// displayName 우선, 없으면 tableLabel, 그것도 없으면 테이블명
|
||||
label: t.displayName || t.tableLabel || t.table_label || "",
|
||||
})),
|
||||
);
|
||||
}
|
||||
|
|
@ -334,6 +527,21 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
<HelpText>모달 창의 크기를 선택하세요</HelpText>
|
||||
</div>
|
||||
|
||||
{/* 저장 버튼 표시 설정 */}
|
||||
<div className="w-full min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id="show-save-button"
|
||||
checked={config.modal.showSaveButton !== false}
|
||||
onCheckedChange={(checked) => updateModalConfig({ showSaveButton: checked === true })}
|
||||
/>
|
||||
<Label htmlFor="show-save-button" className="text-xs font-medium cursor-pointer">
|
||||
저장 버튼 표시
|
||||
</Label>
|
||||
</div>
|
||||
<HelpText>체크 해제 시 모달 하단의 저장 버튼이 숨겨집니다</HelpText>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 w-full min-w-0">
|
||||
<div className="w-full min-w-0">
|
||||
<Label className="text-xs font-medium mb-1.5 block">저장 버튼 텍스트</Label>
|
||||
|
|
@ -520,13 +728,13 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
{/* 테이블 컬럼 목록 (테이블 타입만) */}
|
||||
{section.type === "table" && section.tableConfig?.columns && section.tableConfig.columns.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 max-w-full overflow-hidden pt-1">
|
||||
{section.tableConfig.columns.slice(0, 4).map((col) => (
|
||||
{section.tableConfig.columns.slice(0, 4).map((col, idx) => (
|
||||
<Badge
|
||||
key={col.field}
|
||||
key={col.field || `col_${idx}`}
|
||||
variant="outline"
|
||||
className="text-xs px-2 py-0.5 shrink-0 text-purple-600 bg-purple-50 border-purple-200"
|
||||
>
|
||||
{col.label}
|
||||
{col.label || col.field || `컬럼 ${idx + 1}`}
|
||||
</Badge>
|
||||
))}
|
||||
{section.tableConfig.columns.length > 4 && (
|
||||
|
|
@ -604,6 +812,12 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
setSelectedField(field);
|
||||
setFieldDetailModalOpen(true);
|
||||
}}
|
||||
tableName={config.saveConfig.tableName}
|
||||
tableColumns={tableColumns[config.saveConfig.tableName || ""]?.map(col => ({
|
||||
name: col.name,
|
||||
type: col.type,
|
||||
label: col.label || col.name
|
||||
})) || []}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -650,6 +864,9 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
tableColumns={tableColumns}
|
||||
numberingRules={numberingRules}
|
||||
onLoadTableColumns={loadTableColumns}
|
||||
availableParentFields={availableParentFields}
|
||||
targetTableName={config.saveConfig?.tableName}
|
||||
targetTableColumns={config.saveConfig?.tableName ? tableColumns[config.saveConfig.tableName] || [] : []}
|
||||
/>
|
||||
)}
|
||||
|
||||
|
|
@ -690,6 +907,7 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
|
|||
)}
|
||||
onLoadTableColumns={loadTableColumns}
|
||||
allSections={config.sections as FormSectionConfig[]}
|
||||
availableParentFields={availableParentFields}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ import {
|
|||
TablePreFilter,
|
||||
TableModalFilter,
|
||||
TableCalculationRule,
|
||||
ConditionalTableConfig,
|
||||
ConditionalTableOption,
|
||||
} from "./types";
|
||||
|
||||
// 기본 설정값
|
||||
|
|
@ -133,6 +135,33 @@ export const defaultTableSectionConfig: TableSectionConfig = {
|
|||
multiSelect: true,
|
||||
maxHeight: "400px",
|
||||
},
|
||||
conditionalTable: undefined,
|
||||
};
|
||||
|
||||
// 기본 조건부 테이블 설정
|
||||
export const defaultConditionalTableConfig: ConditionalTableConfig = {
|
||||
enabled: false,
|
||||
triggerType: "checkbox",
|
||||
conditionColumn: "",
|
||||
options: [],
|
||||
optionSource: {
|
||||
enabled: false,
|
||||
tableName: "",
|
||||
valueColumn: "",
|
||||
labelColumn: "",
|
||||
filterCondition: "",
|
||||
},
|
||||
sourceFilter: {
|
||||
enabled: false,
|
||||
filterColumn: "",
|
||||
},
|
||||
};
|
||||
|
||||
// 기본 조건부 테이블 옵션 설정
|
||||
export const defaultConditionalTableOptionConfig: ConditionalTableOption = {
|
||||
id: "",
|
||||
value: "",
|
||||
label: "",
|
||||
};
|
||||
|
||||
// 기본 테이블 컬럼 설정
|
||||
|
|
@ -300,3 +329,8 @@ export const generateColumnModeId = (): string => {
|
|||
export const generateFilterId = (): string => {
|
||||
return generateUniqueId("filter");
|
||||
};
|
||||
|
||||
// 유틸리티: 조건부 테이블 옵션 ID 생성
|
||||
export const generateConditionalOptionId = (): string => {
|
||||
return generateUniqueId("cond");
|
||||
};
|
||||
|
|
|
|||
|
|
@ -10,7 +10,16 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
|
|||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Plus, Trash2, Settings as SettingsIcon } from "lucide-react";
|
||||
import { Plus, Trash2, Settings as SettingsIcon, 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";
|
||||
import {
|
||||
FormFieldConfig,
|
||||
|
|
@ -36,6 +45,17 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
|
|||
<p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
|
||||
);
|
||||
|
||||
/**
|
||||
* 부모 화면에서 전달 가능한 필드 타입
|
||||
* 유니버셜 폼 모달에서 "부모에서 값 받기" 설정 시 선택 가능한 필드 목록
|
||||
*/
|
||||
export interface AvailableParentField {
|
||||
name: string; // 필드명 (columnName)
|
||||
label: string; // 표시 라벨
|
||||
sourceComponent?: string; // 출처 컴포넌트 (예: "TableList", "SplitPanelLayout2")
|
||||
sourceTable?: string; // 출처 테이블명
|
||||
}
|
||||
|
||||
interface FieldDetailSettingsModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
|
|
@ -45,6 +65,11 @@ interface FieldDetailSettingsModalProps {
|
|||
tableColumns: { [tableName: string]: { name: string; type: string; label: string }[] };
|
||||
numberingRules: { id: string; name: string }[];
|
||||
onLoadTableColumns: (tableName: string) => void;
|
||||
// 부모 화면에서 전달 가능한 필드 목록 (선택사항)
|
||||
availableParentFields?: AvailableParentField[];
|
||||
// 저장 테이블 정보 (타겟 컬럼 선택용)
|
||||
targetTableName?: string;
|
||||
targetTableColumns?: { name: string; type: string; label: string }[];
|
||||
}
|
||||
|
||||
export function FieldDetailSettingsModal({
|
||||
|
|
@ -56,7 +81,13 @@ export function FieldDetailSettingsModal({
|
|||
tableColumns,
|
||||
numberingRules,
|
||||
onLoadTableColumns,
|
||||
availableParentFields = [],
|
||||
// targetTableName은 타겟 컬럼 선택 시 참고용으로 전달됨 (현재 targetTableColumns만 사용)
|
||||
targetTableName: _targetTableName,
|
||||
targetTableColumns = [],
|
||||
}: FieldDetailSettingsModalProps) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
void _targetTableName; // 향후 사용 가능성을 위해 유지
|
||||
// 로컬 상태로 필드 설정 관리
|
||||
const [localField, setLocalField] = useState<FormFieldConfig>(field);
|
||||
|
||||
|
|
@ -64,6 +95,13 @@ export function FieldDetailSettingsModal({
|
|||
const [categoryColumns, setCategoryColumns] = useState<CategoryColumnOption[]>([]);
|
||||
const [loadingCategoryColumns, setLoadingCategoryColumns] = useState(false);
|
||||
|
||||
// Combobox 열림 상태
|
||||
const [sourceTableOpen, setSourceTableOpen] = useState(false);
|
||||
const [targetColumnOpenMap, setTargetColumnOpenMap] = useState<Record<number, boolean>>({});
|
||||
const [displayColumnOpen, setDisplayColumnOpen] = useState(false);
|
||||
const [subDisplayColumnOpen, setSubDisplayColumnOpen] = useState(false); // 서브 표시 컬럼 Popover 상태
|
||||
const [sourceColumnOpenMap, setSourceColumnOpenMap] = useState<Record<number, boolean>>({});
|
||||
|
||||
// open이 변경될 때마다 필드 데이터 동기화
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
|
|
@ -71,6 +109,16 @@ export function FieldDetailSettingsModal({
|
|||
}
|
||||
}, [open, field]);
|
||||
|
||||
// 모달이 열릴 때 소스 테이블 컬럼 자동 로드
|
||||
useEffect(() => {
|
||||
if (open && field.linkedFieldGroup?.sourceTable) {
|
||||
// tableColumns에 해당 테이블 컬럼이 없으면 로드
|
||||
if (!tableColumns[field.linkedFieldGroup.sourceTable] || tableColumns[field.linkedFieldGroup.sourceTable].length === 0) {
|
||||
onLoadTableColumns(field.linkedFieldGroup.sourceTable);
|
||||
}
|
||||
}
|
||||
}, [open, field.linkedFieldGroup?.sourceTable, tableColumns, onLoadTableColumns]);
|
||||
|
||||
// 모든 카테고리 컬럼 목록 로드 (모달 열릴 때)
|
||||
useEffect(() => {
|
||||
const loadAllCategoryColumns = async () => {
|
||||
|
|
@ -293,6 +341,49 @@ export function FieldDetailSettingsModal({
|
|||
/>
|
||||
</div>
|
||||
<HelpText>부모 화면에서 전달받은 값으로 자동 채워집니다</HelpText>
|
||||
|
||||
{/* 부모에서 값 받기 활성화 시 필드 선택 */}
|
||||
{localField.receiveFromParent && (
|
||||
<div className="mt-3 space-y-2 p-3 rounded-md bg-blue-50 border border-blue-200">
|
||||
<Label className="text-xs font-medium text-blue-700">부모 필드명 선택</Label>
|
||||
{availableParentFields.length > 0 ? (
|
||||
<Select
|
||||
value={localField.parentFieldName || localField.columnName}
|
||||
onValueChange={(value) => updateField({ parentFieldName: value })}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs">
|
||||
<SelectValue placeholder="필드 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableParentFields.map((pf) => (
|
||||
<SelectItem key={pf.name} value={pf.name}>
|
||||
<div className="flex flex-col">
|
||||
<span>{pf.label || pf.name}</span>
|
||||
{pf.sourceComponent && (
|
||||
<span className="text-[9px] text-muted-foreground">
|
||||
{pf.sourceComponent}{pf.sourceTable && ` (${pf.sourceTable})`}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<Input
|
||||
value={localField.parentFieldName || ""}
|
||||
onChange={(e) => updateField({ parentFieldName: e.target.value })}
|
||||
placeholder={`예: ${localField.columnName || "parent_field_name"}`}
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
부모 화면에서 전달받을 필드명을 입력하세요. 비워두면 "{localField.columnName}"을 사용합니다.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Accordion으로 고급 설정 */}
|
||||
|
|
@ -472,12 +563,12 @@ export function FieldDetailSettingsModal({
|
|||
<Label className="text-[10px]">저장할 컬럼</Label>
|
||||
{selectTableColumns.length > 0 ? (
|
||||
<Select
|
||||
value={localField.selectOptions?.saveColumn || ""}
|
||||
value={localField.selectOptions?.saveColumn || "__default__"}
|
||||
onValueChange={(value) =>
|
||||
updateField({
|
||||
selectOptions: {
|
||||
...localField.selectOptions,
|
||||
saveColumn: value,
|
||||
saveColumn: value === "__default__" ? "" : value,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
@ -486,7 +577,7 @@ export function FieldDetailSettingsModal({
|
|||
<SelectValue placeholder="컬럼 선택 (미선택 시 조인 컬럼 저장)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">조인 컬럼 사용 (기본)</SelectItem>
|
||||
<SelectItem value="__default__">조인 컬럼 사용 (기본)</SelectItem>
|
||||
{selectTableColumns.map((col) => (
|
||||
<SelectItem key={col.name} value={col.name}>
|
||||
{col.name}
|
||||
|
|
@ -592,58 +683,173 @@ export function FieldDetailSettingsModal({
|
|||
<div className="space-y-3 pt-2 border-t">
|
||||
<div>
|
||||
<Label className="text-[10px]">소스 테이블</Label>
|
||||
<Select
|
||||
value={localField.linkedFieldGroup?.sourceTable || ""}
|
||||
onValueChange={(value) => {
|
||||
<Popover open={sourceTableOpen} onOpenChange={setSourceTableOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={sourceTableOpen}
|
||||
className="h-7 w-full justify-between text-xs mt-1 font-normal"
|
||||
>
|
||||
{localField.linkedFieldGroup?.sourceTable
|
||||
? (() => {
|
||||
const selectedTable = tables.find(
|
||||
(t) => t.name === localField.linkedFieldGroup?.sourceTable
|
||||
);
|
||||
return selectedTable
|
||||
? `${selectedTable.label || selectedTable.name} (${selectedTable.name})`
|
||||
: localField.linkedFieldGroup?.sourceTable;
|
||||
})()
|
||||
: "테이블 선택..."}
|
||||
<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-xs text-center">
|
||||
테이블을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tables.map((t) => (
|
||||
<CommandItem
|
||||
key={t.name}
|
||||
value={`${t.name} ${t.label || ""}`}
|
||||
onSelect={() => {
|
||||
updateField({
|
||||
linkedFieldGroup: {
|
||||
...localField.linkedFieldGroup,
|
||||
sourceTable: value,
|
||||
sourceTable: t.name,
|
||||
},
|
||||
});
|
||||
onLoadTableColumns(value);
|
||||
onLoadTableColumns(t.name);
|
||||
setSourceTableOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs mt-1">
|
||||
<SelectValue placeholder="테이블 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{tables.map((t) => (
|
||||
<SelectItem key={t.name} value={t.name}>
|
||||
{t.label || t.name}
|
||||
</SelectItem>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
localField.linkedFieldGroup?.sourceTable === t.name
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="font-medium">{t.label || t.name}</span>
|
||||
<span className="ml-1 text-muted-foreground">({t.name})</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<HelpText>값을 가져올 소스 테이블 (예: customer_mng)</HelpText>
|
||||
</div>
|
||||
|
||||
{/* 표시 형식 선택 */}
|
||||
<div>
|
||||
<Label className="text-[10px]">표시 컬럼</Label>
|
||||
{sourceTableColumns.length > 0 ? (
|
||||
<Label className="text-[10px]">표시 형식</Label>
|
||||
<Select
|
||||
value={localField.linkedFieldGroup?.displayColumn || ""}
|
||||
value={localField.linkedFieldGroup?.displayFormat || "name_only"}
|
||||
onValueChange={(value) =>
|
||||
updateField({
|
||||
linkedFieldGroup: {
|
||||
...localField.linkedFieldGroup,
|
||||
displayColumn: value,
|
||||
displayFormat: value as "name_only" | "code_name" | "name_code",
|
||||
// name_only 선택 시 서브 컬럼 초기화
|
||||
...(value === "name_only" ? { subDisplayColumn: undefined } : {}),
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs mt-1">
|
||||
<SelectValue placeholder="컬럼 선택" />
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sourceTableColumns.map((col) => (
|
||||
<SelectItem key={col.name} value={col.name}>
|
||||
{col.name}
|
||||
{col.label !== col.name && ` (${col.label})`}
|
||||
{LINKED_FIELD_DISPLAY_FORMAT_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
<div className="flex flex-col">
|
||||
<span>{opt.label}</span>
|
||||
<span className="text-[10px] text-muted-foreground">
|
||||
{opt.value === "name_only" && "메인 컬럼만 표시"}
|
||||
{opt.value === "code_name" && "서브 - 메인 형식"}
|
||||
{opt.value === "name_code" && "메인 (서브) 형식"}
|
||||
</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<HelpText>드롭다운에 표시할 형식을 선택합니다</HelpText>
|
||||
</div>
|
||||
|
||||
{/* 메인 표시 컬럼 */}
|
||||
<div>
|
||||
<Label className="text-[10px]">메인 표시 컬럼</Label>
|
||||
{sourceTableColumns.length > 0 ? (
|
||||
<Popover open={displayColumnOpen} onOpenChange={setDisplayColumnOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={displayColumnOpen}
|
||||
className="h-7 w-full justify-between text-xs mt-1 font-normal"
|
||||
>
|
||||
{localField.linkedFieldGroup?.displayColumn
|
||||
? (() => {
|
||||
const selectedCol = sourceTableColumns.find(
|
||||
(c) => c.name === localField.linkedFieldGroup?.displayColumn
|
||||
);
|
||||
return selectedCol
|
||||
? `${selectedCol.name} (${selectedCol.label})`
|
||||
: localField.linkedFieldGroup?.displayColumn;
|
||||
})()
|
||||
: "컬럼 선택..."}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[280px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-xs text-center">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sourceTableColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.name}
|
||||
value={`${col.name} ${col.label}`}
|
||||
onSelect={() => {
|
||||
updateField({
|
||||
linkedFieldGroup: {
|
||||
...localField.linkedFieldGroup,
|
||||
displayColumn: col.name,
|
||||
},
|
||||
});
|
||||
setDisplayColumnOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
localField.linkedFieldGroup?.displayColumn === col.name
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="font-medium">{col.name}</span>
|
||||
<span className="ml-1 text-muted-foreground">({col.label})</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Input
|
||||
value={localField.linkedFieldGroup?.displayColumn || ""}
|
||||
|
|
@ -655,39 +861,133 @@ export function FieldDetailSettingsModal({
|
|||
},
|
||||
})
|
||||
}
|
||||
placeholder="customer_name"
|
||||
placeholder="item_name"
|
||||
className="h-7 text-xs mt-1"
|
||||
/>
|
||||
)}
|
||||
<HelpText>드롭다운에 표시할 컬럼 (예: customer_name)</HelpText>
|
||||
<HelpText>드롭다운에 표시할 메인 컬럼 (예: item_name)</HelpText>
|
||||
</div>
|
||||
|
||||
{/* 서브 표시 컬럼 - 표시 형식이 name_only가 아닌 경우에만 표시 */}
|
||||
{localField.linkedFieldGroup?.displayFormat &&
|
||||
localField.linkedFieldGroup.displayFormat !== "name_only" && (
|
||||
<div>
|
||||
<Label className="text-[10px]">표시 형식</Label>
|
||||
<Select
|
||||
value={localField.linkedFieldGroup?.displayFormat || "name_only"}
|
||||
onValueChange={(value) =>
|
||||
<Label className="text-[10px]">서브 표시 컬럼</Label>
|
||||
{sourceTableColumns.length > 0 ? (
|
||||
<Popover open={subDisplayColumnOpen} onOpenChange={setSubDisplayColumnOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={subDisplayColumnOpen}
|
||||
className="h-7 w-full justify-between text-xs mt-1 font-normal"
|
||||
>
|
||||
{localField.linkedFieldGroup?.subDisplayColumn
|
||||
? (() => {
|
||||
const selectedCol = sourceTableColumns.find(
|
||||
(c) => c.name === localField.linkedFieldGroup?.subDisplayColumn
|
||||
);
|
||||
return selectedCol
|
||||
? `${selectedCol.name} (${selectedCol.label})`
|
||||
: localField.linkedFieldGroup?.subDisplayColumn;
|
||||
})()
|
||||
: "컬럼 선택..."}
|
||||
<ChevronsUpDown className="ml-2 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[280px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="h-8 text-xs" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-xs text-center">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sourceTableColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.name}
|
||||
value={`${col.name} ${col.label}`}
|
||||
onSelect={() => {
|
||||
updateField({
|
||||
linkedFieldGroup: {
|
||||
...localField.linkedFieldGroup,
|
||||
displayFormat: value as "name_only" | "code_name" | "name_code",
|
||||
subDisplayColumn: col.name,
|
||||
},
|
||||
});
|
||||
setSubDisplayColumnOpen(false);
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
localField.linkedFieldGroup?.subDisplayColumn === col.name
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="font-medium">{col.name}</span>
|
||||
<span className="ml-1 text-muted-foreground">({col.label})</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Input
|
||||
value={localField.linkedFieldGroup?.subDisplayColumn || ""}
|
||||
onChange={(e) =>
|
||||
updateField({
|
||||
linkedFieldGroup: {
|
||||
...localField.linkedFieldGroup,
|
||||
subDisplayColumn: e.target.value,
|
||||
},
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs mt-1">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{LINKED_FIELD_DISPLAY_FORMAT_OPTIONS.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<HelpText>드롭다운에 표시될 형식을 선택하세요</HelpText>
|
||||
placeholder="item_code"
|
||||
className="h-7 text-xs mt-1"
|
||||
/>
|
||||
)}
|
||||
<HelpText>
|
||||
{localField.linkedFieldGroup?.displayFormat === "code_name"
|
||||
? "메인 앞에 표시될 서브 컬럼 (예: 서브 - 메인)"
|
||||
: "메인 뒤에 표시될 서브 컬럼 (예: 메인 (서브))"}
|
||||
</HelpText>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 미리보기 - 메인 컬럼이 선택된 경우에만 표시 */}
|
||||
{localField.linkedFieldGroup?.displayColumn && (
|
||||
<div className="p-3 bg-muted/50 rounded-lg border border-dashed">
|
||||
<p className="text-[10px] text-muted-foreground mb-2">미리보기:</p>
|
||||
{(() => {
|
||||
const mainCol = localField.linkedFieldGroup?.displayColumn || "";
|
||||
const subCol = localField.linkedFieldGroup?.subDisplayColumn || "";
|
||||
const mainLabel = sourceTableColumns.find(c => c.name === mainCol)?.label || mainCol;
|
||||
const subLabel = sourceTableColumns.find(c => c.name === subCol)?.label || subCol;
|
||||
const format = localField.linkedFieldGroup?.displayFormat || "name_only";
|
||||
|
||||
let preview = "";
|
||||
if (format === "name_only") {
|
||||
preview = mainLabel;
|
||||
} else if (format === "code_name" && subCol) {
|
||||
preview = `${subLabel} - ${mainLabel}`;
|
||||
} else if (format === "name_code" && subCol) {
|
||||
preview = `${mainLabel} (${subLabel})`;
|
||||
} else if (format !== "name_only" && !subCol) {
|
||||
preview = `${mainLabel} (서브 컬럼을 선택하세요)`;
|
||||
} else {
|
||||
preview = mainLabel;
|
||||
}
|
||||
|
||||
return (
|
||||
<p className="text-sm font-medium">{preview}</p>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Separator />
|
||||
|
||||
|
|
@ -729,24 +1029,67 @@ export function FieldDetailSettingsModal({
|
|||
<div>
|
||||
<Label className="text-[9px]">소스 컬럼 (가져올 값)</Label>
|
||||
{sourceTableColumns.length > 0 ? (
|
||||
<Select
|
||||
value={mapping.sourceColumn || ""}
|
||||
onValueChange={(value) =>
|
||||
updateLinkedFieldMapping(index, { sourceColumn: value })
|
||||
<Popover
|
||||
open={sourceColumnOpenMap[index] || false}
|
||||
onOpenChange={(open) =>
|
||||
setSourceColumnOpenMap((prev) => ({ ...prev, [index]: open }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="h-6 text-[9px] mt-0.5">
|
||||
<SelectValue placeholder="컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={sourceColumnOpenMap[index] || false}
|
||||
className="h-6 w-full justify-between text-[9px] mt-0.5 font-normal"
|
||||
>
|
||||
{mapping.sourceColumn
|
||||
? (() => {
|
||||
const selectedCol = sourceTableColumns.find(
|
||||
(c) => c.name === mapping.sourceColumn
|
||||
);
|
||||
return selectedCol
|
||||
? `${selectedCol.name} (${selectedCol.label})`
|
||||
: mapping.sourceColumn;
|
||||
})()
|
||||
: "컬럼 선택..."}
|
||||
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[250px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="h-7 text-[9px]" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-[9px] text-center">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{sourceTableColumns.map((col) => (
|
||||
<SelectItem key={col.name} value={col.name}>
|
||||
{col.name}
|
||||
{col.label !== col.name && ` (${col.label})`}
|
||||
</SelectItem>
|
||||
<CommandItem
|
||||
key={col.name}
|
||||
value={`${col.name} ${col.label}`}
|
||||
onSelect={() => {
|
||||
updateLinkedFieldMapping(index, { sourceColumn: col.name });
|
||||
setSourceColumnOpenMap((prev) => ({ ...prev, [index]: false }));
|
||||
}}
|
||||
className="text-[9px]"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
mapping.sourceColumn === col.name
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="font-medium">{col.name}</span>
|
||||
<span className="ml-1 text-muted-foreground">({col.label})</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Input
|
||||
value={mapping.sourceColumn || ""}
|
||||
|
|
@ -763,6 +1106,69 @@ export function FieldDetailSettingsModal({
|
|||
|
||||
<div>
|
||||
<Label className="text-[9px]">타겟 컬럼 (저장할 위치)</Label>
|
||||
{targetTableColumns.length > 0 ? (
|
||||
<Popover
|
||||
open={targetColumnOpenMap[index] || false}
|
||||
onOpenChange={(open) =>
|
||||
setTargetColumnOpenMap((prev) => ({ ...prev, [index]: open }))
|
||||
}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={targetColumnOpenMap[index] || false}
|
||||
className="h-6 w-full justify-between text-[9px] mt-0.5 font-normal"
|
||||
>
|
||||
{mapping.targetColumn
|
||||
? (() => {
|
||||
const selectedCol = targetTableColumns.find(
|
||||
(c) => c.name === mapping.targetColumn
|
||||
);
|
||||
return selectedCol
|
||||
? `${selectedCol.name} (${selectedCol.label})`
|
||||
: mapping.targetColumn;
|
||||
})()
|
||||
: "컬럼 선택..."}
|
||||
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[250px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="h-7 text-[9px]" />
|
||||
<CommandList>
|
||||
<CommandEmpty className="py-2 text-[9px] text-center">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{targetTableColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.name}
|
||||
value={`${col.name} ${col.label}`}
|
||||
onSelect={() => {
|
||||
updateLinkedFieldMapping(index, { targetColumn: col.name });
|
||||
setTargetColumnOpenMap((prev) => ({ ...prev, [index]: false }));
|
||||
}}
|
||||
className="text-[9px]"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
mapping.targetColumn === col.name
|
||||
? "opacity-100"
|
||||
: "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<span className="font-medium">{col.name}</span>
|
||||
<span className="ml-1 text-muted-foreground">({col.label})</span>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Input
|
||||
value={mapping.targetColumn || ""}
|
||||
onChange={(e) =>
|
||||
|
|
@ -771,6 +1177,7 @@ export function FieldDetailSettingsModal({
|
|||
placeholder="partner_id"
|
||||
className="h-6 text-[9px] mt-0.5"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -909,3 +1316,4 @@ export function FieldDetailSettingsModal({
|
|||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -11,7 +11,9 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Di
|
|||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings as SettingsIcon } from "lucide-react";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
|
||||
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
|
||||
import { Plus, Trash2, GripVertical, ChevronUp, ChevronDown, Settings as SettingsIcon, Check, ChevronsUpDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { FormSectionConfig, FormFieldConfig, OptionalFieldGroupConfig, FIELD_TYPE_OPTIONS } from "../types";
|
||||
import { defaultFieldConfig, generateFieldId, generateUniqueId } from "../config";
|
||||
|
|
@ -21,12 +23,22 @@ const HelpText = ({ children }: { children: React.ReactNode }) => (
|
|||
<p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
|
||||
);
|
||||
|
||||
// 테이블 컬럼 정보 타입
|
||||
interface TableColumnInfo {
|
||||
name: string;
|
||||
type: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface SectionLayoutModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
section: FormSectionConfig;
|
||||
onSave: (updates: Partial<FormSectionConfig>) => void;
|
||||
onOpenFieldDetail: (field: FormFieldConfig) => void;
|
||||
// 저장 테이블의 컬럼 정보
|
||||
tableName?: string;
|
||||
tableColumns?: TableColumnInfo[];
|
||||
}
|
||||
|
||||
export function SectionLayoutModal({
|
||||
|
|
@ -35,8 +47,13 @@ export function SectionLayoutModal({
|
|||
section,
|
||||
onSave,
|
||||
onOpenFieldDetail,
|
||||
tableName = "",
|
||||
tableColumns = [],
|
||||
}: SectionLayoutModalProps) {
|
||||
|
||||
// 컬럼 선택 Popover 상태 (필드별)
|
||||
const [columnSearchOpen, setColumnSearchOpen] = useState<Record<string, boolean>>({});
|
||||
|
||||
// 로컬 상태로 섹션 관리 (fields가 없으면 빈 배열로 초기화)
|
||||
const [localSection, setLocalSection] = useState<FormSectionConfig>(() => ({
|
||||
...section,
|
||||
|
|
@ -443,11 +460,90 @@ export function SectionLayoutModal({
|
|||
</div>
|
||||
<div>
|
||||
<Label className="text-[9px]">컬럼명</Label>
|
||||
{tableColumns.length > 0 ? (
|
||||
<Popover
|
||||
open={columnSearchOpen[field.id] || false}
|
||||
onOpenChange={(open) => setColumnSearchOpen(prev => ({ ...prev, [field.id]: open }))}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={columnSearchOpen[field.id] || false}
|
||||
className="h-6 w-full justify-between text-[9px] mt-0.5 font-normal"
|
||||
>
|
||||
{field.columnName ? (
|
||||
<div className="flex flex-col items-start text-left truncate">
|
||||
<span className="font-medium truncate">{field.columnName}</span>
|
||||
{(() => {
|
||||
const col = tableColumns.find(c => c.name === field.columnName);
|
||||
return col?.label && col.label !== field.columnName ? (
|
||||
<span className="text-[8px] text-muted-foreground truncate">({col.label})</span>
|
||||
) : null;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">컬럼 선택...</span>
|
||||
)}
|
||||
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-[280px]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="text-xs" />
|
||||
<CommandList className="max-h-[200px]">
|
||||
<CommandEmpty className="text-xs py-3 text-center">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tableColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.name}
|
||||
value={`${col.name} ${col.label}`}
|
||||
onSelect={() => {
|
||||
updateField(field.id, {
|
||||
columnName: col.name,
|
||||
// 라벨이 기본값이면 컬럼 라벨로 자동 설정
|
||||
...(field.label.startsWith("새 필드") || field.label.startsWith("field_")
|
||||
? { label: col.label || col.name }
|
||||
: {})
|
||||
});
|
||||
setColumnSearchOpen(prev => ({ ...prev, [field.id]: false }));
|
||||
}}
|
||||
className="text-xs"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
field.columnName === col.name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="font-medium">{col.name}</span>
|
||||
{col.label && col.label !== col.name && (
|
||||
<span className="text-muted-foreground">({col.label})</span>
|
||||
)}
|
||||
</div>
|
||||
{tableName && (
|
||||
<span className="text-[9px] text-muted-foreground">{tableName}</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Input
|
||||
value={field.columnName}
|
||||
onChange={(e) => updateField(field.id, { columnName: e.target.value })}
|
||||
className="h-6 text-[9px] mt-0.5"
|
||||
placeholder="저장 테이블을 먼저 설정하세요"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -821,6 +917,87 @@ export function SectionLayoutModal({
|
|||
className="h-5 text-[8px]"
|
||||
placeholder="라벨"
|
||||
/>
|
||||
{tableColumns.length > 0 ? (
|
||||
<Popover
|
||||
open={columnSearchOpen[`opt-${field.id}`] || false}
|
||||
onOpenChange={(open) => setColumnSearchOpen(prev => ({ ...prev, [`opt-${field.id}`]: open }))}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
className="h-6 w-full justify-between text-[8px] font-normal px-1"
|
||||
>
|
||||
{field.columnName ? (
|
||||
<div className="flex flex-col items-start text-left truncate">
|
||||
<span className="font-medium truncate">{field.columnName}</span>
|
||||
{(() => {
|
||||
const col = tableColumns.find(c => c.name === field.columnName);
|
||||
return col?.label && col.label !== field.columnName ? (
|
||||
<span className="text-[7px] text-muted-foreground truncate">({col.label})</span>
|
||||
) : null;
|
||||
})()}
|
||||
</div>
|
||||
) : (
|
||||
<span className="text-muted-foreground">컬럼...</span>
|
||||
)}
|
||||
<ChevronsUpDown className="h-2.5 w-2.5 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="p-0 w-[250px]" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="컬럼 검색..." className="text-xs" />
|
||||
<CommandList className="max-h-[180px]">
|
||||
<CommandEmpty className="text-xs py-2 text-center">
|
||||
컬럼을 찾을 수 없습니다.
|
||||
</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{tableColumns.map((col) => (
|
||||
<CommandItem
|
||||
key={col.name}
|
||||
value={`${col.name} ${col.label}`}
|
||||
onSelect={() => {
|
||||
const newGroups = localSection.optionalFieldGroups?.map((g) =>
|
||||
g.id === group.id
|
||||
? {
|
||||
...g,
|
||||
fields: g.fields.map((f) =>
|
||||
f.id === field.id
|
||||
? {
|
||||
...f,
|
||||
columnName: col.name,
|
||||
...(f.label.startsWith("필드 ") ? { label: col.label || col.name } : {})
|
||||
}
|
||||
: f
|
||||
),
|
||||
}
|
||||
: g
|
||||
);
|
||||
updateSection({ optionalFieldGroups: newGroups });
|
||||
setColumnSearchOpen(prev => ({ ...prev, [`opt-${field.id}`]: false }));
|
||||
}}
|
||||
className="text-[9px]"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-1 h-2.5 w-2.5",
|
||||
field.columnName === col.name ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{col.name}</span>
|
||||
{col.label && col.label !== col.name && (
|
||||
<span className="text-[8px] text-muted-foreground">({col.label})</span>
|
||||
)}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Input
|
||||
value={field.columnName}
|
||||
onChange={(e) => {
|
||||
|
|
@ -839,6 +1016,7 @@ export function SectionLayoutModal({
|
|||
className="h-5 text-[8px]"
|
||||
placeholder="컬럼명"
|
||||
/>
|
||||
)}
|
||||
<Select
|
||||
value={field.fieldType}
|
||||
onValueChange={(value) => {
|
||||
|
|
@ -947,3 +1125,4 @@ export function SectionLayoutModal({
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -699,6 +699,357 @@ export function TableColumnSettingsModal({
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 동적 Select 옵션 (소스 테이블에서 로드) */}
|
||||
<Separator />
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="text-sm font-medium">동적 옵션 (소스 테이블에서 로드)</h4>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
소스 테이블에서 옵션을 동적으로 가져옵니다. 조건부 테이블 필터가 자동 적용됩니다.
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={localColumn.dynamicSelectOptions?.enabled ?? false}
|
||||
onCheckedChange={(checked) => {
|
||||
updateColumn({
|
||||
dynamicSelectOptions: checked
|
||||
? {
|
||||
enabled: true,
|
||||
sourceField: "",
|
||||
distinct: true,
|
||||
}
|
||||
: undefined,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{localColumn.dynamicSelectOptions?.enabled && (
|
||||
<div className="space-y-3 pl-2 border-l-2 border-primary/20">
|
||||
{/* 소스 필드 */}
|
||||
<div>
|
||||
<Label className="text-xs">소스 컬럼</Label>
|
||||
<p className="text-[10px] text-muted-foreground mb-1">
|
||||
소스 테이블에서 옵션 값을 가져올 컬럼
|
||||
</p>
|
||||
{sourceTableColumns.length > 0 ? (
|
||||
<Select
|
||||
value={localColumn.dynamicSelectOptions.sourceField || ""}
|
||||
onValueChange={(value) => {
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
sourceField: value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="컬럼 선택" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sourceTableColumns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_name} {col.comment && `(${col.comment})`}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<Input
|
||||
value={localColumn.dynamicSelectOptions.sourceField || ""}
|
||||
onChange={(e) => {
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
sourceField: e.target.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
placeholder="inspection_item"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 라벨 필드 */}
|
||||
<div>
|
||||
<Label className="text-xs">라벨 컬럼 (선택)</Label>
|
||||
<p className="text-[10px] text-muted-foreground mb-1">
|
||||
표시할 라벨 컬럼 (없으면 소스 컬럼 값 사용)
|
||||
</p>
|
||||
{sourceTableColumns.length > 0 ? (
|
||||
<Select
|
||||
value={localColumn.dynamicSelectOptions.labelField || ""}
|
||||
onValueChange={(value) => {
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
labelField: value || undefined,
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-8 text-xs">
|
||||
<SelectValue placeholder="(소스 컬럼과 동일)" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="">없음 (소스 컬럼 사용)</SelectItem>
|
||||
{sourceTableColumns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_name} {col.comment && `(${col.comment})`}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<Input
|
||||
value={localColumn.dynamicSelectOptions.labelField || ""}
|
||||
onChange={(e) => {
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
labelField: e.target.value || undefined,
|
||||
},
|
||||
});
|
||||
}}
|
||||
placeholder="(비워두면 소스 컬럼 사용)"
|
||||
className="h-8 text-xs"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 행 선택 모드 */}
|
||||
<div className="space-y-2 pt-2 border-t">
|
||||
<div className="flex items-center gap-2">
|
||||
<Switch
|
||||
checked={localColumn.dynamicSelectOptions.rowSelectionMode?.enabled ?? false}
|
||||
onCheckedChange={(checked) => {
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
rowSelectionMode: checked
|
||||
? {
|
||||
enabled: true,
|
||||
autoFillMappings: [],
|
||||
}
|
||||
: undefined,
|
||||
},
|
||||
});
|
||||
}}
|
||||
className="scale-75"
|
||||
/>
|
||||
<div>
|
||||
<Label className="text-xs">행 선택 모드</Label>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
이 컬럼 선택 시 같은 소스 행의 다른 컬럼들도 자동 채움
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{localColumn.dynamicSelectOptions.rowSelectionMode?.enabled && (
|
||||
<div className="space-y-3 pl-4">
|
||||
{/* 소스 ID 저장 설정 */}
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<div>
|
||||
<Label className="text-[10px]">소스 ID 컬럼</Label>
|
||||
{sourceTableColumns.length > 0 ? (
|
||||
<Select
|
||||
value={localColumn.dynamicSelectOptions.rowSelectionMode.sourceIdColumn || ""}
|
||||
onValueChange={(value) => {
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
rowSelectionMode: {
|
||||
...localColumn.dynamicSelectOptions!.rowSelectionMode!,
|
||||
sourceIdColumn: value || undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs mt-1">
|
||||
<SelectValue placeholder="id" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sourceTableColumns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<Input
|
||||
value={localColumn.dynamicSelectOptions.rowSelectionMode.sourceIdColumn || ""}
|
||||
onChange={(e) => {
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
rowSelectionMode: {
|
||||
...localColumn.dynamicSelectOptions!.rowSelectionMode!,
|
||||
sourceIdColumn: e.target.value || undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
placeholder="id"
|
||||
className="h-7 text-xs mt-1"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-[10px]">저장할 필드</Label>
|
||||
<Input
|
||||
value={localColumn.dynamicSelectOptions.rowSelectionMode.targetIdField || ""}
|
||||
onChange={(e) => {
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
rowSelectionMode: {
|
||||
...localColumn.dynamicSelectOptions!.rowSelectionMode!,
|
||||
targetIdField: e.target.value || undefined,
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
placeholder="inspection_standard_id"
|
||||
className="h-7 text-xs mt-1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 자동 채움 매핑 */}
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<Label className="text-[10px]">자동 채움 매핑</Label>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const currentMappings = localColumn.dynamicSelectOptions?.rowSelectionMode?.autoFillMappings || [];
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
rowSelectionMode: {
|
||||
...localColumn.dynamicSelectOptions!.rowSelectionMode!,
|
||||
autoFillMappings: [...currentMappings, { sourceColumn: "", targetField: "" }],
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
className="h-6 text-[10px] px-2"
|
||||
>
|
||||
<Plus className="h-3 w-3 mr-1" />
|
||||
매핑 추가
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{(localColumn.dynamicSelectOptions.rowSelectionMode.autoFillMappings || []).map((mapping, idx) => (
|
||||
<div key={idx} className="flex items-center gap-2">
|
||||
{sourceTableColumns.length > 0 ? (
|
||||
<Select
|
||||
value={mapping.sourceColumn}
|
||||
onValueChange={(value) => {
|
||||
const newMappings = [...(localColumn.dynamicSelectOptions?.rowSelectionMode?.autoFillMappings || [])];
|
||||
newMappings[idx] = { ...newMappings[idx], sourceColumn: value };
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
rowSelectionMode: {
|
||||
...localColumn.dynamicSelectOptions!.rowSelectionMode!,
|
||||
autoFillMappings: newMappings,
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="h-7 text-xs flex-1">
|
||||
<SelectValue placeholder="소스 컬럼" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{sourceTableColumns.map((col) => (
|
||||
<SelectItem key={col.column_name} value={col.column_name}>
|
||||
{col.column_name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
) : (
|
||||
<Input
|
||||
value={mapping.sourceColumn}
|
||||
onChange={(e) => {
|
||||
const newMappings = [...(localColumn.dynamicSelectOptions?.rowSelectionMode?.autoFillMappings || [])];
|
||||
newMappings[idx] = { ...newMappings[idx], sourceColumn: e.target.value };
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
rowSelectionMode: {
|
||||
...localColumn.dynamicSelectOptions!.rowSelectionMode!,
|
||||
autoFillMappings: newMappings,
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
placeholder="소스 컬럼"
|
||||
className="h-7 text-xs flex-1"
|
||||
/>
|
||||
)}
|
||||
<span className="text-xs text-muted-foreground">→</span>
|
||||
<Input
|
||||
value={mapping.targetField}
|
||||
onChange={(e) => {
|
||||
const newMappings = [...(localColumn.dynamicSelectOptions?.rowSelectionMode?.autoFillMappings || [])];
|
||||
newMappings[idx] = { ...newMappings[idx], targetField: e.target.value };
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
rowSelectionMode: {
|
||||
...localColumn.dynamicSelectOptions!.rowSelectionMode!,
|
||||
autoFillMappings: newMappings,
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
placeholder="타겟 필드"
|
||||
className="h-7 text-xs flex-1"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={() => {
|
||||
const newMappings = (localColumn.dynamicSelectOptions?.rowSelectionMode?.autoFillMappings || []).filter((_, i) => i !== idx);
|
||||
updateColumn({
|
||||
dynamicSelectOptions: {
|
||||
...localColumn.dynamicSelectOptions!,
|
||||
rowSelectionMode: {
|
||||
...localColumn.dynamicSelectOptions!.rowSelectionMode!,
|
||||
autoFillMappings: newMappings,
|
||||
},
|
||||
},
|
||||
});
|
||||
}}
|
||||
className="h-7 w-7 p-0 text-destructive"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
{(localColumn.dynamicSelectOptions.rowSelectionMode.autoFillMappings || []).length === 0 && (
|
||||
<p className="text-[10px] text-muted-foreground text-center py-2 border border-dashed rounded">
|
||||
매핑을 추가하세요 (예: inspection_criteria → inspection_standard)
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</TabsContent>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -80,8 +80,12 @@ export interface FormFieldConfig {
|
|||
linkedFieldGroup?: {
|
||||
enabled?: boolean; // 사용 여부
|
||||
sourceTable?: string; // 소스 테이블 (예: dept_info)
|
||||
displayColumn?: string; // 표시할 컬럼 (예: dept_name) - 드롭다운에 보여줄 텍스트
|
||||
displayFormat?: "name_only" | "code_name" | "name_code"; // 표시 형식
|
||||
displayColumn?: string; // 메인 표시 컬럼 (예: item_name) - 드롭다운에 보여줄 메인 텍스트
|
||||
subDisplayColumn?: string; // 서브 표시 컬럼 (예: item_number) - 메인과 함께 표시될 서브 텍스트
|
||||
displayFormat?: "name_only" | "code_name" | "name_code" | "custom"; // 표시 형식
|
||||
// 커스텀 표시 형식 (displayFormat이 "custom"일 때 사용)
|
||||
// 형식: {컬럼명} 으로 치환됨 (예: "{item_name} ({item_number})" → "철판 (ITEM-001)")
|
||||
customDisplayFormat?: string;
|
||||
mappings?: LinkedFieldMapping[]; // 저장할 컬럼 매핑 (첫 번째 매핑의 sourceColumn이 드롭다운 값으로 사용됨)
|
||||
};
|
||||
|
||||
|
|
@ -253,7 +257,66 @@ export interface TableSectionConfig {
|
|||
modalTitle?: string; // 모달 제목 (기본: "항목 검색 및 선택")
|
||||
multiSelect?: boolean; // 다중 선택 허용 (기본: true)
|
||||
maxHeight?: string; // 테이블 최대 높이 (기본: "400px")
|
||||
|
||||
// 추가 버튼 타입
|
||||
// - search: 검색 모달 열기 (기본값) - 기존 데이터에서 선택
|
||||
// - addRow: 빈 행 직접 추가 - 새 데이터 직접 입력
|
||||
addButtonType?: "search" | "addRow";
|
||||
};
|
||||
|
||||
// 7. 조건부 테이블 설정 (고급)
|
||||
conditionalTable?: ConditionalTableConfig;
|
||||
}
|
||||
|
||||
/**
|
||||
* 조건부 테이블 설정
|
||||
* 조건(검사유형 등)에 따라 다른 데이터를 표시하고 저장합니다.
|
||||
*
|
||||
* 사용 예시:
|
||||
* - 품목검사정보: 검사유형(입고/공정/출고/재고/최종)별로 검사항목 관리
|
||||
* - BOM 관리: 품목유형별 자재 구성
|
||||
* - 공정 관리: 공정유형별 작업 항목
|
||||
*/
|
||||
export interface ConditionalTableConfig {
|
||||
enabled: boolean;
|
||||
|
||||
// 트리거 UI 타입
|
||||
// - checkbox: 체크박스로 다중 선택 (선택된 조건들을 탭으로 표시)
|
||||
// - dropdown: 드롭다운으로 단일 선택
|
||||
// - tabs: 모든 옵션을 탭으로 표시
|
||||
triggerType: "checkbox" | "dropdown" | "tabs";
|
||||
|
||||
// 조건 값을 저장할 컬럼 (예: inspection_type)
|
||||
// 저장 시 각 행에 이 컬럼으로 조건 값이 자동 저장됨
|
||||
conditionColumn: string;
|
||||
|
||||
// 조건 옵션 목록
|
||||
options: ConditionalTableOption[];
|
||||
|
||||
// 옵션을 테이블에서 동적으로 로드할 경우
|
||||
optionSource?: {
|
||||
enabled: boolean;
|
||||
tableName: string; // 예: inspection_type_code
|
||||
valueColumn: string; // 예: type_code
|
||||
labelColumn: string; // 예: type_name
|
||||
filterCondition?: string; // 예: is_active = 'Y'
|
||||
};
|
||||
|
||||
// 소스 테이블 필터링 설정
|
||||
// 조건 선택 시 소스 테이블(검사기준 등)에서 해당 조건으로 필터링
|
||||
sourceFilter?: {
|
||||
enabled: boolean;
|
||||
filterColumn: string; // 소스 테이블에서 필터링할 컬럼 (예: inspection_type)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 조건부 테이블 옵션
|
||||
*/
|
||||
export interface ConditionalTableOption {
|
||||
id: string;
|
||||
value: string; // 저장될 값 (예: "입고검사")
|
||||
label: string; // 표시 라벨 (예: "입고검사")
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -323,6 +386,30 @@ export interface TableColumnConfig {
|
|||
// Select 옵션 (type이 "select"일 때)
|
||||
selectOptions?: { value: string; label: string }[];
|
||||
|
||||
// 동적 Select 옵션 (소스 테이블에서 옵션 로드)
|
||||
// 조건부 테이블의 sourceFilter가 활성화되어 있으면 자동으로 필터 적용
|
||||
dynamicSelectOptions?: {
|
||||
enabled: boolean;
|
||||
sourceField: string; // 소스 테이블에서 가져올 컬럼 (예: inspection_item)
|
||||
labelField?: string; // 표시 라벨 컬럼 (없으면 sourceField 사용)
|
||||
distinct?: boolean; // 중복 제거 (기본: true)
|
||||
|
||||
// 행 선택 모드: 이 컬럼 선택 시 같은 소스 행의 다른 컬럼들도 자동 채움
|
||||
// 활성화하면 이 컬럼이 "대표 컬럼"이 되어 선택 시 연관 컬럼들이 자동으로 채워짐
|
||||
rowSelectionMode?: {
|
||||
enabled: boolean;
|
||||
// 자동 채움할 컬럼 매핑 (소스 컬럼 → 타겟 필드)
|
||||
// 예: [{ sourceColumn: "inspection_criteria", targetField: "inspection_standard" }]
|
||||
autoFillColumns?: {
|
||||
sourceColumn: string; // 소스 테이블의 컬럼
|
||||
targetField: string; // 현재 테이블의 필드
|
||||
}[];
|
||||
// 소스 테이블의 ID 컬럼 (참조 ID 저장용)
|
||||
sourceIdColumn?: string; // 예: "id"
|
||||
targetIdField?: string; // 예: "inspection_standard_id"
|
||||
};
|
||||
};
|
||||
|
||||
// 값 매핑 (핵심 기능) - 고급 설정용
|
||||
valueMapping?: ValueMappingConfig;
|
||||
|
||||
|
|
@ -335,6 +422,35 @@ export interface TableColumnConfig {
|
|||
// 날짜 일괄 적용 (type이 "date"일 때만 사용)
|
||||
// 활성화 시 첫 번째 날짜 입력 시 모든 행에 동일한 날짜가 자동 적용됨
|
||||
batchApply?: boolean;
|
||||
|
||||
// 부모에서 값 받기 (모든 행에 동일한 값 적용)
|
||||
receiveFromParent?: boolean; // 부모에서 값 받기 활성화
|
||||
parentFieldName?: string; // 부모 필드명 (미지정 시 field와 동일)
|
||||
|
||||
// 저장 설정 (컬럼별 저장 여부 및 참조 표시)
|
||||
saveConfig?: TableColumnSaveConfig;
|
||||
}
|
||||
|
||||
/**
|
||||
* 테이블 컬럼 저장 설정
|
||||
* - 컬럼별로 저장 여부를 설정하고, 저장하지 않는 컬럼은 참조 ID로 조회하여 표시
|
||||
*/
|
||||
export interface TableColumnSaveConfig {
|
||||
// 저장 여부 (기본값: true)
|
||||
// true: 사용자가 입력/선택한 값을 DB에 저장
|
||||
// false: 저장하지 않고, 참조 ID로 소스 테이블을 조회하여 표시만 함
|
||||
saveToTarget: boolean;
|
||||
|
||||
// 참조 표시 설정 (saveToTarget이 false일 때 사용)
|
||||
referenceDisplay?: {
|
||||
// 참조할 ID 컬럼 (같은 테이블 내의 다른 컬럼)
|
||||
// 예: "inspection_standard_id"
|
||||
referenceIdField: string;
|
||||
|
||||
// 소스 테이블에서 가져올 컬럼
|
||||
// 예: "inspection_item" → 소스 테이블의 inspection_item 값을 표시
|
||||
sourceColumn: string;
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================
|
||||
|
|
@ -588,6 +704,10 @@ export interface SubTableSaveConfig {
|
|||
// 저장 전 기존 데이터 삭제
|
||||
deleteExistingBefore?: boolean;
|
||||
deleteOnlySubItems?: boolean; // 메인 항목은 유지하고 서브만 삭제
|
||||
|
||||
// 수정 모드에서 서브 테이블 데이터 로드
|
||||
loadOnEdit?: boolean; // 수정 시 서브 테이블 데이터 로드 여부
|
||||
loadOnlySubItems?: boolean; // 서브 항목만 로드 (메인 항목 제외)
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -646,6 +766,7 @@ export interface ModalConfig {
|
|||
showCloseButton?: boolean;
|
||||
|
||||
// 버튼 설정
|
||||
showSaveButton?: boolean; // 저장 버튼 표시 (기본: true)
|
||||
saveButtonText?: string; // 저장 버튼 텍스트 (기본: "저장")
|
||||
cancelButtonText?: string; // 취소 버튼 텍스트 (기본: "취소")
|
||||
showResetButton?: boolean; // 초기화 버튼 표시
|
||||
|
|
@ -705,6 +826,8 @@ export interface UniversalFormModalComponentProps {
|
|||
export interface UniversalFormModalConfigPanelProps {
|
||||
config: UniversalFormModalConfig;
|
||||
onChange: (config: UniversalFormModalConfig) => void;
|
||||
// 화면 설계 시 같은 화면의 다른 컴포넌트들 (부모 데이터 필드 추출용)
|
||||
allComponents?: any[];
|
||||
}
|
||||
|
||||
// 필드 타입 옵션
|
||||
|
|
@ -742,6 +865,7 @@ export const LINKED_FIELD_DISPLAY_FORMAT_OPTIONS = [
|
|||
{ value: "name_only", label: "이름만 (예: 영업부)" },
|
||||
{ value: "code_name", label: "코드 - 이름 (예: SALES - 영업부)" },
|
||||
{ value: "name_code", label: "이름 (코드) (예: 영업부 (SALES))" },
|
||||
{ value: "custom", label: "커스텀 형식 (직접 입력)" },
|
||||
] as const;
|
||||
|
||||
// ============================================
|
||||
|
|
@ -809,3 +933,10 @@ export const LOOKUP_CONDITION_SOURCE_OPTIONS = [
|
|||
{ value: "sectionField", label: "다른 섹션" },
|
||||
{ value: "externalTable", label: "외부 테이블" },
|
||||
] as const;
|
||||
|
||||
// 조건부 테이블 트리거 타입 옵션
|
||||
export const CONDITIONAL_TABLE_TRIGGER_OPTIONS = [
|
||||
{ value: "checkbox", label: "체크박스 (다중 선택)" },
|
||||
{ value: "dropdown", label: "드롭다운 (단일 선택)" },
|
||||
{ value: "tabs", label: "탭 (전체 표시)" },
|
||||
] as const;
|
||||
|
|
|
|||
Loading…
Reference in New Issue