fix: SelectedItemsDetailInput 설정 패널에서 컬럼 자동 로드 추가
- 원본 테이블(sourceTable) 변경 시 컬럼 자동 로드 - 대상 테이블(targetTable) 변경 시 컬럼 자동 로드 - props로 받은 컬럼은 백업으로 사용하고, 내부에서 로드한 컬럼 우선 사용 - tableManagementApi.getColumnList() 사용하여 동적 로드 이제 원본/대상 테이블 선택 시 해당 테이블의 컬럼 목록이 자동으로 나타남
This commit is contained in:
parent
c51cd7bc87
commit
6e92d1855a
|
|
@ -73,6 +73,70 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
|
|||
// 🆕 부모 데이터 매핑: 각 매핑별 소스 테이블 컬럼 상태
|
||||
const [mappingSourceColumns, setMappingSourceColumns] = useState<Record<number, Array<{ columnName: string; columnLabel?: string; dataType?: string }>>>({});
|
||||
|
||||
// 🆕 원본/대상 테이블 컬럼 상태 (내부에서 로드)
|
||||
const [loadedSourceTableColumns, setLoadedSourceTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string }>>([]);
|
||||
const [loadedTargetTableColumns, setLoadedTargetTableColumns] = useState<Array<{ columnName: string; columnLabel?: string; dataType?: string }>>([]);
|
||||
|
||||
// 🆕 원본 테이블 컬럼 로드
|
||||
useEffect(() => {
|
||||
if (!config.sourceTable) {
|
||||
setLoadedSourceTableColumns([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadColumns = async () => {
|
||||
try {
|
||||
console.log("🔍 원본 테이블 컬럼 로드:", config.sourceTable);
|
||||
const { tableManagementApi } = await import("@/lib/api/tableManagement");
|
||||
const response = await tableManagementApi.getColumnList(config.sourceTable);
|
||||
|
||||
if (response.success && response.data) {
|
||||
const columns = response.data.columns || [];
|
||||
setLoadedSourceTableColumns(columns.map((col: any) => ({
|
||||
columnName: col.columnName,
|
||||
columnLabel: col.displayName || col.columnLabel || col.columnName,
|
||||
dataType: col.dataType,
|
||||
})));
|
||||
console.log("✅ 원본 테이블 컬럼 로드 성공:", columns.length);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ 원본 테이블 컬럼 로드 오류:", error);
|
||||
}
|
||||
};
|
||||
|
||||
loadColumns();
|
||||
}, [config.sourceTable]);
|
||||
|
||||
// 🆕 대상 테이블 컬럼 로드
|
||||
useEffect(() => {
|
||||
if (!config.targetTable) {
|
||||
setLoadedTargetTableColumns([]);
|
||||
return;
|
||||
}
|
||||
|
||||
const loadColumns = async () => {
|
||||
try {
|
||||
console.log("🔍 대상 테이블 컬럼 로드:", config.targetTable);
|
||||
const { tableManagementApi } = await import("@/lib/api/tableManagement");
|
||||
const response = await tableManagementApi.getColumnList(config.targetTable);
|
||||
|
||||
if (response.success && response.data) {
|
||||
const columns = response.data.columns || [];
|
||||
setLoadedTargetTableColumns(columns.map((col: any) => ({
|
||||
columnName: col.columnName,
|
||||
columnLabel: col.displayName || col.columnLabel || col.columnName,
|
||||
dataType: col.dataType,
|
||||
})));
|
||||
console.log("✅ 대상 테이블 컬럼 로드 성공:", columns.length);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ 대상 테이블 컬럼 로드 오류:", error);
|
||||
}
|
||||
};
|
||||
|
||||
loadColumns();
|
||||
}, [config.targetTable]);
|
||||
|
||||
// 🆕 소스 테이블 선택 시 컬럼 로드
|
||||
const loadMappingSourceColumns = async (tableName: string, mappingIndex: number) => {
|
||||
try {
|
||||
|
|
@ -262,15 +326,19 @@ export const SelectedItemsDetailInputConfigPanel: React.FC<SelectedItemsDetailIn
|
|||
|
||||
// 🆕 표시 컬럼용: 원본 테이블에서 사용되지 않은 컬럼 목록
|
||||
const availableColumns = useMemo(() => {
|
||||
// 🔧 로드된 컬럼 우선 사용, props로 받은 컬럼은 백업
|
||||
const columns = loadedSourceTableColumns.length > 0 ? loadedSourceTableColumns : sourceTableColumns;
|
||||
const usedColumns = new Set([...displayColumns.map(c => c.name), ...localFields.map((f) => f.name)]);
|
||||
return sourceTableColumns.filter((col) => !usedColumns.has(col.columnName));
|
||||
}, [sourceTableColumns, displayColumns, localFields]);
|
||||
return columns.filter((col) => !usedColumns.has(col.columnName));
|
||||
}, [loadedSourceTableColumns, sourceTableColumns, displayColumns, localFields]);
|
||||
|
||||
// 🆕 추가 입력 필드용: 대상 테이블에서 사용되지 않은 컬럼 목록
|
||||
const availableTargetColumns = useMemo(() => {
|
||||
// 🔧 로드된 컬럼 우선 사용, props로 받은 컬럼은 백업
|
||||
const columns = loadedTargetTableColumns.length > 0 ? loadedTargetTableColumns : targetTableColumns;
|
||||
const usedColumns = new Set([...displayColumns.map(c => c.name), ...localFields.map((f) => f.name)]);
|
||||
return targetTableColumns.filter((col) => !usedColumns.has(col.columnName));
|
||||
}, [targetTableColumns, displayColumns, localFields]);
|
||||
return columns.filter((col) => !usedColumns.has(col.columnName));
|
||||
}, [loadedTargetTableColumns, targetTableColumns, displayColumns, localFields]);
|
||||
|
||||
// 🆕 원본 테이블 필터링
|
||||
const filteredSourceTables = useMemo(() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue