kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

집계 위젯 선택 이벤트 처리 기능 추가: AggregationWidgetComponent에서 다양한 선택 이벤트를 수신하여 필터링된 데이터를 설정하는 기능을 구현하였습니다. 또한, AggregationWidgetConfigPanel에 카테고리 값 콤보박스를 추가하여 사용자에게 더 나은 선택 경험을 제공하도록 개선하였습니다. 이로 인해 데이터 소스 타입이 "selection"인 경우의 데이터 처리 로직이 강화되었습니다.

This commit is contained in:
kjs 2026-01-19 15:31:01 +09:00
parent d45443521d
commit e785dbbe6e
2 changed files with 248 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetComponent.tsx
View File

@ -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(() => {

187
frontend/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel.tsx
View File

@ -20,6 +20,7 @@ import { cn } from "@/lib/utils";
import { AggregationWidgetConfig, AggregationItem, AggregationType, DataSourceType, FilterCondition, FilterOperator, FilterValueSourceType } from "./types";
import { tableManagementApi } from "@/lib/api/tableManagement";
import { tableTypeApi } from "@/lib/api/screen";
import { getCategoryValues } from "@/lib/api/tableCategoryValue";
interface AggregationWidgetConfigPanelProps {
config: AggregationWidgetConfig;
@ -29,6 +30,74 @@ interface AggregationWidgetConfigPanelProps {
screenComponents?: Array<{ id: string; componentType: string; label?: string }>;
}
/**
* 카테고리 값 콤보박스 컴포넌트
*/
function CategoryValueCombobox({
value,
options,
onChange,
placeholder = "값 선택",
}: {
value: string;
options: Array<{ value: string; label: string }>;
onChange: (value: string) => void;
placeholder?: string;
}) {
const [open, setOpen] = useState(false);
const selectedOption = options.find((opt) => opt.value === value);
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="h-7 w-full justify-between text-xs font-normal"
>
<span className="truncate">
{selectedOption ? selectedOption.label : placeholder}
</span>
<ChevronsUpDown className="ml-1 h-3 w-3 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0" align="start">
<Command>
<CommandInput placeholder="검색..." className="h-8 text-xs" />
<CommandList>
<CommandEmpty className="py-2 text-xs text-center">
결과 없음
</CommandEmpty>
<CommandGroup>
{options.map((opt, index) => (
<CommandItem
key={`${opt.value}-${index}`}
value={`${opt.label} ${opt.value}`}
onSelect={() => {
onChange(opt.value);
setOpen(false);
}}
className="text-xs cursor-pointer"
>
<Check
className={cn(
"mr-2 h-3 w-3",
value === opt.value ? "opacity-100" : "opacity-0"
)}
/>
{opt.label}
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}
/**
* 집계 위젯 설정 패널
*/
@ -60,11 +129,14 @@ export function AggregationWidgetConfigPanel({
screenTableName,
screenComponents = [],
}: AggregationWidgetConfigPanelProps) {
const [columns, setColumns] = useState<Array<{ columnName: string; label?: string; dataType?: string; inputType?: string; webType?: string }>>([]);
const [columns, setColumns] = useState<Array<{ columnName: string; label?: string; dataType?: string; inputType?: string; webType?: string; categoryCode?: string }>>([]);
const [loadingColumns, setLoadingColumns] = useState(false);
const [availableTables, setAvailableTables] = useState<Array<{ tableName: string; displayName?: string }>>([]);
const [loadingTables, setLoadingTables] = useState(false);
const [tableComboboxOpen, setTableComboboxOpen] = useState(false);
// 카테고리 옵션 캐시 (categoryCode -> options)
const [categoryOptionsCache, setCategoryOptionsCache] = useState<Record<string, Array<{ value: string; label: string }>>>({});
// 데이터 소스 타입 (기본값: table)
const dataSourceType = config.dataSourceType || "table";
@ -117,15 +189,23 @@ export function AggregationWidgetConfigPanel({
try {
const result = await tableManagementApi.getColumnList(targetTableName);
if (result.success && result.data?.columns) {
setColumns(
result.data.columns.map((col: any) => ({
columnName: col.columnName || col.column_name,
label: col.displayName || col.columnLabel || col.column_label || col.label || col.columnName || col.column_name,
dataType: col.dataType || col.data_type,
inputType: col.inputType || col.input_type,
webType: col.webType || col.web_type,
}))
const mappedColumns = result.data.columns.map((col: any) => ({
columnName: col.columnName || col.column_name,
label: col.displayName || col.columnLabel || col.column_label || col.label || col.columnName || col.column_name,
dataType: col.dataType || col.data_type,
inputType: col.inputType || col.input_type,
webType: col.webType || col.web_type,
categoryCode: col.categoryCode || col.category_code,
}));
setColumns(mappedColumns);
// 카테고리 타입 컬럼의 옵션 로드
const categoryColumns = mappedColumns.filter(
(col: any) => col.inputType === "category" || col.webType === "category"
);
if (categoryColumns.length > 0) {
loadCategoryOptions(categoryColumns);
}
} else {
setColumns([]);
}
@ -140,6 +220,63 @@ export function AggregationWidgetConfigPanel({
loadColumns();
}, [targetTableName]);
// 카테고리 옵션 로드 함수
const loadCategoryOptions = async (categoryColumns: Array<{ columnName: string; categoryCode?: string }>) => {
if (!targetTableName) return;
const newCache: Record<string, Array<{ value: string; label: string }>> = { ...categoryOptionsCache };
for (const col of categoryColumns) {
const cacheKey = `${targetTableName}_${col.columnName}`;
if (newCache[cacheKey]) continue;
try {
// 카테고리 API 호출
const result = await getCategoryValues(targetTableName, col.columnName, false);
if (result.success && Array.isArray(result.data)) {
// 중복 제거 (valueCode 기준)
const seenCodes = new Set<string>();
const uniqueOptions: Array<{ value: string; label: string }> = [];
for (const item of result.data) {
const code = item.valueCode || item.code || item.value || item.id;
if (!seenCodes.has(code)) {
seenCodes.add(code);
uniqueOptions.push({
value: code,
// valueLabel이 실제 표시명
label: item.valueLabel || item.valueName || item.name || item.label || item.displayName || code,
});
}
}
newCache[cacheKey] = uniqueOptions;
} else {
newCache[cacheKey] = [];
}
} catch (error) {
console.error(`카테고리 옵션 로드 실패 (${col.columnName}):`, error);
// 실패해도 빈 배열로 캐시
newCache[cacheKey] = [];
}
}
setCategoryOptionsCache(newCache);
};
// 컬럼의 카테고리 옵션 가져오기
const getCategoryOptionsForColumn = (columnName: string): Array<{ value: string; label: string }> => {
if (!targetTableName) return [];
const cacheKey = `${targetTableName}_${columnName}`;
return categoryOptionsCache[cacheKey] || [];
};
// 컬럼이 카테고리 타입인지 확인
const isCategoryColumn = (columnName: string): boolean => {
const column = columns.find((c) => c.columnName === columnName);
return column?.inputType === "category" || column?.webType === "category";
};
// 집계 항목 추가
const addItem = () => {
const newItem: AggregationItem = {
@ -510,7 +647,14 @@ export function AggregationWidgetConfigPanel({
<Label className="text-[10px]">컬럼</Label>
<Select
value={filter.columnName}
onValueChange={(value) => updateFilter(filter.id, { columnName: value })}
onValueChange={(value) => {
updateFilter(filter.id, { columnName: value, staticValue: "" });
// 카테고리 컬럼이면 옵션 로드
const col = columns.find((c) => c.columnName === value);
if (col && (col.inputType === "category" || col.webType === "category")) {
loadCategoryOptions([col]);
}
}}
disabled={loadingColumns}
>
<SelectTrigger className="h-7 text-xs">
@ -577,12 +721,23 @@ export function AggregationWidgetConfigPanel({
{filter.valueSourceType === "urlParam" && "파라미터명"}
</Label>
{filter.valueSourceType === "static" && (
<Input
value={String(filter.staticValue || "")}
onChange={(e) => updateFilter(filter.id, { staticValue: e.target.value })}
placeholder="값 입력"
className="h-7 text-xs"
/>
isCategoryColumn(filter.columnName) ? (
// 카테고리 타입일 때 콤보박스 (검색 가능)
<CategoryValueCombobox
value={String(filter.staticValue || "")}
options={getCategoryOptionsForColumn(filter.columnName)}
onChange={(value) => updateFilter(filter.id, { staticValue: value })}
placeholder="값 선택"
/>
) : (
// 일반 타입일 때 입력 필드
<Input
value={String(filter.staticValue || "")}
onChange={(e) => updateFilter(filter.id, { staticValue: e.target.value })}
placeholder="값 입력"
className="h-7 text-xs"
/>
)
)}
{filter.valueSourceType === "formField" && (
<Input