finished dokter / admin almost done
This commit is contained in:
kicap1992
@ -1,16 +1,11 @@
|
||||
import * as React from 'react';
|
||||
import { useState, useRef } 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 Grid from '@mui/material/Grid';
|
||||
|
||||
import Card from '@mui/material/Card';
|
||||
import Button from '@mui/material/Button';
|
||||
import TextField from '@mui/material/TextField';
|
||||
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';
|
||||
@ -20,24 +15,97 @@ import TableHead from '@mui/material/TableHead';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
// clock picker
|
||||
// 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 add dialog
|
||||
import PropTypes from 'prop-types';
|
||||
import Button from '@mui/material/Button';
|
||||
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';
|
||||
|
||||
// for time select
|
||||
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
|
||||
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
||||
import { MobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
|
||||
import { TimePicker } from '@mui/x-date-pickers/TimePicker';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
|
||||
import moment from "moment"; //for converting date and time
|
||||
|
||||
|
||||
import AppBarDokter from '../../components/dokter/appBar';
|
||||
|
||||
function createData(name, calories, fat, carbs, protein) {
|
||||
return { name, calories, fat, carbs, protein };
|
||||
}
|
||||
import TabelJadwalDokter from '../../components/dokter/tabelJadwalDokter';
|
||||
|
||||
|
||||
// for add dialog
|
||||
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,
|
||||
};
|
||||
|
||||
const mingguan = [
|
||||
"Senin",
|
||||
"Selasa",
|
||||
"Rabu",
|
||||
"Kamis",
|
||||
"Jumat",
|
||||
"Sabtu",
|
||||
"Minggu"
|
||||
]
|
||||
|
||||
const rows = [
|
||||
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
|
||||
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
|
||||
createData('Eclair', 262, 16.0, 24, 6.0),
|
||||
createData('Cupcake', 305, 3.7, 67, 4.3),
|
||||
createData('Gingerbread', 356, 16.0, 49, 3.9),
|
||||
];
|
||||
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
@ -59,89 +127,337 @@ const DrawerHeader = styled('div')(({ theme }) => ({
|
||||
...theme.mixins.toolbar,
|
||||
}));
|
||||
|
||||
export default function DokterIndexPage() {
|
||||
function DokterIndexPage(props) {
|
||||
// console.log(props)
|
||||
const url = process.env.HTTP_URL + "/api/dokter"; // ini url
|
||||
|
||||
const [age, setAge] = React.useState('');
|
||||
const [backdrop, setBackdrop] = useState(false); //this is for backdrop
|
||||
const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
|
||||
|
||||
const handleChange = (event) => {
|
||||
setAge(event.target.value);
|
||||
};
|
||||
const [openAddDialog, setOpenAddDialog] = useState(false);
|
||||
|
||||
// clock picker
|
||||
const [value, setValue] = React.useState(null);
|
||||
const [titleDialog, setTitleDialog] = useState('');
|
||||
const [jam_mulai, setJamMulai] = useState(null);
|
||||
const [jam_selesai, setJamSelesai] = useState(null);
|
||||
const jam_mulaiInputRef = useRef(null);
|
||||
const jam_selesaiInputRef = useRef(null);
|
||||
const [hari, setHari] = useState('');
|
||||
const [idnya, setIdnya] = useState('');
|
||||
const [dataEdit, setDataEdit] = useState(null);
|
||||
|
||||
// open add dialog
|
||||
async function before_add_jadwal(hari) {
|
||||
setTitleDialog(`Tambah Jadwal Hari ${hari}`);
|
||||
setHari(hari);
|
||||
setJamMulai(null);
|
||||
setJamSelesai(null);
|
||||
setIdnya('tambah');
|
||||
setOpenAddDialog(true);
|
||||
}
|
||||
|
||||
// before tambah jadwal with dialog and time checker
|
||||
async function tambah_jadwal(stat) {
|
||||
// console.log(jam_mulai, jam_selesai, hari, "ini cek data tambah")
|
||||
if (jam_mulai == null) {
|
||||
jam_mulaiInputRef.current.focus();
|
||||
toast.error("Jam mulai harus diisi")
|
||||
return false;
|
||||
} else if (jam_selesai == null) {
|
||||
jam_selesaiInputRef.current.focus();
|
||||
toast.error("Jam selesai harus diisi")
|
||||
return false;
|
||||
} else if (jam_mulai >= jam_selesai) {
|
||||
jam_mulaiInputRef.current.focus();
|
||||
toast.error("Jam mulai harus lebih kecil dari jam selesai")
|
||||
return false;
|
||||
} else {
|
||||
setOpenAddDialog(false);
|
||||
setSweetAlertLoading(true);
|
||||
if (stat == 'tambah') {
|
||||
console.log(jam_mulai, jam_selesai, hari, "ini jalankan data tambah")
|
||||
|
||||
await MySwal.fire({
|
||||
title: 'Yakin ?',
|
||||
text: `Jadwal Baru Pada Hari ${hari} Akan Ditambahkan`,
|
||||
icon: 'info',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, tambah!'
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
setBackdrop(true);
|
||||
// await 4 second
|
||||
// await new Promise(resolve => setTimeout(resolve, 4000));
|
||||
// await edit_data_dokter(nik,datanya);
|
||||
// clear hari ,jam_mulai,jam_selesai
|
||||
await confirm_tambah_jadwal(hari, jam_mulai, jam_selesai);
|
||||
setHari('');
|
||||
setJamMulai(null);
|
||||
setJamSelesai(null);
|
||||
} else {
|
||||
setOpenAddDialog(true);
|
||||
}
|
||||
})
|
||||
} else if (stat == 'edit') {
|
||||
if (dataEdit.jam_mulai == jam_mulai && dataEdit.jam_selesai == jam_selesai) {
|
||||
toast.error("Jadwal tidak berubah")
|
||||
// open dialog
|
||||
setOpenAddDialog(true);
|
||||
// focus to jam_mulai
|
||||
jam_mulaiInputRef.current.focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
await MySwal.fire({
|
||||
title: 'Yakin ?',
|
||||
text: `Jadwal Pada Hari ${hari} Akan Diedit`,
|
||||
icon: 'info',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, edit!'
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
setBackdrop(true);
|
||||
// await 4 second
|
||||
// await new Promise(resolve => setTimeout(resolve, 4000));
|
||||
console.log(hari, "ini hari")
|
||||
await confirm_edit_jadwal(hari, jam_mulai, jam_selesai);
|
||||
|
||||
setHari('');
|
||||
setJamMulai(null);
|
||||
setJamSelesai(null);
|
||||
} else {
|
||||
setOpenAddDialog(true);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
setBackdrop(false);
|
||||
setSweetAlertLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
// confirm tambah jadwal
|
||||
async function confirm_tambah_jadwal(hari, jam_mulai, jam_selesai) {
|
||||
try {
|
||||
// moment format jam_mulai to only hour and minute
|
||||
jam_mulai = moment(jam_mulai).format("HH:mm");
|
||||
jam_selesai = moment(jam_selesai).format("HH:mm");
|
||||
// console.log(url)
|
||||
const urlnya = url + "/jadwal_dokter";
|
||||
const response = await fetch(urlnya, {
|
||||
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(
|
||||
{
|
||||
hari,
|
||||
jam_mulai,
|
||||
jam_selesai,
|
||||
nik: props.user
|
||||
}
|
||||
)
|
||||
})
|
||||
// get response
|
||||
const data = await response.json()
|
||||
console.log(data, "ini data tambah jadwal")
|
||||
if (response.status === 200) {
|
||||
// create toast
|
||||
|
||||
toast.success(data.message)
|
||||
Router.replace(Router.asPath);
|
||||
return true
|
||||
} else if (response.status === 400) {
|
||||
|
||||
toast.success(data.message)
|
||||
return false
|
||||
} else {
|
||||
// create toast
|
||||
|
||||
toast.error(data.message)
|
||||
return false
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error("Terjadi kesalahan pada server")
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// confirm edit jadwal
|
||||
async function confirm_edit_jadwal(hari, jam_mulai, jam_selesai) {
|
||||
try {
|
||||
// moment format jam_mulai to only hour and minute
|
||||
jam_mulai = moment(jam_mulai).format("HH:mm");
|
||||
jam_selesai = moment(jam_selesai).format("HH:mm");
|
||||
// console.log(url)
|
||||
const urlnya = url + "/jadwal_dokter?id=" + props.user;
|
||||
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(
|
||||
{
|
||||
hari,
|
||||
jam_mulai,
|
||||
jam_selesai
|
||||
}
|
||||
)
|
||||
})
|
||||
// get response
|
||||
const data = await response.json()
|
||||
console.log(data, "ini data edit jadwal")
|
||||
if (response.status === 200) {
|
||||
// create toast
|
||||
|
||||
toast.success(data.message)
|
||||
Router.replace(Router.asPath);
|
||||
return true
|
||||
} else if (response.status === 400) {
|
||||
|
||||
toast.success(data.message)
|
||||
return false
|
||||
} else {
|
||||
// create toast
|
||||
|
||||
toast.error(data.message)
|
||||
return false
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error("Terjadi kesalahan pada server")
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
// confirm hapus jadwal
|
||||
async function confirm_hapus_jadwal(hari) {
|
||||
try {
|
||||
// moment format jam_mulai to only hour and minute
|
||||
// console.log(url)
|
||||
const urlnya = url + "/jadwal_dokter?id=" + props.user;
|
||||
const response = await fetch(urlnya, {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'allow-cors-origin': '*',
|
||||
'crossDomain': true,
|
||||
'Authorization': 'Basic ' + btoa(`${process.env.ADMIN_AUTH}:${process.env.ADMIN_PASSWORD}`)
|
||||
},
|
||||
body: JSON.stringify(
|
||||
{
|
||||
hari
|
||||
}
|
||||
)
|
||||
})
|
||||
// get response
|
||||
const data = await response.json()
|
||||
console.log(data, "ini data hapus jadwal")
|
||||
if (response.status === 200) {
|
||||
// create toast
|
||||
|
||||
toast.success(data.message)
|
||||
Router.replace(Router.asPath);
|
||||
return true
|
||||
} else if (response.status === 400) {
|
||||
|
||||
toast.success(data.message)
|
||||
return false
|
||||
} else {
|
||||
// create toast
|
||||
|
||||
toast.error(data.message)
|
||||
return false
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error("Terjadi kesalahan pada server")
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<BootstrapDialog
|
||||
onClose={
|
||||
(event, reason) => {
|
||||
if (reason && reason == "backdropClick")
|
||||
return;
|
||||
setOpenAddDialog(false)
|
||||
}
|
||||
}
|
||||
aria-labelledby="customized-dialog-title"
|
||||
open={openAddDialog}
|
||||
fullWidth={true}
|
||||
>
|
||||
<BootstrapDialogTitle id="customized-dialog-title" onClose={
|
||||
(event, reason) => {
|
||||
if (reason && reason == "backdropClick")
|
||||
return;
|
||||
setOpenAddDialog(false)
|
||||
}
|
||||
}>
|
||||
{titleDialog}
|
||||
</BootstrapDialogTitle>
|
||||
<DialogContent dividers align="center">
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||
<TimePicker
|
||||
inputRef={jam_mulaiInputRef}
|
||||
required
|
||||
label="Jam Mulai"
|
||||
value={jam_mulai}
|
||||
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={jam_selesaiInputRef}
|
||||
required
|
||||
label="Jam Selesai"
|
||||
value={jam_selesai}
|
||||
onChange={(newValue) => {
|
||||
setJamSelesai(newValue);
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button autoFocus onClick={
|
||||
() => {
|
||||
tambah_jadwal(idnya)
|
||||
}
|
||||
} variant="outlined" >
|
||||
{idnya === 'tambah' ? 'Tambah Jadwal' : 'Edit Jadwal'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</BootstrapDialog>
|
||||
|
||||
|
||||
<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 />
|
||||
<AppBarDokter />
|
||||
<AppBarDokter menu="Home" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
|
||||
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||
<DrawerHeader />
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} md={4} >
|
||||
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||
<Typography variant="h6" gutterBottom sx={{
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'left',
|
||||
paddingLeft: '8%',
|
||||
paddingTop: "10px",
|
||||
paddingBottom: "10px",
|
||||
backgroundColor: "silver",
|
||||
}}>Tambah Jadwal</Typography>
|
||||
<Box sx={{ padding: "5px" }}></Box>
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<InputLabel id="demo-simple-select-helper-label">Hari</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-helper-label"
|
||||
id="jenisSelect"
|
||||
value={age}
|
||||
label="Jenis"
|
||||
onChange={handleChange}
|
||||
>
|
||||
<MenuItem value="">
|
||||
<em>None</em>
|
||||
</MenuItem>
|
||||
<MenuItem value={10}>Ten</MenuItem>
|
||||
<MenuItem value={20}>Twenty</MenuItem>
|
||||
<MenuItem value={30}>Thirty</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns} >
|
||||
<MobileTimePicker
|
||||
|
||||
label="Jam Mulai"
|
||||
value={value}
|
||||
onChange={(newValue) => {
|
||||
setValue(newValue);
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<FormControl sx={{ width: "85%", boxShadow: 10 }}>
|
||||
<LocalizationProvider dateAdapter={AdapterDateFns} >
|
||||
<MobileTimePicker
|
||||
|
||||
label="Jam Selesai"
|
||||
value={value}
|
||||
onChange={(newValue) => {
|
||||
setValue(newValue);
|
||||
}}
|
||||
renderInput={(params) => <TextField {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<Box textAlign="center">
|
||||
<Button variant="contained">Tambah</Button>
|
||||
</Box>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={2} ></Grid>
|
||||
<Grid item xs={12} md={8}>
|
||||
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||
<Typography variant="h6" gutterBottom sx={{
|
||||
@ -151,52 +467,175 @@ export default function DokterIndexPage() {
|
||||
paddingTop: "10px",
|
||||
paddingBottom: "10px",
|
||||
backgroundColor: "silver",
|
||||
}}> List Tindakan</Typography>
|
||||
}}>List Jadwal</Typography>
|
||||
<TableContainer component={Box} sx={{
|
||||
padding: "15px",
|
||||
}}>
|
||||
<Table aria-label="simple table" sx={{
|
||||
minWidth: 650,
|
||||
minWidth: 500,
|
||||
boxShadow: 3,
|
||||
}}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
|
||||
<StyledTableCell align="right">Calories</StyledTableCell>
|
||||
<StyledTableCell align="right">Fat (g)</StyledTableCell>
|
||||
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
|
||||
<StyledTableCell align="right">Protein (g)</StyledTableCell>
|
||||
<StyledTableCell>Hari</StyledTableCell>
|
||||
<StyledTableCell>Jam Mulai</StyledTableCell>
|
||||
<StyledTableCell>Jam Selesai</StyledTableCell>
|
||||
<StyledTableCell>Aksi</StyledTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||
>
|
||||
<TableCell component="th" scope="row">
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell align="right">{row.calories}</TableCell>
|
||||
<TableCell align="right">{row.fat}</TableCell>
|
||||
<TableCell align="right">{row.carbs}</TableCell>
|
||||
<TableCell align="right">{row.protein}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
<TabelJadwalDokter harinya={mingguan} dataJadwal={props.data_jadwal}
|
||||
add={
|
||||
(hari) => {
|
||||
// console.log(hari,jam_mulai,jam_selesai, "ini data add nya")
|
||||
before_add_jadwal(hari)
|
||||
}
|
||||
}
|
||||
edit={
|
||||
(hari, jam_mulai, jam_selesai) => {
|
||||
setTitleDialog("Edit Jadwal Hari " + hari)
|
||||
|
||||
//get hours and minutes
|
||||
let jamMulaiGetHours = jam_mulai[0] + jam_mulai[1]
|
||||
let jamMulaiGetMinutes = jam_mulai[3] + jam_mulai[4]
|
||||
|
||||
// convert to GMT String
|
||||
let jam_mulai_baru = new Date()
|
||||
jam_mulai_baru.setHours(jamMulaiGetHours)
|
||||
jam_mulai_baru.setMinutes(jamMulaiGetMinutes)
|
||||
jam_mulai_baru.setSeconds(0)
|
||||
jam_mulai_baru.toString()
|
||||
|
||||
// get hours and minutes
|
||||
let jamSelesaiGetHours = jam_selesai[0] + jam_selesai[1]
|
||||
let jamSelesaiGetMinutes = jam_selesai[3] + jam_selesai[4]
|
||||
|
||||
// convert to GMT String
|
||||
let jam_selesai_baru = new Date()
|
||||
jam_selesai_baru.setHours(jamSelesaiGetHours)
|
||||
jam_selesai_baru.setMinutes(jamSelesaiGetMinutes)
|
||||
jam_selesai_baru.setSeconds(0)
|
||||
jam_selesai_baru.toString()
|
||||
|
||||
setDataEdit(
|
||||
{
|
||||
jam_mulai: jam_mulai_baru,
|
||||
jam_selesai: jam_selesai_baru,
|
||||
}
|
||||
)
|
||||
|
||||
setHari(hari)
|
||||
setJamMulai(jam_mulai_baru)
|
||||
setJamSelesai(jam_selesai_baru)
|
||||
setIdnya("edit")
|
||||
setOpenAddDialog(true);
|
||||
}
|
||||
}
|
||||
delete={
|
||||
(hari) => {
|
||||
// create sweetalert
|
||||
MySwal.fire({
|
||||
title: 'Yakin?',
|
||||
text: "Jadwal Hari " + hari + " Akan dihapus",
|
||||
icon: 'warning',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, Hapus!'
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
// console.log(hari, "ini data delete nya")
|
||||
confirm_hapus_jadwal(hari)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
/>
|
||||
</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 item xs={12} md={2} ></Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
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,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if (user.role != "Dokter") {
|
||||
try {
|
||||
console.log("jalankannya ini di dokter")
|
||||
const url = process.env.HTTP_URL + "/api/login/logout";
|
||||
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}`)
|
||||
},
|
||||
})
|
||||
|
||||
} catch (err) {
|
||||
|
||||
}
|
||||
|
||||
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,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const data_jadwal = await all_function.get_jadwal_dokter(user.nik)
|
||||
console.log(data_jadwal, "ini data jadwal")
|
||||
return {
|
||||
props: {
|
||||
user: user.nik,
|
||||
data_jadwal: data_jadwal,
|
||||
},
|
||||
// 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 DokterIndexPage;
|
||||
@ -1,5 +1,5 @@
|
||||
import { useRouter } from 'next/router'
|
||||
import * as React from 'react';
|
||||
import Router from 'next/router'
|
||||
import { useState, useRef } from 'react';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Typography from '@mui/material/Typography';
|
||||
import Box from '@mui/material/Box';
|
||||
@ -9,12 +9,51 @@ import Grid from '@mui/material/Grid';
|
||||
import Card from '@mui/material/Card';
|
||||
import Button from '@mui/material/Button';
|
||||
import TextField from '@mui/material/TextField';
|
||||
import FormHelperText from '@mui/material/FormHelperText';
|
||||
|
||||
// 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";
|
||||
|
||||
import { formatInTimeZone } from 'date-fns-tz' // format timezone
|
||||
|
||||
// for tindakan select
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
import InputLabel from '@mui/material/InputLabel';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import FormControl from '@mui/material/FormControl';
|
||||
import ListItemText from '@mui/material/ListItemText';
|
||||
import Select from '@mui/material/Select';
|
||||
import Checkbox from '@mui/material/Checkbox';
|
||||
import Chip from '@mui/material/Chip';
|
||||
|
||||
const ITEM_HEIGHT = 48;
|
||||
const ITEM_PADDING_TOP = 8;
|
||||
const MenuProps = {
|
||||
PaperProps: {
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
import AppBarDokter from '../../../components/dokter/appBar';
|
||||
import RekamMedisSelectedObat from '../../../components/dokter/selectedObat';
|
||||
|
||||
const DrawerHeader = styled('div')(({ theme }) => ({
|
||||
display: 'flex',
|
||||
@ -25,22 +64,134 @@ const DrawerHeader = styled('div')(({ theme }) => ({
|
||||
...theme.mixins.toolbar,
|
||||
}));
|
||||
|
||||
const Post = () => {
|
||||
const router = useRouter() // ini untuk get query dari url
|
||||
|
||||
|
||||
|
||||
|
||||
const DataRekamMedisPage = (props) => {
|
||||
// console.log(props)
|
||||
const [backdrop, setBackdrop] = useState(false); //this is for backdrop
|
||||
const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
|
||||
|
||||
const keluhanInputRef = useRef(null);
|
||||
const diagnosaInputRef = useRef(null);
|
||||
const keterangannInputRef = useRef(null);
|
||||
|
||||
|
||||
const dataPasien = props.data_rekam_medis.tb_pasien;
|
||||
const tindakan_all = props.tindakan_all;
|
||||
const [tindakan_selected, setTindakanSelected] = useState([]);
|
||||
const [tindakan_selected_id, setTindakanSelectedId] = useState([]);
|
||||
const obat_all = props.obat_all;
|
||||
const [obat_selected, setObatSelected] = useState([]);
|
||||
const [obat_selected_id, setObatSelectedId] = useState([]);
|
||||
|
||||
const [data_obat, setDataObat] = useState([]);
|
||||
|
||||
async function add_rekam_medis(e) {
|
||||
e.preventDefault();
|
||||
const id_rekam_medis = props.data_rekam_medis.id_rekam_medis;
|
||||
const keluhan = keluhanInputRef.current.value;
|
||||
const diagnosa = diagnosaInputRef.current.value;
|
||||
const keterangan = keterangannInputRef.current.value;
|
||||
const tindakan = tindakan_selected_id;
|
||||
const obat = data_obat;
|
||||
console.log(obat)
|
||||
|
||||
let cek_error = false
|
||||
|
||||
if(obat.length > 0) {
|
||||
//loop obat using for and check in jumlah if null
|
||||
for(let i = 0; i < obat.length; i++) {
|
||||
if(obat[i].jumlah == null) {
|
||||
cek_error = true
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if(cek_error) {
|
||||
toast.error('Jumlah obat tidak boleh kosong')
|
||||
return ;
|
||||
}
|
||||
}
|
||||
|
||||
setSweetAlertLoading(true);
|
||||
await MySwal.fire({
|
||||
title: 'Yakin ?',
|
||||
text: `Rekam medis pasien ${props.data_rekam_medis.tb_pasien.nama} akan disimpan`,
|
||||
icon: 'info',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#3085d6',
|
||||
cancelButtonColor: '#d33',
|
||||
confirmButtonText: 'Ya, simpan!'
|
||||
}).then(async (result) => {
|
||||
if (result.value) {
|
||||
setBackdrop(true);
|
||||
|
||||
|
||||
|
||||
// await 4 sec
|
||||
// await new Promise(resolve => setTimeout(resolve, 4000));
|
||||
let data_all = {
|
||||
keluhan,
|
||||
diagnosa,
|
||||
keterangan,
|
||||
tindakan,
|
||||
obat,
|
||||
}
|
||||
|
||||
await confirm_add_rekam_medis(id_rekam_medis, data_all)
|
||||
|
||||
}
|
||||
})
|
||||
setBackdrop(false);
|
||||
setSweetAlertLoading(false);
|
||||
|
||||
}
|
||||
|
||||
async function confirm_add_rekam_medis(id_rekam_medis, data_all) {
|
||||
try {
|
||||
let url = process.env.HTTP_URL + "/api/dokter/rekam_medis_update?id_rekam_medis=" + id_rekam_medis + "&id_dokter=" + props.user;
|
||||
let data = 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(data_all)
|
||||
})
|
||||
// let data_json = await data.json();
|
||||
// console.log(data, "ini data dari cek dokter")
|
||||
if (data.status === 200) {
|
||||
// create toast
|
||||
toast.success('Rekam medis berhasil disimpan')
|
||||
Router.push('/')
|
||||
return true
|
||||
}else{
|
||||
toast.error('Rekam medis gagal disimpan')
|
||||
return false
|
||||
}
|
||||
}catch(err) {
|
||||
toast.error('Rekam medis gagal disimpan')
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<>
|
||||
<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>
|
||||
<Card sx={{ display: 'flex' }} onSubmit={add_rekam_medis} component="form">
|
||||
<CssBaseline />
|
||||
<AppBarDokter />
|
||||
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||
<AppBarDokter menu="Rekam Medis" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
|
||||
<Box component="main" sx={{ flexGrow: 1, p: 3 }} >
|
||||
<DrawerHeader />
|
||||
<Grid container spacing={2}>
|
||||
<Grid container spacing={2}
|
||||
|
||||
>
|
||||
<Grid item xs={12} md={7} >
|
||||
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||
<Card align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||
<Typography variant="h6" gutterBottom sx={{
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'left',
|
||||
@ -50,21 +201,36 @@ const Post = () => {
|
||||
backgroundColor: "silver",
|
||||
}}>Tambah Jadwal</Typography>
|
||||
<Box sx={{ padding: "5px" }}></Box>
|
||||
<TextField
|
||||
id="nikPasienTextField"
|
||||
label="NIK Pasien"
|
||||
// placeholder="Masukkan Nama Pasien"
|
||||
value={dataPasien.nik}
|
||||
disabled
|
||||
sx={{ width: "90%", boxShadow: 10 }}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
id="namaPasienTextField"
|
||||
label="Nama Pasien"
|
||||
placeholder="Masukkan Nama Pasien"
|
||||
// placeholder="Masukkan Nama Pasien"
|
||||
disabled
|
||||
value={dataPasien.nama}
|
||||
sx={{ width: "90%", boxShadow: 10 }}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
id="tanggalPeriksaTextField"
|
||||
label="Tanggal Periksa"
|
||||
placeholder="Masukkan Tanggal Periksa"
|
||||
label="Tanggal Daftar"
|
||||
// placeholder="Masukkan Tanggal Periksa"
|
||||
disabled
|
||||
value={formatInTimeZone(new Date(dataPasien.createdAt), 'Asia/Kuala_Lumpur', 'yyyy-MM-dd | HH:mm:ss')}
|
||||
sx={{ width: "90%", boxShadow: 10 }}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
required
|
||||
inputRef={keluhanInputRef}
|
||||
id="keluhanPasienTextField"
|
||||
label="Keluhan Pasien"
|
||||
placeholder="Masukkan Keluhan Pasien"
|
||||
@ -75,6 +241,8 @@ const Post = () => {
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<TextField
|
||||
required
|
||||
inputRef={diagnosaInputRef}
|
||||
id="diagnosaTextField"
|
||||
label="Diagnosa"
|
||||
placeholder="Masukkan Diagnosa"
|
||||
@ -84,14 +252,24 @@ const Post = () => {
|
||||
sx={{ width: "90%", boxShadow: 10 }}
|
||||
/>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<Box textAlign="center">
|
||||
<Button variant="contained">Tambah</Button>
|
||||
</Box>
|
||||
<TextField
|
||||
required
|
||||
inputRef={keterangannInputRef}
|
||||
id="keteranganTextField"
|
||||
label="Keterangan"
|
||||
placeholder="Masukkan Keterangan"
|
||||
multiline
|
||||
rows={6}
|
||||
// maxRows={6}
|
||||
sx={{ width: "90%", boxShadow: 10 }}
|
||||
/>
|
||||
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={5}>
|
||||
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||
|
||||
<Card align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 100, boxShadow: 10 }}>
|
||||
<Typography variant="h6" gutterBottom sx={{
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'left',
|
||||
@ -99,28 +277,241 @@ const Post = () => {
|
||||
paddingTop: "10px",
|
||||
paddingBottom: "10px",
|
||||
backgroundColor: "silver",
|
||||
}}> List Tindakan</Typography>
|
||||
|
||||
<Box sx={{ padding: "5px" }}></Box>
|
||||
<Box textAlign="center">
|
||||
<Button variant="contained">Cetak</Button>
|
||||
</Box>
|
||||
}}> Daftar Tindakan</Typography>
|
||||
<FormControl sx={{ m: 1, width: "85%" }}>
|
||||
<InputLabel id="demo-multiple-checkbox-label">Tindakan</InputLabel>
|
||||
<Select
|
||||
labelId="demo-multiple-checkbox-label"
|
||||
id="demo-multiple-checkbox"
|
||||
multiple
|
||||
value={tindakan_selected}
|
||||
onChange={
|
||||
(event) => {
|
||||
setTindakanSelected(event.target.value);
|
||||
let data_selected = event.target.value
|
||||
let datanya = []
|
||||
for (let i = 0; i < data_selected.length; i++) {
|
||||
datanya.push(data_selected[i].split('-')[0])
|
||||
}
|
||||
setTindakanSelectedId(datanya)
|
||||
}
|
||||
}
|
||||
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value.split("-")[0]} label={value.split("-")[1]} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
MenuProps={MenuProps}
|
||||
>
|
||||
{tindakan_all.map((name) => (
|
||||
<MenuItem key={name.id_tindakan} value={name.id_tindakan + "-" + name.nama_tindakan}>
|
||||
<Checkbox checked={tindakan_selected.indexOf(name.id_tindakan + "-" + name.nama_tindakan) > -1} />
|
||||
<ListItemText primary={name.nama_tindakan} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
<FormHelperText>Kosongkan Jika Tiada Tindakan</FormHelperText>
|
||||
</FormControl>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
</Card>
|
||||
<Box sx={{ padding: "15px" }}></Box>
|
||||
<Card align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 100, boxShadow: 10 }}>
|
||||
<Typography variant="h6" gutterBottom sx={{
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'left',
|
||||
paddingLeft: '3%',
|
||||
paddingTop: "10px",
|
||||
paddingBottom: "10px",
|
||||
backgroundColor: "silver",
|
||||
}}>Daftar Obat</Typography>
|
||||
<FormControl sx={{ m: 1, width: "85%" }}>
|
||||
<InputLabel id="demo-multiple-checkbox-label">Obat</InputLabel>
|
||||
<Select
|
||||
labelId="demo-multiple-checkbox-label"
|
||||
id="demo-multiple-checkbox"
|
||||
multiple
|
||||
value={obat_selected}
|
||||
onChange={
|
||||
(event) => {
|
||||
setObatSelected(event.target.value);
|
||||
let data_selected = event.target.value
|
||||
let datanya = []
|
||||
let data_obat = []
|
||||
for (let i = 0; i < data_selected.length; i++) {
|
||||
datanya.push(data_selected[i].split('-')[0])
|
||||
// push to data_obat id:data_selected[i].split('-')[0] and jumlah:null
|
||||
data_obat.push({ id_obat: data_selected[i].split('-')[0], jumlah: null })
|
||||
}
|
||||
setObatSelectedId(datanya)
|
||||
setDataObat(data_obat)
|
||||
|
||||
}
|
||||
}
|
||||
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={
|
||||
// value split by '-'
|
||||
value.split('-')[0]
|
||||
} label={value.split('-')[1]} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
MenuProps={MenuProps}
|
||||
>
|
||||
{obat_all.map((name) => (
|
||||
<MenuItem key={name.id_obat + "-" + name.nama_obat} value={name.id_obat + "-" + name.nama_obat}>
|
||||
<Checkbox checked={obat_selected.indexOf(name.id_obat + "-" + name.nama_obat) > -1} />
|
||||
<ListItemText primary={name.nama_obat} />
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
<FormHelperText>Kosongkan Jika Tiada Obat</FormHelperText>
|
||||
</FormControl>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<RekamMedisSelectedObat obat={obat_selected}
|
||||
datanya={
|
||||
(data) => {
|
||||
console.log(data)
|
||||
setDataObat(data)
|
||||
}
|
||||
}
|
||||
errornya={
|
||||
(message) => {
|
||||
toast.error(message)
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Card>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<Box sx={{ padding: "10px", maxWidth: "100%" }} textAlign="center">
|
||||
<Button variant="contained" color="primary" sx={{ width: 100 }} type="submit">
|
||||
Simpan
|
||||
</Button>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// ini untuk get query dari url
|
||||
Post.getInitialProps = async ({ query }) => {
|
||||
// console.log(query)
|
||||
return {query }
|
||||
}
|
||||
// // ini untuk get query dari url
|
||||
// DataRekamMedisPage.getInitialProps = async ({ query }) => {
|
||||
// // console.log(query)
|
||||
// return {query }
|
||||
// }
|
||||
|
||||
export default Post
|
||||
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,
|
||||
}
|
||||
};
|
||||
}
|
||||
if (user.role != "Dokter") {
|
||||
try {
|
||||
const url = process.env.HTTP_URL + "/api/login/logout";
|
||||
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}`)
|
||||
},
|
||||
})
|
||||
} catch (err) {
|
||||
|
||||
}
|
||||
|
||||
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,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const id = req.query.id;
|
||||
if (!id) {
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/dokter/rekam-medis',
|
||||
permanent: false,
|
||||
}
|
||||
};
|
||||
}
|
||||
console.log(id, "ini idnya")
|
||||
const cek_data_rekam_medis = await all_function.cek_data_rekam_medis(id, user.nik)
|
||||
|
||||
// if(ce)
|
||||
if(!cek_data_rekam_medis){
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/dokter/rekam-medis',
|
||||
permanent: false,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
if(cek_data_rekam_medis.diagnosa != null && cek_data_rekam_medis.diagnosa != '' && cek_data_rekam_medis.keluhan != null && cek_data_rekam_medis.keluhan != ''){
|
||||
return {
|
||||
redirect: {
|
||||
destination: '/dokter/rekam-medis',
|
||||
permanent: false,
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const tindakan_all = await all_function.tindakan_all()
|
||||
const obat_all = await all_function.obat_all()
|
||||
|
||||
|
||||
|
||||
return {
|
||||
props: {
|
||||
user: user.nik,
|
||||
data_rekam_medis: cek_data_rekam_medis,
|
||||
tindakan_all: tindakan_all,
|
||||
obat_all: obat_all,
|
||||
},
|
||||
// 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 DataRekamMedisPage
|
||||
@ -1,4 +1,4 @@
|
||||
import * as React from 'react';
|
||||
import { useState, useRef } from 'react';
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import CssBaseline from '@mui/material/CssBaseline';
|
||||
@ -17,21 +17,36 @@ import TableHead from '@mui/material/TableHead';
|
||||
import TableRow from '@mui/material/TableRow';
|
||||
import Typography from '@mui/material/Typography';
|
||||
|
||||
// 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";
|
||||
|
||||
import AppBarDokter from '../../../components/dokter/appBar';
|
||||
import TabelJadwalRekamMedis from '../../../components/dokter/tableJadwalRekamMedis';
|
||||
|
||||
let date = new Date();
|
||||
let year = date.getFullYear();
|
||||
let month = date.getMonth() + 1;
|
||||
let day = date.getDate();
|
||||
month = month < 10 ? '0' + month : month;
|
||||
day = day < 10 ? '0' + day : day;
|
||||
let today_date = year + '-' + month + '-' + day;
|
||||
|
||||
|
||||
function createData(name, calories, fat, carbs, protein) {
|
||||
return { name, calories, fat, carbs, protein };
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
|
||||
createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
|
||||
createData('Eclair', 262, 16.0, 24, 6.0),
|
||||
createData('Cupcake', 305, 3.7, 67, 4.3),
|
||||
createData('Gingerbread', 356, 16.0, 49, 3.9),
|
||||
];
|
||||
|
||||
const StyledTableCell = styled(TableCell)(({ theme }) => ({
|
||||
[`&.${tableCellClasses.head}`]: {
|
||||
@ -53,19 +68,70 @@ const DrawerHeader = styled('div')(({ theme }) => ({
|
||||
...theme.mixins.toolbar,
|
||||
}));
|
||||
|
||||
export default function RekamMedisPage() {
|
||||
function RekamMedisPage(props) {
|
||||
console.log(props, "ini propsnya")
|
||||
const [backdrop, setBackdrop] = useState(false); //this is for backdrop
|
||||
const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
|
||||
|
||||
const [tanggal, setTanggal] = useState(today_date);
|
||||
|
||||
const headerAwal = " Tanggal : " + tanggal
|
||||
const [header, setHeader] = useState(headerAwal);
|
||||
|
||||
const dataAwal = (props.jadwal_ini_hari)
|
||||
|
||||
const [data, setData] = useState(dataAwal);
|
||||
|
||||
const inputanInputRef = useRef(null);
|
||||
|
||||
const cariData = async (e) => {
|
||||
e.preventDefault();
|
||||
const inputan = inputanInputRef.current.value;
|
||||
const inputan_lower = inputan.toLowerCase();
|
||||
|
||||
try {
|
||||
const url = process.env.HTTP_URL + "/api/dokter/cari_rekam_medis?data=" + inputan_lower + "&data2=" + inputan_lower + "&id_dokter=" + props.user;
|
||||
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}`)
|
||||
},
|
||||
})
|
||||
|
||||
const data = await response.json();
|
||||
// console.log(data, "ini data cari data")
|
||||
if (response.status === 200) {
|
||||
setHeader(" Pencarian : " + inputan);
|
||||
setData(data.data);
|
||||
} else {
|
||||
toast.error("Data tidak ditemukan")
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error("Terjadi kesalahan saat mengambil data")
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<ToastContainer position={toast.POSITION.TOP_CENTER} transition={Zoom} autoClose={2000} Bounce={Bounce} theme="colored" style={{ textAlign: 'center' }} />
|
||||
<Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
|
||||
<Box sx={{ display: 'flex' }}>
|
||||
<CssBaseline />
|
||||
<AppBarDokter />
|
||||
<AppBarDokter menu="Rekam Medis" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
|
||||
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
|
||||
<DrawerHeader />
|
||||
<Grid container spacing={2}>
|
||||
|
||||
<Grid item xs={12} md={12}>
|
||||
<Card component="form" align="center" sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}>
|
||||
<Card component="form" align="center"
|
||||
sx={{ margin: "auto", maxWidth: "100%", minHeight: 210, boxShadow: 10 }}
|
||||
onSubmit={cariData}
|
||||
>
|
||||
<Typography variant="h6" gutterBottom sx={{
|
||||
fontWeight: 'bold',
|
||||
textAlign: 'left',
|
||||
@ -73,22 +139,32 @@ export default function RekamMedisPage() {
|
||||
paddingTop: "10px",
|
||||
paddingBottom: "10px",
|
||||
backgroundColor: "silver",
|
||||
}}>Rekam Medis</Typography>
|
||||
<Grid container spacing={1} sx={{paddingTop:2}}>
|
||||
}}>Rekam Medis {header}</Typography>
|
||||
<Grid container spacing={1} sx={{ paddingTop: 2 }}>
|
||||
<Grid item xs={1} md={3}></Grid>
|
||||
<Grid item xs={10} md={6}>
|
||||
<TextField
|
||||
required
|
||||
inputRef={inputanInputRef}
|
||||
id="namaTextField"
|
||||
label="NIK, Nama Pasien"
|
||||
placeholder="Masukkan NIK, Nama Pasien"
|
||||
sx={{ width: "85%", boxShadow: 10 }}
|
||||
onChange={
|
||||
() => {
|
||||
if (inputanInputRef.current.value === "") {
|
||||
setHeader(headerAwal);
|
||||
setData(dataAwal);
|
||||
}
|
||||
}
|
||||
}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={1} md={3}></Grid>
|
||||
</Grid>
|
||||
<Box sx={{ padding: "10px" }}></Box>
|
||||
<Box sx={{ maxWidth: "100%", textAlign: "center" }}>
|
||||
<Button variant="contained">Cari</Button>
|
||||
<Button variant="contained" type="submit">Cari</Button>
|
||||
</Box>
|
||||
<Box sx={{ padding: "5px" }}></Box>
|
||||
<Divider />
|
||||
@ -96,33 +172,38 @@ export default function RekamMedisPage() {
|
||||
padding: "15px",
|
||||
}}>
|
||||
<Table aria-label="simple table" sx={{
|
||||
minWidth: 650,
|
||||
minWidth: 500,
|
||||
boxShadow: 3,
|
||||
"& .MuiTableCell-root": {
|
||||
borderLeft: "1px solid rgba(224, 224, 224, 1)"
|
||||
}
|
||||
}}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<StyledTableCell>Dessert (100g serving)</StyledTableCell>
|
||||
<StyledTableCell align="right">Calories</StyledTableCell>
|
||||
<StyledTableCell align="right">Fat (g)</StyledTableCell>
|
||||
<StyledTableCell align="right">Carbs (g)</StyledTableCell>
|
||||
<StyledTableCell align="right">Protein (g)</StyledTableCell>
|
||||
<StyledTableCell>No</StyledTableCell>
|
||||
<StyledTableCell>NIK</StyledTableCell>
|
||||
<StyledTableCell>Nama</StyledTableCell>
|
||||
<StyledTableCell>Waktu Periksa</StyledTableCell>
|
||||
<StyledTableCell>Umur</StyledTableCell>
|
||||
<StyledTableCell>Golongan Darah</StyledTableCell>
|
||||
<StyledTableCell>Status</StyledTableCell>
|
||||
<StyledTableCell>Aksi</StyledTableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.name}
|
||||
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
|
||||
>
|
||||
<TableCell component="th" scope="row">
|
||||
{row.name}
|
||||
</TableCell>
|
||||
<TableCell align="right">{row.calories}</TableCell>
|
||||
<TableCell align="right">{row.fat}</TableCell>
|
||||
<TableCell align="right">{row.carbs}</TableCell>
|
||||
<TableCell align="right">{row.protein}</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
<TabelJadwalRekamMedis data={data}
|
||||
errornya={
|
||||
(message) => {
|
||||
toast.error(message)
|
||||
}
|
||||
}
|
||||
user={props.user}
|
||||
backdropnya={
|
||||
(status) => {
|
||||
setBackdrop(status)
|
||||
}
|
||||
}
|
||||
/>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
@ -137,6 +218,82 @@ export default function RekamMedisPage() {
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
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,
|
||||
}
|
||||
};
|
||||
}
|
||||
if (user.role != "Dokter") {
|
||||
try {
|
||||
const url = process.env.HTTP_URL + "/api/login/logout";
|
||||
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}`)
|
||||
},
|
||||
})
|
||||
} catch (err) {
|
||||
|
||||
}
|
||||
|
||||
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 jadwal_ini_hari = await all_function.jadwal_ini_hari(user.nik)
|
||||
// const tindakan_all = await all_function.tindakan_all()
|
||||
// const obat_all = await all_function.obat_all()
|
||||
// console.log(user.nik, "ini niknya")
|
||||
return {
|
||||
props: {
|
||||
user: user.nik,
|
||||
jadwal_ini_hari: jadwal_ini_hari,
|
||||
// tindakan_all: tindakan_all,
|
||||
// obat_all: obat_all,
|
||||
},
|
||||
// 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 RekamMedisPage;
|
||||
|
||||
Reference in New Issue
Block a user