jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance SplitPanelLayoutComponent with improved filtering and modal handling

Browse Source 
- Updated search conditions to use an object structure with an "equals" operator for better filtering logic.
- Added validation to ensure an item is selected in the left panel before opening the modal, providing user feedback through a toast notification.
- Extracted foreign key data from the selected left item for improved data handling when opening the modal.
- Cleaned up the code by removing unnecessary comments and consolidating logic for clarity and maintainability.
This commit is contained in:
kjs
2026-02-24 15:28:21 +09:00
parent 076184aad2
commit a6f37fd3dc
10 changed files with 1765 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx
View File

@@ -1241,7 +1241,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
const searchConditions: Record<string, any> = {};
keys?.forEach((key: any) => {
if (key.leftColumn && key.rightColumn && originalItem[key.leftColumn] !== undefined) {
searchConditions[key.rightColumn] = originalItem[key.leftColumn];
searchConditions[key.rightColumn] = { value: originalItem[key.leftColumn], operator: "equals" };
}
});
@@ -1271,11 +1271,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
// 복합키: 여러 조건으로 필터링
const { entityJoinApi } = await import("@/lib/api/entityJoin");
// 복합키 조건 생성
// 복합키 조건 생성 (FK 필터링이므로 equals 연산자 사용)
const searchConditions: Record<string, any> = {};
keys.forEach((key) => {
if (key.leftColumn && key.rightColumn && leftItem[key.leftColumn] !== undefined) {
searchConditions[key.rightColumn] = leftItem[key.leftColumn];
searchConditions[key.rightColumn] = { value: leftItem[key.leftColumn], operator: "equals" };
}
});
@@ -2035,20 +2035,47 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
: (componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1] as any)?.addButton;
if (addButtonConfig?.mode === "modal" && addButtonConfig?.modalScreenId) {
// 커스텀 모달 화면 열기
if (!selectedLeftItem) {
toast({
title: "항목을 선택해주세요",
description: "좌측 패널에서 항목을 먼저 선택한 후 추가해주세요.",
variant: "destructive",
});
return;
}
const currentTableName =
activeTabIndex === 0
? componentConfig.rightPanel?.tableName || ""
: (componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1] as any)?.tableName || "";
// 좌측 선택 데이터를 modalDataStore에 저장 (추가 화면에서 참조 가능)
// 좌측 선택 데이터를 modalDataStore에 저장
if (selectedLeftItem && componentConfig.leftPanel?.tableName) {
import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
useModalDataStore.getState().setData(componentConfig.leftPanel!.tableName!, [selectedLeftItem]);
});
}
// ScreenModal 열기 이벤트 발생
// relation.keys에서 FK 데이터 추출
const parentData: Record<string, any> = {};
const relation = activeTabIndex === 0
? componentConfig.rightPanel?.relation
: (componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1] as any)?.relation;
if (relation?.keys && Array.isArray(relation.keys)) {
for (const key of relation.keys) {
if (key.leftColumn && key.rightColumn && selectedLeftItem[key.leftColumn] != null) {
parentData[key.rightColumn] = selectedLeftItem[key.leftColumn];
}
}
} else if (relation) {
const leftColumn = relation.leftColumn;
const rightColumn = relation.foreignKey || relation.rightColumn;
if (leftColumn && rightColumn && selectedLeftItem[leftColumn] != null) {
parentData[rightColumn] = selectedLeftItem[leftColumn];
}
}
window.dispatchEvent(
new CustomEvent("openScreenModal", {
detail: {
@@ -2056,19 +2083,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
urlParams: {
mode: "add",
tableName: currentTableName,
// 좌측 선택 항목의 연결 키 값 전달
...(selectedLeftItem && (() => {
const relation = activeTabIndex === 0
? componentConfig.rightPanel?.relation
: (componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1] as any)?.relation;
const leftColumn = relation?.keys?.[0]?.leftColumn || relation?.leftColumn;
const rightColumn = relation?.keys?.[0]?.rightColumn || relation?.foreignKey;
if (leftColumn && rightColumn && selectedLeftItem[leftColumn] !== undefined) {
return { [rightColumn]: selectedLeftItem[leftColumn] };
}
return {};
})()),
},
splitPanelParentData: parentData,
},
}),
);
@@ -2076,6 +2092,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
console.log("✅ [SplitPanel] 추가 모달 화면 열기:", {
screenId: addButtonConfig.modalScreenId,
tableName: currentTableName,
parentData,
});
return;
}