atualizar paciente

This commit is contained in:
jp-lima 2025-09-17 17:09:32 -03:00
parent b9a35be8ee
commit 6e93cb5f14
3 changed files with 90 additions and 116 deletions

View File

@ -1,9 +1,7 @@
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
function PatientForm({ onSave, onCancel, PatientDict }) { function PatientForm({ onSave, onCancel,formData, setFormData }) {
PatientDict = PatientDict || {}
const FormatTelefones = (valor) => { const FormatTelefones = (valor) => {
const digits = String(valor).replace(/\D/g, '').slice(0, 11); const digits = String(valor).replace(/\D/g, '').slice(0, 11);
@ -67,61 +65,6 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
} }
const [formData, setFormData] = useState({
foto: null,
nome:PatientDict.nome,
nomeSocial: PatientDict.nome_social,
dataNascimento: PatientDict.data_nascimento,
genero: PatientDict.sexo,
cpf: PatientDict.cpf,
profissao: PatientDict.profissao ,
nomeMae: PatientDict.nome_mae,
profissaoMae: PatientDict.profissao_mae,
nomePai: PatientDict.nome_pai,
nomeResponsavel: '',
cpfResponsavel: '',
nomeConjuge: '',
outroId: '',
cep:PatientDict.endereco?.cep,
cidade: PatientDict.endereco?.cidade,
estado: PatientDict.endereco?.estado,
bairro: PatientDict.endereco?.bairro,
rua: PatientDict.endereco?.logradouro,
numero: PatientDict.endereco?.numero,
complemento: PatientDict.endereco?.complemento,
email: PatientDict.contato?.email,
telefone1: PatientDict.contato?.telefone1,
telefone2: PatientDict.contato?.telefone2,
telefone3: PatientDict.contato?.telefone3,
observacoes: PatientDict.observacoes,
rg: PatientDict.rg,
documentoTipo: PatientDict.outros_documentos?.tipo,
numeroDocumento: '',
etniaRaca: '',
naturalidade: '',
nacionalidade: '',
estadoCivil: '',
rnConvenio: false,
// INFORMAÇÕES MÉDICAS
tipoSanguineo: '',
peso: '',
altura: '',
imc: '',
alergias: '',
// INFORMAÇÕES DE CONVÊNIO
convenio: '',
plano: '',
numeroMatricula: '',
validadeCarteira: '',
validadeIndeterminada: false,
pacienteVip: false,
// ANEXO
anexos: null,
});
// Estado para armazenar a URL da foto do avatar // Estado para armazenar a URL da foto do avatar
const [avatarUrl, setAvatarUrl] = useState(null); const [avatarUrl, setAvatarUrl] = useState(null);
@ -155,9 +98,19 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
}, [formData.peso, formData.altura]); }, [formData.peso, formData.altura]);
const [enderecoData, setEnderecoData] = useState({})
useEffect(() => {setEnderecoData(formData.endereco || {}); console.log(enderecoData)}, [formData.endereco])
const [contato, setContato] = useState({})
useEffect(() => {setContato(formData.contato || {})}, [formData.contato])
const handleChange = (e) => { const handleChange = (e) => {
const { name, value, type, checked, files } = e.target; const { name, value, type, checked, files } = e.target;
console.log(enderecoData)
if (type === 'checkbox') { if (type === 'checkbox') {
setFormData({ ...formData, [name]: checked }); setFormData({ ...formData, [name]: checked });
} else if (type === 'file') { } else if (type === 'file') {
@ -172,19 +125,24 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
reader.readAsDataURL(files[0]); reader.readAsDataURL(files[0]);
} else if (name === 'foto' && !files[0]) { } else if (name === 'foto' && !files[0]) {
setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado
} }}
} else {
setFormData({ ...formData, [name]: value });
}
if (name.includes('cpf')) { if (name.includes('cpf')) {
let cpfFormatado = FormatCPF(value); let cpfFormatado = FormatCPF(value);
setFormData(prev => ({ ...prev, [name]: cpfFormatado })); setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
} else if (name.includes('telefone')) { } else if (name.includes('telefone')) {
let telefoneFormatado = FormatTelefones(value); let telefoneFormatado = FormatTelefones(value);
setFormData(prev => ({ ...prev, [name]: telefoneFormatado })); setContato(prev => ({ ...prev, [name]: telefoneFormatado }));
} }
if (name === 'email') {
setContato(prev => ({ ...prev, email: value }));
}else if(name.includes('endereco')) {
setEnderecoData(prev => ({ ...prev, [name.split('.')[1]]: value }));
}else{
setFormData({ ...formData, [name]: value });}
}; };
const handleCepBlur = async () => { const handleCepBlur = async () => {
@ -211,35 +169,31 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
}; };
const handleSubmit = async () => { const handleSubmit = async () => {
if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento){ if (!formData.nome || !formData.cpf || !formData.sexo || !formData.data_nascimento){
alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.'); alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.');
} }
const CPFinvalido = await ValidarCPF(formData.cpf) const CPFinvalido = await ValidarCPF(formData.cpf)
console.log(CPFinvalido) console.log(CPFinvalido)
if(CPFinvalido[0] === true){ if(CPFinvalido[0] === true){
alert(CPFinvalido[1]) alert(CPFinvalido[1])
return return}
}
onSave({ onSave({
...formData, ...formData,
endereco: { endereco: {
cep: formData.cep, cep: enderecoData.cep,
cidade: formData.cidade, cidade: enderecoData.cidade,
estado: formData.estado, estado: enderecoData.estado,
bairro: formData.bairro, bairro: enderecoData.bairro,
logradouro: formData.rua, logradouro: enderecoData.logradouro,
numero: formData.numero, numero: enderecoData.numero,
complemento: formData.complemento, complemento: enderecoData.complemento,
}, },
contato: { contato: {
email: formData.email, email: contato.email,
telefone1: formData.telefone1, telefone1: contato.telefone1,
telefone2: formData.telefone2, telefone2: contato.telefone2,
telefone3: formData.telefone3, telefone3: contato.telefone3,
}, },
infoMedicas: { infoMedicas: {
tipoSanguineo: formData.tipoSanguineo, tipoSanguineo: formData.tipoSanguineo,
@ -316,19 +270,19 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
{/* CADASTRO */} {/* CADASTRO */}
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Nome: *</label> <label style={{ fontSize: '1.1rem' }}>Nome: *</label>
<input type="text" className="form-control" name="nome" value={PatientDict.nome} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Nome social:</label> <label style={{ fontSize: '1.1rem' }}>Nome social:</label>
<input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="nome_social" value={formData.nome_social} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label> <label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
<input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="date" className="form-control" name="data_nascimento" value={formData.data_nascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Gênero: *</label> <label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
<select className="form-control" name="genero" value={formData.genero} onChange={handleChange} style={{ fontSize: '1.1rem' }}> <select className="form-control" name="sexo" value={formData.sexo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
<option value="">Selecione</option> <option value="">Selecione</option>
<option value="Masculino">Masculino</option> <option value="Masculino">Masculino</option>
<option value="Feminino">Feminino</option> <option value="Feminino">Feminino</option>
@ -354,7 +308,7 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Número do documento:</label> <label style={{ fontSize: '1.1rem' }}>Número do documento:</label>
<input type="text" className="form-control" name="numeroDocumento" value={formData.numeroDocumento} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="numero_documento" value={formData.numero_documento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label> <label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label>
@ -381,7 +335,7 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Estado civil:</label> <label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
<select className="form-control" name="estadoCivil" value={formData.estadoCivil} onChange={handleChange} style={{ fontSize: '1.1rem' }}> <select className="form-control" name="estado_civil" value={formData.estado_civil} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
<option value="">Selecione</option> <option value="">Selecione</option>
<option value="Solteiro">Solteiro(a)</option> <option value="Solteiro">Solteiro(a)</option>
<option value="Casado">Casado(a)</option> <option value="Casado">Casado(a)</option>
@ -391,31 +345,31 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Nome da Mãe:</label> <label style={{ fontSize: '1.1rem' }}>Nome da Mãe:</label>
<input type="text" className="form-control" name="nomeMae" value={formData.nomeMae} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="nomeMae" value={formData.nome_mae} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Profissão da mãe:</label> <label style={{ fontSize: '1.1rem' }}>Profissão da mãe:</label>
<input type="text" className="form-control" name="profissaoMae" value={formData.profissaoMae} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="profissaoMae" value={formData.profissao_mae} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Nome do Pai:</label> <label style={{ fontSize: '1.1rem' }}>Nome do Pai:</label>
<input type="text" className="form-control" name="nomePai" value={formData.nomePai} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="nomePai" value={formData.nome_pai} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Profissão do pai:</label> <label style={{ fontSize: '1.1rem' }}>Profissão do pai:</label>
<input type="text" className="form-control" name="profissaoPai" value={formData.profissaoPai} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="profissaoPai" value={formData.profissao_pai} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Nome do responsável:</label> <label style={{ fontSize: '1.1rem' }}>Nome do responsável:</label>
<input type="text" className="form-control" name="nomeResponsavel" value={formData.nomeResponsavel} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="nomeResponsavel" value={formData.nome_responsavel} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>CPF do responsável:</label> <label style={{ fontSize: '1.1rem' }}>CPF do responsável:</label>
<input type="text" className="form-control" name="cpfResponsavel" value={formData.cpfResponsavel} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="cpfResponsavel" value={formData.cpf_responsavel} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Nome do esposo(a):</label> <label style={{ fontSize: '1.1rem' }}>Nome do esposo(a):</label>
<input type="text" className="form-control" name="nomeConjuge" value={formData.nomeConjuge} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="nomeConjuge" value={formData.nome_conjuge} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Identificador de outro sistema:</label> <label style={{ fontSize: '1.1rem' }}>Identificador de outro sistema:</label>
@ -557,31 +511,31 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
<div className="row mt-3"> <div className="row mt-3">
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label style={{ fontSize: '1.1rem' }}>CEP:</label> <label style={{ fontSize: '1.1rem' }}>CEP:</label>
<input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="endereco.cep" value={enderecoData.cep} onChange={handleChange} onBlur={handleCepBlur} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-8 mb-3"> <div className="col-md-8 mb-3">
<label style={{ fontSize: '1.1rem' }}>Rua:</label> <label style={{ fontSize: '1.1rem' }}>Rua:</label>
<input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="endereco.logradouro" value={enderecoData.logradouro} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Bairro:</label> <label style={{ fontSize: '1.1rem' }}>Bairro:</label>
<input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="endereco.bairro" value={enderecoData.bairro} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label style={{ fontSize: '1.1rem' }}>Cidade:</label> <label style={{ fontSize: '1.1rem' }}>Cidade:</label>
<input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="endereco.cidade" value={enderecoData.cidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-2 mb-3"> <div className="col-md-2 mb-3">
<label style={{ fontSize: '1.1rem' }}>Estado:</label> <label style={{ fontSize: '1.1rem' }}>Estado:</label>
<input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="endereco.estado" value={enderecoData.estado} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-4 mb-3"> <div className="col-md-4 mb-3">
<label style={{ fontSize: '1.1rem' }}>Número:</label> <label style={{ fontSize: '1.1rem' }}>Número:</label>
<input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="endereco.numero" value={enderecoData.numero} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-8 mb-3"> <div className="col-md-8 mb-3">
<label style={{ fontSize: '1.1rem' }}>Complemento:</label> <label style={{ fontSize: '1.1rem' }}>Complemento:</label>
<input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="endereco.complemento" value={enderecoData.complemento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
</div> </div>
</div> </div>
@ -598,20 +552,20 @@ function PatientForm({ onSave, onCancel, PatientDict }) {
<div className={`collapse${collapsedSections.contato ? ' show' : ''}`}> <div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
<div className="row mt-3"> <div className="row mt-3">
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Email: *</label> <label style={{ fontSize: '1.1rem' }}>Email:</label>
<input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="email" className="form-control" name="email" value={contato.email || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label> <label style={{ fontSize: '1.1rem' }}>Telefone:</label>
<input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="telefone1" value={contato.telefone1 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Telefone 2:</label> <label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
<input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="telefone2" value={contato.telefone2 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
<div className="col-md-6 mb-3"> <div className="col-md-6 mb-3">
<label style={{ fontSize: '1.1rem' }}>Telefone 3:</label> <label style={{ fontSize: '1.1rem' }}>Telefone 3:</label>
<input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} style={{ fontSize: '1.1rem' }} /> <input type="text" className="form-control" name="telefone3" value={contato.telefone3 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
</div> </div>
</div> </div>
</div> </div>

View File

@ -23,9 +23,28 @@ fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOpt
.catch(error => console.log('error', error)); .catch(error => console.log('error', error));
}, []) }, [])
const HandlePutPatient = () => {
console.log('paciente atualizado') const HandlePutPatient = () => {
alert(`Atualizando paciente "${PatientToPUT.nome}" com sucesso`)
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer <token>");
myHeaders.append("Content-Type", "application/json");
var raw = JSON.stringify(PatientToPUT)
console.log(PatientToPUT)
var requestOptions = {
method: 'PUT',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions)
.then(response => response.text())
.then(result => console.log('ATUALIZADO COM SUCESSO',result))
.catch(error => console.log('error', error));
} }
@ -41,8 +60,9 @@ fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${id}`, requestOpt
<PatientForm <PatientForm
onSave={HandlePutPatient} onSave={HandlePutPatient}
onCancel={console.log('Não atualizar')} onCancel={console.log('Não atualizar')}
PatientDict={PatientToPUT}
formData={PatientToPUT}
setFormData={setPatientPUT}
/> />
</div> </div>

View File

@ -8,7 +8,7 @@ function FormLayout( ) {
// Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário) // Este estado vai controlar qual "tela" mostrar: 'list' (lista) ou 'form' (formulário)
const [view, setView] = useState('form'); const [view, setView] = useState('form');
const [formData, setFormData] = useState({})
var myHeaders = new Headers(); var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json"); myHeaders.append("Content-Type", "application/json");
@ -55,8 +55,8 @@ function FormLayout( ) {
<PatientForm <PatientForm
onSave={handleSavePatient} onSave={handleSavePatient}
onCancel={() => setView('list')} onCancel={() => setView('list')}
PatientDict={{}} formData={formData}
setFormData={setFormData}
/> />
)} )}
</div> </div>