tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

add fitur delete file dan update daily monitoring

Browse Source
This commit is contained in:
Tb Fajri
2024-03-07 16:11:46 +07:00
parent a056915ae1
commit e1bab4dd8e
9 changed files with 682 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringForm.tsx
View File

@@ -4,7 +4,7 @@
*/
import { useFieldArray, useForm } from 'react-hook-form';
import { useNavigate, useParams } from 'react-router-dom';
import { Box, IconButton, Typography, Grid, Card, Button, ButtonBase, Stack } from '@mui/material';
import { Box, IconButton, Typography, Grid, Card, Button, ButtonBase, Stack, Autocomplete } from '@mui/material';
import { LoadingButton } from "@mui/lab";
/**
@@ -28,16 +28,23 @@ import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
* Utils, Types, Functions
* ============================================
*/
import { AddMonitoringDetail, getOrganizationId } from '../Model/Functions';
import { AddMonitoringDetail, UpdateMonitoringDetail, getMonitoringDetailById, getMonitoringDetailList, getMonitorungDetailById, getOrganizationId } from '../Model/Functions';
import { DetailMonitoringListType} from '../Model/Types';
import FormCreateFilesUpload from '@/pages/CustomerService/FinalLog/Components/FormCreateFilesUpload';
import MultiFilePreview from '@/components/upload/MultiFilePreview';
import Iconify from '@/components/Iconify';
import { useEffect, useRef, useState } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { TextField } from '@mui/material';
type Detail = {
row : DetailMonitoringListType|undefined
}
export default function DetailMonitoringList() {
const { member_id, claim_code } = useParams();
const { member_id, claim_code, id} = useParams();
const [organizationId, setOrganizationId] = useState<number|undefined>();
const [isEdit, setIsEdit] = useState<boolean|undefined>(false);
const [data, setData] = useState<DetailMonitoringListType>();
const navigate = useNavigate()
const pageTitle = claim_code??'_ _ _ _';
@@ -49,39 +56,94 @@ export default function DetailMonitoringList() {
const organization_id = await getOrganizationId(claim_code??'');
setOrganizationId(organization_id);
}
const loadDetailDailyMonitoring = async () => {
const monitoring = await getMonitoringDetailById(id??'')
setData(monitoring)
}
useEffect(() => {
loadOrganizationID();
if (id){
loadDetailDailyMonitoring();
setIsEdit(true)
console.log(data)
}
}, [])
// setup form
// ====================================
const defaultValues: DetailMonitoringListType = {
id : '',
claim_code : '',
claim_id : '',
subject : '',
objective : '',
submission_date : '',
body_temperature: '',
sistole : '',
diastole : '',
respiration_rate: '',
complaints : '',
analysis : '',
medical_plan : [{
medical_plan_str: ''
}],
non_medikamentosa_plan : [{
non_medikamentosa_plan_str: ''
}],
confirmation_medical_leter : [],
medical_action_letter : [],
result : [],
created_at : '',
lab_date : '',
provider : '',
examination : '',
};
const defaultValues = useMemo(
() => ({
id : data?.id ??'',
claim_code : data?.claim_code ?? '',
claim_id : data?.claim_id ?? '',
subject : data?.subject ?? '',
objective : data?.object ?? '',
submission_date : data?.submission_date ?? '',
body_temperature: data?.body_temperature ?? '',
sistole : data?.sistole ?? '',
diastole : data?.diastole ??'',
respiration_rate: data?.respiration_rate ??'',
complaints : data?.complaints ?? '',
analysis : data?.analysis ?? '',
medical_plan : data?.medical_plan ?? [{
medical_plan_str: ''
}],
non_medikamentosa_plan : data?.non_medikamentosa_plan ?? [{
non_medikamentosa_plan_str: ''
}],
confirmation_medical_leter : [],
medical_action_letter : [],
// result : data?.laboratorium_result ?? [],
result : [],
created_at : data?.created_at ?? '',
lab_date : data?.lab_date ?? '',
provider : data?.provider ?? '',
examination : data?.examination ?? '',
reason : '',
}),
[data]
);
useEffect(() => {
if (isEdit && data) {
reset(defaultValues);
}
if (!isEdit) {
reset(defaultValues);
}
// setFileKondisis(currentClaim?.files_by_type?.claim_diagnosis);
// setFileDiagnosas(currentClaim?.files_by_type?.claim_diagnosis);
}, [isEdit, data]);
// const defaultValues: DetailMonitoringListType = {
// id : '',
// claim_code : '',
// claim_id : '',
// subject : '',
// objective : '',
// submission_date : '',
// body_temperature: '',
// sistole : '',
// diastole : '',
// respiration_rate: '',
// complaints : '',
// analysis : data?.analysis ?? '',
// medical_plan : [{
// medical_plan_str: ''
// }],
// non_medikamentosa_plan : [{
// non_medikamentosa_plan_str: ''
// }],
// confirmation_medical_leter : [],
// medical_action_letter : [],
// result : [],
// created_at : '',
// lab_date : '',
// provider : '',
// examination : '',
// };
const methods = useForm<any>({
defaultValues
@@ -113,7 +175,6 @@ export default function DetailMonitoringList() {
arr_medical_action_letter.push(event.target.files[0]);
setValue('medical_action_letter', arr_medical_action_letter)
console.log('test2')
}
else {
console.log('NO FILE');
@@ -168,15 +229,27 @@ export default function DetailMonitoringList() {
// Submit Form
// =====================================
const submitHandler = async (data: DetailMonitoringListType) => {
const response = await AddMonitoringDetail(claim_code??'', data);
const response = isEdit ? await UpdateMonitoringDetail(data) : await AddMonitoringDetail(claim_code??'', data);
if (response == true) {
reset();
navigate('/case_management/daily_monitoring/'+member_id+'/'+organizationId+'/claims', { replace: true });
if (isEdit) {
navigate('/case_management/daily_monitoring/'+member_id+'/claims/'+claim_code+'/list_monitoring', { replace: true });
} else {
navigate('/case_management/daily_monitoring/'+member_id+'/'+organizationId+'/claims', { replace: true });
}
// window.location.reload()
}
}
const [selectedReason, setSelectedReason] = useState({value:'-', label:''});
const reasons = [
{ value: 'Wrong Setting', label: 'Wrong Setting' },
{ value: 'Hospital Request', label: 'Hospital Request' }
];
const [error, setError] = useState(true);
return (
<Page title={pageTitle}>
<Box sx={{ display: 'flex', alignItems: 'center', pl: '22px', mb: '40px' }}>
@@ -211,6 +284,7 @@ export default function DetailMonitoringList() {
</Grid>
</Grid>
</Grid>
{/* Subject */}
<Grid item xs={12}>
<Grid container spacing={3}>
@@ -586,7 +660,6 @@ export default function DetailMonitoringList() {
</Grid>
</Grid>
{/* Laboratorium */}
<Grid item xs={12}>
@@ -689,6 +762,49 @@ export default function DetailMonitoringList() {
</Grid>
</Grid>
{/* Reason Update */}
{
isEdit ? (
<Grid item xs={12}>
<Grid container spacing={3}>
<Grid item xs={12}>
<Typography variant="subtitle1" marginY={2}>Reason for Update*</Typography>
<Stack direction='row' spacing={2} sx={{marginBottom: 2}}>
<Autocomplete
options={reasons}
getOptionLabel={(option) => option.label}
fullWidth
value={selectedReason}
onChange={(event, newValue) => {
setSelectedReason(newValue);
setValue('reason',newValue?.value)
// Validasi jika newValue adalah null
if (!newValue) {
setError('Please select a reason');
} else {
setError('');
}
}}
renderInput={(params) => (
<RHFTextField
{...params}
label="Reason for Delete"
variant="outlined"
id="reason"
name='reason'
error={Boolean(error)} // Menampilkan error jika ada
helperText={error} // Menampilkan pesan kesalahan
/>
)}
/>
</Stack>
</Grid>
</Grid>
</Grid>
) : null
}
{/* Button Cancel & Save */}
<Grid item xs={12} md={12}>
@@ -697,8 +813,8 @@ export default function DetailMonitoringList() {
<Button variant="outlined" color="inherit" onClick={() => navigate(`/case_management/daily_monitoring/${member_id}/claims`)}>
Cancel
</Button>
<LoadingButton disabled={!isDirty} type="submit" variant="contained" loading={isSubmitting}>
Add
<LoadingButton disabled={ isEdit ? error : !isDirty} type="submit" variant="contained" loading={isSubmitting}>
{isEdit ? 'Update' : 'Add'}
</LoadingButton>
</Box>
</Box>

197
frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Components/DetailMonitoringList.tsx
View File

@@ -33,7 +33,7 @@ import { getOrganizationId } from '../Model/Functions';
import { DetailMonitoringListType } from '../Model/Types';
import TableMoreMenu from '@/components/table/TableMoreMenu';
import { MenuItem } from '@mui/material';
import { Delete } from '@mui/icons-material';
import { Delete, DeleteForever, Edit, LoopOutlined } from '@mui/icons-material';
import MuiDialog from '@/components/MuiDialog';
import { DialogActions } from '@mui/material';
import axios from '@/utils/axios';
@@ -68,7 +68,9 @@ export default function DetailMonitoringList() {
{ value: 'Hospital Request', label: 'Hospital Request' }
];
const [error, setError] = useState('');
const [id, setId] = useState(null);
const [id, setId] = useState<null|number>(null);
const [id_file, setIdFile] = useState<null|number>(null);
const handleCloseDialog = () => {
setOpenDialog(false);
}
@@ -77,27 +79,52 @@ export default function DetailMonitoringList() {
const parameters = {
'reason' : selectedReason.value
}
const response = axios.get(`case_management/daily_monitoring/detail/${id}/delete`, {
params: { ...parameters },
});
if (!response.error){
enqueueSnackbar('Claim Request Updated Successfully!', { variant: 'success' });
window.location.reload();
setOpenDialog(false)
} else {
enqueueSnackbar('Claim Request Updated Error!', { variant: 'error' });
}
if (id){
const response = axios.get(`case_management/daily_monitoring/detail/${id}/delete`, {
params: { ...parameters },
});
if (!response.error){
enqueueSnackbar('Claim Request Updated Successfully!', { variant: 'success' });
window.location.reload();
setOpenDialog(false)
} else {
enqueueSnackbar('Claim Request Updated Error!', { variant: 'error' });
}
} else {
axios.get(`case_management/daily_monitoring/detail/${id_file}/delete-file`, {
params: { ...parameters },
})
.then(response => {
if (!response.error) {
enqueueSnackbar('File Successfully deleted!', { variant: 'success' });
window.location.reload();
setOpenDialog(false);
} else {
enqueueSnackbar('Deleted File Error!', { variant: 'error' });
}
})
.catch(error => {
console.error('Error:', error);
});
}
} else {
setError('Please select a reason')
}
}
const handleEdit = (id:number|undefined) => {
navigate(`/case_management/daily_monitoring/${member_id}/claims/${claim_code}/${id}`)
}
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to delete this Daily Monitoring ?</Typography>
<Typography variant="subtitle2">Are you sure to delete this {id_file ? 'File ' : '' } Daily Monitoring ?</Typography>
<Grid item xs={12} md={12} marginTop={4}>
<Card sx={{padding:2, marginTop:2}} >
<Typography variant="subtitle1" marginY={2}>Reason for Delete*</Typography>
<Typography variant="subtitle1" marginY={2}>Reason for Delete*</Typography>
<Stack direction='row' spacing={2} sx={marginBottom2}>
<Autocomplete
options={reason}
@@ -131,9 +158,10 @@ export default function DetailMonitoringList() {
<Button variant="outlined" sx={{color: '#212B36', borderColor: '#919EAB52'}} onClick={handleCloseDialog}>Cancel</Button>
<Button color="primary" variant="contained" onClick={() => handleDelete()}>Delete</Button>
</DialogActions>
</Stack>
)
</Stack>
)
// Load Data
// -------------------
const loadDataTableData = async () => {
@@ -203,10 +231,16 @@ export default function DetailMonitoringList() {
<Box sx={{ marginLeft: 'auto' }}> {/* Menempatkan TableMoreMenu di sebelah kanan */}
<TableMoreMenu actions={
<MenuItem onClick={() => {setOpenDialog(true); setId(row.id)}}>
<Delete color='error' />
Delete
</MenuItem>
<>
<MenuItem onClick={() => {handleEdit(row.id);}}>
<Edit />
Edit
</MenuItem>
<MenuItem onClick={() => {setOpenDialog(true); setId(row.id); setIdFile(null)}}>
<Delete color='error' />
Delete
</MenuItem>
</>
} />
</Box>
</Box>
@@ -394,93 +428,106 @@ export default function DetailMonitoringList() {
</Grid>
<Grid item xs={12}>
<Grid container gap={1}>
<Grid container>
<Grid item xs={12}>
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
Document Confirmation Medical Letter:
</Typography>
</Grid>
<Grid item xs={12}>
<List sx={{ color: 'GrayText' }}>
<List>
{row.document?.map((data, index) => (
<ListItem key={index}>
{data.type === 'confirmation-medical-letter' ? (
<>
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
<a
href={data.path} // Replace 'data.download_link' with the actual download link
target="_blank" // Optional: Open the link in a new tab
rel="noopener noreferrer" // Recommended when using target="_blank"
>
{data.file_name}
</a>
</>
) : null}
</ListItem>
data.type === 'confirmation-medical-letter' ? (
<ListItem key={index} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<div sx={{ display: 'flex', alignItems: 'center' }}>
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
<a
href={data.path}
target="_blank"
rel="noopener noreferrer"
>
{data.file_name}
</a>
</div>
<a
onClick={() => { setOpenDialog(true); setIdFile(data.id); setId(null); }}
style={{ cursor: 'pointer' }}
>
<DeleteForever color='error'/>
</a>
</ListItem>
) : null
))}
</List>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid container gap={1}>
<Grid item xs={12}>
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
Document Medical Action Letter:
</Typography>
</Grid>
<Grid item xs={12}>
<List sx={{ color: 'GrayText' }}>
<List>
{row.document?.map((data, index) => (
<ListItem key={index}>
{data.type === 'medical-action-letter' ? (
<>
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
<a
href={data.path} // Replace 'data.download_link' with the actual download link
target="_blank" // Optional: Open the link in a new tab
rel="noopener noreferrer" // Recommended when using target="_blank"
>
{data.file_name}
</a>
</>
) : null}
</ListItem>
data.type === 'medical-action-letter' ? (
<ListItem key={index} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<div sx={{ display: 'flex', alignItems: 'center' }}>
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
<a
href={data.path}
target="_blank"
rel="noopener noreferrer"
>
{data.file_name}
</a>
</div>
<a
onClick={() => { setOpenDialog(true); setIdFile(data.id); setId(null); }}
style={{ cursor: 'pointer' }}
>
<DeleteForever color='error'/>
</a>
</ListItem>
) : null
))}
</List>
</Grid>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid container gap={1}>
<Grid item xs={12}>
<Typography variant="body1" sx={{ fontWeight: 'bold' }}>
Document Laboratorium Result:
</Typography>
</Grid>
<Grid item xs={12}>
<List sx={{ color: 'GrayText' }}>
<List>
{row.document?.map((data, index) => (
<ListItem key={index}>
{data.type === 'laboratorium-result' ? (
<>
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
<a
href={data.path} // Replace 'data.download_link' with the actual download link
target="_blank" // Optional: Open the link in a new tab
rel="noopener noreferrer" // Recommended when using target="_blank"
>
{data.file_name}
</a>
</>
) : null}
</ListItem>
data.type === 'laboratorium-result' ? (
<ListItem key={index} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<div sx={{ display: 'flex', alignItems: 'center' }}>
<FiberManualRecord sx={{ fontSize: '8px', mr: '10px' }} />
<a
href={data.path}
target="_blank"
rel="noopener noreferrer"
>
{data.file_name}
</a>
</div>
<a
onClick={() => { setOpenDialog(true); setIdFile(data.id); setId(null); }}
style={{ cursor: 'pointer' }}
>
<DeleteForever color='error'/>
</a>
</ListItem>
) : null
))}
</List>
</Grid>
</Grid>
</Grid>
</Grid>
</Card>
</Grid>
@@ -492,7 +539,7 @@ export default function DetailMonitoringList() {
{/* Dialog Delete */}
<MuiDialog
title={{name: "Delete Daily Monitoring"}}
title={{name: id_file ? "Delete File Daily Monitoring" : "Delete Daily Monitoring"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}

59
frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Model/Functions.ts
View File

@@ -99,6 +99,7 @@ export const getMonitoringDetailList = async ( claim_code: string ): Promise<Det
return response;
};
/**
* Get Monitoring Detail List
*/
@@ -117,3 +118,61 @@ export const getOrganizationId = async ( claim_code: string ): Promise<number> =
return response;
};
/**
* Get detail monitoring
*/
export const getMonitoringDetailById = async ( id: string) => {
const response = await axios.get(`/case_management/daily_monitoring/detail/${id}/edit`)
.then((res) =>{
return res.data.data;
})
.catch((res) => {
enqueueSnackbar("server error !", {
variant: 'error',
});
return [];
});
return response;
}
/**
* Update detail monitoring
*/
export const UpdateMonitoringDetail = async (data: DetailMonitoringListType) => {
data.lab_date = data.lab_date != '' && data.lab_date != null ? fDateOnly(data.lab_date) : '';
data.submission_date = data.submission_date != '' && data.submission_date != null ? fDateOnly(data.submission_date) : '';
const formData = makeFormData({...data});
const response = await axios.post(`/case_management/daily_monitoring/detail/update-request`, formData)
.then((res) =>{
enqueueSnackbar(res.data.message, {
variant: 'success',
});
return true;
})
.catch((res) => {
if (res.response.status == 400) {
let arr_message = res.response.data.message;
for (const key in arr_message) {
enqueueSnackbar(arr_message[key][0], {
variant: 'warning',
});
}
}
else {
enqueueSnackbar("server error !", {
variant: 'error',
});
}
return false;
});
return response;
}

32
frontend/dashboard/src/pages/CaseManagement/DailyMonitoring/Model/Types.ts
View File

@@ -50,21 +50,22 @@ export type ClaimListType = {
export type DetailMonitoringListType = {
id : number|null,
claim_id : string|null,
claim_code : string,
subject : string,
object : string,
objective : string,
body_temperature: string,
respiration_rate: string,
sistole : string,
diastole : string
analysis : string,
complaints : string,
submission_date : string,
discharge_date : string,
lab_date : string,
provider : string,
examination : string,
claim_code : string|undefined,
subject : string|undefined,
object : string|undefined,
objective : string|undefined,
body_temperature: string|undefined,
respiration_rate: string|undefined,
sistole : string|undefined,
diastole : string|undefined
analysis : string|undefined,
complaints : string|undefined,
submission_date : string|undefined,
discharge_date : string|undefined,
lab_date : string|undefined,
provider : string|undefined,
examination : string|undefined,
reason : string|undefined,
medical_plan : MedicalPlanStrType[],
non_medikamentosa_plan : NonMedikamentosaPlanType[],
confirmation_medical_leter : files[],
@@ -90,6 +91,7 @@ export type files = {
}
export type document = {
id: number
file_name: string,
path: string,
type: string

4
frontend/dashboard/src/routes/index.tsx
View File

@@ -232,6 +232,10 @@ export default function Router() {
path: 'daily_monitoring/:member_id/claims/:claim_code/add_monitoring',
element: <DetailMonitoringForm />
},
{
path: 'daily_monitoring/:member_id/claims/:claim_code/:id',
element: <DetailMonitoringForm />
},
{
path: 'daily_monitoring/:member_id/claims/:claim_code/list_monitoring',
element: <DetailMonitoringList />