forked from RiseUP/riseup-squad23
Melhorias no agendamento
This commit is contained in:
jp-lima
parent
7474639137
commit
b07534bdc4
@ -45,6 +45,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} )
|
||||
|
||||
let nameArrayMedico = Medico?.full_name.split(' ')
|
||||
|
||||
console.log(DadosConsulta.status)
|
||||
|
||||
return (
|
||||
<div className={`container-cardconsulta-${TabelaAgendamento}`}>
|
||||
@ -69,7 +70,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} )
|
||||
|
||||
onClick={() => {navigate(`${DadosConsulta.id}/edit`)}}
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
<i className="bi bi-pencil me-1"></i>
|
||||
</button>
|
||||
|
||||
|
||||
@ -82,7 +83,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} )
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
<i className="bi bi-trash me-1"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@ -2,8 +2,9 @@ import InputMask from "react-input-mask";
|
||||
import "./style/formagendamentos.css";
|
||||
import { useState, useEffect } from "react";
|
||||
import { GetPatientByCPF } from "../utils/Functions-Endpoints/Patient";
|
||||
import { GetDoctorByName } from "../utils/Functions-Endpoints/Doctor";
|
||||
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()
|
||||
@ -11,13 +12,11 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
||||
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 [horariosDisponiveis, sethorariosDisponiveis] = useState([])
|
||||
|
||||
let authHeader = getAuthorizationHeader()
|
||||
|
||||
|
||||
const handleclickAcessibilidade = (id) => {
|
||||
let resultado = acessibilidade[id]
|
||||
|
||||
@ -39,8 +38,9 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
||||
|
||||
|
||||
const handleChange = (e) => {
|
||||
|
||||
const {value, name} = e.target;
|
||||
console.log(value, name)
|
||||
|
||||
if(name === 'email'){
|
||||
setAgendamento({...agendamento, contato:{
|
||||
...agendamento.contato,
|
||||
@ -63,30 +63,119 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
||||
fetchPatient()
|
||||
}else if(name==='convenio'){
|
||||
setAgendamento({...agendamento,insurance_provider:value})
|
||||
}else if(name ==='profissional'){
|
||||
|
||||
|
||||
const fetchDoctor = async () => {
|
||||
let DoctorData = await GetDoctorByName(value, authHeader)
|
||||
if(DoctorData){
|
||||
setAgendamento((prev) => ({
|
||||
...prev,
|
||||
doctor_id:DoctorData.id
|
||||
}))
|
||||
}}
|
||||
fetchDoctor()
|
||||
}
|
||||
else{
|
||||
setAgendamento({...agendamento,[name]:value})
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
|
||||
|
||||
|
||||
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": "58ea5330-5cfe-4433-a218-2749844aee89",
|
||||
"start_date": "2025-10-20",
|
||||
"end_date": "2025-10-20T23: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));
|
||||
|
||||
}, [])
|
||||
|
||||
const [todosProfissionais, setTodosProfissionais] = useState([])
|
||||
const [profissionaisFiltrados, setProfissionaisFiltrados] = useState([]);
|
||||
const [isDropdownOpen, setIsDropdownOpen] = useState(false);
|
||||
|
||||
// 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,
|
||||
nome_medico: profissional.full_name
|
||||
}));
|
||||
|
||||
// 2. Fecha o dropdown
|
||||
setProfissionaisFiltrados([]);
|
||||
setIsDropdownOpen(false);
|
||||
|
||||
};
|
||||
|
||||
|
||||
const formatarHora = (datetimeString) => {
|
||||
// Para simplificar, vou extrair a hora e minuto do formato de string.
|
||||
// Dependendo do seu ambiente, é melhor usar new Date() e toLocaleTimeString()
|
||||
// como no exemplo anterior, mas aqui farei o "corte" na string.
|
||||
// Ex: "2025-10-20T09:00:00.000Z" -> "09:00"
|
||||
return datetimeString.substring(11, 16);
|
||||
};
|
||||
|
||||
const opcoesDeHorario = horariosDisponiveis?.slots?.map(item => ({
|
||||
|
||||
value: formatarHora(item.datetime),
|
||||
label: formatarHora(item.datetime),
|
||||
disabled: !item.available
|
||||
}));
|
||||
|
||||
// Adicionando um estado para controlar as seleções, o que é comum no React
|
||||
const [horarioInicio, setHorarioInicio] = useState('');
|
||||
const [horarioTermino, setHorarioTermino] = useState('');
|
||||
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
alert("Agendamento salvo!");
|
||||
onSave(agendamento)
|
||||
onSave({...agendamento, horarioInicio:horarioInicio})
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="form-container">
|
||||
|
||||
@ -95,26 +184,21 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
||||
<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>Nome *</label>
|
||||
<input type="text" name="nome" value={agendamento.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={handleChange} value={agendamento.cpf}/>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Nome *</label>
|
||||
<input type="text" name="nome" value={agendamento.nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div className="campos-informacoes-paciente" id="informacoes-paciente-linha-tres">
|
||||
|
||||
<div className="campo-de-input">
|
||||
<div >
|
||||
<label>Convênio</label>
|
||||
<select name="convenio" onChange={handleChange}>
|
||||
<option value="publico">Público</option>
|
||||
@ -126,71 +210,48 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
||||
|
||||
</div>
|
||||
|
||||
<h3 className="section-subtitle">Informações adicionais</h3>
|
||||
|
||||
<label htmlFor="anexo-input" className="btn btn-secondary">Adicionar Anexo</label>
|
||||
<input
|
||||
type="file"
|
||||
id="anexo-input"
|
||||
className="d-none"
|
||||
onChange={(e) => setSelectedFile(e.target.files[0])}
|
||||
/>
|
||||
{selectedFile && (
|
||||
<button type="button" className="btn btn-primary ms-2" >
|
||||
Enviar
|
||||
</button>
|
||||
)}
|
||||
<div className="anexos-list">
|
||||
{loadingAnexos ? (
|
||||
<p>Carregando anexos...</p>
|
||||
) : (
|
||||
anexos.map((anexo, index) => (
|
||||
<div key={index} className="anexo-item">
|
||||
<span>{anexo.nome || anexo.fileName}</span>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
<h2 className="section-title">Informações do atendimento</h2>
|
||||
|
||||
|
||||
<div className="icons-container">
|
||||
|
||||
<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)}>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
</div>
|
||||
|
||||
<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="profissional" onChange={handleChange} value={agendamento.nome_medico}required />
|
||||
<input
|
||||
type="text"
|
||||
name="nome_medico" // Use o nome correto da propriedade no estado `agendamento`
|
||||
onChange={handleSearchProfissional}
|
||||
value={agendamento.nome_medico}
|
||||
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="campo-de-input">
|
||||
<div className="tipo_atendimento">
|
||||
<label>Tipo de atendimento *</label>
|
||||
<input type="text" name="tipoAtendimento" required />
|
||||
<select onChange={handleChange} name="tipo_atendimento" >
|
||||
<option value="presencial" selected>Presencial</option>
|
||||
<option value="teleconsulta">Teleconsulta</option>
|
||||
|
||||
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -211,30 +272,62 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Data *</label>
|
||||
<input type="date" name="dataAtendimento" required />
|
||||
<input type="date" name="dataAtendimento" onChange={handleChange} required />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="campo-informacoes-atendimento">
|
||||
|
||||
<div className="row">
|
||||
<div className="campo-de-input">
|
||||
<label>Início *</label>
|
||||
<input type="time" name="inicio" required />
|
||||
<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>
|
||||
|
||||
{/* Dropdown de Término */}
|
||||
<div className="campo-de-input">
|
||||
<label>Término *</label>
|
||||
<input type="time" name="termino" required />
|
||||
</div>
|
||||
|
||||
<div className="campo-de-input">
|
||||
<label>Profissional solicitante</label>
|
||||
<select name="solicitante">
|
||||
<option value="" disabled invisible selected>Selecione o solicitante</option>
|
||||
<option value="secretaria">Secretária</option>
|
||||
<option value="medico">Médico</option>
|
||||
<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">
|
||||
|
||||
@ -304,3 +304,40 @@ html[data-bs-theme="dark"] .icon,
|
||||
html[data-bs-theme="dark"] svg {
|
||||
color: #e0e0e0 !important;
|
||||
}
|
||||
|
||||
/* CONTAINER PAI - ESSENCIAL PARA POSICIONAMENTO */
|
||||
.campo-de-input-container {
|
||||
position: relative; /* Define o contexto para o dropdown */
|
||||
/* ... outros estilos de layout (display, margin, etc.) ... */
|
||||
}
|
||||
|
||||
/* ESTILO DA LISTA DROPDOWN */
|
||||
.dropdown-profissionais {
|
||||
position: absolute; /* Flutua em relação ao pai (.campo-de-input-container) */
|
||||
top: 100%; /* Começa logo abaixo do input */
|
||||
left: 0;
|
||||
width: 100%; /* Ocupa toda a largura do container pai */
|
||||
|
||||
/* Estilos visuais */
|
||||
background-color: white;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
z-index: 100; /* Alto z-index para garantir que fique acima de outros elementos */
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* ESTILO DE CADA ITEM DO DROPDOWN */
|
||||
.dropdown-item {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.dropdown-item:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.tipo_atendimento{
|
||||
margin-left: 3rem;
|
||||
|
||||
}
|
||||
@ -6,8 +6,8 @@ import TabelaAgendamentoDia from '../components/AgendarConsulta/TabelaAgendament
|
||||
import TabelaAgendamentoSemana from '../components/AgendarConsulta/TabelaAgendamentoSemana';
|
||||
import TabelaAgendamentoMes from '../components/AgendarConsulta/TabelaAgendamentoMes';
|
||||
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta';
|
||||
|
||||
import { GetAllDoctors } from '../components/utils/Functions-Endpoints/Doctor.js';
|
||||
import { GetPatientByID } from '../components/utils/Functions-Endpoints/Patient.js';
|
||||
import { GetAllDoctors, GetDoctorByID } from '../components/utils/Functions-Endpoints/Doctor.js';
|
||||
|
||||
import { useAuth } from '../components/utils/AuthProvider.js';
|
||||
// ✨ NOVO: Caminho de importação corrigido com base na sua estrutura de pastas
|
||||
@ -24,6 +24,7 @@ import { Search } from 'lucide-react';
|
||||
const Agendamento = () => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [filaEsperaData, setfilaEsperaData] = useState([])
|
||||
const [FiladeEspera, setFiladeEspera] = useState(false);
|
||||
const [tabela, setTabela] = useState('diario');
|
||||
const [PageNovaConsulta, setPageConsulta] = useState(false);
|
||||
@ -42,11 +43,37 @@ const Agendamento = () => {
|
||||
|
||||
let authHeader = getAuthorizationHeader()
|
||||
|
||||
const FiltrarAgendamentos = (listaTodosAgendamentos) => {
|
||||
const FiltrarAgendamentos = async (listaTodosAgendamentos) => {
|
||||
|
||||
const ConfigurarFiladeEspera = async (patient_id, doctor_id, agendamento) => {
|
||||
|
||||
|
||||
let medico = await GetDoctorByID(doctor_id, authHeader)
|
||||
let paciente = await GetPatientByID(patient_id, authHeader)
|
||||
|
||||
let dicionario = {patientInfo:paciente, doctorInfo:medico, agendamentoInfo:agendamento}
|
||||
|
||||
|
||||
return dicionario
|
||||
|
||||
}
|
||||
|
||||
let DictAgendamentosOrganizados = {};
|
||||
let ListaFilaDeEspera = []
|
||||
|
||||
for (let i = 0; i < listaTodosAgendamentos.length; i++) {
|
||||
const agendamento = listaTodosAgendamentos[i];
|
||||
if(agendamento.status === 'requested'){
|
||||
|
||||
let v = await ConfigurarFiladeEspera(agendamento.patient_id, agendamento.doctor_id, agendamento)
|
||||
|
||||
ListaFilaDeEspera.push(v)
|
||||
|
||||
console.log(ListaFilaDeEspera)
|
||||
|
||||
}
|
||||
|
||||
else{
|
||||
const DiaAgendamento = agendamento.scheduled_at.split("T")[0];
|
||||
|
||||
//console.log(DictAgendamentosOrganizados)
|
||||
@ -57,11 +84,12 @@ const Agendamento = () => {
|
||||
} else {
|
||||
// não existe → cria nova key com uma lista
|
||||
DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
|
||||
}
|
||||
}}
|
||||
}
|
||||
|
||||
|
||||
setAgendamentosOrganizados(DictAgendamentosOrganizados);
|
||||
setfilaEsperaData(ListaFilaDeEspera)
|
||||
|
||||
}
|
||||
|
||||
@ -86,7 +114,6 @@ const Agendamento = () => {
|
||||
let lista = []
|
||||
const TodosOsMedicos = await GetAllDoctors(authHeader)
|
||||
|
||||
//console.log(TodosOsMedicos, "tentativa")
|
||||
for(let d = 0; TodosOsMedicos.length > d; d++){
|
||||
lista.push({nomeMedico: TodosOsMedicos[d].full_name, idMedico: TodosOsMedicos[d].id })}
|
||||
setListaDeMedicos(lista)
|
||||
@ -96,42 +123,22 @@ const Agendamento = () => {
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
console.log("mudou FiltredTodosMedicos:", FiltredTodosMedicos);
|
||||
|
||||
if (FiltredTodosMedicos.length === 1) {
|
||||
|
||||
const unicoMedico = FiltredTodosMedicos[0];
|
||||
console.log(unicoMedico)
|
||||
|
||||
const idMedicoFiltrado = unicoMedico.idMedico;
|
||||
|
||||
console.log(`Médico único encontrado: ${unicoMedico.nomeMedico}. ID: ${idMedicoFiltrado}`);
|
||||
|
||||
|
||||
|
||||
const agendamentosDoMedico = filtrarAgendamentosPorMedico(
|
||||
DictAgendamentosOrganizados,
|
||||
idMedicoFiltrado
|
||||
);
|
||||
|
||||
// =========================================================================
|
||||
|
||||
console.log(`Total de agendamentos filtrados para este médico: ${agendamentosDoMedico.length}`);
|
||||
console.log("Lista completa de Agendamentos do Médico:", agendamentosDoMedico);
|
||||
FiltrarAgendamentos(agendamentosDoMedico)
|
||||
|
||||
|
||||
// AQUI VOCÊ PODE APLICAR SUA LÓGICA FINAL:
|
||||
// Ex: setar um novo estado com os agendamentos filtrados, se for necessário:
|
||||
// setAgendamentosFiltrados(agendamentosDoMedico);
|
||||
|
||||
|
||||
} else {
|
||||
// Opcional: Limpar a lista filtrada se a busca não for mais única
|
||||
// setAgendamentosFiltrados([]);
|
||||
}
|
||||
|
||||
}, [FiltredTodosMedicos]);
|
||||
|
||||
|
||||
@ -160,27 +167,6 @@ const filtrarAgendamentosPorMedico = (dictAgendamentos, idMedicoFiltrado) => {
|
||||
|
||||
|
||||
|
||||
|
||||
// Dados da fila de espera (sem alteração)
|
||||
const filaEsperaData = [
|
||||
{ nome: 'Ricardo Pereira', email: 'ricardo.pereira@gmail.com', cpf: '444.777.666-55', telefone: '(79) 99123-4567', entrada: '25/09/2025 às 08:00' },
|
||||
{ nome: 'Ana Costa', email: 'ana.costa@gmail.com', cpf: '321.654.987-00', telefone: '(79) 97777-3333', entrada: '25/09/2025 às 08:30' },
|
||||
{ nome: 'Lucas Martins', email: 'lucas.martins@gmail.com', cpf: '777.666.555-33', telefone: '(79) 99654-3210', entrada: '25/09/2025 às 09:00' },
|
||||
{ nome: 'João Souza', email: 'joao.souza@gmail.com', cpf: '987.654.321-00', telefone: '(79) 98888-2222', entrada: '25/09/2025 às 14:00' },
|
||||
{ nome: 'Maria Silva', email: 'maria.silva@gmail.com', cpf: '123.456.789-00', telefone: '(79) 99999-1111', entrada: '25/09/2025 às 14:30' },
|
||||
{ nome: 'Fernanda Lima', email: 'fernanda.lima@gmail.com', cpf: '888.999.000-22', telefone: '(79) 98877-6655', entrada: '26/09/2025 às 09:30' },
|
||||
{ nome: 'Carlos Andrade', email: 'carlos.andrade@gmail.com', cpf: '222.555.888-11', telefone: '(79) 99876-5432', entrada: '26/09/2025 às 10:00' },
|
||||
{ nome: 'Juliana Oliveira', email: 'juliana.o@gmail.com', cpf: '111.222.333-44', telefone: '(79) 98765-1234', entrada: '26/09/2025 às 11:30' },
|
||||
];
|
||||
|
||||
// Filtro da fila de espera (sem alteração)
|
||||
const filteredFila = filaEsperaData.filter(item =>
|
||||
item.nome.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
item.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
item.cpf.includes(searchTerm) ||
|
||||
item.telefone.includes(searchTerm)
|
||||
);
|
||||
|
||||
// Lógica para filtrar os dados da AGENDA (AgendamentosMes)
|
||||
const filteredAgendamentos = useMemo(() => {
|
||||
if (!searchTerm.trim()) {
|
||||
@ -248,10 +234,14 @@ const handleSearchMedicos = (term) => {
|
||||
<div>
|
||||
<h1>Agendar nova consulta</h1>
|
||||
|
||||
<button onClick={() => navigate('/secretaria/form-disponibilidade')}>
|
||||
<button >
|
||||
Ir para Formulário de Disponibilidade
|
||||
</button>
|
||||
|
||||
<button onClick={() => setPageConsulta(true)}>
|
||||
Adcionar consulta
|
||||
</button>
|
||||
|
||||
{!PageNovaConsulta ? (
|
||||
<div className='atendimento-eprocura'>
|
||||
|
||||
@ -380,13 +370,13 @@ const handleSearchMedicos = (term) => {
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredFila.map((item, index) => (
|
||||
{filaEsperaData.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td>{item.nome}</td>
|
||||
<td>{item.email}</td>
|
||||
<td>{item.cpf}</td>
|
||||
<td>{item.telefone}</td>
|
||||
<td>{item.entrada}</td>
|
||||
<td> <p>{item.patientInfo[0].full_name} </p> </td>
|
||||
<td>{}</td>
|
||||
<td>{}</td>
|
||||
<td>{}</td>
|
||||
<td>{}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
|
||||
@ -23,9 +23,9 @@ const AgendamentoCadastroManager = () => {
|
||||
var raw = JSON.stringify({
|
||||
"patient_id": Dict.patient_id,
|
||||
"doctor_id": Dict.doctor_id,
|
||||
"scheduled_at": DataAtual,
|
||||
"scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
|
||||
"duration_minutes": 30,
|
||||
"appointment_type": "presencial",
|
||||
"appointment_type": Dict.tipo_consulta,
|
||||
"chief_complaint": "Dor de cabeça há 3 ",
|
||||
"patient_notes": "Prefiro horário pela manhã",
|
||||
"insurance_provider": "Unimed",
|
||||
|
||||
@ -104,7 +104,7 @@ function TableDoctor() {
|
||||
|
||||
fetch("https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/doctors", requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(result => setMedicos(result))
|
||||
.then(result => {setMedicos(result); console.log(result)})
|
||||
.catch(error => console.log('error', error));
|
||||
}, [isAuthenticated, getAuthorizationHeader]);
|
||||
|
||||
|
||||
@ -91,7 +91,7 @@
|
||||
background-color: #2c5e37;
|
||||
}
|
||||
|
||||
.legenda-item-confirmado{
|
||||
.legenda-item-confirmed{
|
||||
background-color: #1e90ff;
|
||||
}
|
||||
.legenda-item-cancelado{
|
||||
@ -102,7 +102,7 @@
|
||||
background-color: #f0ad4e;
|
||||
}
|
||||
|
||||
#status-card-consulta-realizado, .legenda-item-realizado {
|
||||
#status-card-consulta-completed, .legenda-item-realizado {
|
||||
background-color: #b7ffbd;
|
||||
border:3px solid #91d392;
|
||||
padding: 5px;
|
||||
@ -110,7 +110,7 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#status-card-consulta-cancelado, .legenda-item-cancelado {
|
||||
#status-card-consulta-cancelled, .legenda-item-cancelado {
|
||||
background-color: #ffb7cc;
|
||||
border:3px solid #ff6c84;
|
||||
padding: 5px;
|
||||
@ -118,7 +118,7 @@
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
#status-card-consulta-confirmado, .legenda-item-confirmed {
|
||||
#status-card-consulta-confirmed, .legenda-item-confirmed {
|
||||
background-color: #eef8fb;
|
||||
border:3px solid #d8dfe7;
|
||||
padding: 5px;
|
||||
@ -358,26 +358,18 @@ html[data-bs-theme="dark"] {
|
||||
#tabela-seletor-container i {
|
||||
pointer-events: none;
|
||||
}
|
||||
/* 1. Contêiner de Limitação de Largura e Posicionamento */
|
||||
/* Este é o elemento mais importante. Ele deve envolver o input e o dropdown. */
|
||||
|
||||
|
||||
.input-e-dropdown-wrapper {
|
||||
position: relative;
|
||||
|
||||
/* IMPORTANTE: Defina aqui a largura EXATA que você deseja para o input
|
||||
e para o dropdown. Na sua imagem, o input parece ter cerca de 300px ou mais.
|
||||
*/
|
||||
width: 350px; /* Ajuste este valor conforme a largura desejada do seu input */
|
||||
|
||||
/* Se o input original estava alinhado à direita (como na imagem),
|
||||
você pode precisar de um float ou margin para posicionar este wrapper.
|
||||
*/
|
||||
margin-left: auto; /* Exemplo para alinhar o wrapper à direita se for o caso */
|
||||
width: 350px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/* 2. Estilização da Área de Busca (Input) */
|
||||
/* Garante que o input utilize toda a largura do wrapper */
|
||||
.busca-atendimento {
|
||||
/* ... seus estilos de layout (flex, margin, etc.) para o busca-atendimento, se houver ... */
|
||||
|
||||
}
|
||||
|
||||
.busca-atendimento > div {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user