소스필드 못찾는 버그 수정
This commit is contained in:
parent
5bbbd37553
commit
2b747a1030
|
|
@ -1646,7 +1646,18 @@ export class NodeFlowExecutionService {
|
|||
// WHERE 조건 생성
|
||||
const whereClauses: string[] = [];
|
||||
whereConditions?.forEach((condition: any) => {
|
||||
const condValue = data[condition.field];
|
||||
// 🔥 수정: sourceField가 있으면 소스 데이터에서 값을 가져옴
|
||||
let condValue: any;
|
||||
if (condition.sourceField) {
|
||||
condValue = data[condition.sourceField];
|
||||
} else if (
|
||||
condition.staticValue !== undefined &&
|
||||
condition.staticValue !== ""
|
||||
) {
|
||||
condValue = condition.staticValue;
|
||||
} else {
|
||||
condValue = data[condition.field];
|
||||
}
|
||||
|
||||
if (condition.operator === "IS NULL") {
|
||||
whereClauses.push(`${condition.field} IS NULL`);
|
||||
|
|
@ -1987,7 +1998,18 @@ export class NodeFlowExecutionService {
|
|||
|
||||
// WHERE 조건 생성
|
||||
whereConditions?.forEach((condition: any) => {
|
||||
const condValue = data[condition.field];
|
||||
// 🔥 수정: sourceField가 있으면 소스 데이터에서 값을 가져옴
|
||||
let condValue: any;
|
||||
if (condition.sourceField) {
|
||||
condValue = data[condition.sourceField];
|
||||
} else if (
|
||||
condition.staticValue !== undefined &&
|
||||
condition.staticValue !== ""
|
||||
) {
|
||||
condValue = condition.staticValue;
|
||||
} else {
|
||||
condValue = data[condition.field];
|
||||
}
|
||||
|
||||
if (condition.operator === "IS NULL") {
|
||||
whereClauses.push(`${condition.field} IS NULL`);
|
||||
|
|
@ -2889,7 +2911,26 @@ export class NodeFlowExecutionService {
|
|||
|
||||
const values: any[] = [];
|
||||
const clauses = conditions.map((condition, index) => {
|
||||
const value = data ? data[condition.field] : condition.value;
|
||||
// 🔥 수정: sourceField가 있으면 소스 데이터에서 값을 가져오고,
|
||||
// 없으면 staticValue 또는 기존 field 사용
|
||||
let value: any;
|
||||
if (data) {
|
||||
if (condition.sourceField) {
|
||||
// sourceField가 있으면 소스 데이터에서 해당 필드의 값을 가져옴
|
||||
value = data[condition.sourceField];
|
||||
} else if (
|
||||
condition.staticValue !== undefined &&
|
||||
condition.staticValue !== ""
|
||||
) {
|
||||
// staticValue가 있으면 사용
|
||||
value = condition.staticValue;
|
||||
} else {
|
||||
// 둘 다 없으면 기존 방식 (field로 값 조회)
|
||||
value = data[condition.field];
|
||||
}
|
||||
} else {
|
||||
value = condition.value;
|
||||
}
|
||||
values.push(value);
|
||||
|
||||
// 연산자를 SQL 문법으로 변환
|
||||
|
|
|
|||
|
|
@ -60,15 +60,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
const resizable = componentConfig.resizable ?? true;
|
||||
const minLeftWidth = componentConfig.minLeftWidth || 200;
|
||||
const minRightWidth = componentConfig.minRightWidth || 300;
|
||||
|
||||
|
||||
// 필드 표시 유틸리티 (하드코딩 제거, 동적으로 작동)
|
||||
const shouldShowField = (fieldName: string): boolean => {
|
||||
const lower = fieldName.toLowerCase();
|
||||
|
||||
|
||||
// 기본 제외: id, 비밀번호, 토큰, 회사코드
|
||||
if (lower === "id" || lower === "company_code" || lower === "company_name") return false;
|
||||
if (lower.includes("password") || lower.includes("token")) return false;
|
||||
|
||||
|
||||
// 나머지는 모두 표시!
|
||||
return true;
|
||||
};
|
||||
|
|
@ -284,26 +284,102 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
}));
|
||||
}, [leftData, leftGrouping]);
|
||||
|
||||
// 셀 값 포맷팅 함수 (카테고리 타입 처리)
|
||||
// 날짜 포맷팅 헬퍼 함수
|
||||
const formatDateValue = useCallback((value: any, dateFormat: string): string => {
|
||||
if (!value) return "-";
|
||||
const date = new Date(value);
|
||||
if (isNaN(date.getTime())) return String(value);
|
||||
|
||||
if (dateFormat === "relative") {
|
||||
// 상대 시간 (예: 3일 전, 2시간 전)
|
||||
const now = new Date();
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffSec = Math.floor(diffMs / 1000);
|
||||
const diffMin = Math.floor(diffSec / 60);
|
||||
const diffHour = Math.floor(diffMin / 60);
|
||||
const diffDay = Math.floor(diffHour / 24);
|
||||
const diffMonth = Math.floor(diffDay / 30);
|
||||
const diffYear = Math.floor(diffMonth / 12);
|
||||
|
||||
if (diffYear > 0) return `${diffYear}년 전`;
|
||||
if (diffMonth > 0) return `${diffMonth}개월 전`;
|
||||
if (diffDay > 0) return `${diffDay}일 전`;
|
||||
if (diffHour > 0) return `${diffHour}시간 전`;
|
||||
if (diffMin > 0) return `${diffMin}분 전`;
|
||||
return "방금 전";
|
||||
}
|
||||
|
||||
// 포맷 문자열 치환
|
||||
return dateFormat
|
||||
.replace("YYYY", String(date.getFullYear()))
|
||||
.replace("MM", String(date.getMonth() + 1).padStart(2, "0"))
|
||||
.replace("DD", String(date.getDate()).padStart(2, "0"))
|
||||
.replace("HH", String(date.getHours()).padStart(2, "0"))
|
||||
.replace("mm", String(date.getMinutes()).padStart(2, "0"))
|
||||
.replace("ss", String(date.getSeconds()).padStart(2, "0"));
|
||||
}, []);
|
||||
|
||||
// 숫자 포맷팅 헬퍼 함수
|
||||
const formatNumberValue = useCallback((value: any, format: any): string => {
|
||||
if (value === null || value === undefined || value === "") return "-";
|
||||
const num = typeof value === "number" ? value : parseFloat(String(value));
|
||||
if (isNaN(num)) return String(value);
|
||||
|
||||
const options: Intl.NumberFormatOptions = {
|
||||
minimumFractionDigits: format?.decimalPlaces ?? 0,
|
||||
maximumFractionDigits: format?.decimalPlaces ?? 10,
|
||||
useGrouping: format?.thousandSeparator ?? false,
|
||||
};
|
||||
|
||||
let result = num.toLocaleString("ko-KR", options);
|
||||
if (format?.prefix) result = format.prefix + result;
|
||||
if (format?.suffix) result = result + format.suffix;
|
||||
return result;
|
||||
}, []);
|
||||
|
||||
// 셀 값 포맷팅 함수 (카테고리 타입 처리 + 날짜/숫자 포맷)
|
||||
const formatCellValue = useCallback(
|
||||
(
|
||||
columnName: string,
|
||||
value: any,
|
||||
categoryMappings: Record<string, Record<string, { label: string; color?: string }>>,
|
||||
format?: {
|
||||
type?: "number" | "currency" | "date" | "text";
|
||||
thousandSeparator?: boolean;
|
||||
decimalPlaces?: number;
|
||||
prefix?: string;
|
||||
suffix?: string;
|
||||
dateFormat?: string;
|
||||
},
|
||||
) => {
|
||||
if (value === null || value === undefined) return "-";
|
||||
|
||||
// 🆕 날짜 포맷 적용
|
||||
if (format?.type === "date" || format?.dateFormat) {
|
||||
return formatDateValue(value, format?.dateFormat || "YYYY-MM-DD");
|
||||
}
|
||||
|
||||
// 🆕 숫자 포맷 적용
|
||||
if (
|
||||
format?.type === "number" ||
|
||||
format?.type === "currency" ||
|
||||
format?.thousandSeparator ||
|
||||
format?.decimalPlaces !== undefined
|
||||
) {
|
||||
return formatNumberValue(value, format);
|
||||
}
|
||||
|
||||
// 🆕 카테고리 매핑 찾기 (여러 키 형태 시도)
|
||||
// 1. 전체 컬럼명 (예: "item_info.material")
|
||||
// 2. 컬럼명만 (예: "material")
|
||||
let mapping = categoryMappings[columnName];
|
||||
|
||||
|
||||
if (!mapping && columnName.includes(".")) {
|
||||
// 조인된 컬럼의 경우 컬럼명만으로 다시 시도
|
||||
const simpleColumnName = columnName.split(".").pop() || columnName;
|
||||
mapping = categoryMappings[simpleColumnName];
|
||||
}
|
||||
|
||||
|
||||
if (mapping && mapping[String(value)]) {
|
||||
const categoryData = mapping[String(value)];
|
||||
const displayLabel = categoryData.label || String(value);
|
||||
|
|
@ -323,10 +399,28 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
);
|
||||
}
|
||||
|
||||
// 🆕 자동 날짜 감지 (ISO 8601 형식 또는 Date 객체)
|
||||
if (typeof value === "string" && value.match(/^\d{4}-\d{2}-\d{2}(T|\s)/)) {
|
||||
return formatDateValue(value, "YYYY-MM-DD");
|
||||
}
|
||||
|
||||
// 🆕 자동 숫자 감지 (숫자 또는 숫자 문자열) - 소수점 있으면 정수로 변환
|
||||
if (typeof value === "number") {
|
||||
// 숫자인 경우 정수로 표시 (소수점 제거)
|
||||
return Number.isInteger(value) ? String(value) : String(Math.round(value * 100) / 100);
|
||||
}
|
||||
if (typeof value === "string" && /^-?\d+\.?\d*$/.test(value.trim())) {
|
||||
// 숫자 문자열인 경우 (예: "5.00" → "5")
|
||||
const num = parseFloat(value);
|
||||
if (!isNaN(num)) {
|
||||
return Number.isInteger(num) ? String(num) : String(Math.round(num * 100) / 100);
|
||||
}
|
||||
}
|
||||
|
||||
// 일반 값
|
||||
return String(value);
|
||||
},
|
||||
[],
|
||||
[formatDateValue, formatNumberValue],
|
||||
);
|
||||
|
||||
// 좌측 데이터 로드
|
||||
|
|
@ -392,7 +486,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
if (relationshipType === "detail") {
|
||||
// 상세 모드: 동일 테이블의 상세 정보 (🆕 엔티티 조인 활성화)
|
||||
const primaryKey = leftItem.id || leftItem.ID || Object.values(leftItem)[0];
|
||||
|
||||
|
||||
// 🆕 엔티티 조인 API 사용
|
||||
const { entityJoinApi } = await import("@/lib/api/entityJoin");
|
||||
const result = await entityJoinApi.getTableDataWithJoins(rightTableName, {
|
||||
|
|
@ -400,29 +494,81 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
enableEntityJoin: true, // 엔티티 조인 활성화
|
||||
size: 1,
|
||||
});
|
||||
|
||||
|
||||
const detail = result.items && result.items.length > 0 ? result.items[0] : null;
|
||||
setRightData(detail);
|
||||
} else if (relationshipType === "join") {
|
||||
// 조인 모드: 다른 테이블의 관련 데이터 (여러 개)
|
||||
const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
|
||||
const rightColumn = componentConfig.rightPanel?.relation?.foreignKey;
|
||||
const keys = componentConfig.rightPanel?.relation?.keys;
|
||||
const leftTable = componentConfig.leftPanel?.tableName;
|
||||
|
||||
if (leftColumn && rightColumn && leftTable) {
|
||||
const leftValue = leftItem[leftColumn];
|
||||
const joinedData = await dataApi.getJoinedData(
|
||||
leftTable,
|
||||
rightTableName,
|
||||
leftColumn,
|
||||
rightColumn,
|
||||
leftValue,
|
||||
componentConfig.rightPanel?.dataFilter, // 🆕 데이터 필터 전달
|
||||
true, // 🆕 Entity 조인 활성화
|
||||
componentConfig.rightPanel?.columns, // 🆕 표시 컬럼 전달 (item_info.item_name 등)
|
||||
componentConfig.rightPanel?.deduplication, // 🆕 중복 제거 설정 전달
|
||||
);
|
||||
setRightData(joinedData || []); // 모든 관련 레코드 (배열)
|
||||
// 🆕 복합키 지원
|
||||
if (keys && keys.length > 0 && leftTable) {
|
||||
// 복합키: 여러 조건으로 필터링
|
||||
const { entityJoinApi } = await import("@/lib/api/entityJoin");
|
||||
|
||||
// 복합키 조건 생성
|
||||
const searchConditions: Record<string, any> = {};
|
||||
keys.forEach((key) => {
|
||||
if (key.leftColumn && key.rightColumn && leftItem[key.leftColumn] !== undefined) {
|
||||
searchConditions[key.rightColumn] = leftItem[key.leftColumn];
|
||||
}
|
||||
});
|
||||
|
||||
console.log("🔗 [분할패널] 복합키 조건:", searchConditions);
|
||||
|
||||
// 엔티티 조인 API로 데이터 조회
|
||||
const result = await entityJoinApi.getTableDataWithJoins(rightTableName, {
|
||||
search: searchConditions,
|
||||
enableEntityJoin: true,
|
||||
size: 1000,
|
||||
});
|
||||
|
||||
console.log("🔗 [분할패널] 복합키 조회 결과:", result);
|
||||
|
||||
// 추가 dataFilter 적용
|
||||
let filteredData = result.data || [];
|
||||
const dataFilter = componentConfig.rightPanel?.dataFilter;
|
||||
if (dataFilter?.enabled && dataFilter.conditions?.length > 0) {
|
||||
filteredData = filteredData.filter((item: any) => {
|
||||
return dataFilter.conditions.every((cond: any) => {
|
||||
const value = item[cond.column];
|
||||
const condValue = cond.value;
|
||||
switch (cond.operator) {
|
||||
case "equals":
|
||||
return value === condValue;
|
||||
case "notEquals":
|
||||
return value !== condValue;
|
||||
case "contains":
|
||||
return String(value).includes(String(condValue));
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
setRightData(filteredData);
|
||||
} else {
|
||||
// 단일키 (하위 호환성)
|
||||
const leftColumn = componentConfig.rightPanel?.relation?.leftColumn;
|
||||
const rightColumn = componentConfig.rightPanel?.relation?.foreignKey;
|
||||
|
||||
if (leftColumn && rightColumn && leftTable) {
|
||||
const leftValue = leftItem[leftColumn];
|
||||
const joinedData = await dataApi.getJoinedData(
|
||||
leftTable,
|
||||
rightTableName,
|
||||
leftColumn,
|
||||
rightColumn,
|
||||
leftValue,
|
||||
componentConfig.rightPanel?.dataFilter, // 🆕 데이터 필터 전달
|
||||
true, // 🆕 Entity 조인 활성화
|
||||
componentConfig.rightPanel?.columns, // 🆕 표시 컬럼 전달 (item_info.item_name 등)
|
||||
componentConfig.rightPanel?.deduplication, // 🆕 중복 제거 설정 전달
|
||||
);
|
||||
setRightData(joinedData || []); // 모든 관련 레코드 (배열)
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
@ -711,7 +857,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
// 🆕 우측 패널 컬럼 설정에서 조인된 테이블 추출
|
||||
const rightColumns = componentConfig.rightPanel?.columns || [];
|
||||
const tablesToLoad = new Set<string>([rightTableName]);
|
||||
|
||||
|
||||
// 컬럼명에서 테이블명 추출 (예: "item_info.material" -> "item_info")
|
||||
rightColumns.forEach((col: any) => {
|
||||
const colName = col.name || col.columnName;
|
||||
|
|
@ -744,15 +890,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
color: item.color,
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
// 조인된 테이블의 경우 "테이블명.컬럼명" 형태로 저장
|
||||
const mappingKey = tableName === rightTableName ? columnName : `${tableName}.${columnName}`;
|
||||
mappings[mappingKey] = valueMap;
|
||||
|
||||
|
||||
// 🆕 컬럼명만으로도 접근할 수 있도록 추가 저장 (모든 테이블)
|
||||
// 기존 매핑이 있으면 병합, 없으면 새로 생성
|
||||
mappings[columnName] = { ...(mappings[columnName] || {}), ...valueMap };
|
||||
|
||||
|
||||
console.log(`✅ 우측 카테고리 매핑 로드 [${mappingKey}]:`, valueMap);
|
||||
console.log(`✅ 우측 카테고리 매핑 (컬럼명만) [${columnName}]:`, mappings[columnName]);
|
||||
}
|
||||
|
|
@ -818,15 +964,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
// 🆕 우측 패널 수정 버튼 설정 확인
|
||||
if (panel === "right" && componentConfig.rightPanel?.editButton?.mode === "modal") {
|
||||
const modalScreenId = componentConfig.rightPanel?.editButton?.modalScreenId;
|
||||
|
||||
|
||||
if (modalScreenId) {
|
||||
// 커스텀 모달 화면 열기
|
||||
const rightTableName = componentConfig.rightPanel?.tableName || "";
|
||||
|
||||
|
||||
// Primary Key 찾기 (우선순위: id > ID > 첫 번째 필드)
|
||||
let primaryKeyName = "id";
|
||||
let primaryKeyValue: any;
|
||||
|
||||
|
||||
if (item.id !== undefined && item.id !== null) {
|
||||
primaryKeyName = "id";
|
||||
primaryKeyValue = item.id;
|
||||
|
|
@ -839,29 +985,29 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
primaryKeyName = firstKey;
|
||||
primaryKeyValue = item[firstKey];
|
||||
}
|
||||
|
||||
console.log(`✅ 수정 모달 열기:`, {
|
||||
|
||||
console.log("✅ 수정 모달 열기:", {
|
||||
tableName: rightTableName,
|
||||
primaryKeyName,
|
||||
primaryKeyValue,
|
||||
screenId: modalScreenId,
|
||||
fullItem: item,
|
||||
});
|
||||
|
||||
|
||||
// modalDataStore에도 저장 (호환성 유지)
|
||||
import("@/stores/modalDataStore").then(({ useModalDataStore }) => {
|
||||
useModalDataStore.getState().setData(rightTableName, [item]);
|
||||
});
|
||||
|
||||
|
||||
// 🆕 groupByColumns 추출
|
||||
const groupByColumns = componentConfig.rightPanel?.editButton?.groupByColumns || [];
|
||||
|
||||
|
||||
console.log("🔧 [SplitPanel] 수정 버튼 클릭 - groupByColumns 확인:", {
|
||||
groupByColumns,
|
||||
editButtonConfig: componentConfig.rightPanel?.editButton,
|
||||
hasGroupByColumns: groupByColumns.length > 0,
|
||||
});
|
||||
|
||||
|
||||
// ScreenModal 열기 이벤트 발생 (URL 파라미터로 ID + groupByColumns 전달)
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("openScreenModal", {
|
||||
|
|
@ -878,18 +1024,18 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
},
|
||||
}),
|
||||
);
|
||||
|
||||
|
||||
console.log("✅ [SplitPanel] openScreenModal 이벤트 발생:", {
|
||||
screenId: modalScreenId,
|
||||
editId: primaryKeyValue,
|
||||
tableName: rightTableName,
|
||||
groupByColumns: groupByColumns.length > 0 ? JSON.stringify(groupByColumns) : "없음",
|
||||
});
|
||||
|
||||
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 기존 자동 편집 모드 (인라인 편집 모달)
|
||||
setEditModalPanel(panel);
|
||||
setEditModalItem(item);
|
||||
|
|
@ -1026,7 +1172,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
|
||||
try {
|
||||
console.log("🗑️ 데이터 삭제:", { tableName, primaryKey });
|
||||
|
||||
|
||||
// 🔍 중복 제거 설정 디버깅
|
||||
console.log("🔍 중복 제거 디버깅:", {
|
||||
panel: deleteModalPanel,
|
||||
|
|
@ -1041,25 +1187,25 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
if (deleteModalPanel === "right" && componentConfig.rightPanel?.dataFilter?.deduplication?.enabled) {
|
||||
const deduplication = componentConfig.rightPanel.dataFilter.deduplication;
|
||||
const groupByColumn = deduplication.groupByColumn;
|
||||
|
||||
|
||||
if (groupByColumn && deleteModalItem[groupByColumn]) {
|
||||
const groupValue = deleteModalItem[groupByColumn];
|
||||
console.log(`🔗 중복 제거 활성화: ${groupByColumn} = ${groupValue} 기준으로 모든 레코드 삭제`);
|
||||
|
||||
|
||||
// groupByColumn 값으로 필터링하여 삭제
|
||||
const filterConditions: Record<string, any> = {
|
||||
[groupByColumn]: groupValue,
|
||||
};
|
||||
|
||||
|
||||
// 좌측 패널의 선택된 항목 정보도 포함 (customer_id 등)
|
||||
if (selectedLeftItem && componentConfig.rightPanel?.mode === "join") {
|
||||
const leftColumn = componentConfig.rightPanel.join.leftColumn;
|
||||
const rightColumn = componentConfig.rightPanel.join.rightColumn;
|
||||
filterConditions[rightColumn] = selectedLeftItem[leftColumn];
|
||||
}
|
||||
|
||||
|
||||
console.log("🗑️ 그룹 삭제 조건:", filterConditions);
|
||||
|
||||
|
||||
// 그룹 삭제 API 호출
|
||||
result = await dataApi.deleteGroupRecords(tableName, filterConditions);
|
||||
} else {
|
||||
|
|
@ -1527,6 +1673,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
leftColumnLabels[colName] || (typeof col === "object" ? col.label : null) || colName,
|
||||
width: typeof col === "object" ? col.width : 150,
|
||||
align: (typeof col === "object" ? col.align : "left") as "left" | "center" | "right",
|
||||
format: typeof col === "object" ? col.format : undefined, // 🆕 포맷 설정 포함
|
||||
};
|
||||
})
|
||||
: Object.keys(filteredData[0] || {})
|
||||
|
|
@ -1537,6 +1684,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
label: leftColumnLabels[key] || key,
|
||||
width: 150,
|
||||
align: "left" as const,
|
||||
format: undefined, // 🆕 기본값
|
||||
}));
|
||||
|
||||
// 🔧 그룹화된 데이터 렌더링
|
||||
|
|
@ -1587,7 +1735,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
|
||||
style={{ textAlign: col.align || "left" }}
|
||||
>
|
||||
{formatCellValue(col.name, item[col.name], leftCategoryMappings)}
|
||||
{formatCellValue(
|
||||
col.name,
|
||||
item[col.name],
|
||||
leftCategoryMappings,
|
||||
col.format,
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
|
|
@ -1643,7 +1796,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
|
||||
style={{ textAlign: col.align || "left" }}
|
||||
>
|
||||
{formatCellValue(col.name, item[col.name], leftCategoryMappings)}
|
||||
{formatCellValue(col.name, item[col.name], leftCategoryMappings, col.format)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
|
|
@ -1747,7 +1900,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
} else {
|
||||
// 설정된 컬럼이 없으면 자동으로 첫 2개 필드 표시
|
||||
const keys = Object.keys(item).filter(
|
||||
(k) => k !== "id" && k !== "ID" && k !== "children" && k !== "level" && shouldShowField(k)
|
||||
(k) => k !== "id" && k !== "ID" && k !== "children" && k !== "level" && shouldShowField(k),
|
||||
);
|
||||
displayFields = keys.slice(0, 2).map((key) => ({
|
||||
label: leftColumnLabels[key] || key,
|
||||
|
|
@ -1960,6 +2113,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
? displayColumns.map((col) => ({
|
||||
...col,
|
||||
label: rightColumnLabels[col.name] || col.label || col.name,
|
||||
format: col.format, // 🆕 포맷 설정 유지
|
||||
}))
|
||||
: Object.keys(filteredData[0] || {})
|
||||
.filter((key) => shouldShowField(key))
|
||||
|
|
@ -1969,6 +2123,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
label: rightColumnLabels[key] || key,
|
||||
width: 150,
|
||||
align: "left" as const,
|
||||
format: undefined, // 🆕 기본값
|
||||
}));
|
||||
|
||||
return (
|
||||
|
|
@ -2014,7 +2169,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
|
||||
style={{ textAlign: col.align || "left" }}
|
||||
>
|
||||
{formatCellValue(col.name, item[col.name], rightCategoryMappings)}
|
||||
{formatCellValue(col.name, item[col.name], rightCategoryMappings, col.format)}
|
||||
</td>
|
||||
))}
|
||||
{!isDesignMode && (
|
||||
|
|
@ -2022,7 +2177,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
<div className="flex justify-end gap-1">
|
||||
{(componentConfig.rightPanel?.editButton?.enabled ?? true) && (
|
||||
<Button
|
||||
variant={componentConfig.rightPanel?.editButton?.buttonVariant || "outline"}
|
||||
variant={
|
||||
componentConfig.rightPanel?.editButton?.buttonVariant || "outline"
|
||||
}
|
||||
size="sm"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
|
|
@ -2030,20 +2187,22 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
}}
|
||||
className="h-7"
|
||||
>
|
||||
<Pencil className="h-3 w-3 mr-1" />
|
||||
<Pencil className="mr-1 h-3 w-3" />
|
||||
{componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
|
||||
</Button>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteClick("right", item);
|
||||
}}
|
||||
className="rounded p-1 transition-colors hover:bg-red-100"
|
||||
title="삭제"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-red-600" />
|
||||
</button>
|
||||
{(componentConfig.rightPanel?.deleteButton?.enabled ?? true) && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteClick("right", item);
|
||||
}}
|
||||
className="rounded p-1 transition-colors hover:bg-red-100"
|
||||
title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-red-600" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
|
|
@ -2083,26 +2242,28 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
.map((col) => {
|
||||
// 🆕 엔티티 조인 컬럼 처리 (예: item_info.item_number → item_number 또는 item_id_name)
|
||||
let value = item[col.name];
|
||||
if (value === undefined && col.name.includes('.')) {
|
||||
const columnName = col.name.split('.').pop();
|
||||
if (value === undefined && col.name.includes(".")) {
|
||||
const columnName = col.name.split(".").pop();
|
||||
// 1차: 컬럼명 그대로 (예: item_number)
|
||||
value = item[columnName || ''];
|
||||
value = item[columnName || ""];
|
||||
// 2차: item_info.item_number → item_id_name 또는 item_id_item_number 형식 확인
|
||||
if (value === undefined) {
|
||||
const parts = col.name.split('.');
|
||||
const parts = col.name.split(".");
|
||||
if (parts.length === 2) {
|
||||
const refTable = parts[0]; // item_info
|
||||
const refColumn = parts[1]; // item_number 또는 item_name
|
||||
// FK 컬럼명 추론: item_info → item_id
|
||||
const fkColumn = refTable.replace('_info', '').replace('_mng', '') + '_id';
|
||||
|
||||
const fkColumn = refTable.replace("_info", "").replace("_mng", "") + "_id";
|
||||
|
||||
// 백엔드에서 반환하는 별칭 패턴:
|
||||
// 1) item_id_name (기본 referenceColumn)
|
||||
// 2) item_id_item_name (추가 컬럼)
|
||||
if (refColumn === refTable.replace('_info', '').replace('_mng', '') + '_number' ||
|
||||
refColumn === refTable.replace('_info', '').replace('_mng', '') + '_code') {
|
||||
if (
|
||||
refColumn === refTable.replace("_info", "").replace("_mng", "") + "_number" ||
|
||||
refColumn === refTable.replace("_info", "").replace("_mng", "") + "_code"
|
||||
) {
|
||||
// 기본 참조 컬럼 (item_number, customer_code 등)
|
||||
const aliasKey = fkColumn + '_name';
|
||||
const aliasKey = fkColumn + "_name";
|
||||
value = item[aliasKey];
|
||||
} else {
|
||||
// 추가 컬럼 (item_name, customer_name 등)
|
||||
|
|
@ -2120,26 +2281,28 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
.map((col) => {
|
||||
// 🆕 엔티티 조인 컬럼 처리
|
||||
let value = item[col.name];
|
||||
if (value === undefined && col.name.includes('.')) {
|
||||
const columnName = col.name.split('.').pop();
|
||||
if (value === undefined && col.name.includes(".")) {
|
||||
const columnName = col.name.split(".").pop();
|
||||
// 1차: 컬럼명 그대로
|
||||
value = item[columnName || ''];
|
||||
value = item[columnName || ""];
|
||||
// 2차: {fk_column}_name 또는 {fk_column}_{ref_column} 형식 확인
|
||||
if (value === undefined) {
|
||||
const parts = col.name.split('.');
|
||||
const parts = col.name.split(".");
|
||||
if (parts.length === 2) {
|
||||
const refTable = parts[0]; // item_info
|
||||
const refColumn = parts[1]; // item_number 또는 item_name
|
||||
// FK 컬럼명 추론: item_info → item_id
|
||||
const fkColumn = refTable.replace('_info', '').replace('_mng', '') + '_id';
|
||||
|
||||
const fkColumn = refTable.replace("_info", "").replace("_mng", "") + "_id";
|
||||
|
||||
// 백엔드에서 반환하는 별칭 패턴:
|
||||
// 1) item_id_name (기본 referenceColumn)
|
||||
// 2) item_id_item_name (추가 컬럼)
|
||||
if (refColumn === refTable.replace('_info', '').replace('_mng', '') + '_number' ||
|
||||
refColumn === refTable.replace('_info', '').replace('_mng', '') + '_code') {
|
||||
if (
|
||||
refColumn === refTable.replace("_info", "").replace("_mng", "") + "_number" ||
|
||||
refColumn === refTable.replace("_info", "").replace("_mng", "") + "_code"
|
||||
) {
|
||||
// 기본 참조 컬럼
|
||||
const aliasKey = fkColumn + '_name';
|
||||
const aliasKey = fkColumn + "_name";
|
||||
value = item[aliasKey];
|
||||
} else {
|
||||
// 추가 컬럼
|
||||
|
|
@ -2158,11 +2321,11 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
firstValues = Object.entries(item)
|
||||
.filter(([key]) => !key.toLowerCase().includes("id"))
|
||||
.slice(0, summaryCount)
|
||||
.map(([key, value]) => [key, value, ''] as [string, any, string]);
|
||||
.map(([key, value]) => [key, value, ""] as [string, any, string]);
|
||||
|
||||
allValues = Object.entries(item)
|
||||
.filter(([key, value]) => value !== null && value !== undefined && value !== "")
|
||||
.map(([key, value]) => [key, value, ''] as [string, any, string]);
|
||||
.map(([key, value]) => [key, value, ""] as [string, any, string]);
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -2180,30 +2343,15 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
<div className="flex flex-wrap items-center gap-x-4 gap-y-2">
|
||||
{firstValues.map(([key, value, label], idx) => {
|
||||
// 포맷 설정 및 볼드 설정 찾기
|
||||
const colConfig = rightColumns?.find(c => c.name === key);
|
||||
const colConfig = rightColumns?.find((c) => c.name === key);
|
||||
const format = colConfig?.format;
|
||||
const boldValue = colConfig?.bold ?? false;
|
||||
|
||||
// 🆕 카테고리 매핑 적용
|
||||
const formattedValue = formatCellValue(key, value, rightCategoryMappings);
|
||||
|
||||
// 숫자 포맷 적용 (카테고리가 아닌 경우만)
|
||||
let displayValue: React.ReactNode = formattedValue;
|
||||
if (typeof formattedValue === 'string' && value !== null && value !== undefined && value !== "" && format) {
|
||||
const numValue = typeof value === 'number' ? value : parseFloat(String(value));
|
||||
if (!isNaN(numValue)) {
|
||||
displayValue = numValue.toLocaleString('ko-KR', {
|
||||
minimumFractionDigits: format.decimalPlaces ?? 0,
|
||||
maximumFractionDigits: format.decimalPlaces ?? 10,
|
||||
useGrouping: format.thousandSeparator ?? false,
|
||||
});
|
||||
if (format.prefix) displayValue = format.prefix + displayValue;
|
||||
if (format.suffix) displayValue = displayValue + format.suffix;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 🆕 포맷 적용 (날짜/숫자/카테고리)
|
||||
const displayValue = formatCellValue(key, value, rightCategoryMappings, format);
|
||||
|
||||
const showLabel = componentConfig.rightPanel?.summaryShowLabel ?? true;
|
||||
|
||||
|
||||
return (
|
||||
<div key={key} className="flex items-baseline gap-1">
|
||||
{showLabel && (
|
||||
|
|
@ -2211,8 +2359,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
{label || getColumnLabel(key)}:
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className={`text-foreground text-sm ${boldValue ? 'font-semibold' : ''}`}
|
||||
<span
|
||||
className={`text-foreground text-sm ${boldValue ? "font-semibold" : ""}`}
|
||||
>
|
||||
{displayValue}
|
||||
</span>
|
||||
|
|
@ -2233,19 +2381,19 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
}}
|
||||
className="h-7"
|
||||
>
|
||||
<Pencil className="h-3 w-3 mr-1" />
|
||||
<Pencil className="mr-1 h-3 w-3" />
|
||||
{componentConfig.rightPanel?.editButton?.buttonLabel || "수정"}
|
||||
</Button>
|
||||
)}
|
||||
{/* 삭제 버튼 */}
|
||||
{!isDesignMode && (
|
||||
{!isDesignMode && (componentConfig.rightPanel?.deleteButton?.enabled ?? true) && (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteClick("right", item);
|
||||
}}
|
||||
className="rounded p-1 transition-colors hover:bg-red-100"
|
||||
title="삭제"
|
||||
title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-red-600" />
|
||||
</button>
|
||||
|
|
@ -2274,27 +2422,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
<tbody className="divide-border divide-y">
|
||||
{allValues.map(([key, value, label]) => {
|
||||
// 포맷 설정 찾기
|
||||
const colConfig = rightColumns?.find(c => c.name === key);
|
||||
const colConfig = rightColumns?.find((c) => c.name === key);
|
||||
const format = colConfig?.format;
|
||||
|
||||
// 🆕 카테고리 매핑 적용
|
||||
const formattedValue = formatCellValue(key, value, rightCategoryMappings);
|
||||
|
||||
// 숫자 포맷 적용 (카테고리가 아닌 경우만)
|
||||
let displayValue: React.ReactNode = formattedValue;
|
||||
if (typeof formattedValue === 'string' && value !== null && value !== undefined && value !== "" && format) {
|
||||
const numValue = typeof value === 'number' ? value : parseFloat(String(value));
|
||||
if (!isNaN(numValue)) {
|
||||
displayValue = numValue.toLocaleString('ko-KR', {
|
||||
minimumFractionDigits: format.decimalPlaces ?? 0,
|
||||
maximumFractionDigits: format.decimalPlaces ?? 10,
|
||||
useGrouping: format.thousandSeparator ?? false,
|
||||
});
|
||||
if (format.prefix) displayValue = format.prefix + displayValue;
|
||||
if (format.suffix) displayValue = displayValue + format.suffix;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 🆕 포맷 적용 (날짜/숫자/카테고리)
|
||||
const displayValue = formatCellValue(key, value, rightCategoryMappings, format);
|
||||
|
||||
return (
|
||||
<tr key={key} className="hover:bg-muted">
|
||||
<td className="text-muted-foreground px-3 py-2 font-medium whitespace-nowrap">
|
||||
|
|
@ -2310,8 +2443,8 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-muted-foreground py-8 text-center text-sm">
|
||||
|
|
@ -2336,21 +2469,24 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
|
|||
console.log("🔍 [디버깅] 상세 모드 표시 로직:");
|
||||
console.log(" 📋 rightData 전체:", rightData);
|
||||
console.log(" 📋 rightData keys:", Object.keys(rightData));
|
||||
console.log(" ⚙️ 설정된 컬럼:", rightColumns.map((c) => `${c.name} (${c.label})`));
|
||||
|
||||
console.log(
|
||||
" ⚙️ 설정된 컬럼:",
|
||||
rightColumns.map((c) => `${c.name} (${c.label})`),
|
||||
);
|
||||
|
||||
// 설정된 컬럼만 표시
|
||||
displayEntries = rightColumns
|
||||
.map((col) => {
|
||||
// 🆕 엔티티 조인 컬럼 처리 (예: item_info.item_name → item_name)
|
||||
let value = rightData[col.name];
|
||||
console.log(` 🔎 컬럼 "${col.name}": 직접 접근 = ${value}`);
|
||||
|
||||
if (value === undefined && col.name.includes('.')) {
|
||||
const columnName = col.name.split('.').pop();
|
||||
value = rightData[columnName || ''];
|
||||
|
||||
if (value === undefined && col.name.includes(".")) {
|
||||
const columnName = col.name.split(".").pop();
|
||||
value = rightData[columnName || ""];
|
||||
console.log(` → 변환 후 "${columnName}" 접근 = ${value}`);
|
||||
}
|
||||
|
||||
|
||||
return [col.name, value, col.label] as [string, any, string];
|
||||
})
|
||||
.filter(([key, value]) => {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -104,10 +104,15 @@ export interface SplitPanelLayoutConfig {
|
|||
|
||||
// 좌측 선택 항목과의 관계 설정
|
||||
relation?: {
|
||||
type: "join" | "detail"; // 관계 타입
|
||||
leftColumn?: string; // 좌측 테이블의 연결 컬럼
|
||||
rightColumn?: string; // 우측 테이블의 연결 컬럼 (join용)
|
||||
type?: "join" | "detail"; // 관계 타입 (optional - 하위 호환성)
|
||||
leftColumn?: string; // 좌측 테이블의 연결 컬럼 (단일키 - 하위 호환성)
|
||||
rightColumn?: string; // 우측 테이블의 연결 컬럼 (단일키 - 하위 호환성)
|
||||
foreignKey?: string; // 우측 테이블의 외래키 컬럼명
|
||||
// 🆕 복합키 지원 (여러 컬럼으로 조인)
|
||||
keys?: Array<{
|
||||
leftColumn: string; // 좌측 테이블의 조인 컬럼
|
||||
rightColumn: string; // 우측 테이블의 조인 컬럼
|
||||
}>;
|
||||
};
|
||||
|
||||
// 우측 패널 추가 시 중계 테이블 설정 (N:M 관계)
|
||||
|
|
@ -117,7 +122,7 @@ export interface SplitPanelLayoutConfig {
|
|||
leftPanelColumn?: string; // 좌측 패널의 어떤 컬럼값을 가져올지
|
||||
targetColumn?: string; // targetTable의 어떤 컬럼에 넣을지
|
||||
};
|
||||
|
||||
|
||||
// 테이블 모드 설정
|
||||
tableConfig?: {
|
||||
showCheckbox?: boolean; // 체크박스 표시 여부
|
||||
|
|
@ -150,6 +155,14 @@ export interface SplitPanelLayoutConfig {
|
|||
buttonVariant?: "default" | "outline" | "ghost"; // 버튼 스타일 (기본: "outline")
|
||||
groupByColumns?: string[]; // 🆕 그룹핑 기준 컬럼들 (예: ["customer_id", "item_id"])
|
||||
};
|
||||
|
||||
// 🆕 삭제 버튼 설정
|
||||
deleteButton?: {
|
||||
enabled: boolean; // 삭제 버튼 표시 여부 (기본: true)
|
||||
buttonLabel?: string; // 버튼 라벨 (기본: "삭제")
|
||||
buttonVariant?: "default" | "outline" | "ghost" | "destructive"; // 버튼 스타일 (기본: "ghost")
|
||||
confirmMessage?: string; // 삭제 확인 메시지
|
||||
};
|
||||
};
|
||||
|
||||
// 레이아웃 설정
|
||||
|
|
|
|||
Loading…
Reference in New Issue