Ajustes
This commit is contained in:
Eduarda-SS
parent
903882d6ff
commit
5f2e58c1c4
@ -5,11 +5,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const Voltar = () => {
|
||||
const prefixo = location.pathname.split("/")[1];
|
||||
navigate(`/${prefixo}/medicos`);
|
||||
}
|
||||
|
||||
// Funções para formatar telefone e CPF
|
||||
const FormatTelefones = (valor) => {
|
||||
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
||||
@ -28,10 +23,8 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
|
||||
};
|
||||
|
||||
// Estado para armazenar a URL da foto do avatar
|
||||
const [avatarUrl, setAvatarUrl] = useState(null);
|
||||
|
||||
// Estado para controlar seções abertas/fechadas
|
||||
const [collapsedSections, setCollapsedSections] = useState({
|
||||
dadosPessoais: true,
|
||||
infoMedicas: false,
|
||||
@ -40,6 +33,10 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
contato: false,
|
||||
});
|
||||
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [showSuccessModal, setShowSuccessModal] = useState(false);
|
||||
const [errorModalMsg, setErrorModalMsg] = useState('');
|
||||
|
||||
const handleToggleCollapse = (section) => {
|
||||
setCollapsedSections(prevState => ({
|
||||
...prevState,
|
||||
@ -51,9 +48,9 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
const { name, value, type, checked, files } = e.target;
|
||||
|
||||
if (type === 'checkbox') {
|
||||
setFormData({ ...formData, [name]: checked });
|
||||
setFormData(prev => ({ ...prev, [name]: checked }));
|
||||
} else if (type === 'file') {
|
||||
setFormData({ ...formData, [name]: files[0] });
|
||||
setFormData(prev => ({ ...prev, [name]: files[0] }));
|
||||
|
||||
if (name === 'foto' && files[0]) {
|
||||
const reader = new FileReader();
|
||||
@ -68,22 +65,17 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
} else if (name.includes('cpf')) {
|
||||
let cpfFormatado = FormatCPF(value);
|
||||
setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
|
||||
} else if (name.includes('telefone')) {
|
||||
} else if (name.includes('phone')) {
|
||||
let telefoneFormatado = FormatTelefones(value);
|
||||
setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
|
||||
} else {
|
||||
setFormData({ ...formData, [name]: value });
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
}
|
||||
};
|
||||
|
||||
// Modal
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [modalMsg, setModalMsg] = useState('');
|
||||
|
||||
// Buscar endereço via CEP
|
||||
const handleCepBlur = async () => {
|
||||
const cep = formData.cep.replace(/\D/g, '');
|
||||
if (cep.length === 8) {
|
||||
const cep = formData.cep?.replace(/\D/g, '');
|
||||
if (cep && cep.length === 8) {
|
||||
try {
|
||||
const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
|
||||
const data = await response.json();
|
||||
@ -96,114 +88,121 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
state: data.uf || ''
|
||||
}));
|
||||
} else {
|
||||
setModalMsg('CEP não encontrado!');
|
||||
setErrorModalMsg('CEP não encontrado!');
|
||||
setShowModal(true);
|
||||
}
|
||||
} catch (error) {
|
||||
setModalMsg('Erro ao buscar o CEP.');
|
||||
setErrorModalMsg('Erro ao buscar o CEP.');
|
||||
setShowModal(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Salvar médico
|
||||
const handleSubmit = () => {
|
||||
if (!formData.full_name || !formData.cpf || !formData.birth_date) {
|
||||
setModalMsg("Por favor, preencha:\n- Nome\n- CPF\n- Data de Nascimento");
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.full_name || !formData.cpf || !formData.email || !formData.phone_mobile || !formData.crm_uf || !formData.crm) {
|
||||
setErrorModalMsg('Por favor, preencha todos os campos obrigatórios.');
|
||||
setShowModal(true);
|
||||
return; // impede que continue
|
||||
return;
|
||||
}
|
||||
|
||||
onSave({ ...formData });
|
||||
|
||||
setModalMsg("Médico salvo com sucesso!");
|
||||
const cpfLimpo = formData.cpf.replace(/\D/g, '');
|
||||
if (cpfLimpo.length !== 11) {
|
||||
setErrorModalMsg('CPF inválido. Por favor, verifique o número digitado.');
|
||||
setShowModal(true);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await onSave({ ...formData });
|
||||
setShowSuccessModal(true);
|
||||
} catch (error) {
|
||||
setErrorModalMsg('médico salvo com sucesso');
|
||||
setShowModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseSuccessModal = () => {
|
||||
setShowSuccessModal(false);
|
||||
const prefixo = location.pathname.split("/")[1];
|
||||
navigate(`/${prefixo}/medicos`);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Modal */}
|
||||
{showModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
zIndex: 9999
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background: "#fff",
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 6px 20px rgba(0,0,0,0.2)",
|
||||
overflow: "hidden"
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
background: "#1e3a8a",
|
||||
padding: "12px 16px",
|
||||
borderBottom: "1px solid #dee2e6",
|
||||
backgroundColor: "#1e3a8a",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<h5 style={{ margin: 0, fontSize: "1.2rem", fontWeight: 600, color: "#ffffffff" }}>Atenção</h5>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
style={{
|
||||
background: "transparent",
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "1.2rem",
|
||||
cursor: "pointer"
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div style={{ padding: "16px", color: "#000" }}>
|
||||
<p
|
||||
style={{
|
||||
fontSize: "1.1rem",
|
||||
fontWeight: 500,
|
||||
whiteSpace: "pre-line" // <-- garante quebra de linha no texto
|
||||
}}
|
||||
>
|
||||
{modalMsg}
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
|
||||
{errorModalMsg}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div
|
||||
style={{
|
||||
padding: "12px 16px",
|
||||
borderTop: "1px solid #dee2e6",
|
||||
display: "flex",
|
||||
justifyContent: "flex-end"
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
style={{
|
||||
background: "#0d6efd",
|
||||
border: "none",
|
||||
padding: "8px 16px",
|
||||
borderRadius: "6px",
|
||||
backgroundColor: "#1e3a8a",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
cursor: "pointer"
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Fechar
|
||||
@ -211,14 +210,95 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{showSuccessModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Sucesso</h5>
|
||||
<button
|
||||
onClick={handleCloseSuccessModal}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
|
||||
Médico salvo com sucesso!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={handleCloseSuccessModal}
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<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')}
|
||||
@ -230,7 +310,6 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
{/* Avatar */}
|
||||
<div className="col-md-6 mb-3 d-flex align-items-center">
|
||||
<div className="me-3">
|
||||
{avatarUrl ? (
|
||||
@ -271,23 +350,22 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Inputs */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome: *</label>
|
||||
<input type="text" className="form-control" name="full_name" value={formData.full_name} onChange={handleChange} />
|
||||
<input type="text" className="form-control" name="full_name" value={formData.full_name || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
|
||||
<input type="date" className="form-control" name="birth_date" value={formData.birth_date} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
|
||||
<input type="date" className="form-control" name="birth_date" value={formData.birth_date || ''} onChange={handleChange} min="1900-01-01" max="2025-09-24" />
|
||||
</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} />
|
||||
<input type="text" className="form-control" name="cpf" value={formData.cpf || ''} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado do CRM:</label>
|
||||
<select className="form-control" name="crm_uf" value={formData.crm_uf} onChange={handleChange}>
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado do CRM: *</label>
|
||||
<select className="form-control" name="crm_uf" value={formData.crm_uf || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="AP">AP</option>
|
||||
<option value="AL">AL</option>
|
||||
@ -319,13 +397,13 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CRM:</label>
|
||||
<input type="text" className="form-control" name="crm" value={formData.crm} onChange={handleChange} />
|
||||
<label style={{ fontSize: '1.1rem' }}>CRM: *</label>
|
||||
<input type="text" className="form-control" name="crm" value={formData.crm || ''} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Especialização:</label>
|
||||
<select className="form-control" name="specialty" value={formData.specialty} onChange={handleChange}>
|
||||
<select className="form-control" name="specialty" value={formData.specialty || ''} onChange={handleChange}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Clínica Geral">Clínica médica (clínico geral)</option>
|
||||
<option value="Pediatria">Pediatria</option>
|
||||
@ -346,7 +424,33 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</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('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} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
|
||||
<input type="text" className="form-control" name="phone_mobile" value={formData.phone_mobile || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone 2:</label>
|
||||
<input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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')}
|
||||
@ -360,65 +464,36 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
<div className="row mt-3">
|
||||
<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} />
|
||||
<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="street" value={formData.street} onChange={handleChange} />
|
||||
<input type="text" className="form-control" name="street" value={formData.street || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Bairro:</label>
|
||||
<input type="text" className="form-control" name="neighborhood" value={formData.neighborhood} onChange={handleChange} />
|
||||
<input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Cidade:</label>
|
||||
<input type="text" className="form-control" name="city" value={formData.city} onChange={handleChange} />
|
||||
<input type="text" className="form-control" name="city" value={formData.city || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label>Estado:</label>
|
||||
<input type="text" className="form-control" name="state" value={formData.state} onChange={handleChange} />
|
||||
<input type="text" className="form-control" name="state" value={formData.state || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label>Número:</label>
|
||||
<input type="text" className="form-control" name="number" value={formData.number} onChange={handleChange} />
|
||||
<input type="text" className="form-control" name="number" value={formData.number || ''} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-8 mb-3">
|
||||
<label>Complemento:</label>
|
||||
<input type="text" className="form-control" name="complement" value={formData.complement} onChange={handleChange} />
|
||||
<input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} />
|
||||
</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>Email:</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="phone_mobile" value={formData.phone_mobile} onChange={handleChange} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label>Telefone 2:</label>
|
||||
<input type="text" className="form-control" name="phone2" value={formData.phone2} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BOTÕES */}
|
||||
<div className="mt-3 text-center">
|
||||
<button
|
||||
className="btn btn-success me-3"
|
||||
@ -427,11 +502,11 @@ function DoctorForm({ onSave, onCancel, formData, setFormData }) {
|
||||
>
|
||||
Salvar Médico
|
||||
</button>
|
||||
|
||||
<button className="btn btn-light" onClick={() => Voltar()} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
<Link to={'/medicos'}>
|
||||
<button className="btn btn-light" onClick={onCancel} style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@ -1,50 +1,31 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {Link} from 'react-router-dom'
|
||||
// formatar número
|
||||
// formatar CPF
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import { FormatTelefones,FormatPeso, FormatCPF } from '../utils/Formatar/Format';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { FormatTelefones, FormatPeso, FormatCPF } from '../utils/Formatar/Format';
|
||||
|
||||
function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [errorModalMsg, setErrorModalMsg] = useState("");
|
||||
// Estado para controlar a exibição do modal e os dados do paciente existente
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [showModal404, setShowModal404] = useState(false);
|
||||
const [pacienteExistente, setPacienteExistente] = useState(null);
|
||||
const [showSuccessModal, setShowSuccessModal] = useState(false);
|
||||
|
||||
|
||||
|
||||
|
||||
const Voltar = () => {
|
||||
const prefixo = location.pathname.split("/")[1];
|
||||
navigate(`/${prefixo}/pacientes`);
|
||||
}
|
||||
// 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
|
||||
dadosPessoais: true,
|
||||
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]
|
||||
setCollapsedSections(prev => ({
|
||||
...prev,
|
||||
[section]: !prev[section],
|
||||
}));
|
||||
};
|
||||
|
||||
// Lógica para calcular o IMC
|
||||
useEffect(() => {
|
||||
const peso = parseFloat(formData.peso);
|
||||
const peso = parseFloat(formData.weight_kg);
|
||||
const altura = parseFloat(formData.height_m);
|
||||
if (peso > 0 && altura > 0) {
|
||||
const imcCalculado = peso / (altura * altura);
|
||||
@ -52,82 +33,63 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
} else {
|
||||
setFormData(prev => ({ ...prev, bmi: '' }));
|
||||
}
|
||||
}, [formData.peso, formData.altura]);
|
||||
}, [formData.weight_kg, formData.height_m, setFormData]);
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked, files } = e.target;
|
||||
|
||||
console.log(formData, name, checked)
|
||||
|
||||
if (type === 'file') {
|
||||
setFormData({ ...formData, [name]: files[0] });
|
||||
setFormData(prev => ({ ...prev, [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.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 if (name.includes('cpf')) {
|
||||
setFormData({...formData, cpf:FormatCPF(value) });
|
||||
setAvatarUrl(null);
|
||||
}
|
||||
} else if (name === 'cpf') {
|
||||
setFormData(prev => ({ ...prev, cpf: FormatCPF(value) }));
|
||||
} else if (name.includes('phone')) {
|
||||
setFormData({ ...formData, [name]: FormatTelefones(value) });
|
||||
}else if(name.includes('weight') || name.includes('bmi') || name.includes('height')){
|
||||
setFormData({...formData,[name]: FormatPeso(value) })
|
||||
}else if(name.includes('rn') || name.includes('vip')){
|
||||
setFormData({ ...formData, [name]: checked });
|
||||
}
|
||||
else{
|
||||
setFormData({ ...formData, [name]: value });
|
||||
}
|
||||
};
|
||||
|
||||
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,
|
||||
street: data.logradouro || '',
|
||||
neighborhood: data.bairro || '',
|
||||
city: data.localidade || '',
|
||||
state: data.uf || ''
|
||||
}));
|
||||
setFormData(prev => ({ ...prev, [name]: FormatTelefones(value) }));
|
||||
} else if (name.includes('weight_kg') || name.includes('height_m')) {
|
||||
setFormData(prev => ({ ...prev, [name]: FormatPeso(value) }));
|
||||
} else if (name === 'rn_in_insurance' || name === 'vip' || name === 'validadeIndeterminada') {
|
||||
setFormData(prev => ({ ...prev, [name]: checked }));
|
||||
} else {
|
||||
alert('CEP não encontrado!');
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Erro ao buscar o CEP.');
|
||||
}
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.full_name || !formData.cpf || !formData.sex || !formData.birth_date){
|
||||
setErrorModalMsg('Por favor, preencha Nome, CPF, Gênero e data de nascimento.');
|
||||
setShowModal404(true);
|
||||
return
|
||||
// ALTERADO: Nome, CPF, Email e Telefone
|
||||
if (!formData.full_name || !formData.cpf || !formData.email || !formData.phone_mobile) {
|
||||
setErrorModalMsg('Por favor, preencha Nome, CPF, Email e Telefone.');
|
||||
setShowModal(true);
|
||||
return;
|
||||
}
|
||||
|
||||
onSave({
|
||||
...formData,bmi:12.0
|
||||
});
|
||||
const cpfLimpo = formData.cpf.replace(/\D/g, '');
|
||||
if (cpfLimpo.length !== 11) {
|
||||
setErrorModalMsg('CPF inválido. Por favor, verifique o número digitado.');
|
||||
setShowModal(true);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await onSave({ ...formData, bmi: parseFloat(formData.bmi) || 0 });
|
||||
setShowSuccessModal(true);
|
||||
} catch (error) {
|
||||
setErrorModalMsg('Erro ao salvar paciente. Tente novamente.');
|
||||
setShowModal(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-3">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
{/* DADOS PESSOAIS */}
|
||||
{/* DADOS PESSOAIS - MANTIDO O LAYOUT ORIGINAL */}
|
||||
<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
|
||||
@ -177,22 +139,22 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
{/* CADASTRO */}
|
||||
{/* CADASTRO - MANTIDO O LAYOUT ORIGINAL COM COLUNAS */}
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome: *</label>
|
||||
<input type="text" className="form-control" name="full_name" value={formData.full_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="full_name" value={formData.full_name || ''} 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="social_name" value={formData.social_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="social_name" value={formData.social_name || ''} 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="birth_date" value={formData.birth_date} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento:</label>
|
||||
<input type="date" className="form-control" name="birth_date" value={formData.birth_date || ''} 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="sex" value={formData.sex} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<label style={{ fontSize: '1.1rem' }}>Gênero:</label>
|
||||
<select className="form-control" name="sex" value={formData.sex || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Masculino">Masculino</option>
|
||||
<option value="Feminino">Feminino</option>
|
||||
@ -201,15 +163,15 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</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' }} />
|
||||
<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' }} />
|
||||
<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="document_type" value={formData.document_type} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<select className="form-control" name="document_type" value={formData.document_type || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="CNH">CNH</option>
|
||||
<option value="Passaporte">Passaporte</option>
|
||||
@ -218,11 +180,11 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</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="document_number" value={formData.document_number} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="document_number" value={formData.document_number || ''} 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="race" value={formData.race} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<select className="form-control" name="race" value={formData.race || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Branca">Branca</option>
|
||||
<option value="Preta">Preta</option>
|
||||
@ -233,20 +195,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Naturalidade:</label>
|
||||
<input type="text" className="form-control" name="naturality" value={formData.naturalidade} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="naturality" 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="nationality" value={formData.nationality} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="nationality" value={formData.nationality || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Profissão:</label>
|
||||
<input type="text" className="form-control" name="profession" value={formData.profession} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="profession" value={formData.profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado civil:</label>
|
||||
<select className="form-control" name="marital_status" value={formData.marital_status} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="" selected disabled invisible>Selecione</option>
|
||||
<select className="form-control" name="marital_status" value={formData.marital_status || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="" disabled>Selecione</option>
|
||||
<option value="Solteiro">Solteiro(a)</option>
|
||||
<option value="Casado">Casado(a)</option>
|
||||
<option value="Divorciado">Divorciado(a)</option>
|
||||
@ -255,59 +217,60 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome da Mãe:</label>
|
||||
<input type="text" className="form-control" name="mother_name" value={formData.mother_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="mother_name" value={formData.mother_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Profissão da mãe:</label>
|
||||
<input type="text" className="form-control" name="mother_profession" value={formData.mother_profession} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="mother_profession" value={formData.mother_profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome do Pai:</label>
|
||||
<input type="text" className="form-control" name="father_name" value={formData.father_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="father_name" value={formData.father_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Profissão do pai:</label>
|
||||
<input type="text" className="form-control" name="father_profession" value={formData.father_profession} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="father_profession" value={formData.father_profession || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome do responsável:</label>
|
||||
<input type="text" className="form-control" name="guardian_name" value={formData.guardian_name} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="guardian_name" value={formData.guardian_name || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>CPF do responsável:</label>
|
||||
<input type="text" className="form-control" name="guardian_cpf" value={formData.guardian_cpf} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="guardian_cpf" value={formData.guardian_cpf || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</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="legacy_code" value={formData.legacy_code} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="legacy_code" value={formData.legacy_code || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance} onChange={handleChange} id="rn_in_insurance" style={{ transform: 'scale(1.2)' }} />
|
||||
<input className="form-check-input" type="checkbox" name="rn_in_insurance" checked={formData.rn_in_insurance || false} onChange={handleChange} id="rn_in_insurance" style={{ transform: 'scale(1.2)' }} />
|
||||
<label className="form-check-label ms-2" htmlFor="rn_in_insurance" style={{ fontSize: '1.1rem' }}>
|
||||
RN na Guia do convênio
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-md-12 mb-3 mt-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" name="vip" checked={formData.vip} onChange={handleChange} id="vip" style={{ transform: 'scale(1.2)' }} />
|
||||
<label className="form-check-label ms-2" htmlFor="vip" style={{ fontSize: '1.1rem' }}>
|
||||
Paciente VIP
|
||||
</label>
|
||||
</div>
|
||||
</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="notes" value={formData.notes} onChange={handleChange} style={{ fontSize: '1.1rem' }} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
|
||||
<textarea className="form-control" name="notes" value={formData.notes || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} placeholder='alergias, doenças crônicas, informações sobre porteses ou marca-passo, etc'></textarea>
|
||||
</div>
|
||||
<div className="col-md-12 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Anexos do Paciente:</label>
|
||||
<div>
|
||||
<label htmlFor="anexos-input" className="btn btn-secondary" style={{ fontSize: '1.1rem' }}>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>
|
||||
|
||||
{/* INFORMAÇÕES MÉDICAS */}
|
||||
{/* INFORMAÇÕES MÉDICAS - MANTIDO O LAYOUT ORIGINAL */}
|
||||
<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('infoMedicas')} style={{ fontSize: '1.8rem' }}>
|
||||
Informações Médicas
|
||||
@ -319,7 +282,7 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Tipo Sanguíneo:</label>
|
||||
<select className="form-control" name="blood_type" value={formData.blood_type} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<select className="form-control" name="blood_type" value={formData.blood_type || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="A+">A+</option>
|
||||
<option value="A-">A-</option>
|
||||
@ -333,19 +296,75 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Peso (kg):</label>
|
||||
<input type="text" step="0.1" className="form-control" name="weight_kg" value={formData.weight_kg} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" step="0.1" className="form-control" name="weight_kg" value={formData.weight_kg || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Altura (m):</label>
|
||||
<input type="text" step="0.01" className="form-control" name="height_m" value={formData.height_m} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" step="0.01" className="form-control" name="height_m" value={formData.height_m || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-2 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>IMC (kg/m²):</label>
|
||||
<input type="text" className="form-control" name="bmi" value={formData.bmi || ''} readOnly disabled style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ENDEREÇO */}
|
||||
{/* INFORMAÇÕES DE CONVÊNIO - MANTIDO O LAYOUT ORIGINAL */}
|
||||
<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('infoConvenio')} style={{ fontSize: '1.8rem' }}>
|
||||
Informações de convênio
|
||||
<span className="fs-5">
|
||||
{collapsedSections.infoConvenio ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div className={`collapse${collapsedSections.infoConvenio ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Convênio:</label>
|
||||
<select className="form-control" name="convenio" value={formData.convenio || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }}>
|
||||
<option value="">Selecione</option>
|
||||
<option value="Amil">Amil</option>
|
||||
<option value="Bradesco Saúde">Bradesco Saúde</option>
|
||||
<option value="SulAmérica">SulAmérica</option>
|
||||
<option value="Unimed">Unimed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Plano:</label>
|
||||
<input type="text" className="form-control" name="plano" value={formData.plano || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Nº de matrícula:</label>
|
||||
<input type="text" className="form-control" name="numeroMatricula" value={formData.numeroMatricula || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-4 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Validade da Carteira:</label>
|
||||
<input type="date" className="form-control" name="validadeCarteira" value={formData.validadeCarteira || ''} onChange={handleChange} disabled={formData.validadeIndeterminada} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-2 d-flex align-items-end mb-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" name="validadeIndeterminada" checked={formData.validadeIndeterminada || false} onChange={handleChange} id="validadeIndeterminada" style={{ transform: 'scale(1.2)' }} />
|
||||
<label className="form-check-label ms-2" htmlFor="validadeIndeterminada" style={{ fontSize: '1.1rem' }}>
|
||||
Validade indeterminada
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
{/* PACIENTE VIP */}
|
||||
<div className="col-md-12 mb-3 mt-3">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" name="vip" checked={formData.vip || false} onChange={handleChange} id="vip" style={{ transform: 'scale(1.2)' }} />
|
||||
<label className="form-check-label ms-2" htmlFor="vip" style={{ fontSize: '1.1rem' }}>
|
||||
Paciente VIP
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ENDEREÇO - MANTIDO O LAYOUT ORIGINAL */}
|
||||
<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
|
||||
@ -357,37 +376,37 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
<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' }} />
|
||||
<input type="text" className="form-control" name="cep" value={formData.cep || ''} onChange={handleChange} 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="street" value={formData.street} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="street" value={formData.street || ''} 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="neighborhood" value={formData.neighborhood} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="neighborhood" value={formData.neighborhood || ''} 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="city" value={formData.city} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="city" value={formData.city || ''} 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="state" value={formData.state} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="state" value={formData.state || ''} 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="number" value={formData.number} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="number" value={formData.number || ''} 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="complement" value={formData.complement} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="complement" value={formData.complement || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CONTATO */}
|
||||
{/* CONTATO - MANTIDO O LAYOUT ORIGINAL */}
|
||||
<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
|
||||
@ -398,20 +417,20 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
<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>
|
||||
<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="phone_mobile" value={formData.phone_mobile} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
|
||||
<input type="text" className="form-control" name="phone_mobile" value={formData.phone_mobile || ''} 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="phone1" value={formData.phone1} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="phone1" value={formData.phone1 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone 3:</label>
|
||||
<input type="text" className="form-control" name="phone2" value={formData.phone2} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="text" className="form-control" name="phone2" value={formData.phone2 || ''} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -422,43 +441,193 @@ function PatientForm({ onSave, onCancel, formData, setFormData }) {
|
||||
<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" style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }} onClick={() => Voltar()}>
|
||||
<Link to='/pacientes'>
|
||||
<button className="btn btn-light" style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}>
|
||||
Cancelar
|
||||
</button>
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Modal para paciente existente */}
|
||||
{showModal && pacienteExistente && (
|
||||
<div></div>
|
||||
)}
|
||||
|
||||
{/* Modal de sucesso ao salvar paciente */}
|
||||
{showSuccessModal && (
|
||||
<div className="modal" style={{ display: 'block', backgroundColor: 'rgba(0,0,0,0.5)' }}>
|
||||
<div className="modal-dialog">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header" style={{ backgroundColor: '#f2fa0dff' }}>
|
||||
<h5 className="modal-title">Paciente salvo com sucesso!</h5>
|
||||
<button type="button" className="btn-close btn-close-white" onClick={() => setShowSuccessModal(false)}></button>
|
||||
{/* Modal de erro - EXATAMENTE COMO NA IMAGEM */}
|
||||
{showModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p style={{ color: '#111', fontSize: '1.4rem' }}>O cadastro do paciente foi realizado com sucesso.</p>
|
||||
|
||||
{/* Body */}
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
|
||||
Por favor, preencha:
|
||||
</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
|
||||
{!formData.full_name && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Nome</p>}
|
||||
{!formData.cpf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CPF</p>}
|
||||
{!formData.email && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Email</p>}
|
||||
{!formData.phone_mobile && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Telefone</p>}
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn" style={{ backgroundColor: '#1e3a8a', color: '#fff' }} onClick={() => setShowSuccessModal(false)}>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => setShowModal(false)}
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Modal de sucesso */}
|
||||
{showSuccessModal && (
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
backgroundColor: "rgba(0,0,0,0.5)",
|
||||
zIndex: 9999,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#fff",
|
||||
borderRadius: "10px",
|
||||
width: "400px",
|
||||
maxWidth: "90%",
|
||||
boxShadow: "0 5px 15px rgba(0,0,0,0.3)",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
padding: "15px 20px",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Sucesso</h5>
|
||||
<button
|
||||
onClick={() => setShowSuccessModal(false)}
|
||||
style={{
|
||||
background: "none",
|
||||
border: "none",
|
||||
fontSize: "20px",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>
|
||||
O cadastro do paciente foi realizado com sucesso.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "flex-end",
|
||||
padding: "15px 20px",
|
||||
borderTop: "1px solid #ddd",
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={() => setShowSuccessModal(false)}
|
||||
style={{
|
||||
backgroundColor: "#1e3a8a",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
padding: "8px 20px",
|
||||
borderRadius: "6px",
|
||||
cursor: "pointer",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
|
||||
{
|
||||
"name":"Início",
|
||||
"url": "/secretaria/inicio",
|
||||
"url": "/secretaria/",
|
||||
"icon": "house"
|
||||
},
|
||||
|
||||
|
||||
@ -1,37 +1,47 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
// Importamos os dois novos componentes que criamos
|
||||
import { useAuth } from '../components/utils/AuthProvider';
|
||||
import DoctorForm from '../components/doctors/DoctorForm';
|
||||
import API_KEY from '../components/utils/apiKeys';
|
||||
import { Navigate, useNavigate } from 'react-router-dom';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
|
||||
|
||||
function DoctorCadastroManager( ) {
|
||||
function DoctorCadastroManager() {
|
||||
const [DoctorDict, setDoctorDict] = useState({})
|
||||
const navigate = useNavigate();
|
||||
|
||||
const location = useLocation();
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
|
||||
// Estado do modal de sucesso
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [modalMsg, setModalMsg] = useState('');
|
||||
|
||||
// Função que será chamada para salvar o médico no banco de dados
|
||||
const handleSaveDoctor = async (doctorData) => {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append("apikey", API_KEY)
|
||||
myHeaders.append("Authorization", authHeader)
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
|
||||
console.log(' Dados recebidos do Form:', doctorData);
|
||||
|
||||
console.log('Salvando paciente:', doctorData);
|
||||
const cleanedData = {
|
||||
full_name: doctorData.full_name,
|
||||
cpf: doctorData.cpf ? doctorData.cpf.replace(/\D/g, '') : null,
|
||||
birth_date: doctorData.birth_date || null,
|
||||
email: doctorData.email,
|
||||
phone_mobile: doctorData.phone_mobile ? doctorData.phone_mobile.replace(/\D/g, '') : null,
|
||||
crm_uf: doctorData.crm_uf,
|
||||
crm: doctorData.crm,
|
||||
specialty: doctorData.specialty || null,
|
||||
cep: doctorData.cep ? doctorData.cep.replace(/\D/g, '') : null,
|
||||
street: doctorData.street || null,
|
||||
neighborhood: doctorData.neighborhood || null,
|
||||
city: doctorData.city || null,
|
||||
state: doctorData.state || null,
|
||||
number: doctorData.number || null,
|
||||
complement: doctorData.complement || null,
|
||||
phone2: doctorData.phone2 ? doctorData.phone2.replace(/\D/g, '') : null,
|
||||
};
|
||||
|
||||
var raw = JSON.stringify(doctorData);
|
||||
console.log(doctorData, 'aqui')
|
||||
console.log(' Dados limpos para envio:', cleanedData);
|
||||
|
||||
var raw = JSON.stringify(cleanedData);
|
||||
|
||||
var requestOptions = {
|
||||
method: 'POST',
|
||||
@ -41,35 +51,57 @@ function DoctorCadastroManager( ) {
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1//doctors", requestOptions);
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions);
|
||||
|
||||
console.log("Médico salvo no backend:", response);
|
||||
console.log(" Status da resposta:", response.status);
|
||||
console.log(" Response ok:", response.ok);
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `Erro HTTP: ${response.status}`;
|
||||
try {
|
||||
const errorData = await response.json();
|
||||
console.error(" Erro detalhado:", errorData);
|
||||
errorMessage = errorData.message || errorData.details || errorMessage;
|
||||
} catch (e) {
|
||||
const errorText = await response.text();
|
||||
console.error(" Erro texto:", errorText);
|
||||
errorMessage = errorText || errorMessage;
|
||||
}
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log("Médico salvo no backend:", result);
|
||||
|
||||
// Redireciona para a lista de médicos do perfil atual
|
||||
const prefixo = location.pathname.split("/")[1];
|
||||
navigate(`/${prefixo}/medicos`);
|
||||
|
||||
return result;
|
||||
|
||||
return response;
|
||||
} catch (error) {
|
||||
console.error("Erro ao salvar Médico:", error);
|
||||
console.error(" Erro ao salvar Médico:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Modal de feedback */}
|
||||
|
||||
<div className="page-heading">
|
||||
<h3>Cadastro de Médicos</h3>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
|
||||
<DoctorForm
|
||||
onSave={handleSaveDoctor}
|
||||
onCancel={() => {navigate('/medicos')}}
|
||||
onCancel={() => {
|
||||
const prefixo = location.pathname.split("/")[1];
|
||||
navigate(`/${prefixo}/medicos`);
|
||||
}}
|
||||
formData={DoctorDict}
|
||||
setFormData={setDoctorDict}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -3,8 +3,8 @@ import API_KEY from "../components/utils/apiKeys";
|
||||
import { useAuth } from "../components/utils/AuthProvider";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
const {getAuthorizationHeader, isAuthenticated} = useAuth();
|
||||
function TableDoctor({ setPatientID }) {
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
|
||||
const [medicos, setMedicos] = useState([]);
|
||||
const [search, setSearch] = useState("");
|
||||
@ -75,8 +75,6 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
.catch(error => console.log('error', error));
|
||||
}, []);
|
||||
|
||||
|
||||
|
||||
// Filtrar médicos pelo campo de pesquisa e aniversariantes
|
||||
const medicosFiltrados = medicos.filter(
|
||||
(medico) =>
|
||||
@ -165,7 +163,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
<td>
|
||||
<div className="d-flex gap-2">
|
||||
{/* Ver Detalhes */}
|
||||
<Link to={`${medico.id}`}>
|
||||
<Link to={`/medicos/${medico.id}`}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
@ -183,7 +181,7 @@ function TableDoctor({ setCurrentPage, setPatientID }) {
|
||||
</Link>
|
||||
|
||||
{/* Editar */}
|
||||
<Link to={`${medico.id}/edit`}>
|
||||
<Link to={`/medicos/${medico.id}/edit`}>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
style={{
|
||||
|
||||
@ -1,33 +1,49 @@
|
||||
import {useState} from 'react';
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import PatientForm from '../components/patients/PatientForm';
|
||||
import API_KEY from '../components/utils/apiKeys';
|
||||
import { useAuth } from '../components/utils/AuthProvider';
|
||||
|
||||
|
||||
function PatientCadastroManager( {} ) {
|
||||
const navigate = useNavigate()
|
||||
function PatientCadastroManager( {setCurrentPage} ) {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [infosModal, setInfosModal] = useState({title:'', message:''});
|
||||
|
||||
const { getAuthorizationHeader, isAuthenticated } = useAuth();
|
||||
const [formData, setFormData] = useState({})
|
||||
|
||||
// Função que será chamada para "salvar" o paciente
|
||||
const handleSavePatient = async (patientData) => {
|
||||
console.log('🔄 Iniciando salvamento do paciente:', patientData);
|
||||
|
||||
try {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
myHeaders.append("apikey", API_KEY)
|
||||
myHeaders.append("Authorization", authHeader)
|
||||
myHeaders.append("apikey", API_KEY);
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
|
||||
const cleanedData = {
|
||||
full_name: patientData.full_name,
|
||||
cpf: patientData.cpf.replace(/\D/g, ''),
|
||||
birth_date: patientData.birth_date,
|
||||
sex: patientData.sex,
|
||||
email: patientData.email,
|
||||
phone_mobile: patientData.phone_mobile,
|
||||
social_name: patientData.social_name || null,
|
||||
rg: patientData.rg || null,
|
||||
blood_type: patientData.blood_type || null,
|
||||
weight_kg: patientData.weight_kg ? parseFloat(patientData.weight_kg) : null,
|
||||
height_m: patientData.height_m ? parseFloat(patientData.height_m) : null,
|
||||
bmi: patientData.bmi ? parseFloat(patientData.bmi) : null,
|
||||
notes: patientData.notes || null,
|
||||
};
|
||||
|
||||
console.log('Salvando paciente:', patientData);
|
||||
console.log('📤 Dados limpos para envio:', cleanedData);
|
||||
|
||||
var raw = JSON.stringify(patientData);
|
||||
console.log(patientData, 'aqui')
|
||||
var raw = JSON.stringify(cleanedData);
|
||||
|
||||
var requestOptions = {
|
||||
method: 'POST',
|
||||
@ -36,31 +52,41 @@ function PatientCadastroManager( {} ) {
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
|
||||
try {
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/patients", requestOptions);
|
||||
console.log(response.ok, 'aqui')
|
||||
|
||||
if(response.ok === false){
|
||||
const data = await response.json();
|
||||
console.log("Erro ao salvar paciente:", data);
|
||||
if (data.code === "23505") {
|
||||
setShowModal(true);
|
||||
setInfosModal({
|
||||
title: 'Erro ao salvar paciente',
|
||||
message: 'CPF já cadastrado. Por favor, verifique o CPF informado.'
|
||||
});
|
||||
console.log('📨 Status da resposta:', response.status);
|
||||
console.log(' Response ok:', response.ok);
|
||||
|
||||
if (!response.ok) {
|
||||
let errorMessage = `Erro HTTP: ${response.status}`;
|
||||
try {
|
||||
const errorData = await response.json();
|
||||
errorMessage = errorData.message || errorData.details || errorMessage;
|
||||
} catch (e) {
|
||||
const errorText = await response.text();
|
||||
errorMessage = errorText || errorMessage;
|
||||
}
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
else{
|
||||
console.log("Salvo com sucesso");
|
||||
navigate('/pacientes')
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
console.log("Paciente salvo no backend:", result);
|
||||
|
||||
// Redireciona para a lista de pacientes do perfil atual
|
||||
const prefixo = location.pathname.split("/")[1];
|
||||
navigate(`/${prefixo}/pacientes`);
|
||||
|
||||
return result;
|
||||
|
||||
} catch (error) {
|
||||
console.error("Erro ao salvar paciente:", error);
|
||||
throw error;
|
||||
console.error(error);
|
||||
setInfosModal({
|
||||
title: 'Erro de conexão',
|
||||
message: 'Não foi possível conectar ao servidor. Verifique sua internet e tente novamente.'
|
||||
});
|
||||
setShowModal(true);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -71,7 +97,11 @@ function PatientCadastroManager( {} ) {
|
||||
<div className="modal-content">
|
||||
<div className="modal-header bg-danger text-white">
|
||||
<h5 className="modal-title">{infosModal.title}</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-close"
|
||||
onClick={() => setShowModal(false)}
|
||||
></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>{infosModal.message}</p>
|
||||
@ -82,13 +112,13 @@ function PatientCadastroManager( {} ) {
|
||||
className="btn btn-primary"
|
||||
onClick={() => setShowModal(false)}
|
||||
>
|
||||
Fechar e Continuar no Cadastro
|
||||
Fechar
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h3>Cadastro de Pacientes</h3>
|
||||
</div>
|
||||
@ -97,11 +127,13 @@ function PatientCadastroManager( {} ) {
|
||||
<div className="col-12">
|
||||
<PatientForm
|
||||
onSave={handleSavePatient}
|
||||
onCancel={() => {navigate('/secretaria/pacientes')}}
|
||||
onCancel={() => {
|
||||
const prefixo = location.pathname.split("/")[1];
|
||||
navigate(`/${prefixo}/pacientes`);
|
||||
}}
|
||||
formData={formData}
|
||||
setFormData={setFormData}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -24,7 +24,6 @@ function PerfilSecretaria({ onLogout }) {
|
||||
<div id="main">
|
||||
<Routes>
|
||||
<Route path="/" element={<Inicio/>}/>
|
||||
<Route path="inicio" element={<Inicio />} />
|
||||
<Route path="pacientes/cadastro" element={<PatientCadastroManager />} />
|
||||
<Route path="medicos/cadastro" element={<DoctorCadastroManager />} />
|
||||
<Route path="pacientes" element={<TablePaciente />} />
|
||||
@ -35,7 +34,6 @@ function PerfilSecretaria({ onLogout }) {
|
||||
<Route path="medicos/:id/edit" element={<DoctorEditPage />} />
|
||||
<Route path="agendamento" element={<Agendamento />} />
|
||||
<Route path="laudo" element={<LaudoManager />} />
|
||||
|
||||
<Route path="*" element={<h2>Página não encontrada</h2>} />
|
||||
</Routes>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user