844 lines
40 KiB
TypeScript
844 lines
40 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 { 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, Settings as SettingsIcon } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
FormFieldConfig,
|
|
LinkedFieldMapping,
|
|
FIELD_TYPE_OPTIONS,
|
|
SELECT_OPTION_TYPE_OPTIONS,
|
|
LINKED_FIELD_DISPLAY_FORMAT_OPTIONS,
|
|
} from "../types";
|
|
|
|
// 도움말 텍스트 컴포넌트
|
|
const HelpText = ({ children }: { children: React.ReactNode }) => (
|
|
<p className="text-[10px] text-muted-foreground mt-0.5">{children}</p>
|
|
);
|
|
|
|
interface FieldDetailSettingsModalProps {
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
field: FormFieldConfig;
|
|
onSave: (updates: Partial<FormFieldConfig>) => void;
|
|
tables: { name: string; label: string }[];
|
|
tableColumns: { [tableName: string]: { name: string; type: string; label: string }[] };
|
|
numberingRules: { id: string; name: string }[];
|
|
onLoadTableColumns: (tableName: string) => void;
|
|
}
|
|
|
|
export function FieldDetailSettingsModal({
|
|
open,
|
|
onOpenChange,
|
|
field,
|
|
onSave,
|
|
tables,
|
|
tableColumns,
|
|
numberingRules,
|
|
onLoadTableColumns,
|
|
}: FieldDetailSettingsModalProps) {
|
|
// 로컬 상태로 필드 설정 관리
|
|
const [localField, setLocalField] = useState<FormFieldConfig>(field);
|
|
|
|
// open이 변경될 때마다 필드 데이터 동기화
|
|
useEffect(() => {
|
|
if (open) {
|
|
setLocalField(field);
|
|
}
|
|
}, [open, field]);
|
|
|
|
// 필드 업데이트 함수
|
|
const updateField = (updates: Partial<FormFieldConfig>) => {
|
|
setLocalField((prev) => ({ ...prev, ...updates }));
|
|
};
|
|
|
|
// 저장 함수
|
|
const handleSave = () => {
|
|
onSave(localField);
|
|
onOpenChange(false);
|
|
};
|
|
|
|
// 연결 필드 매핑 추가
|
|
const addLinkedFieldMapping = () => {
|
|
const newMapping: LinkedFieldMapping = {
|
|
sourceColumn: "",
|
|
targetColumn: "",
|
|
};
|
|
const mappings = [...(localField.linkedFieldGroup?.mappings || []), newMapping];
|
|
updateField({
|
|
linkedFieldGroup: {
|
|
...localField.linkedFieldGroup,
|
|
enabled: true,
|
|
mappings,
|
|
},
|
|
});
|
|
};
|
|
|
|
// 연결 필드 매핑 삭제
|
|
const removeLinkedFieldMapping = (index: number) => {
|
|
const mappings = [...(localField.linkedFieldGroup?.mappings || [])];
|
|
mappings.splice(index, 1);
|
|
updateField({
|
|
linkedFieldGroup: {
|
|
...localField.linkedFieldGroup,
|
|
mappings,
|
|
},
|
|
});
|
|
};
|
|
|
|
// 연결 필드 매핑 업데이트
|
|
const updateLinkedFieldMapping = (index: number, updates: Partial<LinkedFieldMapping>) => {
|
|
const mappings = [...(localField.linkedFieldGroup?.mappings || [])];
|
|
mappings[index] = { ...mappings[index], ...updates };
|
|
updateField({
|
|
linkedFieldGroup: {
|
|
...localField.linkedFieldGroup,
|
|
mappings,
|
|
},
|
|
});
|
|
};
|
|
|
|
// 소스 테이블 컬럼 목록
|
|
const sourceTableColumns = localField.linkedFieldGroup?.sourceTable
|
|
? tableColumns[localField.linkedFieldGroup.sourceTable] || []
|
|
: [];
|
|
|
|
// Select 옵션의 참조 테이블 컬럼 목록
|
|
const selectTableColumns = localField.selectOptions?.tableName
|
|
? tableColumns[localField.selectOptions.tableName] || []
|
|
: [];
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-[95vw] sm:max-w-[700px] max-h-[85vh] flex flex-col p-0">
|
|
<DialogHeader className="px-4 pt-4 pb-2 border-b shrink-0">
|
|
<DialogTitle className="text-base">필드 상세 설정: {localField.label}</DialogTitle>
|
|
<DialogDescription className="text-xs">
|
|
필드의 타입, 동작 방식, 고급 옵션을 설정합니다.
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="flex-1 overflow-hidden px-4">
|
|
<ScrollArea className="h-[calc(85vh-180px)]">
|
|
<div className="space-y-4 py-3 pr-3">
|
|
{/* 기본 정보 섹션 */}
|
|
<div className="space-y-3 border rounded-lg p-3 bg-card">
|
|
<h3 className="text-xs font-semibold">기본 정보</h3>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">필드 타입</Label>
|
|
<Select
|
|
value={localField.fieldType}
|
|
onValueChange={(value) =>
|
|
updateField({
|
|
fieldType: value as FormFieldConfig["fieldType"],
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs mt-1">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{FIELD_TYPE_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
<HelpText>입력 필드의 유형을 선택하세요 (텍스트, 숫자, 날짜 등)</HelpText>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">그리드 너비</Label>
|
|
<Select
|
|
value={String(localField.gridSpan || 6)}
|
|
onValueChange={(value) => updateField({ gridSpan: parseInt(value) })}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs mt-1">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="3">1/4 너비</SelectItem>
|
|
<SelectItem value="4">1/3 너비</SelectItem>
|
|
<SelectItem value="6">1/2 너비</SelectItem>
|
|
<SelectItem value="8">2/3 너비</SelectItem>
|
|
<SelectItem value="12">전체 너비</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<HelpText>폼에서 차지할 너비를 설정합니다 (12칸 그리드 기준)</HelpText>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">플레이스홀더</Label>
|
|
<Input
|
|
value={localField.placeholder || ""}
|
|
onChange={(e) => updateField({ placeholder: e.target.value })}
|
|
placeholder="입력 힌트"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
<HelpText>입력 필드에 표시될 힌트 텍스트입니다</HelpText>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 옵션 토글 */}
|
|
<div className="space-y-2 border rounded-lg p-3 bg-card">
|
|
<h3 className="text-xs font-semibold mb-2">필드 옵션</h3>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px]">필수 입력</span>
|
|
<Switch
|
|
checked={localField.required || false}
|
|
onCheckedChange={(checked) => updateField({ required: checked })}
|
|
/>
|
|
</div>
|
|
<HelpText>이 필드를 필수 입력으로 만듭니다</HelpText>
|
|
|
|
<Separator className="my-2" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px]">비활성화 (읽기전용)</span>
|
|
<Switch
|
|
checked={localField.disabled || false}
|
|
onCheckedChange={(checked) => updateField({ disabled: checked })}
|
|
/>
|
|
</div>
|
|
<HelpText>필드를 비활성화하여 수정할 수 없게 만듭니다</HelpText>
|
|
|
|
<Separator className="my-2" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px]">숨김 (자동 저장만)</span>
|
|
<Switch
|
|
checked={localField.hidden || false}
|
|
onCheckedChange={(checked) => updateField({ hidden: checked })}
|
|
/>
|
|
</div>
|
|
<HelpText>화면에 표시하지 않지만 값은 저장됩니다</HelpText>
|
|
|
|
<Separator className="my-2" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px]">부모에서 값 받기</span>
|
|
<Switch
|
|
checked={localField.receiveFromParent || false}
|
|
onCheckedChange={(checked) => updateField({ receiveFromParent: checked })}
|
|
/>
|
|
</div>
|
|
<HelpText>부모 화면에서 전달받은 값으로 자동 채워집니다</HelpText>
|
|
</div>
|
|
|
|
{/* Accordion으로 고급 설정 */}
|
|
<Accordion type="single" collapsible className="space-y-2">
|
|
{/* Select 옵션 설정 */}
|
|
{localField.fieldType === "select" && (
|
|
<AccordionItem value="select-options" className="border rounded-lg">
|
|
<AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-green-50/50">
|
|
<div className="flex items-center gap-2">
|
|
<SettingsIcon className="h-3.5 w-3.5 text-green-600" />
|
|
<span>Select 옵션 설정</span>
|
|
{localField.selectOptions?.type && (
|
|
<span className="text-[9px] text-muted-foreground">
|
|
({localField.selectOptions.type === "table" ? "테이블 참조" : localField.selectOptions.type === "code" ? "공통코드" : "직접 입력"})
|
|
</span>
|
|
)}
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-3 pb-3 space-y-3">
|
|
<HelpText>드롭다운에 표시될 옵션 목록을 어디서 가져올지 설정합니다.</HelpText>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">옵션 타입</Label>
|
|
<Select
|
|
value={localField.selectOptions?.type || "static"}
|
|
onValueChange={(value) =>
|
|
updateField({
|
|
selectOptions: {
|
|
...localField.selectOptions,
|
|
type: value as "static" | "table" | "code",
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs mt-1">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{SELECT_OPTION_TYPE_OPTIONS.map((opt) => (
|
|
<SelectItem key={opt.value} value={opt.value}>
|
|
{opt.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{localField.selectOptions?.type === "table" && (
|
|
<div className="space-y-3 pt-2 border-t">
|
|
<HelpText>테이블 참조: DB 테이블에서 옵션 목록을 가져옵니다.</HelpText>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">참조 테이블</Label>
|
|
<Select
|
|
value={localField.selectOptions?.tableName || ""}
|
|
onValueChange={(value) => {
|
|
updateField({
|
|
selectOptions: {
|
|
...localField.selectOptions,
|
|
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>
|
|
{selectTableColumns.length > 0 ? (
|
|
<Select
|
|
value={localField.selectOptions?.valueColumn || ""}
|
|
onValueChange={(value) =>
|
|
updateField({
|
|
selectOptions: {
|
|
...localField.selectOptions,
|
|
valueColumn: value,
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs mt-1">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{selectTableColumns.map((col) => (
|
|
<SelectItem key={col.name} value={col.name}>
|
|
{col.name}
|
|
{col.label !== col.name && ` (${col.label})`}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={localField.selectOptions?.valueColumn || ""}
|
|
onChange={(e) =>
|
|
updateField({
|
|
selectOptions: {
|
|
...localField.selectOptions,
|
|
valueColumn: e.target.value,
|
|
},
|
|
})
|
|
}
|
|
placeholder="customer_code"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
)}
|
|
<HelpText>
|
|
참조 테이블에서 조인할 컬럼 (기본키)
|
|
<br />
|
|
예: customer_code, customer_id
|
|
</HelpText>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">표시할 컬럼 (라벨)</Label>
|
|
{selectTableColumns.length > 0 ? (
|
|
<Select
|
|
value={localField.selectOptions?.labelColumn || ""}
|
|
onValueChange={(value) =>
|
|
updateField({
|
|
selectOptions: {
|
|
...localField.selectOptions,
|
|
labelColumn: value,
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs mt-1">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{selectTableColumns.map((col) => (
|
|
<SelectItem key={col.name} value={col.name}>
|
|
{col.name}
|
|
{col.label !== col.name && ` (${col.label})`}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={localField.selectOptions?.labelColumn || ""}
|
|
onChange={(e) =>
|
|
updateField({
|
|
selectOptions: {
|
|
...localField.selectOptions,
|
|
labelColumn: e.target.value,
|
|
},
|
|
})
|
|
}
|
|
placeholder="customer_name"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
)}
|
|
<HelpText>
|
|
드롭다운에 표시할 컬럼 (이름)
|
|
<br />
|
|
예: customer_name, dept_name
|
|
</HelpText>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">저장할 컬럼</Label>
|
|
{selectTableColumns.length > 0 ? (
|
|
<Select
|
|
value={localField.selectOptions?.saveColumn || ""}
|
|
onValueChange={(value) =>
|
|
updateField({
|
|
selectOptions: {
|
|
...localField.selectOptions,
|
|
saveColumn: value,
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs mt-1">
|
|
<SelectValue placeholder="컬럼 선택 (미선택 시 조인 컬럼 저장)" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="">조인 컬럼 사용 (기본)</SelectItem>
|
|
{selectTableColumns.map((col) => (
|
|
<SelectItem key={col.name} value={col.name}>
|
|
{col.name}
|
|
{col.label !== col.name && ` (${col.label})`}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={localField.selectOptions?.saveColumn || ""}
|
|
onChange={(e) =>
|
|
updateField({
|
|
selectOptions: {
|
|
...localField.selectOptions,
|
|
saveColumn: e.target.value,
|
|
},
|
|
})
|
|
}
|
|
placeholder="비워두면 조인 컬럼 저장"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
)}
|
|
<HelpText>
|
|
실제로 DB에 저장할 컬럼을 선택하세요
|
|
<br />
|
|
예: customer_name 저장 (비워두면 customer_code 저장)
|
|
</HelpText>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{localField.selectOptions?.type === "code" && (
|
|
<div className="space-y-2 pt-2 border-t">
|
|
<HelpText>공통코드: 시스템 공통코드에서 옵션을 가져옵니다.</HelpText>
|
|
<div>
|
|
<Label className="text-[10px]">코드 카테고리</Label>
|
|
<Input
|
|
value={localField.selectOptions?.codeCategory || ""}
|
|
onChange={(e) =>
|
|
updateField({
|
|
selectOptions: {
|
|
...localField.selectOptions,
|
|
codeCategory: e.target.value,
|
|
},
|
|
})
|
|
}
|
|
placeholder="DEPT_TYPE"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
<HelpText>공통코드 카테고리를 입력하세요 (예: DEPT_TYPE, USER_STATUS)</HelpText>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
)}
|
|
|
|
{/* 연결 필드 설정 */}
|
|
<AccordionItem value="linked-fields" className="border rounded-lg">
|
|
<AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-orange-50/50">
|
|
<div className="flex items-center gap-2">
|
|
<SettingsIcon className="h-3.5 w-3.5 text-orange-600" />
|
|
<span>연결 필드 설정 (다중 컬럼 저장)</span>
|
|
{localField.linkedFieldGroup?.enabled && (
|
|
<span className="text-[9px] text-muted-foreground">
|
|
({(localField.linkedFieldGroup?.mappings || []).length}개)
|
|
</span>
|
|
)}
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-3 pb-3 space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] font-medium">연결 필드 사용</span>
|
|
<Switch
|
|
checked={localField.linkedFieldGroup?.enabled || false}
|
|
onCheckedChange={(checked) =>
|
|
updateField({
|
|
linkedFieldGroup: {
|
|
...localField.linkedFieldGroup,
|
|
enabled: checked,
|
|
},
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<HelpText>
|
|
드롭다운 선택 시 다른 테이블의 값도 함께 저장합니다.
|
|
<br />
|
|
예: 고객 선택 → 고객코드, 고객명, 연락처를 각각 저장
|
|
</HelpText>
|
|
|
|
{localField.linkedFieldGroup?.enabled && (
|
|
<div className="space-y-3 pt-2 border-t">
|
|
<div>
|
|
<Label className="text-[10px]">소스 테이블</Label>
|
|
<Select
|
|
value={localField.linkedFieldGroup?.sourceTable || ""}
|
|
onValueChange={(value) => {
|
|
updateField({
|
|
linkedFieldGroup: {
|
|
...localField.linkedFieldGroup,
|
|
sourceTable: 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>값을 가져올 소스 테이블 (예: customer_mng)</HelpText>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">표시 컬럼</Label>
|
|
{sourceTableColumns.length > 0 ? (
|
|
<Select
|
|
value={localField.linkedFieldGroup?.displayColumn || ""}
|
|
onValueChange={(value) =>
|
|
updateField({
|
|
linkedFieldGroup: {
|
|
...localField.linkedFieldGroup,
|
|
displayColumn: value,
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs mt-1">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{sourceTableColumns.map((col) => (
|
|
<SelectItem key={col.name} value={col.name}>
|
|
{col.name}
|
|
{col.label !== col.name && ` (${col.label})`}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={localField.linkedFieldGroup?.displayColumn || ""}
|
|
onChange={(e) =>
|
|
updateField({
|
|
linkedFieldGroup: {
|
|
...localField.linkedFieldGroup,
|
|
displayColumn: e.target.value,
|
|
},
|
|
})
|
|
}
|
|
placeholder="customer_name"
|
|
className="h-7 text-xs mt-1"
|
|
/>
|
|
)}
|
|
<HelpText>드롭다운에 표시할 컬럼 (예: customer_name)</HelpText>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[10px]">표시 형식</Label>
|
|
<Select
|
|
value={localField.linkedFieldGroup?.displayFormat || "name_only"}
|
|
onValueChange={(value) =>
|
|
updateField({
|
|
linkedFieldGroup: {
|
|
...localField.linkedFieldGroup,
|
|
displayFormat: value as "name_only" | "code_name" | "name_code",
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<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>
|
|
</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={addLinkedFieldMapping} className="h-6 text-[9px] px-2">
|
|
<Plus className="h-3 w-3 mr-1" />
|
|
매핑 추가
|
|
</Button>
|
|
</div>
|
|
<HelpText>
|
|
소스 테이블의 컬럼을 현재 폼의 어느 컬럼에 저장할지 매핑합니다.
|
|
<br />
|
|
예: customer_code → partner_id, customer_name → partner_name
|
|
</HelpText>
|
|
|
|
{(localField.linkedFieldGroup?.mappings || []).length === 0 ? (
|
|
<div className="text-center py-4 border border-dashed rounded-lg">
|
|
<p className="text-[10px] text-muted-foreground">매핑이 없습니다</p>
|
|
<p className="text-[9px] text-muted-foreground">위의 "매핑 추가" 버튼을 클릭하세요</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{(localField.linkedFieldGroup?.mappings || []).map((mapping, index) => (
|
|
<div key={index} className="border rounded-lg p-2 space-y-2 bg-muted/30">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[9px] font-medium text-muted-foreground">매핑 {index + 1}</span>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => removeLinkedFieldMapping(index)}
|
|
className="h-5 w-5 p-0 text-destructive"
|
|
>
|
|
<Trash2 className="h-3 w-3" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div>
|
|
<Label className="text-[9px]">소스 컬럼 (가져올 값)</Label>
|
|
{sourceTableColumns.length > 0 ? (
|
|
<Select
|
|
value={mapping.sourceColumn || ""}
|
|
onValueChange={(value) =>
|
|
updateLinkedFieldMapping(index, { sourceColumn: value })
|
|
}
|
|
>
|
|
<SelectTrigger className="h-6 text-[9px] mt-0.5">
|
|
<SelectValue placeholder="컬럼 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{sourceTableColumns.map((col) => (
|
|
<SelectItem key={col.name} value={col.name}>
|
|
{col.name}
|
|
{col.label !== col.name && ` (${col.label})`}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
) : (
|
|
<Input
|
|
value={mapping.sourceColumn || ""}
|
|
onChange={(e) =>
|
|
updateLinkedFieldMapping(index, { sourceColumn: e.target.value })
|
|
}
|
|
placeholder="customer_code"
|
|
className="h-6 text-[9px] mt-0.5"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="text-center text-[9px] text-muted-foreground">↓</div>
|
|
|
|
<div>
|
|
<Label className="text-[9px]">타겟 컬럼 (저장할 위치)</Label>
|
|
<Input
|
|
value={mapping.targetColumn || ""}
|
|
onChange={(e) =>
|
|
updateLinkedFieldMapping(index, { targetColumn: e.target.value })
|
|
}
|
|
placeholder="partner_id"
|
|
className="h-6 text-[9px] mt-0.5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
{/* 채번규칙 설정 */}
|
|
<AccordionItem value="numbering-rule" className="border rounded-lg">
|
|
<AccordionTrigger className="px-3 py-2 text-xs font-medium hover:no-underline bg-blue-50/50">
|
|
<div className="flex items-center gap-2">
|
|
<SettingsIcon className="h-3.5 w-3.5 text-blue-600" />
|
|
<span>채번규칙 설정</span>
|
|
{localField.numberingRule?.enabled && (
|
|
<span className="text-[9px] text-muted-foreground">(활성화됨)</span>
|
|
)}
|
|
</div>
|
|
</AccordionTrigger>
|
|
<AccordionContent className="px-3 pb-3 space-y-3">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px] font-medium">채번규칙 사용</span>
|
|
<Switch
|
|
checked={localField.numberingRule?.enabled || false}
|
|
onCheckedChange={(checked) =>
|
|
updateField({
|
|
numberingRule: {
|
|
...localField.numberingRule,
|
|
enabled: checked,
|
|
},
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<HelpText>
|
|
자동으로 코드/번호를 생성합니다.
|
|
<br />
|
|
예: EMP-001, ORD-20240101-001
|
|
</HelpText>
|
|
|
|
{localField.numberingRule?.enabled && (
|
|
<div className="space-y-2 pt-2 border-t">
|
|
<div>
|
|
<Label className="text-[10px]">채번규칙 선택</Label>
|
|
<Select
|
|
value={localField.numberingRule?.ruleId || ""}
|
|
onValueChange={(value) =>
|
|
updateField({
|
|
numberingRule: {
|
|
...localField.numberingRule,
|
|
ruleId: value,
|
|
},
|
|
})
|
|
}
|
|
>
|
|
<SelectTrigger className="h-7 text-xs mt-1">
|
|
<SelectValue placeholder="규칙 선택" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{numberingRules.length === 0 ? (
|
|
<div className="px-2 py-1.5 text-xs text-muted-foreground">
|
|
등록된 채번규칙이 없습니다
|
|
</div>
|
|
) : (
|
|
numberingRules.map((rule) => (
|
|
<SelectItem key={rule.id} value={rule.id}>
|
|
{rule.name}
|
|
</SelectItem>
|
|
))
|
|
)}
|
|
</SelectContent>
|
|
</Select>
|
|
<HelpText>사용할 채번규칙을 선택하세요</HelpText>
|
|
</div>
|
|
|
|
<Separator className="my-2" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px]">사용자 수정 가능</span>
|
|
<Switch
|
|
checked={localField.numberingRule?.editable || false}
|
|
onCheckedChange={(checked) =>
|
|
updateField({
|
|
numberingRule: {
|
|
...localField.numberingRule,
|
|
editable: checked,
|
|
},
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<HelpText>생성된 번호를 사용자가 수정할 수 있게 합니다</HelpText>
|
|
|
|
<Separator className="my-2" />
|
|
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-[10px]">저장 시점에 생성</span>
|
|
<Switch
|
|
checked={localField.numberingRule?.generateOnSave || false}
|
|
onCheckedChange={(checked) =>
|
|
updateField({
|
|
numberingRule: {
|
|
...localField.numberingRule,
|
|
generateOnSave: checked,
|
|
generateOnOpen: !checked,
|
|
},
|
|
})
|
|
}
|
|
/>
|
|
</div>
|
|
<HelpText>OFF: 모달 열릴 때 생성 / ON: 저장 버튼 클릭 시 생성</HelpText>
|
|
</div>
|
|
)}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</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>
|
|
);
|
|
}
|
|
|
|
|