forked from RiseUP/riseup-squad23
571 lines
25 KiB
JavaScript
571 lines
25 KiB
JavaScript
import React, { useState } from 'react';
|
|
import InputMask from "react-input-mask";
|
|
|
|
function DoctorForm({ onSave, onCancel, PatientDict }) {
|
|
|
|
const FormatTelefones = (valor) => {
|
|
|
|
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
|
|
|
|
|
return digits
|
|
.replace(/(\d)/, '($1') // 123 -> 123.
|
|
.replace(/(\d{2})(\d)/, '$1) $2' )
|
|
.replace(/(\d)(\d{4})/, '$1 $2')
|
|
.replace(/(\d{4})(\d{4})/, '$1-$2')
|
|
}
|
|
|
|
|
|
const FormatCPF = (valor) => {
|
|
|
|
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
|
|
|
|
|
|
|
return digits
|
|
.replace(/(\d{3})(\d)/, '$1.$2') // 123 -> 123.
|
|
.replace(/(\d{3})(\d)/, '$1.$2') // 123.456 -> 123.456.
|
|
.replace(/(\d{3})(\d{1,2})$/, '$1-$2'); // 123.456.789 -> 123.456.789-01
|
|
|
|
}
|
|
|
|
|
|
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 ,
|
|
nomeConjuge: '',
|
|
outroId: '',
|
|
cep: '',
|
|
cidade: PatientDict.cidade,
|
|
estado: PatientDict.estado,
|
|
bairro: PatientDict.bairro,
|
|
rua: PatientDict.logradouro,
|
|
numero: '',
|
|
complemento: '',
|
|
email: PatientDict.email,
|
|
telefone1: PatientDict.celular,
|
|
telefone2: '',
|
|
telefone3: '',
|
|
observacoes: '',
|
|
rg: '',
|
|
documentoTipo: '',
|
|
numeroDocumento: '',
|
|
etniaRaca: '',
|
|
naturalidade: '',
|
|
nacionalidade: '',
|
|
estadoCivil: '',
|
|
|
|
// INFORMAÇÕES MÉDICAS
|
|
tipoSanguineo: '',
|
|
peso: '',
|
|
altura: '',
|
|
imc: '',
|
|
alergias: '',
|
|
|
|
// ANEXO
|
|
anexos: null,
|
|
});
|
|
|
|
// Estado para armazenar a URL da foto do avatar
|
|
const [avatarUrl, setAvatarUrl] = useState(null);
|
|
|
|
// Estado para controlar quais seções estão colapsadas
|
|
const [collapsedSections, setCollapsedSections] = useState({
|
|
dadosPessoais: true, // Alterado para true para a seção ficar aberta por padrão
|
|
infoMedicas: false,
|
|
infoConvenio: false,
|
|
endereco: false,
|
|
contato: false,
|
|
});
|
|
|
|
// Função para alternar o estado de colapso de uma seção
|
|
const handleToggleCollapse = (section) => {
|
|
setCollapsedSections(prevState => ({
|
|
...prevState,
|
|
[section]: !prevState[section]
|
|
}));
|
|
};
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value, type, checked, files } = e.target;
|
|
|
|
if (type === 'checkbox') {
|
|
setFormData({ ...formData, [name]: checked });
|
|
} else if (type === 'file') {
|
|
setFormData({ ...formData, [name]: files[0] });
|
|
|
|
// Lógica para pré-visualizar a imagem no avatar
|
|
if (name === 'foto' && files[0]) {
|
|
const reader = new FileReader();
|
|
reader.onloadend = () => {
|
|
setAvatarUrl(reader.result);
|
|
};
|
|
reader.readAsDataURL(files[0]);
|
|
} else if (name === 'foto' && !files[0]) {
|
|
setAvatarUrl(null); // Limpa o avatar se nenhum arquivo for selecionado
|
|
}
|
|
|
|
} else {
|
|
setFormData({ ...formData, [name]: value });
|
|
}
|
|
|
|
if (name.includes('cpf')) {
|
|
let cpfFormatado = FormatCPF(value);
|
|
setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
|
|
} else if (name.includes('telefone')) {
|
|
let telefoneFormatado = FormatTelefones(value);
|
|
setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
|
|
}
|
|
};
|
|
|
|
// Função para buscar endereço pelo CEP
|
|
const handleCepBlur = async () => {
|
|
const cep = formData.cep.replace(/\D/g, '');
|
|
if (cep.length === 8) {
|
|
try {
|
|
const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
|
|
const data = await response.json();
|
|
if (!data.erro) {
|
|
setFormData((prev) => ({
|
|
...prev,
|
|
rua: data.logradouro || '',
|
|
bairro: data.bairro || '',
|
|
cidade: data.localidade || '',
|
|
estado: data.uf || ''
|
|
}));
|
|
} else {
|
|
alert('CEP não encontrado!');
|
|
}
|
|
} catch (error) {
|
|
alert('Erro ao buscar o CEP.');
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleSubmit = () => {
|
|
if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento || !formData.email) {
|
|
alert('Por favor, preencha: Nome ,CPF, Gênero, Data de Nascimento e Email.');
|
|
return;
|
|
}
|
|
|
|
onSave(
|
|
{
|
|
...formData,
|
|
endereco: {
|
|
cep: formData.cep,
|
|
cidade: formData.cidade,
|
|
estado: formData.estado,
|
|
bairro: formData.bairro,
|
|
logradouro: formData.rua,
|
|
numero: formData.numero,
|
|
complemento: formData.complemento,
|
|
},
|
|
contato: {
|
|
email: formData.email,
|
|
telefone1: formData.telefone1,
|
|
telefone2: formData.telefone2,
|
|
telefone3: formData.telefone3,
|
|
},
|
|
infoMedicas: {
|
|
tipoSanguineo: formData.tipoSanguineo,
|
|
peso: formData.peso,
|
|
altura: formData.altura,
|
|
imc: formData.imc,
|
|
alergias: formData.alergias,
|
|
}
|
|
}
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="card p-3 shadow-sm">
|
|
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
|
|
|
{/* DADOS PESSOAIS */}
|
|
<div className="mb-5 p-4 border rounded shadow-sm">
|
|
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('dadosPessoais')} style={{ fontSize: '1.8rem' }}>
|
|
Dados Pessoais
|
|
<span className="fs-5">
|
|
{collapsedSections.dadosPessoais ? '▲' : '▼'}
|
|
</span>
|
|
</h4>
|
|
<div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
|
|
<div className="row mt-3">
|
|
{/* AVATAR E INPUT DE FOTO */}
|
|
<div className="col-md-6 mb-3 d-flex align-items-center">
|
|
<div className="me-3">
|
|
{avatarUrl ? (
|
|
<img
|
|
src={avatarUrl}
|
|
alt="Avatar do Médico"
|
|
style={{ width: '100px', height: '100px', borderRadius: '50%', objectFit: 'cover' }}
|
|
/>
|
|
) : (
|
|
<div
|
|
style={{
|
|
width: '100px',
|
|
height: '100px',
|
|
borderRadius: '50%',
|
|
backgroundColor: '#e0e0e0',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
fontSize: '3.5rem',
|
|
color: '#9e9e9e'
|
|
}}
|
|
>
|
|
☤
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
|
|
<input
|
|
type="file"
|
|
className="form-control d-none"
|
|
name="foto"
|
|
id="foto-input"
|
|
onChange={handleChange}
|
|
accept="image/*"
|
|
/>
|
|
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
|
|
</div>
|
|
</div>
|
|
{/* CADASTRO */}
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Nome: *</label>
|
|
<input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<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' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<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' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
|
|
<select className="form-control" name="genero" value={formData.genero} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
|
<option value="">Selecione</option>
|
|
<option value="Masculino">Masculino</option>
|
|
<option value="Feminino">Feminino</option>
|
|
<option value="Outro">Outro</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Identificador de outro sistema:</label>
|
|
<input type="text" className="form-control" name="outroId" value={formData.outroId} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>CPF: *</label>
|
|
<input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>RG:</label>
|
|
<input type="text" className="form-control" name="rg" value={formData.rg} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Outros documentos:</label>
|
|
<select className="form-control" name="documentoTipo" value={formData.documentoTipo} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
|
<option value="">Selecione</option>
|
|
<option value="CNH">CNH</option>
|
|
<option value="Passaporte">Passaporte</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<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' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Etnia e Raça:</label>
|
|
<select className="form-control" name="etniaRaca" value={formData.etniaRaca} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
|
<option value="">Selecione</option>
|
|
<option value="Branca">Branca</option>
|
|
<option value="Preta">Preta</option>
|
|
<option value="Parda">Parda</option>
|
|
<option value="Amarela">Amarela</option>
|
|
<option value="Indígena">Indígena</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Naturalidade:</label>
|
|
<input type="text" className="form-control" name="naturalidade" value={formData.naturalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Nacionalidade:</label>
|
|
<input type="text" className="form-control" name="nacionalidade" value={formData.nacionalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Especialização:</label>
|
|
<select className="form-control" name="profissao" value={formData.profissao} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
|
<option value="">Selecione</option>
|
|
<option value="Cardiologia">Clínica médica (clínico geral)</option>
|
|
<option value="Dermatologia">Pediatria</option>
|
|
<option value="Ginecologia">Ginecologia e obstetrícia</option>
|
|
<option value="Pediatria">Cardiologia</option>
|
|
<option value="Ortopedia">Ortopedia e traumatologia</option>
|
|
<option value="Oftalmologia">Oftalmologia</option>
|
|
<option value="Neurologia">Otorrinolaringologia</option>
|
|
<option value="Psiquiatria">Dermatologia</option>
|
|
<option value="Endocrinologia">Neurologia</option>
|
|
<option value="Oncologia">Psiquiatria</option>
|
|
<option value="Oncologia">Endocrinologia</option>
|
|
<option value="Oncologia">Gastroenterologia</option>
|
|
<option value="Oncologia">Urologia</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
|
|
<select className="form-control" name="estadoCivil" value={formData.estadoCivil} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
|
<option value="">Selecione</option>
|
|
<option value="Solteiro">Solteiro(a)</option>
|
|
<option value="Casado">Casado(a)</option>
|
|
<option value="Divorciado">Divorciado(a)</option>
|
|
<option value="Viuvo">Viúvo(a)</option>
|
|
</select>
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<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' }} />
|
|
</div>
|
|
|
|
{/* CAMPOS MOVIDOS */}
|
|
<div className="col-md-12 mb-3 mt-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Observações:</label>
|
|
<textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange} style={{ fontSize: '1.1rem' }}></textarea>
|
|
</div>
|
|
<div className="col-md-12 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Anexos do Médico:</label>
|
|
<div>
|
|
<label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem', background: '#9ca3af' }}>Escolher arquivo</label>
|
|
<input type="file" className="form-control d-none" name="anexos" id="anexos-input" onChange={handleChange} />
|
|
<span className="ms-2" style={{ fontSize: '1.1rem' }}>{formData.anexos ? formData.anexos.name : 'Nenhum arquivo escolhido'}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ENDEREÇO */}
|
|
<div className="mb-5 p-4 border rounded shadow-sm">
|
|
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('endereco')} style={{ fontSize: '1.8rem' }}>
|
|
Endereço
|
|
<span className="fs-5">
|
|
{collapsedSections.endereco ? '▲' : '▼'}
|
|
</span>
|
|
</h4>
|
|
<div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
|
|
<div className="row mt-3">
|
|
<div className="col-md-4 mb-3">
|
|
<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' }} />
|
|
</div>
|
|
<div className="col-md-8 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Rua:</label>
|
|
<input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Bairro:</label>
|
|
<input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-4 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Cidade:</label>
|
|
<input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-2 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Estado:</label>
|
|
<input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-4 mb-3">
|
|
<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' }} />
|
|
</div>
|
|
<div className="col-md-8 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Complemento:</label>
|
|
<input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* CONTATO */}
|
|
<div className="mb-5 p-4 border rounded shadow-sm">
|
|
<h4 className="mb-4 cursor-pointer d-flex justify-content-between align-items-center" onClick={() => handleToggleCollapse('contato')} style={{ fontSize: '1.8rem' }}>
|
|
Contato
|
|
<span className="fs-5">
|
|
{collapsedSections.contato ? '▲' : '▼'}
|
|
</span>
|
|
</h4>
|
|
<div className={`collapse${collapsedSections.contato ? ' show' : ''}`}>
|
|
<div className="row mt-3">
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Email: *</label>
|
|
<input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
|
|
<input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<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' }} />
|
|
</div>
|
|
<div className="col-md-6 mb-3">
|
|
<label style={{ fontSize: '1.1rem' }}>Celular:</label>
|
|
<input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Botões */}
|
|
<div className="mt-3 text-center">
|
|
<button className="btn btn-success me-3" onClick={handleSubmit} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
|
Salvar Paciente
|
|
</button>
|
|
<button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
|
Cancelar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
// <div className="card p-3">
|
|
// <h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
|
|
|
// {/* ------------------ DADOS PESSOAIS ------------------ */}
|
|
// <h5 className="mb-3">Dados Pessoais</h5>
|
|
// <div className="row">
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>Nome: *</label>
|
|
// <input type="text" className="form-control" name="nome" value={formData.nome} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>Nome social:</label>
|
|
// <input type="text" className="form-control" name="nomeSocial" value={formData.nomeSocial} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>Data de nascimento:</label>
|
|
// <input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>Gênero: *</label>
|
|
// <select className="form-control" name="genero" value={formData.genero} onChange={handleChange}>
|
|
// <option value="">Selecione</option>
|
|
// <option value="Masculino">Masculino</option>
|
|
// <option value="Feminino">Feminino</option>
|
|
// <option value="Outro">Outro</option>
|
|
// </select>
|
|
// </div>
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>CPF: *</label>
|
|
// <input type="text" className="form-control" name="cpf" value={formData.cpf} onChange={ handleChange} />
|
|
// </div>
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>Especialização:</label>
|
|
// <select
|
|
// className="form-control"
|
|
// name="profissao"
|
|
// value={formData.profissao}
|
|
// onChange={handleChange}
|
|
// >
|
|
// <option value="">Selecione uma especialização</option>
|
|
// <option value="Cardiologia">Clínica médica (clínico geral)</option>
|
|
// <option value="Dermatologia">Pediatria</option>
|
|
// <option value="Ginecologia">Ginecologia e obstetrícia</option>
|
|
// <option value="Pediatria">Cardiologia</option>
|
|
// <option value="Ortopedia">Ortopedia e traumatologia</option>
|
|
// <option value="Oftalmologia">Oftalmologia</option>
|
|
// <option value="Neurologia">Otorrinolaringologia</option>
|
|
// <option value="Psiquiatria">Dermatologia</option>
|
|
// <option value="Endocrinologia">Neurologia</option>
|
|
// <option value="Oncologia">Psiquiatria</option>
|
|
// <option value="Oncologia">Endocrinologia</option>
|
|
// <option value="Oncologia">Gastroenterologia</option>
|
|
// <option value="Oncologia">Urologia</option>
|
|
// </select>
|
|
// </div>
|
|
// </div>
|
|
|
|
// {/* ------------------ ENDEREÇO ------------------ */}
|
|
// <h5>Endereço</h5>
|
|
// <div className="row">
|
|
// <div className="col-md-4 mb-3">
|
|
// <label>CEP:</label>
|
|
// <input type="text" className="form-control" name="cep" value={formData.cep} onChange={handleChange} onBlur={handleCepBlur} />
|
|
// </div>
|
|
// <div className="col-md-8 mb-3">
|
|
// <label>Rua:</label>
|
|
// <input type="text" className="form-control" name="rua" value={formData.rua} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>Bairro:</label>
|
|
// <input type="text" className="form-control" name="bairro" value={formData.bairro} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-4 mb-3">
|
|
// <label>Cidade:</label>
|
|
// <input type="text" className="form-control" name="cidade" value={formData.cidade} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-2 mb-3">
|
|
// <label>Estado:</label>
|
|
// <input type="text" className="form-control" name="estado" value={formData.estado} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-4 mb-3">
|
|
// <label>Número:</label>
|
|
// <input type="text" className="form-control" name="numero" value={formData.numero} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-8 mb-3">
|
|
// <label>Complemento:</label>
|
|
// <input type="text" className="form-control" name="complemento" value={formData.complemento} onChange={handleChange} />
|
|
// </div>
|
|
// </div>
|
|
|
|
// {/* ------------------ CONTATO ------------------ */}
|
|
// <h5>Contato</h5>
|
|
// <div className="row">
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>E-mail: *</label>
|
|
// <input type="email" className="form-control" name="email" value={formData.email} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>Telefone: *</label>
|
|
// <input type="text" className="form-control" name="telefone1" value={formData.telefone1} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>Telefone 2:</label>
|
|
// <input type="text" className="form-control" name="telefone2" value={formData.telefone2} onChange={handleChange} />
|
|
// </div>
|
|
// <div className="col-md-6 mb-3">
|
|
// <label>Telefone 3:</label>
|
|
// <input type="text" className="form-control" name="telefone3" value={formData.telefone3} onChange={handleChange} />
|
|
// </div>
|
|
// </div>
|
|
|
|
// {/* ------------------ INFORMAÇÕES ADICIONAIS ------------------ */}
|
|
// <h5>Informações Adicionais</h5>
|
|
// <div className="mb-3">
|
|
// <label>Observações:</label>
|
|
// <textarea className="form-control" name="observacoes" value={formData.observacoes} onChange={handleChange}></textarea>
|
|
// </div>
|
|
|
|
// {/* Botões */}
|
|
// <div className="mt-3">
|
|
// <button className="btn btn-success me-2" onClick={handleSubmit}>
|
|
// Salvar Paciente
|
|
// </button>
|
|
// <button className="btn btn-light" onClick={onCancel}>
|
|
// Cancelar
|
|
// </button>
|
|
// </div>
|
|
// </div>
|
|
);
|
|
}
|
|
|
|
|
|
export default DoctorForm;
|