dropdown para selecionar pacientes no agendamento
This commit is contained in:
parent
f9db6c4eec
commit
251aa95f63
@ -1,11 +1,12 @@
|
|||||||
import InputMask from "react-input-mask";
|
import InputMask from "react-input-mask";
|
||||||
import "./style/formagendamentos.css";
|
import "./style/formagendamentos.css";
|
||||||
import { useState, useEffect, useCallback } from "react";
|
import { useState, useEffect, useCallback } from "react";
|
||||||
import { GetPatientByCPF } from "../utils/Functions-Endpoints/Patient";
|
import { GetPatientByCPF, GetAllPatients } from "../utils/Functions-Endpoints/Patient";
|
||||||
import { GetAllDoctors } from "../utils/Functions-Endpoints/Doctor";
|
import { GetAllDoctors } from "../utils/Functions-Endpoints/Doctor";
|
||||||
import { useAuth } from "../utils/AuthProvider";
|
import { useAuth } from "../utils/AuthProvider";
|
||||||
import API_KEY from "../utils/apiKeys";
|
import API_KEY from "../utils/apiKeys";
|
||||||
|
|
||||||
|
|
||||||
const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => {
|
const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) => {
|
||||||
const { getAuthorizationHeader } = useAuth();
|
const { getAuthorizationHeader } = useAuth();
|
||||||
|
|
||||||
@ -19,6 +20,10 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
|||||||
const [horarioTermino, setHorarioTermino] = useState('');
|
const [horarioTermino, setHorarioTermino] = useState('');
|
||||||
const [horariosDisponiveis, sethorariosDisponiveis] = useState([]);
|
const [horariosDisponiveis, sethorariosDisponiveis] = useState([]);
|
||||||
|
|
||||||
|
const [todosPacientes, setTodosPacientes] = useState([])
|
||||||
|
const [pacientesFiltrados, setPacientesFiltrados] = useState([])
|
||||||
|
const [isDropdownPacienteOpen, setIsDropdownPacienteOpen] = useState(false)
|
||||||
|
|
||||||
const [status, setStatus] = useState("confirmed")
|
const [status, setStatus] = useState("confirmed")
|
||||||
|
|
||||||
let authHeader = getAuthorizationHeader()
|
let authHeader = getAuthorizationHeader()
|
||||||
@ -70,6 +75,13 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
|||||||
setTodosProfissionais(Medicos);
|
setTodosProfissionais(Medicos);
|
||||||
}, [authHeader]);
|
}, [authHeader]);
|
||||||
|
|
||||||
|
const ChamarPacientes = useCallback (async () => {
|
||||||
|
const Pacientes = await GetAllPatients(authHeader);
|
||||||
|
setTodosPacientes(Pacientes)
|
||||||
|
console.log("pacientes")
|
||||||
|
console.log(Pacientes)
|
||||||
|
}, [authHeader])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
||||||
console.log("Horario","tessssste" )
|
console.log("Horario","tessssste" )
|
||||||
@ -82,6 +94,11 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
|||||||
ChamarMedicos();
|
ChamarMedicos();
|
||||||
}, [ChamarMedicos]);
|
}, [ChamarMedicos]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
ChamarPacientes()
|
||||||
|
}, [ChamarPacientes])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!agendamento.dataAtendimento || !agendamento.doctor_id) return;
|
if (!agendamento.dataAtendimento || !agendamento.doctor_id) return;
|
||||||
|
|
||||||
@ -126,6 +143,25 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
|||||||
setIsDropdownOpen(filtered.length > 0);
|
setIsDropdownOpen(filtered.length > 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSearchPaciente = (e) => {
|
||||||
|
const term = e.target.value;
|
||||||
|
handleChange(e);
|
||||||
|
|
||||||
|
if (term.trim() === '') {
|
||||||
|
setPacientesFiltrados([]);
|
||||||
|
setIsDropdownPacienteOpen(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const filtered = todosPacientes.filter(p =>
|
||||||
|
p.full_name.toLowerCase().includes(term.toLowerCase())
|
||||||
|
);
|
||||||
|
console.log(filtered.length > 0, "filtrados")
|
||||||
|
|
||||||
|
setPacientesFiltrados(filtered);
|
||||||
|
setIsDropdownPacienteOpen(filtered.length > 0);
|
||||||
|
}
|
||||||
|
|
||||||
const handleSelectProfissional = (profissional) => {
|
const handleSelectProfissional = (profissional) => {
|
||||||
setAgendamento(prev => ({
|
setAgendamento(prev => ({
|
||||||
...prev,
|
...prev,
|
||||||
@ -136,6 +172,18 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
|||||||
setIsDropdownOpen(false);
|
setIsDropdownOpen(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleSelectPaciente = (paciente) => {
|
||||||
|
setAgendamento(prev => ({
|
||||||
|
...prev,
|
||||||
|
patient_id:paciente.id,
|
||||||
|
paciente_nome: paciente.full_name,
|
||||||
|
paciente_cpf: paciente.cpf
|
||||||
|
}))
|
||||||
|
setProfissionaisFiltrados([])
|
||||||
|
setIsDropdownPacienteOpen(false)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
const formatarHora = (datetimeString) => {
|
const formatarHora = (datetimeString) => {
|
||||||
return datetimeString?.substring(11, 16) || '';
|
return datetimeString?.substring(11, 16) || '';
|
||||||
};
|
};
|
||||||
@ -211,17 +259,7 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
|||||||
<h2 className="section-title">Informações do paciente</h2>
|
<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">
|
<div className="campo-de-input-container">
|
||||||
<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">
|
<div className="campo-de-input">
|
||||||
<label>Nome *</label>
|
<label>Nome *</label>
|
||||||
<input
|
<input
|
||||||
@ -229,8 +267,34 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
|||||||
name="paciente_nome"
|
name="paciente_nome"
|
||||||
placeholder="Insira o nome do paciente"
|
placeholder="Insira o nome do paciente"
|
||||||
required
|
required
|
||||||
|
onChange={(e) => handleSearchPaciente(e)}
|
||||||
|
value={agendamento?.paciente_nome || ""}
|
||||||
|
autoComplete="off"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{isDropdownPacienteOpen && pacientesFiltrados.length > 0 && (
|
||||||
|
<div className="dropdown-pacientes">
|
||||||
|
{pacientesFiltrados.map((paciente) => (
|
||||||
|
<div
|
||||||
|
key={paciente.id}
|
||||||
|
className="dropdown-item"
|
||||||
|
onClick={() => handleSelectPaciente(paciente)}
|
||||||
|
>
|
||||||
|
{`${paciente.full_name.split(" ")[0]} ${paciente.full_name.split(" ")[1]} - ${paciente.cpf}`}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="campo-de-input campo-cpf">
|
||||||
|
<label>CPF do paciente</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="paciente_cpf"
|
||||||
|
placeholder="000.000.000-00"
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
value={agendamento.paciente_nome}
|
value={agendamento.paciente_cpf}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -320,29 +384,6 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
|||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="seletor-wrapper">
|
|
||||||
<label>Número de Sessões *</label>
|
|
||||||
<div className="sessao-contador">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setSessoes(prev => Math.max(0, prev - 1))}
|
|
||||||
disabled={sessoes === 0}
|
|
||||||
>
|
|
||||||
<i className="bi bi-chevron-compact-left"></i>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<p className="sessao-valor">{sessoes}</p>
|
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setSessoes(prev => Math.min(3, prev + 1))}
|
|
||||||
disabled={sessoes === 3}
|
|
||||||
>
|
|
||||||
<i className="bi bi-chevron-compact-right"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="campo-de-input">
|
<div className="campo-de-input">
|
||||||
<label htmlFor="termino">Término *</label>
|
<label htmlFor="termino">Término *</label>
|
||||||
<input
|
<input
|
||||||
|
|||||||
@ -669,3 +669,24 @@ html[data-bs-theme="dark"] .horario-termino-readonly {
|
|||||||
background-color: #2d3748 !important;
|
background-color: #2d3748 !important;
|
||||||
color: #a0aec0 !important;
|
color: #a0aec0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.campo-cpf{
|
||||||
|
margin-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[name="paciente_cpf"]{
|
||||||
|
width: 12rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-pacientes{
|
||||||
|
position: absolute;
|
||||||
|
top: 100%;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
background-color: white;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||||
|
z-index: 100;
|
||||||
|
max-height: 200px;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
@ -38,4 +38,10 @@ const UserInfos = async (access_token) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
export { UserInfos };
|
const SearchCep = async (cep) => {
|
||||||
|
fetch(`https://brasilapi.com.br/api/cep/v1/${cep}`)
|
||||||
|
.then(response => console.log(response))
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export { UserInfos,SearchCep };
|
||||||
|
|||||||
@ -6,17 +6,9 @@ import LaudoManager from "../../pages/LaudoManager";
|
|||||||
import ConsultaCadastroManager from "../../PagesPaciente/ConsultaCadastroManager";
|
import ConsultaCadastroManager from "../../PagesPaciente/ConsultaCadastroManager";
|
||||||
import ConsultasPaciente from "../../PagesPaciente/ConsultasPaciente";
|
import ConsultasPaciente from "../../PagesPaciente/ConsultasPaciente";
|
||||||
import ConsultaEditPage from "../../PagesPaciente/ConsultaEditPage";
|
import ConsultaEditPage from "../../PagesPaciente/ConsultaEditPage";
|
||||||
|
|
||||||
// 1. IMPORTAÇÃO ADICIONADA
|
|
||||||
import BotaoVideoPaciente from "../../components/BotaoVideoPaciente";
|
|
||||||
|
|
||||||
function PerfilPaciente({ onLogout }) {
|
function PerfilPaciente({ onLogout }) {
|
||||||
|
|
||||||
|
const [dadosConsulta, setConsulta] = useState({})
|
||||||
|
|
||||||
const [DictInfo, setDictInfo] = useState({})
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
||||||
<div id="app" className="active">
|
<div id="app" className="active">
|
||||||
@ -25,19 +17,14 @@ const [DictInfo, setDictInfo] = useState({})
|
|||||||
<div id="main">
|
<div id="main">
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<LaudoManager />} />
|
<Route path="/" element={<LaudoManager />} />
|
||||||
<Route path="agendamento" element={<ConsultasPaciente setDictInfo={setDictInfo}/>} />
|
<Route path="agendamento" element={<ConsultasPaciente setConsulta={setConsulta}/>} />
|
||||||
<Route path="agendamento/criar" element={<ConsultaCadastroManager />} />
|
<Route path="agendamento/criar" element={<ConsultaCadastroManager />} />
|
||||||
<Route path="agendamento/edit" element={<ConsultaEditPage DictInfo={DictInfo} />} />
|
<Route path="agendamento/edit" element={<ConsultaEditPage dadosConsulta={dadosConsulta} />} />
|
||||||
<Route path="laudo" element={<LaudoManager />} />
|
<Route path="laudo" element={<LaudoManager />} />
|
||||||
<Route path="*" element={<h2>Página não encontrada</h2>} />
|
<Route path="*" element={<h2>Página não encontrada</h2>} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 2. COMPONENTE ADICIONADO AQUI */}
|
|
||||||
<BotaoVideoPaciente />
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user