Untitled
unknown
plain_text
a year ago
33 kB
4
Indexable
import React, { useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; import "../../assets/stylesheets/newdoctorcitation.css"; import { DateTimePicker } from "./newcitation/DateTimePicker"; import { PatientPicker } from "./newcitation/PatientPicker"; import { PatientSummary } from "./newcitation/PatientSummary"; import { SubmitButtons } from "./newcitation/SubmitButtons"; import { TherapistPicker } from "./newcitation/TherapistPicker"; import { TreatmentPicker } from "./newcitation/TreatmentPicker"; import CircularProgress from "@material-ui/core/CircularProgress"; import Snackbar from "@material-ui/core/Snackbar"; import MuiAlert from "@material-ui/lab/Alert"; import FormControlLabel from "@material-ui/core/FormControlLabel"; import Checkbox from "@material-ui/core/Checkbox"; import Tooltip from "@material-ui/core/Tooltip"; import { useSelector } from "react-redux"; import Chip from "@material-ui/core/Chip"; import GetUserToken from "../../utils/GetUserToken"; export const DoctorCitationV2 = ({ assistant, setAssistant, schedule, setSchedule, handleClose, infoRoute, setIsCalendarUpdated, setShow, }) => { // translation const { t } = useTranslation(); // auth const userToken = GetUserToken(); const [loading, setLoading] = useState(true); const [loadingschedule, setLoadingschedule] = useState(false); const [error, setError] = useState(false); const [required, setRequired] = useState(false); const [doctors, setDoctors] = useState([]); const [treatments, setTreatments] = useState([]); const [patients, setPatients] = useState([]); //.... const state = useSelector((state) => state.user); //.... const [date, setDate] = useState(""); const [time, setTime] = useState(""); //.... const [statustime, setStatustime] = useState(); const [checking, setChecking] = useState(false); //.... const [doctor, setDoctor] = useState(""); const [treatment, setTreatment] = useState(""); const [name, setName] = useState(""); const [firstname, setFirstname] = useState(""); const [lastname, setLastname] = useState(""); const [email, setEmail] = useState(""); const [phone, setPhone] = useState(""); const [address, setAddress] = useState(""); const [user_id, setUser] = useState(""); const [patient_id, setPatient] = useState(""); const [created_by, setCreated_by] = useState(); const [insurance, setInsurance] = useState(""); const [remark, setRemark] = useState(""); //.... const [warning, setWarning] = useState(""); // const [schedule, setSchedule] = useState([]); useEffect(() => { fetchDoctors(); fetchTreatments(); fetchPatients(); if (state) { setCreated_by(state["auth"].user_id); } }, []); const fetchDoctors = async () => { var requestOptions = { headers: { "Content-Type": "application/json", "api-key": process.env.REACT_APP_API_KEY, Authorization: userToken, }, }; const res = await fetch( process.env.REACT_APP_API_URL + "/citations/getDoctors", requestOptions ); const json = await res.json(); let activeDoctors = json.clinicDoctors.filter((item) => { return item.archived === false; }); setDoctors(activeDoctors); }; const fetchTreatments = async () => { var requestOptions = { headers: { "Content-Type": "application/json", "api-key": process.env.REACT_APP_API_KEY, Authorization: userToken, }, }; const res = await fetch( process.env.REACT_APP_API_URL + "/citations/getTreatments", requestOptions ); const json = await res.json(); const allTreatments = json.clinicTreatments; const activeTreatments = allTreatments.filter((obj) => { return obj.archived === false; }); setTreatments(activeTreatments); }; const fetchPatients = async () => { var requestOptions = { headers: { "Content-Type": "application/json", "api-key": process.env.REACT_APP_API_KEY, Authorization: userToken, }, }; const res = await fetch( process.env.REACT_APP_API_URL + "/citations/getPatients", requestOptions ); const json = await res.json(); setPatients(json["clinicPatients"]); setLoading(false); }; const checkSchedule = (value) => { setLoadingschedule(true); if (time != "" && doctor != "") { const schedule_date = time.split("T")[0]; var url = ""; if (value) { url = process.env.REACT_APP_API_URL + "/citations/checkErstDoctorSchedule"; } else { url = process.env.REACT_APP_API_URL + "/citations/checkDoctorSchedule"; } console.log("DATA:"); console.log("Date: ", schedule_date); console.log("Doctor: ", doctor); console.log("Erst: ", value); console.log(url); fetch(url, { method: "POST", headers: { "Content-Type": "application/json", "api-key": process.env.REACT_APP_API_KEY, Authorization: userToken, }, body: JSON.stringify({ date: schedule_date, doctor: doctor, }), }).then((response) => { console.log(response); response.json().then((data) => { // console.log(data['data']); var current_data = []; data["data"].map((item, i) => current_data.push(item.split("T")[1].split(":00.000")[0]) ); console.log(current_data); setSchedule(current_data); setLoadingschedule(false); }); }); } else { console.log("time missing"); } }; const checkStatus = async (param, status_data) => { setChecking(true); console.log("Checking..."); var raw = null; if (param === "time" && doctor != "") { console.log("Given Time, using doctor"); raw = { time: status_data, doctor: doctor, }; console.log(raw); } else if (param === "doctor" && statustime != null) { console.log("given doctor, using time"); raw = { time: statustime, doctor: status_data, }; console.log(raw); } else { console.log("one of more data is missing"); } if (raw != null) { const res = await fetch( process.env.REACT_APP_API_URL + "/citations/check_doctor_time_status", { method: "POST", headers: { "Content-Type": "application/json", "api-key": process.env.REACT_APP_API_KEY, Authorization: userToken, }, body: JSON.stringify(raw), } ); const json = await res.json(); console.log("response: ", json); if (json["citations"].length > 0) { console.log("Appointment starting at: ", json["citations"][0][0]); var appointmentStart = json["citations"][0][0] .split("T")[1] .split(":00.000Z")[0]; setWarning(["appointment", appointmentStart]); // setWarning('> Warning: Overlapsing with ' + appointmentStart + ' hs appointment') } else if (json["locks"].length > 0) { console.log("Lock starting at: ", json["locks"][0][0]); var lockStart = json["locks"][0]["start"] .split("T")[1] .split(":00.000Z")[0]; var lockEnd = json["locks"][0]["end"] .split("T")[1] .split(":00.000Z")[0]; setWarning(["lock", lockStart, lockEnd]); } else { setWarning("ok"); console.log("Everything ok"); } } else { setWarning(""); console.log("Data missing..."); } setChecking(false); // const json = await res.json(); // if (json.length > 0) { // console.log('Appointment starting at: ', json[0]); // } else { // console.log('Everything ok') // } }; const onSubmit = async () => { if ( name != "" && firstname != "" && lastname != "" && time != "" && doctor != "" && treatment != "" ) { setLoading(true); const body = { name, firstname, lastname, date, time, doctor, treatment, email, phone, address, user_id, patient_id, created_by, warnings: remark, }; console.log(body); var requestOptions = { method: "POST", headers: { "Content-Type": "application/json", "api-key": process.env.REACT_APP_API_KEY, Authorization: userToken, }, body: JSON.stringify(body), }; await fetch( process.env.REACT_APP_API_URL + "/citations/create_from_doctor", requestOptions ) .then((response) => { if (response.ok) { //window.location.reload(); setShow(false); setIsCalendarUpdated(true); } else { setLoading(false); setError(true); } }) .catch((error) => console.log("error", error)); } else { setRequired(true); } }; return ( <> <div> <h1 className="title-modal">{t("Calendar.New Appointment")}</h1> <hr></hr> {loading ? ( <> <div className="d-flex justify-content-center"> <CircularProgress color="secondary" /> </div> </> ) : ( <> <div className="row"> <div className="col"> <div className="mt-1"> <DateTimePicker schedule={schedule} setDate={setDate} setTime={setTime} setTreatment={setTreatment} checkSchedule={checkSchedule} checkStatus={checkStatus} setStatustime={setStatustime} /> </div> <div className="mt-3"> <TherapistPicker schedule={schedule} doctors={doctors} setDoctor={setDoctor} checkSchedule={checkSchedule} checkStatus={checkStatus} /> </div> <div className="mt-3"> {checking ? ( <>{t("Buttons.Checking")}...</> ) : ( <b> {warning == "" ? ( <></> ) : ( <> {warning == "ok" ? ( <> <Chip size="small" label="Free slot. Ready to book" color="primary" /> </> ) : ( <> {warning[0] == "appointment" ? ( <> <Chip size="small" label={`${t( "Calendar.Overlapping with appointment at" )} ${warning[1]}`} color="primary" /> </> ) : ( <> {warning[0] == "lock" ? ( <> <Chip size="small" label={`${t( "Calendar.Overlapping with time lock" )} ${t("Calendar.From")} ${ warning[1] } ${t("Calendar.To")} ${warning[2]}`} color="primary" /> </> ) : ( <></> )} </> )} </> )} </> )} </b> )} </div> <div className="mt-3"> <TreatmentPicker treatments={treatments} setTreatment={setTreatment} checkSchedule={checkSchedule} /> </div> <div className="mt-3"> <PatientPicker patients={patients} setName={setName} setFirstname={setFirstname} setLastname={setLastname} email={email} setEmail={setEmail} setPhone={setPhone} setAddress={setAddress} setUser={setUser} setPatient={setPatient} setInsurance={setInsurance} infoRoute={infoRoute} /> </div> <div className="mt-3"> <PatientSummary email={email} phone={phone} insurance={insurance} remark={remark} setRemark={setRemark} /> </div> <div className="mt-3"> <FormControlLabel control={ <Checkbox checked={assistant} onChange={() => setAssistant(!assistant)} name="checkedB" color="primary" /> } label={`${t("Calendar.Use Schedule Assistant")} (beta)`} /> </div> <div className="mt-4"> <SubmitButtons onSubmit={onSubmit} handleClose={handleClose} /> </div> </div> {assistant && schedule.length > 0 ? ( <> <div className="col-4"> <div className="mt-1" style={{ backgroundColor: "#fff", borderRadius: "15px", paddingTop: "7px", paddingBottom: "9px", paddingLeft: "5px", paddingRight: "5px", }} > <h1 className="schedule-title"> {t("Calendar.Schedule Assistant")} </h1> {loadingschedule ? ( <> <div className="d-flex justify-content-center mt-5 mb-5"> <CircularProgress color="secondary" /> </div> </> ) : ( <> {schedule.length > 0 ? ( <> <table className="table" style={{ borderRadius: "10px" }} > <tbody> <tr> {schedule.includes("08:00") ? ( <Tooltip title="Slot Available"> <td className="box-available">08:00</td> </Tooltip> ) : ( <Tooltip title="Slot Busy"> <td className="box-unavailable"> 08:00 </td> </Tooltip> )} {schedule.includes("08:20") ? ( <Tooltip title="Slot Available"> <td className="box-available">08:20</td> </Tooltip> ) : ( <Tooltip title="Slot Busy"> <td className="box-unavailable"> 08:20 </td> </Tooltip> )} {schedule.includes("08:40") ? ( <Tooltip title="Slot Available"> <td className="box-available">08:40</td> </Tooltip> ) : ( <Tooltip title="Slot Busy"> <td className="box-unavailable"> 08:40 </td> </Tooltip> )} </tr> <tr> {schedule.includes("09:00") ? ( <Tooltip title="Slot Available"> <td className="box-available">09:00</td> </Tooltip> ) : ( <Tooltip title="Slot Busy"> <td className="box-unavailable"> 09:00 </td> </Tooltip> )} {schedule.includes("09:20") ? ( <Tooltip title="Slot Available"> <td className="box-available">09:20</td> </Tooltip> ) : ( <Tooltip title="Slot Busy"> <td className="box-unavailable"> 09:20 </td> </Tooltip> )} {schedule.includes("09:40") ? ( <Tooltip title="Slot Available"> <td className="box-available">09:40</td> </Tooltip> ) : ( <Tooltip title="Slot Busy"> <td className="box-unavailable"> 09:40 </td> </Tooltip> )} </tr> <tr> {schedule.includes("10:00") ? ( <Tooltip title="Slot Available"> <td className="box-available">10:00</td> </Tooltip> ) : ( <Tooltip title="Slot Busy"> <td className="box-unavailable"> 10:00 </td> </Tooltip> )} {schedule.includes("10:20") ? ( <Tooltip title="Slot Available"> <td className="box-available">10:20</td> </Tooltip> ) : ( <Tooltip title="Slot Busy"> <td className="box-unavailable"> 10:20 </td> </Tooltip> )} {schedule.includes("10:40") ? ( <Tooltip title="Slot Available"> <td className="box-available">10:40</td> </Tooltip> ) : ( <Tooltip title="Slot Busy"> <td className="box-unavailable"> 10:40 </td> </Tooltip> )} </tr> <tr> {schedule.includes("11:00") ? ( <td className="box-available">10:00</td> ) : ( <td className="box-unavailable">11:00</td> )} {schedule.includes("11:20") ? ( <td className="box-available">10:20</td> ) : ( <td className="box-unavailable">11:20</td> )} {schedule.includes("11:40") ? ( <td className="box-available">10:40</td> ) : ( <td className="box-unavailable">11:40</td> )} </tr> <tr> {schedule.includes("12:00") ? ( <td className="box-available">12:00</td> ) : ( <td className="box-unavailable">12:00</td> )} {schedule.includes("12:20") ? ( <td className="box-available">12:20</td> ) : ( <td className="box-unavailable">12:20</td> )} {schedule.includes("12:40") ? ( <td className="box-available">12:40</td> ) : ( <td className="box-unavailable">12:40</td> )} </tr> <tr> {schedule.includes("13:00") ? ( <td className="box-available">13:00</td> ) : ( <td className="box-unavailable">13:00</td> )} {schedule.includes("13:20") ? ( <td className="box-available">13:20</td> ) : ( <td className="box-unavailable">13:20</td> )} {schedule.includes("13:40") ? ( <td className="box-available">13:40</td> ) : ( <td className="box-unavailable">13:40</td> )} </tr> <tr> {schedule.includes("14:00") ? ( <td className="box-available">14:00</td> ) : ( <td className="box-unavailable">14:00</td> )} {schedule.includes("14:20") ? ( <td className="box-available">14:20</td> ) : ( <td className="box-unavailable">14:20</td> )} {schedule.includes("14:40") ? ( <td className="box-available">14:40</td> ) : ( <td className="box-unavailable">14:40</td> )} </tr> <tr> {schedule.includes("15:00") ? ( <td className="box-available">15:00</td> ) : ( <td className="box-unavailable">15:00</td> )} {schedule.includes("15:20") ? ( <td className="box-available">15:20</td> ) : ( <td className="box-unavailable">15:20</td> )} {schedule.includes("15:40") ? ( <td className="box-available">15:40</td> ) : ( <td className="box-unavailable">15:40</td> )} </tr> <tr> {schedule.includes("16:00") ? ( <td className="box-available">16:00</td> ) : ( <td className="box-unavailable">16:00</td> )} {schedule.includes("16:20") ? ( <td className="box-available">16:20</td> ) : ( <td className="box-unavailable">16:20</td> )} {schedule.includes("16:40") ? ( <td className="box-available">16:40</td> ) : ( <td className="box-unavailable">16:40</td> )} </tr> <tr> {schedule.includes("17:00") ? ( <td className="box-available">17:00</td> ) : ( <td className="box-unavailable">17:00</td> )} {schedule.includes("17:20") ? ( <td className="box-available">17:20</td> ) : ( <td className="box-unavailable">17:20</td> )} {schedule.includes("17:40") ? ( <td className="box-available">17:40</td> ) : ( <td className="box-unavailable">17:40</td> )} </tr> <tr> {schedule.includes("18:00") ? ( <td className="box-available">18:00</td> ) : ( <td className="box-unavailable">18:00</td> )} {schedule.includes("18:20") ? ( <td className="box-available">18:20</td> ) : ( <td className="box-unavailable">18:20</td> )} {schedule.includes("18:40") ? ( <td className="box-available">18:40</td> ) : ( <td className="box-unavailable">18:40</td> )} </tr> </tbody> </table> <div className="reference-container"> <span className="reference-text"> {t( "Calendar.Yellow box indicates that the slot is reserved for erst treatments, locked or busy by another treatment" )} </span> </div> {/* {schedule.map((item, i) => <> {i}, {(item.split('T')[1]).split(':00.000')[0]} <br /> </>)} */} </> ) : ( <></> )} </> )} </div> </div> </> ) : ( <></> )} </div> </> )} </div> <Snackbar open={error} autoHideDuration={6000} onClose={() => setError(!error)} > <MuiAlert elevation={6} variant="filled" onClose={() => setError(!error)} severity="error" > {t( "Calendar.Error creating appointment. Please backup your data and retry" )} </MuiAlert> </Snackbar> <Snackbar open={required} autoHideDuration={6000} onClose={() => setRequired(!required)} > <MuiAlert elevation={6} variant="filled" onClose={() => setRequired(!required)} severity="error" > {t( "Calendar.All the fields are mandatory. Please complete it and retry" )} </MuiAlert> </Snackbar> </> ); };
Editor is loading...
Leave a Comment