forked from RiseUP/riseup-squad23
Adicionado o modal no codigo
This commit is contained in:
parent
bd20c2d811
commit
ae5988997e
@ -124,6 +124,9 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
};
|
||||
|
||||
// Função para buscar endereço pelo CEP
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [modalMsg, setModalMsg] = useState('');
|
||||
|
||||
const handleCepBlur = async () => {
|
||||
const cep = formData.cep.replace(/\D/g, '');
|
||||
if (cep.length === 8) {
|
||||
@ -139,17 +142,20 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
estado: data.uf || ''
|
||||
}));
|
||||
} else {
|
||||
alert('CEP não encontrado!');
|
||||
setModalMsg('CEP não encontrado!');
|
||||
setShowModal(true);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Erro ao buscar o CEP.');
|
||||
setModalMsg('Erro ao buscar o CEP.');
|
||||
setShowModal(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
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.');
|
||||
if (!formData.nome || !formData.cpf || !formData.genero || !formData.dataNascimento ) {
|
||||
setModalMsg('Por favor, preencha: Nome, CPF, Gênero, Data de Nascimento.');
|
||||
setShowModal(true);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -180,9 +186,31 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
}
|
||||
}
|
||||
);
|
||||
setModalMsg('Médico salvo com sucesso!');
|
||||
setShowModal(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Modal de feedback */}
|
||||
{showModal && (
|
||||
<div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Atenção</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p style={{ color: '#23336f', fontSize: '1.3rem', fontWeight: 500 }}>{modalMsg}</p>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
@ -247,7 +275,7 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
</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' }} />
|
||||
<input type="date" className="form-control" name="dataNascimento" value={formData.dataNascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} min="1900-01-01" max="2025-09-24" />
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
|
||||
@ -406,11 +434,11 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
<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>
|
||||
<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">
|
||||
@ -434,137 +462,10 @@ function DoctorForm({ onSave, onCancel, PatientDict }) {
|
||||
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;
|
||||
|
||||
@ -2,6 +2,10 @@ import React, { useState, useEffect } from 'react';
|
||||
|
||||
|
||||
function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
// Estado para controlar modal de feedback
|
||||
const [showMessage, setShowMessage] = useState(false);
|
||||
const [message, setMessage] = useState('');
|
||||
const [messageType, setMessageType] = useState('success'); // 'success' ou 'danger'
|
||||
|
||||
const FormatTelefones = (valor) => {
|
||||
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
||||
@ -169,18 +173,20 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formData.nome || !formData.cpf || !formData.sexo || !formData.data_nascimento){
|
||||
alert('Por favor, preencha Nome ,CPF, Gênero e data de nascimento.');
|
||||
setMessage('Por favor, preencha: Nome, CPF, Gênero, Data de Nascimento .');
|
||||
setMessageType('danger');
|
||||
setShowMessage(true);
|
||||
return;
|
||||
}
|
||||
|
||||
const CPFinvalido = await ValidarCPF(formData.cpf)
|
||||
console.log(CPFinvalido)
|
||||
const CPFinvalido = await ValidarCPF(formData.cpf);
|
||||
if(CPFinvalido[0] === true){
|
||||
alert(CPFinvalido[1])
|
||||
return
|
||||
setMessage(CPFinvalido[1]);
|
||||
setMessageType('danger');
|
||||
setShowMessage(true);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
onSave({
|
||||
...formData,
|
||||
endereco: {
|
||||
@ -214,10 +220,39 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
pacienteVip: formData.pacienteVip,
|
||||
},
|
||||
});
|
||||
setMessage('Paciente salvo com sucesso!');
|
||||
setMessageType('success');
|
||||
setShowMessage(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card p-3">
|
||||
<div className="card p-3" style={{ position: 'relative' }}>
|
||||
{/* Modal de feedback */}
|
||||
{showMessage && (
|
||||
<div className="modal-backdrop" style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(0,0,0,0.15)', zIndex: 1050 }}></div>
|
||||
)}
|
||||
{showMessage && (
|
||||
<div className="modal d-block" tabIndex="-1" role="dialog" style={{ zIndex: 1100 }}>
|
||||
<div className="modal-dialog modal-dialog-centered" role="document">
|
||||
<div className="modal-content" style={{ borderRadius: '12px', boxShadow: '0 4px 24px rgba(0,0,0,0.10)' }}>
|
||||
<div className="modal-header" style={{ borderBottom: '2px solid #23336f1a' }}>
|
||||
<h5 className="modal-title" style={{ fontWeight: 700, color: '#23336f' }}>
|
||||
{messageType === 'danger' ? 'Atenção' : 'Sucesso'}
|
||||
</h5>
|
||||
<button type="button" className="btn-close" aria-label="Close" onClick={() => setShowMessage(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ fontSize: '1.3rem', color: '#23336f' }}>
|
||||
{message}
|
||||
</div>
|
||||
<div className="modal-footer" style={{ borderTop: '2px solid #23336f1a', justifyContent: 'flex-end' }}>
|
||||
<button type="button" className="btn btn-primary" style={{ minWidth: 100 }} onClick={() => setShowMessage(false)}>
|
||||
Fechar
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
{/* DADOS PESSOAIS */}
|
||||
@ -281,7 +316,7 @@ function PatientForm({ onSave, onCancel,formData, setFormData }) {
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Data de nascimento: *</label>
|
||||
<input type="date" className="form-control" name="data_nascimento" value={formData.data_nascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} />
|
||||
<input type="date" className="form-control" name="data_nascimento" value={formData.data_nascimento} onChange={handleChange} style={{ fontSize: '1.1rem' }} min="1900-01-01" max="2025-09-24"s/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: '1.1rem' }}>Gênero: *</label>
|
||||
|
||||
@ -12,6 +12,10 @@ function DoctorCadastroManager( ) {
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
|
||||
// Estado do modal de sucesso
|
||||
const [showModal, setShowModal] = useState(false);
|
||||
const [modalMsg, setModalMsg] = useState('');
|
||||
|
||||
// Função que será chamada para "salvar" o paciente
|
||||
const handleSavePatient = (patientData) => {
|
||||
console.log('Salvando médico:', patientData);
|
||||
@ -23,32 +27,45 @@ function DoctorCadastroManager( ) {
|
||||
header: myHeaders,
|
||||
body:raw,
|
||||
redirect:'follow'
|
||||
|
||||
}
|
||||
|
||||
|
||||
fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes", requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
|
||||
alert(`Médico "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
|
||||
// Após salvar, voltamos para a tela de lista
|
||||
setModalMsg(`Médico "${patientData.nome}" salvo com sucesso!`);
|
||||
setShowModal(true);
|
||||
setView('list');
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Modal de feedback */}
|
||||
{showModal && (
|
||||
<div className="modal fade show" style={{ display: 'block' }} tabIndex="-1">
|
||||
<div className="modal-dialog modal-dialog-centered">
|
||||
<div className="modal-content">
|
||||
<div className="modal-header">
|
||||
<h5 className="modal-title">Sucesso</h5>
|
||||
<button type="button" className="btn-close" onClick={() => setShowModal(false)}></button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<p>{modalMsg}</p>
|
||||
</div>
|
||||
<div className="modal-footer">
|
||||
<button type="button" className="btn btn-primary" onClick={() => setShowModal(false)}>Fechar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="page-heading">
|
||||
<h3>Cadastro de Médicos</h3>
|
||||
</div>
|
||||
<div className="page-content">
|
||||
<section className="row">
|
||||
<div className="col-12">
|
||||
{/* Aqui está a lógica principal: */}
|
||||
{/* Se a view for 'list', mostramos a lista com o botão. */}
|
||||
{/* Se for 'form', mostramos o formulário de cadastro. */}
|
||||
|
||||
{view === 'list' ? (
|
||||
<DoctorList onAddPatient={() => setView('form')} />
|
||||
) : (
|
||||
@ -56,7 +73,6 @@ function DoctorCadastroManager( ) {
|
||||
onSave={handleSavePatient}
|
||||
onCancel={() => setView('list')}
|
||||
PatientDict={{}}
|
||||
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -30,8 +30,7 @@ function PatientCadastroManager( {setCurrentPage} ) {
|
||||
.then(response => response.text())
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
|
||||
alert(`Paciente "${patientData.nome}" salvo com sucesso!`); //altere isso para integração com backend
|
||||
; //altere isso para integração com backend
|
||||
// Após salvar, voltamos para a tela de lista
|
||||
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user