kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(UniversalFormModal): 저장 버튼 표시 설정 옵션 추가 

ConfigPanel에 showSaveButton 체크박스 추가
체크 해제 시 모달 하단 저장 버튼 숨김 가능
SaveSettingsModal SelectItem key 중복 해결
서브 테이블 삭제 버튼 클릭 이벤트 충돌 수정
This commit is contained in:
SeongHyun Kim 2025-12-22 14:36:13 +09:00
parent f38447be8e
commit 6a4ebf362c
2 changed files with 35 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/lib/registry/components/universal-form-modal/UniversalFormModalConfigPanel.tsx
View File

@ -4,6 +4,7 @@ import React, { useState, useEffect, useCallback } from "react";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"; import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
@ -334,6 +335,21 @@ export function UniversalFormModalConfigPanel({ config, onChange }: UniversalFor
<HelpText>모달 창의 크기를 선택하세요</HelpText> <HelpText>모달 창의 크기를 선택하세요</HelpText>
</div> </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="space-y-3 w-full min-w-0">
<div className="w-full min-w-0"> <div className="w-full min-w-0">
<Label className="text-xs font-medium mb-1.5 block">저장 버튼 텍스트</Label> <Label className="text-xs font-medium mb-1.5 block">저장 버튼 텍스트</Label>

38
frontend/lib/registry/components/universal-form-modal/modals/SaveSettingsModal.tsx
View File

@ -217,8 +217,8 @@ export function SaveSettingsModal({
const repeatSections = sections.filter((s) => s.repeatable); const repeatSections = sections.filter((s) => s.repeatable);
// 모든 필드 목록 (반복 섹션 포함) // 모든 필드 목록 (반복 섹션 포함)
const getAllFields = (): { columnName: string; label: string; sectionTitle: string }[] => { const getAllFields = (): { columnName: string; label: string; sectionTitle: string; sectionId: string }[] => {
const fields: { columnName: string; label: string; sectionTitle: string }[] = []; const fields: { columnName: string; label: string; sectionTitle: string; sectionId: string }[] = [];
sections.forEach((section) => { sections.forEach((section) => {
// 필드 타입 섹션만 처리 (테이블 타입은 fields가 undefined) // 필드 타입 섹션만 처리 (테이블 타입은 fields가 undefined)
if (section.fields && Array.isArray(section.fields)) { if (section.fields && Array.isArray(section.fields)) {
@ -227,6 +227,7 @@ export function SaveSettingsModal({
columnName: field.columnName, columnName: field.columnName,
label: field.label, label: field.label,
sectionTitle: section.title, sectionTitle: section.title,
sectionId: section.id,
}); });
}); });
} }
@ -550,8 +551,8 @@ export function SaveSettingsModal({
return ( return (
<Accordion key={subIndex} type="single" collapsible> <Accordion key={subIndex} type="single" collapsible>
<AccordionItem value={`sub-${subIndex}`} className="border rounded-lg bg-orange-50/30"> <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 px-3 py-2">
<div className="flex items-center justify-between flex-1"> <AccordionTrigger className="flex-1 text-xs hover:no-underline p-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="font-medium"> <span className="font-medium">
서브 테이블 {subIndex + 1}: {subTable.tableName || "(미설정)"} 서브 테이블 {subIndex + 1}: {subTable.tableName || "(미설정)"}
@ -560,19 +561,18 @@ export function SaveSettingsModal({
({subTable.fieldMappings?.length || 0}개 매핑) ({subTable.fieldMappings?.length || 0}개 매핑)
</span> </span>
</div> </div>
<Button </AccordionTrigger>
size="sm" <button
variant="ghost" type="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
removeSubTable(subIndex); removeSubTable(subIndex);
}} }}
className="h-5 w-5 p-0 text-destructive hover:text-destructive mr-2" className="h-5 w-5 p-0 text-destructive hover:text-destructive/80 ml-2 inline-flex items-center justify-center"
> >
<Trash2 className="h-3 w-3" /> <Trash2 className="h-3 w-3" />
</Button> </button>
</div> </div>
</AccordionTrigger>
<AccordionContent className="px-3 pb-3 space-y-3"> <AccordionContent className="px-3 pb-3 space-y-3">
<div> <div>
<Label className="text-[10px]">서브 테이블명</Label> <Label className="text-[10px]">서브 테이블명</Label>
@ -755,8 +755,8 @@ export function SaveSettingsModal({
<SelectValue placeholder="필드 선택" /> <SelectValue placeholder="필드 선택" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{allFields.map((field) => ( {allFields.map((field, fieldIndex) => (
<SelectItem key={field.columnName} value={field.columnName}> <SelectItem key={`${field.sectionId}-${field.columnName}-${fieldIndex}`} value={field.columnName}>
{field.label} ({field.sectionTitle}) {field.label} ({field.sectionTitle})
</SelectItem> </SelectItem>
))} ))}