add fitur delete dan upload ulang file di FINAL log

This commit is contained in:
2024-02-09 16:58:03 +07:00
parent 7809e8828f
commit 2dad400486
11 changed files with 650 additions and 74 deletions

View File

@@ -553,7 +553,7 @@ export default function DetailMonitoringList() {
<Grid container spacing={3}>
<Grid item xs={12}>
<Typography variant="body1" component="div">
Laboratorium Result
Pemeriksaan Penunjang
</Typography>
</Grid>
<Grid item xs={6}>
@@ -598,7 +598,7 @@ export default function DetailMonitoringList() {
</Grid>
<Grid item xs={12}>
<Typography variant="body1" component="div">
Laboratorium Result
Pemeriksaan Penunjang
</Typography>
</Grid>
<Grid item xs={12}>

View File

@@ -1,7 +1,10 @@
import { Card, Typography } from "@mui/material";
import { Card, IconButton, Typography } from "@mui/material";
import { Stack } from '@mui/material';
import { DetailFinalLogType } from "../FinalLog/Model/Types";
import { fDate, fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import { Button } from "@mui/material";
import AddIcon from '@mui/icons-material/Add';
import { Delete } from "@mui/icons-material";
type CardDetail = {
@@ -26,25 +29,40 @@ const marginBottom2 = {
export default function CardFile({requestLog} : CardDetail ) {
return (
<Card sx={{padding:2}} >
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 4}}>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files </Typography>
{requestLog?.files?.map((documentType, index) => (
<Stack direction="column" spacing={2} key={index}>
<Stack direction="row" spacing={1} sx={{color: '#19BBBB'}}>
<a
href={documentType.url}
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
target="_blank"
>
<Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
</a>
</Stack>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files </Typography>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
// setDialogMedicine(true)
}} >
<Typography variant="button" display="block">Files</Typography>
</Button>
</Stack>
</Stack>
{requestLog?.files?.map((documentType, index) => (
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 2}} key={index}>
<Stack direction="column" spacing={2} >
<a
href={documentType.url}
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
target="_blank"
>
<Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
</a>
</Stack>
))}
</Stack>
</Stack>
<Stack direction="column" spacing={2}>
<IconButton onClick={() => {}} aria-label="delete" size="small" sx={{ marginLeft: 'auto' }}>
<Delete color='error' fontSize="small" />
</IconButton>
</Stack>
</Stack>
))}
</Card>
)
}

View File

@@ -0,0 +1,144 @@
import MuiDialog from "@/components/MuiDialog";
import { Autocomplete, Button, Card, Checkbox, DialogActions, Grid, Typography } from "@mui/material";
import { Paper } from "@mui/material";
import { Stack } from '@mui/material';
import React, { useEffect, useState } from 'react';
import { fDateTimesecond, toTitleCase } from "@/utils/formatTime";
import axios from "@/utils/axios";
import { enqueueSnackbar } from "notistack";
import { useNavigate } from "react-router";
import { TextField } from "@mui/material";
type DialogDeleteType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
id: number|undefined;
path: string;
}
export default function DialogDeleteFileLog({id, path, setOpenDialog, openDialog,onSubmit} : DialogDeleteType ) {
const style1 = {
color: '#919EAB',
width: '30%'
}
const style2 = {
width: '70%'
}
const marginBottom2 = {
marginBottom: 2,
}
const handleCloseDialog = () => {
setOpenDialog(false);
resetForm();
}
const [isReasonSelected, setIsReasonSelected] = useState(false);
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 [formData, setFormData] = useState({
path: path,
reason: null
});
const resetForm = () => {
setFormData({
reason: null,
path: path
});
};
useEffect(() => {
// Update formData setiap kali approve berubah
setFormData(prevData => ({
...prevData,
path: path || '',
}));
}, [path]);
const handleChange = (field, value) => {
setFormData((prevData) => ({
...prevData,
[field]: value,
}));
if (field === 'reason') {
setIsReasonSelected(!!value);
}
};
const handleSubmit = () => {
if (isReasonSelected && formData.reason !== '') {
console.log(formData)
axios
.post(`customer-service/request/${id}/delete_file`, formData)
.then((response) => {
enqueueSnackbar('File LOG has Deleted', { variant: 'success' });
setOpenDialog(false);
window.location.reload()
})
.catch(({ response }) => {
enqueueSnackbar(response.data.message ?? 'Something went wrong!', { variant: 'error' });
});
} else {
setIsReasonSelected(false);
alert('Silakan pilih alasan sebelum menghapus data.');
}
}
const getContent = () => (
<Stack spacing={1} marginTop={2}>
<Typography variant="subtitle2">Are you sure to delete this file Final LOG ?</Typography>
<Grid item xs={12} md={12} marginTop={4}>
<Card sx={{padding:2, marginTop:2}} >
<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="error" variant="contained" onClick={handleSubmit}>Delete</Button>
</DialogActions>
</Stack>
);
return (
<MuiDialog
title={{name: "Delete File Final LOG"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="xs"
/>
);
}

View File

@@ -0,0 +1,322 @@
import { styled } from '@mui/material/styles';
import Iconify from '@/components/Iconify';
import { fCurrency } from '@/utils/formatNumber';
import { LoadingButton } from '@mui/lab';
import { Avatar, Button, Divider, LinearProgress, linearProgressClasses, ButtonBase, Box } from '@mui/material';
import { Card } from '@mui/material';
import { Stack, Typography } from '@mui/material';
import { fPostFormat } from '@/utils/formatTime';
import axios from '@/utils/axios';
import { enqueueSnackbar } from 'notistack';
import { useRef, useState, useContext, useEffect } from 'react';
import { makeFormData } from '@/utils/jsonToFormData';
import { format } from 'date-fns';
// import { LanguageContext } from '@/contexts/LanguageContext';
import { DatePicker, LocalizationProvider, MobileDatePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import TextField from '@mui/material/TextField';
import MuiDialog from '@/components/MuiDialog';
type DialogUploadType = {
openDialog: boolean;
setOpenDialog: any;
onSubmit?: void;
id: number|undefined;
}
export default function DialogUploadFileFinalLog({ id, openDialog, setOpenDialog }: DialogUploadType) {
// ----------------------------------------------------------------------
// Files Diagnosa
const fileDiagnosaInput = useRef<HTMLInputElement>(null);
const [fileDiagnosas, setFileDiagnosas] = useState<any>([]);
const handleDiagnosaInputChange = (event:any) => {
if (event.target.files[0]) {
setFileDiagnosas([...fileDiagnosas, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeDiagnosaFiles = (filesState:any, index:any) => {
setFileDiagnosas(
filesState.filter((file:any, fileIndex:any) => {
return fileIndex != index;
})
);
};
// ----------------------------------------------------------------------
// Files Result Kondisi
const fileKondisiInput = useRef<HTMLInputElement>(null);
const [fileKondisis, setFileKondisis] = useState<any>([]);
const handleKondisiInputChange = (event:any) => {
if (event.target.files[0]) {
setFileKondisis([...fileKondisis, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeKondisiFiles = (filesState:any, index:any) => {
setFileKondisis(
filesState.filter((file:any, fileIndex:any) => {
return fileIndex != index;
})
);
};
// ----------------------------------------------------------------------
// Files Result Hasil Penunjang
const fileHasilPenunjangInput = useRef<HTMLInputElement>(null);
const [fileHasilPenunjangs, setFileHasilPenunjangs] = useState<any>([]);
const handleResultInputChange = (event:any) => {
if (event.target.files[0]) {
setFileHasilPenunjangs([...fileHasilPenunjangs, ...event.target.files]);
} else {
console.log('NO FILE');
}
};
const removeFiles = (filesState:any, index:any) => {
setFileHasilPenunjangs(
filesState.filter((file:any, fileIndex:any) => {
return fileIndex != index;
})
);
};
// --------------------------------------------------------------
// Submit Form
const [submitLoading, setSubmitLoading] = useState(false);
function submitRequestFinalLog() {
setSubmitLoading(true);
const formData = makeFormData({
request_logs_id: id,
result_files: fileHasilPenunjangs,
diagnosa_files: fileDiagnosas,
kondisi_files: fileKondisis,
});
axios
.post(`/customer-service/request/${id}/add_file`, formData)
.then((response) => {
enqueueSnackbar('Berhasil membuat data', { variant: 'success' });
setOpenDialog(false);
window.location.reload()
})
.catch(({ response }) => {
enqueueSnackbar('Something Went Wrong', { variant: 'error' });
})
.then(() => {
setSubmitLoading(false);
});
}
const getContent = () => (
<Stack>
<Stack
divider={<Divider orientation="horizontal" flexItem />}
spacing={4}
sx={{ marginY: 2, marginBottom: 6 }}
>
{/* -------------------------------Upload Dokumen Kondisi------------------------------- */}
<Stack sx={{ marginTop: 2 }}>
<Typography variant="body1" sx={{fontWeight:'bold'}}>
File Kondisi
</Typography>
{/* <Typography variant="body2">Hasil Lab, </Typography> */}
<Stack
divider={<Divider orientation="horizontal" flexItem />}
spacing={1}
sx={{ marginY: 2 }}
>
{fileKondisis &&
fileKondisis.map((file:any, index:any) => (
<Stack direction="row" justifyContent={'space-between'} key={index}>
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeKondisiFiles(fileKondisis, index);
}}
></Iconify>
</Stack>
))}
</Stack>
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileKondisiInput.current?.click()}>
<Box
sx={{
display: 'flex',
placeItems: 'center',
gap: 1,
placeContent: 'center',
}}
>
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
<Typography variant="body1" fontWeight="bold">
Upload
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileKondisiInput}
style={{ display: 'none' }}
multiple
onChange={handleKondisiInputChange}
accept="application/pdf,image/*"
/>
</ButtonBase>
</Stack>
{/* -------------------------------Upload Dokumen Diagnosa------------------------------- */}
<Stack sx={{ marginTop: 2 }}>
<Typography variant="body1" sx={{fontWeight:'bold'}}>
File Diagnosa
</Typography>
{/* <Typography variant="body2">Hasil Lab, </Typography> */}
<Stack
divider={<Divider orientation="horizontal" flexItem />}
spacing={1}
sx={{ marginY: 2 }}
>
{fileDiagnosas &&
fileDiagnosas.map((file:any, index:any) => (
<Stack direction="row" justifyContent={'space-between'} key={index}>
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeDiagnosaFiles(fileDiagnosas, index);
}}
></Iconify>
</Stack>
))}
{/* <Stack direction="row" justifyContent={'space-between'}>
<Typography>Nama File .pdf</Typography>
<Iconify icon="eva:trash-2-outline" color={'darkred'}></Iconify>
</Stack> */}
</Stack>
{/* { JSON.stringify(filesResult) } */}
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileDiagnosaInput.current?.click()}>
<Box
sx={{
display: 'flex',
placeItems: 'center',
gap: 1,
placeContent: 'center',
}}
>
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
<Typography variant="body1" fontWeight="bold">
Upload
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileDiagnosaInput}
style={{ display: 'none' }}
multiple
onChange={handleDiagnosaInputChange}
accept="application/pdf,image/*"
/>
</ButtonBase>
</Stack>
{/* -------------------------------Upload Dokumen Hasil Penunjang------------------------------- */}
<Stack sx={{ marginTop: 2 }}>
<Typography variant="body1" sx={{fontWeight:'bold'}}>
File Hasil Penunjang
</Typography>
{/* <Typography variant="body2">Hasil Lab, </Typography> */}
<Stack
divider={<Divider orientation="horizontal" flexItem />}
spacing={1}
sx={{ marginY: 2 }}
>
{fileHasilPenunjangs &&
fileHasilPenunjangs.map((file:any, index:any) => (
<Stack direction="row" justifyContent={'space-between'} key={index}>
<Typography sx={{ color: "text.secondary" }}>{file.name}</Typography>
<Iconify
icon="eva:trash-2-outline"
color={'darkred'}
onClick={() => {
removeFiles(fileHasilPenunjangs, index);
}}
></Iconify>
</Stack>
))}
{/* <Stack direction="row" justifyContent={'space-between'}>
<Typography>Nama File .pdf</Typography>
<Iconify icon="eva:trash-2-outline" color={'darkred'}></Iconify>
</Stack> */}
</Stack>
{/* { JSON.stringify(filesResult) } */}
<ButtonBase sx={{ p: 4, border: '2px dashed #F9FAFB',
bgcolor: '#919EAB52',
borderRadius: '8px',
width: '100%', height: '60px'}} onClick={() => fileHasilPenunjangInput.current?.click()}>
<Box
sx={{
display: 'flex',
placeItems: 'center',
gap: 1,
placeContent: 'center',
}}
>
<Iconify icon="icon-park-outline:upload-one" fontSize="3em" />
<Typography variant="body1" fontWeight="bold">
Upload
</Typography>
</Box>
<input
type="file"
id="file"
ref={fileHasilPenunjangInput}
style={{ display: 'none' }}
multiple
onChange={handleResultInputChange}
accept="application/pdf,image/*"
/>
</ButtonBase>
</Stack>
</Stack>
<LoadingButton
variant="contained"
sx={{ marginTop: 2, p: 2, backgroundColor: '#19BBBB' }}
onClick={() => {
submitRequestFinalLog();
}}
loading={submitLoading}
>
Upload File
</LoadingButton>
</Stack>
)
return (
<MuiDialog
title={{name: "Upload Final LOG"}}
openDialog={openDialog}
setOpenDialog={setOpenDialog}
content={getContent()}
maxWidth="md"
/>
);
}

View File

@@ -55,6 +55,8 @@ import palette from '@/theme/palette';
import CardMedicine from '../Components/CardMedicine';
import CardFile from '../Components/CardFile';
import DialogEditFinalLOG from './Components/DialogEditFinalLOG';
import DialogDeleteFileLog from './Components/DialogDeleteFileLog';
import DialogUploadFileFinalLog from './Components/DialogUploadFileFinalLog';
// ----------------------------------------------------------------------
@@ -131,6 +133,12 @@ export default function Detail() {
return accumulator + (item.excess_paid || 0);
}, 0);
// Handle Delete File LOG
const [pathFile, setPathFile] = useState('')
const [dialogDeleteFIleLog, setDialogDeleteFileLog] = useState(false)
// Handle Upload File LOG
const [dialogUploadFileLog, setDialogUploadFileLog] = useState(false)
return (
<Page title='Detail'>
@@ -260,27 +268,6 @@ export default function Detail() {
</CardExclusion> */}
</Grid>
{/* Hospital Care */}
{/* <Grid item xs={12} md={12}>
<Card sx={{padding:2}} >
<Stack direction="row" alignItems="center" sx={{marginBottom: 4}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>History of Hospital Care</Typography>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
setDialogHospital(true);
}} >
<Typography variant="button" display="block">History</Typography>
</Button>
</Stack>
</Card>
<DialogHospitalCare
requestLog={requestLog}
openDialog={openDialogHospital}
setOpenDialog={setDialogHospital}
>
</DialogHospitalCare>
</Grid> */}
{/* Benefit */}
<Grid item xs={12} md={12}>
<Card sx={{padding:2}} >
@@ -595,9 +582,54 @@ export default function Detail() {
{/* File */}
<Grid item xs={12} md={12}>
<CardFile
requestLog={requestLog}
/>
<Card sx={{padding:2}} >
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 4}}>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
<Typography variant='subtitle1' sx={{color: '#19BBBB'}} gutterBottom>Files </Typography>
</Stack>
<Stack direction="column" spacing={2} sx={{marginBottom: 2}}>
<Button variant="outlined" startIcon={<AddIcon/>} sx={{marginLeft: 'auto'}} onClick={() => {
setDialogUploadFileLog(true)
}} >
<Typography variant="button" display="block">Files</Typography>
</Button>
</Stack>
</Stack>
{requestLog?.files?.map((documentType, index) => (
<Stack direction="row" alignItems="center" justifyContent="space-between" sx={{marginBottom: 2}} key={index}>
<Stack direction="column" spacing={2} >
<a
href={documentType.url}
style={{ cursor: 'pointer', textDecoration: 'none', color: '#19BBBB' }}
target="_blank"
>
<Typography variant="body2" gutterBottom>{documentType.original_name ? documentType.original_name : '-'}</Typography>
</a>
</Stack>
<Stack direction="column" spacing={2}>
<IconButton onClick={() => {
setDialogDeleteFileLog(true)
setPathFile(documentType.path)
}} aria-label="delete" size="small" sx={{ marginLeft: 'auto' }}>
<Delete color='error' fontSize="small" />
</IconButton>
</Stack>
</Stack>
))}
<DialogDeleteFileLog
id={requestLog?.id}
path={pathFile}
setOpenDialog={setDialogDeleteFileLog}
openDialog={dialogDeleteFIleLog}
/>
<DialogUploadFileFinalLog
id={requestLog?.id}
setOpenDialog={setDialogUploadFileLog}
openDialog={dialogUploadFileLog}
/>
</Card>
</Grid>
{requestLog?.status_final_log == 'requested' ? (