kodingan sebelumnya
unknown
javascript
3 years ago
90 kB
5
Indexable
import React, { useEffect, useState } from 'react'
import { createMuiTheme, IconButton, makeStyles, Menu, MenuItem, MuiThemeProvider, Snackbar, Checkbox, TableCell, TextField, Tooltip, Typography, withStyles } from "@material-ui/core";
import MUIDataTable from "mui-datatables";
import DateFnsUtils from '@date-io/date-fns';
import { KeyboardDatePicker, MuiPickersUtilsProvider, KeyboardTimePicker } from '@material-ui/pickers';
import api from '../api';
import editIcon from '../../assets/1@3x.png';
import { Autocomplete } from '@material-ui/lab';
import format from 'date-fns/format';
import Pagination from '@material-ui/lab/Pagination';
import IcVertical from '../../assets/icon-vertical.png';
import CloseImage from '../../assets/ic_close.png';
import Loader from 'react-loader-spinner'
import { useHistory, useLocation } from 'react-router-dom';
import MuiAlert from '@material-ui/lab/Alert';
function Alert(props) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
const LightTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'rgba(0, 0, 0, 0.87)',
boxShadow: theme.shadows[1],
fontSize: 11,
},
}))(Tooltip);
const CustomCheckbox = withStyles({
root: {
color: '#2a9c6c',
'&$checked': {
color: '#2a9c6c',
},
padding: 5,
borderRadius: 20,
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
marginTop: theme.spacing(2),
},
},
}));
const ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTableDraft1());
// const options = ct.customOptionsSearchAndFilter()
const style = {
position: "sticky",
zIndex: 110
};
export default function DraftingJadwal(props) {
const location = useLocation()
const [dataTable, setDataTable] = useState([])
const [dataTemporary, setDataTemporary] = useState([])
const [anchorEl, setAnchorEl] = useState(null);
// const [loading, setLoading] = useState(second)
const openMenu = Boolean(anchorEl);
const ITEM_HEIGHT = 48;
const menu = [
'Edit',
'Tambah',
'Hapus',
];
const [listHari, setListHari] = useState([
'Senin',
'Selasa',
'Rabu',
'Kamis',
`Jum'at`,
'Sabtu',
'Minggu',
])
const [listAntrian, setListAntrian] = useState([
'FIFO',
'TIMESLOT',
'TIMEBLOK'
])
const [listPembayaran, setListPembayaran] = useState([
'UMUM',
'BPJS/UMUM',
'BPJS'
])
const [listRoom, setListRoom] = useState([])
const [listDataRoom, setListDataRoom] = useState([])
const [listDokter, setLitDokter] = useState([])
const [pickDokter, setPickDokter] = useState(null)
const [visibleTambah, setVisibleTambah] = useState(false)
const [listKlinik, setListKlinik] = useState([])
const [pickKlinik, setPickKlinik] = useState(null)
const [isRefresh, setIsRefresh] = useState(false)
const [selectedIndex, setSelectedIndex] = useState([])
const [selectedOption, setSelectedOption] = useState(null)
const [messageAlert, setMessageAlert] = useState("")
const [statusAlert, setStatusAlert] = useState("")
const [openAlert, setOpenAlert] = useState(false);
const [visibleDelete, setVisibleDelete] = useState(false);
const [rowData, setRowData] = useState(null);
const [errorDokter, setErrorDokter] = useState(false);
const [msgErrorDokter, setMsgErrorDokter] = useState("");
const [errorKlinik, setErrorKlinik] = useState(false);
const [msgErrorKlinik, setMsgErrorKlinik] = useState("");
const forceUpdate = React.useReducer(bool => !bool)[1];
const handleClickMenu = (event, tableMeta) => {
setSelectedOption(tableMeta.rowIndex)
setAnchorEl(event.currentTarget);
};
const handleCloseMenu = () => {
setAnchorEl(null);
setSelectedOption(null)
};
useEffect(() => {
getDataTable()
getListDokter()
getListRoom()
}, [])
const getListDokter = () => {
api.create().getListDokter().then(response => {
console.log(response);
if (response.data) {
if (response.data.status === true) {
let data = []
response.data.data.sort((a, b) => Number(a.name) - Number(b.name)).map((item) => {
if (item.deleted_at === null) {
data.push(item)
}
})
setLitDokter(data)
}
}
})
}
const getDataDokter = (body) => {
console.log(body);
api.create().getDetailDokter(body.id).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === true) {
let data = []
response.data.data && response.data.data[0].polyclinic.sort((a, b) => Number(a.name) - Number(b.name)).map((item) => {
data.push(item)
})
setPickDokter(body)
setListKlinik(data)
forceUpdate()
}
}
})
}
const getListRoom = () => {
api.create().getRoom().then(response => {
console.log(response);
if (response.data) {
if (response.data.status === true) {
let data = []
response.data.data.sort((a, b) => Number(a.name) - Number(b.name)).map((item) => {
if (item.deleted_at === null) {
data.push(item.name)
}
})
setListDataRoom(response.data.data)
setListRoom(data)
}
}
})
}
const getDataTable = (sisa) => {
api.create().getMasterDraftScheduleDokter().then(response => {
console.log(response);
if (response.data) {
if (response.data.status === true) {
if (response.data.data.length > 0) {
let data = []
response.data.data.sort((a, b) => a.doctor_name.localeCompare(b.doctor_name)).map((item) => {
if (item.effective_date.length > 0) {
item.effective_date.map((items) => {
if (items.schedule.length > 0) {
items.schedule.map((i, idx) => {
data.push([
item.id,
item.polyclinic_id,
item.doctor_name,
item.polyclinic_name,
items.date,
i.day,
i.time_start,
i.time_end,
i.time_type,
i.time,
i.quota,
i.service_type,
i.quota_bpjs,
i.service_duration === null ? 0 : i.service_duration,
i.room_name,
i.remarks,
i.updated_at ? i.updated_at : i.created_at,
i.updated_by ? i.updated_by : i.created_by,
idx === 0 ? 1 : 0, //parent
0, //editable
i.id,
item.doctor_id
])
})
}
})
}
})
if (sisa && sisa.length > 0) {
sisa.map((i) => {
data.push(i)
})
}
console.log(data, sisa);
setDataTable(data)
setDataTemporary(data)
setIsRefresh(false)
} else {
let data = []
if (sisa && sisa.length > 0) {
sisa.map((i) => {
data.push(i)
})
}
console.log(data, sisa);
setDataTable(data)
setIsRefresh(false)
}
forceUpdate()
}
}
})
}
const handleAddData = () => {
setIsRefresh(true)
api.create().getLastScheduleDokter(`filter={"doctor_id":[${pickDokter.id}]}`).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === true) {
let idxPoli = response.data.data.findIndex((val) => val.polyclinic_id === pickKlinik.id)
console.log(idxPoli);
if (idxPoli > -1) {
let idxListDoc = dataTable.findIndex((val) => val[0] === response.data.data[idxPoli].id)
let idxListPol = dataTable.findIndex((val) => val[1] === response.data.data[idxPoli].polyclinic_id)
if (idxListDoc > -1 && idxListPol > -1) {
setOpenAlert(true)
setMessageAlert("Draft Master jadwal Dokter sudah terbuat!")
setStatusAlert("warning")
setIsRefresh(false)
} else {
if (response.data.data[idxPoli].schedule.days.length > 0) {
response.data.data[idxPoli].schedule.days.map((i, idx) => {
dataTable.push([
response.data.data[idxPoli].id,
response.data.data[idxPoli].polyclinic_id,
response.data.data[idxPoli].doctor_name,
response.data.data[idxPoli].polyclinic_name,
response.data.data[idxPoli].schedule.effective_date,
i.day,
i.time_start,
i.time_end,
i.time_type_desc,
i.time,
i.quota,
i.service_type_desc,
i.quota_bpjs,
0,
i.room_name,
i.remarks,
"",
"",
idx === 0 ? 1 : 0, //parent
0, //editable
i.id, //konfirmasi
response.data.data[idxPoli].doctor_id
])
// dataTemporary.push([
// response.data.data[idxPoli].id,
// response.data.data[idxPoli].polyclinic_id,
// response.data.data[idxPoli].doctor_name,
// response.data.data[idxPoli].polyclinic_name,
// response.data.data[idxPoli].schedule.effective_date,
// i.day,
// i.time_start,
// i.time_end,
// i.time_type_desc,
// i.time,
// i.quota,
// i.service_type_desc,
// i.quota_bpjs,
// 0,
// i.room_name,
// i.remarks,
// "",
// "",
// idx === 0 ? 1 : 0, //parent
// 0, //editable
// i.id, //konfirmasi
// response.data.data[idxPoli].doctor_id
// ])
})
setVisibleTambah(false)
setPickDokter(null)
setPickKlinik(null)
setTimeout(() => {
console.log(dataTable);
setDataTemporary(dataTable)
setIsRefresh(false)
forceUpdate()
}, 500);
}
}
} else {
dataTable.splice(0, 0, [
pickKlinik.doctor_detail_id,
pickKlinik.id,
pickDokter.name,
pickKlinik.name,
format(new Date(), 'yyyy-MM-dd'),
null,
null,
null,
null,
0,
0,
null,
0,
0,
null,
"",
"",
"",
1,
0,
null,
null
])
console.log(dataTable);
setVisibleTambah(false)
setPickDokter(null)
setPickKlinik(null)
setTimeout(() => {
setIsRefresh(false)
}, 500);
}
}
}
})
// setIsRefresh(true)
// dataTable.splice(0, 0, [
// pickKlinik.doctor_detail_id,
// pickKlinik.id,
// pickDokter.name,
// pickKlinik.name,
// null,
// null,
// null,
// null,
// null,
// 0,
// 0,
// null,
// 0,
// 0,
// null,
// "",
// "",
// "",
// 1,
// 0,
// null
// ])
// console.log(dataTable);
// setVisibleTambah(false)
// setPickDokter(null)
// setPickKlinik(null)
// setTimeout(() => {
// setIsRefresh(false)
// }, 500);
}
const checked = (tableMeta) => {
// console.log(selectedIndex);
forceUpdate()
if (selectedIndex.length > 0) {
let a = selectedIndex.findIndex((val) => val === tableMeta.rowData[0])
if (a > -1) {
return true
} else {
return false
}
} else {
return false
}
}
const handleCheked = (val, tableMeta) => {
// console.log(tableMeta);
// setSelectedIndex(tabl)
let idx = selectedIndex.findIndex((val) => val === tableMeta.rowData[0])
if (idx > -1) {
selectedIndex.splice(idx, 1)
} else {
selectedIndex.push(tableMeta.rowData[0])
}
checked(tableMeta)
}
const handleOption = (option, tableMeta) => {
console.log(tableMeta);
if (option === 'Hapus') {
setRowData(tableMeta)
setVisibleDelete(true)
// if (tableMeta.rowData[18] === 1) {
// dataTable.sort((a, b) => b[0] - a[0]).splice(tableMeta.rowIndex, 1)
// dataTable[tableMeta.rowIndex][18] = 1
// forceUpdate()
// } else {
// dataTable.sort((a, b) => b[0] - a[0]).splice(tableMeta.rowIndex, 1)
// forceUpdate()
// }
}
if (option === 'Edit') {
setIsRefresh(true)
let idx = []
dataTable.sort((a, b) => b[0] - a[0]).map((item, index) => {
if (item[0] === tableMeta.rowData[0]) {
idx.push(index)
}
})
console.log(idx);
if (idx.length > 0) {
idx.map((item) => {
if (dataTable[item][19] === 0) {
dataTable[item][19] = 1
dataTemporary[item][19] = 1
} else {
dataTable[item][19] = 0
dataTemporary[item][19] = 0
}
})
setTimeout(() => {
console.log(dataTable);
setIsRefresh(false)
forceUpdate()
}, 300);
}
}
if (option === 'Tambah') {
setIsRefresh(true)
dataTable.sort((a, b) => b[0] - a[0]).splice(tableMeta.rowIndex + 1, 0,
[
tableMeta.rowData[0],
tableMeta.rowData[1],
tableMeta.rowData[2],
tableMeta.rowData[3],
null,
null,
null,
null,
null,
0,
0,
null,
0,
0,
null,
"",
"",
"",
0,
tableMeta.rowData[19] === 1 ? 1 : 0,
null,
tableMeta[21]
])
setTimeout(() => {
setIsRefresh(false)
console.log(dataTable, tableMeta);
forceUpdate()
}, 500);
}
handleCloseMenu()
}
const saveToDraft = () => {
if (selectedIndex.length > 0) {
setIsRefresh(true)
let data = []
for (var i = 0; i < dataTable.length; ++i) {
for (var j = 0; j < selectedIndex.length; ++j) {
if (dataTable[i][0] === selectedIndex[j]) { // If element is in both the arrays
data.push(dataTable[i]); // Push to arr array
}
}
}
let sisa = []
dataTable.map((i) => {
if (selectedIndex.includes(i[0])) {
} else {
if (i[17] === "") {
sisa.push(i)
}
}
})
console.log(data, sisa, selectedIndex);
let details = []
let detailsCreate = []
let effDate = ''
let type = ''
let idxBy = data.findIndex((val) => val[17] !== "")
const result = Object.values(data.reduce((acc, x) => {
acc[x[1]] = [...(acc[x[1]] || []), x];
return acc;
}, {}));
let dataTampung = []
result.map((items) => {
let fixCreate = false
let idxCreate = items.findIndex((val) => val[17] === "")
if (idxCreate > -1) {
fixCreate = true
}
if (fixCreate) {
items.map((i, index) => {
let room = listDataRoom.findIndex((val) => val.name === i[14])
let idx = detailsCreate.findIndex((val) => val.id && val.id === i[0])
if (idx > -1) {
let hari = i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7
console.log(detailsCreate[idx]);
// if (!i[20]) {
let idxSess = detailsCreate[idx].schedule.findIndex((val) => val.day_id && val.day_id === hari)
if (idxSess > -1) {
detailsCreate[idx].schedule[idxSess].session.push({
"service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
"time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
"time": Number(i[9]),
"quota": Number(i[10]),
"quota_bpjs": Number(i[12]),
"service_duration": Number(i[13]),
"time_start": String(i[6]).substring(0, 5),
"time_end": String(i[7]).substring(0, 5),
"room_id": listDataRoom[room].id,
"remarks": i[15],
"internal_notes": ""
})
} else {
detailsCreate[idx].schedule.push({
"day_id": i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7,
"session": [
{
"service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
"time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
"time": Number(i[9]),
"quota": Number(i[10]),
"quota_bpjs": Number(i[12]),
"service_duration": Number(i[13]),
"time_start": String(i[6]).substring(0, 5),
"time_end": String(i[7]).substring(0, 5),
"room_id": listDataRoom[room].id,
"remarks": i[15],
"internal_notes": ""
}
]
})
}
// }
} else {
detailsCreate.push({
"id": i[0],
"effective_date": format(new Date(i[4]), 'yyyy-MM-dd'),
"schedule": [
{
"day_id": i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7,
"session": [
{
"service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
"time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
"time": Number(i[9]),
"quota": Number(i[10]),
"quota_bpjs": Number(i[12]),
"service_duration": Number(i[13]),
"time_start": String(i[6]).substring(0, 5),
"time_end": String(i[7]).substring(0, 5),
"room_id": listDataRoom[room].id,
"remarks": i[15],
"internal_notes": ""
}
]
}
]
})
}
})
} else {
items.map((i, index) => {
let room = listDataRoom.findIndex((val) => val.name === i[14])
let idx = details.findIndex((val) => val.id && val.id === i[0])
let idSchedule = Number(i[20])
if (idx > -1) {
if (idSchedule) {
details[idx].schedule.push({
"id": idSchedule,
"day_id": i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7,
"service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
"time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
"time": Number(i[9]),
"quota": Number(i[10]),
"quota_bpjs": Number(i[12]),
"service_duration": Number(i[13]),
"time_start": String(i[6]).substring(0, 5),
"time_end": String(i[7]).substring(0, 5),
"room_id": listDataRoom[room].id,
"remarks": i[15],
})
} else {
details[idx].schedule.push({
"day_id": i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7,
"service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
"time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
"time": Number(i[9]),
"quota": Number(i[10]),
"quota_bpjs": Number(i[12]),
"service_duration": Number(i[13]),
"time_start": String(i[6]).substring(0, 5),
"time_end": String(i[7]).substring(0, 5),
"room_id": listDataRoom[room].id,
"remarks": i[15],
})
}
} else {
if (idSchedule) {
details.push({
"id": i[0],
"doctor_id": i[21],
"polyclinic_id": i[1],
"activeinactive": 1,
"effective_date": format(new Date(i[4]), 'yyyy-MM-dd'),
"schedule": [
{
"id": idSchedule,
"day_id": i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7,
"service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
"time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
"time": Number(i[9]),
"quota": i[10],
"quota_bpjs": i[12],
"service_duration": i[13],
"time_start": String(i[6]).substring(0, 5),
"time_end": String(i[7]).substring(0, 5),
"room_id": listDataRoom[room].id,
"remarks": i[15],
}
]
})
} else {
details.push({
"id": i[0],
"doctor_id": i[21],
"polyclinic_id": i[1],
"activeinactive": 1,
"effective_date": format(new Date(i[4]), 'yyyy-MM-dd'),
"schedule": [
{
"day_id": i[5] === "Senin" ? 1 : i[5] === "Selasa" ? 2 : i[5] === "Rabu" ? 3 : i[5] === "Kamis" ? 4 : i[5] === "Jum'at" ? 5 : i[5] === "Sabtu" ? 6 : 7,
"service_type": i[11] === "UMUM" ? 2 : i[11] === "BPJS" ? 1 : 3,
"time_type": i[8] === "FIFO" ? 3 : i[8] === "TIMESLOT" ? 1 : 2,
"time": i[9],
"quota": i[10],
"quota_bpjs": i[12],
"service_duration": i[13],
"time_start": String(i[6]).substring(0, 5),
"time_end": String(i[7]).substring(0, 5),
"room_id": listDataRoom[room].id,
"remarks": i[15],
}
]
})
}
}
})
}
})
if (detailsCreate.length > 0) {
let payload = {
"doctor_details": detailsCreate
}
api.create().createDraftScheduleDokter(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === true) {
setTimeout(() => {
setOpenAlert(true)
setMessageAlert(response.data.data)
setStatusAlert("success")
// setSelectedIndex([])
// getDataTable(sisa)
}, 200);
} else {
if (response.data.data) {
// setOpenAlert(true)
// setMessageAlert(JSON.stringify(response.data.data))
// setStatusAlert("warning")
alert(JSON.stringify(response.data.data))
setIsRefresh(false)
}
}
}
})
}
if (details.length > 0) {
let payload = details
console.log(payload);
api.create().editDraftScheduleDokter(payload[0]).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === true) {
setTimeout(() => {
setOpenAlert(true)
setMessageAlert(response.data.data)
setStatusAlert("success")
// setSelectedIndex([])
// getDataTable(sisa)
}, 200);
} else {
if (response.data.data) {
// setOpenAlert(true)
// setMessageAlert(JSON.stringify(response.data.data))
// setStatusAlert("warning")
alert(JSON.stringify(response.data.data))
setIsRefresh(false)
}
}
}
})
}
setTimeout(() => {
setSelectedIndex([])
getDataTable(sisa)
}, 500);
} else {
// setOpenAlert(true)
// setMessageAlert("Jadwal belum dipilih")
// setStatusAlert("warning")
alert("Jadwal belum dipilih")
setIsRefresh(false)
}
}
const saveToMaster = () => {
if (selectedIndex.length > 0) {
setIsRefresh(true)
let data = []
for (var i = 0; i < dataTable.length; ++i) {
for (var j = 0; j < selectedIndex.length; ++j) {
if (dataTable[i][0] === selectedIndex[j]) { // If element is in both the arrays
data.push(dataTable[i]); // Push to arr array
}
}
}
console.log(data);
let details = []
data.map((i) => {
if (!i[14]) {
// setOpenAlert(true)
// setMessageAlert("Ruangan tidak boleh kosong")
// setStatusAlert("warning")
alert("Ruangan tidak boleh kosong")
setIsRefresh(false)
} else {
let idx = details.findIndex((val) => val === i[20])
if (idx > -1) {
} else {
details.push(i[20])
}
}
})
let payload = {
"id": details
}
console.log(payload);
api.create().createMasterScheduleFromDraft(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === true) {
setOpenAlert(true)
setMessageAlert(JSON.stringify(response.data.data))
setStatusAlert("success")
setTimeout(() => {
setIsRefresh(false)
setSelectedIndex([])
let sisa = []
dataTable.map((i) => {
if (i[0] !== data[0] && i[17] === "") {
sisa.push(i)
}
})
getDataTable(sisa)
}, 200);
} else {
if (response.data.data) {
// setOpenAlert(true)
// setMessageAlert(JSON.stringify(response.data.data))
// setStatusAlert("warning")
alert(JSON.stringify(response.data.data))
setIsRefresh(false)
}
}
}
})
} else {
// setOpenAlert(true)
// setMessageAlert("Jadwal belum dipilih")
// setStatusAlert("warning")
alert("Jadwal belum dipilih")
setIsRefresh(false)
}
}
const handleDelete = (type) => {
setIsRefresh(true)
let payload;
let data = rowData.rowData
let room = listDataRoom.findIndex((val) => val.name === data[14])
console.log(data);
if (type === 'baris') {
if (rowData.rowData[17] !== "") {
payload = {
"id": data[0],
"doctor_id": data[21],
"polyclinic_id": data[1],
"activeinactive": 1,
"effective_date": data[4],
"schedule": [{
"id": Number(data[20]),
"service_type": data[11] === "UMUM" ? 2 : data[11] === "BPJS" ? 1 : 3,
"time_type": data[8] === "FIFO" ? 3 : data[8] === "TIMESLOT" ? 1 : 2,
"quota": Number(data[10]),
"quota_bpjs": Number(data[12]),
"day_id": data[5] === "Senin" ? 1 : data[5] === "Selasa" ? 2 : data[5] === "Rabu" ? 3 : data[5] === "Kamis" ? 4 : data[5] === "Jum'at" ? 5 : data[5] === "Sabtu" ? 6 : 7,
"time_start": String(data[6]).substring(0, 5),
"time_end": String(data[7]).substring(0, 5),
"time": Number(data[9]),
"room_id": listDataRoom[room].id,
"remarks": data[15],
"activeinactive": 0
}]
}
api.create().editDraftScheduleDokter(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === true) {
setOpenAlert(true)
setMessageAlert(JSON.stringify(response.data.data))
setStatusAlert("success")
setTimeout(() => {
setVisibleDelete(false)
setIsRefresh(false)
let sisa = []
dataTable.map((i) => {
if (i[0] !== data[0] && i[17] === "") {
sisa.push(i)
}
})
getDataTable(sisa)
}, 200);
} else {
if (response.data.data) {
setOpenAlert(true)
setMessageAlert(JSON.stringify(response.data.data))
setStatusAlert("warning")
setIsRefresh(false)
}
}
} else {
setOpenAlert(true)
setMessageAlert(JSON.stringify(response.problem))
setStatusAlert("error")
setIsRefresh(false)
}
})
} else {
setVisibleDelete(false)
if (data[18] === 1) {
// dataTable.sort((a, b) => b[0] - a[0]).splice(tableMeta.rowIndex, 1)
dataTable[rowData.rowIndex][18] = 1
forceUpdate()
} else {
dataTable.sort((a, b) => b[0] - a[0]).splice(rowData.rowIndex, 1)
forceUpdate()
}
setTimeout(() => {
setIsRefresh(false)
}, 500);
}
} else {
if (rowData.rowData[20]) {
payload = {
"id": data[0],
"doctor_id": data[21],
"polyclinic_id": data[1],
"activeinactive": 0,
"effective_date": data[4],
"schedule": [
{
"id": data[20],
"service_type": data[11] === "UMUM" ? 2 : data[11] === "BPJS" ? 1 : 3,
"time_type": data[8] === "FIFO" ? 3 : data[8] === "TIMESLOT" ? 1 : 2,
"quota": data[10],
"quota_bpjs": data[12],
"day_id": data[5] === "Senin" ? 1 : data[5] === "Selasa" ? 2 : data[5] === "Rabu" ? 3 : data[5] === "Kamis" ? 4 : data[5] === "Jum'at" ? 5 : data[5] === "Sabtu" ? 6 : 7,
"time_start": String(data[6]).substring(0, 5),
"time_end": String(data[7]).substring(0, 5),
"time": data[9],
"room_id": listDataRoom[room].id,
"remarks": data[15],
"activeinactive": 0
}
]
}
api.create().editDraftScheduleDokter(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === true) {
setOpenAlert(true)
setMessageAlert(JSON.stringify(response.data.data))
setStatusAlert("success")
setTimeout(() => {
setVisibleDelete(false)
let sisa = []
dataTable.map((i) => {
if (i[0] !== data[0] && i[17] === "") {
sisa.push(i)
}
})
getDataTable(sisa)
}, 200);
} else {
if (response.data.data) {
setOpenAlert(true)
setMessageAlert(JSON.stringify(response.data.data))
setStatusAlert("warning")
setIsRefresh(false)
}
}
} else {
setOpenAlert(true)
setMessageAlert(JSON.stringify(response.problem))
setStatusAlert("error")
setIsRefresh(false)
}
})
} else {
setVisibleDelete(false)
if (data[18] === 1) {
// dataTable.sort((a, b) => b[0] - a[0]).splice(tableMeta.rowIndex, 1)
dataTable[rowData.rowIndex][18] = 1
forceUpdate()
} else {
dataTable.sort((a, b) => b[0] - a[0]).splice(rowData.rowIndex, 1)
forceUpdate()
}
setIsRefresh(false)
}
}
}
const columns = [
{
name: 'id',
label: 'id',
options: {
sort: true,
sortDirection: 'asc',
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}></Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'center' }}>
{tableMeta.rowData[18] === 1 ?
<CustomCheckbox
checked={checked(tableMeta)}
onChange={() => handleCheked(val, tableMeta)}
/> : ""}
</div>
)
}
}
}, {
name: '',
options: {
display: false
}
}, {
name: "Nama Dokter",
label: "Nama Dokter",
options: {
// filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.label}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[18] === 1 ? val : ""}
</div>
)
}
}
}, {
name: "Nama Klinik",
options: {
// filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[18] === 1 ? val : ""}
</div>
)
}
}
}, {
name: "Effective Date",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[18] === 1 ?
tableMeta.rowData[19] === 1 ?
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
format="yyyy-MM-dd"
minDateMessage='Tanggal tidak boleh kurang dari hari ini'
style={{ width: 200 }}
clearLabel
minDate={new Date()}
value={new Date(val)}
onChange={(date) => {
if (!isNaN(date.getTime())) {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = format(new Date(date), 'yyyy-MM-dd')
forceUpdate()
}
console.log(date, dataTable[tableMeta.rowIndex]);
}}
KeyboardButtonProps={{
'aria-label': 'change time',
}}
/>
</MuiPickersUtilsProvider> :
format(new Date(val), 'yyyy-MM-dd') : null
}
</div>
)
}
}
}, {
name: "Hari",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<Autocomplete
style={{ width: 100 }}
options={listHari}
getOptionLabel={(option) => option}
defaultValue={val}
onChange={(event, newInputValue) => {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = newInputValue
forceUpdate()
}}
renderInput={(params) =>
<TextField
{...params}
InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
InputLabelProps={{ style: { color: '#7e8085' } }}
/>
}
/>
: val}
</div>
)
}
}
}, {
name: "Jam Mulai",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
let time = isNaN(new Date(val).getTime()) ? new Date(`2014-08-18T${val}`) : val
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardTimePicker
style={{ width: 100 }}
clearLabel
ampm={false}
value={time}
onChange={(date) => {
if (date !== null) {
if (!isNaN(date.getTime())) {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = format(new Date(date), 'HH:mm:ss')
forceUpdate()
}
}
}}
KeyboardButtonProps={{
'aria-label': 'change time',
}}
/>
</MuiPickersUtilsProvider>
: format(new Date(time), 'HH:mm')}
</div>
)
}
}
}, {
name: "Jam Selesai",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
let time = isNaN(new Date(val).getTime()) ? new Date(`2014-08-18T${val}`) : val
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardTimePicker
style={{ width: 100 }}
clearLabel
ampm={false}
value={time}
onChange={(date) => {
if (date !== null) {
if (!isNaN(date.getTime())) {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = format(new Date(date), 'HH:mm:ss')
forceUpdate()
}
}
}}
KeyboardButtonProps={{
'aria-label': 'change time',
}}
/>
</MuiPickersUtilsProvider>
: format(new Date(time), 'HH:mm')}
</div>
)
}
}
}, {
name: "Tipe Antrian",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<Autocomplete
style={{ width: 150 }}
options={listAntrian}
getOptionLabel={(option) => option}
defaultValue={val}
onChange={(event, newInputValue) => {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = newInputValue
forceUpdate()
}}
renderInput={(params) =>
<TextField
{...params}
InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
InputLabelProps={{ style: { color: '#7e8085' } }}
/>
}
/>
: val}
</div>
)
}
}
}, {
name: "Slot Waktu",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<TextField
style={{ width: 80 }}
defaultValue={val}
onBlur={(e) => {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = e.target.value
forceUpdate()
}}
/>
: val}
</div>
)
}
}
}, {
name: "Kuota Pasien",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<TextField
style={{ width: 80 }}
defaultValue={val}
onBlur={(e) => {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = e.target.value
forceUpdate()
}}
/>
: val}
</div>
)
}
}
}, {
name: "Opsi Pembayaran",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<Autocomplete
style={{ width: 120 }}
options={listPembayaran}
getOptionLabel={(option) => option}
defaultValue={val}
onChange={(event, newInputValue) => {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = newInputValue
forceUpdate()
}}
renderInput={(params) =>
<TextField
{...params}
InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
InputLabelProps={{ style: { color: '#7e8085' } }}
/>
}
/>
: val}
</div>
)
}
}
}, {
name: "Kuota BPJS",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<TextField
style={{ width: 80 }}
defaultValue={val}
onBlur={(e) => {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = e.target.value
forceUpdate()
}}
/>
: val}
</div>
)
}
}
}, {
name: "Durasi Layanan",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<TextField
style={{ width: 80 }}
defaultValue={val}
onBlur={(e) => {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = e.target.value
forceUpdate()
}}
/>
: val}
</div>
)
}
}
}, {
name: "Lokasi Praktek",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<Autocomplete
style={{ width: 80 }}
options={listRoom}
getOptionLabel={(option) => option}
defaultValue={val}
onChange={(event, newInputValue) => {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = newInputValue
forceUpdate()
}}
renderInput={(params) =>
<TextField
{...params}
InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
InputLabelProps={{ style: { color: '#7e8085' } }}
/>
}
/>
: val}
</div>
)
}
}
}, {
name: "Catatan Tambahan",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ textAlign: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<TextField
style={{ width: 80 }}
defaultValue={val}
onBlur={(e) => {
setSelectedIndex([])
dataTable[tableMeta.rowIndex][tableMeta.columnIndex] = e.target.value
forceUpdate()
}}
/>
: val}
</div>
)
}
}
}, {
name: "Tgl Diperbarui",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
}
}, {
name: "Diperbarui Oleh",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
}
}, {
name: "Aksi",
options: {
filter: false,
customHeadRender: (columnMeta) => (
<TableCell style={{ ...style, top: 0, zIndex: 10, backgroundColor: 'white' }}>
<Typography style={{ textAlign: 'left', color: '#2a9c6c', fontSize: '12pt', fontWeight: 'bold' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', justifyContent: 'left' }}>
{tableMeta.rowData[19] === 1 ?
<IconButton
style={{ outline: 'none' }}
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={(e) => handleClickMenu(e, tableMeta)}
>
<img src={IcVertical} style={{ width: 24 }} />
</IconButton> :
<IconButton
style={{ outline: 'none' }}
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={() => handleOption('Edit', tableMeta)}
>
<img src={IcVertical} style={{ width: 24 }} />
</IconButton>
}
{selectedOption === tableMeta.rowIndex && (
<Menu
id="long-menu"
anchorEl={anchorEl}
keepMounted
open={openMenu}
onClose={handleCloseMenu}
PaperProps={{
style: {
maxHeight: ITEM_HEIGHT * 4.5,
padding: '0 1px',
width: 'auto',
minWidth: 'auto',
borderRadius: 5,
boxShadow: '2px 2px 5px 0 #cecece',
left: '1000px !important'
},
}}
>
{tableMeta.rowData[19] === 1 && (
<MenuItem>
<div onClick={() => handleOption('Edit', tableMeta)}>
<Typography style={{ fontSize: 14, color: '#278863', fontWeight: '500' }}>{'View'}</Typography>
</div>
</MenuItem>
)}
{tableMeta.rowData[19] === 1 && (
<MenuItem >
<div onClick={() => handleOption('Tambah', tableMeta)}>
<Typography style={{ fontSize: 14, color: '#278863', fontWeight: '500' }}>{'Tambah'}</Typography>
</div>
</MenuItem>
)}
{tableMeta.rowData[19] === 1 && (
<MenuItem >
<div onClick={() => handleOption('Hapus', tableMeta)}>
<Typography style={{ fontSize: 14, color: '#278863', fontWeight: '500' }}>{'Hapus'}</Typography>
</div>
</MenuItem>
)}
</Menu>
)}
</div>
)
}
}
}, {
name: "",
options: {
display: false,
filter: false
}
}, {
name: "",
options: {
display: false,
filter: false
}
}, {
name: "",
options: {
display: false,
filter: false
}
}]
const options = {
filterType: 'multiselect',
fixedHeader: true,
filter: true,
search: true,
print: false,
download: false,
selectableRows: false,
viewColumns: false,
rowsPerPage: 10,
responsive: 'scrollMaxHeight',
sort: true,
onTableChange: (action, tableState) => {
// console.log(action, tableState);
let index = tableState.selectedRows.data.length > 0 && tableState.selectedRows.data.map((i) => { return [i.index] })
switch (action) {
case 'rowDelete':
break;
case 'changeRowsPerPage':
break;
case 'rowSelectionChange':
let a = []
for (var i = 0; i < index.length; i++)
a.push(dataTable[index[i]])
console.log(a);
break;
default:
break;
}
},
onRowonRowSelectionChange: (currentRowsSelected, allRowsSelected, rowsSelected) => {
console.log(currentRowsSelected, allRowsSelected, rowsSelected);
},
customToolbarSelect: (selectedRows, displayData, setSelectedRows) => (
<div></div>
),
textLabels: {
body: {
noMatch: "Tidak ada data yang tersedia",
toolTip: "Sort",
columnHeaderTooltip: column => `Sort for ${column.label}`
},
pagination: {
next: "Next Page",
previous: "Previous Page",
rowsPerPage: "Rows per page:",
displayRows: "of",
},
toolbar: {
search: "Search",
downloadCsv: "Download CSV",
print: "Print",
viewColumns: "View Columns",
filterTable: "Filter Table",
},
filter: {
all: "All",
title: "FILTERS",
reset: "RESET",
},
viewColumns: {
title: "Show Columns",
titleAria: "Show/Hide Table Columns",
},
selectedRows: {
text: "row(s) dipilih",
delete: "Delete",
deleteAria: "Delete Selected Rows",
},
}
}
const loadingComponent = (
<div style={{ position: 'fixed', zIndex: 1500, top: 0, left: 0, width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'rgba(255,255,255,0.8)' }}>
<Loader
type="Puff"
color="#2a9c6c"
height={100}
width={100}
/>
</div>
);
const handleClose = (event, reason) => {
if (reason === 'clickaway') {
return;
}
setOpenAlert(false);
};
return (
<div style={{ maxHeight: props.height - 80 }}>
{isRefresh ? loadingComponent : null}
<Snackbar open={openAlert} autoHideDuration={2000} onClose={handleClose}>
<Alert onClose={handleClose} severity={statusAlert}>
{messageAlert}
</Alert>
</Snackbar>
<div style={{ width: '100%', margin: '.5vh', display: 'flex', padding: '.4vh .2vw 0', justifyContent: 'space-between' }}>
{location.state.create && (
<button style={{ padding: '4px 20px', backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', borderColor: 'transparent', outline: 'none' }}
onClick={() => {
setVisibleTambah(true)
// history.push('/schedule/draft-master-jadwal')
}}
>
<div style={{ display: 'flex' }}>
{/* <img style={{ margin: 'auto', width: 25, marginTop: 0, marginRight: 5 }} src="https://img.icons8.com/flat_round/50/000000/plus.png" /> */}
<Typography style={{ fontSize: 13, margin: 'auto', color: 'white' }}>Buat Draft</Typography>
</div>
</button>
)}
<div>
{location.state.create && (
<button style={{ padding: '4px 20px', backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', borderColor: 'transparent', outline: 'none' }}
onClick={() => saveToDraft()}
>
<div style={{ display: 'flex' }}>
{/* <img style={{ margin: 'auto', width: 25, marginTop: 0, marginRight: 5 }} src="https://img.icons8.com/flat_round/50/000000/plus.png" /> */}
<Typography style={{ fontSize: 13, margin: 'auto', marginRight: 8, color: 'white' }}>Simpan Sebagai Draft</Typography>
</div>
</button>
)}
{location.state.create && location.state.update && (
<button style={{ padding: '4px 20px', backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', borderColor: 'transparent', outline: 'none', marginLeft: '.6vw' }}
onClick={() => saveToMaster()}
>
<div style={{ display: 'flex' }}>
{/* <img style={{ margin: 'auto', width: 25, marginTop: 0, marginRight: 5 }} src="https://img.icons8.com/flat_round/50/000000/plus.png" /> */}
<Typography style={{ fontSize: 13, margin: 'auto', marginRight: 8, color: 'white' }}>Simpan ke Master</Typography>
</div>
</button>
)}
</div>
</div>
<div >
{!isRefresh && (
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
)}
</div>
{visibleTambah && (
<div className="App app-popup-show">
<div className="popup-content background-white" style={{ borderRadius: 8, backgroundColor: 'white' }}>
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: 'black', fontSize: 18, }}>Tambah Draft</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => setVisibleTambah(false)}
>
<img src={CloseImage} style={{ width: 20, height: 20 }} />
</button>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20, paddingRight: 50, paddingLeft: 50 }}>
<div className="column-1">
<Autocomplete
style={{ marginTop: 1 }}
options={listDokter}
getOptionLabel={(option) => option.name}
onChange={(event, newInputValue) => {
getDataDokter(newInputValue)
setErrorDokter(false)
setMsgErrorDokter("")
}}
renderInput={(params) =>
<TextField
{...params}
required
error={errorDokter}
helperText={msgErrorDokter}
InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
InputLabelProps={{ style: { color: '#7e8085' } }}
label="Dokter"
/>
}
/>
</div>
<div className="column-2">
<div style={{}}>
<Autocomplete
// multiple
disabled={listKlinik.length > 0 ? false : true}
style={{ marginTop: 1 }}
options={listKlinik}
getOptionLabel={(option) => option.name}
debug
onChange={(event, newInputValue) => {
setPickKlinik(newInputValue)
setErrorKlinik(false)
setMsgErrorKlinik("")
}}
renderInput={(params) =>
<TextField
{...params}
required
error={errorKlinik}
helperText={msgErrorKlinik}
InputProps={{ ...params.InputProps, style: { fontSize: 13 } }}
InputLabelProps={{ style: { color: '#7e8085' } }}
label="Klinik"
/>
}
/>
</div>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20, borderBottomLeftRadius: 20, borderBottomRightRadius: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
</div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<div onClick={() => setVisibleTambah(false)} style={{ height: 32, width: 50, backgroundColor: "transparent", borderRadius: 20, marginRight: 10, cursor: 'pointer' }} >
<Typography style={{ color: '#706d6d', fontSize: 15, marginTop: 5 }}>Batal</Typography>
</div>
<div onClick={(e) => {
if (pickDokter === null) {
setErrorDokter(true)
setMsgErrorDokter("Dokter wajib diisi")
} else if (pickKlinik === null) {
setErrorKlinik(true)
setMsgErrorKlinik("Klinik wajib diisi")
} else {
handleAddData()
}
}} style={{ height: 32, width: 150, backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', cursor: 'pointer' }} >
<Typography style={{ color: 'white', fontSize: 15, marginTop: 5 }}>Simpan</Typography>
</div>
</div>
</div>
</div>
</div>
)}
{visibleDelete && (
<div className="App app-popup-show">
<div className="popup-content background-white" style={{ borderRadius: 8, backgroundColor: 'white' }}>
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: 'black', fontSize: 18, }}>Delete Draft</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => setVisibleDelete(false)}
>
<img src={CloseImage} style={{ width: 20, height: 20 }} />
</button>
</div>
</div>
<div className="" style={{ padding: 20, paddingRight: 50, paddingLeft: 50 }}>
<Typography>Apakah anda yakin ingin menghapus jadwal drafting tersebut?</Typography>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20, borderBottomLeftRadius: 20, borderBottomRightRadius: 20 }}>
<div className="column-1" style={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }}>
<div onClick={(e) => handleDelete('baris')} style={{ height: 32, width: 150, backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', cursor: 'pointer' }} >
<Typography style={{ color: 'white', fontSize: 15, marginTop: 5 }}>Per Baris</Typography>
</div>
</div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<div onClick={(e) => handleDelete('dokter')} style={{ height: 32, width: 150, backgroundColor: '#2a9c6c', borderRadius: 20, boxShadow: '5px 2px 10px 0 #999999', cursor: 'pointer' }} >
<Typography style={{ color: 'white', fontSize: 15, marginTop: 5 }}>Per Dokter</Typography>
</div>
</div>
</div>
</div>
</div>
)}
</div>
)
}
Editor is loading...