diff --git a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx index a3b60bf..5f8be3a 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoDia.jsx @@ -2,14 +2,31 @@ import React, { useState, useEffect } from 'react'; import CardConsulta from './CardConsulta'; import "./style/styleTabelas/tabeladia.css"; +import Spinner from '../Spinner'; + const TabelaAgendamentoDia = ({ agendamentos, setShowDeleteModal, setDictInfo,selectedID, setSelectedId, setShowConfirmModal, coresConsultas, setListaConsultaID, listaConsultasID }) => { - const [indiceAcesso, setIndiceAcesso] = useState(0) + const [indiceAcesso, setIndiceAcesso] = useState(null) const [Dia, setDia] = useState() const agendamentosDoDia = agendamentos?.semana1?.segunda || []; const nomeMedico = agendamentosDoDia.find(item => item.medico)?.medico || 'Profissional'; let ListaDiasComAgendamentos = Object.keys(agendamentos) + const [showSpinner, setShowSpinner] = useState(true); + + +useEffect(() => { + if (!agendamentos) return; + + const dias = Object.keys(agendamentos); + if (dias.length > 0) { + setIndiceAcesso(0); // começa no primeiro dia disponível + setDia(dias[0]); // seta o Dia inicial + + setShowSpinner(false) + } +}, [agendamentos]); + //console.log(Dia, "hshdhshhsdhs") @@ -76,6 +93,14 @@ const TabelaAgendamentoDia = ({ agendamentos, setShowDeleteModal, setDictInfo,se )})} + {showSpinner && + + + + + + } + diff --git a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx index 4e2a083..471b4ea 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoMes.jsx @@ -6,18 +6,23 @@ import "./style/styleTabelas/tabelames.css"; import { useEffect, useState } from 'react'; import { useMemo } from 'react'; +import Spinner from '../Spinner'; + const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModal, setSelectedId ,setDictInfo, setShowConfirmModal, coresConsultas ,setListaConsultaID, listaConsultasID }) => { const dataHoje = dayjs(); const AnoAtual = dataHoje.year(); const mes = dataHoje.month() + 1; + const [showSpinner, setShowSpinner] = useState(true) + + console.log(agendamentos) let ListaDiasDatas = ListarDiasdoMes(AnoAtual, mes); const [AgendamentosSemanaisOrganizados, setAgendamentosSemanaisOrganizados] = useState({}) - const [indice, setIndice] = useState("10") + const [indice, setIndice] = useState(mes.toString()) const [AgendamentosMensaisOrganizados, setAgendamentosMensaisOrganizados] = useState({ "01": { "nomeDoMes": "janeiro" }, @@ -35,15 +40,25 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModa }) + + useEffect(() => { + if (!agendamentos) return; + const meses = Object.keys(agendamentos); + if (meses.length > 0) { + // começa no primeiro dia disponível + setIndice(mes.toString()); // seta o Dia inicial + setShowSpinner(false) + } + }, [agendamentos]); + 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("-") @@ -218,8 +233,16 @@ const TabelaAgendamentoMes = ({ ListarDiasdoMes, agendamentos, setShowDeleteModa )) } - )})} + {showSpinner && + + + + + + + + } diff --git a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx index c7c71cf..fd2b531 100644 --- a/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx +++ b/src/components/AgendarConsulta/TabelaAgendamentoSemana.jsx @@ -4,6 +4,11 @@ import "./style/styleTabelas/tabelasemana.css"; import dayjs from 'dayjs'; import { useEffect, useState, useMemo } from 'react'; import weekOfYear from 'dayjs/plugin/weekOfYear' + + +import Spinner from '../Spinner'; + + dayjs.extend(weekOfYear) const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteModal ,setSelectedId ,setDictInfo, setShowConfirmModal, coresConsultas ,setListaConsultaID, listaConsultasID}) => { @@ -12,6 +17,21 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteM const [semanasOrganizadas, setSemanasOrganizadas] = useState({}); // Controla qual semana está sendo exibida (o índice da chave no objeto) const [Indice, setIndice] = useState(0); + const [showSpinner, setShowSpinner] = useState(true) + + + useEffect(() => { + if (!agendamentos) return; + + const semanas = Object.keys(agendamentos); + if (semanas.length > 0) { + + setIndice(0) + setShowSpinner(false) + + } + }, [agendamentos]); + console.log(agendamentos, "agendamentos diarios") @@ -129,10 +149,10 @@ const TabelaAgendamentoSemana = ({ agendamentos, ListarDiasdoMes, setShowDeleteM ? `Semana ${chaveDaSemanaAtual.replace('semana', '')} / ${AnoAtual}` : 'Nenhuma semana encontrada'; - // --- RENDERIZAÇÃO --- + return (
- {/* Container de Navegação */} +
diff --git a/src/components/Spinner.jsx b/src/components/Spinner.jsx new file mode 100644 index 0000000..610f606 --- /dev/null +++ b/src/components/Spinner.jsx @@ -0,0 +1,15 @@ +import React from 'react' + +const Spinner = () => { + return ( +
+
+
+ Carregando... +
+
+
+ ) +} + +export default Spinner \ No newline at end of file diff --git a/src/pages/Agendamento.jsx b/src/pages/Agendamento.jsx index 7db2b9a..25e469c 100644 --- a/src/pages/Agendamento.jsx +++ b/src/pages/Agendamento.jsx @@ -19,6 +19,8 @@ import "./style/Agendamento.css"; import './style/FilaEspera.css'; import { Search } from 'lucide-react'; +import Spinner from '../components/Spinner.jsx'; + @@ -48,14 +50,15 @@ const Agendamento = ({setDictInfo}) => { const [MedicoFiltrado, setMedicoFiltrado] = useState({id:"vazio"}) - const [cacheAgendamentos, setCacheAgendamentos] = useState([]) + const [cacheAgendamentos, setCacheAgendamentos] = useState([]) - const [showConfirmModal, setShowConfirmModal] = useState(false) - const [motivoCancelamento, setMotivoCancelamento] = useState("") + const [showConfirmModal, setShowConfirmModal] = useState(false) + const [motivoCancelamento, setMotivoCancelamento] = useState("") - const [listaConsultasID, setListaConsultaID] = useState([]) - const [coresConsultas,setCoresConsultas] = useState([]) + const [listaConsultasID, setListaConsultaID] = useState([]) + const [coresConsultas,setCoresConsultas] = useState([]) + const [showSpinner,setShowSpinner] = useState(true) let authHeader = getAuthorizationHeader() @@ -316,6 +319,9 @@ const handleSearchMedicos = (term) => { setFiltredTodosMedicos(filtered); }; +useEffect(() => { + setShowSpinner(false) +},[filaEsperaData]) return (
@@ -493,6 +499,15 @@ const handleSearchMedicos = (term) => {
))} + {showSpinner && + + + + + + + } +