Details funcional

This commit is contained in:
jp-lima 2025-09-17 10:54:18 -03:00
parent cdfe4eac69
commit 82469bccf9
2 changed files with 43 additions and 39 deletions

View File

@ -52,15 +52,9 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
} }
else if(ExisteNoBancoDeDados === true){ else if(ExisteNoBancoDeDados === true){
aviso = 'O CPF informado já está presente no sistema' aviso = 'O CPF informado já está presente no sistema'
Erro = true Erro = true
} }
return [Erro,aviso] return [Erro,aviso]
} }
const FormatCPF = (valor) => { const FormatCPF = (valor) => {

View File

@ -2,28 +2,40 @@ import React, { useEffect, useState } from "react";
import avatarPlaceholder from '../assets/images/avatar_placeholder.png'; import avatarPlaceholder from '../assets/images/avatar_placeholder.png';
const Details = ({ patientID, setCurrentPage }) => { const Details = ({ patientID, setCurrentPage }) => {
const [paciente, setPaciente] = useState(null); const [paciente, setPaciente] = useState({});
useEffect(() => { useEffect(() => {
if (!patientID) return; if (!patientID) return;
fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`) fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}`)
.then(res => res.json()) .then(res => res.json())
.then(data => setPaciente(data))
.then(result => {setPaciente(result.data); console.log(result.data)})
.catch(err => console.error("Erro ao buscar paciente:", err)); .catch(err => console.error("Erro ao buscar paciente:", err));
}, [patientID]); }, [patientID]);
if (!paciente) return <p style={{ textAlign: "center" }}>Carregando...</p>;
return ( return (
<> <>
<div>
<button className="btn btn-success me-2" onClick={() => setCurrentPage("table")}>
<i className="bi bi-chevron-left"></i> Voltar
</button>
<button className="btn btn-light" onClick={() => setCurrentPage("edit-page-paciente")}>
<i className="bi bi-pencil-square"></i> Editar
</button>
</div>
<br/>
{/* ------------------ HEADER ------------------ */}
<div className="card p-3"> <div className="card p-3">
<h3 className="mb-3 text-center">MediConnect</h3> <h3 className="mb-3 text-center">MediConnect</h3>
<hr /> <hr />
<div className="d-flex justify-content-between align-items-center mb-3"> <div className="d-flex justify-content-between align-items-center mb-3">
<button className="btn btn-success me-2" onClick={() => setCurrentPage("table")}>
<i className="bi bi-chevron-left"></i> Voltar
</button>
<div className="d-flex mb-3"> <div className="d-flex mb-3">
<div className="avatar avatar-lg"> <div className="avatar avatar-lg">
<img src={avatarPlaceholder} alt="" /> <img src={avatarPlaceholder} alt="" />
@ -33,9 +45,7 @@ const Details = ({ patientID, setCurrentPage }) => {
<p>{paciente.cpf || "CPF"}</p> <p>{paciente.cpf || "CPF"}</p>
</div> </div>
</div> </div>
<button className="btn btn-light" onClick={() => setCurrentPage("edit-page-paciente")}>
<i className="bi bi-pencil-square"></i> Editar
</button>
</div> </div>
</div> </div>
@ -50,11 +60,11 @@ const Details = ({ patientID, setCurrentPage }) => {
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Nome social:</label> <label>Nome social:</label>
<p>{paciente.nomeSocial || "-"}</p> <p>{paciente.nome_social || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Data de nascimento:</label> <label>Data de nascimento:</label>
<p>{paciente.dataNascimento || "-"}</p> <p>{paciente.data_nascimento || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Gênero:</label> <label>Gênero:</label>
@ -62,11 +72,11 @@ const Details = ({ patientID, setCurrentPage }) => {
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Outro documento:</label> <label>Outro documento:</label>
<p>{paciente.documento || "-"}</p> <p>{paciente.outros_documentos?.tipo || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Número do documento:</label> <label>Número do documento:</label>
<p>{paciente.numeroDocumento || "-"}</p> <p>{paciente.outros_documentos?.numero || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>CPF:</label> <label>CPF:</label>
@ -78,31 +88,31 @@ const Details = ({ patientID, setCurrentPage }) => {
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Nome da Mãe:</label> <label>Nome da Mãe:</label>
<p>{paciente.nomeMae || "-"}</p> <p>{paciente.nome_mae || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Profissão da mãe:</label> <label>Profissão da mãe:</label>
<p>{paciente.profissaoMae || "-"}</p> <p>{paciente.profissao_mae || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Nome do Pai:</label> <label>Nome do Pai:</label>
<p>{paciente.nomePai || "-"}</p> <p>{paciente.nome_pai || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Profissão do pai:</label> <label>Profissão do pai:</label>
<p>{paciente.profissaoPai || "-"}</p> <p>{paciente.profissao_pai || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Nome do responsável:</label> <label>Nome do responsável:</label>
<p>{paciente.nomeResponsavel || "-"}</p> <p>{paciente.nome_responsavel || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>CPF do responsável:</label> <label>CPF do responsável:</label>
<p>{paciente.cpfResponsavel || "-"}</p> <p>{paciente.cpf_responsavel || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Nome do esposo(a):</label> <label>Nome do esposo(a):</label>
<p>{paciente.nomeConjuge || "-"}</p> <p>{paciente.nome_conjuge || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Identificador de outro sistema:</label> <label>Identificador de outro sistema:</label>
@ -118,31 +128,31 @@ const Details = ({ patientID, setCurrentPage }) => {
<div className="row"> <div className="row">
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label>CEP:</label> <label>CEP:</label>
<p>{paciente.cep || "-"}</p> <p>{paciente.endereco?.cep || "-"}</p>
</div> </div>
<div className="col-md-8 mb-3"> <div className="col-md-8 mb-3">
<label>Rua:</label> <label>Rua:</label>
<p>{paciente.rua || "-"}</p> <p>{paciente.endereco?.logradouro || "-"}</p>
</div> </div>
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label>Bairro:</label> <label>Bairro:</label>
<p>{paciente.bairro || "-"}</p> <p>{paciente.endereco?.bairro || "-"}</p>
</div> </div>
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label>Cidade:</label> <label>Cidade:</label>
<p>{paciente.cidade || "-"}</p> <p>{paciente.endereco?.cidade || "-"}</p>
</div> </div>
<div className="col-md-2 mb-3"> <div className="col-md-2 mb-3">
<label>Estado:</label> <label>Estado:</label>
<p>{paciente.estado || "-"}</p> <p>{paciente.endereco?.estado || "-"}</p>
</div> </div>
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label>Número:</label> <label>Número:</label>
<p>{paciente.numero || "-"}</p> <p>{paciente.endereco?.numero || "-"}</p>
</div> </div>
<div className="col-md-8 mb-3"> <div className="col-md-8 mb-3">
<label>Complemento:</label> <label>Complemento:</label>
<p>{paciente.complemento || "-"}</p> <p>{paciente.endereco?.complemento || "-"}</p>
</div> </div>
</div> </div>
</div> </div>
@ -154,19 +164,19 @@ const Details = ({ patientID, setCurrentPage }) => {
<div className="row"> <div className="row">
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Email:</label> <label>Email:</label>
<p>{paciente.email || "-"}</p> <p>{paciente.contato?.email || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Telefone:</label> <label>Telefone:</label>
<p>{paciente.telefone1 || "-"}</p> <p>{paciente.contato?.telefone1 || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Telefone 2:</label> <label>Telefone 2:</label>
<p>{paciente.telefone2 || "-"}</p> <p>{paciente.contato?.telefone2 || "-"}</p>
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label>Celular:</label> <label>Telefone 3:</label>
<p>{paciente.telefone3 || "-"}</p> <p>{paciente.contato?.telefone3 || "-"}</p>
</div> </div>
</div> </div>
</div> </div>