359 lines
11 KiB
JavaScript
359 lines
11 KiB
JavaScript
import InputMask from "react-input-mask";
|
|
import "./style/formagendamentos.css";
|
|
import { useState, useEffect } from "react";
|
|
import { GetPatientByCPF } from "../utils/Functions-Endpoints/Patient";
|
|
import { GetDoctorByName, GetAllDoctors } from "../utils/Functions-Endpoints/Doctor";
|
|
import { useAuth } from "../utils/AuthProvider";
|
|
import API_KEY from "../utils/apiKeys";
|
|
|
|
const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => {
|
|
const {getAuthorizationHeader} = useAuth()
|
|
|
|
console.log(agendamento, 'aqui2')
|
|
|
|
const [selectedFile, setSelectedFile] = useState(null);
|
|
const [anexos, setAnexos] = useState([]);
|
|
const [loadingAnexos, setLoadingAnexos] = useState(false);
|
|
const [acessibilidade, setAcessibilidade] = useState({cadeirante:false,idoso:false,gravida:false,bebe:false, autista:false })
|
|
|
|
|
|
const [todosProfissionais, setTodosProfissionais] = useState([])
|
|
const [profissionaisFiltrados, setProfissionaisFiltrados] = useState([]);
|
|
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
|
|
|
|
|
const [horarioInicio, setHorarioInicio] = useState('');
|
|
const [horarioTermino, setHorarioTermino] = useState('');
|
|
|
|
const [horariosDisponiveis, sethorariosDisponiveis] = useState([])
|
|
|
|
let authHeader = getAuthorizationHeader()
|
|
|
|
const FormatCPF = (valor) => {
|
|
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');
|
|
}
|
|
|
|
|
|
|
|
const handleChange = (e) => {
|
|
const {value, name} = e.target;
|
|
console.log(value, name, agendamento)
|
|
|
|
if(name === 'email'){
|
|
setAgendamento({...agendamento, contato:{
|
|
...agendamento.contato,
|
|
email:value
|
|
}})}
|
|
else if(name === 'status'){
|
|
if(agendamento.status==='requested'){
|
|
setAgendamento((prev) => ({
|
|
...prev,
|
|
status:'confirmed',
|
|
}));
|
|
}else if(agendamento.status === 'confirmed'){
|
|
console.log(value)
|
|
setAgendamento((prev) => ({
|
|
...prev,
|
|
status:'requested',
|
|
}));
|
|
}}
|
|
|
|
else if(name === 'paciente_cpf'){
|
|
|
|
let cpfFormatted = FormatCPF(value)
|
|
const fetchPatient = async () => {
|
|
let patientData = await GetPatientByCPF(cpfFormatted, authHeader);
|
|
if (patientData) {
|
|
setAgendamento((prev) => ({
|
|
...prev,
|
|
pacinte_nome: patientData.full_name,
|
|
patient_id: patientData.id
|
|
}));
|
|
}}
|
|
setAgendamento(prev => ({ ...prev, cpf: cpfFormatted }))
|
|
fetchPatient()
|
|
}else if(name==='convenio'){
|
|
setAgendamento({...agendamento,insurance_provider:value})
|
|
}
|
|
else{
|
|
setAgendamento({...agendamento,[name]:value})
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
const ChamarMedicos = async () => {
|
|
const Medicos = await GetAllDoctors(authHeader)
|
|
setTodosProfissionais(Medicos)
|
|
}
|
|
ChamarMedicos();
|
|
|
|
var myHeaders = new Headers();
|
|
myHeaders.append("Content-Type", "application/json");
|
|
myHeaders.append("apikey", API_KEY)
|
|
myHeaders.append("Authorization", `Bearer ${authHeader.split(' ')[1]}`);
|
|
|
|
var raw = JSON.stringify({
|
|
"doctor_id": agendamento.doctor_id,
|
|
"start_date": agendamento.dataAtendimento,
|
|
"end_date": `${agendamento.dataAtendimento}T23:59:59.999Z`,
|
|
|
|
});
|
|
|
|
var requestOptions = {
|
|
method: 'POST',
|
|
headers: myHeaders,
|
|
body: raw,
|
|
redirect: 'follow'
|
|
};
|
|
|
|
fetch("https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/get-available-slots", requestOptions)
|
|
.then(response => response.json())
|
|
.then(result => {console.log(result); sethorariosDisponiveis(result)})
|
|
.catch(error => console.log('error', error));
|
|
|
|
}, [agendamento.dataAtendimento, agendamento.doctor_id])
|
|
|
|
|
|
// FUNÇÃO DE BUSCA E FILTRAGEM
|
|
const handleSearchProfissional = (e) => {
|
|
const term = e.target.value;
|
|
handleChange(e);
|
|
// 2. Lógica de filtragem:
|
|
if (term.trim() === '') {
|
|
setProfissionaisFiltrados([]);
|
|
setIsDropdownOpen(false);
|
|
return;
|
|
}
|
|
// Adapte o nome da propriedade (ex: 'nome', 'full_name')
|
|
const filtered = todosProfissionais.filter(p =>
|
|
p.full_name.toLowerCase().includes(term.toLowerCase())
|
|
);
|
|
|
|
setProfissionaisFiltrados(filtered);
|
|
setIsDropdownOpen(filtered.length > 0); // Abre se houver resultados
|
|
};
|
|
|
|
|
|
// FUNÇÃO PARA SELECIONAR UM ITEM DO DROPDOWN
|
|
const handleSelectProfissional = async (profissional) => {
|
|
setAgendamento(prev => ({
|
|
...prev,
|
|
doctor_id: profissional.id,
|
|
medico_nome: profissional.full_name
|
|
}));
|
|
// 2. Fecha o dropdown
|
|
setProfissionaisFiltrados([]);
|
|
setIsDropdownOpen(false);
|
|
};
|
|
|
|
|
|
const formatarHora = (datetimeString) => {
|
|
return datetimeString.substring(11, 16);
|
|
};
|
|
|
|
const opcoesDeHorario = horariosDisponiveis?.slots?.map(item => ({
|
|
|
|
value: formatarHora(item.datetime),
|
|
label: formatarHora(item.datetime),
|
|
disabled: !item.available
|
|
}));
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
alert("Agendamento salvo!");
|
|
onSave({...agendamento, horarioInicio:horarioInicio})
|
|
};
|
|
|
|
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="campo-de-input">
|
|
<label>CPF do paciente</label>
|
|
<input type="text" name="paciente_cpf" placeholder="000.000.000-00" onChange={handleChange} value={agendamento.paciente_cpf}/>
|
|
|
|
</div>
|
|
|
|
<div className="campo-de-input">
|
|
<label>Nome *</label>
|
|
<input type="text" name="paciente_nome" value={agendamento.paciente_nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
|
|
</div>
|
|
</div>
|
|
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
|
|
|
|
<div >
|
|
<label>Convênio</label>
|
|
<select name="convenio" onChange={handleChange}>
|
|
<option value="publico">Público</option>
|
|
<option value="unimed">Unimed</option>
|
|
<option value="bradesco_saude">Bradesco Saúde</option>
|
|
<option value="hapvida">Hapvida</option>
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<h2 className="section-title">Informações do atendimento</h2>
|
|
|
|
|
|
<div className="campo-informacoes-atendimento">
|
|
|
|
<div className="campo-de-input-container"> {/* NOVO CONTAINER PAI */}
|
|
<div className="campo-de-input">
|
|
<label>Nome do profissional *</label>
|
|
<input
|
|
type="text"
|
|
name="medico_nome" // Use o nome correto da propriedade no estado `agendamento`
|
|
onChange={handleSearchProfissional}
|
|
value={agendamento.medico_nome}
|
|
autoComplete="off" // Ajuda a evitar o autocomplete nativo do navegador
|
|
required
|
|
/>
|
|
</div>
|
|
|
|
{/* DROPDOWN - RENDERIZAÇÃO CONDICIONAL */}
|
|
{isDropdownOpen && profissionaisFiltrados.length > 0 && (
|
|
<div className='dropdown-profissionais'>
|
|
{profissionaisFiltrados.map((profissional) => (
|
|
<div
|
|
key={profissional.id} // Use o ID do profissional
|
|
className='dropdown-item'
|
|
onClick={() => handleSelectProfissional(profissional)}
|
|
>
|
|
{profissional.full_name}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="tipo_atendimento">
|
|
<label>Tipo de atendimento *</label>
|
|
<select onChange={handleChange} name="tipo_atendimento" >
|
|
<option value="presencial" selected>Presencial</option>
|
|
<option value="teleconsulta">Teleconsulta</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="form-check ">
|
|
<input className="form-check-input checkbox-cstom" type="checkbox" name="status" onChange={handleChange} />
|
|
<label className="form-check-label checkbox-label" htmlFor="vip">
|
|
Fila de espera
|
|
</label>
|
|
</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'>
|
|
<label>Unidade *</label>
|
|
<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 type="date" name="dataAtendimento" onChange={handleChange} required />
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div className="row">
|
|
<div className="campo-de-input">
|
|
<label htmlFor="inicio">Início *</label>
|
|
<select
|
|
id="inicio"
|
|
name="inicio"
|
|
required
|
|
value={horarioInicio}
|
|
onChange={(e) => setHorarioInicio(e.target.value)}
|
|
>
|
|
<option value="" disabled>Selecione a hora de início</option>
|
|
{opcoesDeHorario?.map((opcao, index) => (
|
|
<option
|
|
key={index}
|
|
value={opcao.value}
|
|
disabled={opcao.disabled}
|
|
>
|
|
{opcao.label}
|
|
{opcao.disabled && " (Indisponível)"}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
{/* Dropdown de Término */}
|
|
<div className="campo-de-input">
|
|
<label htmlFor="termino">Término *</label>
|
|
<select
|
|
id="termino"
|
|
name="termino"
|
|
required
|
|
value={horarioTermino}
|
|
onChange={(e) => setHorarioTermino(e.target.value)}
|
|
>
|
|
<option value="" disabled>Selecione a hora de término</option>
|
|
{opcoesDeHorario?.map((opcao, index) => (
|
|
<option
|
|
key={index}
|
|
value={opcao.value}
|
|
disabled={opcao.disabled}
|
|
>
|
|
{opcao.label}
|
|
{opcao.disabled && " (Indisponível)"}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</section>
|
|
|
|
<section className="informacoes-atendimento-segunda-linha-direita">
|
|
|
|
|
|
<div className="campo-de-input">
|
|
<label>Observações</label>
|
|
<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>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FormNovaConsulta; |