forked from RiseUP/riseup-squad23
110 lines
3.5 KiB
JavaScript
110 lines
3.5 KiB
JavaScript
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(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")
|
|
|
|
useEffect(() => {
|
|
setDia(ListaDiasComAgendamentos[indiceAcesso])
|
|
}, [indiceAcesso])
|
|
|
|
const formatarDataComDia = (dataISO) => {
|
|
if (!dataISO) return '';
|
|
|
|
const data = new Date(dataISO); // converte para objeto Date
|
|
|
|
// nomes dos dias da semana
|
|
const dias = [
|
|
'Segunda-feira',
|
|
'Terça-feira',
|
|
'Quarta-feira',
|
|
'Quinta-feira',
|
|
'Sexta-feira',
|
|
'Sábado'
|
|
];
|
|
const diaSemana = dias[data.getDay()]; // 0 = Domingo, 1 = Segunda, etc.
|
|
|
|
const dia = dataISO.split('-')[2];
|
|
const mes = dataISO.split('-')[1];
|
|
const ano = dataISO.split('-')[0];
|
|
|
|
return `${diaSemana}, ${dia}/${mes}/${ano}`;
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<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 ? formatarDataComDia(Dia) : ''}</p>
|
|
|
|
<button onClick={() => {if(ListaDiasComAgendamentos.length - 1 === indiceAcesso)return; else(setIndiceAcesso(indiceAcesso + 1))}}> <i className="bi bi-chevron-compact-right"></i></button>
|
|
</div>
|
|
</div>
|
|
<table className='tabeladiaria'>
|
|
<thead>
|
|
<tr>
|
|
<th className='cabecalho-horario'>Horário</th>
|
|
<th>{}</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{agendamentos[Dia]?.map((agendamento, index) => {
|
|
|
|
let Data =agendamento.scheduled_at.split("T")
|
|
let horario = Data[1].split(':')
|
|
return(
|
|
<tr key={index}>
|
|
|
|
<td className='coluna-horario'><p className='horario-texto'>{`${horario[0]}:${horario[1]}`}</p></td>
|
|
<td className='mostrar-horario'>
|
|
<div>
|
|
<CardConsulta DadosConsulta={agendamento} TabelaAgendamento={'dia'} setShowDeleteModal={setShowDeleteModal} setDictInfo={setDictInfo} setSelectedId={setSelectedId} selectedID={selectedID} setShowConfirmModal={setShowConfirmModal} coresConsultas={coresConsultas} setListaConsultaID={setListaConsultaID} listaConsultasID={listaConsultasID}/>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)})}
|
|
{showSpinner &&
|
|
<tr>
|
|
<td colspan='2'>
|
|
<Spinner/>
|
|
</td>
|
|
</tr>
|
|
}
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TabelaAgendamentoDia; |