Possibilidade do paciente apagar e editar uma consulta

src/PagesMedico/DoctorAgendamentoManager.jsx

@@ -226,12 +226,6 @@ const deleteConsulta = (selectedPatientId) => {
     return ListaDiasDatas
   }
 
-  const handleClickAgendamento = (agendamento) => {
-    if (agendamento.status !== 'vazio') return
-    else setPageConsulta(true)
-};
-
-  
 
   const handleClickCancel = () => setPageConsulta(false)
 
@@ -278,7 +272,7 @@ const deleteConsulta = (selectedPatientId) => {
                       </div>
                     </section>
                     
-                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados}
+                    {tabela === "diario" && <TabelaAgendamentoDia  agendamentos={DictAgendamentosOrganizados}
                      setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} 
                      listaConsultasID={[]} setListaConsultaID={setListaConsultaID} coresConsultas={coresConsultas}/>}
                     

src/PagesPaciente/ConsultaEditPage.jsx

@@ -9,7 +9,7 @@ import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
 // 1. Importe o useNavigate
 import { useNavigate } from 'react-router-dom'
 
-const ConsultaEditPage = ({ dadosConsulta }) => {
+const ConsultaEditPage = ({ DictInfo }) => {
     // 2. Crie a instância do navigate
     const navigate = useNavigate();
 
@@ -17,20 +17,23 @@ const ConsultaEditPage = ({ dadosConsulta }) => {
     const authHeader = getAuthorizationHeader();
 
     const [idUsuario, setIDusuario] = useState(null);
-    const [DictInfo, setDict] = useState({});
+    const [Dict, setDict] = useState({});
     const [Medico, setMedico] = useState(null);
     const [Paciente, setPaciente] = useState(null);
 
+    console.log("dentro do edit", DictInfo)
+
+
     useEffect(() => {
-        setDict({ ...dadosConsulta });
+        setDict({ ...DictInfo });
 
         const fetchInitialData = async () => {
-            if (dadosConsulta.doctor_id) {
+            if (DictInfo.doctor_id) {
-                const medicoData = await GetDoctorByID(dadosConsulta.doctor_id, authHeader);
+                const medicoData = await GetDoctorByID(DictInfo.doctor_id, authHeader);
                 setMedico(medicoData[0]);
             }
-            if (dadosConsulta.patient_id) {
+            if (DictInfo.patient_id) {
-                const pacienteData = await GetPatientByID(dadosConsulta.patient_id, authHeader);
+                const pacienteData = await GetPatientByID(DictInfo.patient_id, authHeader);
                 setPaciente(pacienteData[0]);
             }
         };
@@ -43,17 +46,17 @@ const ConsultaEditPage = ({ dadosConsulta }) => {
         fetchUserInfo();
         fetchInitialData();
 
-    }, [dadosConsulta, authHeader]);
+    }, [DictInfo, authHeader]);
 
     useEffect(() => {
         if (Medico) {
             setDict(prevDict => ({
                 ...prevDict,
                 medico_nome: Medico?.full_name,
-                dataAtendimento: dadosConsulta.scheduled_at?.split("T")[0]
+                dataAtendimento: DictInfo.scheduled_at?.split("T")[0]
             }));
         }
-    }, [Medico, dadosConsulta.scheduled_at]);
+    }, [Medico, DictInfo.scheduled_at]);
 
     const handleSave = async (DictParaPatch) => {
         try {
@@ -112,7 +115,7 @@ const ConsultaEditPage = ({ dadosConsulta }) => {
         <div>
             {}
             <FormConsultaPaciente
-                agendamento={DictInfo}
+                agendamento={Dict}
                 setAgendamento={setDict}
                 onSave={handleSave}
                 onCancel={handleCancel}

src/PagesPaciente/ConsultasPaciente.jsx

@@ -12,7 +12,7 @@ import { UserInfos } from '../components/utils/Functions-Endpoints/General'
 import dayjs from 'dayjs'
 import TabelaAgendamentoDia from "../components/AgendarConsulta/TabelaAgendamentoDia"
 
-const ConsultasPaciente = ({ setConsulta }) => {
+const ConsultasPaciente = ({ setDictInfo }) => {
     const { getAuthorizationHeader } = useAuth()
     const [agendamentosOrganizados, setAgendamentosOrganizados] = useState({})
     const [listaTodasConsultas, setListaTodasConsultas] = useState([])
@@ -21,6 +21,8 @@ const ConsultasPaciente = ({ setConsulta }) => {
     const [selectedID, setSelectedId] = useState("")
     let authHeader = getAuthorizationHeader()
 
+    const [motivoCancelamento, setMotivoCancelamento] = useState("")
+
     const [consultas, setConsultas] = useState([])
    
     const [consultasOrganizadas, setConsultasOrganizadas] = useState({})
@@ -34,8 +36,6 @@ const ConsultasPaciente = ({ setConsulta }) => {
         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 } 
@@ -117,6 +117,7 @@ const ConsultasPaciente = ({ setConsulta }) => {
     }, []);
 
     const navigate = useNavigate()
+
     const deleteConsulta = async (ID) => {
         try {
             const myHeaders = new Headers();
@@ -124,7 +125,7 @@ const ConsultasPaciente = ({ setConsulta }) => {
             myHeaders.append('apikey', API_KEY);
             myHeaders.append("authorization", authHeader);
 
-            const raw = JSON.stringify({ "status": "cancelled" });
+            const raw = JSON.stringify({ "status": "cancelled", "cancellation_reason":motivoCancelamento });
 
             const requestOptions = {
                 method: 'PATCH',
@@ -158,8 +159,11 @@ const ConsultasPaciente = ({ setConsulta }) => {
                 <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 ? 
@@ -221,15 +225,27 @@ const ConsultasPaciente = ({ setConsulta }) => {
         </div>   
             :
 
-               <TabelaAgendamentoDia agendamentos={consultasOrganizadas} listaConsultasID={[]}/>
+               <TabelaAgendamentoDia agendamentos={consultasOrganizadas} listaConsultasID={[]} setDictInfo={setDictInfo} selectedID={selectedID} setSelectedId={setSelectedId} setShowDeleteModal={setShowDeleteModal}/>
             } 
              
-               {showDeleteModal &&
+                 {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 Exclusão
+                  Confirmação de Cancelamento
                 </h5>
                 <button
                   type="button"
@@ -237,30 +253,59 @@ const ConsultasPaciente = ({ setConsulta }) => {
                   onClick={() => setShowDeleteModal(false)}
                 ></button>
               </div>
+
               <div className="modal-body">
                 <p className="mb-0 fs-5">
-                                    Tem certeza que deseja excluir este agendamento?
+                 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)}
+                  onClick={() => {setShowDeleteModal(false);
+
+                                   }}
                 >
                   Cancelar
                 </button>
+
+              
                 <button
                   type="button"
                   className="btn btn-danger"
-                                    onClick={() => { deleteConsulta(selectedID); setShowDeleteModal(false) }}
+                  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>
+        </div>)}
+            </div>
+
         </div>
     )
 }

src/components/AgendarConsulta/CardConsulta.jsx

@@ -80,6 +80,8 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, se
         <button className="btn btn-sm btn-edit-custom"
             
             onClick={() => {navigate(`edit`)
+                
+              console.log(DadosConsulta)
               setDictInfo({...DadosConsulta,paciente_cpf:"", paciente_nome:DadosConsulta?.paciente_nome, nome_medico:DadosConsulta?.medico_nome})
             }}
 

src/components/AgendarConsulta/TabelaAgendamentoDia.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import CardConsulta from './CardConsulta';
 import "./style/styleTabelas/tabeladia.css";
 
-const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, coresConsultas, setListaConsultaID, listaConsultasID }) => {
+const TabelaAgendamentoDia = ({ agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, coresConsultas, setListaConsultaID, listaConsultasID }) => {
   const [indiceAcesso, setIndiceAcesso] = useState(0)
   const [Dia, setDia] = useState()
   const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
@@ -70,7 +70,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
               
               <td className='coluna-horario'><p className='horario-texto'>{`${horario[0]}:${horario[1]}`}</p></td>
               <td className='mostrar-horario'>
-                <div onClick={() => handleClickAgendamento(agendamento)}>
+                <div>
                   <CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} selectedID={selectedID}  setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>
                 </div>
               </td>

src/pages/Agendamento.jsx

@@ -252,12 +252,6 @@ const confirmConsulta = (selectedPatientId) => {
   }
 
 
-  const handleClickAgendamento = (agendamento) => {
-    if (agendamento.status !== 'vazio') return
-    else setPageConsulta(true)
-};
-
-
  useEffect(() => {
       console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
    if (MedicoFiltrado.id != "vazio" ) {  
@@ -435,7 +429,7 @@ const handleSearchMedicos = (term) => {
                     </section>
                     
                     {/* Componentes de Tabela - Adicionado props de delete da main */}   
-                    {tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
+                    {tabela === "diario" && <TabelaAgendamentoDia agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID} />}
                     {tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal}  coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>}
                     {tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} selectedID={selectedID} setDictInfo={setDictInfo} setShowConfirmModal={setShowConfirmModal}  coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>}
                   </div>

src/perfis/Perfil_paciente/Perfilpaciente.jsx

@@ -10,6 +10,8 @@ function PerfilPaciente({ onLogout }) {
 
 const [dadosConsulta, setConsulta] = useState({})
 
+const [DictInfo, setDictInfo] = useState({})
+
 
   return (
 
@@ -19,9 +21,9 @@ const [dadosConsulta, setConsulta] = useState({})
       <div id="main">
         <Routes>
           <Route path="/" element={<LaudoManager />} /> 
-          <Route path="agendamento" element={<ConsultasPaciente setConsulta={setConsulta}/>} />
+          <Route path="agendamento" element={<ConsultasPaciente setDictInfo={setDictInfo}/>} />
           <Route path="agendamento/criar" element={<ConsultaCadastroManager />} />
-          <Route path="agendamento/edit" element={<ConsultaEditPage dadosConsulta={dadosConsulta} />} />
+          <Route path="agendamento/edit" element={<ConsultaEditPage DictInfo={DictInfo} />} />
           <Route path="laudo" element={<LaudoManager />} /> 
           <Route path="*" element={<h2>Página não encontrada</h2>} />
         </Routes>