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...