Fitur edit di final LOG
This commit is contained in:
@@ -0,0 +1,261 @@
|
||||
import MuiDialog from "@/components/MuiDialog";
|
||||
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, TextField, Typography } from "@mui/material";
|
||||
import { Paper } from "@mui/material";
|
||||
import { Stack } from '@mui/material';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { DetailFinalLogType } from "../Model/Types";
|
||||
import { fDateOnly, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
|
||||
import axios from "@/utils/axios";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useNavigate } from "react-router";
|
||||
|
||||
|
||||
type DialogConfirmationType = {
|
||||
openDialog: boolean;
|
||||
setOpenDialog: any;
|
||||
onSubmit?: void;
|
||||
requestLog: DetailFinalLogType|undefined;
|
||||
}
|
||||
|
||||
export default function DialogEditFinalLOG({requestLog, setOpenDialog, openDialog, onSubmit} : DialogConfirmationType ) {
|
||||
|
||||
const navigate = useNavigate();
|
||||
const [formData, setFormData] = useState({
|
||||
discharge_date: requestLog?.discharge_date,
|
||||
id: requestLog?.id,
|
||||
catatan: requestLog?.catatan,
|
||||
icdCodes: requestLog?.diagnosis
|
||||
? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
|
||||
: [],
|
||||
reason: requestLog?.reason
|
||||
});
|
||||
|
||||
const [icdOptions, setIcdOptions] = useState([
|
||||
{ value: '-', label: '-' }
|
||||
]);
|
||||
|
||||
useEffect(() => {
|
||||
// Ambil data dari API dan atur opsi ICD
|
||||
axios.get('diagnosis')
|
||||
.then((response) => {
|
||||
setIcdOptions(response.data.data);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('Error fetching ICD options:', error);
|
||||
});
|
||||
}, []); // useEffect dijalankan hanya sekali saat komponen dimount
|
||||
|
||||
useEffect(() => {
|
||||
if (requestLog) {
|
||||
setFormData({
|
||||
discharge_date: requestLog.discharge_date,
|
||||
id: requestLog.id,
|
||||
catatan: requestLog.catatan,
|
||||
icdCodes: requestLog.diagnosis
|
||||
? requestLog.diagnosis.map(diagnosis => diagnosis.code)
|
||||
: [],
|
||||
reason: requestLog.reason
|
||||
});
|
||||
}
|
||||
}, [requestLog]);
|
||||
|
||||
const handleChange = (field, value) => {
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
[field]: value,
|
||||
}));
|
||||
if (field === 'reason') {
|
||||
setIsReasonSelected(!!value);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const handleApprove = () => {
|
||||
setFormData((prevData) => ({
|
||||
...prevData,
|
||||
}));
|
||||
handleSubmit();
|
||||
};
|
||||
|
||||
|
||||
const handleSubmit = () => {
|
||||
if (isReasonSelected && formData.reason !== '') {
|
||||
axios
|
||||
.post(`customer-service/request/final-log`, formData)
|
||||
.then((response) => {
|
||||
enqueueSnackbar('Verification Request LOG Success', { variant: 'success' });
|
||||
setOpenDialog(false);
|
||||
if (requestLog?.service_type == 'Inpatient'){
|
||||
navigate('/case_management/inpatient_monitoring');
|
||||
} else {
|
||||
navigate('/custormer-service/final-log');
|
||||
}
|
||||
})
|
||||
.catch(({ response }) => {
|
||||
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
|
||||
});
|
||||
} else {
|
||||
setIsReasonSelected(false);
|
||||
alert('Silakan pilih alasan sebelum mengirimkan data.');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const style1 = {
|
||||
color: '#919EAB',
|
||||
width: '30%'
|
||||
}
|
||||
const style2 = {
|
||||
width: '70%'
|
||||
}
|
||||
const marginBottom1 = {
|
||||
marginBottom: 1,
|
||||
}
|
||||
const marginBottom2 = {
|
||||
marginBottom: 2,
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
discharge_date: requestLog?.discharge_date,
|
||||
id: requestLog?.id,
|
||||
catatan: requestLog?.catatan,
|
||||
icdCodes: requestLog?.diagnosis
|
||||
? requestLog?.diagnosis.map(diagnosis => diagnosis.code)
|
||||
: [],
|
||||
reason: requestLog?.reason
|
||||
});
|
||||
};
|
||||
|
||||
const [isReasonSelected, setIsReasonSelected] = useState(true);
|
||||
|
||||
const handleCloseDialog = () => {
|
||||
setOpenDialog(false);
|
||||
resetForm();
|
||||
}
|
||||
|
||||
const reasons = [
|
||||
{ value: 'agreement', label: 'Agreement changed' },
|
||||
{ value: 'endorsement', label: 'Endorsement' },
|
||||
{ value: 'renewal', label: 'Renewal' },
|
||||
{ value: 'wrong_setting', label: 'Wrong Setting' },
|
||||
// Add more options as needed
|
||||
];
|
||||
|
||||
|
||||
|
||||
const getContent = () => (
|
||||
<Stack spacing={1} marginTop={2}>
|
||||
<Typography variant="subtitle2">Are you sure to edit this final log ?</Typography>
|
||||
<Grid item xs={12} md={12} marginTop={4}>
|
||||
<Card sx={{padding:2, marginTop:2}} >
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Member ID</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.member_id}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Policy Number</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.policy_number}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Name</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.name}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Submission Date</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.submission_date ? fDateTimesecond(requestLog?.submission_date) : '-'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Claim Method</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.claim_method ? toTitleCase(requestLog?.claim_method) : '-'}</Typography>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom1}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Service Type</Typography>
|
||||
<Typography variant='subtitle2' sx={style2} gutterBottom>{requestLog?.service_type}</Typography>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
<Card sx={{padding:2, marginTop:2}} >
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Discharge Date</Typography>
|
||||
<TextField
|
||||
label="Discharge Date"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
type="date"
|
||||
value={formData.discharge_date ? fDateOnly(formData.discharge_date) : ''}
|
||||
onChange={(e) => handleChange('discharge_date', e.target.value)}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Catatan</Typography>
|
||||
<TextField
|
||||
label="Catatan"
|
||||
variant="outlined"
|
||||
fullWidth
|
||||
value={formData.catatan}
|
||||
onChange={(e) => handleChange('catatan', e.target.value)}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Diagnosis ICD - X</Typography>
|
||||
<Autocomplete
|
||||
multiple
|
||||
options={icdOptions}
|
||||
getOptionLabel={(option) => option.label}
|
||||
fullWidth
|
||||
value={icdOptions.filter((icd) => formData.icdCodes.includes(icd.value))}
|
||||
onChange={(e, newValues) => {
|
||||
const selectedCodes = newValues.map((value) => value.value);
|
||||
setFormData({ ...formData, icdCodes: selectedCodes });
|
||||
}}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Diagnosis ICD - X"
|
||||
variant="outlined"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
<Stack direction='row' spacing={2} sx={marginBottom2}>
|
||||
<Typography variant='subtitle2' sx={style1} gutterBottom>Reason*</Typography>
|
||||
<Autocomplete
|
||||
options={reasons}
|
||||
getOptionLabel={(option) => option.label}
|
||||
fullWidth
|
||||
value={reasons.find((r) => r.value === formData.reason) || null} // Use find to match the default value
|
||||
onChange={(e, newValue) => handleChange('reason', newValue?.value)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
label="Reason"
|
||||
variant="outlined"
|
||||
required
|
||||
error={!isReasonSelected} // Menandai input sebagai salah jika opsi tidak dipilih
|
||||
helperText={!isReasonSelected ? 'Alasan harus dipilih' : ''}
|
||||
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
|
||||
<Button color="primary" variant="contained" onClick={() => handleApprove()}>Update</Button>
|
||||
</DialogActions>
|
||||
</Stack>
|
||||
);
|
||||
|
||||
|
||||
return (
|
||||
<MuiDialog
|
||||
title={{name: "Update"}}
|
||||
openDialog={openDialog}
|
||||
setOpenDialog={setOpenDialog}
|
||||
content={getContent()}
|
||||
maxWidth="xl"
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user