2007 lines
75 KiB
TypeScript
2007 lines
75 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect, useCallback, useMemo } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Plus, Columns, AlignJustify, Trash2, Search } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { apiClient } from "@/lib/api/client";
|
|
|
|
// 기존 ModalRepeaterTable 컴포넌트 재사용
|
|
import { RepeaterTable } from "../modal-repeater-table/RepeaterTable";
|
|
import { ItemSelectionModal } from "../modal-repeater-table/ItemSelectionModal";
|
|
import { RepeaterColumnConfig, CalculationRule } from "../modal-repeater-table/types";
|
|
|
|
// 타입 정의
|
|
import {
|
|
TableSectionConfig,
|
|
TableColumnConfig,
|
|
TableJoinCondition,
|
|
FormDataState,
|
|
TableCalculationRule,
|
|
} from "./types";
|
|
|
|
interface TableSectionRendererProps {
|
|
sectionId: string;
|
|
tableConfig: TableSectionConfig;
|
|
formData: FormDataState;
|
|
onFormDataChange: (field: string, value: any) => void;
|
|
onTableDataChange: (data: any[]) => void;
|
|
// 조건부 테이블용 콜백 (조건별 데이터 변경)
|
|
onConditionalTableDataChange?: (conditionValue: string, data: any[]) => void;
|
|
className?: string;
|
|
}
|
|
|
|
// 조건부 테이블 데이터 타입
|
|
interface ConditionalTableData {
|
|
[conditionValue: string]: any[];
|
|
}
|
|
|
|
/**
|
|
* TableColumnConfig를 RepeaterColumnConfig로 변환
|
|
* columnModes 또는 lookup이 있으면 dynamicDataSource로 변환
|
|
*/
|
|
function convertToRepeaterColumn(col: TableColumnConfig): RepeaterColumnConfig {
|
|
const baseColumn: RepeaterColumnConfig = {
|
|
field: col.field,
|
|
label: col.label,
|
|
type: col.type,
|
|
editable: col.editable ?? true,
|
|
calculated: col.calculated ?? false,
|
|
width: col.width || "150px",
|
|
required: col.required,
|
|
hidden: col.hidden ?? false,
|
|
defaultValue: col.defaultValue,
|
|
selectOptions: col.selectOptions,
|
|
// valueMapping은 별도로 처리
|
|
};
|
|
|
|
// lookup 설정을 dynamicDataSource로 변환 (새로운 조회 기능)
|
|
if (col.lookup?.enabled && col.lookup.options && col.lookup.options.length > 0) {
|
|
baseColumn.dynamicDataSource = {
|
|
enabled: true,
|
|
options: col.lookup.options.map((option) => ({
|
|
id: option.id,
|
|
// "컬럼명 - 옵션라벨" 형식으로 헤더에 표시
|
|
label: option.displayLabel || option.label,
|
|
// 헤더에 표시될 전체 라벨 (컬럼명 - 옵션라벨)
|
|
headerLabel: `${col.label} - ${option.displayLabel || option.label}`,
|
|
sourceType: "table" as const,
|
|
tableConfig: {
|
|
tableName: option.tableName,
|
|
valueColumn: option.valueColumn,
|
|
joinConditions: option.conditions.map((cond) => ({
|
|
sourceField: cond.sourceField,
|
|
targetField: cond.targetColumn,
|
|
// sourceType에 따른 데이터 출처 설정
|
|
sourceType: cond.sourceType, // "currentRow" | "sectionField" | "externalTable"
|
|
fromFormData: cond.sourceType === "sectionField",
|
|
sectionId: cond.sectionId,
|
|
// 외부 테이블 조회 설정 (sourceType이 "externalTable"인 경우)
|
|
externalLookup: cond.externalLookup,
|
|
// 값 변환 설정 전달 (레거시 호환)
|
|
transform: cond.transform?.enabled
|
|
? {
|
|
tableName: cond.transform.tableName,
|
|
matchColumn: cond.transform.matchColumn,
|
|
resultColumn: cond.transform.resultColumn,
|
|
}
|
|
: undefined,
|
|
})),
|
|
},
|
|
// 조회 유형 정보 추가
|
|
lookupType: option.type,
|
|
})),
|
|
defaultOptionId: col.lookup.options.find((o) => o.isDefault)?.id || col.lookup.options[0]?.id,
|
|
};
|
|
}
|
|
// columnModes를 dynamicDataSource로 변환 (기존 로직 유지)
|
|
else if (col.columnModes && col.columnModes.length > 0) {
|
|
baseColumn.dynamicDataSource = {
|
|
enabled: true,
|
|
options: col.columnModes.map((mode) => ({
|
|
id: mode.id,
|
|
label: mode.label,
|
|
sourceType: "table" as const,
|
|
// 실제 조회 로직은 TableSectionRenderer에서 처리
|
|
tableConfig: {
|
|
tableName: mode.valueMapping?.externalRef?.tableName || "",
|
|
valueColumn: mode.valueMapping?.externalRef?.valueColumn || "",
|
|
joinConditions: (mode.valueMapping?.externalRef?.joinConditions || []).map((jc) => ({
|
|
sourceField: jc.sourceField,
|
|
targetField: jc.targetColumn,
|
|
})),
|
|
},
|
|
})),
|
|
defaultOptionId: col.columnModes.find((m) => m.isDefault)?.id || col.columnModes[0]?.id,
|
|
};
|
|
}
|
|
|
|
return baseColumn;
|
|
}
|
|
|
|
/**
|
|
* TableCalculationRule을 CalculationRule로 변환
|
|
*/
|
|
function convertToCalculationRule(calc: {
|
|
resultField: string;
|
|
formula: string;
|
|
dependencies: string[];
|
|
}): CalculationRule {
|
|
return {
|
|
result: calc.resultField,
|
|
formula: calc.formula,
|
|
dependencies: calc.dependencies,
|
|
};
|
|
}
|
|
|
|
/**
|
|
* 값 변환 함수: 중간 테이블을 통해 값을 변환
|
|
* 예: 거래처 이름 "(무)테스트업체" → 거래처 코드 "CUST-0002"
|
|
*/
|
|
async function transformValue(
|
|
value: any,
|
|
transform: { tableName: string; matchColumn: string; resultColumn: string },
|
|
): Promise<any> {
|
|
if (!value || !transform.tableName || !transform.matchColumn || !transform.resultColumn) {
|
|
return value;
|
|
}
|
|
|
|
try {
|
|
// 정확히 일치하는 검색
|
|
const response = await apiClient.post(`/table-management/tables/${transform.tableName}/data`, {
|
|
search: {
|
|
[transform.matchColumn]: {
|
|
value: value,
|
|
operator: "equals",
|
|
},
|
|
},
|
|
size: 1,
|
|
page: 1,
|
|
});
|
|
|
|
if (response.data.success && response.data.data?.data?.length > 0) {
|
|
const transformedValue = response.data.data.data[0][transform.resultColumn];
|
|
return transformedValue;
|
|
}
|
|
|
|
console.warn(`변환 실패: ${transform.tableName}.${transform.matchColumn} = "${value}" 인 행을 찾을 수 없습니다.`);
|
|
return undefined;
|
|
} catch (error) {
|
|
console.error("값 변환 오류:", error);
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 외부 테이블에서 조건 값을 조회하는 함수
|
|
* LookupCondition.sourceType이 "externalTable"인 경우 사용
|
|
*/
|
|
async function fetchExternalLookupValue(
|
|
externalLookup: {
|
|
tableName: string;
|
|
matchColumn: string;
|
|
matchSourceType: "currentRow" | "sourceTable" | "sectionField";
|
|
matchSourceField: string;
|
|
matchSectionId?: string;
|
|
resultColumn: string;
|
|
},
|
|
rowData: any,
|
|
sourceData: any,
|
|
formData: FormDataState,
|
|
): Promise<any> {
|
|
// 1. 비교 값 가져오기
|
|
let matchValue: any;
|
|
if (externalLookup.matchSourceType === "currentRow") {
|
|
matchValue = rowData[externalLookup.matchSourceField];
|
|
} else if (externalLookup.matchSourceType === "sourceTable") {
|
|
matchValue = sourceData?.[externalLookup.matchSourceField];
|
|
} else {
|
|
matchValue = formData[externalLookup.matchSourceField];
|
|
}
|
|
|
|
if (matchValue === undefined || matchValue === null || matchValue === "") {
|
|
console.warn(
|
|
`외부 테이블 조회: 비교 값이 없습니다. (${externalLookup.matchSourceType}.${externalLookup.matchSourceField})`,
|
|
);
|
|
return undefined;
|
|
}
|
|
|
|
// 2. 외부 테이블에서 값 조회 (정확히 일치하는 검색)
|
|
try {
|
|
const response = await apiClient.post(`/table-management/tables/${externalLookup.tableName}/data`, {
|
|
search: {
|
|
[externalLookup.matchColumn]: {
|
|
value: matchValue,
|
|
operator: "equals",
|
|
},
|
|
},
|
|
size: 1,
|
|
page: 1,
|
|
});
|
|
|
|
if (response.data.success && response.data.data?.data?.length > 0) {
|
|
return response.data.data.data[0][externalLookup.resultColumn];
|
|
}
|
|
|
|
console.warn(
|
|
`외부 테이블 조회: ${externalLookup.tableName}.${externalLookup.matchColumn} = "${matchValue}" 인 행을 찾을 수 없습니다.`,
|
|
);
|
|
return undefined;
|
|
} catch (error) {
|
|
console.error("외부 테이블 조회 오류:", error);
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 외부 테이블에서 값을 조회하는 함수
|
|
*
|
|
* @param tableName - 조회할 테이블명
|
|
* @param valueColumn - 가져올 컬럼명
|
|
* @param joinConditions - 조인 조건 목록
|
|
* @param rowData - 현재 행 데이터 (설정된 컬럼 필드)
|
|
* @param sourceData - 원본 소스 데이터 (_sourceData)
|
|
* @param formData - 폼 데이터 (다른 섹션 필드)
|
|
*/
|
|
async function fetchExternalValue(
|
|
tableName: string,
|
|
valueColumn: string,
|
|
joinConditions: TableJoinCondition[],
|
|
rowData: any,
|
|
sourceData: any,
|
|
formData: FormDataState,
|
|
): Promise<any> {
|
|
if (joinConditions.length === 0) {
|
|
return undefined;
|
|
}
|
|
|
|
try {
|
|
const whereConditions: Record<string, any> = {};
|
|
|
|
for (const condition of joinConditions) {
|
|
let value: any;
|
|
|
|
// 값 출처에 따라 가져오기 (4가지 소스 타입 지원)
|
|
if (condition.sourceType === "row") {
|
|
// 현재 행 데이터 (설정된 컬럼 필드)
|
|
value = rowData[condition.sourceField];
|
|
} else if (condition.sourceType === "sourceData") {
|
|
// 원본 소스 테이블 데이터 (_sourceData)
|
|
value = sourceData?.[condition.sourceField];
|
|
} else if (condition.sourceType === "formData") {
|
|
// formData에서 가져오기 (다른 섹션)
|
|
value = formData[condition.sourceField];
|
|
} else if (condition.sourceType === "externalTable" && condition.externalLookup) {
|
|
// 외부 테이블에서 조회하여 가져오기
|
|
value = await fetchExternalLookupValue(condition.externalLookup, rowData, sourceData, formData);
|
|
}
|
|
|
|
if (value === undefined || value === null || value === "") {
|
|
return undefined;
|
|
}
|
|
|
|
// 값 변환이 필요한 경우 (예: 이름 → 코드) - 레거시 호환
|
|
if (condition.transform) {
|
|
value = await transformValue(value, condition.transform);
|
|
if (value === undefined) {
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
// 숫자형 ID 변환
|
|
let convertedValue = value;
|
|
if (condition.targetColumn.endsWith("_id") || condition.targetColumn === "id") {
|
|
const numValue = Number(value);
|
|
if (!isNaN(numValue)) {
|
|
convertedValue = numValue;
|
|
}
|
|
}
|
|
|
|
// 정확히 일치하는 검색을 위해 operator: "equals" 사용
|
|
whereConditions[condition.targetColumn] = {
|
|
value: convertedValue,
|
|
operator: "equals",
|
|
};
|
|
}
|
|
|
|
// API 호출
|
|
const response = await apiClient.post(`/table-management/tables/${tableName}/data`, {
|
|
search: whereConditions,
|
|
size: 1,
|
|
page: 1,
|
|
});
|
|
|
|
if (response.data.success && response.data.data?.data?.length > 0) {
|
|
return response.data.data.data[0][valueColumn];
|
|
}
|
|
|
|
return undefined;
|
|
} catch (error) {
|
|
console.error("외부 테이블 조회 오류:", error);
|
|
return undefined;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 테이블 섹션 렌더러
|
|
* UniversalFormModal 내에서 테이블 형식의 데이터를 표시하고 편집
|
|
*/
|
|
export function TableSectionRenderer({
|
|
sectionId,
|
|
tableConfig,
|
|
formData,
|
|
onFormDataChange,
|
|
onTableDataChange,
|
|
onConditionalTableDataChange,
|
|
className,
|
|
}: TableSectionRendererProps) {
|
|
// 테이블 데이터 상태 (일반 모드)
|
|
const [tableData, setTableData] = useState<any[]>([]);
|
|
|
|
// 조건부 테이블 데이터 상태 (조건별로 분리)
|
|
const [conditionalTableData, setConditionalTableData] = useState<ConditionalTableData>({});
|
|
|
|
// 조건부 테이블: 선택된 조건들 (체크박스 모드)
|
|
const [selectedConditions, setSelectedConditions] = useState<string[]>([]);
|
|
|
|
// 조건부 테이블: 현재 활성 탭
|
|
const [activeConditionTab, setActiveConditionTab] = useState<string>("");
|
|
|
|
// 조건부 테이블: 현재 모달이 열린 조건 (어떤 조건의 테이블에 추가할지)
|
|
const [modalCondition, setModalCondition] = useState<string>("");
|
|
|
|
// 모달 상태
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
|
|
// 체크박스 선택 상태 (조건별로 분리)
|
|
const [selectedRows, setSelectedRows] = useState<Set<number>>(new Set());
|
|
const [conditionalSelectedRows, setConditionalSelectedRows] = useState<Record<string, Set<number>>>({});
|
|
|
|
// 너비 조정 트리거 (홀수: 자동맞춤, 짝수: 균등분배)
|
|
const [widthTrigger, setWidthTrigger] = useState(0);
|
|
|
|
// 동적 데이터 소스 활성화 상태
|
|
const [activeDataSources, setActiveDataSources] = useState<Record<string, string>>({});
|
|
|
|
// 날짜 일괄 적용 완료 플래그 (컬럼별로 한 번만 적용)
|
|
const [batchAppliedFields, setBatchAppliedFields] = useState<Set<string>>(new Set());
|
|
|
|
// 초기 데이터 로드 완료 플래그 (무한 루프 방지)
|
|
const initialDataLoadedRef = React.useRef(false);
|
|
|
|
// 조건부 테이블 설정
|
|
const conditionalConfig = tableConfig.conditionalTable;
|
|
const isConditionalMode = conditionalConfig?.enabled ?? false;
|
|
|
|
// 조건부 테이블: 동적 옵션 로드 상태
|
|
const [dynamicOptions, setDynamicOptions] = useState<{ id: string; value: string; label: string }[]>([]);
|
|
const [dynamicOptionsLoading, setDynamicOptionsLoading] = useState(false);
|
|
const dynamicOptionsLoadedRef = React.useRef(false);
|
|
|
|
// 조건부 테이블: 동적 옵션 로드 (optionSource 설정이 있는 경우)
|
|
useEffect(() => {
|
|
if (!isConditionalMode) return;
|
|
if (!conditionalConfig?.optionSource?.enabled) return;
|
|
if (dynamicOptionsLoadedRef.current) return;
|
|
|
|
const { tableName, valueColumn, labelColumn, filterCondition } = conditionalConfig.optionSource;
|
|
|
|
if (!tableName || !valueColumn) return;
|
|
|
|
const loadDynamicOptions = async () => {
|
|
setDynamicOptionsLoading(true);
|
|
try {
|
|
// DISTINCT 값을 가져오기 위한 API 호출
|
|
const response = await apiClient.post(`/table-management/tables/${tableName}/data`, {
|
|
search: filterCondition ? { _raw: filterCondition } : {},
|
|
size: 1000,
|
|
page: 1,
|
|
});
|
|
|
|
if (response.data.success && response.data.data?.data) {
|
|
const rows = response.data.data.data;
|
|
|
|
// 중복 제거하여 고유 값 추출
|
|
const uniqueValues = new Map<string, string>();
|
|
for (const row of rows) {
|
|
const value = row[valueColumn];
|
|
if (value && !uniqueValues.has(value)) {
|
|
const label = labelColumn ? row[labelColumn] || value : value;
|
|
uniqueValues.set(value, label);
|
|
}
|
|
}
|
|
|
|
// 옵션 배열로 변환
|
|
const options = Array.from(uniqueValues.entries()).map(([value, label], index) => ({
|
|
id: `dynamic_${index}`,
|
|
value,
|
|
label,
|
|
}));
|
|
|
|
console.log("[TableSectionRenderer] 동적 옵션 로드 완료:", {
|
|
tableName,
|
|
valueColumn,
|
|
optionCount: options.length,
|
|
options,
|
|
});
|
|
|
|
setDynamicOptions(options);
|
|
dynamicOptionsLoadedRef.current = true;
|
|
}
|
|
} catch (error) {
|
|
console.error("[TableSectionRenderer] 동적 옵션 로드 실패:", error);
|
|
} finally {
|
|
setDynamicOptionsLoading(false);
|
|
}
|
|
};
|
|
|
|
loadDynamicOptions();
|
|
}, [isConditionalMode, conditionalConfig?.optionSource]);
|
|
|
|
// ============================================
|
|
// 동적 Select 옵션 (소스 테이블에서 드롭다운 옵션 로드)
|
|
// ============================================
|
|
|
|
// 소스 테이블 데이터 캐시 (동적 Select 옵션용)
|
|
const [sourceDataCache, setSourceDataCache] = useState<any[]>([]);
|
|
const sourceDataLoadedRef = React.useRef(false);
|
|
|
|
// 동적 Select 옵션이 있는 컬럼 확인
|
|
const hasDynamicSelectColumns = useMemo(() => {
|
|
return tableConfig.columns?.some((col) => col.dynamicSelectOptions?.enabled);
|
|
}, [tableConfig.columns]);
|
|
|
|
// 소스 테이블 데이터 로드 (동적 Select 옵션용)
|
|
useEffect(() => {
|
|
if (!hasDynamicSelectColumns) return;
|
|
if (sourceDataLoadedRef.current) return;
|
|
if (!tableConfig.source?.tableName) return;
|
|
|
|
const loadSourceData = async () => {
|
|
try {
|
|
// 조건부 테이블 필터 조건 적용
|
|
const filterCondition: Record<string, any> = {};
|
|
|
|
// 소스 필터가 활성화되어 있고 조건이 선택되어 있으면 필터 적용
|
|
if (conditionalConfig?.sourceFilter?.enabled && activeConditionTab) {
|
|
filterCondition[conditionalConfig.sourceFilter.filterColumn] = activeConditionTab;
|
|
}
|
|
|
|
const response = await apiClient.post(`/table-management/tables/${tableConfig.source.tableName}/data`, {
|
|
search: filterCondition,
|
|
size: 1000,
|
|
page: 1,
|
|
});
|
|
|
|
if (response.data.success && response.data.data?.data) {
|
|
setSourceDataCache(response.data.data.data);
|
|
sourceDataLoadedRef.current = true;
|
|
console.log("[TableSectionRenderer] 소스 데이터 로드 완료:", {
|
|
tableName: tableConfig.source.tableName,
|
|
rowCount: response.data.data.data.length,
|
|
filter: filterCondition,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("[TableSectionRenderer] 소스 데이터 로드 실패:", error);
|
|
}
|
|
};
|
|
|
|
loadSourceData();
|
|
}, [hasDynamicSelectColumns, tableConfig.source?.tableName, conditionalConfig?.sourceFilter, activeConditionTab]);
|
|
|
|
// 조건 탭 변경 시 소스 데이터 다시 로드
|
|
useEffect(() => {
|
|
if (!hasDynamicSelectColumns) return;
|
|
if (!conditionalConfig?.sourceFilter?.enabled) return;
|
|
if (!activeConditionTab) return;
|
|
if (!tableConfig.source?.tableName) return;
|
|
|
|
// 조건 변경 시 캐시 리셋하고 즉시 다시 로드
|
|
sourceDataLoadedRef.current = false;
|
|
setSourceDataCache([]);
|
|
|
|
// 즉시 데이터 다시 로드 (기존 useEffect에 의존하지 않고 직접 호출)
|
|
const loadSourceData = async () => {
|
|
try {
|
|
const filterCondition: Record<string, any> = {};
|
|
filterCondition[conditionalConfig.sourceFilter!.filterColumn] = activeConditionTab;
|
|
|
|
const response = await apiClient.post(`/table-management/tables/${tableConfig.source!.tableName}/data`, {
|
|
search: filterCondition,
|
|
size: 1000,
|
|
page: 1,
|
|
});
|
|
|
|
if (response.data.success && response.data.data?.data) {
|
|
setSourceDataCache(response.data.data.data);
|
|
sourceDataLoadedRef.current = true;
|
|
console.log("[TableSectionRenderer] 조건 탭 변경 - 소스 데이터 로드 완료:", {
|
|
tableName: tableConfig.source!.tableName,
|
|
rowCount: response.data.data.data.length,
|
|
filter: filterCondition,
|
|
});
|
|
}
|
|
} catch (error) {
|
|
console.error("[TableSectionRenderer] 소스 데이터 로드 실패:", error);
|
|
}
|
|
};
|
|
|
|
loadSourceData();
|
|
}, [
|
|
activeConditionTab,
|
|
hasDynamicSelectColumns,
|
|
conditionalConfig?.sourceFilter?.enabled,
|
|
conditionalConfig?.sourceFilter?.filterColumn,
|
|
tableConfig.source?.tableName,
|
|
]);
|
|
|
|
// 컬럼별 동적 Select 옵션 생성
|
|
const dynamicSelectOptionsMap = useMemo(() => {
|
|
const optionsMap: Record<string, { value: string; label: string }[]> = {};
|
|
|
|
if (!sourceDataCache.length) return optionsMap;
|
|
|
|
for (const col of tableConfig.columns || []) {
|
|
if (!col.dynamicSelectOptions?.enabled) continue;
|
|
|
|
const { sourceField, labelField, distinct = true } = col.dynamicSelectOptions;
|
|
|
|
if (!sourceField) continue;
|
|
|
|
// 소스 데이터에서 옵션 추출
|
|
const seenValues = new Set<string>();
|
|
const options: { value: string; label: string }[] = [];
|
|
|
|
for (const row of sourceDataCache) {
|
|
const value = row[sourceField];
|
|
if (value === undefined || value === null || value === "") continue;
|
|
|
|
const stringValue = String(value);
|
|
|
|
if (distinct && seenValues.has(stringValue)) continue;
|
|
seenValues.add(stringValue);
|
|
|
|
const label = labelField ? row[labelField] || stringValue : stringValue;
|
|
options.push({ value: stringValue, label: String(label) });
|
|
}
|
|
|
|
optionsMap[col.field] = options;
|
|
}
|
|
|
|
return optionsMap;
|
|
}, [sourceDataCache, tableConfig.columns]);
|
|
|
|
// 데이터 변경 핸들러 (날짜 일괄 적용 로직 포함) - 다른 함수에서 참조하므로 먼저 정의
|
|
const handleDataChange = useCallback(
|
|
(newData: any[]) => {
|
|
let processedData = newData;
|
|
|
|
// 날짜 일괄 적용 로직: batchApply가 활성화된 날짜 컬럼 처리
|
|
const batchApplyColumns = tableConfig.columns.filter((col) => col.type === "date" && col.batchApply === true);
|
|
|
|
for (const dateCol of batchApplyColumns) {
|
|
// 이미 일괄 적용된 컬럼은 건너뜀
|
|
if (batchAppliedFields.has(dateCol.field)) continue;
|
|
|
|
// 해당 컬럼에 값이 있는 행과 없는 행 분류
|
|
const itemsWithDate = processedData.filter((item) => item[dateCol.field]);
|
|
const itemsWithoutDate = processedData.filter((item) => !item[dateCol.field]);
|
|
|
|
// 조건: 정확히 1개만 날짜가 있고, 나머지는 모두 비어있을 때
|
|
if (itemsWithDate.length === 1 && itemsWithoutDate.length > 0) {
|
|
const selectedDate = itemsWithDate[0][dateCol.field];
|
|
|
|
// 모든 행에 동일한 날짜 적용
|
|
processedData = processedData.map((item) => ({
|
|
...item,
|
|
[dateCol.field]: selectedDate,
|
|
}));
|
|
|
|
// 플래그 활성화 (이후 개별 수정 가능)
|
|
setBatchAppliedFields((prev) => new Set([...prev, dateCol.field]));
|
|
}
|
|
}
|
|
|
|
setTableData(processedData);
|
|
onTableDataChange(processedData);
|
|
},
|
|
[onTableDataChange, tableConfig.columns, batchAppliedFields],
|
|
);
|
|
|
|
// 행 선택 모드: 드롭다운 값 변경 시 같은 소스 행의 다른 컬럼들 자동 채움
|
|
const handleDynamicSelectChange = useCallback(
|
|
(rowIndex: number, columnField: string, selectedValue: string, conditionValue?: string) => {
|
|
const column = tableConfig.columns?.find((col) => col.field === columnField);
|
|
if (!column?.dynamicSelectOptions?.rowSelectionMode?.enabled) {
|
|
// 행 선택 모드가 아니면 일반 값 변경만
|
|
if (conditionValue && isConditionalMode) {
|
|
const currentData = conditionalTableData[conditionValue] || [];
|
|
const newData = [...currentData];
|
|
newData[rowIndex] = { ...newData[rowIndex], [columnField]: selectedValue };
|
|
setConditionalTableData((prev) => ({ ...prev, [conditionValue]: newData }));
|
|
onConditionalTableDataChange?.(conditionValue, newData);
|
|
} else {
|
|
const newData = [...tableData];
|
|
newData[rowIndex] = { ...newData[rowIndex], [columnField]: selectedValue };
|
|
handleDataChange(newData);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// 행 선택 모드: 소스 데이터에서 해당 값을 가진 행 찾기
|
|
const { sourceField } = column.dynamicSelectOptions;
|
|
const { autoFillColumns, sourceIdColumn, targetIdField } = column.dynamicSelectOptions.rowSelectionMode;
|
|
|
|
const sourceRow = sourceDataCache.find((row) => String(row[sourceField]) === selectedValue);
|
|
|
|
if (!sourceRow) {
|
|
console.warn(`[TableSectionRenderer] 소스 행을 찾을 수 없음: ${sourceField} = ${selectedValue}`);
|
|
return;
|
|
}
|
|
|
|
// 현재 행 데이터 가져오기
|
|
let currentData: any[];
|
|
if (conditionValue && isConditionalMode) {
|
|
currentData = conditionalTableData[conditionValue] || [];
|
|
} else {
|
|
currentData = tableData;
|
|
}
|
|
|
|
const newData = [...currentData];
|
|
const updatedRow = { ...newData[rowIndex], [columnField]: selectedValue };
|
|
|
|
// 자동 채움 매핑 적용
|
|
if (autoFillColumns) {
|
|
for (const mapping of autoFillColumns) {
|
|
const sourceValue = sourceRow[mapping.sourceColumn];
|
|
if (sourceValue !== undefined) {
|
|
updatedRow[mapping.targetField] = sourceValue;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 소스 ID 저장
|
|
if (sourceIdColumn && targetIdField) {
|
|
updatedRow[targetIdField] = sourceRow[sourceIdColumn];
|
|
}
|
|
|
|
newData[rowIndex] = updatedRow;
|
|
|
|
// 데이터 업데이트
|
|
if (conditionValue && isConditionalMode) {
|
|
setConditionalTableData((prev) => ({ ...prev, [conditionValue]: newData }));
|
|
onConditionalTableDataChange?.(conditionValue, newData);
|
|
} else {
|
|
handleDataChange(newData);
|
|
}
|
|
|
|
console.log("[TableSectionRenderer] 행 선택 모드 자동 채움:", {
|
|
columnField,
|
|
selectedValue,
|
|
sourceRow,
|
|
updatedRow,
|
|
});
|
|
},
|
|
[
|
|
tableConfig.columns,
|
|
sourceDataCache,
|
|
tableData,
|
|
conditionalTableData,
|
|
isConditionalMode,
|
|
handleDataChange,
|
|
onConditionalTableDataChange,
|
|
],
|
|
);
|
|
|
|
// 참조 컬럼 값 조회 함수 (saveToTarget: false인 컬럼에 대해 소스 테이블 조회)
|
|
const loadReferenceColumnValues = useCallback(
|
|
async (data: any[]) => {
|
|
// saveToTarget: false이고 referenceDisplay가 설정된 컬럼 찾기
|
|
const referenceColumns = (tableConfig.columns || []).filter(
|
|
(col) => col.saveConfig?.saveToTarget === false && col.saveConfig?.referenceDisplay,
|
|
);
|
|
|
|
if (referenceColumns.length === 0) return;
|
|
|
|
const sourceTableName = tableConfig.source?.tableName;
|
|
if (!sourceTableName) {
|
|
console.warn("[TableSectionRenderer] 참조 조회를 위한 소스 테이블이 설정되지 않았습니다.");
|
|
return;
|
|
}
|
|
|
|
// 참조 ID들 수집 (중복 제거)
|
|
const referenceIdSet = new Set<string>();
|
|
|
|
for (const col of referenceColumns) {
|
|
const refDisplay = col.saveConfig!.referenceDisplay!;
|
|
|
|
for (const row of data) {
|
|
const refId = row[refDisplay.referenceIdField];
|
|
if (refId !== undefined && refId !== null && refId !== "") {
|
|
referenceIdSet.add(String(refId));
|
|
}
|
|
}
|
|
}
|
|
|
|
if (referenceIdSet.size === 0) return;
|
|
|
|
try {
|
|
// 소스 테이블에서 참조 ID에 해당하는 데이터 조회
|
|
const response = await apiClient.post(`/table-management/tables/${sourceTableName}/data`, {
|
|
search: { id: Array.from(referenceIdSet) }, // ID 배열로 조회
|
|
size: 1000,
|
|
page: 1,
|
|
});
|
|
|
|
if (!response.data?.success || !response.data?.data?.data) {
|
|
console.warn("[TableSectionRenderer] 참조 데이터 조회 실패");
|
|
return;
|
|
}
|
|
|
|
const sourceData: any[] = response.data.data.data;
|
|
|
|
// ID를 키로 하는 맵 생성
|
|
const sourceDataMap: Record<string, any> = {};
|
|
for (const sourceRow of sourceData) {
|
|
sourceDataMap[String(sourceRow.id)] = sourceRow;
|
|
}
|
|
|
|
// 각 행에 참조 컬럼 값 채우기
|
|
const updatedData = data.map((row) => {
|
|
const newRow = { ...row };
|
|
|
|
for (const col of referenceColumns) {
|
|
const refDisplay = col.saveConfig!.referenceDisplay!;
|
|
const refId = row[refDisplay.referenceIdField];
|
|
|
|
if (refId !== undefined && refId !== null && refId !== "") {
|
|
const sourceRow = sourceDataMap[String(refId)];
|
|
if (sourceRow) {
|
|
newRow[col.field] = sourceRow[refDisplay.sourceColumn];
|
|
}
|
|
}
|
|
}
|
|
|
|
return newRow;
|
|
});
|
|
|
|
console.log("[TableSectionRenderer] 참조 컬럼 값 조회 완료:", {
|
|
referenceColumns: referenceColumns.map((c) => c.field),
|
|
updatedRowCount: updatedData.length,
|
|
});
|
|
|
|
setTableData(updatedData);
|
|
} catch (error) {
|
|
console.error("[TableSectionRenderer] 참조 데이터 조회 실패:", error);
|
|
}
|
|
},
|
|
[tableConfig.columns, tableConfig.source?.tableName],
|
|
);
|
|
|
|
// formData에서 초기 테이블 데이터 로드 (수정 모드에서 _groupedData 표시)
|
|
useEffect(() => {
|
|
// 이미 초기화되었으면 스킵
|
|
if (initialDataLoadedRef.current) return;
|
|
|
|
const tableSectionKey = `_tableSection_${sectionId}`;
|
|
const initialData = formData[tableSectionKey];
|
|
|
|
if (Array.isArray(initialData) && initialData.length > 0) {
|
|
console.log("[TableSectionRenderer] 초기 데이터 로드:", {
|
|
sectionId,
|
|
itemCount: initialData.length,
|
|
});
|
|
setTableData(initialData);
|
|
initialDataLoadedRef.current = true;
|
|
|
|
// 참조 컬럼 값 조회 (saveToTarget: false인 컬럼)
|
|
loadReferenceColumnValues(initialData);
|
|
}
|
|
}, [sectionId, formData, loadReferenceColumnValues]);
|
|
|
|
// RepeaterColumnConfig로 변환 (동적 Select 옵션 반영)
|
|
const columns: RepeaterColumnConfig[] = useMemo(() => {
|
|
return (tableConfig.columns || []).map((col) => {
|
|
const baseColumn = convertToRepeaterColumn(col);
|
|
|
|
// 동적 Select 옵션이 있으면 적용
|
|
if (col.dynamicSelectOptions?.enabled && dynamicSelectOptionsMap[col.field]) {
|
|
baseColumn.selectOptions = dynamicSelectOptionsMap[col.field];
|
|
}
|
|
|
|
return baseColumn;
|
|
});
|
|
}, [tableConfig.columns, dynamicSelectOptionsMap]);
|
|
|
|
// 원본 계산 규칙 (조건부 계산 포함)
|
|
const originalCalculationRules: TableCalculationRule[] = useMemo(
|
|
() => tableConfig.calculations || [],
|
|
[tableConfig.calculations],
|
|
);
|
|
|
|
// 기본 계산 규칙 변환 (RepeaterTable용 - 조건부 계산이 없는 경우에 사용)
|
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
const calculationRules: CalculationRule[] = originalCalculationRules.map(convertToCalculationRule);
|
|
|
|
// 조건부 계산 로직: 행의 조건 필드 값에 따라 적절한 계산식 선택
|
|
const getFormulaForRow = useCallback((rule: TableCalculationRule, row: Record<string, unknown>): string => {
|
|
// 조건부 계산이 활성화된 경우
|
|
if (rule.conditionalCalculation?.enabled && rule.conditionalCalculation.conditionField) {
|
|
const conditionValue = row[rule.conditionalCalculation.conditionField];
|
|
// 조건값과 일치하는 규칙 찾기
|
|
const matchedRule = rule.conditionalCalculation.rules?.find((r) => r.conditionValue === conditionValue);
|
|
if (matchedRule) {
|
|
return matchedRule.formula;
|
|
}
|
|
// 일치하는 규칙이 없으면 기본 계산식 사용
|
|
if (rule.conditionalCalculation.defaultFormula) {
|
|
return rule.conditionalCalculation.defaultFormula;
|
|
}
|
|
}
|
|
// 조건부 계산이 비활성화되었거나 기본값이 없으면 원래 계산식 사용
|
|
return rule.formula;
|
|
}, []);
|
|
|
|
// 계산 로직 (조건부 계산 지원)
|
|
const calculateRow = useCallback(
|
|
(row: any): any => {
|
|
if (originalCalculationRules.length === 0) return row;
|
|
|
|
const updatedRow = { ...row };
|
|
|
|
for (const rule of originalCalculationRules) {
|
|
try {
|
|
// 조건부 계산에 따라 적절한 계산식 선택
|
|
let formula = getFormulaForRow(rule, row);
|
|
|
|
if (!formula) continue;
|
|
|
|
const fieldMatches = formula.match(/[a-zA-Z_][a-zA-Z0-9_]*/g) || [];
|
|
const dependencies = rule.dependencies.length > 0 ? rule.dependencies : fieldMatches;
|
|
|
|
for (const dep of dependencies) {
|
|
if (dep === rule.resultField) continue;
|
|
const value = parseFloat(row[dep]) || 0;
|
|
formula = formula.replace(new RegExp(`\\b${dep}\\b`, "g"), value.toString());
|
|
}
|
|
|
|
const result = new Function(`return ${formula}`)();
|
|
updatedRow[rule.resultField] = result;
|
|
} catch (error) {
|
|
console.error(`계산 오류 (${rule.formula}):`, error);
|
|
updatedRow[rule.resultField] = 0;
|
|
}
|
|
}
|
|
|
|
return updatedRow;
|
|
},
|
|
[originalCalculationRules, getFormulaForRow],
|
|
);
|
|
|
|
const calculateAll = useCallback(
|
|
(data: any[]): any[] => {
|
|
return data.map((row) => calculateRow(row));
|
|
},
|
|
[calculateRow],
|
|
);
|
|
|
|
// 행 변경 핸들러 (동적 Select 행 선택 모드 지원)
|
|
const handleRowChange = useCallback(
|
|
(index: number, newRow: any, conditionValue?: string) => {
|
|
const oldRow =
|
|
conditionValue && isConditionalMode
|
|
? conditionalTableData[conditionValue]?.[index] || {}
|
|
: tableData[index] || {};
|
|
|
|
// 변경된 필드 찾기
|
|
const changedFields: string[] = [];
|
|
for (const key of Object.keys(newRow)) {
|
|
if (oldRow[key] !== newRow[key]) {
|
|
changedFields.push(key);
|
|
}
|
|
}
|
|
|
|
// 동적 Select 컬럼의 행 선택 모드 확인
|
|
for (const changedField of changedFields) {
|
|
const column = tableConfig.columns?.find((col) => col.field === changedField);
|
|
if (column?.dynamicSelectOptions?.rowSelectionMode?.enabled) {
|
|
// 행 선택 모드 처리 (자동 채움)
|
|
handleDynamicSelectChange(index, changedField, newRow[changedField], conditionValue);
|
|
return; // 행 선택 모드에서 처리 완료
|
|
}
|
|
}
|
|
|
|
// 일반 행 변경 처리
|
|
const calculatedRow = calculateRow(newRow);
|
|
|
|
if (conditionValue && isConditionalMode) {
|
|
const currentData = conditionalTableData[conditionValue] || [];
|
|
const newData = [...currentData];
|
|
newData[index] = calculatedRow;
|
|
setConditionalTableData((prev) => ({ ...prev, [conditionValue]: newData }));
|
|
onConditionalTableDataChange?.(conditionValue, newData);
|
|
} else {
|
|
const newData = [...tableData];
|
|
newData[index] = calculatedRow;
|
|
handleDataChange(newData);
|
|
}
|
|
},
|
|
[
|
|
tableData,
|
|
conditionalTableData,
|
|
isConditionalMode,
|
|
tableConfig.columns,
|
|
calculateRow,
|
|
handleDataChange,
|
|
handleDynamicSelectChange,
|
|
onConditionalTableDataChange,
|
|
],
|
|
);
|
|
|
|
// 행 삭제 핸들러
|
|
const handleRowDelete = useCallback(
|
|
(index: number) => {
|
|
const newData = tableData.filter((_, i) => i !== index);
|
|
handleDataChange(newData);
|
|
},
|
|
[tableData, handleDataChange],
|
|
);
|
|
|
|
// 선택된 항목 일괄 삭제
|
|
const handleBulkDelete = useCallback(() => {
|
|
if (selectedRows.size === 0) return;
|
|
const newData = tableData.filter((_, index) => !selectedRows.has(index));
|
|
handleDataChange(newData);
|
|
setSelectedRows(new Set());
|
|
|
|
// 데이터가 모두 삭제되면 일괄 적용 플래그도 리셋
|
|
if (newData.length === 0) {
|
|
setBatchAppliedFields(new Set());
|
|
}
|
|
}, [tableData, selectedRows, handleDataChange]);
|
|
|
|
// 아이템 추가 핸들러 (모달에서 선택)
|
|
const handleAddItems = useCallback(
|
|
async (items: any[]) => {
|
|
// 각 아이템에 대해 valueMapping 적용
|
|
const mappedItems = await Promise.all(
|
|
items.map(async (sourceItem) => {
|
|
const newItem: any = {};
|
|
|
|
for (const col of tableConfig.columns) {
|
|
const mapping = col.valueMapping;
|
|
|
|
// 0. lookup 설정이 있는 경우 (동적 조회)
|
|
if (col.lookup?.enabled && col.lookup.options && col.lookup.options.length > 0) {
|
|
// 현재 활성화된 옵션 또는 기본 옵션 사용
|
|
const activeOptionId = activeDataSources[col.field];
|
|
const defaultOption = col.lookup.options.find((o) => o.isDefault) || col.lookup.options[0];
|
|
const selectedOption = activeOptionId
|
|
? col.lookup.options.find((o) => o.id === activeOptionId) || defaultOption
|
|
: defaultOption;
|
|
|
|
if (selectedOption) {
|
|
// sameTable 타입: 소스 데이터에서 직접 값 복사
|
|
if (selectedOption.type === "sameTable") {
|
|
const value = sourceItem[selectedOption.valueColumn];
|
|
if (value !== undefined) {
|
|
newItem[col.field] = value;
|
|
}
|
|
// _sourceData에 원본 저장 (나중에 다른 옵션으로 전환 시 사용)
|
|
newItem._sourceData = sourceItem;
|
|
continue;
|
|
}
|
|
|
|
// relatedTable, combinedLookup: 외부 테이블 조회
|
|
// 조인 조건 구성 (4가지 소스 타입 지원)
|
|
const joinConditions: TableJoinCondition[] = selectedOption.conditions.map((cond) => {
|
|
// sourceType 매핑
|
|
let sourceType: "row" | "sourceData" | "formData" | "externalTable";
|
|
if (cond.sourceType === "currentRow") {
|
|
sourceType = "row";
|
|
} else if (cond.sourceType === "sourceTable") {
|
|
sourceType = "sourceData";
|
|
} else if (cond.sourceType === "externalTable") {
|
|
sourceType = "externalTable";
|
|
} else {
|
|
sourceType = "formData";
|
|
}
|
|
|
|
return {
|
|
sourceType,
|
|
sourceField: cond.sourceField,
|
|
targetColumn: cond.targetColumn,
|
|
// 외부 테이블 조회 설정
|
|
externalLookup: cond.externalLookup,
|
|
// 값 변환 설정 전달 (레거시 호환)
|
|
transform: cond.transform?.enabled
|
|
? {
|
|
tableName: cond.transform.tableName,
|
|
matchColumn: cond.transform.matchColumn,
|
|
resultColumn: cond.transform.resultColumn,
|
|
}
|
|
: undefined,
|
|
};
|
|
});
|
|
|
|
// 외부 테이블에서 값 조회 (sourceItem이 _sourceData 역할)
|
|
const value = await fetchExternalValue(
|
|
selectedOption.tableName,
|
|
selectedOption.valueColumn,
|
|
joinConditions,
|
|
{ ...sourceItem, ...newItem }, // rowData (현재 행)
|
|
sourceItem, // sourceData (소스 테이블 원본)
|
|
formData,
|
|
);
|
|
|
|
if (value !== undefined) {
|
|
newItem[col.field] = value;
|
|
}
|
|
|
|
// _sourceData에 원본 저장
|
|
newItem._sourceData = sourceItem;
|
|
}
|
|
continue;
|
|
}
|
|
|
|
// 1. 먼저 col.sourceField 확인 (간단 매핑)
|
|
if (!mapping && col.sourceField) {
|
|
// sourceField가 명시적으로 설정된 경우
|
|
if (sourceItem[col.sourceField] !== undefined) {
|
|
newItem[col.field] = sourceItem[col.sourceField];
|
|
}
|
|
continue;
|
|
}
|
|
|
|
if (!mapping) {
|
|
// 매핑 없으면 소스에서 동일 필드명으로 복사
|
|
if (sourceItem[col.field] !== undefined) {
|
|
newItem[col.field] = sourceItem[col.field];
|
|
}
|
|
continue;
|
|
}
|
|
|
|
// 2. valueMapping이 있는 경우 (고급 매핑)
|
|
switch (mapping.type) {
|
|
case "source":
|
|
// 소스 테이블에서 복사
|
|
const srcField = mapping.sourceField || col.sourceField || col.field;
|
|
if (sourceItem[srcField] !== undefined) {
|
|
newItem[col.field] = sourceItem[srcField];
|
|
}
|
|
break;
|
|
|
|
case "manual":
|
|
// 사용자 입력 (빈 값 또는 기본값)
|
|
newItem[col.field] = col.defaultValue ?? undefined;
|
|
break;
|
|
|
|
case "internal":
|
|
// formData에서 값 가져오기
|
|
if (mapping.internalField) {
|
|
newItem[col.field] = formData[mapping.internalField];
|
|
}
|
|
break;
|
|
|
|
case "external":
|
|
// 외부 테이블에서 조회
|
|
if (mapping.externalRef) {
|
|
const { tableName, valueColumn, joinConditions } = mapping.externalRef;
|
|
const value = await fetchExternalValue(
|
|
tableName,
|
|
valueColumn,
|
|
joinConditions,
|
|
{ ...sourceItem, ...newItem }, // rowData
|
|
sourceItem, // sourceData
|
|
formData,
|
|
);
|
|
if (value !== undefined) {
|
|
newItem[col.field] = value;
|
|
}
|
|
}
|
|
break;
|
|
}
|
|
|
|
// 기본값 적용
|
|
if (col.defaultValue !== undefined && newItem[col.field] === undefined) {
|
|
newItem[col.field] = col.defaultValue;
|
|
}
|
|
|
|
// 부모에서 값 받기 (receiveFromParent)
|
|
if (col.receiveFromParent) {
|
|
const parentField = col.parentFieldName || col.field;
|
|
if (formData[parentField] !== undefined) {
|
|
newItem[col.field] = formData[parentField];
|
|
}
|
|
}
|
|
}
|
|
|
|
return newItem;
|
|
}),
|
|
);
|
|
|
|
// 계산 필드 업데이트
|
|
const calculatedItems = calculateAll(mappedItems);
|
|
|
|
// 기존 데이터에 추가
|
|
const newData = [...tableData, ...calculatedItems];
|
|
handleDataChange(newData);
|
|
},
|
|
[tableConfig.columns, formData, tableData, calculateAll, handleDataChange, activeDataSources],
|
|
);
|
|
|
|
// 컬럼 모드/조회 옵션 변경 핸들러
|
|
const handleDataSourceChange = useCallback(
|
|
async (columnField: string, optionId: string) => {
|
|
setActiveDataSources((prev) => ({
|
|
...prev,
|
|
[columnField]: optionId,
|
|
}));
|
|
|
|
// 해당 컬럼의 모든 행 데이터 재조회
|
|
const column = tableConfig.columns.find((col) => col.field === columnField);
|
|
|
|
// lookup 설정이 있는 경우 (새로운 조회 기능)
|
|
if (column?.lookup?.enabled && column.lookup.options) {
|
|
const selectedOption = column.lookup.options.find((opt) => opt.id === optionId);
|
|
if (!selectedOption) return;
|
|
|
|
// sameTable 타입: 현재 행의 소스 데이터에서 값 복사 (외부 조회 필요 없음)
|
|
if (selectedOption.type === "sameTable") {
|
|
const updatedData = tableData.map((row) => {
|
|
// sourceField에서 값을 가져와 해당 컬럼에 복사
|
|
// row에 _sourceData가 있으면 거기서, 없으면 row 자체에서 가져옴
|
|
const sourceData = row._sourceData || row;
|
|
const newValue = sourceData[selectedOption.valueColumn] ?? row[columnField];
|
|
return { ...row, [columnField]: newValue };
|
|
});
|
|
|
|
const calculatedData = calculateAll(updatedData);
|
|
handleDataChange(calculatedData);
|
|
return;
|
|
}
|
|
|
|
// 모든 행에 대해 새 값 조회
|
|
const updatedData = await Promise.all(
|
|
tableData.map(async (row) => {
|
|
let newValue: any = row[columnField];
|
|
|
|
// 조인 조건 구성 (4가지 소스 타입 지원)
|
|
const joinConditions: TableJoinCondition[] = selectedOption.conditions.map((cond) => {
|
|
// sourceType 매핑
|
|
let sourceType: "row" | "sourceData" | "formData" | "externalTable";
|
|
if (cond.sourceType === "currentRow") {
|
|
sourceType = "row";
|
|
} else if (cond.sourceType === "sourceTable") {
|
|
sourceType = "sourceData";
|
|
} else if (cond.sourceType === "externalTable") {
|
|
sourceType = "externalTable";
|
|
} else {
|
|
sourceType = "formData";
|
|
}
|
|
|
|
return {
|
|
sourceType,
|
|
sourceField: cond.sourceField,
|
|
targetColumn: cond.targetColumn,
|
|
// 외부 테이블 조회 설정
|
|
externalLookup: cond.externalLookup,
|
|
// 값 변환 설정 전달 (레거시 호환)
|
|
transform: cond.transform?.enabled
|
|
? {
|
|
tableName: cond.transform.tableName,
|
|
matchColumn: cond.transform.matchColumn,
|
|
resultColumn: cond.transform.resultColumn,
|
|
}
|
|
: undefined,
|
|
};
|
|
});
|
|
|
|
// 외부 테이블에서 값 조회 (_sourceData 전달)
|
|
const sourceData = row._sourceData || row;
|
|
const value = await fetchExternalValue(
|
|
selectedOption.tableName,
|
|
selectedOption.valueColumn,
|
|
joinConditions,
|
|
row,
|
|
sourceData,
|
|
formData,
|
|
);
|
|
|
|
if (value !== undefined) {
|
|
newValue = value;
|
|
}
|
|
|
|
return { ...row, [columnField]: newValue };
|
|
}),
|
|
);
|
|
|
|
// 계산 필드 업데이트
|
|
const calculatedData = calculateAll(updatedData);
|
|
handleDataChange(calculatedData);
|
|
return;
|
|
}
|
|
|
|
// 기존 columnModes 처리 (레거시 호환)
|
|
if (!column?.columnModes) return;
|
|
|
|
const selectedMode = column.columnModes.find((mode) => mode.id === optionId);
|
|
if (!selectedMode) return;
|
|
|
|
// 모든 행에 대해 새 값 조회
|
|
const updatedData = await Promise.all(
|
|
tableData.map(async (row) => {
|
|
const mapping = selectedMode.valueMapping;
|
|
let newValue: any = row[columnField];
|
|
const sourceData = row._sourceData || row;
|
|
|
|
if (mapping.type === "external" && mapping.externalRef) {
|
|
const { tableName, valueColumn, joinConditions } = mapping.externalRef;
|
|
const value = await fetchExternalValue(tableName, valueColumn, joinConditions, row, sourceData, formData);
|
|
if (value !== undefined) {
|
|
newValue = value;
|
|
}
|
|
} else if (mapping.type === "source" && mapping.sourceField) {
|
|
newValue = row[mapping.sourceField];
|
|
} else if (mapping.type === "internal" && mapping.internalField) {
|
|
newValue = formData[mapping.internalField];
|
|
}
|
|
|
|
return { ...row, [columnField]: newValue };
|
|
}),
|
|
);
|
|
|
|
// 계산 필드 업데이트
|
|
const calculatedData = calculateAll(updatedData);
|
|
handleDataChange(calculatedData);
|
|
},
|
|
[tableConfig.columns, tableData, formData, calculateAll, handleDataChange],
|
|
);
|
|
|
|
// 소스 테이블 정보
|
|
const { source, filters, uiConfig } = tableConfig;
|
|
const sourceTable = source.tableName;
|
|
const sourceColumns = source.displayColumns;
|
|
const sourceSearchFields = source.searchColumns;
|
|
const columnLabels = source.columnLabels || {};
|
|
const modalTitle = uiConfig?.modalTitle || "항목 검색 및 선택";
|
|
const multiSelect = uiConfig?.multiSelect ?? true;
|
|
|
|
// 버튼 표시 설정 (두 버튼 동시 표시 가능)
|
|
// 레거시 호환: 기존 addButtonType 설정이 있으면 그에 맞게 변환
|
|
const legacyAddButtonType = uiConfig?.addButtonType;
|
|
const showSearchButton = legacyAddButtonType === "addRow" ? false : (uiConfig?.showSearchButton ?? true);
|
|
const showAddRowButton = legacyAddButtonType === "addRow" ? true : (uiConfig?.showAddRowButton ?? false);
|
|
const searchButtonText = uiConfig?.searchButtonText || uiConfig?.addButtonText || "품목 검색";
|
|
const addRowButtonText = uiConfig?.addRowButtonText || "직접 입력";
|
|
|
|
// 기본 필터 조건 생성 (사전 필터만 - 모달 필터는 ItemSelectionModal에서 처리)
|
|
const baseFilterCondition: Record<string, any> = useMemo(() => {
|
|
const condition: Record<string, any> = {};
|
|
if (filters?.preFilters) {
|
|
for (const filter of filters.preFilters) {
|
|
// 간단한 "=" 연산자만 처리 (확장 가능)
|
|
if (filter.operator === "=") {
|
|
condition[filter.column] = filter.value;
|
|
}
|
|
}
|
|
}
|
|
return condition;
|
|
}, [filters?.preFilters]);
|
|
|
|
// 조건부 테이블용 필터 조건 생성 (선택된 조건값으로 소스 테이블 필터링)
|
|
const conditionalFilterCondition = useMemo(() => {
|
|
const filter = { ...baseFilterCondition };
|
|
|
|
// 조건부 테이블의 소스 필터 설정이 있고, 모달에서 선택된 조건이 있으면 적용
|
|
if (conditionalConfig?.sourceFilter?.enabled && modalCondition) {
|
|
filter[conditionalConfig.sourceFilter.filterColumn] = modalCondition;
|
|
}
|
|
|
|
return filter;
|
|
}, [baseFilterCondition, conditionalConfig?.sourceFilter, modalCondition]);
|
|
|
|
// 모달 필터 설정을 ItemSelectionModal에 전달할 형식으로 변환
|
|
const modalFiltersForModal = useMemo(() => {
|
|
if (!filters?.modalFilters) return [];
|
|
return filters.modalFilters.map((filter) => ({
|
|
column: filter.column,
|
|
label: filter.label || filter.column,
|
|
// category 타입을 select로 변환 (ModalFilterConfig 호환)
|
|
type: filter.type === "category" ? ("select" as const) : (filter.type as "text" | "select"),
|
|
options: filter.options,
|
|
categoryRef: filter.categoryRef,
|
|
defaultValue: filter.defaultValue,
|
|
}));
|
|
}, [filters?.modalFilters]);
|
|
|
|
// ============================================
|
|
// 조건부 테이블 관련 핸들러
|
|
// ============================================
|
|
|
|
// 조건부 테이블: 조건 체크박스 토글
|
|
const handleConditionToggle = useCallback(
|
|
(conditionValue: string, checked: boolean) => {
|
|
setSelectedConditions((prev) => {
|
|
if (checked) {
|
|
const newConditions = [...prev, conditionValue];
|
|
// 첫 번째 조건 선택 시 해당 탭 활성화
|
|
if (prev.length === 0) {
|
|
setActiveConditionTab(conditionValue);
|
|
}
|
|
return newConditions;
|
|
} else {
|
|
const newConditions = prev.filter((c) => c !== conditionValue);
|
|
// 현재 활성 탭이 제거된 경우 다른 탭으로 전환
|
|
if (activeConditionTab === conditionValue && newConditions.length > 0) {
|
|
setActiveConditionTab(newConditions[0]);
|
|
}
|
|
return newConditions;
|
|
}
|
|
});
|
|
},
|
|
[activeConditionTab],
|
|
);
|
|
|
|
// 조건부 테이블: 조건별 데이터 변경
|
|
const handleConditionalDataChange = useCallback(
|
|
(conditionValue: string, newData: any[]) => {
|
|
setConditionalTableData((prev) => ({
|
|
...prev,
|
|
[conditionValue]: newData,
|
|
}));
|
|
|
|
// 부모에게 조건별 데이터 변경 알림
|
|
if (onConditionalTableDataChange) {
|
|
onConditionalTableDataChange(conditionValue, newData);
|
|
}
|
|
|
|
// 전체 데이터를 flat array로 변환하여 onTableDataChange 호출
|
|
// (저장 시 조건 컬럼 값이 자동으로 추가됨)
|
|
const conditionColumn = conditionalConfig?.conditionColumn;
|
|
const allData: any[] = [];
|
|
|
|
// 현재 변경된 조건의 데이터 업데이트
|
|
const updatedConditionalData = { ...conditionalTableData, [conditionValue]: newData };
|
|
|
|
for (const [condition, data] of Object.entries(updatedConditionalData)) {
|
|
for (const row of data) {
|
|
allData.push({
|
|
...row,
|
|
...(conditionColumn ? { [conditionColumn]: condition } : {}),
|
|
});
|
|
}
|
|
}
|
|
|
|
onTableDataChange(allData);
|
|
},
|
|
[conditionalTableData, conditionalConfig?.conditionColumn, onConditionalTableDataChange, onTableDataChange],
|
|
);
|
|
|
|
// 조건부 테이블: 조건별 행 변경
|
|
const handleConditionalRowChange = useCallback(
|
|
(conditionValue: string, index: number, newRow: any) => {
|
|
const calculatedRow = calculateRow(newRow);
|
|
const currentData = conditionalTableData[conditionValue] || [];
|
|
const newData = [...currentData];
|
|
newData[index] = calculatedRow;
|
|
handleConditionalDataChange(conditionValue, newData);
|
|
},
|
|
[conditionalTableData, calculateRow, handleConditionalDataChange],
|
|
);
|
|
|
|
// 조건부 테이블: 조건별 행 삭제
|
|
const handleConditionalRowDelete = useCallback(
|
|
(conditionValue: string, index: number) => {
|
|
const currentData = conditionalTableData[conditionValue] || [];
|
|
const newData = currentData.filter((_, i) => i !== index);
|
|
handleConditionalDataChange(conditionValue, newData);
|
|
},
|
|
[conditionalTableData, handleConditionalDataChange],
|
|
);
|
|
|
|
// 조건부 테이블: 조건별 선택 행 일괄 삭제
|
|
const handleConditionalBulkDelete = useCallback(
|
|
(conditionValue: string) => {
|
|
const selected = conditionalSelectedRows[conditionValue] || new Set();
|
|
if (selected.size === 0) return;
|
|
|
|
const currentData = conditionalTableData[conditionValue] || [];
|
|
const newData = currentData.filter((_, index) => !selected.has(index));
|
|
handleConditionalDataChange(conditionValue, newData);
|
|
|
|
// 선택 상태 초기화
|
|
setConditionalSelectedRows((prev) => ({
|
|
...prev,
|
|
[conditionValue]: new Set(),
|
|
}));
|
|
},
|
|
[conditionalTableData, conditionalSelectedRows, handleConditionalDataChange],
|
|
);
|
|
|
|
// 조건부 테이블: 아이템 추가 (특정 조건에)
|
|
const handleConditionalAddItems = useCallback(
|
|
async (items: any[]) => {
|
|
if (!modalCondition) return;
|
|
|
|
// 기존 handleAddItems 로직을 재사용하여 매핑된 아이템 생성
|
|
const mappedItems = await Promise.all(
|
|
items.map(async (sourceItem) => {
|
|
const newItem: any = {};
|
|
|
|
for (const col of tableConfig.columns) {
|
|
const mapping = col.valueMapping;
|
|
|
|
// 소스 필드에서 값 복사 (기본)
|
|
if (!mapping) {
|
|
const sourceField = col.sourceField || col.field;
|
|
if (sourceItem[sourceField] !== undefined) {
|
|
newItem[col.field] = sourceItem[sourceField];
|
|
}
|
|
continue;
|
|
}
|
|
|
|
// valueMapping 처리
|
|
if (mapping.type === "source" && mapping.sourceField) {
|
|
const value = sourceItem[mapping.sourceField];
|
|
if (value !== undefined) {
|
|
newItem[col.field] = value;
|
|
}
|
|
} else if (mapping.type === "manual") {
|
|
newItem[col.field] = col.defaultValue || "";
|
|
} else if (mapping.type === "internal" && mapping.internalField) {
|
|
newItem[col.field] = formData[mapping.internalField];
|
|
}
|
|
}
|
|
|
|
// 원본 소스 데이터 보존
|
|
newItem._sourceData = sourceItem;
|
|
|
|
return newItem;
|
|
}),
|
|
);
|
|
|
|
// 현재 조건의 데이터에 추가
|
|
const currentData = conditionalTableData[modalCondition] || [];
|
|
const newData = [...currentData, ...mappedItems];
|
|
handleConditionalDataChange(modalCondition, newData);
|
|
|
|
setModalOpen(false);
|
|
},
|
|
[modalCondition, tableConfig.columns, formData, conditionalTableData, handleConditionalDataChange],
|
|
);
|
|
|
|
// 조건부 테이블: 모달 열기 (특정 조건에 대해)
|
|
const openConditionalModal = useCallback((conditionValue: string) => {
|
|
setModalCondition(conditionValue);
|
|
setModalOpen(true);
|
|
}, []);
|
|
|
|
// 조건부 테이블: 빈 행 추가 (addRow 모드에서 사용)
|
|
const addEmptyRowToCondition = useCallback(
|
|
(conditionValue: string) => {
|
|
const newRow: Record<string, any> = {};
|
|
|
|
// 각 컬럼의 기본값으로 빈 행 생성
|
|
for (const col of tableConfig.columns) {
|
|
if (col.defaultValue !== undefined) {
|
|
newRow[col.field] = col.defaultValue;
|
|
} else if (col.type === "number") {
|
|
newRow[col.field] = 0;
|
|
} else if (col.type === "checkbox") {
|
|
newRow[col.field] = false;
|
|
} else {
|
|
newRow[col.field] = "";
|
|
}
|
|
}
|
|
|
|
// 조건 컬럼에 현재 조건 값 설정
|
|
if (conditionalConfig?.conditionColumn) {
|
|
newRow[conditionalConfig.conditionColumn] = conditionValue;
|
|
}
|
|
|
|
// 현재 조건의 데이터에 추가
|
|
const currentData = conditionalTableData[conditionValue] || [];
|
|
const newData = [...currentData, newRow];
|
|
handleConditionalDataChange(conditionValue, newData);
|
|
},
|
|
[tableConfig.columns, conditionalConfig?.conditionColumn, conditionalTableData, handleConditionalDataChange],
|
|
);
|
|
|
|
// 검색 버튼 클릭 핸들러
|
|
const handleSearchButtonClick = useCallback(
|
|
(conditionValue: string) => {
|
|
openConditionalModal(conditionValue);
|
|
},
|
|
[openConditionalModal],
|
|
);
|
|
|
|
// 행 추가 버튼 클릭 핸들러
|
|
const handleAddRowButtonClick = useCallback(
|
|
(conditionValue: string) => {
|
|
addEmptyRowToCondition(conditionValue);
|
|
},
|
|
[addEmptyRowToCondition],
|
|
);
|
|
|
|
// 조건부 테이블: 초기 데이터 로드 (수정 모드)
|
|
useEffect(() => {
|
|
if (!isConditionalMode) return;
|
|
if (initialDataLoadedRef.current) return;
|
|
|
|
const tableSectionKey = `_tableSection_${sectionId}`;
|
|
const initialData = formData[tableSectionKey];
|
|
|
|
if (Array.isArray(initialData) && initialData.length > 0) {
|
|
const conditionColumn = conditionalConfig?.conditionColumn;
|
|
|
|
if (conditionColumn) {
|
|
// 조건별로 데이터 그룹핑
|
|
const grouped: ConditionalTableData = {};
|
|
const conditions = new Set<string>();
|
|
|
|
for (const row of initialData) {
|
|
const conditionValue = row[conditionColumn] || "";
|
|
if (conditionValue) {
|
|
if (!grouped[conditionValue]) {
|
|
grouped[conditionValue] = [];
|
|
}
|
|
grouped[conditionValue].push(row);
|
|
conditions.add(conditionValue);
|
|
}
|
|
}
|
|
|
|
setConditionalTableData(grouped);
|
|
setSelectedConditions(Array.from(conditions));
|
|
|
|
// 첫 번째 조건을 활성 탭으로 설정
|
|
if (conditions.size > 0) {
|
|
setActiveConditionTab(Array.from(conditions)[0]);
|
|
}
|
|
|
|
initialDataLoadedRef.current = true;
|
|
}
|
|
}
|
|
}, [isConditionalMode, sectionId, formData, conditionalConfig?.conditionColumn]);
|
|
|
|
// 조건부 테이블: 전체 항목 수 계산
|
|
const totalConditionalItems = useMemo(() => {
|
|
return Object.values(conditionalTableData).reduce((sum, data) => sum + data.length, 0);
|
|
}, [conditionalTableData]);
|
|
|
|
// ============================================
|
|
// 조건부 테이블 렌더링
|
|
// ============================================
|
|
if (isConditionalMode && conditionalConfig) {
|
|
const { triggerType } = conditionalConfig;
|
|
|
|
// 정적 옵션과 동적 옵션 병합 (동적 옵션이 있으면 우선 사용)
|
|
// 빈 value를 가진 옵션은 제외 (Select.Item은 빈 문자열 value를 허용하지 않음)
|
|
const effectiveOptions = (
|
|
conditionalConfig.optionSource?.enabled && dynamicOptions.length > 0
|
|
? dynamicOptions
|
|
: conditionalConfig.options || []
|
|
).filter((opt) => opt.value && opt.value.trim() !== "");
|
|
|
|
// 로딩 중이면 로딩 표시
|
|
if (dynamicOptionsLoading) {
|
|
return (
|
|
<div className={cn("space-y-4", className)}>
|
|
<div className="text-muted-foreground flex items-center justify-center py-8 text-sm">
|
|
<div className="flex items-center gap-2">
|
|
<div className="border-primary h-4 w-4 animate-spin rounded-full border-2 border-t-transparent" />
|
|
조건 옵션을 불러오는 중...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn("space-y-4", className)}>
|
|
{/* 조건 선택 UI */}
|
|
{triggerType === "checkbox" && (
|
|
<div className="space-y-3">
|
|
<div className="flex flex-wrap gap-3">
|
|
{effectiveOptions.map((option) => (
|
|
<label
|
|
key={option.id}
|
|
className="hover:bg-muted/50 flex cursor-pointer items-center gap-2 rounded-lg border px-3 py-2 transition-colors"
|
|
>
|
|
<Checkbox
|
|
checked={selectedConditions.includes(option.value)}
|
|
onCheckedChange={(checked) => handleConditionToggle(option.value, !!checked)}
|
|
/>
|
|
<span className="text-sm">{option.label}</span>
|
|
{conditionalTableData[option.value]?.length > 0 && (
|
|
<Badge variant="secondary" className="ml-1 text-xs">
|
|
{conditionalTableData[option.value].length}
|
|
</Badge>
|
|
)}
|
|
</label>
|
|
))}
|
|
</div>
|
|
|
|
{selectedConditions.length > 0 && (
|
|
<div className="text-muted-foreground text-xs">
|
|
{selectedConditions.length}개 유형 선택됨, 총 {totalConditionalItems}개 항목
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{triggerType === "dropdown" && (
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-sm">유형 선택:</span>
|
|
<Select
|
|
value={selectedConditions[0] || ""}
|
|
onValueChange={(value) => {
|
|
setSelectedConditions([value]);
|
|
setActiveConditionTab(value);
|
|
}}
|
|
>
|
|
<SelectTrigger className="h-9 w-[200px]">
|
|
<SelectValue placeholder="유형을 선택하세요" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{effectiveOptions.map((option) => (
|
|
<SelectItem key={option.id} value={option.value}>
|
|
{option.label}
|
|
{conditionalTableData[option.value]?.length > 0 &&
|
|
` (${conditionalTableData[option.value].length})`}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
)}
|
|
|
|
{/* 선택된 조건들의 테이블 (탭 형태) */}
|
|
{selectedConditions.length > 0 && (
|
|
<Tabs value={activeConditionTab} onValueChange={setActiveConditionTab} className="w-full">
|
|
<TabsList className="w-full justify-start">
|
|
{selectedConditions.map((conditionValue) => {
|
|
const option = effectiveOptions.find((o) => o.value === conditionValue);
|
|
const itemCount = conditionalTableData[conditionValue]?.length || 0;
|
|
return (
|
|
<TabsTrigger key={conditionValue} value={conditionValue} className="gap-1.5">
|
|
{option?.label || conditionValue}
|
|
{itemCount > 0 && (
|
|
<Badge variant="outline" className="ml-1 h-5 px-1.5 text-xs">
|
|
{itemCount}
|
|
</Badge>
|
|
)}
|
|
</TabsTrigger>
|
|
);
|
|
})}
|
|
</TabsList>
|
|
|
|
{selectedConditions.map((conditionValue) => {
|
|
const data = conditionalTableData[conditionValue] || [];
|
|
const selected = conditionalSelectedRows[conditionValue] || new Set();
|
|
|
|
return (
|
|
<TabsContent key={conditionValue} value={conditionValue} className="mt-4 space-y-4">
|
|
{/* 테이블 상단 컨트롤 */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground text-sm">
|
|
{data.length > 0 && `${data.length}개 항목`}
|
|
{selected.size > 0 && ` (${selected.size}개 선택됨)`}
|
|
</span>
|
|
{columns.length > 0 && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setWidthTrigger((prev) => prev + 1)}
|
|
className="h-7 px-2 text-xs"
|
|
title={widthTrigger % 2 === 0 ? "내용에 맞게 자동 조정" : "균등 분배"}
|
|
>
|
|
{widthTrigger % 2 === 0 ? (
|
|
<>
|
|
<AlignJustify className="mr-1 h-3.5 w-3.5" />
|
|
자동 맞춤
|
|
</>
|
|
) : (
|
|
<>
|
|
<Columns className="mr-1 h-3.5 w-3.5" />
|
|
균등 분배
|
|
</>
|
|
)}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{selected.size > 0 && (
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={() => handleConditionalBulkDelete(conditionValue)}
|
|
className="h-8 text-xs"
|
|
>
|
|
<Trash2 className="mr-1 h-3.5 w-3.5" />
|
|
선택 삭제 ({selected.size})
|
|
</Button>
|
|
)}
|
|
{showSearchButton && (
|
|
<Button onClick={() => handleSearchButtonClick(conditionValue)} className="h-8 text-xs">
|
|
<Search className="mr-2 h-4 w-4" />
|
|
{searchButtonText}
|
|
</Button>
|
|
)}
|
|
{showAddRowButton && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => handleAddRowButtonClick(conditionValue)}
|
|
className="h-8 text-xs"
|
|
>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
{addRowButtonText}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 테이블 */}
|
|
<RepeaterTable
|
|
columns={columns}
|
|
data={data}
|
|
onDataChange={(newData) => handleConditionalDataChange(conditionValue, newData)}
|
|
onRowChange={(index, newRow) => handleConditionalRowChange(conditionValue, index, newRow)}
|
|
onRowDelete={(index) => handleConditionalRowDelete(conditionValue, index)}
|
|
activeDataSources={activeDataSources}
|
|
onDataSourceChange={handleDataSourceChange}
|
|
selectedRows={selected}
|
|
onSelectionChange={(newSelected) => {
|
|
setConditionalSelectedRows((prev) => ({
|
|
...prev,
|
|
[conditionValue]: newSelected,
|
|
}));
|
|
}}
|
|
equalizeWidthsTrigger={widthTrigger}
|
|
/>
|
|
</TabsContent>
|
|
);
|
|
})}
|
|
</Tabs>
|
|
)}
|
|
|
|
{/* tabs 모드: 모든 옵션을 탭으로 표시 (선택 UI 없음) */}
|
|
{triggerType === "tabs" && effectiveOptions.length > 0 && (
|
|
<Tabs
|
|
value={activeConditionTab || effectiveOptions[0]?.value}
|
|
onValueChange={setActiveConditionTab}
|
|
className="w-full"
|
|
>
|
|
<TabsList className="w-full justify-start">
|
|
{effectiveOptions.map((option) => {
|
|
const itemCount = conditionalTableData[option.value]?.length || 0;
|
|
return (
|
|
<TabsTrigger key={option.id} value={option.value} className="gap-1.5">
|
|
{option.label}
|
|
{itemCount > 0 && (
|
|
<Badge variant="outline" className="ml-1 h-5 px-1.5 text-xs">
|
|
{itemCount}
|
|
</Badge>
|
|
)}
|
|
</TabsTrigger>
|
|
);
|
|
})}
|
|
</TabsList>
|
|
|
|
{effectiveOptions.map((option) => {
|
|
const data = conditionalTableData[option.value] || [];
|
|
const selected = conditionalSelectedRows[option.value] || new Set();
|
|
|
|
return (
|
|
<TabsContent key={option.id} value={option.value} className="mt-4 space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground text-sm">
|
|
{data.length > 0 && `${data.length}개 항목`}
|
|
{selected.size > 0 && ` (${selected.size}개 선택됨)`}
|
|
</span>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{selected.size > 0 && (
|
|
<Button
|
|
variant="destructive"
|
|
size="sm"
|
|
onClick={() => handleConditionalBulkDelete(option.value)}
|
|
className="h-8 text-xs"
|
|
>
|
|
<Trash2 className="mr-1 h-3.5 w-3.5" />
|
|
선택 삭제 ({selected.size})
|
|
</Button>
|
|
)}
|
|
{showSearchButton && (
|
|
<Button onClick={() => handleSearchButtonClick(option.value)} className="h-8 text-xs">
|
|
<Search className="mr-2 h-4 w-4" />
|
|
{searchButtonText}
|
|
</Button>
|
|
)}
|
|
{showAddRowButton && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => handleAddRowButtonClick(option.value)}
|
|
className="h-8 text-xs"
|
|
>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
{addRowButtonText}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<RepeaterTable
|
|
columns={columns}
|
|
data={data}
|
|
onDataChange={(newData) => handleConditionalDataChange(option.value, newData)}
|
|
onRowChange={(index, newRow) => handleConditionalRowChange(option.value, index, newRow)}
|
|
onRowDelete={(index) => handleConditionalRowDelete(option.value, index)}
|
|
activeDataSources={activeDataSources}
|
|
onDataSourceChange={handleDataSourceChange}
|
|
selectedRows={selected}
|
|
onSelectionChange={(newSelected) => {
|
|
setConditionalSelectedRows((prev) => ({
|
|
...prev,
|
|
[option.value]: newSelected,
|
|
}));
|
|
}}
|
|
equalizeWidthsTrigger={widthTrigger}
|
|
/>
|
|
</TabsContent>
|
|
);
|
|
})}
|
|
</Tabs>
|
|
)}
|
|
|
|
{/* 조건이 선택되지 않은 경우 안내 메시지 (checkbox/dropdown 모드에서만) */}
|
|
{selectedConditions.length === 0 && triggerType !== "tabs" && (
|
|
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12 text-center">
|
|
<p className="text-muted-foreground text-sm">
|
|
{triggerType === "checkbox" ? "위에서 유형을 선택하여 검사항목을 추가하세요." : "유형을 선택하세요."}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 옵션이 없는 경우 안내 메시지 */}
|
|
{effectiveOptions.length === 0 && (
|
|
<div className="flex flex-col items-center justify-center rounded-lg border border-dashed py-12 text-center">
|
|
<p className="text-muted-foreground text-sm">조건 옵션이 설정되지 않았습니다.</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* 항목 선택 모달 (조건부 테이블용) */}
|
|
<ItemSelectionModal
|
|
open={modalOpen}
|
|
onOpenChange={setModalOpen}
|
|
sourceTable={sourceTable}
|
|
sourceColumns={sourceColumns}
|
|
sourceSearchFields={sourceSearchFields}
|
|
multiSelect={multiSelect}
|
|
filterCondition={conditionalFilterCondition}
|
|
modalTitle={`${effectiveOptions.find((o) => o.value === modalCondition)?.label || modalCondition} - ${modalTitle}`}
|
|
alreadySelected={conditionalTableData[modalCondition] || []}
|
|
uniqueField={tableConfig.saveConfig?.uniqueField}
|
|
onSelect={handleConditionalAddItems}
|
|
columnLabels={columnLabels}
|
|
modalFilters={modalFiltersForModal}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ============================================
|
|
// 일반 테이블 렌더링 (기존 로직)
|
|
// ============================================
|
|
return (
|
|
<div className={cn("space-y-4", className)}>
|
|
{/* 추가 버튼 영역 */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-muted-foreground text-sm">
|
|
{tableData.length > 0 && `${tableData.length}개 항목`}
|
|
{selectedRows.size > 0 && ` (${selectedRows.size}개 선택됨)`}
|
|
</span>
|
|
{columns.length > 0 && (
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setWidthTrigger((prev) => prev + 1)}
|
|
className="h-7 px-2 text-xs"
|
|
title={widthTrigger % 2 === 0 ? "내용에 맞게 자동 조정" : "균등 분배"}
|
|
>
|
|
{widthTrigger % 2 === 0 ? (
|
|
<>
|
|
<AlignJustify className="mr-1 h-3.5 w-3.5" />
|
|
자동 맞춤
|
|
</>
|
|
) : (
|
|
<>
|
|
<Columns className="mr-1 h-3.5 w-3.5" />
|
|
균등 분배
|
|
</>
|
|
)}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="flex gap-2">
|
|
{selectedRows.size > 0 && (
|
|
<Button variant="destructive" onClick={handleBulkDelete} className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
선택 삭제 ({selectedRows.size})
|
|
</Button>
|
|
)}
|
|
{showSearchButton && (
|
|
<Button onClick={() => setModalOpen(true)} className="h-8 text-xs sm:h-10 sm:text-sm">
|
|
<Search className="mr-2 h-4 w-4" />
|
|
{searchButtonText}
|
|
</Button>
|
|
)}
|
|
{showAddRowButton && (
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => {
|
|
// 빈 행 추가
|
|
const newRow: Record<string, any> = {};
|
|
for (const col of columns) {
|
|
if (col.defaultValue !== undefined) {
|
|
newRow[col.field] = col.defaultValue;
|
|
} else if (col.type === "number") {
|
|
newRow[col.field] = 0;
|
|
} else if (col.type === "checkbox") {
|
|
newRow[col.field] = false;
|
|
} else {
|
|
newRow[col.field] = "";
|
|
}
|
|
}
|
|
handleDataChange([...tableData, newRow]);
|
|
}}
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
|
>
|
|
<Plus className="mr-2 h-4 w-4" />
|
|
{addRowButtonText}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Repeater 테이블 */}
|
|
<RepeaterTable
|
|
columns={columns}
|
|
data={tableData}
|
|
onDataChange={handleDataChange}
|
|
onRowChange={handleRowChange}
|
|
onRowDelete={handleRowDelete}
|
|
activeDataSources={activeDataSources}
|
|
onDataSourceChange={handleDataSourceChange}
|
|
selectedRows={selectedRows}
|
|
onSelectionChange={setSelectedRows}
|
|
equalizeWidthsTrigger={widthTrigger}
|
|
/>
|
|
|
|
{/* 항목 선택 모달 */}
|
|
<ItemSelectionModal
|
|
open={modalOpen}
|
|
onOpenChange={setModalOpen}
|
|
sourceTable={sourceTable}
|
|
sourceColumns={sourceColumns}
|
|
sourceSearchFields={sourceSearchFields}
|
|
multiSelect={multiSelect}
|
|
filterCondition={baseFilterCondition}
|
|
modalTitle={modalTitle}
|
|
alreadySelected={tableData}
|
|
uniqueField={tableConfig.saveConfig?.uniqueField}
|
|
onSelect={handleAddItems}
|
|
columnLabels={columnLabels}
|
|
modalFilters={modalFiltersForModal}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|