feat: Implement custom right panel save functionality in SplitPanelLayoutComponent

- Added a new save handler for the custom right panel, allowing users to save inline edit data.
- Implemented validation checks to ensure data integrity before saving, including checks for selected items and primary keys.
- Enhanced user feedback with toast notifications for success and error states during the save process.
- Integrated company_code automatically into the saved data to maintain multi-tenancy compliance.
- Updated the UI to include a save button in the custom mode, improving user interaction and data management.
This commit is contained in:
kjs 2026-02-12 15:03:56 +09:00
parent fb02e5b389
commit 505930b3ec
1 changed files with 86 additions and 0 deletions

View File

@ -2261,6 +2261,82 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
[componentConfig, activeTabIndex], [componentConfig, activeTabIndex],
); );
// 커스텀 모드 우측 패널 저장 (인라인 편집 데이터)
const handleCustomRightSave = useCallback(async () => {
if (!selectedLeftItem || !customLeftSelectedData || Object.keys(customLeftSelectedData).length === 0) {
toast({
title: "저장 실패",
description: "저장할 데이터가 없습니다. 좌측에서 항목을 선택해주세요.",
variant: "destructive",
});
return;
}
const tableName = componentConfig.rightPanel?.tableName || componentConfig.leftPanel?.tableName;
if (!tableName) {
toast({
title: "저장 실패",
description: "테이블 정보가 없습니다.",
variant: "destructive",
});
return;
}
// Primary Key 찾기
const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
const primaryKey = selectedLeftItem[sourceColumn] || selectedLeftItem.id || selectedLeftItem.ID;
if (!primaryKey) {
toast({
title: "저장 실패",
description: "Primary Key를 찾을 수 없습니다.",
variant: "destructive",
});
return;
}
try {
// 프론트엔드 전용 필드 제거
const cleanData = { ...customLeftSelectedData };
delete cleanData.children;
delete cleanData.level;
delete cleanData._originalItems;
// company_code 자동 추가
if (companyCode && !cleanData.company_code) {
cleanData.company_code = companyCode;
}
console.log("📝 [SplitPanel] 커스텀 우측 패널 저장:", { tableName, sourceColumn, primaryKey, data: cleanData });
const response = await dataApi.updateRecord(tableName, primaryKey, cleanData);
if (response.success) {
toast({
title: "저장 완료",
description: "데이터가 저장되었습니다.",
});
// 좌측 데이터 새로고침 (변경된 항목 반영)
loadLeftData();
// selectedLeftItem도 업데이트
setSelectedLeftItem(customLeftSelectedData);
} else {
toast({
title: "저장 실패",
description: response.error || "데이터 저장에 실패했습니다.",
variant: "destructive",
});
}
} catch (error) {
console.error("커스텀 우측 패널 저장 오류:", error);
toast({
title: "저장 오류",
description: "데이터 저장 중 오류가 발생했습니다.",
variant: "destructive",
});
}
}, [selectedLeftItem, customLeftSelectedData, componentConfig, companyCode, toast, loadLeftData]);
// 수정 모달 저장 // 수정 모달 저장
const handleEditModalSave = useCallback(async () => { const handleEditModalSave = useCallback(async () => {
const tableName = const tableName =
@ -3618,6 +3694,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
</div> </div>
{!isDesignMode && ( {!isDesignMode && (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{/* 커스텀 모드 기본정보 탭: 저장 버튼 */}
{activeTabIndex === 0 && componentConfig.rightPanel?.displayMode === "custom" && selectedLeftItem && (
<Button size="sm" variant="default" onClick={handleCustomRightSave}>
<Save className="mr-1 h-4 w-4" />
</Button>
)}
{activeTabIndex === 0 {activeTabIndex === 0
? componentConfig.rightPanel?.showAdd && ( ? componentConfig.rightPanel?.showAdd && (
<Button size="sm" variant="outline" onClick={() => handleAddClick("right")}> <Button size="sm" variant="outline" onClick={() => handleAddClick("right")}>
@ -4087,6 +4170,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
isDesignMode={false} isDesignMode={false}
isInteractive={true} isInteractive={true}
formData={customLeftSelectedData} formData={customLeftSelectedData}
onFormDataChange={(fieldName: string, value: any) => {
setCustomLeftSelectedData((prev: Record<string, any>) => ({ ...prev, [fieldName]: value }));
}}
tableName={componentConfig.rightPanel?.tableName || componentConfig.leftPanel?.tableName} tableName={componentConfig.rightPanel?.tableName || componentConfig.leftPanel?.tableName}
menuObjid={(props as any).menuObjid} menuObjid={(props as any).menuObjid}
screenId={(props as any).screenId} screenId={(props as any).screenId}