diff --git a/src/components/AgendarConsulta/CardConsulta.jsx b/src/components/AgendarConsulta/CardConsulta.jsx index f0cdd46..accb6cc 100644 --- a/src/components/AgendarConsulta/CardConsulta.jsx +++ b/src/components/AgendarConsulta/CardConsulta.jsx @@ -17,16 +17,18 @@ const CardConsulta = ( {DadosConsulta, TabelaAgendamento} ) => { // Status (agendado, confirmado, realizado, cancelado) useEffect(() => { - BuscarMedicoEPaciente() + if(DadosConsulta.status !== 'nada'){BuscarMedicoEPaciente()} + }, []) + return ( -
+
console.log('Clicou n aconsulta')}> {DadosConsulta.status !== 'vazio'?
-

{DadosConsulta.horario}|GEAP| {Medico?.full_name}

+

{DadosConsulta.horario} {Medico?.full_name}

diff --git a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx index 7e40408..616c401 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx @@ -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 (
+
+ +

{AgendamentosMensaisOrganizados[indice].nomeDoMes}

+ + +
+ @@ -32,105 +192,36 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos }) => { - {agendamentos && Object.entries(agendamentos).map(([semana, dias], index) => ( - - {/* Coluna de Segunda-feira */} - + {Object.keys(AgendamentosMensaisOrganizados[indice]).map((semanaKey) => { + const semana = AgendamentosMensaisOrganizados[indice][semanaKey] + console.log(AgendamentosMensaisOrganizados[indice][semanaKey], 'ajdsahchbaohdfoduh') - {/* Coluna de Terça-feira */} - + - {/* Coluna de Quarta-feira */} - + - {/* Coluna de Quinta-feira */} - + return( + + + { + semana && typeof semana === "object" && Object.keys(semana).map((dia) => ( + - - ))} - + ): null } + + )) + } + + + )})} +
-
-

{segundas[index]}

-
- {(dias.segunda || []).slice(0, 3).map((consulta, idx) => ( - - ))} -
- {(dias.segunda || []).length > 3 ? -

+ {(dias.segunda || []).length - 3}

- : null} -
-
-
-

{tercas[index]}

-
- {(dias.terca || []).slice(0, 3).map((consulta, idx) => ( - - ))} -
- {(dias.terca || []).length > 3 ? -

+ {(dias.terca || []).length - 3}

- : null} -
-
-
-

{quartas[index]}

-
- {(dias.quarta || []).slice(0, 3).map((consulta, idx) => ( - - ))} -
- {(dias.quarta || []).length > 3 ? -

+ {(dias.quarta || []).length - 3}

- : null} -
-
-
-

{quintas[index]}

-
- {(dias.quinta || []).slice(0, 3).map((consulta, idx) => ( - - ))} -
- {(dias.quinta || []).length > 3 ? -

+ {(dias.quinta || []).length - 3}

- : null} -
-
console.log('Clicou n aconsulta')}> + + + + {semana[dia].length > 3 ? ( +
+

{` +${semana[dia].length - 2}`}

+
- {/* Coluna de Sexta-feira */} -
-
-

{sextas[index]}

-
- {(dias.sexta || []).slice(0, 3).map((consulta, idx) => ( - - ))} -
- {(dias.sexta || []).length > 3 ? -

+ {(dias.sexta || []).length - 3}

- : null} -
-
) diff --git a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css index 5fbe05c..b63f5e1 100644 --- a/src/components/AgendarConsulta/style/styleTabelas/tabelames.css +++ b/src/components/AgendarConsulta/style/styleTabelas/tabelames.css @@ -219,4 +219,8 @@ html[data-bs-theme="dark"] .usuario-default { html[data-bs-theme="dark"] .cards-que-faltam { color: #90caf9; +} + +th{ + color: white; } \ No newline at end of file