finished dokter / admin almost done

This commit is contained in:
kicap1992
2022-05-04 00:44:09 +08:00
parent c147175e52
commit 099f9fe155
35 changed files with 16329 additions and 612 deletions

View File

@ -1,10 +1,11 @@
import * as React from 'react';
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';
@ -27,18 +28,64 @@ import TableRow from '@mui/material/TableRow';
import AppBarAdmin from '../../components/admin/appBar';
function createData(name, calories, fat, carbs, protein) {
return { name, calories, fat, carbs, protein };
}
// backdrop
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
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),
// 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,
@ -57,23 +104,289 @@ const DrawerHeader = styled('div')(({ theme }) => ({
...theme.mixins.toolbar,
}));
function DataDokterPage() {
const [age, setAge] = React.useState('');
const handleChange = (event) => {
setAge(event.target.value);
};
// ini untuk number
const NumberFormatCustom = forwardRef(function NumberFormatCustom(props, ref) {
const { onChange, ...other } = props;
return (
<div>
<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" />
<Box component="main" sx={{ flexGrow: 1, p: 3 }}>
<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: "100%", minHeight: 210, boxShadow: 10 }}>
<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',
@ -84,6 +397,28 @@ function DataDokterPage() {
}}>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"
@ -91,6 +426,8 @@ function DataDokterPage() {
/>
<Box sx={{ padding: "10px" }}></Box>
<TextField
required
inputRef={alamatInputRef}
id="alamatTextField"
label="Alamat"
placeholder="Masukkan Alamat"
@ -98,53 +435,117 @@ function DataDokterPage() {
/>
<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={age}
value={spesialis}
label="Jenis"
onChange={handleChange}
onChange={
(e) => { setSpesialis(e.target.value) }
}
>
<MenuItem value="">
<MenuItem value="" selected disabled>
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</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>
<TextField
id="usernameTextField"
label="Username"
placeholder="Masukkan Username"
sx={{ width: "85%", boxShadow: 10 }}
/>
<Divider />
<Box sx={{ padding: "10px" }}></Box>
<TextField
id="passwordTextField"
label="Password"
placeholder="Masukkan Password"
sx={{ width: "85%", boxShadow: 10 }}
/>
<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>
<TextField
id="konfirmasiPasswordTextField"
label="Konfirmasi Password"
placeholder="Masukkan Konfirmasi Password"
sx={{ width: "85%", boxShadow: 10 }}
/>
<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">Tambah</Button>
<Button variant="contained" type="submit">Tambah</Button>
</Box>
<Box sx={{ padding: "10px" }}></Box>
</Card>
@ -164,40 +565,59 @@ function DataDokterPage() {
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&nbsp;(g)</StyledTableCell>
<StyledTableCell align="right">Carbs&nbsp;(g)</StyledTableCell>
<StyledTableCell align="right">Protein&nbsp;(g)</StyledTableCell>
<StyledTableCell>NIK</StyledTableCell>
<StyledTableCell>Nama</StyledTableCell>
<StyledTableCell>Spesialis</StyledTableCell>
<StyledTableCell>Telepon</StyledTableCell>
<StyledTableCell width={"10%"}>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>
))}
<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 sx={{ padding: "5px" }}></Box>
<Box textAlign="center">
<Button variant="contained">Cetak</Button>
</Box>
</Box> */}
<Box sx={{ padding: "10px" }}></Box>
</Card>
</Grid>
@ -205,8 +625,56 @@ function DataDokterPage() {
</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,
}
};
}
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;

View File

@ -74,13 +74,6 @@ import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
const Transition = forwardRef(function Transition(props, ref) { // for modal history
return <Slide direction="up" ref={ref} {...props} />;
});
@ -932,6 +925,14 @@ export const getServerSideProps = withIronSessionSsr(
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")

File diff suppressed because it is too large Load Diff

View File

@ -325,6 +325,14 @@ function TindakanPage(props) {
export const getServerSideProps = withIronSessionSsr(
async function getServerSideProps({ req }) {
const user = req.session.user;
if (!user) {
return {
redirect: {
destination: '/?error=true',
permanent: false,
}
};
}
console.log(user, "sini di server side props");
// console.log(req.query)

View File

@ -1,4 +1,4 @@
import { useState } from "react";
import { useState } from "react";
import { styled } from '@mui/material/styles';
import Box from '@mui/material/Box';
import CssBaseline from '@mui/material/CssBaseline';
@ -65,7 +65,7 @@ function AdminIndexPage() {
// }
// }
// cek_user()
return (
<div>
{/* <ThemeProvider theme={theme}> */}
@ -199,8 +199,42 @@ function AdminIndexPage() {
export const getServerSideProps = withIronSessionSsr(
async function getServerSideProps({ req }) {
const user = req.session.user;
if (!user) {
return {
redirect: {
destination: '/?error=true',
permanent: false,
}
};
}
console.log(user, "sini di server side props");
// console.log(req.query)
console.log(user.role , "ini rolenya")
if (user.role != "Admin") {
try {
console.log("jalankannya ini di admin")
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")