feat: Implement entity join functionality in V2Repeater and configuration panel

- Added support for entity joins in the V2Repeater component, allowing for automatic resolution of foreign key references to display data from related tables.
- Introduced a new `resolveEntityJoins` function to handle the fetching and mapping of reference data based on configured entity joins.
- Enhanced the V2RepeaterConfigPanel to manage entity join configurations, including loading available columns and toggling join settings.
- Updated the data handling logic to incorporate mapping rules for incoming data, ensuring that only necessary fields are retained during processing.
- Improved user experience by providing clear logging and feedback during entity join resolution and data mapping operations.
This commit is contained in:
kjs
2026-03-04 21:08:45 +09:00
parent f97edad1ea
commit ac2da7a1d7
10 changed files with 813 additions and 31 deletions

View File

@@ -642,6 +642,12 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
}
}
// 메인 레코드 ID 전달 (분할패널에서는 좌측 선택 항목이 메인 레코드)
const leftPkColumn = config.leftPanel?.primaryKeyColumn || "id";
if (selectedLeftItem?.[leftPkColumn]) {
initialData._mainRecordId = selectedLeftItem[leftPkColumn];
}
// EditModal 열기 이벤트 발생
const event = new CustomEvent("openEditModal", {
detail: {
@@ -662,6 +668,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
}, [
config.rightPanel?.addModalScreenId,
config.rightPanel?.addButtonLabel,
config.leftPanel?.primaryKeyColumn,
config.dataTransferFields,
selectedLeftItem,
loadRightData,
@@ -718,6 +725,12 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
}
}
// 메인 레코드 ID 전달 (디테일 레코드의 id와 구분)
const editItemLeftPkColumn = config.leftPanel?.primaryKeyColumn || "id";
if (selectedLeftItem?.[editItemLeftPkColumn]) {
editData._mainRecordId = selectedLeftItem[editItemLeftPkColumn];
}
// EditModal 열기 이벤트 발생 (수정 모드)
const event = new CustomEvent("openEditModal", {
detail: {
@@ -737,7 +750,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
window.dispatchEvent(event);
console.log("[SplitPanelLayout2] 우측 수정 모달 열기:", editData);
},
[config.rightPanel?.editModalScreenId, config.rightPanel?.addModalScreenId, config.rightPanel?.mainTableForEdit, selectedLeftItem, loadRightData, loadLeftData],
[config.rightPanel?.editModalScreenId, config.rightPanel?.addModalScreenId, config.rightPanel?.mainTableForEdit, config.leftPanel?.primaryKeyColumn, selectedLeftItem, loadRightData, loadLeftData],
);
// 좌측 패널 수정 버튼 클릭
@@ -896,6 +909,12 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
}
}
// 메인 레코드 ID 전달 (분할패널에서는 좌측 선택 항목이 메인 레코드)
const addLeftPkColumn = config.leftPanel?.primaryKeyColumn || "id";
if (selectedLeftItem?.[addLeftPkColumn]) {
initialData._mainRecordId = selectedLeftItem[addLeftPkColumn];
}
const event = new CustomEvent("openEditModal", {
detail: {
screenId: btn.modalScreenId,
@@ -929,12 +948,19 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
return;
}
// 메인 레코드 ID 전달 (디테일 레코드의 id와 구분)
const editLeftPkColumn = config.leftPanel?.primaryKeyColumn || "id";
const editData = { ...item };
if (selectedLeftItem?.[editLeftPkColumn]) {
editData._mainRecordId = selectedLeftItem[editLeftPkColumn];
}
const event = new CustomEvent("openEditModal", {
detail: {
screenId: modalScreenId,
title: btn.label || "수정",
modalSize: "lg",
editData: item,
editData,
isCreateMode: false,
onSave: () => {
if (selectedLeftItem) {