From 62e215a7889e51f865ee2a892c132d5aeca2049d Mon Sep 17 00:00:00 2001 From: sanguu516 Date: Wed, 4 Sep 2024 10:32:43 +0900 Subject: [PATCH] =?UTF-8?q?feat/=EC=88=98=EC=A0=95=20=EC=8B=9C=20=ED=8C=9D?= =?UTF-8?q?=EC=97=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../flight/ControlApprovalsTable.js | 165 ++++++++++++------ .../flight/OperationApprovalsTable.js | 136 ++++++++++----- src/components/modal/ConfirmModal.js | 17 +- 3 files changed, 208 insertions(+), 110 deletions(-) diff --git a/src/components/flight/ControlApprovalsTable.js b/src/components/flight/ControlApprovalsTable.js index 3f767440..e25806e5 100644 --- a/src/components/flight/ControlApprovalsTable.js +++ b/src/components/flight/ControlApprovalsTable.js @@ -49,6 +49,10 @@ export default function ControlApprovalsTable(props) { // 체크박스 선택 const [checkList, setCheckList] = useState([]); + const [currentRow, setCurrentRow] = useState(null); + + const [currentPlanAreaSno, setCurrentPlanAreaSno] = useState(null); + useEffect(() => { let approvalCdValue = { S: 0, F: 0, C: 0, U: 0 }; @@ -78,8 +82,6 @@ export default function ControlApprovalsTable(props) { } }, [laancAprvList]); - const [currentPlanAreaSno, setCurrentPlanAreaSno] = useState(null); - // input 수정 컴포넌트 const EditableCell = ({ editable, @@ -93,15 +95,51 @@ export default function ControlApprovalsTable(props) { const save = async () => { try { const values = await form.validateFields(); - - setModal({ - isOpen: true, - title: '수정 확인', - desc: '데이터를 수정하시겠습니까?', - type: 'edit', - row: { ...record, ...values } - }); - } catch (errInfo) {} + const newValue = values[`${record.planAreaSno}_${dataIndex}`]; + + if (record[dataIndex] !== newValue) { + setCurrentRow({ + planAreaSno: record.planAreaSno, + dataIndex: dataIndex, + originalValue: record[dataIndex], // 원래 값을 저장 + newValue: values[`${record.planAreaSno}_${dataIndex}`] // 새로운 값을 저장 + }); + + // 변경된 값이 반영된 상태에서 모달을 띄웁니다. + + let descValue = ''; + + switch (dataIndex) { + case 'fltElev': + descValue = `신청 고도를`; + break; + case 'era': + descValue = `긴급 구조 기관을`; + break; + case 'rm': + descValue = `비고를`; + break; + case 'dtl': + descValue = `세부 사항을`; + break; + case 'reqRadius': + descValue = `요청 반경을`; + break; + case 'reqElev': + descValue = `요청 고도를`; + default: + } + setModal({ + isOpen: true, + title: '수정 확인', + desc: `${descValue} 수정하시겠습니까?`, + type: 'edit', + row: { ...record, ...values } + }); + } + } catch (errInfo) { + console.error('Save failed:', errInfo); + } }; let childNode = children; @@ -112,9 +150,15 @@ export default function ControlApprovalsTable(props) { className='editable-input' name={`${record.planAreaSno}_${dataIndex}`} // 고유한 이름 설정 initialValue={record[dataIndex]} - onClick={e => e.stopPropagation()} // 클릭 이벤트 전파 중지 > - + { + e.stopPropagation(); + save(); + }} + onClick={e => e.stopPropagation()} + /> ); } @@ -122,6 +166,48 @@ export default function ControlApprovalsTable(props) { return {childNode}; }; + const handleCancel = () => { + if (currentRow) { + const { planAreaSno, dataIndex, originalValue } = currentRow; + + // 필드의 원래 값을 다시 설정 + form.setFieldsValue({ + [`${planAreaSno}_${dataIndex}`]: originalValue + }); + } + }; + + const handleSave = async row => { + try { + const updateRes = await dispatch( + updateLaancAprv([ + { + planAreaSno: row.key, + reqRadius: row[`${row.key}_reqRadius`] || '', + fltElev: row[`${row.key}_fltElev`] || '', + reqElev: row[`${row.key}_reqElev`] || '', + dtl: row[`${row.key}_dtl`] || '', + era: row[`${row.key}_era`] || '', + rm: row[`${row.key}_rm`] || '' + } + ]) + ); + + if (updateRes.meta.requestStatus === 'fulfilled') { + props.handlerSearch( + props.filterId, + { startDate: props.startDate, endDate: props.endDate }, + props.filterArea + ); + setEditingKey(''); + } else { + handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true); + } + } catch (errInfo) { + handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true); + } + }; + // 데이터 const columns = [ { @@ -483,48 +569,6 @@ export default function ControlApprovalsTable(props) { } ]; - const handleIsModal = record => { - dispatch( - openModal({ - header: '재검토 사유', - body: record.reviewedReason, - type: 'review' - }) - ); - }; - - const handleSave = async row => { - try { - const updateRes = await dispatch( - updateLaancAprv([ - { - planAreaSno: row.key, - reqRadius: row[`${row.key}_reqRadius`] || '', - fltElev: row[`${row.key}_fltElev`] || '', - reqElev: row[`${row.key}_reqElev`] || '', - dtl: row[`${row.key}_dtl`] || '', - era: row[`${row.key}_era`] || '', - rm: row[`${row.key}_rm`] || '' - } - ]) - ); - - if (updateRes.meta.requestStatus === 'fulfilled') { - setEditingKey(''); - // await dispatch( - // getLaancAprvList({ - // searchStDt: props.startDate, - // searchEndDt: props.endDate - // }) - // ); - } else { - handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true); - } - } catch (errInfo) { - handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true); - } - }; - // 테이블 데이터 const mergedColumns = columns.map(col => { if (!col.editable) { @@ -542,6 +586,7 @@ export default function ControlApprovalsTable(props) { }) }; }); + // 단순 메시지 표출 모달 const handlerErrorModal = (header, body, isRefresh) => { dispatch( @@ -629,8 +674,13 @@ export default function ControlApprovalsTable(props) { // 테이블 행 클릭 이벤트 const handleRowClick = row => { - handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); - props.handlerDetail([row]); + const activeElement = document.activeElement; + if (activeElement && activeElement.tagName === 'INPUT') { + activeElement.blur(); // 강제로 blur 이벤트를 발생시킴 + } else { + handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); + props.handlerDetail([row]); + } }; const handlePageChange = () => { @@ -947,6 +997,7 @@ export default function ControlApprovalsTable(props) { ? updateReviewedType('P', currentPlanAreaSno) : handleSave(modal.row) } + handleCancel={handleCancel} color='primary' /> )} diff --git a/src/components/flight/OperationApprovalsTable.js b/src/components/flight/OperationApprovalsTable.js index fbbf9d1b..cf07ec49 100644 --- a/src/components/flight/OperationApprovalsTable.js +++ b/src/components/flight/OperationApprovalsTable.js @@ -39,9 +39,6 @@ export default function OperationApprovalsTable(props) { // 수정 키 const [editingKey, setEditingKey] = useState(''); - // select row key - const [selectedRowKey, setSelectedRowKey] = useState(''); - const [ismodal, setIsModal] = useState(false); const [form] = Form.useForm(); @@ -55,7 +52,7 @@ export default function OperationApprovalsTable(props) { // 유효성 기체 데이터 const [validData, setValidData] = useState(); - const [reviewedTypeValue, setReviewedTypeValue] = useState(''); + const [currentRow, setCurrentRow] = useState(null); // 확인 모달 const [modal, setModal] = useState({ @@ -106,15 +103,42 @@ export default function OperationApprovalsTable(props) { const save = async () => { try { const values = await form.validateFields(); + const newValue = values[`${record.planAreaSno}_${dataIndex}`]; + + if (record[dataIndex] !== newValue) { + setCurrentRow({ + planAreaSno: record.planAreaSno, + dataIndex: dataIndex, + originalValue: record[dataIndex], // 원래 값을 저장 + newValue: values[`${record.planAreaSno}_${dataIndex}`] // 새로운 값을 저장 + }); + + // 변경된 값이 반영된 상태에서 모달을 띄웁니다. + + let descValue = ''; - setModal({ - isOpen: true, - title: '수정 확인', - desc: '데이터를 수정하시겠습니까?', - type: 'edit', - row: { ...record, ...values } - }); - } catch (errInfo) {} + switch (dataIndex) { + case 'fltElev': + descValue = `신청 고도를`; + break; + case 'reqRadius': + descValue = `요청 반경을`; + break; + case 'reqElev': + descValue = `요청 고도를`; + default: + } + setModal({ + isOpen: true, + title: '수정 확인', + desc: `${descValue} 수정하시겠습니까?`, + type: 'edit', + row: { ...record, ...values } + }); + } + } catch (errInfo) { + console.error('Save failed:', errInfo); + } }; let childNode = children; @@ -125,9 +149,15 @@ export default function OperationApprovalsTable(props) { className='editable-input' name={`${record.planAreaSno}_${dataIndex}`} // 고유한 이름 설정 initialValue={record[dataIndex]} - onClick={e => e.stopPropagation()} // 클릭 이벤트 전파 중지 > - + { + e.stopPropagation(); + save(); + }} + onClick={e => e.stopPropagation()} + /> ); } @@ -135,8 +165,43 @@ export default function OperationApprovalsTable(props) { return {childNode}; }; - const handlePageChange = () => { - document.activeElement?.blur(); + const handleCancel = () => { + if (currentRow) { + const { planAreaSno, dataIndex, originalValue } = currentRow; + + // 필드의 원래 값을 다시 설정 + form.setFieldsValue({ + [`${planAreaSno}_${dataIndex}`]: originalValue + }); + } + }; + + const handleSave = async row => { + try { + const updateRes = await dispatch( + updateLaancAprv([ + { + planAreaSno: row.key, + reqRadius: row[`${row.key}_reqRadius`] || '', + fltElev: row[`${row.key}_fltElev`] || '', + reqElev: row[`${row.key}_reqElev`] || '' + } + ]) + ); + + if (updateRes.meta.requestStatus === 'fulfilled') { + props.handlerSearch( + props.filterId, + { startDate: props.startDate, endDate: props.endDate }, + props.filterArea + ); + setEditingKey(''); + } else { + handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true); + } + } catch (errInfo) { + handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true); + } }; // 검토 상태 변경 @@ -626,34 +691,6 @@ export default function OperationApprovalsTable(props) { ); } }; - const handleSave = async row => { - try { - const updateRes = await dispatch( - updateLaancAprv([ - { - planAreaSno: row.key, - reqRadius: row[`${row.key}_reqRadius`] || '', - fltElev: row[`${row.key}_fltElev`] || '', - reqElev: row[`${row.key}_reqElev`] || '' - } - ]) - ); - - if (updateRes.meta.requestStatus === 'fulfilled') { - setEditingKey(''); - // await dispatch( - // getLaancAprvList({ - // searchStDt: props.startDate, - // searchEndDt: props.endDate - // }) - // ); - } else { - handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true); - } - } catch (errInfo) { - handlerErrorModal(ERROR_TITLE, ERROR_MESSAGE, true); - } - }; // 단순 메시지 표출 모달 const handlerErrorModal = (header, body, isRefresh) => { @@ -719,10 +756,14 @@ export default function OperationApprovalsTable(props) { // 테이블 행 클릭 이벤트 const handleRowClick = row => { - handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); - props.handlerDetail([row]); + const activeElement = document.activeElement; + if (activeElement && activeElement.tagName === 'INPUT') { + activeElement.blur(); // 강제로 blur 이벤트를 발생시킴 + } else { + handlerOpenModal(row.approvalCd, row.fltElev, row.fltElevMax); + props.handlerDetail([row]); + } }; - // 유효성 검사 모달창 const handleIsModal = record => { setValidData({ @@ -1016,6 +1057,7 @@ export default function OperationApprovalsTable(props) { setModal={setModal} handlerConfirm={() => handleSave(modal.row)} color='primary' + handleCancel={handleCancel} /> )} diff --git a/src/components/modal/ConfirmModal.js b/src/components/modal/ConfirmModal.js index 130c9390..bd87352a 100644 --- a/src/components/modal/ConfirmModal.js +++ b/src/components/modal/ConfirmModal.js @@ -11,6 +11,14 @@ export const ConfirmModal = props => { props.handlerConfirm(); props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }); }; + + const handlerCancel = () => { + if (props.modal.type === 'edit' && props.handleCancel) { + props.handleCancel(); // handleCancel 함수가 올바르게 전달되었는지 확인 + } + props.setModal({ ...props.modal, isOpen: !props.modal.isOpen }); + }; + return (
{ // modalClassName='modal-primary' modalClassName={'modal-' + `${props.color}`} className='modal-dialog-centered' + backdrop={props.modal.type === 'edit' ? 'static' : false} // 백그라운드 클릭 시 모달이 닫히지 않게 설정 + keyboard={props.modal.type === 'edit' ? true : false} // Esc 키로 모달을 닫지 않도록 설정 > @@ -36,12 +46,7 @@ export const ConfirmModal = props => { 확인 -