complete changes on admin and slight changes on page routes loading

This commit is contained in:
kicap1992
2022-05-04 23:31:12 +08:00
parent 099f9fe155
commit f5c1d7c4ab
9 changed files with 376 additions and 70 deletions

View File

@ -222,6 +222,7 @@ function AppBarAdmin(props) {
function handleMenuRoute(menu){
// console.log(menu + " sini menunya di appbar")
props.toRoute()
Router.push(menu)
}

View File

@ -103,6 +103,7 @@ function TabelJadwalDokter(props) {
const jamSelesaiInputRef = useRef();
const [jamMulai, setJamMulai] = useState(null);
const [jamSelesai, setJamSelesai] = useState(null);
const [status, setStatus] = useState('');
useEffect(() => {
setHari(props.hari_nya)
@ -141,20 +142,22 @@ function TabelJadwalDokter(props) {
await MySwal.fire({
title: 'Yakin ?',
text: `Jadwal Pada Hari ${hari} akan ditambahkan ke dokter dengan nik ${nik}`,
text: (status == 'tambah') ? `Jadwal Pada Hari ${hari} akan ditambahkan ke dokter dengan nik ${nik}` : `Jadwal Pada Hari ${hari} akan diubah ke dokter dengan nik ${nik}`,
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, tambahkan!'
confirmButtonText: (status == 'tambah') ? 'Ya, tambahkan!' : 'Ya, ubah!',
}).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',
method: (status == 'tambah') ? 'POST' : 'PUT',
headers: {
'Content-Type': 'application/json',
'allow-cors-origin': '*',
@ -210,6 +213,7 @@ function TabelJadwalDokter(props) {
() => {
setHari(props.harinya[i])
setOpenDialog(true)
setStatus("tambah")
}
}>
<ModeEditIcon />
@ -226,7 +230,21 @@ function TabelJadwalDokter(props) {
<TableCell>{props.dataJadwal[j].jam_mulai}</TableCell>
<TableCell>{props.dataJadwal[j].jam_selesai}</TableCell>
<TableCell>
<IconButton color="success">
<IconButton color="success"
onClick={
() => {
setHari(props.harinya[i])
let today = new Date()
let jam_mulai_new = new Date(today.getFullYear(), today.getMonth(), today.getDate(), props.dataJadwal[j].jam_mulai.split(":")[0], props.dataJadwal[j].jam_mulai.split(":")[1])
let jam_selesai_new = new Date(today.getFullYear(), today.getMonth(), today.getDate(), props.dataJadwal[j].jam_selesai.split(":")[0], props.dataJadwal[j].jam_selesai.split(":")[1])
setJamMulai(jam_mulai_new)
setJamSelesai(jam_selesai_new)
setOpenDialog(true)
setStatus("edit")
}
}
>
<ModeEditIcon />
</IconButton>
<IconButton color="error">
@ -272,6 +290,7 @@ function TabelJadwalDokter(props) {
label="Jam Mulai"
value={jamMulai}
onChange={(newValue) => {
console.log(newValue, "ini new value")
setJamMulai(newValue);
}}
renderInput={(params) => <TextField {...params} />}
@ -296,7 +315,9 @@ function TabelJadwalDokter(props) {
</DialogContent>
<DialogActions>
<Button variant="outlined" type="submit" color="primary">
Tambah
{
status == "tambah" ? "Tambah" : "Edit"
}
</Button>
</DialogActions>

View File

@ -1,5 +1,5 @@
import { useRef, useState } from "react";
import { useRef, useState ,useEffect } from "react";
import { useRouter } from "next/router";
@ -55,18 +55,15 @@ const StyledTableCell = styled(TableCell)(({ theme }) => ({
}
}));
// const useStyles = makeStyles({
// table: {
// minWidth: 650,
// "& .MuiTableCell-root": {
// borderLeft: "1px solid rgba(224, 224, 224, 1)"
// }
// }
// });
export default function GridIndex(props) {
// console.log(props)
const [errornya , setError] = useState(props.errornya)
console.log(props)
const [errornya, setError] = useState(props.errornya)
const [jadwal_dokter, setJadwalDokter] = useState(false);
useEffect(() => {
setJadwalDokter(props.jadwal_dokter)
},[props.jadwal_dokter])
if (errornya == true) {
MySwal.fire({
@ -121,7 +118,7 @@ export default function GridIndex(props) {
if (role == 'Admin') {
// redirect to dashboard
await router.replace('/admin');
}else if (role == 'Dokter') {
} else if (role == 'Dokter') {
// redirect to dashboard
await router.replace('/dokter');
}
@ -189,16 +186,32 @@ export default function GridIndex(props) {
</TableHead>
<TableBody>
{
props.jadwal_dokter.map((jadwal, index) => {
return (
<TableRow key={index}>
<TableCell>{jadwal.tb_dokter.nama}</TableCell>
<TableCell>{jadwal.tb_dokter.spesialis}</TableCell>
<TableCell>{jadwal.jam_mulai}</TableCell>
<TableCell>{jadwal.jam_selesai}</TableCell>
// (jadwal_dokter == false)
// ?
// <TableRow>
// <TableCell colSpan={4} align="center">
// Masalah Dengan Server
// </TableCell>
// </TableRow>
// :
(jadwal_dokter.length > 0)
?
jadwal_dokter.map((jadwal, index) => {
return (
<TableRow key={index}>
<TableCell>{jadwal.tb_dokter.nama}</TableCell>
<TableCell>{jadwal.tb_dokter.spesialis}</TableCell>
<TableCell>{jadwal.jam_mulai}</TableCell>
<TableCell>{jadwal.jam_selesai}</TableCell>
</TableRow>
)
})
:
<TableRow>
<TableCell colSpan={4} align="center">
Tidak Ada Jadwal Praktek
</TableCell>
</TableRow>
)
})
}
</TableBody>
</Table>

View File

@ -379,7 +379,13 @@ function DataDokterPage(props) {
<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} />
<AppBarAdmin menu="Dokter" backdrop={backdrop} sweetalertload={sweetAlertLoading}
toRoute={
() => {
setBackdrop(true);
}
}
/>
<Box component="main" sx={{ flexGrow: 1, p: 3 }} >
<DrawerHeader />
<Grid container spacing={4}>

View File

@ -593,7 +593,7 @@ function DataObatPage(props) {
}
return (
<div>
<>
<BootstrapDialog
onClose={handleCloseModalEdit}
aria-labelledby="customized-dialog-title"
@ -770,7 +770,13 @@ function DataObatPage(props) {
<Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBarAdmin menu="Obat" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
<AppBarAdmin menu="Obat" backdrop={backdrop} sweetalertload={sweetAlertLoading}
toRoute={
() => {
setBackdrop(true);
}
}
/>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
<Grid container spacing={4}>
@ -916,7 +922,7 @@ function DataObatPage(props) {
</Grid>
</Box>
</Box>
</div>
</>
);
}

View File

@ -641,7 +641,13 @@ function DataPasienPage(props) {
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBarAdmin menu="Pasien" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
<AppBarAdmin menu="Pasien" backdrop={backdrop} sweetalertload={sweetAlertLoading}
toRoute={
() => {
setBackdrop(true);
}
}
/>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
<Grid container spacing={4}>
@ -1184,7 +1190,7 @@ function DataPasienPage(props) {
})
:
<TableRow>
<TableCell colSpan={5} align="center">
<TableCell colSpan={7} align="center">
Tiada Jadwal Pasien
</TableCell>
</TableRow>

View File

@ -44,6 +44,52 @@ import IconButton from '@mui/material/IconButton';
import ModeEditIcon from '@mui/icons-material/ModeEdit';
import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
// for dialog
import PropTypes from 'prop-types';
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';
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 StyledTableCell = styled(TableCell)(({ theme }) => ({
[`&.${tableCellClasses.head}`]: {
@ -116,7 +162,7 @@ function TindakanPage(props) {
// delete tindakan
async function delete_tindakan(id) {
// console.log(id, "ini id yang akan di delete")
try{
try {
const url = process.env.HTTP_URL + "/api/admin/tindakan?id=" + id
console.log(url, "ini url yang akan di delete")
// create fetch post request
@ -139,12 +185,12 @@ function TindakanPage(props) {
toast.success(data.message)
Router.replace(Router.asPath)
// return true
}else{
} else {
// create toast
toast.error(data.message)
// return false
}
}catch(err){
} catch (err) {
console.log(err)
toast.error("Terjadi kesalahan pada server")
}
@ -175,7 +221,7 @@ function TindakanPage(props) {
if (!response) {
// focus to input
tindakanInputRef.current.focus();
}else{
} else {
// clear input
tindakanInputRef.current.value = "";
Router.replace(Router.asPath);
@ -188,7 +234,7 @@ function TindakanPage(props) {
}
// before delete tindakan
async function deleteTindakan(id,nama){
async function deleteTindakan(id, nama) {
console.log(id, "ini id yang akan di hapus")
await setSweetAlertLoading(true);
await MySwal.fire({
@ -212,13 +258,132 @@ function TindakanPage(props) {
await setSweetAlertLoading(false);
}
const [openDialog, setOpenDialog] = useState(false);
const [idEdit, setIdEdit] = useState(null);
const tindakanEditInputRef = useRef();
const [tindakanEdit, setTindakanEdit] = useState(null);
const [periksaTindakanEdit, setPeriksaTindakanEdit] = useState(null);
const editTindakan = async (e) => {
e.preventDefault();
if(tindakanEdit == periksaTindakanEdit){
toast.error("Tiada Perubahan")
// focus input
tindakanEditInputRef.current.focus();
return
}else{
setSweetAlertLoading(true);
setOpenDialog(false);
await MySwal.fire({
title: 'Yakin ?',
text: `Anda akan mengubah detail Tindakan ${periksaTindakanEdit} ke ${tindakanEdit}`,
icon: 'info',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Ya, Ubah!',
cancelButtonText: 'Batal',
}).then(async (result) => {
if (result.value) {
setBackdrop(true);
// await 4 sec
try {
const url = process.env.HTTP_URL + "/api/admin/tindakan?id=" + idEdit
// create fetch post request
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({
tindakan: tindakanEdit
})
})
// get response
const data = await response.json()
if( response.status === 200 ){
// create toast
toast.success(data.message)
Router.replace(Router.asPath)
}else{
// create toast
toast.error(data.message)
}
} catch (error) {
toast.error("Terjadi kesalahan pada server")
console.log(error)
}
} else {
setOpenDialog(true);
}
})
setBackdrop(false);
setSweetAlertLoading(false);
}
}
return (
<div>
<>
<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>
<BootstrapDialog
aria-labelledby="customized-dialog-title"
open={openDialog}
component="form"
onSubmit={editTindakan}
fullWidth={true}
>
<BootstrapDialogTitle id="customized-dialog-title"
onClose={
() => {
setOpenDialog(false);
}
}
>
Edit Tindakan
</BootstrapDialogTitle>
<DialogContent dividers align="center">
<TextField
id="tindakanEditTextField"
value={tindakanEdit}
inputRef={tindakanEditInputRef}
label="Tindakan "
onChange={(e) => {
setTindakanEdit(e.target.value);
}}
placeholder="Masukkan Tindakan "
sx={{ width: "85%", boxShadow: 10 }}
required
/>
</DialogContent>
<DialogActions>
<Button
variant="outlined"
color="primary"
type="submit"
>
Simpan Perubahan
</Button>
</DialogActions>
</BootstrapDialog>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBarAdmin menu="Tindakan" backdrop={backdrop} sweetalertload={sweetAlertLoading} />
<AppBarAdmin menu="Tindakan" backdrop={backdrop} sweetalertload={sweetAlertLoading}
toRoute={
() => {
setBackdrop(true);
}
}
/>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
<Grid container spacing={2}>
@ -276,34 +441,50 @@ function TindakanPage(props) {
<StyledTableCell sx={{
width: "30%",
}}>Aksi</StyledTableCell>
{/* <StyledTableCell align="right">Fat&nbsp;(g)</StyledTableCell>
<StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
<StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell> */}
</TableRow>
</TableHead>
<TableBody>
{props.tindakan.map((row) => (
<TableRow
key={row.id_tindakan}
// sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.nama_tindakan}
</TableCell>
<TableCell>
<IconButton size="small" color="primary">
<ModeEditIcon />
</IconButton>
<IconButton size="small" color="error" onClick={
() => {
deleteTindakan(row.id_tindakan, row.nama_tindakan)
}
} >
<DeleteForeverIcon />
</IconButton>
</TableCell>
</TableRow>
))}
{
(props.tindakan.length > 0)
?
props.tindakan.map((row) => (
<TableRow
key={row.id_tindakan}
// sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell component="th" scope="row">
{row.nama_tindakan}
</TableCell>
<TableCell>
<IconButton size="small" color="primary"
onClick={
() => {
setOpenDialog(true);
setIdEdit(row.id_tindakan);
setTindakanEdit(row.nama_tindakan);
setPeriksaTindakanEdit(row.nama_tindakan);
}
}
>
<ModeEditIcon />
</IconButton>
<IconButton size="small" color="error" onClick={
() => {
deleteTindakan(row.id_tindakan, row.nama_tindakan)
}
} >
<DeleteForeverIcon />
</IconButton>
</TableCell>
</TableRow>
))
:
<TableRow>
<TableCell colSpan={2}>
Tiada Data
</TableCell>
</TableRow>
}
</TableBody>
</Table>
</TableContainer>
@ -318,7 +499,7 @@ function TindakanPage(props) {
</Grid>
</Box>
</Box>
</div>
</>
);
}

View File

@ -18,6 +18,11 @@ import AppBarAdmin from '../../components/admin/appBar';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
// 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";
@ -55,7 +60,9 @@ const DrawerHeader = styled('div')(({ theme }) => ({
function AdminIndexPage() {
// console.log(localStorage.getItem("user_data"))
const [backdrop, setBackdrop] = useState(false);
const [backdrop, setBackdrop] = useState(false); //this is for backdrop
const [sweetAlertLoading, setSweetAlertLoading] = useState(false); //this is for sweet alert loading
// async function cek_user(){
// setBackdrop(true);
@ -67,12 +74,18 @@ function AdminIndexPage() {
// cek_user()
return (
<div>
<>
{/* <ThemeProvider theme={theme}> */}
<Backdrop open={backdrop} sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}><CircularProgress color="inherit" /></Backdrop>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBarAdmin menu="Home" />
<AppBarAdmin menu="Home" backdrop={backdrop} sweetalertload={sweetAlertLoading}
toRoute={
() => {
setBackdrop(true);
}
}
/>
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<DrawerHeader />
<Grid container spacing={2}>
@ -192,7 +205,7 @@ function AdminIndexPage() {
</Box>
</Box>
{/* </ThemeProvider> */}
</div>
</>
);
}

View File

@ -105,6 +105,37 @@ router.delete('/tindakan', basicAuthMiddleware, async (req, res) => {
}
})
// create /tindakan put request
router.put('/tindakan', basicAuthMiddleware, async (req, res) => {
try{
const id = req.query.id
const tindakan = req.body.tindakan
if (!id) {
return res.status(400).send({ status: false, message: `id tidak boleh kosong` })
}
let cek_tindakan = await tb_tindakan.findOne({
where: {
id_tindakan: id
}
})
if (!cek_tindakan) {
return res.status(400).send({ status: false, message: `Tindakan dengan id ${id} tidak ditemukan` })
}
await cek_tindakan.update({
nama_tindakan: tindakan
})
res.status(200).send({ status: true, message: `Tindakan dengan id ${id} berhasil diubah` })
}catch(err){
console.log(err)
res.status(500).send({ status: false, message: "internal server error" })
}
})
// create /obat post request
router.post('/obat', basicAuthMiddleware, async (req, res) => {
console.log("sini untuk obat post")
@ -611,6 +642,34 @@ router.post('/jadwal_dokter', basicAuthMiddleware, async (req, res) => {
}
})
// create /jadwal_dokter put request
router.put('/jadwal_dokter', basicAuthMiddleware, async (req, res) => {
try{
const data_jadwal = req.body
if( !data_jadwal.id_dokter || !data_jadwal.hari || !data_jadwal.jam_mulai || !data_jadwal.jam_selesai){
return res.status(400).send({ status: false, message: `Data tidak lengkap` })
}
let cek_dokter = await tb_dokter.findOne({
where: {
nik: data_jadwal.id_dokter
}
})
if(!cek_dokter){
return res.status(400).send({ status: false, message: `Dokter dengan id ${data_jadwal.id_dokter} tidak ditemukan` })
}
await tb_jadwal_dokter.update(data_jadwal, {
where: {
id_dokter: data_jadwal.id_dokter,
hari: data_jadwal.hari
}
})
res.status(200).send({ status: true, message: `Jadwal dokter dengan NIK ${data_jadwal.id_dokter} berhasil diubah` })
}catch(err){
console.log(err)
res.status(500).send({ status: false, message: "internal server error" })
}
})
// create /jadwal_pasien get request
router.get('/jadwal_pasien', basicAuthMiddleware, async (req, res) => {
console.log("sini untuk jadwal get")