112 lines
3.2 KiB
TypeScript
112 lines
3.2 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { QueryObserverResult, useQueryClient } from '@tanstack/react-query';
|
|
|
|
import { toast } from 'react-toastify';
|
|
import { Page } from 'src/services/commonResponse/PageResponse';
|
|
import { MajorCodeListResponse, UpdateMajorNameRequest, useUpdateMajorNameMutation } from '@api/codeAPI';
|
|
import AlertModal from '@components/ui/modal/AlertModal';
|
|
import { isEmpty } from '@utils/objectUtils';
|
|
import Button from '@components/ui/button/Button';
|
|
|
|
interface Props {
|
|
major: { code: string; name: string };
|
|
onClose: () => void;
|
|
majorListRefetch: () => Promise<QueryObserverResult<Page<MajorCodeListResponse>, Error>>;
|
|
}
|
|
|
|
const MajorNameModal = ({ major, onClose, majorListRefetch }: Props) => {
|
|
const [updateSuccess, setUpdateSuccess] = useState(false);
|
|
const [modal, setModal] = useState({
|
|
isOpen: false,
|
|
txt: ''
|
|
});
|
|
const [updateMajorNameRequest, setUpdateMajorNameRequest] = useState<UpdateMajorNameRequest>({
|
|
data: {
|
|
codeValue: major.name
|
|
},
|
|
path: major.code
|
|
});
|
|
|
|
// API
|
|
const queryClient = useQueryClient();
|
|
const { mutate: updateMajorName, isPending: isUpdatingMajorName } = useUpdateMajorNameMutation();
|
|
|
|
const handleConfirmClick = () => {
|
|
updateMajorName(updateMajorNameRequest, {
|
|
onSuccess: () => {
|
|
toast.success('Major name has been updated.');
|
|
onClose();
|
|
setUpdateSuccess(true);
|
|
queryClient.invalidateQueries({ queryKey: ['majorCodeList'] });
|
|
},
|
|
onError: (error) => {
|
|
setModal({ isOpen: true, txt: error.response?.data.errorMessage as string });
|
|
setUpdateSuccess(false);
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleAlertModalClose = () => {
|
|
setModal({ isOpen: false, txt: '' });
|
|
|
|
if (updateSuccess) {
|
|
majorListRefetch();
|
|
onClose();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<AlertModal
|
|
isOpen={modal.isOpen}
|
|
closeBtn={{
|
|
onClose: () => handleAlertModalClose(),
|
|
buttonName: 'Close'
|
|
}}
|
|
>
|
|
{modal.txt}
|
|
</AlertModal>
|
|
<div className="title">
|
|
<span className="modal_title">Major Name</span>
|
|
</div>
|
|
<div className="body">
|
|
<table className="table">
|
|
<tbody>
|
|
<tr>
|
|
<th>Major Code</th>
|
|
<td>{major.code}</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Major Name</th>
|
|
<td>
|
|
<input
|
|
type="text"
|
|
className="form_control"
|
|
defaultValue={major.name}
|
|
onChange={(e) =>
|
|
setUpdateMajorNameRequest((prevState) => ({
|
|
...prevState,
|
|
data: { ...prevState.data, codeValue: e.target.value }
|
|
}))
|
|
}
|
|
readOnly={isEmpty(updateMajorNameRequest.data)}
|
|
/>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="footer">
|
|
<Button size="md" color="close" onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
<Button size="md" color="confirm" onClick={handleConfirmClick} disabled={isUpdatingMajorName}>
|
|
Process
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MajorNameModal;
|