feat: Enhance SplitPanelLayoutComponent with delete modal improvements
- Added a new state to manage the table name for the delete modal, allowing for more specific deletion handling based on the context of the item being deleted. - Updated the delete button handler to accept an optional table name parameter, improving the flexibility of the delete functionality. - Enhanced the delete confirmation logic to prioritize the specified table name when available, ensuring accurate deletion operations. - Refactored related logic to maintain clarity and improve the overall user experience during item deletion in the split panel layout.
This commit is contained in:
parent
c551e82eee
commit
4e12f93da4
|
|
@ -462,6 +462,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
||||
const [deleteModalPanel, setDeleteModalPanel] = useState<"left" | "right" | null>(null);
|
||||
const [deleteModalItem, setDeleteModalItem] = useState<any>(null);
|
||||
const [deleteModalTableName, setDeleteModalTableName] = useState<string | null>(null); // 추가 탭 삭제 시 테이블명
|
||||
|
||||
// 리사이저 드래그 상태
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
|
@ -2197,32 +2198,39 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
loadRightData,
|
||||
]);
|
||||
|
||||
// 삭제 버튼 핸들러
|
||||
const handleDeleteClick = useCallback((panel: "left" | "right", item: any) => {
|
||||
// 삭제 버튼 핸들러 (tableName: 추가 탭 등 특정 테이블 지정 시 사용)
|
||||
const handleDeleteClick = useCallback((panel: "left" | "right", item: any, tableName?: string) => {
|
||||
setDeleteModalPanel(panel);
|
||||
setDeleteModalItem(item);
|
||||
setDeleteModalTableName(tableName || null);
|
||||
setShowDeleteModal(true);
|
||||
}, []);
|
||||
|
||||
// 삭제 확인
|
||||
const handleDeleteConfirm = useCallback(async () => {
|
||||
// 우측 패널 삭제 시 중계 테이블 확인
|
||||
let tableName =
|
||||
deleteModalPanel === "left" ? componentConfig.leftPanel?.tableName : componentConfig.rightPanel?.tableName;
|
||||
// 1. 테이블명 결정: deleteModalTableName이 있으면 우선 사용 (추가 탭 등)
|
||||
let tableName = deleteModalTableName;
|
||||
|
||||
// 우측 패널 + 중계 테이블 모드인 경우
|
||||
if (deleteModalPanel === "right" && componentConfig.rightPanel?.addConfig?.targetTable) {
|
||||
tableName = componentConfig.rightPanel.addConfig.targetTable;
|
||||
console.log("🔗 중계 테이블 모드: 삭제 대상 테이블 =", tableName);
|
||||
if (!tableName) {
|
||||
tableName =
|
||||
deleteModalPanel === "left" ? componentConfig.leftPanel?.tableName : componentConfig.rightPanel?.tableName;
|
||||
|
||||
// 우측 패널 + 중계 테이블 모드인 경우
|
||||
if (deleteModalPanel === "right" && componentConfig.rightPanel?.addConfig?.targetTable) {
|
||||
tableName = componentConfig.rightPanel.addConfig.targetTable;
|
||||
console.log("🔗 중계 테이블 모드: 삭제 대상 테이블 =", tableName);
|
||||
}
|
||||
}
|
||||
|
||||
const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
|
||||
let primaryKey: any = deleteModalItem[sourceColumn] || deleteModalItem.id || deleteModalItem.ID;
|
||||
// 2. Primary Key 추출: id 필드를 우선 사용, 없으면 전체 객체 전달 (복합키)
|
||||
let primaryKey: any = deleteModalItem?.id || deleteModalItem?.ID;
|
||||
|
||||
// 복합키 처리: deleteModalItem 전체를 전달 (백엔드에서 복합키 자동 처리)
|
||||
if (deleteModalItem && typeof deleteModalItem === "object") {
|
||||
if (!primaryKey && deleteModalItem && typeof deleteModalItem === "object") {
|
||||
// id가 없는 경우에만 전체 객체 전달 (복합키 테이블)
|
||||
primaryKey = deleteModalItem;
|
||||
console.log("🔑 복합키 가능성: 전체 객체 전달", primaryKey);
|
||||
console.log("🔑 복합키: 전체 객체 전달", Object.keys(primaryKey));
|
||||
} else {
|
||||
console.log("🔑 단일키 삭제: id =", primaryKey, "테이블 =", tableName);
|
||||
}
|
||||
|
||||
if (!tableName || !primaryKey) {
|
||||
|
|
@ -2290,6 +2298,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
// 모달 닫기
|
||||
setShowDeleteModal(false);
|
||||
setDeleteModalItem(null);
|
||||
setDeleteModalTableName(null);
|
||||
|
||||
// 데이터 새로고침
|
||||
if (deleteModalPanel === "left") {
|
||||
|
|
@ -2300,7 +2309,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
setRightData(null);
|
||||
}
|
||||
} else if (deleteModalPanel === "right") {
|
||||
loadRightData(selectedLeftItem);
|
||||
// 추가 탭에서 삭제한 경우 해당 탭 데이터 리로드
|
||||
if (deleteModalTableName && activeTabIndex > 0) {
|
||||
loadTabData(activeTabIndex, selectedLeftItem);
|
||||
} else {
|
||||
loadRightData(selectedLeftItem);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
toast({
|
||||
|
|
@ -2324,7 +2338,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}, [deleteModalPanel, componentConfig, deleteModalItem, toast, selectedLeftItem, loadLeftData, loadRightData]);
|
||||
}, [deleteModalPanel, deleteModalTableName, componentConfig, deleteModalItem, toast, selectedLeftItem, loadLeftData, loadRightData, loadTabData, activeTabIndex]);
|
||||
|
||||
// 항목별 추가 버튼 핸들러 (좌측 항목의 + 버튼 - 하위 항목 추가)
|
||||
const handleItemAddClick = useCallback(
|
||||
|
|
@ -3541,7 +3555,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
)}
|
||||
{currentTabConfig?.showDelete && (
|
||||
<Button size="sm" variant="ghost" className="text-destructive h-7 px-2 text-xs"
|
||||
onClick={() => handleDeleteClick("right", item)}
|
||||
onClick={() => handleDeleteClick("right", item, currentTabConfig?.tableName)}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
|
|
@ -3585,7 +3599,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
)}
|
||||
{currentTabConfig?.showDelete && (
|
||||
<Button size="sm" variant="ghost" className="text-destructive h-7 px-2 text-xs"
|
||||
onClick={() => handleDeleteClick("right", item)}
|
||||
onClick={() => handleDeleteClick("right", item, currentTabConfig?.tableName)}
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue