집계 위젯 선택 이벤트 처리 기능 추가: AggregationWidgetComponent에서 다양한 선택 이벤트를 수신하여 필터링된 데이터를 설정하는 기능을 구현하였습니다. 또한, AggregationWidgetConfigPanel에 카테고리 값 콤보박스를 추가하여 사용자에게 더 나은 선택 경험을 제공하도록 개선하였습니다. 이로 인해 데이터 소스 타입이 "selection"인 경우의 데이터 처리 로직이 강화되었습니다.
This commit is contained in:
@@ -260,6 +260,7 @@ export function AggregationWidgetComponent({
|
||||
}, [dataSourceType, autoRefresh, refreshInterval, isDesignMode, fetchTableData]);
|
||||
|
||||
// 선택된 행 집계 (dataSourceType === "selection"일 때)
|
||||
// props로 전달된 selectedRows 사용
|
||||
const selectedRowsKey = JSON.stringify(selectedRows);
|
||||
useEffect(() => {
|
||||
if (dataSourceType === "selection" && Array.isArray(selectedRows) && selectedRows.length > 0) {
|
||||
@@ -268,6 +269,82 @@ export function AggregationWidgetComponent({
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dataSourceType, selectedRowsKey]);
|
||||
|
||||
// 전역 선택 이벤트 수신 (dataSourceType === "selection"일 때)
|
||||
useEffect(() => {
|
||||
if (dataSourceType !== "selection" || isDesignMode) return;
|
||||
|
||||
// 테이블리스트에서 발생하는 선택 이벤트 수신
|
||||
// tableListDataChange 이벤트의 data가 선택된 행들임
|
||||
const handleTableListDataChange = (event: CustomEvent) => {
|
||||
const { data: eventData, selectedRows: eventSelectedRows } = event.detail || {};
|
||||
// data가 선택된 행 데이터 배열
|
||||
const rows = eventData || [];
|
||||
|
||||
if (Array.isArray(rows)) {
|
||||
// 필터 적용
|
||||
const filteredData = applyFilters(
|
||||
rows,
|
||||
filtersRef.current || [],
|
||||
filterLogic,
|
||||
formDataRef.current,
|
||||
selectedRowsRef.current
|
||||
);
|
||||
setData(filteredData);
|
||||
}
|
||||
};
|
||||
|
||||
// 리피터에서 발생하는 이벤트
|
||||
const handleRepeaterDataChange = (event: CustomEvent) => {
|
||||
const { data: eventData, selectedData } = event.detail || {};
|
||||
const rows = selectedData || eventData || [];
|
||||
|
||||
if (Array.isArray(rows)) {
|
||||
const filteredData = applyFilters(
|
||||
rows,
|
||||
filtersRef.current || [],
|
||||
filterLogic,
|
||||
formDataRef.current,
|
||||
selectedRowsRef.current
|
||||
);
|
||||
setData(filteredData);
|
||||
}
|
||||
};
|
||||
|
||||
// 일반 선택 이벤트
|
||||
const handleSelectionChange = (event: CustomEvent) => {
|
||||
const { selectedRows: eventSelectedRows, selectedData, checkedRows, selectedItems } = event.detail || {};
|
||||
const rows = selectedData || eventSelectedRows || checkedRows || selectedItems || [];
|
||||
|
||||
if (Array.isArray(rows)) {
|
||||
const filteredData = applyFilters(
|
||||
rows,
|
||||
filtersRef.current || [],
|
||||
filterLogic,
|
||||
formDataRef.current,
|
||||
selectedRowsRef.current
|
||||
);
|
||||
setData(filteredData);
|
||||
}
|
||||
};
|
||||
|
||||
// 다양한 선택 이벤트 수신
|
||||
window.addEventListener("tableListDataChange" as any, handleTableListDataChange);
|
||||
window.addEventListener("repeaterDataChange" as any, handleRepeaterDataChange);
|
||||
window.addEventListener("selectionChange" as any, handleSelectionChange);
|
||||
window.addEventListener("tableSelectionChange" as any, handleSelectionChange);
|
||||
window.addEventListener("rowSelectionChange" as any, handleSelectionChange);
|
||||
window.addEventListener("checkboxSelectionChange" as any, handleSelectionChange);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("tableListDataChange" as any, handleTableListDataChange);
|
||||
window.removeEventListener("repeaterDataChange" as any, handleRepeaterDataChange);
|
||||
window.removeEventListener("selectionChange" as any, handleSelectionChange);
|
||||
window.removeEventListener("tableSelectionChange" as any, handleSelectionChange);
|
||||
window.removeEventListener("rowSelectionChange" as any, handleSelectionChange);
|
||||
window.removeEventListener("checkboxSelectionChange" as any, handleSelectionChange);
|
||||
};
|
||||
}, [dataSourceType, isDesignMode, filterLogic]);
|
||||
|
||||
// 외부 데이터가 있으면 사용
|
||||
const externalDataKey = externalData ? JSON.stringify(externalData.slice(0, 5)) : null; // 첫 5개만 비교
|
||||
useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user