pav
/
pav-fe-kac
12
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

feat/수정 시 팝업 추가

master
sanguu516 2 weeks ago
parent
62e8a09744
commit
62e215a788
3 changed files with 208 additions and 110 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 165
      src/components/flight/ControlApprovalsTable.js
  2. 136
      src/components/flight/OperationApprovalsTable.js
  3. 17
      src/components/modal/ConfirmModal.js

165
src/components/flight/ControlApprovalsTable.js
Unescape View File

@ -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()} // 클릭 이벤트 전파 중지
>
<Input onPressEnter={save} onBlur={save} />
<Input
onPressEnter={save}
onBlur={e => {
e.stopPropagation();
save();
}}
onClick={e => e.stopPropagation()}
/>
</Form.Item>
);
}
@ -122,6 +166,48 @@ export default function ControlApprovalsTable(props) {
return <td {...restProps}>{childNode}</td>;
};
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'
/>
)}

136
src/components/flight/OperationApprovalsTable.js
Unescape View File

@ -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()} // 클릭 이벤트 전파 중지
>
<Input onPressEnter={save} onBlur={save} />
<Input
onPressEnter={save}
onBlur={e => {
e.stopPropagation();
save();
}}
onClick={e => e.stopPropagation()}
/>
</Form.Item>
);
}
@ -135,8 +165,43 @@ export default function OperationApprovalsTable(props) {
return <td {...restProps}>{childNode}</td>;
};
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}
/>
)}
</Form>

17
src/components/modal/ConfirmModal.js
Unescape View File

@ -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 (
<div className='vertically-centered-modal'>
<Modal
@ -21,6 +29,8 @@ export const ConfirmModal = props => {
// 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 키로 모달을 닫지 않도록 설정
>
<ModalHeader
toggle={() =>
@ -36,12 +46,7 @@ export const ConfirmModal = props => {
확인
</Button>
<Button
color='secondary'
onClick={() =>
props.setModal({ ...props.modal, isOpen: !props.modal.isOpen })
}
>
<Button color='secondary' onClick={handlerCancel}>
취소
</Button>
</ModalFooter>

Write Preview
Loading…
Cancel
Save