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:
parent
fb02e5b389
commit
505930b3ec
|
|
@ -2261,6 +2261,82 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
[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 tableName =
|
||||
|
|
@ -3618,6 +3694,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
</div>
|
||||
{!isDesignMode && (
|
||||
<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
|
||||
? componentConfig.rightPanel?.showAdd && (
|
||||
<Button size="sm" variant="outline" onClick={() => handleAddClick("right")}>
|
||||
|
|
@ -4087,6 +4170,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
isDesignMode={false}
|
||||
isInteractive={true}
|
||||
formData={customLeftSelectedData}
|
||||
onFormDataChange={(fieldName: string, value: any) => {
|
||||
setCustomLeftSelectedData((prev: Record<string, any>) => ({ ...prev, [fieldName]: value }));
|
||||
}}
|
||||
tableName={componentConfig.rightPanel?.tableName || componentConfig.leftPanel?.tableName}
|
||||
menuObjid={(props as any).menuObjid}
|
||||
screenId={(props as any).screenId}
|
||||
|
|
|
|||
Loading…
Reference in New Issue