797 lines
38 KiB
TypeScript
797 lines
38 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
|
|
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, Database, Layers } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { SaveConfig, SubTableSaveConfig, SubTableFieldMapping, FormSectionConfig, FormFieldConfig } from "../types";
|
|
|
|
// 도움말 텍스트 컴포넌트
|
|
const HelpText = ({ children }: { children: React.ReactNode }) => (
|
|
<p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
|
|
);
|
|
|
|
interface SaveSettingsModalProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
saveConfig: SaveConfig;
|
|
sections: FormSectionConfig[];
|
|
onSave: (updates: SaveConfig) => void;
|
|
tables: { name: string; label: string }[];
|
|
tableColumns: { [tableName: string]: { name: string; type: string; label: string }[] };
|
|
onLoadTableColumns: (tableName: string) => void;
|
|
}
|
|
|
|
export function SaveSettingsModal({
|
|
open,
|
|
onOpenChange,
|
|
saveConfig,
|
|
sections,
|
|
onSave,
|
|
tables,
|
|
tableColumns,
|
|
onLoadTableColumns,
|
|
}: SaveSettingsModalProps) {
|
|
// 로컬 상태로 저장 설정 관리
|
|
const [localSaveConfig, setLocalSaveConfig] = useState<SaveConfig>(saveConfig);
|
|
|
|
// 저장 모드 (단일 테이블 vs 다중 테이블)
|
|
const [saveMode, setSaveMode] = useState<"single" | "multi">(
|
|
saveConfig.customApiSave?.enabled && saveConfig.customApiSave?.multiTable?.enabled ? "multi" : "single"
|
|
);
|
|
|
|
// open이 변경될 때마다 데이터 동기화
|
|
useEffect(() => {
|
|
if (open) {
|
|
setLocalSaveConfig(saveConfig);
|
|
setSaveMode(saveConfig.customApiSave?.enabled && saveConfig.customApiSave?.multiTable?.enabled ? "multi" : "single");
|
|
}
|
|
}, [open, saveConfig]);
|
|
|
|
// 저장 설정 업데이트 함수
|
|
const updateSaveConfig = (updates: Partial<SaveConfig>) => {
|
|
setLocalSaveConfig((prev) => ({ ...prev, ...updates }));
|
|
};
|
|
|
|
// 저장 함수
|
|
const handleSave = () => {
|
|
// 저장 모드에 따라 설정 조정
|
|
let finalConfig = { ...localSaveConfig };
|
|
|
|
if (saveMode === "single") {
|
|
// 단일 테이블 모드: customApiSave 비활성화
|
|
finalConfig = {
|
|
...finalConfig,
|
|
customApiSave: {
|
|
enabled: false,
|
|
apiType: "custom",
|
|
},
|
|
};
|
|
} else {
|
|
// 다중 테이블 모드: customApiSave 활성화
|
|
finalConfig = {
|
|
...finalConfig,
|
|
customApiSave: {
|
|
...finalConfig.customApiSave,
|
|
enabled: true,
|
|
apiType: "multi-table",
|
|
multiTable: {
|
|
...finalConfig.customApiSave?.multiTable,
|
|
enabled: true,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
onSave(finalConfig);
|
|
onOpenChange(false);
|
|
};
|
|
|
|
// 서브 테이블 추가
|
|
const addSubTable = () => {
|
|
const newSubTable: SubTableSaveConfig = {
|
|
enabled: true,
|
|
tableName: "",
|
|
repeatSectionId: "",
|
|
linkColumn: {
|
|
mainField: "",
|
|
subColumn: "",
|
|
},
|
|
fieldMappings: [],
|
|
};
|
|
|
|
const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || []), newSubTable];
|
|
updateSaveConfig({
|
|
customApiSave: {
|
|
...localSaveConfig.customApiSave,
|
|
apiType: "multi-table",
|
|
multiTable: {
|
|
...localSaveConfig.customApiSave?.multiTable,
|
|
enabled: true,
|
|
subTables,
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
// 서브 테이블 삭제
|
|
const removeSubTable = (index: number) => {
|
|
const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || [])];
|
|
subTables.splice(index, 1);
|
|
updateSaveConfig({
|
|
customApiSave: {
|
|
...localSaveConfig.customApiSave,
|
|
multiTable: {
|
|
...localSaveConfig.customApiSave?.multiTable,
|
|
subTables,
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
// 서브 테이블 업데이트
|
|
const updateSubTable = (index: number, updates: Partial<SubTableSaveConfig>) => {
|
|
const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || [])];
|
|
subTables[index] = { ...subTables[index], ...updates };
|
|
updateSaveConfig({
|
|
customApiSave: {
|
|
...localSaveConfig.customApiSave,
|
|
multiTable: {
|
|
...localSaveConfig.customApiSave?.multiTable,
|
|
subTables,
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
// 필드 매핑 추가
|
|
const addFieldMapping = (subTableIndex: number) => {
|
|
const newMapping: SubTableFieldMapping = {
|
|
formField: "",
|
|
targetColumn: "",
|
|
};
|
|
const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || [])];
|
|
const fieldMappings = [...(subTables[subTableIndex].fieldMappings || []), newMapping];
|
|
subTables[subTableIndex] = { ...subTables[subTableIndex], fieldMappings };
|
|
updateSaveConfig({
|
|
customApiSave: {
|
|
...localSaveConfig.customApiSave,
|
|
multiTable: {
|
|
...localSaveConfig.customApiSave?.multiTable,
|
|
subTables,
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
// 필드 매핑 삭제
|
|
const removeFieldMapping = (subTableIndex: number, mappingIndex: number) => {
|
|
const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || [])];
|
|
const fieldMappings = [...(subTables[subTableIndex].fieldMappings || [])];
|
|
fieldMappings.splice(mappingIndex, 1);
|
|
subTables[subTableIndex] = { ...subTables[subTableIndex], fieldMappings };
|
|
updateSaveConfig({
|
|
customApiSave: {
|
|
...localSaveConfig.customApiSave,
|
|
multiTable: {
|
|
...localSaveConfig.customApiSave?.multiTable,
|
|
subTables,
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
// 필드 매핑 업데이트
|
|
const updateFieldMapping = (subTableIndex: number, mappingIndex: number, updates: Partial<SubTableFieldMapping>) => {
|
|
const subTables = [...(localSaveConfig.customApiSave?.multiTable?.subTables || [])];
|
|
const fieldMappings = [...(subTables[subTableIndex].fieldMappings || [])];
|
|
fieldMappings[mappingIndex] = { ...fieldMappings[mappingIndex], ...updates };
|
|
subTables[subTableIndex] = { ...subTables[subTableIndex], fieldMappings };
|
|
updateSaveConfig({
|
|
customApiSave: {
|
|
...localSaveConfig.customApiSave,
|
|
multiTable: {
|
|
...localSaveConfig.customApiSave?.multiTable,
|
|
subTables,
|
|
},
|
|
},
|
|
});
|
|
};
|
|
|
|
// 메인 테이블 컬럼 목록
|
|
const mainTableColumns = localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName
|
|
? tableColumns[localSaveConfig.customApiSave.multiTable.mainTable.tableName] || []
|
|
: [];
|
|
|
|
// 반복 섹션 목록
|
|
const repeatSections = sections.filter((s) => s.repeatable);
|
|
|
|
// 모든 필드 목록 (반복 섹션 포함)
|
|
const getAllFields = (): { columnName: string; label: string; sectionTitle: string }[] => {
|
|
const fields: { columnName: string; label: string; sectionTitle: string }[] = [];
|
|
sections.forEach((section) => {
|
|
section.fields.forEach((field) => {
|
|
fields.push({
|
|
columnName: field.columnName,
|
|
label: field.label,
|
|
sectionTitle: section.title,
|
|
});
|
|
});
|
|
});
|
|
return fields;
|
|
};
|
|
|
|
const allFields = getAllFields();
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[800px] max-h-[90vh] flex flex-col p-0">
|
|
<DialogHeader className="px-4 pt-4 pb-2 border-b shrink-0">
|
|
<DialogTitle className="text-base">저장 설정</DialogTitle>
|
|
<DialogDescription className="text-xs">
|
|
폼 데이터를 데이터베이스에 저장하는 방식을 설정합니다.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-hidden px-4">
|
|
<ScrollArea className="h-[calc(90vh-180px)]">
|
|
<div className="space-y-4 py-3 pr-3">
|
|
{/* 저장 모드 선택 */}
|
|
<div className="space-y-3 border rounded-lg p-3 bg-card">
|
|
<Label className="text-xs font-semibold">저장 모드</Label>
|
|
<RadioGroup value={saveMode} onValueChange={(value) => setSaveMode(value as "single" | "multi")}>
|
|
<div className="flex items-center space-x-2">
|
|
<RadioGroupItem value="single" id="mode-single" />
|
|
<Label htmlFor="mode-single" className="text-[10px] cursor-pointer">
|
|
단일 테이블 저장
|
|
</Label>
|
|
</div>
|
|
<HelpText>모든 필드를 하나의 테이블에 저장합니다 (기본 방식)</HelpText>
|
|
|
|
<div className="flex items-center space-x-2 pt-2">
|
|
<RadioGroupItem value="multi" id="mode-multi" />
|
|
<Label htmlFor="mode-multi" className="text-[10px] cursor-pointer">
|
|
다중 테이블 저장
|
|
</Label>
|
|
</div>
|
|
<HelpText>
|
|
메인 테이블 + 서브 테이블에 트랜잭션으로 저장합니다
|
|
<br />
|
|
예: 주문(orders) + 주문상세(order_items), 사원(user_info) + 부서(user_dept)
|
|
</HelpText>
|
|
</RadioGroup>
|
|
</div>
|
|
|
|
{/* 단일 테이블 저장 설정 */}
|
|
{saveMode === "single" && (
|
|
<div className="space-y-3 border rounded-lg p-3 bg-card">
|
|
<div className="flex items-center gap-2">
|
|
<Database className="h-4 w-4 text-blue-600" />
|
|
<h3 className="text-xs font-semibold">단일 테이블 설정</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">저장 테이블</Label>
|
|
<Select
|
|
value={localSaveConfig.tableName || ""}
|
|
onValueChange={(value) => {
|
|
updateSaveConfig({ tableName: value });
|
|
onLoadTableColumns(value);
|
|
}}
|
|
>
|
|
<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>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<HelpText>폼 데이터를 저장할 테이블을 선택하세요</HelpText>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">키 컬럼 (Primary Key)</Label>
|
|
<Input
|
|
value={localSaveConfig.primaryKeyColumn || ""}
|
|
onChange={(e) => updateSaveConfig({ primaryKeyColumn: e.target.value })}
|
|
placeholder="id"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
<HelpText>
|
|
수정 모드에서 사용할 기본키 컬럼명
|
|
<br />
|
|
예: id, user_id, order_id
|
|
</HelpText>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 다중 테이블 저장 설정 */}
|
|
{saveMode === "multi" && (
|
|
<div className="space-y-3">
|
|
{/* 메인 테이블 설정 */}
|
|
<div className="border rounded-lg p-3 bg-card space-y-3">
|
|
<div className="flex items-center gap-2">
|
|
<Database className="h-4 w-4 text-blue-600" />
|
|
<h3 className="text-xs font-semibold">메인 테이블 설정</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">메인 테이블명</Label>
|
|
<Select
|
|
value={localSaveConfig.customApiSave?.multiTable?.mainTable?.tableName || ""}
|
|
onValueChange={(value) => {
|
|
updateSaveConfig({
|
|
customApiSave: {
|
|
...localSaveConfig.customApiSave,
|
|
apiType: "multi-table",
|
|
multiTable: {
|
|
...localSaveConfig.customApiSave?.multiTable,
|
|
enabled: true,
|
|
mainTable: {
|
|
...localSaveConfig.customApiSave?.multiTable?.mainTable,
|
|
tableName: value,
|
|
},
|
|
},
|
|
},
|
|
});
|
|
onLoadTableColumns(value);
|
|
}}
|
|
>
|
|
<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>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<HelpText>주요 데이터를 저장할 메인 테이블 (예: orders, user_info)</HelpText>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">메인 테이블 키 컬럼</Label>
|
|
{mainTableColumns.length > 0 ? (
|
|
<Select
|
|
value={localSaveConfig.customApiSave?.multiTable?.mainTable?.primaryKeyColumn || ""}
|
|
onValueChange={(value) =>
|
|
updateSaveConfig({
|
|
customApiSave: {
|
|
...localSaveConfig.customApiSave,
|
|
multiTable: {
|
|
...localSaveConfig.customApiSave?.multiTable,
|
|
mainTable: {
|
|
...localSaveConfig.customApiSave?.multiTable?.mainTable,
|
|
primaryKeyColumn: value,
|
|
},
|
|
},
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs mt-1">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{mainTableColumns.map((col) => (
|
|
<SelectItem key={col.name} value={col.name}>
|
|
{col.name}
|
|
{col.label !== col.name && ` (${col.label})`}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={localSaveConfig.customApiSave?.multiTable?.mainTable?.primaryKeyColumn || ""}
|
|
onChange={(e) =>
|
|
updateSaveConfig({
|
|
customApiSave: {
|
|
...localSaveConfig.customApiSave,
|
|
multiTable: {
|
|
...localSaveConfig.customApiSave?.multiTable,
|
|
mainTable: {
|
|
...localSaveConfig.customApiSave?.multiTable?.mainTable,
|
|
primaryKeyColumn: e.target.value,
|
|
},
|
|
},
|
|
},
|
|
})
|
|
}
|
|
placeholder="id"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
)}
|
|
<HelpText>메인 테이블의 기본키 컬럼 (예: order_id, user_id)</HelpText>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 서브 테이블 목록 */}
|
|
<div className="border rounded-lg p-3 bg-card space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<Layers className="h-4 w-4 text-orange-600" />
|
|
<h3 className="text-xs font-semibold">서브 테이블 설정</h3>
|
|
<span className="text-[9px] text-muted-foreground">
|
|
({(localSaveConfig.customApiSave?.multiTable?.subTables || []).length}개)
|
|
</span>
|
|
</div>
|
|
<Button size="sm" variant="outline" onClick={addSubTable} className="h-6 text-[9px] px-2">
|
|
<Plus className="h-3 w-3 mr-1" />
|
|
서브 테이블 추가
|
|
</Button>
|
|
</div>
|
|
|
|
<HelpText>
|
|
반복 섹션 데이터를 별도 테이블에 저장합니다.
|
|
<br />
|
|
예: 주문상세(order_items), 겸직부서(user_dept)
|
|
</HelpText>
|
|
|
|
{(localSaveConfig.customApiSave?.multiTable?.subTables || []).length === 0 ? (
|
|
<div className="text-center py-6 border border-dashed rounded-lg">
|
|
<p className="text-[10px] text-muted-foreground mb-1">서브 테이블이 없습니다</p>
|
|
<p className="text-[9px] text-muted-foreground">위의 "서브 테이블 추가" 버튼을 클릭하세요</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-3 pt-2">
|
|
{(localSaveConfig.customApiSave?.multiTable?.subTables || []).map((subTable, subIndex) => {
|
|
const subTableColumns = subTable.tableName ? tableColumns[subTable.tableName] || [] : [];
|
|
return (
|
|
<Accordion key={subIndex} type="single" collapsible>
|
|
<AccordionItem value={`sub-${subIndex}`} className="border rounded-lg bg-orange-50/30">
|
|
<AccordionTrigger className="px-3 py-2 text-xs hover:no-underline">
|
|
<div className="flex items-center justify-between flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-medium">
|
|
서브 테이블 {subIndex + 1}: {subTable.tableName || "(미설정)"}
|
|
</span>
|
|
<span className="text-[9px] text-muted-foreground">
|
|
({subTable.fieldMappings?.length || 0}개 매핑)
|
|
</span>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
removeSubTable(subIndex);
|
|
}}
|
|
className="h-5 w-5 p-0 text-destructive hover:text-destructive mr-2"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-3 pb-3 space-y-3">
|
|
<div>
|
|
<Label className="text-[10px]">서브 테이블명</Label>
|
|
<Select
|
|
value={subTable.tableName || ""}
|
|
onValueChange={(value) => {
|
|
updateSubTable(subIndex, { tableName: value });
|
|
onLoadTableColumns(value);
|
|
}}
|
|
>
|
|
<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>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<HelpText>반복 데이터를 저장할 서브 테이블</HelpText>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">연결할 반복 섹션</Label>
|
|
<Select
|
|
value={subTable.repeatSectionId || ""}
|
|
onValueChange={(value) => updateSubTable(subIndex, { repeatSectionId: value })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs mt-1">
|
|
<SelectValue placeholder="섹션 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{repeatSections.length === 0 ? (
|
|
<div className="px-2 py-1.5 text-xs text-muted-foreground">
|
|
반복 섹션이 없습니다
|
|
</div>
|
|
) : (
|
|
repeatSections.map((section) => (
|
|
<SelectItem key={section.id} value={section.id}>
|
|
{section.title}
|
|
</SelectItem>
|
|
))
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
<HelpText>이 서브 테이블에 저장할 반복 섹션을 선택하세요</HelpText>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="space-y-2">
|
|
<Label className="text-[10px] font-medium">테이블 연결 설정</Label>
|
|
<HelpText>메인 테이블과 서브 테이블을 연결하는 키 컬럼</HelpText>
|
|
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<Label className="text-[9px]">메인 필드</Label>
|
|
{mainTableColumns.length > 0 ? (
|
|
<Select
|
|
value={subTable.linkColumn?.mainField || ""}
|
|
onValueChange={(value) =>
|
|
updateSubTable(subIndex, {
|
|
linkColumn: { ...subTable.linkColumn, mainField: value },
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-6 text-[9px] mt-0.5">
|
|
<SelectValue placeholder="필드 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{mainTableColumns.map((col) => (
|
|
<SelectItem key={col.name} value={col.name}>
|
|
{col.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={subTable.linkColumn?.mainField || ""}
|
|
onChange={(e) =>
|
|
updateSubTable(subIndex, {
|
|
linkColumn: { ...subTable.linkColumn, mainField: e.target.value },
|
|
})
|
|
}
|
|
placeholder="order_id"
|
|
className="h-6 text-[9px] mt-0.5"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[9px]">서브 컬럼</Label>
|
|
{subTableColumns.length > 0 ? (
|
|
<Select
|
|
value={subTable.linkColumn?.subColumn || ""}
|
|
onValueChange={(value) =>
|
|
updateSubTable(subIndex, {
|
|
linkColumn: { ...subTable.linkColumn, subColumn: value },
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-6 text-[9px] mt-0.5">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{subTableColumns.map((col) => (
|
|
<SelectItem key={col.name} value={col.name}>
|
|
{col.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={subTable.linkColumn?.subColumn || ""}
|
|
onChange={(e) =>
|
|
updateSubTable(subIndex, {
|
|
linkColumn: { ...subTable.linkColumn, subColumn: e.target.value },
|
|
})
|
|
}
|
|
placeholder="order_id"
|
|
className="h-6 text-[9px] mt-0.5"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
<div className="space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-[10px] font-medium">필드 매핑</Label>
|
|
<Button
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={() => addFieldMapping(subIndex)}
|
|
className="h-5 text-[8px] px-1.5"
|
|
>
|
|
<Plus className="h-2.5 w-2.5 mr-0.5" />
|
|
추가
|
|
</Button>
|
|
</div>
|
|
<HelpText>폼 필드를 서브 테이블 컬럼에 매핑합니다</HelpText>
|
|
|
|
{(subTable.fieldMappings || []).length === 0 ? (
|
|
<div className="text-center py-3 border border-dashed rounded-lg">
|
|
<p className="text-[9px] text-muted-foreground">매핑이 없습니다</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{(subTable.fieldMappings || []).map((mapping, mapIndex) => (
|
|
<div key={mapIndex} className="border rounded-lg p-2 bg-white space-y-1.5">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[8px] font-medium text-muted-foreground">
|
|
매핑 {mapIndex + 1}
|
|
</span>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => removeFieldMapping(subIndex, mapIndex)}
|
|
className="h-4 w-4 p-0 text-destructive"
|
|
>
|
|
<Trash2 className="h-2.5 w-2.5" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[8px]">폼 필드</Label>
|
|
<Select
|
|
value={mapping.formField || ""}
|
|
onValueChange={(value) =>
|
|
updateFieldMapping(subIndex, mapIndex, { formField: value })
|
|
}
|
|
>
|
|
<SelectTrigger className="h-5 text-[8px] mt-0.5">
|
|
<SelectValue placeholder="필드 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{allFields.map((field) => (
|
|
<SelectItem key={field.columnName} value={field.columnName}>
|
|
{field.label} ({field.sectionTitle})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="text-center text-[8px] text-muted-foreground">↓</div>
|
|
|
|
<div>
|
|
<Label className="text-[8px]">서브 테이블 컬럼</Label>
|
|
{subTableColumns.length > 0 ? (
|
|
<Select
|
|
value={mapping.targetColumn || ""}
|
|
onValueChange={(value) =>
|
|
updateFieldMapping(subIndex, mapIndex, { targetColumn: value })
|
|
}
|
|
>
|
|
<SelectTrigger className="h-5 text-[8px] mt-0.5">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{subTableColumns.map((col) => (
|
|
<SelectItem key={col.name} value={col.name}>
|
|
{col.name}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={mapping.targetColumn || ""}
|
|
onChange={(e) =>
|
|
updateFieldMapping(subIndex, mapIndex, {
|
|
targetColumn: e.target.value,
|
|
})
|
|
}
|
|
placeholder="item_name"
|
|
className="h-5 text-[8px] mt-0.5"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* 저장 후 동작 */}
|
|
<div className="space-y-2 border rounded-lg p-3 bg-card">
|
|
<h3 className="text-xs font-semibold">저장 후 동작</h3>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px]">토스트 메시지 표시</span>
|
|
<Switch
|
|
checked={localSaveConfig.afterSave?.showToast !== false}
|
|
onCheckedChange={(checked) =>
|
|
updateSaveConfig({
|
|
afterSave: {
|
|
...localSaveConfig.afterSave,
|
|
showToast: checked,
|
|
},
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<HelpText>저장 성공 시 "저장되었습니다" 메시지를 표시합니다</HelpText>
|
|
|
|
<Separator className="my-2" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px]">모달 자동 닫기</span>
|
|
<Switch
|
|
checked={localSaveConfig.afterSave?.closeModal !== false}
|
|
onCheckedChange={(checked) =>
|
|
updateSaveConfig({
|
|
afterSave: {
|
|
...localSaveConfig.afterSave,
|
|
closeModal: checked,
|
|
},
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<HelpText>저장 성공 시 모달을 자동으로 닫습니다</HelpText>
|
|
|
|
<Separator className="my-2" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px]">부모 화면 새로고침</span>
|
|
<Switch
|
|
checked={localSaveConfig.afterSave?.refreshParent !== false}
|
|
onCheckedChange={(checked) =>
|
|
updateSaveConfig({
|
|
afterSave: {
|
|
...localSaveConfig.afterSave,
|
|
refreshParent: checked,
|
|
},
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<HelpText>저장 후 부모 화면의 데이터를 새로고침합니다</HelpText>
|
|
</div>
|
|
</div>
|
|
</ScrollArea>
|
|
</div>
|
|
|
|
<DialogFooter className="px-4 py-3 border-t shrink-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>
|
|
);
|
|
}
|
|
|