finished dokter / admin almost done
This commit is contained in:
kicap1992
@ -158,7 +158,41 @@ function AppBarAdmin(props) {
|
||||
};
|
||||
|
||||
|
||||
|
||||
async function logout(){
|
||||
try{
|
||||
const url = process.env.HTTP_URL + "/api/login/logout";
|
||||
const response = await fetch(url, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'allow-cors-origin': '*',
|
||||
'crossDomain': true,
|
||||
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||
},
|
||||
})
|
||||
// get response
|
||||
const data_response = await response.json()
|
||||
console.log(data_response, "ini data response")
|
||||
// console.log(data, "ini data dari cek dokter")
|
||||
if (response.status === 200) {
|
||||
// create toast
|
||||
Router.push('/')
|
||||
return true
|
||||
} else if (response.status === 400) {
|
||||
Router.push('/')
|
||||
return false
|
||||
} else {
|
||||
// create toast
|
||||
Router.push('/')
|
||||
return false
|
||||
}
|
||||
|
||||
}catch (err){
|
||||
Router.push('/')
|
||||
console.log(err)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const renderMenu = (
|
||||
<Menu
|
||||
@ -177,7 +211,12 @@ function AppBarAdmin(props) {
|
||||
onClose={handleMenuClose}
|
||||
>
|
||||
<MenuItem onClick={handleMenuClose}>Profile</MenuItem>
|
||||
<MenuItem onClick={handleMenuClose}>My account</MenuItem>
|
||||
<MenuItem onClick={
|
||||
() => {
|
||||
logout()
|
||||
handleMenuClose()
|
||||
}
|
||||
}>Logout</MenuItem>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
@ -188,8 +227,8 @@ function AppBarAdmin(props) {
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<>
|
||||
|
||||
<AppBar position="fixed" open={open} >
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
@ -296,7 +335,7 @@ function AppBarAdmin(props) {
|
||||
|
||||
|
||||
</Drawer>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
658
components/admin/dialogEditPasien.js
Normal file
658
components/admin/dialogEditPasien.js
Normal file
@ -0,0 +1,658 @@
|
||||
import { useRef, useState, forwardRef, useEffect } from 'react'
|
||||
import Router from 'next/router';
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from '@mui/material/Button';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
// this is for number format
|
||||
import NumberFormat from 'react-number-format';
|
||||
|
||||
import moment from "moment"; //for converting date and time
|
||||
|
||||
// select
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import Select from '@mui/material/Select';
|
||||
import Divider from '@mui/material/Divider';
|
||||
|
||||
// ini untuk date time picker
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
import { DatePicker } from '@mui/x-date-pickers/DatePicker';
|
||||
|
||||
// sweet alert
|
||||
import Swal from 'sweetalert2'
|
||||
import withReactContent from 'sweetalert2-react-content'
|
||||
const MySwal = withReactContent(Swal)
|
||||
|
||||
// ini untuk number
|
||||
const NumberFormatCustom = forwardRef(function NumberFormatCustom(props, ref) {
|
||||
const { onChange, ...other } = props;
|
||||
|
||||
return (
|
||||
<NumberFormat
|
||||
{...other}
|
||||
getInputRef={ref}
|
||||
onValueChange={(values) => {
|
||||
onChange({
|
||||
target: {
|
||||
name: props.name,
|
||||
value: values.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
// thousandSeparator
|
||||
isNumericString
|
||||
// prefix="08"
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
const NumberFormatCustomNIK = forwardRef(function NumberFormatCustom(props, ref) {
|
||||
const { onChange, ...other } = props;
|
||||
|
||||
return (
|
||||
<NumberFormat
|
||||
{...other}
|
||||
getInputRef={ref}
|
||||
onValueChange={(values) => {
|
||||
onChange({
|
||||
target: {
|
||||
name: props.name,
|
||||
value: values.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
// thousandSeparator
|
||||
isNumericString
|
||||
// prefix="08"
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
|
||||
'& .MuiDialogContent-root': {
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
'& .MuiDialogActions-root': {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
const BootstrapDialogTitle = (props) => {
|
||||
const { children, onClose, ...other } = props;
|
||||
|
||||
return (
|
||||
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
|
||||
{children}
|
||||
{onClose ? (
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: (theme) => theme.palette.grey[500],
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</DialogTitle>
|
||||
);
|
||||
};
|
||||
|
||||
BootstrapDialogTitle.propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
function DialogEditPasien(props) {
|
||||
// console.log(props, "sini dialog edit pasien");
|
||||
|
||||
// create new let no and remove index 0 and 1 from props.dataPasien.no_telp
|
||||
// let no =
|
||||
// const ini_nik = props.openit ? props.dataPasien.nik : '';
|
||||
|
||||
const [datanya, setData] = useState({});
|
||||
const nikInputRef = useRef();
|
||||
const no_telpInputRef = useRef();
|
||||
useEffect(() => {
|
||||
setData(props.dataPasienPeriksa);
|
||||
},[props.dataPasienPeriksa])
|
||||
|
||||
|
||||
const updatePasien = async (e) => {
|
||||
e.preventDefault();
|
||||
// let no_telpBaru = "08" + datanya.no_telp
|
||||
if (datanya.nik.length < 16) {
|
||||
props.toastnya('NIK harus 16 digit', false)
|
||||
// focus to nik
|
||||
nikInputRef.current.focus();
|
||||
} else if (datanya.no_telp.length < 11) {
|
||||
props.toastnya('No Telpon minimal harus 11 digit', false)
|
||||
// focus to nik
|
||||
no_telpInputRef.current.focus();
|
||||
}else if(datanya.no_telp[0] != "0" && datanya.no_telp[0] != "8"){
|
||||
props.toastnya('No Telpon harus diawali dengan 08 atau 0', false)
|
||||
// focus to nik
|
||||
no_telpInputRef.current.focus();
|
||||
}
|
||||
|
||||
else{
|
||||
// props.toastnya('HEHEHEH LAMANYA', true)
|
||||
props.setClose(datanya,true)
|
||||
props.sweetalertnya(true);
|
||||
await MySwal.fire({
|
||||
title: 'Yakin ?',
|
||||
text: `Detail pasien dengan nik ${datanya.nik} akan diedit`,
|
||||
icon: 'info',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, edit!'
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
props.backdropnya(true);
|
||||
|
||||
// await 4 second
|
||||
// await new Promise(resolve => setTimeout(resolve, 4000));
|
||||
await confirm_update_data();
|
||||
}else{
|
||||
props.setOpenAgain()
|
||||
|
||||
}
|
||||
})
|
||||
props.backdropnya(false);
|
||||
props.sweetalertnya(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function confirm_update_data(){
|
||||
try{
|
||||
const url = process.env.HTTP_URL + "/api/admin/pasien?nik=" + datanya.nik;
|
||||
const response = await fetch(url, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'allow-cors-origin': '*',
|
||||
'crossDomain': true,
|
||||
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||
},
|
||||
body: JSON.stringify(datanya)
|
||||
})
|
||||
|
||||
const data = await response.json();
|
||||
if(response.status == 200){
|
||||
props.toastnya('Data pasien berhasil diupdate', true)
|
||||
Router.replace(Router.asPath);
|
||||
}else{
|
||||
props.toastnya('Terjadi kesalahan, coba lagi', false)
|
||||
props.setOpenAgain()
|
||||
}
|
||||
}catch(err){
|
||||
console.log(err)
|
||||
props.toastnya('Terjadi kesalahan, coba lagi', false)
|
||||
props.setOpenAgain()
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// console.log(datanya, "ini data yang di edit");
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<BootstrapDialog
|
||||
onClose={
|
||||
() => {
|
||||
props.setClose()
|
||||
}
|
||||
}
|
||||
aria-labelledby="customized-dialog-title"
|
||||
open={props.openit}
|
||||
fullWidth={true}
|
||||
component="form"
|
||||
onSubmit={
|
||||
updatePasien
|
||||
}
|
||||
>
|
||||
<BootstrapDialogTitle id="customized-dialog-title" onClose={
|
||||
() => {
|
||||
props.setClose()
|
||||
}
|
||||
}>
|
||||
Data Pasien
|
||||
</BootstrapDialogTitle>
|
||||
<DialogContent dividers align="center"
|
||||
>
|
||||
<TextField
|
||||
disabled
|
||||
inputRef={nikInputRef}
|
||||
value={datanya.nik}
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
nik: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
id="nikTextField"
|
||||
label="NIK"
|
||||
placeholder="Masukkan NIK"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
InputProps={{
|
||||
inputComponent: NumberFormatCustomNIK,
|
||||
inputProps: {
|
||||
maxLength: 16,
|
||||
minLength: 16,
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<>
|
||||
<TextField
|
||||
required
|
||||
value={
|
||||
datanya.nama
|
||||
}
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
nama: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
id="namaEditTextField"
|
||||
label="Nama"
|
||||
placeholder="Masukkan Nama"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<InputLabel id="demo-simple-select-helper-label">Jenis Kelamin</InputLabel>
|
||||
<Select
|
||||
required
|
||||
labelId="demo-simple-select-helper-label"
|
||||
id="jenisKelaminSelectEdit"
|
||||
value={
|
||||
datanya.jenis_kelamin
|
||||
}
|
||||
label="Jenis"
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
jenis_kelamin: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
>
|
||||
<MenuItem value="" disabled>
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Laki-Laki"} selected={
|
||||
(datanya.jenis_kelamin === "Laki-Laki")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>Laki-Laki</MenuItem>
|
||||
<MenuItem value={"Perempuan"} selected={
|
||||
(datanya.jenis_kelamin == "Perempuan")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>Perempuan</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<DatePicker
|
||||
maxDate={new Date()}
|
||||
label="Tanggal Lahir"
|
||||
value={
|
||||
datanya.tgl_lahir
|
||||
}
|
||||
onChange={(newValue) => {
|
||||
console.log(newValue);
|
||||
setData({
|
||||
...datanya,
|
||||
tgl_lahir: moment(newValue).format('YYYY-MM-DD'),
|
||||
})
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
required
|
||||
value={
|
||||
datanya.alamat
|
||||
}
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
alamat: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
id="alamatTextFieldEdit"
|
||||
label="Alamat"
|
||||
placeholder="Masukkan Alamat"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
/>
|
||||
</>
|
||||
<>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
required
|
||||
value={
|
||||
datanya.pekerjaan
|
||||
}
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
pekerjaan: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
id="pekerjaanTextFieldEdit"
|
||||
label="Pekerjaan"
|
||||
placeholder="Masukkan Pekerjaan"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<InputLabel id="demo-simple-select-helper-label">Golongan Darah</InputLabel>
|
||||
<Select
|
||||
required
|
||||
labelId="demo-simple-select-helper-label"
|
||||
id="golonganDarahSelect"
|
||||
value={
|
||||
datanya.golongan_darah
|
||||
}
|
||||
label="Jenis"
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
golongan_darah: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
>
|
||||
<MenuItem value="" disabled>
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value={"O+"} selected={
|
||||
(datanya.golongan_darah == "O+")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>O+</MenuItem>
|
||||
<MenuItem value={"O-"} selected={
|
||||
(datanya.golongan_darah == "O-")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>O-</MenuItem>
|
||||
<MenuItem value={"A+"} selected={
|
||||
(datanya.golongan_darah == "A+")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>A+</MenuItem>
|
||||
<MenuItem value={"A-"} selected={
|
||||
(datanya.golongan_darah == "A-")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>A-</MenuItem>
|
||||
<MenuItem value={"B+"} selected={
|
||||
(datanya.golongan_darah == "B+")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>B+</MenuItem>
|
||||
<MenuItem value={"B-"} selected={
|
||||
(datanya.golongan_darah == "B-")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>B-</MenuItem>
|
||||
<MenuItem value={"AB+"} selected={
|
||||
(datanya.golongan_darah == "AB+")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>AB+</MenuItem>
|
||||
<MenuItem value={"AB-"} selected={
|
||||
(datanya.golongan_darah == "AB-")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>AB-</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<InputLabel id="demo-simple-select-helper-label">Pendidikan</InputLabel>
|
||||
<Select
|
||||
required
|
||||
labelId="demo-simple-select-helper-label"
|
||||
id="pendidikanSelect"
|
||||
value={
|
||||
datanya.pendidikan
|
||||
}
|
||||
label="Jenis"
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
pendidikan: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
>
|
||||
<MenuItem value="" selected disabled>
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Tiada"} selected={
|
||||
(datanya.pendidikan == "Tiada")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>Tiada</MenuItem>
|
||||
<MenuItem value={"SD"} selected={
|
||||
(datanya.pendidikan == "SD")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>SD</MenuItem>
|
||||
<MenuItem value={"SMP"} selected={
|
||||
(datanya.pendidikan == "SMP")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>SMP</MenuItem>
|
||||
<MenuItem value={"SMA"} selected={
|
||||
(datanya.pendidikan == "SMA")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>SMA</MenuItem>
|
||||
<MenuItem value={"Perguruan Tinggi"} selected={
|
||||
(datanya.pendidikan == "Perguruan Tinggi")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>Perguruan Tinggi</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
inputRef={no_telpInputRef}
|
||||
required
|
||||
value={
|
||||
datanya.no_telp
|
||||
}
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
no_telp: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
id="NoTelpTextField"
|
||||
label="No Telpon"
|
||||
placeholder="Masukkan No Telpon"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
InputProps={{
|
||||
inputComponent: NumberFormatCustom,
|
||||
inputProps: {
|
||||
maxLength: 13,
|
||||
minLength: 11,
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<InputLabel id="demo-simple-select-helper-label">Status Pernikahan</InputLabel>
|
||||
<Select
|
||||
required
|
||||
labelId="demo-simple-select-helper-label"
|
||||
id="statusPernikahanSelect"
|
||||
value={
|
||||
datanya.status_pernikahan
|
||||
}
|
||||
label="Jenis"
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
status_pernikahan: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
>
|
||||
<MenuItem value="" disabled>
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Bujang"} selected={
|
||||
(datanya.status_pernikahan == "Bujang")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>Bujang</MenuItem>
|
||||
<MenuItem value={"Telah Menikah"} selected={
|
||||
(datanya.status_pernikahan == "Telah Menikah")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>Telah Menikah</MenuItem>
|
||||
<MenuItem value={"Duda"} selected={
|
||||
(datanya.status_pernikahan == "Duda")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>Duda</MenuItem>
|
||||
<MenuItem value={"Janda"} selected={
|
||||
(datanya.status_pernikahan == "Janda")
|
||||
?
|
||||
true
|
||||
:
|
||||
false
|
||||
}>Janda</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
required
|
||||
value={
|
||||
datanya.nama_orang_tua_wali
|
||||
}
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
nama_orang_tua_wali: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
id="namaOrangTuaWaliTextField"
|
||||
label="Nama Orang Tua / Wali"
|
||||
placeholder="Masukkan Nama Orang Tua / Wali"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
required
|
||||
value={
|
||||
datanya.nama_pasangan
|
||||
}
|
||||
onChange={
|
||||
(e) => {
|
||||
setData({
|
||||
...datanya,
|
||||
nama_pasangan: e.target.value,
|
||||
})
|
||||
}
|
||||
}
|
||||
id="namaPasanganTextField"
|
||||
label="Nama Pasangan"
|
||||
placeholder="Masukkan Nama Pasangan"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
/>
|
||||
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
</>
|
||||
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button type="submit" variant="outlined" color="primary">
|
||||
Save changes
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</BootstrapDialog>
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default DialogEditPasien;
|
||||
1116
components/admin/dialogLihatJadwalPasien.js
Normal file
1116
components/admin/dialogLihatJadwalPasien.js
Normal file
File diff suppressed because it is too large
Load Diff
601
components/admin/tabelDokter.js
Normal file
601
components/admin/tabelDokter.js
Normal file
@ -0,0 +1,601 @@
|
||||
import { useState, useRef, forwardRef } from 'react';
|
||||
// import { useTheme } from '@mui/material';
|
||||
import { useTheme } from '@mui/system';
|
||||
import { useMediaQuery } from '@mui/material';
|
||||
// for table
|
||||
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
|
||||
// button icon
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import ModeEditIcon from '@mui/icons-material/ModeEdit';
|
||||
import DisabledByDefaultIcon from '@mui/icons-material/DisabledByDefault';
|
||||
import EventAvailableIcon from '@mui/icons-material/EventAvailable';
|
||||
|
||||
// for dialog box
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import Button from '@mui/material/Button';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import Select from '@mui/material/Select';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
|
||||
|
||||
// this is for number format
|
||||
import NumberFormat from 'react-number-format';
|
||||
|
||||
// this is for circular progress
|
||||
import CircularProgress from '@mui/material/CircularProgress';
|
||||
|
||||
// for edit jadwal dialog
|
||||
import DialogContentText from '@mui/material/DialogContentText';
|
||||
|
||||
// for table
|
||||
import Paper from '@mui/material/Paper';
|
||||
import Table from '@mui/material/Table';
|
||||
import TableBody from '@mui/material/TableBody';
|
||||
import TableContainer from '@mui/material/TableContainer';
|
||||
import TableHead from '@mui/material/TableHead';
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
backgroundColor: theme.palette.primary.main,
|
||||
color: theme.palette.common.white,
|
||||
}
|
||||
}));
|
||||
|
||||
// this for dialog jadwal
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import Slide from '@mui/material/Slide';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import TabelJadwalDokter from './tabelJadwalDokter';
|
||||
const Transition = forwardRef(function Transition(props, ref) { // for modal history
|
||||
return <Slide direction="up" ref={ref} {...props} />;
|
||||
});
|
||||
|
||||
|
||||
// ini untuk number
|
||||
const NumberFormatCustom = forwardRef(function NumberFormatCustom(props, ref) {
|
||||
const { onChange, ...other } = props;
|
||||
|
||||
return (
|
||||
<NumberFormat
|
||||
{...other}
|
||||
getInputRef={ref}
|
||||
onValueChange={(values) => {
|
||||
onChange({
|
||||
target: {
|
||||
name: props.name,
|
||||
value: values.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
// thousandSeparator
|
||||
isNumericString
|
||||
prefix="08"
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
const NumberFormatCustomNIK = forwardRef(function NumberFormatCustom(props, ref) {
|
||||
const { onChange, ...other } = props;
|
||||
|
||||
return (
|
||||
<NumberFormat
|
||||
{...other}
|
||||
getInputRef={ref}
|
||||
onValueChange={(values) => {
|
||||
onChange({
|
||||
target: {
|
||||
name: props.name,
|
||||
value: values.value,
|
||||
},
|
||||
});
|
||||
}}
|
||||
// thousandSeparator
|
||||
isNumericString
|
||||
// prefix="08"
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
|
||||
const BootstrapDialog = styled(Dialog)(({ theme }) => ({ // for modal edit
|
||||
'& .MuiDialogContent-root': {
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
'& .MuiDialogActions-root': {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
}))
|
||||
|
||||
const BootstrapDialogTitle = (props) => { // for modal edit
|
||||
const { children, onClose, ...other } = props;
|
||||
|
||||
return (
|
||||
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
|
||||
{children}
|
||||
{onClose ? (
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: (theme) => theme.palette.grey[500],
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</DialogTitle>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
function TabelDokterAll(props) {
|
||||
// console.log(props.dataDokterAll, "ini di bagian tabel all");
|
||||
const url = process.env.HTTP_URL + "/api/admin/dokter"; // ini url
|
||||
|
||||
const namaInputRef = useRef();
|
||||
const [nik, setNik] = useState('');
|
||||
const [nama, setNama] = useState('');
|
||||
const [alamat, setAlamat] = useState('');
|
||||
const noTelpInputRef = useRef();
|
||||
const [noTelp, setNoTelp] = useState('');
|
||||
const [spesialis, setSpesialis] = useState('');
|
||||
|
||||
|
||||
// for dialog box
|
||||
const [dataDokterEdit, setDataDokterEdit] = useState({});
|
||||
const [headerDialog, setHeaderDialog] = useState('');
|
||||
const [openModalEdit, setOpenModalEdit] = useState(false);
|
||||
const [isGet, setIsGet] = useState(false);
|
||||
const handleClickOpenModalEdit = () => {
|
||||
|
||||
setOpenModalEdit(true);
|
||||
};
|
||||
const handleCloseModalEdit = (event, reason) => {
|
||||
if (reason && reason == "backdropClick")
|
||||
return;
|
||||
setOpenModalEdit(false);
|
||||
};
|
||||
|
||||
// for dialog jadwal
|
||||
const [dataJadwal, setDataJadwal] = useState([]);
|
||||
const [openJadwalModal, setOpenJadwalModal] = useState(false);
|
||||
const handleCloseModalJadwal = () => {
|
||||
setBukaJadwal(false)
|
||||
setOpenJadwalModal(false);
|
||||
setHariTambahEdit('');
|
||||
setJamMulaiTambahEdit(null);
|
||||
setJamSelesaiTambahEdit(null);
|
||||
|
||||
};
|
||||
const handleClickOpenModalJadwal = async (id) => {
|
||||
setIsLoadingDataJadwal
|
||||
console.log(id)
|
||||
setNik(id);
|
||||
setOpenJadwalModal(true);
|
||||
// await 3 sec
|
||||
// await new Promise(resolve => setTimeout(resolve, 3000));
|
||||
await cekJadwal(id);
|
||||
|
||||
// setOpenEditJadwal(true);
|
||||
};
|
||||
|
||||
// Edit Jadwal Dialog
|
||||
const harinya = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu", "Minggu"];
|
||||
const [openEditJadwal, setOpenEditJadwal] = useState(false);
|
||||
const theme = useTheme();
|
||||
const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
|
||||
const [isLoadingDataJadwal, setIsLoadingDataJadwal] = useState(false);
|
||||
const [bukaJadwal, setBukaJadwal] = useState(false);
|
||||
const [hariTambahEdit, setHariTambahEdit] = useState('');
|
||||
const [jamMulaiTambahEdit, setJamMulaiTambahEdit] = useState(null);
|
||||
const [jamSelesaiTambahEdit, setJamSelesaiTambahEdit] = useState(null);
|
||||
|
||||
const handleClickOpenEditJadwal = () => {
|
||||
setOpenEditJadwal(true);
|
||||
};
|
||||
|
||||
const handleCloseEditJadwal = () => {
|
||||
setOpenEditJadwal(false);
|
||||
};
|
||||
|
||||
async function edit_dokter(id) {
|
||||
setIsGet(false);
|
||||
try {
|
||||
const urlnya = `${url}?nik=${id}`;
|
||||
const response = await fetch(urlnya, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'allow-cors-origin': '*',
|
||||
'crossDomain': true,
|
||||
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||
}
|
||||
})
|
||||
// get response
|
||||
const data = await response.json()
|
||||
// console.log(data.data, "ini data dokter");
|
||||
|
||||
// props.toastnya("Berhasil mengambil data dokter");
|
||||
if (response.status === 200) {
|
||||
let theData = data.data
|
||||
// console.log(theData, "ini data dokter");
|
||||
setDataDokterEdit(theData);
|
||||
setHeaderDialog(theData.nama)
|
||||
setNik(theData.nik);
|
||||
setNama(theData.nama);
|
||||
setAlamat(theData.alamat);
|
||||
setNoTelp(theData.no_telp);
|
||||
setSpesialis(theData.spesialis);
|
||||
setIsGet(true);
|
||||
setOpenModalEdit(true);
|
||||
} else {
|
||||
props.toastnya("Data dokter tidak ditemukan");
|
||||
}
|
||||
} catch (error) {
|
||||
props.toastnya("Terjadi kesalahan");
|
||||
}
|
||||
handleClickOpenModalEdit();
|
||||
}
|
||||
|
||||
const beforeEditDokter = async () => {
|
||||
|
||||
if (nama == dataDokterEdit.nama && alamat == dataDokterEdit.alamat && noTelp == dataDokterEdit.no_telp && spesialis == dataDokterEdit.spesialis) {
|
||||
props.toastnya("Tidak ada perubahan");
|
||||
} else {
|
||||
let datanya = {
|
||||
nama,
|
||||
alamat,
|
||||
no_telp: noTelp,
|
||||
spesialis
|
||||
}
|
||||
handleCloseModalEdit()
|
||||
await props.editDokter(nik, datanya);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// console.log(nik, nama, alamat, noTelp, spesialis, dataDokterEdit, "ini data dokter");
|
||||
|
||||
}
|
||||
|
||||
async function cekJadwal(id) {
|
||||
try {
|
||||
let urlnya = `${url}?nik=${id}&detail=jadwal`;
|
||||
const response = await fetch(urlnya, {
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'allow-cors-origin': '*',
|
||||
'crossDomain': true,
|
||||
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||
}
|
||||
})
|
||||
// get response
|
||||
const data = await response.json()
|
||||
// console.log(data.data, "ini data dokter");
|
||||
setDataJadwal(data.data);
|
||||
// console.log(dataJadwal, "ini data jadwal");
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dialog
|
||||
fullScreen={fullScreen}
|
||||
open={openEditJadwal}
|
||||
onClose={handleCloseEditJadwal}
|
||||
aria-labelledby="responsive-dialog-title"
|
||||
>
|
||||
<DialogTitle id="responsive-dialog-title">
|
||||
{"Use Google's location service?"}
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText>
|
||||
Let Google help apps determine location. This means sending anonymous
|
||||
location data to Google, even when no apps are running.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button autoFocus onClick={handleCloseEditJadwal}>
|
||||
Disagree
|
||||
</Button>
|
||||
<Button onClick={handleCloseEditJadwal} autoFocus>
|
||||
Agree
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
<Dialog
|
||||
fullScreen
|
||||
open={openJadwalModal}
|
||||
onClose={handleCloseModalJadwal}
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<AppBar sx={{ position: 'relative' }}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
onClick={handleCloseModalJadwal}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
||||
Jadwal Dokter NIK {nik}
|
||||
</Typography>
|
||||
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
<Box component="main" sx={{ flexGrow: 0, p: 2 }}>
|
||||
<Grid container spacing={4}>
|
||||
<Grid item md={2}></Grid>
|
||||
<Grid item xs={12} md={8}>
|
||||
{
|
||||
isLoadingDataJadwal ?
|
||||
<Box textAlign="center" sx={{ paddingBottom: 7 }}><CircularProgress color="inherit" /></Box>
|
||||
: <div>
|
||||
<TableContainer component={Paper}>
|
||||
<Table aria-label="collapsible table" sx={{
|
||||
boxShadow: 3,
|
||||
"& .MuiTableCell-root": {
|
||||
borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
||||
}
|
||||
}}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<StyledTableCell>Hari</StyledTableCell>
|
||||
<StyledTableCell>Jam Masuk</StyledTableCell>
|
||||
<StyledTableCell>Jam Keluar</StyledTableCell>
|
||||
<StyledTableCell>Aksi</StyledTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
<TabelJadwalDokter dataJadwal={dataJadwal} harinya={harinya} niknya={nik}
|
||||
toastnya={
|
||||
(message, stat) => {
|
||||
props.toastnya(message, stat)
|
||||
}
|
||||
}
|
||||
|
||||
closeJadwal={handleCloseModalJadwal}
|
||||
backdropnya={
|
||||
(stat) => {
|
||||
props.backdropnya(stat)
|
||||
}
|
||||
}
|
||||
sweetAlertLoadingnya={
|
||||
(stat) => {
|
||||
props.sweetAlertLoadingnya(stat)
|
||||
}
|
||||
}
|
||||
openback={
|
||||
async (nik, hari, jam_mulai, jam_selesai,stat) => {
|
||||
// await 500 milisec
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
handleClickOpenModalJadwal(nik)
|
||||
setHariTambahEdit(hari)
|
||||
setJamMulaiTambahEdit(jam_mulai)
|
||||
setJamSelesaiTambahEdit(jam_selesai)
|
||||
if(stat){
|
||||
setBukaJadwal(true)
|
||||
}else{
|
||||
setBukaJadwal(false)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
bukaJadwal={
|
||||
bukaJadwal
|
||||
}
|
||||
jam_mulainya={jamMulaiTambahEdit}
|
||||
jam_selesainya={jamSelesaiTambahEdit}
|
||||
hari_nya={hariTambahEdit}
|
||||
/>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</div>
|
||||
}
|
||||
<Box sx={{ padding: "5px" }}></Box>
|
||||
<Box textAlign="center">
|
||||
<Button variant="contained" onClick={handleCloseModalJadwal}>Close Jadwal</Button>
|
||||
</Box>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
</Grid>
|
||||
<Grid item md={2}></Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Dialog>
|
||||
|
||||
|
||||
<BootstrapDialog
|
||||
onClose={handleCloseModalEdit}
|
||||
aria-labelledby="customized-dialog-title"
|
||||
open={openModalEdit}
|
||||
align="center"
|
||||
// maxWidth="lg"
|
||||
fullWidth={true}
|
||||
component="form"
|
||||
onSubmit={
|
||||
async (e) => {
|
||||
e.preventDefault();
|
||||
// await handleCloseModalEdit()
|
||||
beforeEditDokter()
|
||||
}
|
||||
}
|
||||
>
|
||||
<BootstrapDialogTitle id="customized-dialog-title" onClose={handleCloseModalEdit}>
|
||||
Edit Detail {isGet ? headerDialog : null}
|
||||
</BootstrapDialogTitle>
|
||||
<DialogContent dividers>
|
||||
<Box sx={{ padding: "5px" }}></Box>
|
||||
{
|
||||
isGet ?
|
||||
<>
|
||||
<TextField
|
||||
disabled
|
||||
|
||||
id="nikTextField"
|
||||
label="NIK"
|
||||
placeholder="Masukkan NIK"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
onChange={(e) => setNik(e.target.value)}
|
||||
InputProps={{
|
||||
inputComponent: NumberFormatCustomNIK,
|
||||
inputProps: {
|
||||
maxLength: 16,
|
||||
minLength: 16,
|
||||
}
|
||||
}}
|
||||
value={nik}
|
||||
name="nik"
|
||||
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
inputRef={namaInputRef}
|
||||
value={nama}
|
||||
onChange={(e) => setNama(e.target.value)}
|
||||
required
|
||||
id="namaTextField"
|
||||
label="Nama"
|
||||
placeholder="Masukkan Nama"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
value={alamat}
|
||||
onChange={(e) => setAlamat(e.target.value)}
|
||||
required
|
||||
id="alamatTextField"
|
||||
label="Alamat"
|
||||
placeholder="Masukkan Alamat"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
required
|
||||
inputRef={noTelpInputRef}
|
||||
onChange={(e) => setNoTelp(e.target.value)}
|
||||
id="NoTelpTextField"
|
||||
label="No Telpon"
|
||||
placeholder="Masukkan No Telpon"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
InputProps={{
|
||||
inputComponent: NumberFormatCustom,
|
||||
inputProps: {
|
||||
maxLength: 13,
|
||||
minLength: 11,
|
||||
}
|
||||
}}
|
||||
value={noTelp}
|
||||
name="jumlah"
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<InputLabel id="demo-simple-select-helper-label">Spesialis</InputLabel>
|
||||
<Select
|
||||
required
|
||||
labelId="demo-simple-select-helper-label"
|
||||
id="jenisSelect"
|
||||
value={spesialis}
|
||||
label="Jenis"
|
||||
onChange={
|
||||
(e) => { setSpesialis(e.target.value) }
|
||||
}
|
||||
>
|
||||
<MenuItem value="" selected disabled>
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value={"Spesialis 1"}>Spesialis 1</MenuItem>
|
||||
<MenuItem value={"Spesialis 2"}>Spesialis 2</MenuItem>
|
||||
<MenuItem value={"Spesialis 3"}>Spesialis 3</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
</>
|
||||
:
|
||||
<>
|
||||
<Box align="center">
|
||||
<CircularProgress color="inherit" />
|
||||
</Box>
|
||||
</>
|
||||
}
|
||||
|
||||
|
||||
|
||||
<Box sx={{ padding: "5px" }}></Box>
|
||||
|
||||
|
||||
|
||||
</DialogContent>
|
||||
{
|
||||
isGet ?
|
||||
<>
|
||||
<DialogActions>
|
||||
|
||||
<Button autoFocus variant="outlined" type='submit'>
|
||||
Simpan Perubahan
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</>
|
||||
: <></>
|
||||
}
|
||||
|
||||
</BootstrapDialog>
|
||||
|
||||
|
||||
{props.dataDokterAll.map((row, index) => (
|
||||
<TableRow
|
||||
key={"tablerowdokter" + index}
|
||||
>
|
||||
<TableCell component="th" scope="row">
|
||||
{row.nik}
|
||||
</TableCell>
|
||||
<TableCell>{row.nama}</TableCell>
|
||||
<TableCell>{row.spesialis}</TableCell>
|
||||
<TableCell>{row.no_telp}</TableCell>
|
||||
<TableCell>{row.status}</TableCell>
|
||||
<TableCell>
|
||||
<IconButton size="small" color="primary" onClick={() => edit_dokter(row.nik)}>
|
||||
<ModeEditIcon />
|
||||
</IconButton>
|
||||
<IconButton size="small" color="success" onClick={
|
||||
() => { handleClickOpenModalJadwal(row.nik) }
|
||||
}>
|
||||
<EventAvailableIcon />
|
||||
</IconButton>
|
||||
<IconButton size="small" color="error">
|
||||
<DisabledByDefaultIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default TabelDokterAll;
|
||||
310
components/admin/tabelJadwalDokter.js
Normal file
310
components/admin/tabelJadwalDokter.js
Normal file
@ -0,0 +1,310 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import TableCell from '@mui/material/TableCell';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
|
||||
// button icon
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import ModeEditIcon from '@mui/icons-material/ModeEdit';
|
||||
import DisabledByDefaultIcon from '@mui/icons-material/DisabledByDefault';
|
||||
|
||||
// for dialog
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from '@mui/material/Button';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import DialogContent from '@mui/material/DialogContent';
|
||||
import DialogActions from '@mui/material/DialogActions';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
// import Typography from '@mui/material/Typography';
|
||||
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
// for time select
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
|
||||
|
||||
// sweet alert
|
||||
import Swal from 'sweetalert2'
|
||||
import withReactContent from 'sweetalert2-react-content'
|
||||
const MySwal = withReactContent(Swal)
|
||||
|
||||
|
||||
|
||||
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
|
||||
'& .MuiDialogContent-root': {
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
'& .MuiDialogActions-root': {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
const BootstrapDialogTitle = (props) => {
|
||||
const { children, onClose, ...other } = props;
|
||||
|
||||
return (
|
||||
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
|
||||
{children}
|
||||
{onClose ? (
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: (theme) => theme.palette.grey[500],
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</DialogTitle>
|
||||
);
|
||||
};
|
||||
|
||||
BootstrapDialogTitle.propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
function TabelJadwalDokter(props) {
|
||||
// console.log(props, "ini props di dalam jadwal")
|
||||
const [nik, setNik] = useState('');
|
||||
// const [bukaJadwal , setBukaJadwal] = useState(false);
|
||||
const [openDialog, setOpenDialog] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setNik(props.niknya)
|
||||
|
||||
}, [props.niknya]);
|
||||
async function inbukajadwal() {
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
setOpenDialog(true)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (props.bukaJadwal) {
|
||||
inbukajadwal()
|
||||
}
|
||||
}, [props.bukaJadwal])
|
||||
|
||||
|
||||
|
||||
|
||||
const [hari, setHari] = useState('');
|
||||
|
||||
// for time select
|
||||
const jamMulaiInputRef = useRef();
|
||||
const jamSelesaiInputRef = useRef();
|
||||
const [jamMulai, setJamMulai] = useState(null);
|
||||
const [jamSelesai, setJamSelesai] = useState(null);
|
||||
|
||||
useEffect(() => {
|
||||
setHari(props.hari_nya)
|
||||
setJamMulai(props.jam_mulainya)
|
||||
setJamSelesai(props.jam_selesainya)
|
||||
}, [props.hari_nya, props.jam_mulainya, props.jam_selesainya])
|
||||
|
||||
|
||||
const tambahJadwal = async (e) => {
|
||||
e.preventDefault();
|
||||
if (jamMulai == null) {
|
||||
props.toastnya("Jam Mulai Harus Terisi")
|
||||
// focus jam mulai
|
||||
jamMulaiInputRef.current.focus();
|
||||
} else if (jamSelesai == null) {
|
||||
props.toastnya("Jam Selesai Harus Terisi")
|
||||
// focus jam selesai
|
||||
jamSelesaiInputRef.current.focus();
|
||||
} else if (jamMulai > jamSelesai) {
|
||||
props.toastnya("Jam Mulai Harus Lebih Kecil Dari Jam Selesai")
|
||||
// focus jam selesai
|
||||
jamSelesaiInputRef.current.focus();
|
||||
} else {
|
||||
let jam_mulai_converted = jamMulai.toLocaleTimeString('en-US', { hour12: false, hour: "numeric", minute: "numeric" });
|
||||
let jam_selesai_converted = jamSelesai.toLocaleTimeString('en-US', { hour12: false, hour: "numeric", minute: "numeric" });
|
||||
console.log(jam_mulai_converted, jam_selesai_converted, hari, nik, "ini data yang akan dikirim")
|
||||
|
||||
let data = {
|
||||
jam_mulai: jam_mulai_converted,
|
||||
jam_selesai: jam_selesai_converted,
|
||||
hari: hari,
|
||||
id_dokter: nik
|
||||
}
|
||||
props.closeJadwal()
|
||||
props.sweetAlertLoadingnya(true)
|
||||
|
||||
await MySwal.fire({
|
||||
title: 'Yakin ?',
|
||||
text: `Jadwal Pada Hari ${hari} akan ditambahkan ke dokter dengan nik ${nik}`,
|
||||
icon: 'info',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, tambahkan!'
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
props.backdropnya(true);
|
||||
|
||||
try {
|
||||
const url = process.env.HTTP_URL + "/api/admin/jadwal_dokter";
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'allow-cors-origin': '*',
|
||||
'crossDomain': true,
|
||||
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||
},
|
||||
body: JSON.stringify(
|
||||
data
|
||||
)
|
||||
})
|
||||
|
||||
const json = await response.json();
|
||||
|
||||
if(response.status === 200){
|
||||
props.toastnya(json.message,true)
|
||||
await props.openback(nik, "", null, null, false)
|
||||
}else{
|
||||
props.toastnya(json.message,false)
|
||||
await props.openback(nik, hari, jamMulai, jamSelesai, true)
|
||||
}
|
||||
} catch {
|
||||
await props.openback(nik, hari, jamMulai, jamSelesai, true)
|
||||
props.toastnya("Terjadi Kesalahan, Coba Lagi Nanti",false)
|
||||
}
|
||||
|
||||
// await props.openback(nik, "", null, null, false)
|
||||
} else {
|
||||
await props.openback(nik, hari, jamMulai, jamSelesai, true)
|
||||
|
||||
}
|
||||
|
||||
})
|
||||
props.backdropnya(false);
|
||||
props.sweetAlertLoadingnya(false);
|
||||
|
||||
|
||||
// props.closeJadwal()
|
||||
}
|
||||
}
|
||||
|
||||
let component = []
|
||||
|
||||
for (let i = 0; i < props.harinya.length; i++) {
|
||||
// clear component
|
||||
|
||||
let componentnya = [
|
||||
<TableRow key={i}>
|
||||
<TableCell>{props.harinya[i]}</TableCell>
|
||||
<TableCell>-</TableCell>
|
||||
<TableCell>-</TableCell>
|
||||
<TableCell>
|
||||
<IconButton color="primary" onClick={
|
||||
() => {
|
||||
setHari(props.harinya[i])
|
||||
setOpenDialog(true)
|
||||
}
|
||||
}>
|
||||
<ModeEditIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
]
|
||||
|
||||
for (let j = 0; j < props.dataJadwal.length; j++) {
|
||||
if (props.dataJadwal[j].hari == props.harinya[i]) {
|
||||
// clear componentnya
|
||||
componentnya = [<TableRow key={i}>
|
||||
<TableCell>{props.harinya[i]}</TableCell>
|
||||
<TableCell>{props.dataJadwal[j].jam_mulai}</TableCell>
|
||||
<TableCell>{props.dataJadwal[j].jam_selesai}</TableCell>
|
||||
<TableCell>
|
||||
<IconButton color="success">
|
||||
<ModeEditIcon />
|
||||
</IconButton>
|
||||
<IconButton color="error">
|
||||
<DisabledByDefaultIcon />
|
||||
</IconButton>
|
||||
</TableCell>
|
||||
</TableRow>]
|
||||
// push jam mulai dan jam selesai
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// push componentnya to component
|
||||
component.push(componentnya)
|
||||
|
||||
|
||||
}
|
||||
// console.log(component, "ini component")
|
||||
|
||||
return (
|
||||
<>
|
||||
<BootstrapDialog
|
||||
aria-labelledby="customized-dialog-title"
|
||||
open={openDialog}
|
||||
component="form"
|
||||
onSubmit={tambahJadwal}
|
||||
>
|
||||
<BootstrapDialogTitle id="customized-dialog-title" onClose={
|
||||
() => {
|
||||
setOpenDialog(false)
|
||||
setJamMulai(null)
|
||||
setJamSelesai(null)
|
||||
}
|
||||
}>
|
||||
Jadwal Hari {hari}
|
||||
</BootstrapDialogTitle>
|
||||
<DialogContent dividers align="center">
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<TimePicker
|
||||
inputRef={jamMulaiInputRef}
|
||||
required
|
||||
label="Jam Mulai"
|
||||
value={jamMulai}
|
||||
onChange={(newValue) => {
|
||||
setJamMulai(newValue);
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<TimePicker
|
||||
inputRef={jamSelesaiInputRef}
|
||||
required
|
||||
label="Jam Selesai"
|
||||
value={jamSelesai}
|
||||
onChange={(newValue) => {
|
||||
setJamSelesai(newValue);
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button variant="outlined" type="submit" color="primary">
|
||||
Tambah
|
||||
</Button>
|
||||
|
||||
</DialogActions>
|
||||
</BootstrapDialog>
|
||||
{component}
|
||||
</>
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
export default TabelJadwalDokter
|
||||
Reference in New Issue
Block a user