606 lines
21 KiB
TypeScript
606 lines
21 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState, useEffect } from "react";
|
|
import {
|
|
ResizableDialog,
|
|
ResizableDialogContent,
|
|
ResizableDialogHeader,
|
|
ResizableDialogTitle,
|
|
ResizableDialogDescription,
|
|
ResizableDialogFooter,
|
|
} from "@/components/ui/resizable-dialog";
|
|
import { InteractiveScreenViewerDynamic } from "@/components/screen/InteractiveScreenViewerDynamic";
|
|
import { screenApi } from "@/lib/api/screen";
|
|
import { ComponentData } from "@/types/screen";
|
|
import { toast } from "sonner";
|
|
import { dynamicFormApi } from "@/lib/api/dynamicForm";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
|
|
interface EditModalState {
|
|
isOpen: boolean;
|
|
screenId: number | null;
|
|
title: string;
|
|
description?: string;
|
|
modalSize: "sm" | "md" | "lg" | "xl";
|
|
editData: Record<string, any>;
|
|
onSave?: () => void;
|
|
groupByColumns?: string[]; // 🆕 그룹핑 컬럼 (예: ["order_no"])
|
|
tableName?: string; // 🆕 테이블명 (그룹 조회용)
|
|
}
|
|
|
|
interface EditModalProps {
|
|
className?: string;
|
|
}
|
|
|
|
export const EditModal: React.FC<EditModalProps> = ({ className }) => {
|
|
const { user } = useAuth();
|
|
const [modalState, setModalState] = useState<EditModalState>({
|
|
isOpen: false,
|
|
screenId: null,
|
|
title: "",
|
|
description: "",
|
|
modalSize: "md",
|
|
editData: {},
|
|
onSave: undefined,
|
|
groupByColumns: undefined,
|
|
tableName: undefined,
|
|
});
|
|
|
|
const [screenData, setScreenData] = useState<{
|
|
components: ComponentData[];
|
|
screenInfo: any;
|
|
} | null>(null);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [screenDimensions, setScreenDimensions] = useState<{
|
|
width: number;
|
|
height: number;
|
|
offsetX?: number;
|
|
offsetY?: number;
|
|
} | null>(null);
|
|
|
|
// 폼 데이터 상태 (편집 데이터로 초기화됨)
|
|
const [formData, setFormData] = useState<Record<string, any>>({});
|
|
const [originalData, setOriginalData] = useState<Record<string, any>>({});
|
|
|
|
// 🆕 그룹 데이터 상태 (같은 order_no의 모든 품목)
|
|
const [groupData, setGroupData] = useState<Record<string, any>[]>([]);
|
|
const [originalGroupData, setOriginalGroupData] = useState<Record<string, any>[]>([]);
|
|
|
|
// 화면의 실제 크기 계산 함수 (ScreenModal과 동일)
|
|
const calculateScreenDimensions = (components: ComponentData[]) => {
|
|
if (components.length === 0) {
|
|
return {
|
|
width: 400,
|
|
height: 300,
|
|
offsetX: 0,
|
|
offsetY: 0,
|
|
};
|
|
}
|
|
|
|
// 모든 컴포넌트의 경계 찾기
|
|
let minX = Infinity;
|
|
let minY = Infinity;
|
|
let maxX = -Infinity;
|
|
let maxY = -Infinity;
|
|
|
|
components.forEach((component) => {
|
|
const x = parseFloat(component.position?.x?.toString() || "0");
|
|
const y = parseFloat(component.position?.y?.toString() || "0");
|
|
const width = parseFloat(component.size?.width?.toString() || "100");
|
|
const height = parseFloat(component.size?.height?.toString() || "40");
|
|
|
|
minX = Math.min(minX, x);
|
|
minY = Math.min(minY, y);
|
|
maxX = Math.max(maxX, x + width);
|
|
maxY = Math.max(maxY, y + height);
|
|
});
|
|
|
|
// 실제 컨텐츠 크기 계산
|
|
const contentWidth = maxX - minX;
|
|
const contentHeight = maxY - minY;
|
|
|
|
// 적절한 여백 추가 (주석처리 - 사용자 설정 크기 그대로 사용)
|
|
// const paddingX = 40;
|
|
// const paddingY = 40;
|
|
|
|
const finalWidth = Math.max(contentWidth, 400); // padding 제거
|
|
const finalHeight = Math.max(contentHeight, 300); // padding 제거
|
|
|
|
return {
|
|
width: Math.min(finalWidth, window.innerWidth * 0.95),
|
|
height: Math.min(finalHeight, window.innerHeight * 0.9),
|
|
offsetX: Math.max(0, minX), // paddingX 제거
|
|
offsetY: Math.max(0, minY), // paddingY 제거
|
|
};
|
|
};
|
|
|
|
// 전역 모달 이벤트 리스너
|
|
useEffect(() => {
|
|
const handleOpenEditModal = (event: CustomEvent) => {
|
|
const { screenId, title, description, modalSize, editData, onSave, groupByColumns, tableName } = event.detail;
|
|
|
|
setModalState({
|
|
isOpen: true,
|
|
screenId,
|
|
title,
|
|
description: description || "",
|
|
modalSize: modalSize || "lg",
|
|
editData: editData || {},
|
|
onSave,
|
|
groupByColumns, // 🆕 그룹핑 컬럼
|
|
tableName, // 🆕 테이블명
|
|
});
|
|
|
|
// 편집 데이터로 폼 데이터 초기화
|
|
setFormData(editData || {});
|
|
setOriginalData(editData || {});
|
|
};
|
|
|
|
const handleCloseEditModal = () => {
|
|
// 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
|
|
if (modalState.onSave) {
|
|
try {
|
|
modalState.onSave();
|
|
} catch (callbackError) {
|
|
console.error("⚠️ onSave 콜백 에러:", callbackError);
|
|
}
|
|
}
|
|
|
|
// 모달 닫기
|
|
handleClose();
|
|
};
|
|
|
|
window.addEventListener("openEditModal", handleOpenEditModal as EventListener);
|
|
window.addEventListener("closeEditModal", handleCloseEditModal);
|
|
|
|
return () => {
|
|
window.removeEventListener("openEditModal", handleOpenEditModal as EventListener);
|
|
window.removeEventListener("closeEditModal", handleCloseEditModal);
|
|
};
|
|
}, [modalState.onSave]); // modalState.onSave를 의존성에 추가하여 최신 콜백 참조
|
|
|
|
// 화면 데이터 로딩
|
|
useEffect(() => {
|
|
if (modalState.isOpen && modalState.screenId) {
|
|
loadScreenData(modalState.screenId);
|
|
|
|
// 🆕 그룹 데이터 조회 (groupByColumns가 있는 경우)
|
|
if (modalState.groupByColumns && modalState.groupByColumns.length > 0 && modalState.tableName) {
|
|
loadGroupData();
|
|
}
|
|
}
|
|
}, [modalState.isOpen, modalState.screenId]);
|
|
|
|
// 🆕 그룹 데이터 조회 함수
|
|
const loadGroupData = async () => {
|
|
if (!modalState.tableName || !modalState.groupByColumns || modalState.groupByColumns.length === 0) {
|
|
console.warn("테이블명 또는 그룹핑 컬럼이 없습니다.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
console.log("🔍 그룹 데이터 조회 시작:", {
|
|
tableName: modalState.tableName,
|
|
groupByColumns: modalState.groupByColumns,
|
|
editData: modalState.editData,
|
|
});
|
|
|
|
// 그룹핑 컬럼 값 추출 (예: order_no = "ORD-20251124-001")
|
|
const groupValues: Record<string, any> = {};
|
|
modalState.groupByColumns.forEach((column) => {
|
|
if (modalState.editData[column]) {
|
|
groupValues[column] = modalState.editData[column];
|
|
}
|
|
});
|
|
|
|
if (Object.keys(groupValues).length === 0) {
|
|
console.warn("그룹핑 컬럼 값이 없습니다:", modalState.groupByColumns);
|
|
return;
|
|
}
|
|
|
|
console.log("🔍 그룹 조회 요청:", {
|
|
tableName: modalState.tableName,
|
|
groupValues,
|
|
});
|
|
|
|
// 같은 그룹의 모든 레코드 조회 (entityJoinApi 사용)
|
|
const { entityJoinApi } = await import("@/lib/api/entityJoin");
|
|
const response = await entityJoinApi.getTableDataWithJoins(modalState.tableName, {
|
|
page: 1,
|
|
size: 1000,
|
|
search: groupValues, // search 파라미터로 전달 (백엔드에서 WHERE 조건으로 처리)
|
|
enableEntityJoin: true,
|
|
});
|
|
|
|
console.log("🔍 그룹 조회 응답:", response);
|
|
|
|
// entityJoinApi는 배열 또는 { data: [] } 형식으로 반환
|
|
const dataArray = Array.isArray(response) ? response : response?.data || [];
|
|
|
|
if (dataArray.length > 0) {
|
|
console.log("✅ 그룹 데이터 조회 성공:", dataArray);
|
|
setGroupData(dataArray);
|
|
setOriginalGroupData(JSON.parse(JSON.stringify(dataArray))); // Deep copy
|
|
toast.info(`${dataArray.length}개의 관련 품목을 불러왔습니다.`);
|
|
} else {
|
|
console.warn("그룹 데이터가 없습니다:", response);
|
|
setGroupData([modalState.editData]); // 기본값: 선택된 행만
|
|
setOriginalGroupData([JSON.parse(JSON.stringify(modalState.editData))]);
|
|
}
|
|
} catch (error: any) {
|
|
console.error("❌ 그룹 데이터 조회 오류:", error);
|
|
toast.error("관련 데이터를 불러오는 중 오류가 발생했습니다.");
|
|
setGroupData([modalState.editData]); // 기본값: 선택된 행만
|
|
setOriginalGroupData([JSON.parse(JSON.stringify(modalState.editData))]);
|
|
}
|
|
};
|
|
|
|
const loadScreenData = async (screenId: number) => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
console.log("화면 데이터 로딩 시작:", screenId);
|
|
|
|
// 화면 정보와 레이아웃 데이터 로딩
|
|
const [screenInfo, layoutData] = await Promise.all([
|
|
screenApi.getScreen(screenId),
|
|
screenApi.getLayout(screenId),
|
|
]);
|
|
|
|
console.log("API 응답:", { screenInfo, layoutData });
|
|
|
|
if (screenInfo && layoutData) {
|
|
const components = layoutData.components || [];
|
|
|
|
// 화면의 실제 크기 계산
|
|
const dimensions = calculateScreenDimensions(components);
|
|
setScreenDimensions(dimensions);
|
|
|
|
setScreenData({
|
|
components,
|
|
screenInfo: screenInfo,
|
|
});
|
|
console.log("화면 데이터 설정 완료:", {
|
|
componentsCount: components.length,
|
|
dimensions,
|
|
screenInfo,
|
|
});
|
|
} else {
|
|
throw new Error("화면 데이터가 없습니다");
|
|
}
|
|
} catch (error) {
|
|
console.error("화면 데이터 로딩 오류:", error);
|
|
toast.error("화면을 불러오는 중 오류가 발생했습니다.");
|
|
handleClose();
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setModalState({
|
|
isOpen: false,
|
|
screenId: null,
|
|
title: "",
|
|
description: "",
|
|
modalSize: "md",
|
|
editData: {},
|
|
onSave: undefined,
|
|
groupByColumns: undefined,
|
|
tableName: undefined,
|
|
});
|
|
setScreenData(null);
|
|
setFormData({});
|
|
setOriginalData({});
|
|
setGroupData([]); // 🆕
|
|
setOriginalGroupData([]); // 🆕
|
|
};
|
|
|
|
// 저장 버튼 클릭 시 - UPDATE 액션 실행
|
|
const handleSave = async () => {
|
|
if (!screenData?.screenInfo?.tableName) {
|
|
toast.error("테이블 정보가 없습니다.");
|
|
return;
|
|
}
|
|
|
|
try {
|
|
// 🆕 그룹 데이터가 있는 경우: 모든 품목 일괄 수정
|
|
if (groupData.length > 0) {
|
|
console.log("🔄 그룹 데이터 일괄 수정 시작:", {
|
|
groupDataLength: groupData.length,
|
|
originalGroupDataLength: originalGroupData.length,
|
|
});
|
|
|
|
let updatedCount = 0;
|
|
|
|
for (let i = 0; i < groupData.length; i++) {
|
|
const currentData = groupData[i];
|
|
const originalItemData = originalGroupData[i];
|
|
|
|
if (!originalItemData) {
|
|
console.warn(`원본 데이터가 없습니다 (index: ${i})`);
|
|
continue;
|
|
}
|
|
|
|
// 변경된 필드만 추출
|
|
const changedData: Record<string, any> = {};
|
|
|
|
// 🆕 sales_order_mng 테이블의 실제 컬럼만 포함 (조인된 컬럼 제외)
|
|
const salesOrderColumns = [
|
|
"id",
|
|
"order_no",
|
|
"customer_code",
|
|
"customer_name",
|
|
"order_date",
|
|
"delivery_date",
|
|
"item_code",
|
|
"quantity",
|
|
"unit_price",
|
|
"amount",
|
|
"status",
|
|
"notes",
|
|
"created_at",
|
|
"updated_at",
|
|
"company_code",
|
|
];
|
|
|
|
Object.keys(currentData).forEach((key) => {
|
|
// sales_order_mng 테이블의 컬럼만 처리 (조인 컬럼 제외)
|
|
if (!salesOrderColumns.includes(key)) {
|
|
return;
|
|
}
|
|
|
|
if (currentData[key] !== originalItemData[key]) {
|
|
changedData[key] = currentData[key];
|
|
}
|
|
});
|
|
|
|
// 변경사항이 없으면 스킵
|
|
if (Object.keys(changedData).length === 0) {
|
|
console.log(`변경사항 없음 (index: ${i})`);
|
|
continue;
|
|
}
|
|
|
|
// 기본키 확인
|
|
const recordId = originalItemData.id || Object.values(originalItemData)[0];
|
|
|
|
// UPDATE 실행
|
|
const response = await dynamicFormApi.updateFormDataPartial(
|
|
recordId,
|
|
originalItemData,
|
|
changedData,
|
|
screenData.screenInfo.tableName,
|
|
);
|
|
|
|
if (response.success) {
|
|
updatedCount++;
|
|
console.log(`✅ 품목 ${i + 1} 수정 성공 (id: ${recordId})`);
|
|
} else {
|
|
console.error(`❌ 품목 ${i + 1} 수정 실패 (id: ${recordId}):`, response.message);
|
|
}
|
|
}
|
|
|
|
if (updatedCount > 0) {
|
|
toast.success(`${updatedCount}개의 품목이 수정되었습니다.`);
|
|
|
|
// 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
|
|
if (modalState.onSave) {
|
|
try {
|
|
modalState.onSave();
|
|
} catch (callbackError) {
|
|
console.error("⚠️ onSave 콜백 에러:", callbackError);
|
|
}
|
|
}
|
|
|
|
handleClose();
|
|
} else {
|
|
toast.info("변경된 내용이 없습니다.");
|
|
handleClose();
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
// 기존 로직: 단일 레코드 수정
|
|
const changedData: Record<string, any> = {};
|
|
Object.keys(formData).forEach((key) => {
|
|
if (formData[key] !== originalData[key]) {
|
|
changedData[key] = formData[key];
|
|
}
|
|
});
|
|
|
|
if (Object.keys(changedData).length === 0) {
|
|
toast.info("변경된 내용이 없습니다.");
|
|
handleClose();
|
|
return;
|
|
}
|
|
|
|
// 기본키 확인 (id 또는 첫 번째 키)
|
|
const recordId = originalData.id || Object.values(originalData)[0];
|
|
|
|
// UPDATE 액션 실행
|
|
const response = await dynamicFormApi.updateFormDataPartial(
|
|
recordId,
|
|
originalData,
|
|
changedData,
|
|
screenData.screenInfo.tableName,
|
|
);
|
|
|
|
if (response.success) {
|
|
toast.success("데이터가 수정되었습니다.");
|
|
|
|
// 부모 컴포넌트의 onSave 콜백 실행 (테이블 새로고침)
|
|
if (modalState.onSave) {
|
|
try {
|
|
modalState.onSave();
|
|
} catch (callbackError) {
|
|
console.error("⚠️ onSave 콜백 에러:", callbackError);
|
|
}
|
|
}
|
|
|
|
handleClose();
|
|
} else {
|
|
throw new Error(response.message || "수정에 실패했습니다.");
|
|
}
|
|
} catch (error: any) {
|
|
console.error("❌ 수정 실패:", error);
|
|
toast.error(error.message || "데이터 수정 중 오류가 발생했습니다.");
|
|
}
|
|
};
|
|
|
|
// 모달 크기 설정 - 화면관리 설정 크기 + 헤더
|
|
const getModalStyle = () => {
|
|
if (!screenDimensions) {
|
|
return {
|
|
className: "w-fit min-w-[400px] max-w-4xl max-h-[90vh] overflow-hidden p-0",
|
|
style: undefined, // undefined로 변경 - defaultWidth/defaultHeight 사용
|
|
};
|
|
}
|
|
|
|
// 화면관리에서 설정한 크기 = 컨텐츠 영역 크기
|
|
// 실제 모달 크기 = 컨텐츠 + 헤더
|
|
const headerHeight = 60; // DialogHeader
|
|
const totalHeight = screenDimensions.height + headerHeight;
|
|
|
|
return {
|
|
className: "overflow-hidden p-0",
|
|
style: {
|
|
width: `${Math.min(screenDimensions.width, window.innerWidth * 0.98)}px`,
|
|
height: `${Math.min(totalHeight, window.innerHeight * 0.95)}px`,
|
|
maxWidth: "98vw",
|
|
maxHeight: "95vh",
|
|
},
|
|
};
|
|
};
|
|
|
|
const modalStyle = getModalStyle();
|
|
|
|
return (
|
|
<ResizableDialog open={modalState.isOpen} onOpenChange={handleClose}>
|
|
<ResizableDialogContent
|
|
className={`${modalStyle.className} ${className || ""}`}
|
|
style={modalStyle.style}
|
|
defaultWidth={800}
|
|
defaultHeight={600}
|
|
minWidth={600}
|
|
minHeight={400}
|
|
maxWidth={1400}
|
|
maxHeight={1000}
|
|
modalId={modalState.screenId ? `edit-modal-${modalState.screenId}` : undefined}
|
|
userId={user?.userId}
|
|
>
|
|
<ResizableDialogHeader className="shrink-0 border-b px-4 py-3">
|
|
<div className="flex items-center gap-2">
|
|
<ResizableDialogTitle className="text-base">{modalState.title || "데이터 수정"}</ResizableDialogTitle>
|
|
{modalState.description && !loading && (
|
|
<ResizableDialogDescription className="text-muted-foreground text-xs">{modalState.description}</ResizableDialogDescription>
|
|
)}
|
|
{loading && (
|
|
<ResizableDialogDescription className="text-xs">{loading ? "화면을 불러오는 중입니다..." : ""}</ResizableDialogDescription>
|
|
)}
|
|
</div>
|
|
</ResizableDialogHeader>
|
|
|
|
<div className="flex flex-1 items-center justify-center overflow-auto">
|
|
{loading ? (
|
|
<div className="flex h-full items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-b-2 border-blue-600"></div>
|
|
<p className="text-muted-foreground">화면을 불러오는 중...</p>
|
|
</div>
|
|
</div>
|
|
) : screenData ? (
|
|
<div
|
|
className="relative bg-white"
|
|
style={{
|
|
width: screenDimensions?.width || 800,
|
|
height: screenDimensions?.height || 600,
|
|
transformOrigin: "center center",
|
|
maxWidth: "100%",
|
|
maxHeight: "100%",
|
|
}}
|
|
>
|
|
{/* 🆕 그룹 데이터가 있으면 안내 메시지 표시 */}
|
|
{groupData.length > 1 && (
|
|
<div className="absolute left-4 top-4 z-10 rounded-md bg-blue-50 px-3 py-2 text-xs text-blue-700 shadow-sm">
|
|
{groupData.length}개의 관련 품목을 함께 수정합니다
|
|
</div>
|
|
)}
|
|
|
|
{screenData.components.map((component) => {
|
|
// 컴포넌트 위치를 offset만큼 조정
|
|
const offsetX = screenDimensions?.offsetX || 0;
|
|
const offsetY = screenDimensions?.offsetY || 0;
|
|
|
|
const adjustedComponent = {
|
|
...component,
|
|
position: {
|
|
...component.position,
|
|
x: parseFloat(component.position?.x?.toString() || "0") - offsetX,
|
|
y: parseFloat(component.position?.y?.toString() || "0") - offsetY,
|
|
},
|
|
};
|
|
|
|
// 🔍 디버깅: 컴포넌트 렌더링 시점의 groupData 확인
|
|
if (component.id === screenData.components[0]?.id) {
|
|
console.log("🔍 [EditModal] InteractiveScreenViewerDynamic props:", {
|
|
componentId: component.id,
|
|
groupDataLength: groupData.length,
|
|
groupData: groupData,
|
|
formData: groupData.length > 0 ? groupData[0] : formData,
|
|
});
|
|
}
|
|
|
|
return (
|
|
<InteractiveScreenViewerDynamic
|
|
key={component.id}
|
|
component={adjustedComponent}
|
|
allComponents={screenData.components}
|
|
formData={groupData.length > 0 ? groupData[0] : formData}
|
|
onFormDataChange={(fieldName, value) => {
|
|
// 🆕 그룹 데이터가 있으면 처리
|
|
if (groupData.length > 0) {
|
|
// ModalRepeaterTable의 경우 배열 전체를 받음
|
|
if (Array.isArray(value)) {
|
|
setGroupData(value);
|
|
} else {
|
|
// 일반 필드는 모든 항목에 동일하게 적용
|
|
setGroupData((prev) =>
|
|
prev.map((item) => ({
|
|
...item,
|
|
[fieldName]: value,
|
|
}))
|
|
);
|
|
}
|
|
} else {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
[fieldName]: value,
|
|
}));
|
|
}
|
|
}}
|
|
screenInfo={{
|
|
id: modalState.screenId!,
|
|
tableName: screenData.screenInfo?.tableName,
|
|
}}
|
|
onSave={handleSave}
|
|
// 🆕 그룹 데이터를 ModalRepeaterTable에 전달
|
|
groupedData={groupData.length > 0 ? groupData : undefined}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="flex h-full items-center justify-center">
|
|
<p className="text-muted-foreground">화면 데이터가 없습니다.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</ResizableDialogContent>
|
|
</ResizableDialog>
|
|
);
|
|
};
|
|
|
|
export default EditModal;
|