Merge branch 'main' into ExcecoesFinal
This commit is contained in:
commit
d08aec9363
@ -9,7 +9,7 @@ import LandingPage from './pages/LandingPage';
|
||||
import PerfilFinanceiro from "./perfis/perfil_financeiro/PerfilFinanceiro";
|
||||
import Perfiladm from "./perfis/Perfil_adm/Perfiladm";
|
||||
import PerfilMedico from "./perfis/Perfil_medico/PerfilMedico";
|
||||
|
||||
import PerfilPaciente from "./perfis/Perfil_paciente/Perfilpaciente"
|
||||
// Componentes globais de acessibilidade
|
||||
import VlibrasWidget from "./components/VlibrasWidget";
|
||||
|
||||
@ -30,6 +30,7 @@ function App() {
|
||||
<Route path="/financeiro/*" element={<PerfilFinanceiro />} />
|
||||
<Route path="/medico/*" element={<PerfilMedico />} />
|
||||
<Route path="/admin/*" element={<Perfiladm />} />
|
||||
<Route path="/paciente/*" element={<PerfilPaciente />} />
|
||||
<Route path="*" element={<h2>Página não encontrada</h2>} />
|
||||
</Routes>
|
||||
</Router>
|
||||
|
||||
@ -2,83 +2,14 @@ import InputMask from "react-input-mask";
|
||||
import "./style/formagendamentos.css";
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
const [horariosDisponiveis, setHorariosDisponiveis] = useState([]);
|
||||
const [carregandoHorarios, setCarregandoHorarios] = useState(false);
|
||||
|
||||
const [isModoEmergencia, setIsModoEmergencia] = useState(false);
|
||||
const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
const [anexos, setAnexos] = useState([]);
|
||||
const [loadingAnexos, setLoadingAnexos] = useState(false);
|
||||
const [paciente, setPaciente] = useState({});
|
||||
const [acessibilidade, setAcessibilidade] = useState({
|
||||
cadeirante: false,
|
||||
idoso: false,
|
||||
gravida: false,
|
||||
bebe: false,
|
||||
autista: false,
|
||||
});
|
||||
const [dadosAtendimento, setDadosAtendimento] = useState({
|
||||
profissional: "",
|
||||
tipoAtendimento: "",
|
||||
unidade: "",
|
||||
dataAtendimento: "",
|
||||
inicio: "",
|
||||
termino: "",
|
||||
solicitante: "",
|
||||
observacoes: "",
|
||||
});
|
||||
|
||||
// Variável de controle para saber se a grade de horário deve ser mostrada
|
||||
const isReadyForSchedule =
|
||||
dadosAtendimento.profissional && dadosAtendimento.dataAtendimento;
|
||||
|
||||
const fetchHorariosDisponiveis = async (professionalId, date) => {
|
||||
if (!isReadyForSchedule || isModoEmergencia) {
|
||||
setHorariosDisponiveis([]);
|
||||
return;
|
||||
}
|
||||
|
||||
setCarregandoHorarios(true);
|
||||
setHorariosDisponiveis([]);
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
|
||||
const payload = {
|
||||
doctor_id: professionalId,
|
||||
date: date,
|
||||
};
|
||||
|
||||
var requestOptions = {
|
||||
method: "POST",
|
||||
headers: myHeaders,
|
||||
body: JSON.stringify(payload),
|
||||
redirect: "follow",
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
"https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability",
|
||||
requestOptions
|
||||
);
|
||||
const data = await res.json();
|
||||
|
||||
const slots = data.data && Array.isArray(data.data) ? data.data : [];
|
||||
|
||||
setHorariosDisponiveis(slots);
|
||||
|
||||
// Limpa o horário se o que estava selecionado não existe mais na nova grade
|
||||
if (dadosAtendimento.inicio && !slots.includes(dadosAtendimento.inicio)) {
|
||||
setDadosAtendimento((prev) => ({ ...prev, inicio: "", termino: "" }));
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Erro ao buscar horários disponíveis:", err);
|
||||
setHorariosDisponiveis([]);
|
||||
} finally {
|
||||
setCarregandoHorarios(false);
|
||||
}
|
||||
};
|
||||
const [paciente, setPaciente] = useState({})
|
||||
const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
|
||||
|
||||
useEffect(() => {
|
||||
if (!patientID) return;
|
||||
@ -86,9 +17,7 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
const fetchAnexos = async () => {
|
||||
setLoadingAnexos(true);
|
||||
try {
|
||||
const res = await fetch(
|
||||
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`
|
||||
);
|
||||
const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`);
|
||||
const data = await res.json();
|
||||
setAnexos(data.data || []);
|
||||
} catch (err) {
|
||||
@ -101,23 +30,6 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
fetchAnexos();
|
||||
}, [patientID]);
|
||||
|
||||
useEffect(() => {
|
||||
// Chama a busca apenas se estivermos no modo padrão E tivermos profissional e data
|
||||
if (isReadyForSchedule && !isModoEmergencia) {
|
||||
fetchHorariosDisponiveis(
|
||||
dadosAtendimento.profissional,
|
||||
dadosAtendimento.dataAtendimento
|
||||
);
|
||||
} else if (!isReadyForSchedule) {
|
||||
setHorariosDisponiveis([]);
|
||||
}
|
||||
}, [
|
||||
dadosAtendimento.profissional,
|
||||
dadosAtendimento.dataAtendimento,
|
||||
isModoEmergencia,
|
||||
isReadyForSchedule,
|
||||
]);
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!selectedFile) return;
|
||||
|
||||
@ -125,16 +37,13 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
formData.append("file", selectedFile);
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`,
|
||||
{
|
||||
const res = await fetch(`https://mock.apidog.com/m1/1053378-0-default/pacientes/${patientID}/anexos`, {
|
||||
method: "POST",
|
||||
body: formData,
|
||||
}
|
||||
);
|
||||
body: formData
|
||||
});
|
||||
if (res.ok) {
|
||||
const novoAnexo = await res.json();
|
||||
setAnexos((prev) => [...prev, novoAnexo]);
|
||||
setAnexos(prev => [...prev, novoAnexo]);
|
||||
setSelectedFile(null);
|
||||
} else {
|
||||
console.error("Erro ao enviar anexo");
|
||||
@ -144,312 +53,168 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleclickAcessibilidade = (id) => {
|
||||
let resultado = acessibilidade[id];
|
||||
|
||||
if (resultado === false) {
|
||||
setAcessibilidade({ ...acessibilidade, [id]: true });
|
||||
console.log("mudou");
|
||||
} else if (resultado === true) {
|
||||
setAcessibilidade({ ...acessibilidade, [id]: false });
|
||||
const handleclickAcessibilidade = (id) => {
|
||||
let resultado = acessibilidade[id]
|
||||
|
||||
if(resultado === false){ setAcessibilidade({...acessibilidade, [id]:true}); console.log('mudou')}
|
||||
|
||||
else if(resultado === true){ setAcessibilidade({...acessibilidade, [id]:false})}
|
||||
console.log(id)
|
||||
}
|
||||
console.log(id);
|
||||
};
|
||||
|
||||
|
||||
const FormatCPF = (valor) => {
|
||||
const digits = String(valor).replace(/\D/g, "").slice(0, 11);
|
||||
BuscarPacienteExistentePeloCPF(valor);
|
||||
console.log(valor)
|
||||
|
||||
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
||||
BuscarPacienteExistentePeloCPF(valor)
|
||||
|
||||
return digits
|
||||
.replace(/(\d{3})(\d)/, "$1.$2")
|
||||
.replace(/(\d{3})(\d)/, "$1.$2")
|
||||
.replace(/(\d{3})(\d{1,2})$/, "$1-$2");
|
||||
};
|
||||
.replace(/(\d{3})(\d)/, '$1.$2')
|
||||
.replace(/(\d{3})(\d)/, '$1.$2')
|
||||
.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
|
||||
}
|
||||
|
||||
|
||||
const FormatTelefones = (valor) => {
|
||||
const digits = String(valor).replace(/\D/g, "").slice(0, 11);
|
||||
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
||||
return digits
|
||||
.replace(/(\d)/, "($1")
|
||||
.replace(/(\d{2})(\d)/, "$1) $2")
|
||||
.replace(/(\d)(\d{4})/, "$1 $2")
|
||||
.replace(/(\d{4})(\d{4})/, "$1-$2");
|
||||
};
|
||||
.replace(/(\d)/, '($1')
|
||||
.replace(/(\d{2})(\d)/, '$1) $2' )
|
||||
.replace(/(\d)(\d{4})/, '$1 $2')
|
||||
.replace(/(\d{4})(\d{4})/, '$1-$2')
|
||||
}
|
||||
|
||||
|
||||
const BuscarCPFnoBancodeDados = async (cpf) => {
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Authorization", "Bearer <token>");
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
|
||||
var raw = JSON.stringify({
|
||||
cpf: cpf,
|
||||
"cpf": cpf
|
||||
});
|
||||
|
||||
var requestOptions = {
|
||||
method: "POST",
|
||||
method: 'POST',
|
||||
headers: myHeaders,
|
||||
body: raw,
|
||||
redirect: "follow",
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
const response = await fetch(
|
||||
"https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf",
|
||||
requestOptions
|
||||
);
|
||||
const response = await fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/validar-cpf", requestOptions);
|
||||
const result = await response.json();
|
||||
return result;
|
||||
};
|
||||
return result
|
||||
|
||||
|
||||
}
|
||||
|
||||
const BuscarPacienteExistentePeloCPF = async (value) => {
|
||||
if (isNaN(value[13]) === false && value.length === 14)
|
||||
try {
|
||||
const result = await BuscarCPFnoBancodeDados(value);
|
||||
|
||||
if (result.data.existe === true) {
|
||||
if(isNaN(value[13]) === false && value.length === 14)try {
|
||||
const result = await BuscarCPFnoBancodeDados(value);
|
||||
console.log("Resultado:", result);
|
||||
|
||||
if (result.data.existe === true){
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Authorization", "Bearer <token>");
|
||||
|
||||
var requestOptions = {
|
||||
method: "GET",
|
||||
method: 'GET',
|
||||
headers: myHeaders,
|
||||
redirect: "follow",
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(
|
||||
"https://mock.apidog.com/m1/1053378-0-default/pacientes/",
|
||||
requestOptions
|
||||
)
|
||||
.then((response) => response.json())
|
||||
.then((result) => setPaciente(result.data))
|
||||
.catch((error) => console.log("error", error));
|
||||
fetch("https://mock.apidog.com/m1/1053378-0-default/pacientes/", requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(result => setPaciente(result.data))
|
||||
.catch(error => console.log('error', error));
|
||||
}
|
||||
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log("error", error);
|
||||
}
|
||||
};
|
||||
//BuscarCPFnoBancodeDados(value)
|
||||
}
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { value, name } = e.target;
|
||||
|
||||
if (name === "email") {
|
||||
setPaciente({
|
||||
...paciente,
|
||||
contato: {
|
||||
const {value, name} = e.target;
|
||||
|
||||
console.log(value, name)
|
||||
|
||||
if(name === 'email'){
|
||||
setPaciente({...paciente, contato:{
|
||||
...paciente.contato,
|
||||
email: value,
|
||||
},
|
||||
});
|
||||
} else if (name === "telefone") {
|
||||
setPaciente({
|
||||
...paciente,
|
||||
contato: {
|
||||
email:value
|
||||
}})
|
||||
|
||||
} else if(name === 'telefone'){
|
||||
setPaciente({...paciente, contato:{
|
||||
...paciente.contato,
|
||||
telefone1: FormatTelefones(value),
|
||||
},
|
||||
});
|
||||
} else {
|
||||
setPaciente({ ...paciente, [name]: value });
|
||||
telefone1:FormatTelefones(value)
|
||||
}})
|
||||
}
|
||||
};
|
||||
|
||||
const handleAtendimentoChange = (e) => {
|
||||
const { value, name } = e.target;
|
||||
setDadosAtendimento((prev) => ({
|
||||
...prev,
|
||||
[name]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmitExcecao = async () => {
|
||||
console.log(
|
||||
"Modo Emergência Ativado: Tentando criar Exceção com novo endpoint."
|
||||
);
|
||||
|
||||
const {
|
||||
profissional,
|
||||
dataAtendimento,
|
||||
tipoAtendimento,
|
||||
inicio,
|
||||
termino,
|
||||
observacoes,
|
||||
} = dadosAtendimento;
|
||||
|
||||
if (
|
||||
!profissional ||
|
||||
!dataAtendimento ||
|
||||
!tipoAtendimento ||
|
||||
!inicio ||
|
||||
!termino
|
||||
) {
|
||||
alert(
|
||||
"Por favor, preencha o Profissional, Data, Tipo e Horários para a exceção."
|
||||
);
|
||||
return;
|
||||
else{
|
||||
setPaciente({...paciente,[name]:value})
|
||||
}
|
||||
|
||||
const payload = {
|
||||
doctor_id: profissional,
|
||||
date: dataAtendimento,
|
||||
start_time: inicio + ":00",
|
||||
end_time: termino + ":00",
|
||||
kind: "liberacao",
|
||||
reason: tipoAtendimento,
|
||||
};
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
|
||||
var requestOptions = {
|
||||
method: "POST",
|
||||
headers: myHeaders,
|
||||
body: JSON.stringify(payload),
|
||||
redirect: "follow",
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(
|
||||
"https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_exceptions",
|
||||
requestOptions
|
||||
);
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok || response.status === 201) {
|
||||
console.log("Exceção de emergência criada com sucesso:", result);
|
||||
alert(
|
||||
`Consulta de emergência agendada como exceção! Detalhes: ${JSON.stringify(
|
||||
result
|
||||
)}`
|
||||
);
|
||||
} else {
|
||||
console.error("Erro ao criar exceção de emergência:", result);
|
||||
alert(
|
||||
`Erro ao agendar exceção. Status: ${response.status}. Detalhes: ${
|
||||
result.message || JSON.stringify(result)
|
||||
}`
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erro na requisição para criar exceção:", error);
|
||||
alert(
|
||||
"Erro de comunicação com o servidor ou formato de resposta inválido."
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmitPadrao = () => {
|
||||
if (!isReadyForSchedule) {
|
||||
alert(
|
||||
"Por favor, preencha o Profissional e a Data do Atendimento antes de salvar."
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (
|
||||
!horariosDisponiveis.includes(dadosAtendimento.inicio) ||
|
||||
!horariosDisponiveis.includes(dadosAtendimento.termino)
|
||||
) {
|
||||
alert(
|
||||
"Por favor, selecione horários válidos dentro da grade do profissional."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Salvando agendamento.");
|
||||
alert("Agendamento salvo!");
|
||||
};
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
if (isModoEmergencia) {
|
||||
handleSubmitExcecao();
|
||||
} else {
|
||||
handleSubmitPadrao();
|
||||
}
|
||||
alert("Agendamento salvo!");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="form-container">
|
||||
|
||||
|
||||
<form className="form-agendamento" onSubmit={handleSubmit}>
|
||||
<h2 className="section-title">Informações do paciente</h2>
|
||||
|
||||
<div
|
||||
className="campos-informacoes-paciente"
|
||||
id="informacoes-paciente-linha-um"
|
||||
>
|
||||
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-um">
|
||||
<div className="campo-de-input">
|
||||
<label>Nome *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="nome"
|
||||
value={paciente.nome}
|
||||
placeholder="Insira o nome do paciente"
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<input type="text" name="nome" value={paciente.nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>CPF do paciente</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
name="cpf"
|
||||
placeholder="000.000.000-00"
|
||||
onChange={(e) => (e.target.value = FormatCPF(e.target.value))}
|
||||
/>
|
||||
<input type="text" name="cpf" placeholder="000.000.000-00" onChange={(e) => e.target.value = FormatCPF(e.target.value)} />
|
||||
|
||||
</div>
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>RG</label>
|
||||
<input
|
||||
type="text"
|
||||
name="rg"
|
||||
placeholder="Insira o nº do RG"
|
||||
maxLength={9}
|
||||
/>
|
||||
<input type="text" name="rg" placeholder="Insira o nº do RG" maxLength={9} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="campos-informacoes-paciente"
|
||||
id="informacoes-paciente-linha-dois"
|
||||
>
|
||||
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-dois">
|
||||
<div className="campo-de-input">
|
||||
<label>Data de nascimento *</label>
|
||||
<input
|
||||
type="date"
|
||||
name="data_nascimento"
|
||||
value={paciente.data_nascimento}
|
||||
required
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<input type="date" name="data_nascimento" value={paciente.data_nascimento} required onChange={handleChange}/>
|
||||
</div>
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Telefone</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="telefone"
|
||||
placeholder="(99) 99999-9999"
|
||||
value={paciente.contato?.telefone1}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<input type="tel" name="telefone" placeholder="(99) 99999-9999" value={paciente.contato?.telefone1} onChange={handleChange} />
|
||||
</div>
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>E-mail</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
value={paciente.contato?.email}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<input type="email" name="email" placeholder="Email" value={paciente.contato?.email} onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="campos-informacoes-paciente"
|
||||
id="informacoes-paciente-linha-tres"
|
||||
>
|
||||
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Convênio</label>
|
||||
<select name="convenio">
|
||||
@ -470,9 +235,7 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
|
||||
<h3 className="section-subtitle">Informações adicionais</h3>
|
||||
|
||||
<label htmlFor="anexo-input" className="btn btn-secondary">
|
||||
Adicionar Anexo
|
||||
</label>
|
||||
<label htmlFor="anexo-input" className="btn btn-secondary">Adicionar Anexo</label>
|
||||
<input
|
||||
type="file"
|
||||
id="anexo-input"
|
||||
@ -480,11 +243,7 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
onChange={(e) => setSelectedFile(e.target.files[0])}
|
||||
/>
|
||||
{selectedFile && (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary ms-2"
|
||||
onClick={handleUpload}
|
||||
>
|
||||
<button type="button" className="btn btn-primary ms-2" onClick={handleUpload}>
|
||||
Enviar
|
||||
</button>
|
||||
)}
|
||||
@ -500,280 +259,84 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
)}
|
||||
</div>
|
||||
<h2 className="section-title">Informações do atendimento</h2>
|
||||
<div className="emergencia-toggle-container">
|
||||
<button
|
||||
type="button"
|
||||
className={`btn ${
|
||||
isModoEmergencia ? "btn-danger" : "btn-secondary"
|
||||
}`}
|
||||
onClick={() => setIsModoEmergencia((prev) => !prev)}
|
||||
style={{ marginBottom: "15px" }}
|
||||
>
|
||||
{isModoEmergencia
|
||||
? "Modo: EMERGÊNCIA Ativo"
|
||||
: "Ativar Modo: Emergência (Exceção)"}
|
||||
</button>
|
||||
{isModoEmergencia && (
|
||||
<p className="alerta-emergencia">
|
||||
⚠️ As informações de data e horário serão enviadas como uma
|
||||
exceção fora da grade normal.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
|
||||
<div className="icons-container">
|
||||
<div
|
||||
className={`icons-div ${
|
||||
acessibilidade.cadeirante === true ? "acessibilidade-ativado" : ""
|
||||
} `}
|
||||
id="cadeirante"
|
||||
onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}
|
||||
>
|
||||
|
||||
<div className={`icons-div ${ acessibilidade.cadeirante === true ? 'acessibilidade-ativado' : ''} `} id='cadeirante' onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
|
||||
|
||||
<span className="material-symbols-outlined icon">accessible</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`icons-div ${
|
||||
acessibilidade.idoso === true ? "acessibilidade-ativado" : ""
|
||||
}`}
|
||||
id="idoso"
|
||||
onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}
|
||||
>
|
||||
<div className={`icons-div ${acessibilidade.idoso === true ? 'acessibilidade-ativado' : ''}`} id="idoso" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
|
||||
<span className="material-symbols-outlined icon">elderly</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`icons-div ${
|
||||
acessibilidade.gravida === true ? "acessibilidade-ativado" : ""
|
||||
}`}
|
||||
id="gravida"
|
||||
onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}
|
||||
>
|
||||
<span className="material-symbols-outlined icon">
|
||||
pregnant_woman
|
||||
</span>
|
||||
<div className={`icons-div ${acessibilidade.gravida === true ? 'acessibilidade-ativado' : ''}`} id="gravida" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
|
||||
<span className="material-symbols-outlined icon">pregnant_woman</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`icons-div ${
|
||||
acessibilidade.bebe === true ? "acessibilidade-ativado" : ""
|
||||
}`}
|
||||
id="bebe"
|
||||
onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="34"
|
||||
height="34"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-baby-icon lucide-baby"
|
||||
>
|
||||
<path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5" />
|
||||
<path d="M15 12h.01" />
|
||||
<path d="M19.38 6.813A9 9 0 0 1 20.8 10.2a2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1" />
|
||||
<path d="M9 12h.01" />
|
||||
</svg>
|
||||
<div className={`icons-div ${acessibilidade.bebe === true ? 'acessibilidade-ativado' : ''}`} id="bebe" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-baby-icon lucide-baby"><path d="M10 16c.5.3 1.2.5 2 .5s1.5-.2 2-.5"/><path d="M15 12h.01"/><path d="M19.38 6.813A9 9 0 0 1 20.8 10.2a2 2 0 0 1 0 3.6 9 9 0 0 1-17.6 0 2 2 0 0 1 0-3.6A9 9 0 0 1 12 3c2 0 3.5 1.1 3.5 2.5s-.9 2.5-2 2.5c-.8 0-1.5-.4-1.5-1"/><path d="M9 12h.01"/></svg>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`icons-div ${
|
||||
acessibilidade.autista === true ? "acessibilidade-ativado" : ""
|
||||
}`}
|
||||
id="autista"
|
||||
onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.75"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="lucide lucide-puzzle-icon lucide-puzzle"
|
||||
>
|
||||
<path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z" />
|
||||
</svg>
|
||||
<div className={`icons-div ${acessibilidade.autista === true ? 'acessibilidade-ativado' : ''}`} id="autista" onClick={(e) => handleclickAcessibilidade(e.currentTarget.id)}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.75" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-puzzle-icon lucide-puzzle"><path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/></svg>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div className="campo-informacoes-atendimento">
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Nome do profissional *</label>
|
||||
{/* INPUT: Nome do profissional (usado para habilitar a busca de horários) */}
|
||||
<input
|
||||
type="text"
|
||||
name="profissional"
|
||||
required
|
||||
value={dadosAtendimento.profissional}
|
||||
onChange={handleAtendimentoChange}
|
||||
/>
|
||||
<input type="text" name="profissional" required />
|
||||
</div>
|
||||
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Tipo de atendimento *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="tipoAtendimento"
|
||||
required
|
||||
value={dadosAtendimento.tipoAtendimento}
|
||||
onChange={handleAtendimentoChange}
|
||||
/>
|
||||
<input type="text" name="tipoAtendimento" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="informacoes-atendimento-segunda-linha">
|
||||
<section id="informacoes-atendimento-segunda-linha-esquerda">
|
||||
|
||||
<div className="campo-informacoes-atendimento">
|
||||
<div className="campo-de-input">
|
||||
<div className='campo-de-input'>
|
||||
<label>Unidade *</label>
|
||||
<select
|
||||
name="unidade"
|
||||
value={dadosAtendimento.unidade}
|
||||
onChange={handleAtendimentoChange}
|
||||
>
|
||||
<option value="" disabled invisible selected>
|
||||
Selecione a unidade
|
||||
</option>
|
||||
<option value="centro">
|
||||
Núcleo de Especialidades Integradas
|
||||
</option>
|
||||
<select name="unidade">
|
||||
<option value="" disabled invisible selected>Selecione a unidade</option>
|
||||
<option value="centro">Núcleo de Especialidades Integradas</option>
|
||||
<option value="leste">Unidade Leste</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Data *</label>
|
||||
{/* INPUT: Data de Atendimento (usada para habilitar a busca de horários) */}
|
||||
<input
|
||||
type="date"
|
||||
name="dataAtendimento"
|
||||
required
|
||||
value={dadosAtendimento.dataAtendimento}
|
||||
onChange={handleAtendimentoChange}
|
||||
/>
|
||||
<input type="date" name="dataAtendimento" required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="campo-informacoes-atendimento">
|
||||
{isModoEmergencia ? (
|
||||
// MODO EMERGÊNCIA: Input type="time" simples, sem restrição
|
||||
<>
|
||||
<div className="campo-de-input">
|
||||
<label>Início *</label>
|
||||
<input
|
||||
type="time"
|
||||
name="inicio"
|
||||
required
|
||||
value={dadosAtendimento.inicio}
|
||||
onChange={handleAtendimentoChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="campo-de-input">
|
||||
<label>Término *</label>
|
||||
<input
|
||||
type="time"
|
||||
name="termino"
|
||||
required
|
||||
value={dadosAtendimento.termino}
|
||||
onChange={handleAtendimentoChange}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : // MODO PADRÃO
|
||||
isReadyForSchedule ? (
|
||||
// ESTADO 2: Médico e Data ESCOLHIDOS -> Restringe para grade (SELECT)
|
||||
<>
|
||||
<div className="campo-de-input">
|
||||
<label>Início *</label>
|
||||
{carregandoHorarios ? (
|
||||
<select disabled>
|
||||
<option>Carregando horários...</option>
|
||||
</select>
|
||||
) : (
|
||||
<select
|
||||
name="inicio"
|
||||
required
|
||||
value={dadosAtendimento.inicio}
|
||||
onChange={handleAtendimentoChange}
|
||||
disabled={horariosDisponiveis.length === 0}
|
||||
>
|
||||
<option value="" disabled>
|
||||
{horariosDisponiveis.length === 0
|
||||
? "Nenhum horário disponível"
|
||||
: "Selecione o horário de início"}
|
||||
</option>
|
||||
{horariosDisponiveis.map((slot) => (
|
||||
<option key={slot} value={slot}>
|
||||
{slot}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
<input type="time" name="inicio" required />
|
||||
</div>
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Término *</label>
|
||||
<select
|
||||
name="termino"
|
||||
required
|
||||
value={dadosAtendimento.termino}
|
||||
onChange={handleAtendimentoChange}
|
||||
disabled={horariosDisponiveis.length === 0}
|
||||
>
|
||||
<option value="" disabled>
|
||||
Selecione o horário de término
|
||||
</option>
|
||||
{horariosDisponiveis.map((slot) => (
|
||||
<option key={slot} value={slot}>
|
||||
{slot}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<input type="time" name="termino" required />
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
// ESTADO 1: Médico ou Data PENDENTE -> Permite entrada de tempo livre (INPUT TYPE="TIME")
|
||||
<>
|
||||
<div className="campo-de-input">
|
||||
<label>Início *</label>
|
||||
<input
|
||||
type="time"
|
||||
name="inicio"
|
||||
required
|
||||
value={dadosAtendimento.inicio}
|
||||
onChange={handleAtendimentoChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="campo-de-input">
|
||||
<label>Término *</label>
|
||||
<input
|
||||
type="time"
|
||||
name="termino"
|
||||
required
|
||||
value={dadosAtendimento.termino}
|
||||
onChange={handleAtendimentoChange}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Profissional solicitante</label>
|
||||
<select
|
||||
name="solicitante"
|
||||
value={dadosAtendimento.solicitante}
|
||||
onChange={handleAtendimentoChange}
|
||||
>
|
||||
<option value="" disabled invisible selected>
|
||||
Selecione o solicitante
|
||||
</option>
|
||||
<select name="solicitante">
|
||||
<option value="" disabled invisible selected>Selecione o solicitante</option>
|
||||
<option value="secretaria">Secretária</option>
|
||||
<option value="medico">Médico</option>
|
||||
</select>
|
||||
@ -782,28 +345,21 @@ const FormNovaConsulta = ({ onCancel, patientID }) => {
|
||||
</section>
|
||||
|
||||
<section className="informacoes-atendimento-segunda-linha-direita">
|
||||
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Observações</label>
|
||||
<textarea
|
||||
name="observacoes"
|
||||
rows="4"
|
||||
cols="1"
|
||||
value={dadosAtendimento.observacoes}
|
||||
onChange={handleAtendimentoChange}
|
||||
></textarea>
|
||||
<textarea name="observacoes" rows="4" cols="1"></textarea>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div className="form-actions">
|
||||
<button type="submit" className="btn-primary">
|
||||
Salvar agendamento
|
||||
</button>
|
||||
<button type="button" className="btn-cancel" onClick={onCancel}>
|
||||
Cancelar
|
||||
</button>
|
||||
<button type="submit" className="btn-primary">Salvar agendamento</button>
|
||||
<button type="button" className="btn-cancel" onClick={onCancel}>Cancelar</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -33,6 +33,7 @@ const TrocardePerfis = () => {
|
||||
{ key: "medico", label: "Médico", route: "/medico" },
|
||||
{ key: "financeiro", label: "Financeiro", route: "/financeiro" },
|
||||
{ key: "admin", label: "Administração", route: "/admin" },
|
||||
{ key: "paciente", label: "Paciente", route: "/paciente" },
|
||||
].filter(
|
||||
(opt) =>
|
||||
showProfiles?.includes(opt.key) || showProfiles?.includes("admin")
|
||||
|
||||
@ -1,35 +1,37 @@
|
||||
import React, { useState, useRef } from "react";
|
||||
import { Link, useNavigate, useLocation } from "react-router-dom";
|
||||
import React, { useState, useRef } from 'react';
|
||||
import { Link, useNavigate, useLocation } from 'react-router-dom';
|
||||
|
||||
function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const FormatTelefones = (valor) => {
|
||||
const digits = String(valor).replace(/\D/g, "").slice(0, 11);
|
||||
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
||||
return digits
|
||||
.replace(/(\d)/, "($1")
|
||||
.replace(/(\d{2})(\d)/, "$1) $2")
|
||||
.replace(/(\d)(\d{4})/, "$1 $2")
|
||||
.replace(/(\d{4})(\d{4})/, "$1-$2");
|
||||
.replace(/(\d)/, '($1')
|
||||
.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);
|
||||
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
||||
return digits
|
||||
.replace(/(\d{3})(\d)/, "$1.$2")
|
||||
.replace(/(\d{3})(\d)/, "$1.$2")
|
||||
.replace(/(\d{3})(\d{1,2})$/, "$1-$2");
|
||||
.replace(/(\d{3})(\d)/, '$1.$2')
|
||||
.replace(/(\d{3})(\d)/, '$1.$2')
|
||||
.replace(/(\d{3})(\d{1,2})$/, '$1-$2');
|
||||
};
|
||||
|
||||
|
||||
const validarCPF = (cpf) => {
|
||||
const cpfLimpo = cpf.replace(/\D/g, "");
|
||||
const cpfLimpo = cpf.replace(/\D/g, '');
|
||||
|
||||
if (cpfLimpo.length !== 11) return false;
|
||||
|
||||
|
||||
if (/^(\d)\1+$/.test(cpfLimpo)) return false;
|
||||
|
||||
|
||||
let soma = 0;
|
||||
for (let i = 0; i < 9; i++) {
|
||||
soma += parseInt(cpfLimpo.charAt(i)) * (10 - i);
|
||||
@ -45,16 +47,14 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
resto = 11 - (soma % 11);
|
||||
let digito2 = resto === 10 || resto === 11 ? 0 : resto;
|
||||
|
||||
return (
|
||||
digito1 === parseInt(cpfLimpo.charAt(9)) &&
|
||||
digito2 === parseInt(cpfLimpo.charAt(10))
|
||||
);
|
||||
|
||||
return digito1 === parseInt(cpfLimpo.charAt(9)) && digito2 === parseInt(cpfLimpo.charAt(10));
|
||||
};
|
||||
|
||||
const [avatarUrl, setAvatarUrl] = useState(null);
|
||||
const [showRequiredModal, setShowRequiredModal] = useState(false);
|
||||
const [emptyFields, setEmptyFields] = useState([]);
|
||||
const [cpfError, setCpfError] = useState("");
|
||||
const [cpfError, setCpfError] = useState('');
|
||||
|
||||
const nomeRef = useRef(null);
|
||||
const cpfRef = useRef(null);
|
||||
@ -70,59 +70,63 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
});
|
||||
|
||||
const handleToggleCollapse = (section) => {
|
||||
setCollapsedSections((prevState) => ({
|
||||
setCollapsedSections(prevState => ({
|
||||
...prevState,
|
||||
[section]: !prevState[section],
|
||||
[section]: !prevState[section]
|
||||
}));
|
||||
};
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value, type, checked, files } = e.target;
|
||||
|
||||
|
||||
if (value && emptyFields.includes(name)) {
|
||||
setEmptyFields((prev) => prev.filter((field) => field !== name));
|
||||
setEmptyFields(prev => prev.filter(field => field !== name));
|
||||
}
|
||||
|
||||
if (name === "cpf" && cpfError) {
|
||||
setCpfError("");
|
||||
|
||||
if (name === 'cpf' && cpfError) {
|
||||
setCpfError('');
|
||||
}
|
||||
|
||||
if (type === "checkbox") {
|
||||
setFormData((prev) => ({ ...prev, [name]: checked }));
|
||||
} else if (type === "file") {
|
||||
setFormData((prev) => ({ ...prev, [name]: files[0] }));
|
||||
if (type === 'checkbox') {
|
||||
setFormData(prev => ({ ...prev, [name]: checked }));
|
||||
} else if (type === 'file') {
|
||||
setFormData(prev => ({ ...prev, [name]: files[0] }));
|
||||
|
||||
if (name === "foto" && files[0]) {
|
||||
if (name === 'foto' && files[0]) {
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setAvatarUrl(reader.result);
|
||||
};
|
||||
reader.readAsDataURL(files[0]);
|
||||
} else if (name === "foto" && !files[0]) {
|
||||
} else if (name === 'foto' && !files[0]) {
|
||||
setAvatarUrl(null);
|
||||
}
|
||||
} else if (name.includes("cpf")) {
|
||||
let cpfFormatado = FormatCPF(value);
|
||||
setFormData((prev) => ({ ...prev, [name]: cpfFormatado }));
|
||||
|
||||
const cpfLimpo = cpfFormatado.replace(/\D/g, "");
|
||||
} else if (name.includes('cpf')) {
|
||||
let cpfFormatado = FormatCPF(value);
|
||||
setFormData(prev => ({ ...prev, [name]: cpfFormatado }));
|
||||
|
||||
|
||||
const cpfLimpo = cpfFormatado.replace(/\D/g, '');
|
||||
if (cpfLimpo.length === 11) {
|
||||
if (!validarCPF(cpfFormatado)) {
|
||||
setCpfError("CPF inválido");
|
||||
setCpfError('CPF inválido');
|
||||
} else {
|
||||
setCpfError("");
|
||||
setCpfError('');
|
||||
}
|
||||
}
|
||||
} else if (name.includes("phone")) {
|
||||
} else if (name.includes('phone')) {
|
||||
let telefoneFormatado = FormatTelefones(value);
|
||||
setFormData((prev) => ({ ...prev, [name]: telefoneFormatado }));
|
||||
setFormData(prev => ({ ...prev, [name]: telefoneFormatado }));
|
||||
} else {
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
setFormData(prev => ({ ...prev, [name]: value }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleCepBlur = async () => {
|
||||
const cep = formData.cep?.replace(/\D/g, "");
|
||||
const cep = formData.cep?.replace(/\D/g, '');
|
||||
if (cep && cep.length === 8) {
|
||||
try {
|
||||
const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
|
||||
@ -130,49 +134,50 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
if (!data.erro) {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
street: data.logradouro || "",
|
||||
neighborhood: data.bairro || "",
|
||||
city: data.localidade || "",
|
||||
state: data.uf || "",
|
||||
street: data.logradouro || '',
|
||||
neighborhood: data.bairro || '',
|
||||
city: data.localidade || '',
|
||||
state: data.uf || ''
|
||||
}));
|
||||
} else {
|
||||
setShowRequiredModal(true);
|
||||
setEmptyFields(["cep"]);
|
||||
setEmptyFields(['cep']);
|
||||
}
|
||||
} catch (error) {
|
||||
setShowRequiredModal(true);
|
||||
setEmptyFields(["cep"]);
|
||||
setEmptyFields(['cep']);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const scrollToEmptyField = (fieldName) => {
|
||||
let fieldRef = null;
|
||||
|
||||
switch (fieldName) {
|
||||
case "full_name":
|
||||
case 'full_name':
|
||||
fieldRef = nomeRef;
|
||||
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
|
||||
setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
|
||||
break;
|
||||
case "cpf":
|
||||
case 'cpf':
|
||||
fieldRef = cpfRef;
|
||||
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
|
||||
setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
|
||||
break;
|
||||
case "email":
|
||||
case 'email':
|
||||
fieldRef = emailRef;
|
||||
setCollapsedSections((prev) => ({ ...prev, contato: true }));
|
||||
setCollapsedSections(prev => ({ ...prev, contato: true }));
|
||||
break;
|
||||
case "phone_mobile":
|
||||
case 'phone_mobile':
|
||||
fieldRef = telefoneRef;
|
||||
setCollapsedSections((prev) => ({ ...prev, contato: true }));
|
||||
setCollapsedSections(prev => ({ ...prev, contato: true }));
|
||||
break;
|
||||
case "crm_uf":
|
||||
case 'crm_uf':
|
||||
fieldRef = crmUfRef;
|
||||
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
|
||||
setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
|
||||
break;
|
||||
case "crm":
|
||||
case 'crm':
|
||||
fieldRef = crmRef;
|
||||
setCollapsedSections((prev) => ({ ...prev, dadosPessoais: true }));
|
||||
setCollapsedSections(prev => ({ ...prev, dadosPessoais: true }));
|
||||
break;
|
||||
default:
|
||||
return;
|
||||
@ -182,19 +187,20 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
setTimeout(() => {
|
||||
if (fieldRef.current) {
|
||||
fieldRef.current.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "center",
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
});
|
||||
fieldRef.current.focus();
|
||||
|
||||
fieldRef.current.style.border = "2px solid #dc3545";
|
||||
fieldRef.current.style.boxShadow =
|
||||
"0 0 0 0.2rem rgba(220, 53, 69, 0.25)";
|
||||
|
||||
fieldRef.current.style.border = '2px solid #dc3545';
|
||||
fieldRef.current.style.boxShadow = '0 0 0 0.2rem rgba(220, 53, 69, 0.25)';
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (fieldRef.current) {
|
||||
fieldRef.current.style.border = "";
|
||||
fieldRef.current.style.boxShadow = "";
|
||||
fieldRef.current.style.border = '';
|
||||
fieldRef.current.style.boxShadow = '';
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
@ -204,17 +210,18 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
const handleSubmit = async () => {
|
||||
|
||||
const missingFields = [];
|
||||
if (!formData.full_name) missingFields.push("full_name");
|
||||
if (!formData.cpf) missingFields.push("cpf");
|
||||
if (!formData.email) missingFields.push("email");
|
||||
if (!formData.phone_mobile) missingFields.push("phone_mobile");
|
||||
if (!formData.crm_uf) missingFields.push("crm_uf");
|
||||
if (!formData.crm) missingFields.push("crm");
|
||||
if (!formData.full_name) missingFields.push('full_name');
|
||||
if (!formData.cpf) missingFields.push('cpf');
|
||||
if (!formData.email) missingFields.push('email');
|
||||
if (!formData.phone_mobile) missingFields.push('phone_mobile');
|
||||
if (!formData.crm_uf) missingFields.push('crm_uf');
|
||||
if (!formData.crm) missingFields.push('crm');
|
||||
|
||||
if (missingFields.length > 0) {
|
||||
setEmptyFields(missingFields);
|
||||
setShowRequiredModal(true);
|
||||
|
||||
|
||||
setTimeout(() => {
|
||||
if (missingFields.length > 0) {
|
||||
scrollToEmptyField(missingFields[0]);
|
||||
@ -223,23 +230,26 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
return;
|
||||
}
|
||||
|
||||
const cpfLimpo = formData.cpf.replace(/\D/g, "");
|
||||
|
||||
const cpfLimpo = formData.cpf.replace(/\D/g, '');
|
||||
if (cpfLimpo.length !== 11) {
|
||||
setShowRequiredModal(true);
|
||||
setEmptyFields(["cpf"]);
|
||||
setCpfError("CPF deve ter 11 dígitos");
|
||||
setTimeout(() => scrollToEmptyField("cpf"), 500);
|
||||
setEmptyFields(['cpf']);
|
||||
setCpfError('CPF deve ter 11 dígitos');
|
||||
setTimeout(() => scrollToEmptyField('cpf'), 500);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (!validarCPF(formData.cpf)) {
|
||||
setShowRequiredModal(true);
|
||||
setEmptyFields(["cpf"]);
|
||||
setCpfError("CPF inválido");
|
||||
setTimeout(() => scrollToEmptyField("cpf"), 500);
|
||||
setEmptyFields(['cpf']);
|
||||
setCpfError('CPF inválido');
|
||||
setTimeout(() => scrollToEmptyField('cpf'), 500);
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
await onSave({ ...formData });
|
||||
|
||||
@ -290,16 +300,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<h5
|
||||
style={{
|
||||
color: "#fff",
|
||||
margin: 0,
|
||||
fontSize: "1.2rem",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
Atenção
|
||||
</h5>
|
||||
<h5 style={{ color: "#fff", margin: 0, fontSize: "1.2rem", fontWeight: "bold" }}>Atenção</h5>
|
||||
<button
|
||||
onClick={handleModalClose}
|
||||
style={{
|
||||
@ -315,109 +316,20 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
|
||||
<div style={{ padding: "25px 20px" }}>
|
||||
<p
|
||||
style={{
|
||||
color: "#111",
|
||||
fontSize: "1.1rem",
|
||||
margin: "0 0 15px 0",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{cpfError ? "Problema com o CPF:" : "Por favor, preencha:"}
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: "0 0 15px 0", fontWeight: "bold" }}>
|
||||
{cpfError ? 'Problema com o CPF:' : 'Por favor, preencha:'}
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "8px",
|
||||
marginLeft: "10px",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginLeft: '10px' }}>
|
||||
{cpfError ? (
|
||||
<p
|
||||
style={{
|
||||
color: "#111",
|
||||
fontSize: "1.1rem",
|
||||
margin: 0,
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
{cpfError}
|
||||
</p>
|
||||
<p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>{cpfError}</p>
|
||||
) : (
|
||||
<>
|
||||
{!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>
|
||||
)}
|
||||
{!formData.crm_uf && (
|
||||
<p
|
||||
style={{
|
||||
color: "#111",
|
||||
fontSize: "1.1rem",
|
||||
margin: 0,
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
- Estado do CRM
|
||||
</p>
|
||||
)}
|
||||
{!formData.crm && (
|
||||
<p
|
||||
style={{
|
||||
color: "#111",
|
||||
fontSize: "1.1rem",
|
||||
margin: 0,
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
- CRM
|
||||
</p>
|
||||
)}
|
||||
{!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>}
|
||||
{!formData.crm_uf && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- Estado do CRM</p>}
|
||||
{!formData.crm && <p style={{ color: "#111", fontSize: "1.1rem", margin: 0, fontWeight: "600" }}>- CRM</p>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@ -452,26 +364,18 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
)}
|
||||
|
||||
<div className="card p-3 shadow-sm">
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: "2.5rem" }}>
|
||||
MediConnect
|
||||
</h3>
|
||||
<h3 className="mb-4 text-center" style={{ fontSize: '2.5rem' }}>MediConnect</h3>
|
||||
|
||||
<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" }}
|
||||
>
|
||||
<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 ? "▲" : "▼"}
|
||||
{collapsedSections.dadosPessoais ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div
|
||||
className={`collapse${
|
||||
collapsedSections.dadosPessoais ? " show" : ""
|
||||
}`}
|
||||
>
|
||||
<div className={`collapse${collapsedSections.dadosPessoais ? ' show' : ''}`}>
|
||||
<div className="row mt-3">
|
||||
<div className="col-md-6 mb-3 d-flex align-items-center">
|
||||
<div className="me-3">
|
||||
@ -479,25 +383,20 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
<img
|
||||
src={avatarUrl}
|
||||
alt="Avatar do Médico"
|
||||
style={{
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
borderRadius: "50%",
|
||||
objectFit: "cover",
|
||||
}}
|
||||
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",
|
||||
width: '100px',
|
||||
height: '100px',
|
||||
borderRadius: '50%',
|
||||
backgroundColor: '#e0e0e0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '3.5rem',
|
||||
color: '#9e9e9e'
|
||||
}}
|
||||
>
|
||||
☤
|
||||
@ -505,13 +404,7 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<label
|
||||
htmlFor="foto-input"
|
||||
className="btn btn-primary"
|
||||
style={{ fontSize: "1rem" }}
|
||||
>
|
||||
Carregar Foto
|
||||
</label>
|
||||
<label htmlFor="foto-input" className="btn btn-primary" style={{ fontSize: '1rem' }}>Carregar Foto</label>
|
||||
<input
|
||||
type="file"
|
||||
className="form-control d-none"
|
||||
@ -520,66 +413,49 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
onChange={handleChange}
|
||||
accept="image/*"
|
||||
/>
|
||||
{formData.foto && (
|
||||
<span className="ms-2" style={{ fontSize: "1rem" }}>
|
||||
{formData.foto.name}
|
||||
</span>
|
||||
)}
|
||||
{formData.foto && <span className="ms-2" style={{ fontSize: '1rem' }}>{formData.foto.name}</span>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: "1.1rem" }}>Nome: *</label>
|
||||
<label style={{ fontSize: '1.1rem' }}>Nome: *</label>
|
||||
<input
|
||||
ref={nomeRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="full_name"
|
||||
value={formData.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>
|
||||
<label style={{ fontSize: '1.1rem' }}>CPF: *</label>
|
||||
<input
|
||||
ref={cpfRef}
|
||||
type="text"
|
||||
className={`form-control ${cpfError ? "is-invalid" : ""}`}
|
||||
className={`form-control ${cpfError ? 'is-invalid' : ''}`}
|
||||
name="cpf"
|
||||
value={formData.cpf || ""}
|
||||
value={formData.cpf || ''}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
{cpfError && (
|
||||
<div
|
||||
className="invalid-feedback"
|
||||
style={{ display: "block" }}
|
||||
>
|
||||
<div className="invalid-feedback" style={{ display: 'block' }}>
|
||||
{cpfError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: "1.1rem" }}>Estado do CRM: *</label>
|
||||
<label style={{ fontSize: '1.1rem' }}>Estado do CRM: *</label>
|
||||
<select
|
||||
ref={crmUfRef}
|
||||
className="form-control"
|
||||
name="crm_uf"
|
||||
value={formData.crm_uf || ""}
|
||||
value={formData.crm_uf || ''}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="">Selecione</option>
|
||||
@ -613,37 +489,28 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</div>
|
||||
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: "1.1rem" }}>CRM: *</label>
|
||||
<label style={{ fontSize: '1.1rem' }}>CRM: *</label>
|
||||
<input
|
||||
ref={crmRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="crm"
|
||||
value={formData.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}
|
||||
>
|
||||
<label style={{ fontSize: '1.1rem' }}>Especialização:</label>
|
||||
<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="Clínica Geral">Clínica médica (clínico geral)</option>
|
||||
<option value="Pediatria">Pediatria</option>
|
||||
<option value="Ginecologia">Ginecologia e obstetrícia</option>
|
||||
<option value="Cardiologia">Cardiologia</option>
|
||||
<option value="Ortopedia">Ortopedia e traumatologia</option>
|
||||
<option value="Oftalmologia">Oftalmologia</option>
|
||||
<option value="Otorrinolaringologia">
|
||||
Otorrinolaringologia
|
||||
</option>
|
||||
<option value="Otorrinolaringologia">Otorrinolaringologia</option>
|
||||
<option value="Dermatologia">Dermatologia</option>
|
||||
<option value="Neurologia">Neurologia</option>
|
||||
<option value="Psiquiatria">Psiquiatria</option>
|
||||
@ -657,187 +524,103 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
</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("contato")}
|
||||
style={{ fontSize: "1.8rem" }}
|
||||
>
|
||||
<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 ? "▲" : "▼"}
|
||||
{collapsedSections.contato ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div
|
||||
className={`collapse${collapsedSections.contato ? " show" : ""}`}
|
||||
>
|
||||
<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
|
||||
ref={emailRef}
|
||||
type="email"
|
||||
className="form-control"
|
||||
name="email"
|
||||
value={formData.email || ""}
|
||||
value={formData.email || ''}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
<label style={{ fontSize: "1.1rem" }}>Telefone: *</label>
|
||||
<label style={{ fontSize: '1.1rem' }}>Telefone: *</label>
|
||||
<input
|
||||
ref={telefoneRef}
|
||||
type="text"
|
||||
className="form-control"
|
||||
name="phone_mobile"
|
||||
value={formData.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}
|
||||
/>
|
||||
<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")}
|
||||
style={{ fontSize: "1.8rem" }}
|
||||
>
|
||||
<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 ? "▲" : "▼"}
|
||||
{collapsedSections.endereco ? '▲' : '▼'}
|
||||
</span>
|
||||
</h4>
|
||||
<div
|
||||
className={`collapse${collapsedSections.endereco ? " show" : ""}`}
|
||||
>
|
||||
<div className={`collapse${collapsedSections.endereco ? ' show' : ''}`}>
|
||||
<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>
|
||||
<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("disponibilidade")}
|
||||
style={{ fontSize: "1.8rem" }}
|
||||
>
|
||||
Disponibilidade Semanal
|
||||
<span className="fs-5">
|
||||
{collapsedSections.disponibilidade ? "▲" : "▼"}
|
||||
</span>
|
||||
</h4>
|
||||
<div
|
||||
className={`collapse${
|
||||
collapsedSections.disponibilidade ? " show" : ""
|
||||
}`}
|
||||
>
|
||||
<WeeklyAvailabilityPicker
|
||||
initialAvailability={formData.availability || {}}
|
||||
onChange={(newAvailability) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
availability: newAvailability,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-3 text-center">
|
||||
<button
|
||||
className="btn btn-success me-3"
|
||||
onClick={handleSubmit}
|
||||
disabled={isLoading}
|
||||
style={{ fontSize: "1.2rem", padding: "0.75rem 1.5rem" }}
|
||||
style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
|
||||
>
|
||||
{isLoading ? "Salvando..." : "Salvar Médico"}
|
||||
{isLoading ? 'Salvando...' : 'Salvar Médico'}
|
||||
</button>
|
||||
|
||||
<Link to={`/${location.pathname.split("/")[1]}/medicos`}>
|
||||
<button
|
||||
className="btn btn-light"
|
||||
style={{ fontSize: "1.2rem", padding: "0.75rem 1.5rem" }}
|
||||
style={{ fontSize: '1.2rem', padding: '0.75rem 1.5rem' }}
|
||||
>
|
||||
Cancelar
|
||||
</button>
|
||||
@ -848,79 +631,4 @@ function DoctorForm({ onSave, onCancel, formData, setFormData, isLoading }) {
|
||||
);
|
||||
}
|
||||
|
||||
function WeeklyAvailabilityPicker() {
|
||||
const days = ["Seg", "Ter", "Qua", "Qui", "Sex", "Sáb", "Dom"];
|
||||
const [availability, setAvailability] = useState(
|
||||
days.reduce((acc, day) => ({ ...acc, [day]: [] }), {})
|
||||
);
|
||||
|
||||
const handleAddInterval = (day) => {
|
||||
const newIntervals = [...availability[day], { start: "", end: "" }];
|
||||
const newAvailability = { ...availability, [day]: newIntervals };
|
||||
setAvailability(newAvailability);
|
||||
};
|
||||
|
||||
const handleRemoveInterval = (day, index) => {
|
||||
const newIntervals = availability[day].filter((_, i) => i !== index);
|
||||
setAvailability({ ...availability, [day]: newIntervals });
|
||||
};
|
||||
|
||||
const handleTimeChange = (day, index, field, value) => {
|
||||
const newIntervals = availability[day].map((interval, i) =>
|
||||
i === index ? { ...interval, [field]: value } : interval
|
||||
);
|
||||
setAvailability({ ...availability, [day]: newIntervals });
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
const data = [];
|
||||
for (const [day, intervals] of Object.entries(availability)) {
|
||||
intervals.forEach(({ start, end }) => {
|
||||
const dayIndex = days.indexOf(day);
|
||||
data.push({ day: dayIndex, start, end });
|
||||
});
|
||||
}
|
||||
|
||||
fetch("https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(data),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => console.log("Salvo:", res))
|
||||
.catch((err) => console.error("Erro:", err));
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
{days.map((day) => (
|
||||
<div key={day} style={{ marginBottom: "20px" }}>
|
||||
<h5>{day}</h5>
|
||||
{availability[day].map((interval, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{ display: "flex", alignItems: "center", gap: "10px", marginBottom: "5px" }}
|
||||
>
|
||||
<input
|
||||
type="time"
|
||||
value={interval.start}
|
||||
onChange={(e) => handleTimeChange(day, index, "start", e.target.value)}
|
||||
/>
|
||||
<span>até</span>
|
||||
<input
|
||||
type="time"
|
||||
value={interval.end}
|
||||
onChange={(e) => handleTimeChange(day, index, "end", e.target.value)}
|
||||
/>
|
||||
<button onClick={() => handleRemoveInterval(day, index)}>Remover</button>
|
||||
</div>
|
||||
))}
|
||||
<button onClick={() => handleAddInterval(day)}>Adicionar intervalo</button>
|
||||
</div>
|
||||
))}
|
||||
<button onClick={handleSave}>Salvar Disponibilidade</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default DoctorForm;
|
||||
13
src/data/sidebar-items-paciente.json
Normal file
13
src/data/sidebar-items-paciente.json
Normal file
@ -0,0 +1,13 @@
|
||||
[
|
||||
{
|
||||
"name": "Minhas consulta",
|
||||
"icon": "calendar-plus-fill",
|
||||
"url": "/paciente/agendamento"
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Meus laudos",
|
||||
"icon": "table",
|
||||
"url": "/paciente/laudo"
|
||||
}
|
||||
]
|
||||
@ -44,7 +44,6 @@ function DoctorCadastroManager() {
|
||||
number: doctorData.number || null,
|
||||
complement: doctorData.complement || null,
|
||||
phone2: doctorData.phone2 ? doctorData.phone2.replace(/\D/g, '') : null,
|
||||
availability: doctorData.availability || {},
|
||||
};
|
||||
|
||||
console.log('Dados limpos para envio:', cleanedData);
|
||||
|
||||
@ -1,115 +1,77 @@
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { GetDoctorByID } from "../components/utils/Functions-Endpoints/Doctor";
|
||||
import DoctorForm from "../components/doctors/DoctorForm";
|
||||
import { useAuth } from "../components/utils/AuthProvider";
|
||||
import { useParams } from "react-router-dom";
|
||||
import API_KEY from "../components/utils/apiKeys";
|
||||
|
||||
import React from 'react'
|
||||
import { GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor'
|
||||
import DoctorForm from '../components/doctors/DoctorForm'
|
||||
import { useAuth } from '../components/utils/AuthProvider'
|
||||
import {useEffect, useState} from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import API_KEY from '../components/utils/apiKeys'
|
||||
const DoctorEditPage = () => {
|
||||
const { getAuthorizationHeader } = useAuth();
|
||||
const [DoctorToPUT, setDoctorPUT] = useState({});
|
||||
const [availability, setAvailability] = useState([]);
|
||||
const { id: DoctorID } = useParams();
|
||||
const {getAuthorizationHeader, isAuthenticated} = useAuth();
|
||||
const [DoctorToPUT, setDoctorPUT] = useState({})
|
||||
|
||||
useEffect(() => {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
const Parametros = useParams()
|
||||
|
||||
const DoctorID = Parametros.id
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const authHeader = getAuthorizationHeader()
|
||||
|
||||
// Buscar médico
|
||||
GetDoctorByID(DoctorID, authHeader)
|
||||
.then((data) => setDoctorPUT(data[0]))
|
||||
.catch((err) => console.error(err));
|
||||
.then((data) => {
|
||||
console.log(data, "médico vindo da API");
|
||||
setDoctorPUT(data[0])
|
||||
; // supabase retorna array
|
||||
})
|
||||
.catch((err) => console.error("Erro ao buscar paciente:", err));
|
||||
|
||||
// Buscar disponibilidades
|
||||
const fetchAvailability = async () => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability/${DoctorID}`,
|
||||
{ headers: { apikey: API_KEY, Authorization: authHeader } }
|
||||
);
|
||||
const data = await res.json();
|
||||
setAvailability(data.data || []);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
fetchAvailability();
|
||||
}, []);
|
||||
|
||||
// Atualizar uma disponibilidade
|
||||
const updateAvailability = async (id, updatedData) => {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
try {
|
||||
await fetch(
|
||||
`https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability/${id}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
apikey: API_KEY,
|
||||
Authorization: authHeader,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(updatedData),
|
||||
}
|
||||
);
|
||||
// atualizar localmente
|
||||
setAvailability((prev) =>
|
||||
prev.map((a) => (a.id === id ? { ...a, ...updatedData } : a))
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
// Deletar uma disponibilidade
|
||||
const deleteAvailability = async (id) => {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
try {
|
||||
await fetch(
|
||||
`https://mock.apidog.com/m1/1053378-0-default/rest/v1/doctor_availability/${id}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: { apikey: API_KEY, Authorization: authHeader },
|
||||
}
|
||||
);
|
||||
setAvailability((prev) => prev.filter((a) => a.id !== id));
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
}, [])
|
||||
const HandlePutDoctor = async () => {
|
||||
const authHeader = getAuthorizationHeader();
|
||||
try {
|
||||
await fetch(
|
||||
`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`,
|
||||
{
|
||||
method: "PUT",
|
||||
headers: {
|
||||
apikey: API_KEY,
|
||||
Authorization: authHeader,
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(DoctorToPUT),
|
||||
}
|
||||
);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
const authHeader = getAuthorizationHeader()
|
||||
|
||||
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append('apikey', API_KEY)
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
myHeaders.append("Content-Type", "application/json");
|
||||
|
||||
var raw = JSON.stringify(DoctorToPUT);
|
||||
|
||||
console.log("Enviando médico para atualização:", DoctorToPUT);
|
||||
|
||||
var requestOptions = {
|
||||
method: 'PUT',
|
||||
headers: myHeaders,
|
||||
body: raw,
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors?id=eq.${DoctorID}`,requestOptions);
|
||||
console.log(response)
|
||||
|
||||
} catch (error) {
|
||||
console.error("Erro ao atualizar paciente:", error);
|
||||
throw error;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div>
|
||||
|
||||
<DoctorForm
|
||||
onSave={HandlePutDoctor}
|
||||
|
||||
formData={DoctorToPUT}
|
||||
setFormData={setDoctorPUT}
|
||||
availability={availability}
|
||||
updateAvailability={updateAvailability}
|
||||
deleteAvailability={deleteAvailability}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default DoctorEditPage;
|
||||
/>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DoctorEditPage
|
||||
23
src/perfis/Perfil_paciente/Perfilpaciente.jsx
Normal file
23
src/perfis/Perfil_paciente/Perfilpaciente.jsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
import Sidebar from "../../components/Sidebar";
|
||||
import PacienteItems from "../../data/sidebar-items-paciente.json";
|
||||
import Agendamento from "../../pages/Agendamento";
|
||||
import LaudoManager from "../../pages/LaudoManager";
|
||||
function PerfilPaciente({ onLogout }) {
|
||||
return (
|
||||
<div id="app" className="active">
|
||||
<Sidebar onLogout={onLogout} menuItems={PacienteItems} />
|
||||
|
||||
<div id="main">
|
||||
<Routes>
|
||||
<Route path="/" element={<LaudoManager />} />
|
||||
<Route path="agendamento" element={<Agendamento />} />
|
||||
<Route path="laudo" element={<LaudoManager />} />
|
||||
<Route path="*" element={<h2>Página não encontrada</h2>} />
|
||||
</Routes>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PerfilPaciente;
|
||||
Loading…
x
Reference in New Issue
Block a user