RiseUP/riseup-squad23
4
1
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalização das agendas

Browse Source
This commit is contained in:
jp-lima 2025-10-15 09:34:32 -03:00
parent 39a78db8c5
commit cc37ea60da
3 changed files with 201 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/AgendarConsulta/CardConsulta.jsx
View File

@ -17,16 +17,18 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento} ) => {
// Status (agendado, confirmado, realizado, cancelado)
useEffect(() => {
BuscarMedicoEPaciente()
if(DadosConsulta.status !== 'nada'){BuscarMedicoEPaciente()}
}, [])
return (
<div className={`container-cardconsulta-${TabelaAgendamento}`}>
<div className={`container-cardconsulta-${TabelaAgendamento}`} onClick={() => console.log('Clicou n aconsulta')}>
{DadosConsulta.status !== 'vazio'?
<div className='cardconsulta' id={`status-card-consulta-${DadosConsulta.status}`}>
<section className='cardconsulta-infosecundaria'>
<p>{DadosConsulta.horario}|GEAP| {Medico?.full_name}</p>
<p>{DadosConsulta.horario} {Medico?.full_name}</p>
</section>
<section className='cardconsulta-infoprimaria'>

293
src/components/AgendarConsulta/TabelaAgendamentoMes.jsx
View File

@ -3,7 +3,8 @@ import React from 'react';
import dayjs from "dayjs";
import CardConsulta from './CardConsulta';
import "./style/styleTabelas/tabelames.css";
import { useEffect, useState } from 'react';
import { useMemo } from 'react';
const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
@ -12,15 +13,174 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
const mes = dataHoje.month() + 1;
let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes);
const [AgendamentosSemanaisOrganizados, setAgendamentosSemanaisOrganizados] = useState({})
const [indice, setIndice] = useState("10")
let segundas = ListaDiasDatas[0];
let tercas = ListaDiasDatas[1];
let quartas = ListaDiasDatas[2];
let quintas = ListaDiasDatas[3];
let sextas = ListaDiasDatas[4];
const [AgendamentosMensaisOrganizados, setAgendamentosMensaisOrganizados] = useState({
"01": { "nomeDoMes": "janeiro" },
"02": { "nomeDoMes": "fevereiro" },
"03": { "nomeDoMes": "março" },
"04": { "nomeDoMes": "abril" },
"05": { "nomeDoMes": "maio" },
"06": { "nomeDoMes": "junho" },
"07": { "nomeDoMes": "julho" },
"08": { "nomeDoMes": "agosto" },
"09": { "nomeDoMes": "setembro" },
"10": { "nomeDoMes": "outubro" },
"11": { "nomeDoMes": "novembro" },
"12": { "nomeDoMes": "dezembro" }
})
const OrganizarAgendamentosSemanais = useMemo(() => {
if (!agendamentos || Object.keys(agendamentos).length === 0) return {};
const DiasComAtendimentos = Object.keys(agendamentos)
const semanas = {}
for (let i = 0; i < DiasComAtendimentos.length; i++) {
const DiaComAtendimento = DiasComAtendimentos[i]
const [_, MesDoAgendamento, DiaDoAgendamento] = DiaComAtendimento.split("-")
const data = dayjs(`${AnoAtual}-${MesDoAgendamento}-${DiaDoAgendamento}`)
const diaSemana = data.format('dddd')
const semanaKey = `semana${data.week()}`
if (!semanas[semanaKey]) {
semanas[semanaKey] = {
segunda: [], terça: [], quarta: [], quinta: [], sexta: []
}
}
switch (diaSemana) {
case 'Monday':
semanas[semanaKey].segunda.push(...agendamentos[DiaComAtendimento])
break
case 'Tuesday':
semanas[semanaKey].terça.push(...agendamentos[DiaComAtendimento])
break
case 'Wednesday':
semanas[semanaKey].quarta.push(...agendamentos[DiaComAtendimento])
break
case 'Thursday':
semanas[semanaKey].quinta.push(...agendamentos[DiaComAtendimento])
break
case 'Friday':
semanas[semanaKey].sexta.push(...agendamentos[DiaComAtendimento])
break
default:
break
}
}
return semanas
}, [agendamentos, AnoAtual])
useEffect(() => {
setAgendamentosSemanaisOrganizados(OrganizarAgendamentosSemanais);
// NOTA: Ao carregar, o Indice é 0, que é a primeira semana.
}, [OrganizarAgendamentosSemanais])
useEffect(() => {
console.log(OrganizarAgendamentosMensais)
}, [])
useEffect(() => {
console.log(AgendamentosMensaisOrganizados, 'aqui os agendamentos mensais')
}, [AgendamentosMensaisOrganizados])
const OrganizarAgendamentosMensais = useMemo(() => {
if (!AgendamentosSemanaisOrganizados || Object.keys(AgendamentosSemanaisOrganizados).length === 0)
return;
// Cria uma cópia local do estado atual
const novoEstado = { ...AgendamentosMensaisOrganizados };
const indices = Object.keys(AgendamentosSemanaisOrganizados);
for (let i = 0; i < indices.length; i++) {
const DictSemanais = AgendamentosSemanaisOrganizados[indices[i]];
const indicesDictSemanais = Object.keys(DictSemanais);
for (let d = 0; d < indicesDictSemanais.length; d++) {
const lista = DictSemanais[indicesDictSemanais[d]];
if (lista.length > 0) {
const [_, mesDaConsulta] = lista[0].scheduled_at.split("-");
// Cria o mês se ainda não existir
if (!novoEstado[mesDaConsulta]) {
novoEstado[mesDaConsulta] = {
nomeDoMes: AgendamentosMensaisOrganizados[mesDaConsulta]?.nomeDoMes || "",
};
}
// Garante que a semana existe
novoEstado[mesDaConsulta][indices[i]] = {
...novoEstado[mesDaConsulta][indices[i]],
...DictSemanais,
};
}
}
}
// Faz o set de uma vez só
setAgendamentosMensaisOrganizados(novoEstado);
}, [AgendamentosSemanaisOrganizados]);
const AvançarMes = () => {
let Indice = parseInt(indice)
Indice += 1
console.log(Indice)
if(Indice < 10){
Indice = "0" + Indice.toString()
console.log(Indice)
}
if(Indice === 13){
return
}else{
setIndice(Indice)
}
}
const VoltarMes = () => {
let Indice = parseInt(indice)
Indice -= 1
console.log(Indice)
if(Indice < 10){
Indice = "0" + Indice.toString()
console.log(Indice)
}
if(Indice === "00"){
return
}else{
setIndice(Indice)
}
}
return (
<div>
<div>
<button onClick={() => VoltarMes()}>voltar</button>
<p>{AgendamentosMensaisOrganizados[indice].nomeDoMes}</p>
<button onClick={() => AvançarMes()}>Avançar</button>
</div>
<table className='tabelamensal'>
<thead>
<tr>
@ -32,105 +192,36 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => {
</tr>
</thead>
<tbody>
{agendamentos && Object.entries(agendamentos).map(([semana, dias], index) => (
<tr key={index}>
{/* Coluna de Segunda-feira */}
<td>
<div>
<p>{segundas[index]}</p>
<div>
{(dias.segunda || []).slice(0, 3).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</div>
{(dias.segunda || []).length > 3 ?
<div><p className='cards-que-faltam'>+ {(dias.segunda || []).length - 3}</p></div>
: null}
</div>
</td>
{Object.keys(AgendamentosMensaisOrganizados[indice]).map((semanaKey) => {
const semana = AgendamentosMensaisOrganizados[indice][semanaKey]
console.log(AgendamentosMensaisOrganizados[indice][semanaKey], 'ajdsahchbaohdfoduh')
{/* Coluna de Terça-feira */}
<td>
<div>
<p>{tercas[index]}</p>
<div>
{(dias.terca || []).slice(0, 3).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</div>
{(dias.terca || []).length > 3 ?
<div><p className='cards-que-faltam'>+ {(dias.terca || []).length - 3}</p></div>
: null}
</div>
</td>
{/* Coluna de Quarta-feira */}
<td>
<div>
<p>{quartas[index]}</p>
<div>
{(dias.quarta || []).slice(0, 3).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</div>
{(dias.quarta || []).length > 3 ?
<div><p className='cards-que-faltam'>+ {(dias.quarta || []).length - 3}</p></div>
: null}
</div>
</td>
{/* Coluna de Quinta-feira */}
<td>
<div>
<p>{quintas[index]}</p>
<div>
{(dias.quinta || []).slice(0, 3).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</div>
{(dias.quinta || []).length > 3 ?
<div><p className='cards-que-faltam'>+ {(dias.quinta || []).length - 3}</p></div>
: null}
</div>
</td>
return(
<tr key={semanaKey}>
{
semana && typeof semana === "object" && Object.keys(semana).map((dia) => (
<td key={dia} onClick={() => console.log('Clicou n aconsulta')}>
<CardConsulta DadosConsulta={((semana[dia]|| [])[0]) || {status:'vazio'}}/>
<CardConsulta DadosConsulta={((semana[dia]|| [])[1]) || {status:'vazio'}}/>
<CardConsulta DadosConsulta={((semana[dia]|| [])[2]) || {status:'vazio'}}/>
{semana[dia].length > 3 ? (
<div>
<p>{` +${semana[dia].length - 2}`}</p>
</div>
{/* Coluna de Sexta-feira */}
<td>
<div>
<p>{sextas[index]}</p>
<div>
{(dias.sexta || []).slice(0, 3).map((consulta, idx) => (
<CardConsulta
key={idx}
DadosConsulta={consulta}
className={`usuario-${consulta.cor || "default"}`}
/>
))}
</div>
{(dias.sexta || []).length > 3 ?
<div><p className='cards-que-faltam'>+ {(dias.sexta || []).length - 3}</p></div>
: null}
</div>
</td>
</tr>
))}
</tbody>
): null }
</td>
))
}
</tr>
)})}
</tbody>
</table>
</div>
)

4
src/components/AgendarConsulta/style/styleTabelas/tabelames.css
View File

@ -219,4 +219,8 @@ html[data-bs-theme="dark"] .usuario-default {
html[data-bs-theme="dark"] .cards-que-faltam {
color: #90caf9;
}
th{
color: white;
}