forked from RiseUP/riseup-squad23
75 lines
3.1 KiB
JavaScript
75 lines
3.1 KiB
JavaScript
import React from 'react';
|
|
// ✏️ REMOVIDO: A importação do mock foi removida.
|
|
// import AgendamentosMes from './DadosConsultasMock';
|
|
import CardConsulta from './CardConsulta';
|
|
import "./style/styleTabelas/tabelasemana.css";
|
|
|
|
// ✨ MODIFICADO: Recebe 'agendamentos' como prop
|
|
const TabelaAgendamentoSemana = ({ agendamentos }) => {
|
|
|
|
// ✨ MODIFICADO: Usa os dados da prop, com fallback para um objeto vazio para evitar erros.
|
|
// Continua usando a 'semana1' como no seu código original.
|
|
const agendamentoSemana = agendamentos?.semana1 || {};
|
|
|
|
// Pega os agendamentos de cada dia, com fallback para um array vazio.
|
|
const agendamentosDeSegunda = agendamentoSemana.segunda || [];
|
|
const agendamentosDeTerca = agendamentoSemana.terca || [];
|
|
const agendamentosDeQuarta = agendamentoSemana.quarta || [];
|
|
const agendamentosDeQuinta = agendamentoSemana.quinta || [];
|
|
const agendamentosDeSexta = agendamentoSemana.sexta || [];
|
|
|
|
// ✨ LÓGICA MELHORADA: Calcula o número de linhas com base no dia com mais horários.
|
|
// Isso evita que a tabela quebre se um dia tiver mais horários que outro após a busca.
|
|
const numLinhas = Math.max(
|
|
agendamentosDeSegunda.length,
|
|
agendamentosDeTerca.length,
|
|
agendamentosDeQuarta.length,
|
|
agendamentosDeQuinta.length,
|
|
agendamentosDeSexta.length
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
<table className='tabelasemanal'>
|
|
<thead>
|
|
<tr>
|
|
<th>Horário</th>
|
|
<th>Segunda</th>
|
|
<th>Terça</th>
|
|
<th>Quarta</th>
|
|
<th>Quinta</th>
|
|
<th>Sexta</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{/* ✨ MODIFICADO: Itera com base no número de linhas calculado. */}
|
|
{Array.from({ length: numLinhas }).map((_, index) => {
|
|
// Pega a consulta de cada dia para a linha atual (índice)
|
|
const consultaSeg = agendamentosDeSegunda[index];
|
|
const consultaTer = agendamentosDeTerca[index];
|
|
const consultaQua = agendamentosDeQuarta[index];
|
|
const consultaQui = agendamentosDeQuinta[index];
|
|
const consultaSex = agendamentosDeSexta[index];
|
|
|
|
// Pega o horário da primeira consulta que existir na linha
|
|
const horarioDaLinha = consultaSeg?.horario || consultaTer?.horario || consultaQua?.horario || consultaQui?.horario || consultaSex?.horario;
|
|
|
|
return (
|
|
<tr key={index}>
|
|
<td>{horarioDaLinha}</td>
|
|
{/* Renderiza o Card apenas se a consulta existir para aquele dia/horário */}
|
|
<td>{consultaSeg && <CardConsulta DadosConsulta={consultaSeg} />}</td>
|
|
<td>{consultaTer && <CardConsulta DadosConsulta={consultaTer} />}</td>
|
|
<td>{consultaQua && <CardConsulta DadosConsulta={consultaQua} />}</td>
|
|
<td>{consultaQui && <CardConsulta DadosConsulta={consultaQui} />}</td>
|
|
<td>{consultaSex && <CardConsulta DadosConsulta={consultaSex} />}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default TabelaAgendamentoSemana; |