423 lines
14 KiB
JavaScript
423 lines
14 KiB
JavaScript
import React from 'react'
|
|
import "./style.css"
|
|
import CardConsultaPaciente from './CardConsultaPaciente'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { useEffect, useState, useMemo } from 'react'
|
|
import API_KEY from '../components/utils/apiKeys'
|
|
import { useAuth } from '../components/utils/AuthProvider'
|
|
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
|
|
import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
|
|
|
|
import { UserInfos } from '../components/utils/Functions-Endpoints/General'
|
|
import dayjs from 'dayjs'
|
|
import TabelaAgendamentoDia from "../components/AgendarConsulta/TabelaAgendamentoDia"
|
|
|
|
const ConsultasPaciente = ({ setDictInfo }) => {
|
|
const { getAuthorizationHeader } = useAuth()
|
|
const [agendamentosOrganizados, setAgendamentosOrganizados] = useState({})
|
|
const [listaTodasConsultas, setListaTodasConsultas] = useState([])
|
|
const [patientID, setPatientID] = useState("")
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
|
const [selectedID, setSelectedId] = useState("")
|
|
let authHeader = getAuthorizationHeader()
|
|
|
|
const [motivoCancelamento, setMotivoCancelamento] = useState("")
|
|
|
|
const [consultas, setConsultas] = useState([])
|
|
|
|
const [consultasOrganizadas, setConsultasOrganizadas] = useState({})
|
|
const [filaDeEspera, setFilaDeEspera] = useState([])
|
|
const [viewFila, setViewFila] = useState(false)
|
|
|
|
const [listaConsultasID, setListaConsultaID] = useState([])
|
|
const [coresConsultas,setCoresConsultas] = useState([])
|
|
|
|
const [showConfirmModal, setShowConfirmModal] = useState(false)
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
console.log(listaConsultasID, coresConsultas, "ojwhdofigewfey7few0fr74r")
|
|
|
|
}, [coresConsultas, listaConsultasID])
|
|
|
|
useMemo(() => {
|
|
let conjuntoConsultas = {}
|
|
let filaEspera = []
|
|
|
|
const fetchInfosConsultas = async (consulta) => {
|
|
//console.log(doctor, "PACIENTE TRAZIDO PELO ")
|
|
|
|
//let consultaMelhorada = {...consulta, paciente_nome:paciente[0].full_name, medico_nome:doctor[0].full_name }
|
|
|
|
//console.log(consultaMelhorada,"ID DO MEDICO")
|
|
|
|
for(let i = 0; listaTodasConsultas.length > i; i++){
|
|
|
|
let consulta = listaTodasConsultas[i]
|
|
|
|
let doctor = await GetDoctorByID(consulta.doctor_id, authHeader)
|
|
let paciente = await GetPatientByID(consulta.patient_id, authHeader)
|
|
|
|
consulta = {...consulta, medico_nome:doctor[0]?.full_name, paciente_nome:paciente[0]?.full_name}
|
|
|
|
|
|
|
|
|
|
if(consulta.status === "requested"){
|
|
|
|
filaEspera.push(consulta)
|
|
|
|
}else{
|
|
|
|
let data = consulta.scheduled_at.split("T")[0]
|
|
let chavesConsultas = Object.keys(conjuntoConsultas)
|
|
|
|
if(chavesConsultas.includes(data)){
|
|
let lista = conjuntoConsultas[data]
|
|
|
|
lista.push(consulta)
|
|
|
|
conjuntoConsultas = {...conjuntoConsultas, [data]:lista}
|
|
}else{
|
|
conjuntoConsultas = {...conjuntoConsultas, [data]:[consulta] }
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
setConsultasOrganizadas(conjuntoConsultas)
|
|
setFilaDeEspera(filaEspera)
|
|
|
|
}
|
|
|
|
console.log("so muda")
|
|
if(!listaTodasConsultas.length) return
|
|
|
|
console.log(filaEspera, "fila de espera")
|
|
fetchInfosConsultas();
|
|
|
|
}, [listaTodasConsultas])
|
|
|
|
|
|
useEffect(() => {
|
|
let userInfos = UserInfos(authHeader)
|
|
|
|
const fetchConsultas = async () => {
|
|
try {
|
|
const myHeaders = new Headers();
|
|
myHeaders.append("Authorization", authHeader);
|
|
myHeaders.append("apikey", API_KEY)
|
|
|
|
const requestOptions = {
|
|
method: 'GET',
|
|
headers: myHeaders,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?patient_id=eq.${"6e7f8829-0574-42df-9290-8dbb70f75ada"}`, requestOptions);
|
|
const result = await response.json();
|
|
setListaTodasConsultas(result);
|
|
} catch (error) {
|
|
console.log('error', error);
|
|
}
|
|
};
|
|
|
|
fetchConsultas();
|
|
}, []);
|
|
|
|
const navigate = useNavigate()
|
|
|
|
|
|
const confirmConsulta = (selectedPatientId) => {
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("Content-Type", "application/json");
|
|
myHeaders.append('apikey', API_KEY)
|
|
myHeaders.append("authorization", authHeader)
|
|
|
|
|
|
var raw = JSON.stringify({ "status":"confirmed"
|
|
});
|
|
|
|
|
|
var requestOptions = {
|
|
method: 'PATCH',
|
|
headers: myHeaders,
|
|
body: raw,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
|
|
.then(response => {if(response.status !== 200)(console.log(response))})
|
|
.then(result => console.log(result))
|
|
.catch(error => console.log('error', error));
|
|
|
|
}
|
|
|
|
const deleteConsulta = async (ID) => {
|
|
try {
|
|
const myHeaders = new Headers();
|
|
myHeaders.append("Content-Type", "application/json");
|
|
myHeaders.append('apikey', API_KEY);
|
|
myHeaders.append("authorization", authHeader);
|
|
|
|
const raw = JSON.stringify({ "status": "cancelled", "cancellation_reason":motivoCancelamento });
|
|
|
|
const requestOptions = {
|
|
method: 'PATCH',
|
|
headers: myHeaders,
|
|
body: raw,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${ID}`, requestOptions);
|
|
|
|
if (!response.ok) {
|
|
const errorText = await response.text();
|
|
throw new Error(`Falha ao cancelar consulta: ${response.status} - ${errorText}`);
|
|
}
|
|
setConsultas(prevConsultas => prevConsultas.filter(consulta => consulta.id !== ID));
|
|
|
|
console.log("Consulta cancelada com sucesso!");
|
|
alert("Consulta cancelada com sucesso!");
|
|
|
|
} catch (error) {
|
|
console.error('Erro ao cancelar a consulta:', error);
|
|
alert('Erro ao cancelar a consulta. Veja o console.');
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<h1> Gerencie suas consultas</h1>
|
|
|
|
<div className='form-container'>
|
|
<button className="btn btn-primary" onClick={() => { navigate("criar") }}>
|
|
<i className="bi bi-plus-circle"></i> Adicionar Consulta
|
|
</button>
|
|
{!viewFila ?
|
|
<button onClick={() => setViewFila(true)}> Fila de espera</button>
|
|
:
|
|
<button onClick={() => setViewFila(false)}>Consultas </button>
|
|
}
|
|
|
|
<h2>Seus próximos atendimentos</h2>
|
|
{viewFila ?
|
|
<div className="fila-container">
|
|
<div className="fila-header">
|
|
<input
|
|
type="text"
|
|
placeholder="Pesquisar na fila de espera..."
|
|
className="busca-fila-espera"
|
|
//value={searchTerm}
|
|
//onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
<h2 className="fila-titulo">Fila de Espera</h2>
|
|
</div>
|
|
<table className="fila-tabela">
|
|
<thead>
|
|
<tr>
|
|
<th>Nome do Paciente</th> {/* Ajustado o cabeçalho */}
|
|
<th>CPF</th> {/* Ajustado o cabeçalho */}
|
|
<th>Médico Solicitado</th> {/* Ajustado o cabeçalho */}
|
|
<th>Data da Solicitação</th> {/* Ajustado o cabeçalho */}
|
|
<th>Ações</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{filaDeEspera.map((item, index) => (
|
|
<tr key={index}>
|
|
<td> <p>{item?.paciente_nome} </p> </td>
|
|
<td><p>{item?.paciente_cpf} </p></td>
|
|
<td><p>{item?.medico_nome} </p></td>
|
|
<td>{dayjs(item?.created_at).format('DD/MM/YYYY HH:mm')}</td>
|
|
<td> <div className="d-flex gap-2">
|
|
|
|
<button className="btn btn-sm btn-edit"
|
|
onClick={() => {
|
|
console.log(item, 'item')
|
|
navigate(`${2}/edit`)
|
|
|
|
}}
|
|
>
|
|
<i className="bi bi-pencil me-1"></i> Editar
|
|
</button>
|
|
|
|
|
|
<button
|
|
className="btn btn-sm btn-delete"
|
|
onClick={() => {
|
|
setSelectedId(item.id)
|
|
setShowDeleteModal(true);
|
|
}}
|
|
>
|
|
<i className="bi bi-trash me-1"></i> Excluir
|
|
</button>
|
|
</div></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
:
|
|
|
|
<TabelaAgendamentoDia agendamentos={consultasOrganizadas} listaConsultasID={[]} setDictInfo={setDictInfo}
|
|
selectedID={selectedID} setSelectedId={setSelectedId} setShowDeleteModal={setShowDeleteModal}
|
|
coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID}
|
|
listaConsultasID={listaConsultasID} setShowConfirmModal={setShowConfirmModal}
|
|
|
|
/>
|
|
}
|
|
|
|
{showDeleteModal && (
|
|
<div
|
|
className="modal fade show"
|
|
style={{
|
|
display: "block",
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
}}
|
|
tabIndex="-1"
|
|
onClick={(e) =>
|
|
e.target.classList.contains("modal") && setShowDeleteModal(false)
|
|
}
|
|
>
|
|
<div className="modal-dialog modal-dialog-centered">
|
|
<div className="modal-content">
|
|
|
|
<div className="modal-header bg-danger bg-opacity-25">
|
|
<h5 className="modal-title text-danger">
|
|
Confirmação de Cancelamento
|
|
</h5>
|
|
<button
|
|
type="button"
|
|
className="btn-close"
|
|
onClick={() => setShowDeleteModal(false)}
|
|
></button>
|
|
</div>
|
|
|
|
<div className="modal-body">
|
|
<p className="mb-0 fs-5">
|
|
Qual o motivo do cancelamento?
|
|
</p>
|
|
<div className='campo-de-input'>
|
|
|
|
<textarea className='input-modal' value={motivoCancelamento} onChange={(e) => setMotivoCancelamento(e.target.value)} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="modal-footer">
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary"
|
|
onClick={() => {setShowDeleteModal(false);
|
|
|
|
}}
|
|
>
|
|
Cancelar
|
|
</button>
|
|
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-danger"
|
|
onClick={() => {
|
|
|
|
deleteConsulta(selectedID)
|
|
setShowDeleteModal(false)
|
|
let lista_cores = coresConsultas
|
|
|
|
let lista = listaConsultasID
|
|
|
|
lista.push(selectedID)
|
|
lista_cores.push("cancelled")
|
|
|
|
setCoresConsultas(lista_cores)
|
|
|
|
setListaConsultaID(lista)
|
|
|
|
console.log("lista", lista)
|
|
|
|
}}
|
|
|
|
>
|
|
<i className="bi bi-trash me-1"></i> Excluir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>)}
|
|
|
|
{showConfirmModal &&(
|
|
<div
|
|
className="modal fade show"
|
|
style={{
|
|
display: "block",
|
|
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
|
}}
|
|
tabIndex="-1"
|
|
onClick={(e) =>
|
|
e.target.classList.contains("modal") && setShowDeleteModal(false)
|
|
}
|
|
>
|
|
<div className="modal-dialog modal-dialog-centered">
|
|
<div className="modal-content">
|
|
|
|
<div className="modal-header bg-success">
|
|
<h5 className="modal-title">
|
|
Confirmação de edição
|
|
</h5>
|
|
|
|
</div>
|
|
|
|
<div className="modal-body">
|
|
<p className="mb-0 fs-5">
|
|
Tem certeza que deseja retirar o cancelamento ?
|
|
</p>
|
|
</div>
|
|
|
|
<div className="modal-footer">
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary"
|
|
onClick={() => {setShowConfirmModal(false); setSelectedId("")}}
|
|
>
|
|
Cancelar
|
|
</button>
|
|
|
|
|
|
<button
|
|
type="button"
|
|
className="btn btn-success"
|
|
onClick={() => {confirmConsulta(selectedID);setShowConfirmModal(false)
|
|
let lista_cores = coresConsultas
|
|
|
|
let lista = listaConsultasID
|
|
|
|
lista.push(selectedID)
|
|
lista_cores.push("confirmed")
|
|
|
|
setCoresConsultas(lista_cores)
|
|
|
|
setListaConsultaID(lista)
|
|
}}
|
|
|
|
>
|
|
<i className="bi bi-trash me-1"></i> Confirmar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>)
|
|
|
|
|
|
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ConsultasPaciente; |