Funcionalidade de editar e apagar e melhoria estilo
This commit is contained in:
jp-lima
parent
b07534bdc4
commit
edbb01e004
@ -4,7 +4,7 @@ import { useAuth } from '../utils/AuthProvider';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} ) => {
|
||||
const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal, setDictInfo, setSelectedId} ) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const {getAuthorizationHeader} = useAuth()
|
||||
@ -68,7 +68,12 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} )
|
||||
<div className='container-botons'>
|
||||
<button className="btn btn-sm btn-edit-custom"
|
||||
|
||||
onClick={() => {navigate(`${DadosConsulta.id}/edit`)}}
|
||||
onClick={() => {navigate(`2/edit`)
|
||||
setDictInfo({agendamento:DadosConsulta, Infos:{paciente_cpf:Paciente.cpf, paciente_nome:Paciente.full_name}})
|
||||
|
||||
|
||||
}}
|
||||
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i>
|
||||
</button>
|
||||
@ -79,7 +84,7 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento, setShowDeleteModal} )
|
||||
className="btn btn-sm btn-delete-custom"
|
||||
onClick={() => {
|
||||
console.log(DadosConsulta.id)
|
||||
//setSelectedPatientId(DadosConsulta.id);
|
||||
setSelectedId(DadosConsulta.id);
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
|
||||
@ -9,24 +9,26 @@ 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 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)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const FormatCPF = (valor) => {
|
||||
const digits = String(valor).replace(/\D/g, '').slice(0, 11);
|
||||
return digits
|
||||
@ -39,15 +41,28 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
||||
|
||||
const handleChange = (e) => {
|
||||
const {value, name} = e.target;
|
||||
console.log(value, name)
|
||||
console.log(value, name, agendamento)
|
||||
|
||||
if(name === 'email'){
|
||||
setAgendamento({...agendamento, contato:{
|
||||
...agendamento.contato,
|
||||
email:value
|
||||
}})
|
||||
|
||||
}else if(name === 'cpf'){
|
||||
}})}
|
||||
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 () => {
|
||||
@ -55,7 +70,7 @@ const FormNovaConsulta = ({ onCancel, onSave, setAgendamento, agendamento }) =>
|
||||
if (patientData) {
|
||||
setAgendamento((prev) => ({
|
||||
...prev,
|
||||
nome: patientData.full_name,
|
||||
pacinte_nome: patientData.full_name,
|
||||
patient_id: patientData.id
|
||||
}));
|
||||
}}
|
||||
@ -85,9 +100,9 @@ useEffect(() => {
|
||||
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",
|
||||
"doctor_id": agendamento.doctor_id,
|
||||
"start_date": agendamento.dataAtendimento,
|
||||
"end_date": `${agendamento.dataAtendimento}T23:59:59.999Z`,
|
||||
|
||||
});
|
||||
|
||||
@ -103,24 +118,19 @@ fetch("https://yuanqfswhberkoevtmfr.supabase.co/functions/v1/get-available-slots
|
||||
.then(result => {console.log(result); sethorariosDisponiveis(result)})
|
||||
.catch(error => console.log('error', error));
|
||||
|
||||
}, [])
|
||||
}, [agendamento.dataAtendimento, agendamento.doctor_id])
|
||||
|
||||
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())
|
||||
@ -133,26 +143,18 @@ const handleSearchProfissional = (e) => {
|
||||
|
||||
// FUNÇÃO PARA SELECIONAR UM ITEM DO DROPDOWN
|
||||
const handleSelectProfissional = async (profissional) => {
|
||||
|
||||
|
||||
setAgendamento(prev => ({
|
||||
...prev,
|
||||
doctor_id: profissional.id,
|
||||
nome_medico: profissional.full_name
|
||||
medico_nome: profissional.full_name
|
||||
}));
|
||||
|
||||
// 2. Fecha o dropdown
|
||||
// 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);
|
||||
};
|
||||
|
||||
@ -163,19 +165,12 @@ const formatarHora = (datetimeString) => {
|
||||
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, horarioInicio:horarioInicio})
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="form-container">
|
||||
|
||||
@ -187,13 +182,13 @@ const handleSubmit = (e) => {
|
||||
|
||||
<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}/>
|
||||
<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="nome" value={agendamento.nome} placeholder="Insira o nome do paciente" required onChange={handleChange} />
|
||||
<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">
|
||||
@ -220,9 +215,9 @@ const handleSubmit = (e) => {
|
||||
<label>Nome do profissional *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="nome_medico" // Use o nome correto da propriedade no estado `agendamento`
|
||||
name="medico_nome" // Use o nome correto da propriedade no estado `agendamento`
|
||||
onChange={handleSearchProfissional}
|
||||
value={agendamento.nome_medico}
|
||||
value={agendamento.medico_nome}
|
||||
autoComplete="off" // Ajuda a evitar o autocomplete nativo do navegador
|
||||
required
|
||||
/>
|
||||
@ -249,10 +244,15 @@ const handleSubmit = (e) => {
|
||||
<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">
|
||||
@ -301,6 +301,12 @@ const handleSubmit = (e) => {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* Dropdown de Término */}
|
||||
<div className="campo-de-input">
|
||||
<label htmlFor="termino">Término *</label>
|
||||
|
||||
@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
|
||||
import CardConsulta from './CardConsulta';
|
||||
import "./style/styleTabelas/tabeladia.css";
|
||||
|
||||
const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal }) => {
|
||||
const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDeleteModal, setDictInfo, setSelectedId }) => {
|
||||
const [indiceAcesso, setIndiceAcesso] = useState(0)
|
||||
const [Dia, setDia] = useState()
|
||||
const agendamentosDoDia = agendamentos?.semana1?.segunda || [];
|
||||
@ -24,7 +24,9 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
|
||||
<div>
|
||||
<div id='tabela-seletor-container'>
|
||||
<button onClick={() => {if(indiceAcesso === 0)return; else(setIndiceAcesso(indiceAcesso - 1))}}> <i className="bi bi-chevron-compact-left"></i></button>
|
||||
<p>{Dia}</p>
|
||||
|
||||
|
||||
<p>{Dia ? `${Dia?.split('-')[2]}/${Dia?.split('-')[1]}/${Dia?.split('-')[0]}`: ''}</p>
|
||||
<button onClick={() => {if(ListaDiasComAgendamentos.length - 1 === indiceAcesso)return; else(setIndiceAcesso(indiceAcesso + 1))}}> <i className="bi bi-chevron-compact-right"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,16 +39,21 @@ const TabelaAgendamentoDia = ({ handleClickAgendamento, agendamentos, setShowDel
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{agendamentos[Dia]?.map((agendamento, index) => (
|
||||
{agendamentos[Dia]?.map((agendamento, index) => {
|
||||
|
||||
let Data =agendamento.scheduled_at.split("T")
|
||||
let horario = Data[1].split(':')
|
||||
return(
|
||||
<tr key={index}>
|
||||
<td><p>{agendamento.horario}</p></td>
|
||||
|
||||
<td><p>{`${horario[0]}:${horario[1]}`}</p></td>
|
||||
<td className='mostrar-horario'>
|
||||
<div onClick={() => handleClickAgendamento(agendamento)}>
|
||||
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} />
|
||||
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId}/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
)})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -6,7 +6,7 @@ import "./style/styleTabelas/tabelames.css";
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
|
||||
const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModal, setSelectedId ,setDictInfo }) => {
|
||||
|
||||
const dataHoje = dayjs();
|
||||
const AnoAtual = dataHoje.year();
|
||||
@ -88,8 +88,6 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
|
||||
|
||||
useEffect(() => {
|
||||
console.log(OrganizarAgendamentosMensais)
|
||||
|
||||
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
@ -183,13 +181,13 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
|
||||
</div>
|
||||
</div>
|
||||
<table className='tabelamensal'>
|
||||
<thead>
|
||||
<thead>
|
||||
<tr>
|
||||
<td className='cabecalho-tabela'>Seg</td>
|
||||
<th>Ter</th>
|
||||
<th>Qua</th>
|
||||
<th>Qui</th>
|
||||
<th>Sex</th>
|
||||
<th className='cabecalho-tabela'>Segunda</th>
|
||||
<th>Terça</th>
|
||||
<th>Quarta</th>
|
||||
<th>Quinta</th>
|
||||
<th>Sexta</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@ -204,9 +202,9 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
|
||||
{
|
||||
semana && typeof semana === "object" && Object.keys(semana).map((dia) => (
|
||||
<td key={dia} >
|
||||
<CardConsulta DadosConsulta={((semana[dia]|| [])[0]) || {status:'vazio'}}/>
|
||||
<CardConsulta DadosConsulta={((semana[dia]|| [])[1]) || {status:'vazio'}}/>
|
||||
<CardConsulta DadosConsulta={((semana[dia]|| [])[2]) || {status:'vazio'}}/>
|
||||
<CardConsulta DadosConsulta={((semana[dia]|| [])[0]) || {status:'vazio'}} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>
|
||||
<CardConsulta DadosConsulta={((semana[dia]|| [])[1]) || {status:'vazio'}} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>
|
||||
<CardConsulta DadosConsulta={((semana[dia]|| [])[2]) || {status:'vazio'}} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>
|
||||
{semana[dia].length > 3 ? (
|
||||
<div>
|
||||
<p>{` +${semana[dia].length - 2}`}</p>
|
||||
|
||||
@ -6,7 +6,7 @@ import { useEffect, useState, useMemo } from 'react';
|
||||
import weekOfYear from 'dayjs/plugin/weekOfYear'
|
||||
dayjs.extend(weekOfYear)
|
||||
|
||||
const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes }) => {
|
||||
const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteModal ,setSelectedId ,setDictInfo}) => {
|
||||
|
||||
// Armazena o objeto COMPLETO das semanas organizadas
|
||||
const [semanasOrganizadas, setSemanasOrganizadas] = useState({});
|
||||
@ -164,31 +164,31 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes }) => {
|
||||
{/* Mapeamento de COLUNAS (dias) */}
|
||||
<td>
|
||||
{semanaParaRenderizar.segunda[indiceLinha]
|
||||
? <CardConsulta DadosConsulta={semanaParaRenderizar.segunda[indiceLinha]} />
|
||||
? <CardConsulta DadosConsulta={semanaParaRenderizar.segunda[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{semanaParaRenderizar.terça[indiceLinha]
|
||||
? <CardConsulta DadosConsulta={semanaParaRenderizar.terça[indiceLinha]} />
|
||||
? <CardConsulta DadosConsulta={semanaParaRenderizar.terça[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{semanaParaRenderizar.quarta[indiceLinha]
|
||||
? <CardConsulta DadosConsulta={semanaParaRenderizar.quarta[indiceLinha]} />
|
||||
? <CardConsulta DadosConsulta={semanaParaRenderizar.quarta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{semanaParaRenderizar.quinta[indiceLinha]
|
||||
? <CardConsulta DadosConsulta={semanaParaRenderizar.quinta[indiceLinha]} />
|
||||
? <CardConsulta DadosConsulta={semanaParaRenderizar.quinta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
{semanaParaRenderizar.sexta[indiceLinha]
|
||||
? <CardConsulta DadosConsulta={semanaParaRenderizar.sexta[indiceLinha]} />
|
||||
? <CardConsulta DadosConsulta={semanaParaRenderizar.sexta[indiceLinha]} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />
|
||||
: null
|
||||
}
|
||||
</td>
|
||||
|
||||
@ -340,4 +340,53 @@ html[data-bs-theme="dark"] svg {
|
||||
.tipo_atendimento{
|
||||
margin-left: 3rem;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 1. Estilização Básica e Tamanho (Estado Padrão - Antes de Clicar) */
|
||||
.checkbox-customs {
|
||||
/* Remove a aparência padrão do navegador/Bootstrap */
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
|
||||
/* Define o tamanho desejado */
|
||||
width: 1.2rem; /* Ajuste conforme o seu gosto (ex: 1.2rem = 19.2px) */
|
||||
height: 1.2rem;
|
||||
|
||||
/* Define o visual "branco com borda preta" */
|
||||
background-color: #fff; /* Fundo branco */
|
||||
border: 1px solid #000; /* Borda preta de 1px */
|
||||
border-radius: 0.25rem; /* Borda levemente arredondada (opcional, imita Bootstrap) */
|
||||
|
||||
/* Centraliza o 'check' (quando aparecer) */
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer; /* Indica que é clicável */
|
||||
|
||||
/* Adiciona a transição suave */
|
||||
transition: all 0.5s ease; /* Transição em 0.5 segundos para todas as propriedades */
|
||||
}
|
||||
|
||||
/* 2. Estilização no Estado Clicado (:checked) */
|
||||
.checkbox-customs:checked {
|
||||
/* Quando clicado, mantém o fundo branco (se quiser mudar, altere aqui) */
|
||||
background-color: #fff;
|
||||
|
||||
/* Se você quiser que a borda mude de cor ao clicar, altere aqui. */
|
||||
/* border-color: #007bff; */ /* Exemplo: borda azul */
|
||||
}
|
||||
|
||||
/* 3. Ocultar o 'Check' Padrão e Criar um Check Customizado */
|
||||
/* O Bootstrap/Navegador insere um ícone de 'check'. Vamos controlá-lo com background-image. */
|
||||
.checkbox-customs:checked {
|
||||
/* Este código do Bootstrap usa um SVG para o ícone de 'check' */
|
||||
/* Aqui, estamos forçando o ícone de 'check' a ser preto para combinar com a borda preta. */
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
|
||||
|
||||
/* Garante que o ícone fique centralizado e preencha o espaço */
|
||||
background-size: 100% 100%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
@ -18,7 +18,7 @@
|
||||
/* Cabeçalho */
|
||||
.tabelamensal thead th {
|
||||
background-color: #0078d7;
|
||||
color: #0078d7;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
border-bottom: 2px solid #0078d7; /* borda inferior mais forte no cabeçalho */
|
||||
}
|
||||
|
||||
@ -21,9 +21,10 @@ import { Search } from 'lucide-react';
|
||||
|
||||
|
||||
|
||||
const Agendamento = () => {
|
||||
const Agendamento = ({setDictInfo}) => {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [selectedID, setSelectedId] = useState('0')
|
||||
const [filaEsperaData, setfilaEsperaData] = useState([])
|
||||
const [FiladeEspera, setFiladeEspera] = useState(false);
|
||||
const [tabela, setTabela] = useState('diario');
|
||||
@ -43,55 +44,78 @@ const Agendamento = () => {
|
||||
|
||||
let authHeader = getAuthorizationHeader()
|
||||
|
||||
const FiltrarAgendamentos = async (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)
|
||||
// Assumindo que GetDoctorByID e GetPatientByID estão definidos no seu escopo
|
||||
let medico = await GetDoctorByID(doctor_id, authHeader);
|
||||
let paciente = await GetPatientByID(patient_id, authHeader);
|
||||
|
||||
let dicionario = {patientInfo:paciente, doctorInfo:medico, agendamentoInfo:agendamento}
|
||||
|
||||
let dicionario = {
|
||||
agendamento: agendamento,
|
||||
Infos: {
|
||||
nome_nedico: medico.full_name,
|
||||
doctor_id: medico.id,
|
||||
patient_id: paciente[0].id,
|
||||
paciente_nome: paciente[0].full_name,
|
||||
paciente_cpf: paciente[0].cpf
|
||||
}
|
||||
};
|
||||
return dicionario;
|
||||
};
|
||||
|
||||
return dicionario
|
||||
let DictAgendamentosOrganizados = {};
|
||||
let ListaFilaDeEspera = [];
|
||||
|
||||
// 1. Agrupamento (igual ao seu código original)
|
||||
for (const agendamento of listaTodosAgendamentos) {
|
||||
if (agendamento.status === 'requested') {
|
||||
// Recomenda-se usar Promise.all para melhorar a performance
|
||||
// mas, para manter a estrutura, mantemos o await no loop.
|
||||
let v = await ConfigurarFiladeEspera(agendamento.patient_id, agendamento.doctor_id, agendamento);
|
||||
ListaFilaDeEspera.push(v);
|
||||
} else {
|
||||
const DiaAgendamento = agendamento.scheduled_at.split("T")[0];
|
||||
|
||||
if (DiaAgendamento in DictAgendamentosOrganizados) {
|
||||
DictAgendamentosOrganizados[DiaAgendamento].push(agendamento);
|
||||
} else {
|
||||
DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
// ----------------------------------------------------------------------
|
||||
// 2. Ordenação Interna: Ordenar os agendamentos por HORÁRIO (do menor para o maior)
|
||||
for (const DiaAgendamento in DictAgendamentosOrganizados) {
|
||||
DictAgendamentosOrganizados[DiaAgendamento].sort((a, b) => {
|
||||
// Compara as strings de data/hora (ISO 8601) diretamente,
|
||||
// que funcionam para ordenação cronológica.
|
||||
if (a.scheduled_at < b.scheduled_at) return -1;
|
||||
if (a.scheduled_at > b.scheduled_at) return 1;
|
||||
return 0;
|
||||
});
|
||||
}
|
||||
|
||||
else{
|
||||
const DiaAgendamento = agendamento.scheduled_at.split("T")[0];
|
||||
// ----------------------------------------------------------------------
|
||||
// 3. Ordenação Externa: Ordenar os DIAS (as chaves do objeto)
|
||||
// Para garantir que as chaves fiquem na sequência cronológica correta.
|
||||
|
||||
//console.log(DictAgendamentosOrganizados)
|
||||
// Pega as chaves (datas)
|
||||
const chavesOrdenadas = Object.keys(DictAgendamentosOrganizados).sort((a, b) => {
|
||||
// Compara as chaves de data (strings 'YYYY-MM-DD')
|
||||
if (a < b) return -1;
|
||||
if (a > b) return 1;
|
||||
return 0;
|
||||
});
|
||||
|
||||
if (DiaAgendamento in DictAgendamentosOrganizados) {
|
||||
// já existe a data → adiciona na lista
|
||||
DictAgendamentosOrganizados[DiaAgendamento].push(agendamento);
|
||||
} else {
|
||||
// não existe → cria nova key com uma lista
|
||||
DictAgendamentosOrganizados[DiaAgendamento] = [agendamento];
|
||||
}}
|
||||
}
|
||||
|
||||
|
||||
setAgendamentosOrganizados(DictAgendamentosOrganizados);
|
||||
setfilaEsperaData(ListaFilaDeEspera)
|
||||
|
||||
}
|
||||
// Cria um novo objeto no formato desejado, garantindo a ordem das chaves
|
||||
let DictAgendamentosFinal = {};
|
||||
for (const data of chavesOrdenadas) {
|
||||
DictAgendamentosFinal[data] = DictAgendamentosOrganizados[data];
|
||||
}
|
||||
setAgendamentosOrganizados(DictAgendamentosFinal); // Use o objeto final ordenado
|
||||
setfilaEsperaData(ListaFilaDeEspera);
|
||||
};
|
||||
|
||||
// Requisição inicial para mostrar os agendamentos do banco de dados
|
||||
useEffect(() => {
|
||||
@ -141,7 +165,25 @@ const Agendamento = () => {
|
||||
}
|
||||
}, [FiltredTodosMedicos]);
|
||||
|
||||
const deleteConsulta = (selectedPatientId) => {
|
||||
console.log("tentando apagar")
|
||||
var myHeaders = new Headers();
|
||||
myHeaders.append("Authorization", authHeader);
|
||||
myHeaders.append("apikey", API_KEY)
|
||||
|
||||
var requestOptions = {
|
||||
method: 'DELETE',
|
||||
redirect: 'follow',
|
||||
headers: myHeaders
|
||||
};
|
||||
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${selectedPatientId}`, requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Filtra todos os agendamentos em um objeto aninhado (data -> [agendamentos])
|
||||
@ -340,9 +382,9 @@ const handleSearchMedicos = (term) => {
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} />}
|
||||
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes}/>}
|
||||
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} />}
|
||||
{tabela === "diario" && <TabelaAgendamentoDia handleClickAgendamento={handleClickAgendamento} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />}
|
||||
{tabela === 'semanal' && <TabelaAgendamentoSemana agendamentos={DictAgendamentosOrganizados} ListarDiasdoMes={ListarDiasdoMes} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo}/>}
|
||||
{tabela === 'mensal' && <TabelaAgendamentoMes ListarDiasdoMes={ListarDiasdoMes} aplicarCores={true} agendamentos={DictAgendamentosOrganizados} setShowDeleteModal={setShowDeleteModal} setSelectedId={setSelectedId} setDictInfo={setDictInfo} />}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@ -363,20 +405,43 @@ const handleSearchMedicos = (term) => {
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Nome</th>
|
||||
<th>Email</th>
|
||||
<th>CPF</th>
|
||||
<th>Telefone</th>
|
||||
|
||||
<th>Telefone</th>
|
||||
<th>Entrou na fila de espera</th>
|
||||
<th>Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filaEsperaData.map((item, index) => (
|
||||
<tr key={index}>
|
||||
<td> <p>{item.patientInfo[0].full_name} </p> </td>
|
||||
<td>{}</td>
|
||||
<td>{}</td>
|
||||
<td> <p>{item.Infos?.paciente_nome} </p> </td>
|
||||
<td><p>{} </p></td>
|
||||
<td>{}</td>
|
||||
<td>{}</td>
|
||||
<td> <div className="d-flex gap-2">
|
||||
|
||||
<button className="btn btn-sm btn-edit"
|
||||
onClick={() => {
|
||||
console.log(item, 'item')
|
||||
navigate(`${2}/edit`)
|
||||
setDictInfo(item)
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-pencil me-1"></i> Editar
|
||||
</button>
|
||||
|
||||
|
||||
<button
|
||||
className="btn btn-sm btn-delete"
|
||||
onClick={() => {
|
||||
setSelectedId(item.agendamento.id)
|
||||
setShowDeleteModal(true);
|
||||
}}
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
</button>
|
||||
</div></td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
@ -418,7 +483,7 @@ const handleSearchMedicos = (term) => {
|
||||
|
||||
<div className="modal-body">
|
||||
<p className="mb-0 fs-5">
|
||||
Tem certeza que deseja excluir este paciente?
|
||||
Tem certeza que deseja excluir este agendamento?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -436,7 +501,8 @@ const handleSearchMedicos = (term) => {
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-danger"
|
||||
//onClick={() => deletePatient(selectedPatientId)}
|
||||
onClick={() => {deleteConsulta(selectedID);setShowDeleteModal(false)}}
|
||||
|
||||
>
|
||||
<i className="bi bi-trash me-1"></i> Excluir
|
||||
</button>
|
||||
|
||||
@ -2,17 +2,33 @@ import React from 'react'
|
||||
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta'
|
||||
import API_KEY from '../components/utils/apiKeys'
|
||||
import { useAuth } from '../components/utils/AuthProvider'
|
||||
import { useState } from 'react'
|
||||
import { useEffect,useState } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
import { UserInfos } from '../components/utils/Functions-Endpoints/General'
|
||||
const AgendamentoCadastroManager = () => {
|
||||
|
||||
const {getAuthorizationHeader} = useAuth()
|
||||
const [agendamento, setAgendamento] = useState({})
|
||||
|
||||
const [agendamento, setAgendamento] = useState({status:'confirmed'})
|
||||
const [idUsuario, setIDusuario] = useState('0')
|
||||
|
||||
let authHeader = getAuthorizationHeader()
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
const ColherInfoUsuario =async () => {
|
||||
const result = await UserInfos(authHeader)
|
||||
|
||||
setIDusuario(result?.profile?.id)
|
||||
|
||||
}
|
||||
ColherInfoUsuario()
|
||||
|
||||
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
const handleSave = (Dict) => {
|
||||
let DataAtual = dayjs()
|
||||
var myHeaders = new Headers();
|
||||
@ -26,10 +42,11 @@ const AgendamentoCadastroManager = () => {
|
||||
"scheduled_at": `${Dict.dataAtendimento}T${Dict.horarioInicio}:00.000Z`,
|
||||
"duration_minutes": 30,
|
||||
"appointment_type": Dict.tipo_consulta,
|
||||
"chief_complaint": "Dor de cabeça há 3 ",
|
||||
|
||||
"patient_notes": "Prefiro horário pela manhã",
|
||||
"insurance_provider": "Unimed",
|
||||
"created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105"
|
||||
"insurance_provider": Dict.convenio,
|
||||
"status": Dict.status,
|
||||
"created_by": idUsuario
|
||||
});
|
||||
|
||||
var requestOptions = {
|
||||
|
||||
@ -1,23 +1,42 @@
|
||||
import React from 'react'
|
||||
import FormNovaConsulta from '../components/AgendarConsulta/FormNovaConsulta'
|
||||
import { useState } from 'react'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import API_KEY from '../components/utils/apiKeys'
|
||||
import { useAuth } from '../components/utils/AuthProvider'
|
||||
import dayjs from 'dayjs'
|
||||
import { UserInfos } from '../components/utils/Functions-Endpoints/General'
|
||||
|
||||
const AgendamentoEditPage = ({setDictInfo, DictInfo}) => {
|
||||
|
||||
const AgendamentoEditPage = () => {
|
||||
|
||||
let DataAtual = dayjs()
|
||||
const [idUsuario, setIDusuario] = useState('0')
|
||||
//let DataAtual = dayjs()
|
||||
const {getAuthorizationHeader} = useAuth()
|
||||
const params = useParams()
|
||||
const [PatientToPatch, setPatientToPatch] = useState({})
|
||||
|
||||
let id = params.id
|
||||
|
||||
console.log(id)
|
||||
//console.log(DictInfo, 'aqui')
|
||||
|
||||
useEffect(() => {
|
||||
setDictInfo({...DictInfo?.Infos,...DictInfo?.agendamento})
|
||||
|
||||
|
||||
const ColherInfoUsuario =async () => {
|
||||
const result = await UserInfos(authHeader)
|
||||
|
||||
setIDusuario(result?.profile?.id)
|
||||
|
||||
}
|
||||
ColherInfoUsuario()
|
||||
|
||||
|
||||
|
||||
}, [])
|
||||
|
||||
|
||||
|
||||
let authHeader = getAuthorizationHeader()
|
||||
|
||||
const handleSave = (DictParaPatch) => {
|
||||
@ -30,13 +49,21 @@ const AgendamentoEditPage = () => {
|
||||
|
||||
var raw = JSON.stringify({"patient_id": DictParaPatch.patient_id,
|
||||
"doctor_id": DictParaPatch.doctor_id,
|
||||
"scheduled_at": DataAtual,
|
||||
|
||||
"duration_minutes": 30,
|
||||
"appointment_type": "presencial",
|
||||
|
||||
"chief_complaint": "Dor de cabeça há 3 ",
|
||||
|
||||
"created_by": idUsuario,
|
||||
|
||||
"scheduled_at": `${DictParaPatch.dataAtendimento}T${DictParaPatch.horarioInicio}:00.000Z`,
|
||||
|
||||
"appointment_type": DictParaPatch.tipo_consulta,
|
||||
|
||||
"patient_notes": "Prefiro horário pela manhã",
|
||||
"insurance_provider": "Unimed",
|
||||
"created_by": "87f2662c-9da7-45c0-9e05-521d9d92d105"
|
||||
"insurance_provider": DictParaPatch.convenio,
|
||||
"status": DictParaPatch.status,
|
||||
"created_by": idUsuario
|
||||
|
||||
|
||||
});
|
||||
@ -51,7 +78,7 @@ const AgendamentoEditPage = () => {
|
||||
redirect: 'follow'
|
||||
};
|
||||
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${id}`, requestOptions)
|
||||
fetch(`https://yuanqfswhberkoevtmfr.supabase.co/rest/v1/appointments?id=eq.${DictInfo.id}`, requestOptions)
|
||||
.then(response => response.text())
|
||||
.then(result => console.log(result))
|
||||
.catch(error => console.log('error', error));
|
||||
@ -60,7 +87,7 @@ const AgendamentoEditPage = () => {
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FormNovaConsulta onSave={handleSave} agendamento={PatientToPatch} setAgendamento={setPatientToPatch}/>
|
||||
<FormNovaConsulta onSave={handleSave} agendamento={DictInfo} setAgendamento={setDictInfo}/>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
//import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
|
||||
import { Routes, Route } from "react-router-dom";
|
||||
|
||||
import { useState } from "react";
|
||||
import Sidebar from "../../components/Sidebar";
|
||||
import FinanceiroDashboard from "../../pages/FinanceiroDashboard";
|
||||
import SecretariaItems from "../../data/sidebar-items-secretaria.json";
|
||||
@ -19,6 +19,7 @@ import FormDisponibilidade from "../../components/AgendarConsulta/FormDisponibil
|
||||
import AgendamentoEditPage from "../../pages/AgendamentoEditPage";
|
||||
|
||||
function PerfilSecretaria({ onLogout }) {
|
||||
const [DictInfo, setDictInfo] = useState({})
|
||||
return (
|
||||
// <Router>
|
||||
<div id="app" className="active">
|
||||
@ -34,8 +35,8 @@ function PerfilSecretaria({ onLogout }) {
|
||||
<Route path="pacientes/:id/edit" element={<EditPage />} />
|
||||
<Route path="medicos/:id" element={<DoctorDetails />} />
|
||||
<Route path="medicos/:id/edit" element={<DoctorEditPage />} />
|
||||
<Route path="agendamento" element={<Agendamento />} />
|
||||
<Route path="agendamento/:id/edit" element={<AgendamentoEditPage/>} />
|
||||
<Route path="agendamento" element={<Agendamento setDictInfo={setDictInfo}/>} />
|
||||
<Route path="agendamento/:id/edit" element={<AgendamentoEditPage setDictInfo={setDictInfo} DictInfo={DictInfo}/>} />
|
||||
<Route path="laudo" element={<LaudoManager />} />
|
||||
<Route path="*" element={<h2>Página não encontrada</h2>} />
|
||||
<Route path="form-disponibilidade" element={<FormDisponibilidade />} />
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user