Files
rekam_medis/pages/admin/data-dokter.js
2022-05-04 00:44:09 +08:00

681 lines
22 KiB
JavaScript

import { useRef, useState, forwardRef } from 'react';
import Router from 'next/router';
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
// import Paper from '@mui/material/Paper';
import Grid from '@mui/material/Grid';
import Divider from '@mui/material/Divider';
import Card from '@mui/material/Card';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
// 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 Table from '@mui/material/Table';
import TableBody from '@mui/material/TableBody';
import TableCell, { tableCellClasses } from '@mui/material/TableCell';
import TableContainer from '@mui/material/TableContainer';
import TableHead from '@mui/material/TableHead';
import TableRow from '@mui/material/TableRow';
// import Paper from '@mui/material/Paper';
import AppBarAdmin from '../../components/admin/appBar';
// backdrop
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
// toast
import { ToastContainer, toast, Zoom, Bounce } from 'react-toastify'
import 'react-toastify/dist/ReactToastify.css';
// sweet alert
import Swal from 'sweetalert2'
import withReactContent from 'sweetalert2-react-content'
const MySwal = withReactContent(Swal)
// this for check session
let all_function = require('../../function/all_function.js')
import { withIronSessionSsr } from "iron-session/next";
// 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';
// this is for number format
import NumberFormat from 'react-number-format';
import TabelDokterAll from '../../components/admin/tabelDokter'
// for select jadwal
import OutlinedInput from '@mui/material/OutlinedInput';
import ListItemText from '@mui/material/ListItemText';
import Checkbox from '@mui/material/Checkbox';
import Chip from '@mui/material/Chip';
import { Edit } from '@mui/icons-material';
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const hari = [
'Senin',
'Selasa',
'Rabu',
'Kamis',
'Jumat',
'Sabtu',
'Minggu',
];
const StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: theme.palette.primary.main,
color: theme.palette.common.white,
}
}));
const DrawerHeader = styled('div')(({ theme }) => ({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-end',
padding: theme.spacing(0, 1),
// necessary for content to be below app bar
...theme.mixins.toolbar,
}));
// 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"
/>
);
});
function DataDokterPage(props) {
const url = process.env.HTTP_URL + "/api/admin/dokter"; // ini url
// for loading table
const [dataDokterAll, setDataDokterAll] = useState();
const [awal, setAwal] = useState(false);
const [backdrop, setBackdrop] = useState(false); //this is for backdrop
const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
const nikInputRef = useRef();
const [nik, setNik] = useState('');
const namaInputRef = useRef();
const alamatInputRef = useRef();
const noTelpInputRef = useRef();
const [noTelp, setNoTelp] = useState('');
const [spesialis, setSpesialis] = useState('');
// for select jadwal
const [jadwal, setJadwal] = useState([]);
// for time select
const jamMulaiInputRef = useRef();
const jamSelesaiInputRef = useRef();
const [jamMulai, setJamMulai] = useState(null);
const [jamSelesai, setJamSelesai] = useState(null);
// before add dokter
const beforeTambahDokter = async (e) => {
e.preventDefault();
const nama = namaInputRef.current.value;
const alamat = alamatInputRef.current.value;
let no_telp = "08" + noTelp
console.log(no_telp.length);
if (nik.length < 16) {
toast.error('NIK harus 16 digit')
// focus to nik
nikInputRef.current.focus();
} else if (no_telp.length < 11) {
toast.error('No Telpon minimal harus 11 digit')
// focus to nik
noTelpInputRef.current.focus();
}
else if (jamMulai == null) {
toast.error('Jam harus diisi')
// focus to jam mulai
jamMulaiInputRef.current.focus();
} else if (jamSelesai == null) {
toast.error('Jam harus diisi')
// focus to jam mulai
jamSelesaiInputRef.current.focus();
} else if (jamMulai >= jamSelesai) {
toast.error('Jam mulai harus lebih kecil dari jam selesai')
// focus to jam mulai
jamSelesaiInputRef.current.focus();
} else {
console.log(nik, nama, alamat, noTelp, spesialis, jamMulai, jamSelesai, jadwal, "sini adalah datanya dokter");
setSweetAlertLoading(true);
await MySwal.fire({
title: 'Yakin ?',
text: `Dokter ${nama} akan ditambahkan`,
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, tambahkan!'
}).then(async (result) => {
if (result.value) {
setBackdrop(true);
// await 4 second
// await new Promise(resolve => setTimeout(resolve, 4000));
// create a new let jam_mulai_converted , and jam_selesai_converted, and only get the time. etc 08:00:00
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" });
let data = {
nik,
nama,
alamat,
no_telp,
spesialis,
jam_mulai: jam_mulai_converted,
jam_selesai: jam_selesai_converted,
jadwal
}
// console.log(data.data)
let response = await tambah_dokter(data);
// co
if (!response) {
// await 1 second
await new Promise(resolve => setTimeout(resolve, 500));
setAwal(true);
nikInputRef.current.focus();
} else {
// clear input
setAwal(false);
setNik("");
setNoTelp("");
setSpesialis("");
setJamMulai(null);
setJamSelesai(null);
setJadwal([]);
namaInputRef.current.value = "";
alamatInputRef.current.value = "";
Router.replace(Router.asPath);
}
}
})
setBackdrop(false);
setSweetAlertLoading(false);
}
}
// add dokter
async function tambah_dokter(datanya) {
// console.log(datanya, "ini datanya");
try {
// console.log(url)
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(
datanya
)
})
// get response
const data = await response.json()
// console.log(data, "ini data dari cek dokter")
if (response.status === 200) {
// create toast
toast.success(data.message)
return true
} else if (response.status === 400) {
setDataDokterAll(data.data)
return false
} else {
// create toast
toast.error(data.message)
return false
}
} catch (err) {
toast.error("Terjadi kesalahan pada server")
return false
}
}
// before edit dokter
const beforeEditDokter = async (nik, datanya) => {
// console.log(datanya, "ini datanya");
// console.log(nik, "ini nik");
// create sweet alert
setSweetAlertLoading(true);
await MySwal.fire({
title: 'Yakin ?',
text: `Dokter dengan NIK ${nik} akan diubah`,
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, ubah!'
}).then(async (result) => {
if (result.value) {
setBackdrop(true);
// await 4 second
await edit_data_dokter(nik, datanya);
}
})
setBackdrop(false);
setSweetAlertLoading(false);
}
// edit dokter
async function edit_data_dokter(nik, datanya) {
console.log(nik, datanya, "ini nik dan datanya");
// await 4 sec
try {
let urlnya = `${url}?nik=${nik}&detail=datanya`;
const response = await fetch(urlnya, {
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
)
})
// get response
const data = await response.json()
console.log(data, "ini data dari cek dokter")
if (response.status === 200) {
// create toast
toast.success(data.message)
setAwal(false);
Router.replace(Router.asPath);
} else {
toast.error(data.message)
}
} catch (error) {
toast.error("Terjadi kesalahan pada server")
}
}
return (
<>
<ToastContainer position={toast.POSITION.TOP_CENTER} transition={Zoom} autoClose={2000} Bounce={Bounce} theme="colored" />
<Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBarAdmin menu="Dokter" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
<Box component="main" sx={{ flexGrow: 1, p: 3 }} >
<DrawerHeader />
<Grid container spacing={4}>
<Grid item xs={12} md={5}>
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: 700, minHeight: 210, boxShadow: 10 }}
onSubmit={beforeTambahDokter}
>
<Typography variant="h6" gutterBottom sx={{
fontWeight: 'bold',
textAlign: 'left',
paddingLeft: '8%',
paddingTop: "10px",
paddingBottom: "10px",
backgroundColor: "silver",
}}>Tambah Dokter</Typography>
<Box sx={{ padding: "5px" }}></Box>
<TextField
required
inputRef={nikInputRef}
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
required
inputRef={namaInputRef}
id="namaTextField"
label="Nama"
placeholder="Masukkan Nama"
sx={{ width: "85%", boxShadow: 10 }}
/>
<Box sx={{ padding: "10px" }}></Box>
<TextField
required
inputRef={alamatInputRef}
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 sx={{ padding: "10px" }}></Box>
<Divider />
<Box sx={{ padding: "10px" }}></Box>
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
<InputLabel id="demo-multiple-checkbox-label">Jadwal Hari</InputLabel>
<Select
required
labelId="demo-multiple-checkbox-label"
id="demo-multiple-checkbox"
multiple
value={jadwal}
onChange={
(e) => {
const {
target: { value },
} = e;
setJadwal(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
}
}
input={<OutlinedInput label="Tag" />}
renderValue={(selected) => (
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
{selected.map((value) => (
<Chip key={value} label={value} />
))}
</Box>
)}
MenuProps={MenuProps}
>
{hari.map((name) => (
<MenuItem key={name} value={name}>
<Checkbox checked={jadwal.indexOf(name) > -1} />
<ListItemText primary={name} />
</MenuItem>
))}
</Select>
</FormControl>
<Box sx={{ padding: "10px" }}></Box>
<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>
<Box sx={{ padding: "10px" }}></Box>
<Box textAlign="center">
<Button variant="contained" type="submit">Tambah</Button>
</Box>
<Box sx={{ padding: "10px" }}></Box>
</Card>
</Grid>
<Grid item xs={12} md={7}>
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
<Typography variant="h6" gutterBottom sx={{
fontWeight: 'bold',
textAlign: 'left',
paddingLeft: '3%',
paddingTop: "10px",
paddingBottom: "10px",
backgroundColor: "silver",
}}> List Dokter</Typography>
<TableContainer component={Box} sx={{
padding: "15px",
}}>
<Table aria-label="simple table" sx={{
minWidth: 500,
boxShadow: 3,
"& .MuiTableCell-root": {
borderLeft: "1px solid rgba(224, 224, 224, 1)"
}
}}>
<TableHead>
<TableRow>
<StyledTableCell>NIK</StyledTableCell>
<StyledTableCell>Nama</StyledTableCell>
<StyledTableCell>Spesialis</StyledTableCell>
<StyledTableCell>Telepon</StyledTableCell>
<StyledTableCell width={"10%"}>Status</StyledTableCell>
<StyledTableCell>Aksi</StyledTableCell>
</TableRow>
</TableHead>
<TableBody>
<TabelDokterAll
dataDokterAll={!awal ? props.dokter : dataDokterAll}
toastnya={
(pesan, stat) => {
if (stat) {
toast.success(pesan)
} else {
toast.error(pesan)
}
}
}
setAwal={
(data) => {
setAwal(data)
}
}
editDokter={beforeEditDokter}
backdropnya={
(stat) => {
setBackdrop(stat)
}
}
sweetAlertLoadingnya={
(stat)=>{
setSweetAlertLoading(stat)
}
}
/>
</TableBody>
</Table>
</TableContainer>
{/* <Box sx={{ padding: "5px" }}></Box>
<Box textAlign="center">
<Button variant="contained">Cetak</Button>
</Box> */}
<Box sx={{ padding: "10px" }}></Box>
</Card>
</Grid>
</Grid>
</Box>
</Box>
</>
);
}
export const getServerSideProps = withIronSessionSsr(
async function getServerSideProps({ req }) {
const user = req.session.user;
console.log(user, "sini di server side props");
// console.log(req.query)
if (!user) {
return {
redirect: {
destination: '/?error=true',
permanent: false,
}
};
}
let cek_user = await all_function.cek_user(user.username, user.password, user.role)
console.log(cek_user, "cek user")
if (cek_user !== true) {
return {
redirect: {
destination: '/?error=true',
permanent: false,
}
};
}
let all_dokter = await all_function.dokter_all();
console.log(all_dokter, "ini all dokter");
return {
props: {
user: req.session.user,
dokter: all_dokter
},
// revalidate: 10
};
},
{
cookieName: "myapp_cookiename",
password: "complex_password_at_least_32_characters_long",
// secure: true should be used in production (HTTPS) but can't be used in development (HTTP)
cookieOptions: {
secure: process.env.NODE_ENV === "production",
},
},
);
export default DataDokterPage;