feat: Enhance CardDisplay and SplitPanelLayout components with improved table name handling and custom selection data
- Updated CardDisplayComponent to streamline table name retrieval from props or component configuration. - Introduced custom selection data management in SplitPanelLayoutComponent, allowing for better handling of selected items in custom mode. - Enhanced form data handling in SplitPanelLayoutComponent to utilize selected data from the left panel, improving data flow and user experience.
This commit is contained in:
parent
8253be0048
commit
e97fd05e75
|
|
@ -233,8 +233,8 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// tableName 확인 (props에서 전달받은 tableName 사용)
|
// tableName 확인 (props에서 전달받은 tableName 또는 componentConfig에서 추출)
|
||||||
const tableNameToUse = tableName || component.componentConfig?.tableName || 'user_info'; // 기본 테이블명 설정
|
const tableNameToUse = tableName || component.componentConfig?.tableName;
|
||||||
|
|
||||||
if (!tableNameToUse) {
|
if (!tableNameToUse) {
|
||||||
setLoading(false);
|
setLoading(false);
|
||||||
|
|
|
||||||
|
|
@ -193,6 +193,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||||
const [rightData, setRightData] = useState<any[] | any>(null); // 조인 모드는 배열, 상세 모드는 객체
|
const [rightData, setRightData] = useState<any[] | any>(null); // 조인 모드는 배열, 상세 모드는 객체
|
||||||
const [selectedLeftItem, setSelectedLeftItem] = useState<any>(null);
|
const [selectedLeftItem, setSelectedLeftItem] = useState<any>(null);
|
||||||
const [expandedRightItems, setExpandedRightItems] = useState<Set<string | number>>(new Set()); // 확장된 우측 아이템
|
const [expandedRightItems, setExpandedRightItems] = useState<Set<string | number>>(new Set()); // 확장된 우측 아이템
|
||||||
|
const [customLeftSelectedData, setCustomLeftSelectedData] = useState<Record<string, any>>({}); // 커스텀 모드: 좌측 선택 데이터
|
||||||
const [leftSearchQuery, setLeftSearchQuery] = useState("");
|
const [leftSearchQuery, setLeftSearchQuery] = useState("");
|
||||||
const [rightSearchQuery, setRightSearchQuery] = useState("");
|
const [rightSearchQuery, setRightSearchQuery] = useState("");
|
||||||
const [isLoadingLeft, setIsLoadingLeft] = useState(false);
|
const [isLoadingLeft, setIsLoadingLeft] = useState(false);
|
||||||
|
|
@ -2747,6 +2748,17 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||||
component={componentData as any}
|
component={componentData as any}
|
||||||
isDesignMode={false}
|
isDesignMode={false}
|
||||||
formData={{}}
|
formData={{}}
|
||||||
|
tableName={componentConfig.leftPanel?.tableName}
|
||||||
|
onFormDataChange={(data: any) => {
|
||||||
|
// 커스텀 모드: 좌측 카드/테이블 선택 시 데이터 캡처
|
||||||
|
if (data?.selectedRowsData && data.selectedRowsData.length > 0) {
|
||||||
|
setCustomLeftSelectedData(data.selectedRowsData[0]);
|
||||||
|
setSelectedLeftItem(data.selectedRowsData[0]);
|
||||||
|
} else if (data?.selectedRowsData && data.selectedRowsData.length === 0) {
|
||||||
|
setCustomLeftSelectedData({});
|
||||||
|
setSelectedLeftItem(null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -3617,7 +3629,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
||||||
<DynamicComponentRenderer
|
<DynamicComponentRenderer
|
||||||
component={componentData as any}
|
component={componentData as any}
|
||||||
isDesignMode={false}
|
isDesignMode={false}
|
||||||
formData={{}}
|
formData={customLeftSelectedData}
|
||||||
|
tableName={componentConfig.rightPanel?.tableName || componentConfig.leftPanel?.tableName}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue