Botoes editar e apagar
This commit is contained in:
joao_pedro
parent
cf3ea901b8
commit
1ba45e6c67
@ -3,15 +3,18 @@ import { useEffect, useMemo,useState } from 'react'
|
||||
import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
|
||||
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient'
|
||||
import { useAuth } from '../components/utils/AuthProvider'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
const CardConsultaPaciente = ({consulta, setConsulta, setSelectedId, setShowDeleteModal}) => {
|
||||
|
||||
const CardConsultaPaciente = ({consulta}) => {
|
||||
|
||||
const navigate = useNavigate()
|
||||
const [Paciente, setPaciente] = useState({})
|
||||
const [Medico, setMedico] = useState({})
|
||||
const {getAuthorizationHeader} = useAuth()
|
||||
|
||||
const authHeader = getAuthorizationHeader()
|
||||
|
||||
|
||||
|
||||
|
||||
const ids = useMemo(() => {
|
||||
return {
|
||||
doctor_id: consulta?.doctor_id,
|
||||
@ -50,6 +53,8 @@ const CardConsultaPaciente = ({consulta}) => {
|
||||
|
||||
console.log(horario)
|
||||
|
||||
const deleteConsulta = () => {}
|
||||
|
||||
return (
|
||||
<div class="card-consulta">
|
||||
<div class="horario-container">
|
||||
@ -59,10 +64,40 @@ const CardConsultaPaciente = ({consulta}) => {
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-container">
|
||||
<span class="informacao">
|
||||
|
||||
<p>{`Inicio: ${horario.split(":")[0]}:${horario.split(":")[1]}`}</p>
|
||||
|
||||
<p class="informacao">
|
||||
|
||||
Dr {Medico?.full_name} - {Medico?.specialty}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
|
||||
<div className='actions-container'>
|
||||
<button className="btn btn-sm btn-edit-custom"
|
||||
|
||||
onClick={() => {navigate(`edit`)
|
||||
setConsulta({...consulta,paciente_cpf:Paciente.cpf, paciente_nome:Paciente.full_name, nome_medico:Medico.full_name})
|
||||
}}
|
||||
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i>
|
||||
</button>
|
||||
<button
|
||||
className="btn btn-sm btn-delete-custom-style "
|
||||
onClick={() => {
|
||||
console.log(consulta.id)
|
||||
setSelectedId(consulta.id)
|
||||
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
89
src/PagesPaciente/ConsultaEditPage.jsx
Normal file
89
src/PagesPaciente/ConsultaEditPage.jsx
Normal file
@ -0,0 +1,89 @@
|
||||
import React from 'react'
|
||||
import { useAuth } from '../components/utils/AuthProvider'
|
||||
import { useState, useEffect } from 'react'
|
||||
import API_KEY from '../components/utils/apiKeys'
|
||||
import { UserInfos } from '../components/utils/Functions-Endpoints/General'
|
||||
import FormConsultaPaciente from './FormConsultaPaciente'
|
||||
const ConsultaEditPage = ({dadosConsulta}) => {
|
||||
|
||||
console.log(dadosConsulta, "editar")
|
||||
|
||||
const {getAuthorizationHeader} = useAuth()
|
||||
|
||||
const [idUsuario, setIDusuario] = useState("6e7f8829-0574-42df-9290-8dbb70f75ada")
|
||||
|
||||
const [DictInfo, setDictInfo] = useState({})
|
||||
|
||||
//console.log(DictInfo, 'aqui')
|
||||
|
||||
useEffect(() => {
|
||||
setDictInfo({...dadosConsulta})
|
||||
|
||||
|
||||
const ColherInfoUsuario =async () => {
|
||||
const result = await UserInfos(authHeader)
|
||||
|
||||
setIDusuario(result?.profile?.id)
|
||||
|
||||
}
|
||||
ColherInfoUsuario()
|
||||
|
||||
|
||||
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
let authHeader = getAuthorizationHeader()
|
||||
|
||||
const handleSave = (DictParaPatch) => {
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append('apikey', API_KEY)
|
||||
myHeaders.append("authorization", authHeader)
|
||||
|
||||
console.log(DictParaPatch)
|
||||
|
||||
var raw = JSON.stringify({"patient_id": DictParaPatch.patient_id,
|
||||
"doctor_id": DictParaPatch.doctor_id,
|
||||
|
||||
"duration_minutes": 30,
|
||||
|
||||
"chief_complaint": "Dor de cabeça há 3 ",
|
||||
|
||||
"created_by": idUsuario,
|
||||
|
||||
"scheduled_at": `${DictParaPatch.dataAtendimento}T${DictParaPatch.horarioInicio}:00.000Z`,
|
||||
|
||||
"appointment_type": DictParaPatch.tipo_consulta,
|
||||
|
||||
"patient_notes": "Prefiro horário pela manhã",
|
||||
"insurance_provider": DictParaPatch.convenio,
|
||||
"status": DictParaPatch.status,
|
||||
"created_by": idUsuario
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
var requestOptions = {
|
||||
method: 'PATCH',
|
||||
headers: myHeaders,
|
||||
body: raw,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${DictInfo.id}`, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FormConsultaPaciente agendamento={DictInfo} setAgendamento={setDictInfo} onSave={handleSave}/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ConsultaEditPage
|
||||
@ -6,9 +6,12 @@ import { useEffect, useState } from 'react'
|
||||
import API_KEY from '../components/utils/apiKeys'
|
||||
import { useAuth } from '../components/utils/AuthProvider'
|
||||
|
||||
const ConsultasPaciente = () => {
|
||||
const ConsultasPaciente = ({setConsulta}) => {
|
||||
const {getAuthorizationHeader} = useAuth()
|
||||
|
||||
|
||||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||||
const [selectedID, setSelectedId] = useState("")
|
||||
let authHeader = getAuthorizationHeader()
|
||||
|
||||
const [consultas, setConsultas] = useState([])
|
||||
@ -56,16 +59,32 @@ const FiltrarAgendamentos = (agendamentos, id) => {
|
||||
}, [])
|
||||
|
||||
const navigate = useNavigate()
|
||||
/*
|
||||
const consultas = [
|
||||
{
|
||||
"id": "497f6eca-6276-4993-bfeb-53cbbbba6f08",
|
||||
"doctor_id": "eaca4372-17bc-4905-9eff-7aeda46157b4",
|
||||
"patient_id": "3854866a-5476-48be-8313-77029ccdd7a7",
|
||||
"scheduled_at": "2019-08-24T14:15:22Z",
|
||||
"status": "string"
|
||||
|
||||
const deleteConsulta= (ID) => {
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append('apikey', API_KEY)
|
||||
myHeaders.append("authorization", authHeader)
|
||||
|
||||
|
||||
var raw = JSON.stringify({ "status":"cancelled"
|
||||
});
|
||||
|
||||
|
||||
var requestOptions = {
|
||||
method: 'PATCH',
|
||||
headers: myHeaders,
|
||||
body: raw,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedID}`, requestOptions)
|
||||
.then(response => {if(response.status !== 200)(console.log(response))})
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
|
||||
console.log("deletar", ID)
|
||||
}
|
||||
]*/
|
||||
|
||||
return (
|
||||
<div>
|
||||
@ -81,12 +100,52 @@ const FiltrarAgendamentos = (agendamentos, id) => {
|
||||
<h2>Seus proximos atendimentos</h2>
|
||||
|
||||
{consultas.map((consulta) => (
|
||||
<CardConsultaPaciente consulta={consulta}/>
|
||||
<CardConsultaPaciente consulta={consulta} setConsulta={setConsulta} setShowDeleteModal={setShowDeleteModal} setSelectedId={ setSelectedId}/>
|
||||
|
||||
))}
|
||||
{showDeleteModal &&
|
||||
<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
|
||||
</h5>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
></button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
<p className="mb-0 fs-5">
|
||||
Tem certeza que deseja excluir este agendamento?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="modal-footer">
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
onClick={() => setShowDeleteModal(false)}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
|
||||
<h2>Historico de consultas:</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
onClick={() => {deleteConsulta(selectedID);setShowDeleteModal(false)}}
|
||||
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -5,12 +5,13 @@ import { GetPatientByCPF } from "../components/utils/Functions-Endpoints/Patient
|
||||
import { GetDoctorByName, GetAllDoctors } from "../components/utils/Functions-Endpoints/Doctor";
|
||||
import { useAuth } from "../components/utils/AuthProvider";
|
||||
import API_KEY from "../components/utils/apiKeys";
|
||||
|
||||
import { useNavigate } from "react-router-dom";
|
||||
const FormConsultaPaciente = ({ onCancel, onSave, setAgendamento, agendamento }) => {
|
||||
const {getAuthorizationHeader} = useAuth()
|
||||
|
||||
console.log(agendamento, 'aqui2')
|
||||
|
||||
const navigate = useNavigate()
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
const [anexos, setAnexos] = useState([]);
|
||||
const [loadingAnexos, setLoadingAnexos] = useState(false);
|
||||
@ -168,6 +169,7 @@ const formatarHora = (datetimeString) => {
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
alert("Agendamento salvo!");
|
||||
navigate("/paciente/agendamento")
|
||||
onSave({...agendamento, horarioInicio:horarioInicio})
|
||||
};
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
border-radius: 10px; /* Cantos arredondados */
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave */
|
||||
overflow: hidden; /* Garante que o fundo azul não 'vaze' */
|
||||
width: 280px; /* Largura de exemplo */
|
||||
/* width: 280px; /* Largura de exemplo */
|
||||
margin: 20px;
|
||||
font-family: Arial, sans-serif; /* Fonte legível */
|
||||
}
|
||||
@ -37,8 +37,70 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1; /* Faz com que a div de informações preencha o espaço restante */
|
||||
|
||||
gap:6rem;
|
||||
|
||||
}
|
||||
|
||||
.informacao {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.actions-container {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
border-radius: 10px;
|
||||
margin-left: 2rem;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
/* 🎨 Glassmorphism */
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
backdrop-filter: blur(80px);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
||||
|
||||
}
|
||||
|
||||
/* Mostra no hover do card */
|
||||
.card-consulta:hover .actions-container {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* 3. Estilos base para o botão de edição (amarelo) */
|
||||
.btn-edit-custom-style {
|
||||
background-color: #ffc107; /* Amarelo da sua imagem */
|
||||
color: #343a40; /* Cor do ícone (cinza escuro para contraste) */
|
||||
border: none;
|
||||
padding: 8px 12px; /* Ajuste o padding para o tamanho do botão */
|
||||
border-radius: 0.25rem; /* Leve arredondamento de borda */
|
||||
transition: background-color 0.2s ease-in-out; /* Suaviza a transição de cor */
|
||||
}
|
||||
|
||||
|
||||
/* 5. Estilos base para o botão de exclusão (vermelho) */
|
||||
.btn-delete-custom-style {
|
||||
background-color: #dc3545; /* Vermelho da sua imagem */
|
||||
color: #ffffff; /* Cor do ícone (branco para contraste) */
|
||||
border: none;
|
||||
padding: 8px 12px; /* Ajuste o padding para o tamanho do botão */
|
||||
border-radius: 0.25rem; /* Leve arredondamento de borda */
|
||||
transition: background-color 0.2s ease-in-out; /* Suaviza a transição de cor */
|
||||
|
||||
font-weight:bold ;
|
||||
|
||||
}
|
||||
|
||||
/* 6. Estilo de hover para o botão de exclusão */
|
||||
.btn-delete-custom-style:hover {
|
||||
background-color: #c82333; /* Um vermelho um pouco mais escuro para o hover */
|
||||
filter: brightness(90%); /* Alternativa: escurecer um pouco mais */
|
||||
}
|
||||
|
||||
@ -28,6 +28,7 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
|
||||
|
||||
|
||||
<p>{Dia ? `${Dia?.split('-')[2]}/${Dia?.split('-')[1]}/${Dia?.split('-')[0]}`: ''}</p>
|
||||
|
||||
<button onClick={() => {if(ListaDiasComAgendamentos.length - 1 === indiceAcesso)return; else(setIndiceAcesso(indiceAcesso + 1))}}> <i className="bi bi-chevron-compact-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -186,7 +186,6 @@ const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
|
||||
};
|
||||
|
||||
|
||||
|
||||
const filteredAgendamentos = useMemo(() => {
|
||||
if (!searchTerm.trim()) {
|
||||
return AgendamentosMes;
|
||||
|
||||
@ -1,21 +1,27 @@
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import Sidebar from "../../components/Sidebar";
|
||||
import PacienteItems from "../../data/sidebar-items-paciente.json";
|
||||
|
||||
import { useState } from "react";
|
||||
import LaudoManager from "../../pages/LaudoManager";
|
||||
import ConsultaCadastroManager from "../../PagesPaciente/ConsultaCadastroManager";
|
||||
import ConsultasPaciente from "../../PagesPaciente/ConsultasPaciente";
|
||||
|
||||
import ConsultaEditPage from "../../PagesPaciente/ConsultaEditPage";
|
||||
function PerfilPaciente({ onLogout }) {
|
||||
|
||||
const [dadosConsulta, setConsulta] = useState({})
|
||||
|
||||
|
||||
return (
|
||||
|
||||
<div id="app" className="active">
|
||||
<Sidebar onLogout={onLogout} menuItems={PacienteItems} />
|
||||
|
||||
<div id="main">
|
||||
<Routes>
|
||||
<Route path="/" element={<LaudoManager />} />
|
||||
<Route path="agendamento" element={<ConsultasPaciente />} />
|
||||
<Route path="agendamento" element={<ConsultasPaciente setConsulta={setConsulta}/>} />
|
||||
<Route path="agendamento/criar" element={<ConsultaCadastroManager />} />
|
||||
<Route path="agendamento/edit" element={<ConsultaEditPage dadosConsulta={dadosConsulta} />} />
|
||||
<Route path="laudo" element={<LaudoManager />} />
|
||||
<Route path="*" element={<h2>Página não encontrada</h2>} />
|
||||
</Routes>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user