victor/Reem-Notas
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Arrumar a tela de pagamento colocando paginação

Browse Source
This commit is contained in:
victor
2026-07-13 17:06:48 -03:00
parent 1dd2610c1f
commit df9256c556
3 changed files with 103 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
app/views/dashboard/index.html.erb
View File

@@ -348,9 +348,9 @@
<th class="py-2 pl-3 font-medium text-right">Valor</th>
</tr>
</thead>
<tbody>
<tbody id="pagamentos-feitos-tbody">
<% @pagamentos_feitos.each do |cm| %>
<tr class="border-b border-white/5">
<tr class="border-b border-white/5 pagamento-feito-row">
<td class="py-2.5 pr-3 text-gray-300 whitespace-nowrap"><%= l cm.pago_em.to_date, format: :short %></td>
<td class="py-2.5 px-3 text-white"><%= cm.motorista_nome %></td>
<td class="py-2.5 px-3">
@@ -364,6 +364,10 @@
</tbody>
</table>
</div>
<div id="pagamentos-feitos-paginacao" class="flex items-center justify-between mt-3 hidden">
<p class="text-gray-400 text-xs" id="pagamentos-feitos-info"></p>
<div class="flex gap-1" id="pagamentos-feitos-abas"></div>
</div>
<% else %>
<p class="text-gray-400 text-sm py-3">Nenhum pagamento realizado neste período.</p>
<% end %>
@@ -473,6 +477,55 @@
})();
</script>
<%# Paginação client-side da tabela de pagamentos realizados (10 por página) %>
<script>
(function () {
function initPaginacaoPagamentos() {
const tbody = document.getElementById('pagamentos-feitos-tbody');
const nav = document.getElementById('pagamentos-feitos-paginacao');
if (!tbody || !nav || nav.dataset.iniciado) return;
nav.dataset.iniciado = '1';
const porPagina = 10;
const linhas = Array.from(tbody.querySelectorAll('.pagamento-feito-row'));
const paginas = Math.ceil(linhas.length / porPagina);
if (paginas <= 1) return;
const abas = document.getElementById('pagamentos-feitos-abas');
const info = document.getElementById('pagamentos-feitos-info');
nav.classList.remove('hidden');
function mostrarPagina(p) {
linhas.forEach(function (tr, i) {
tr.style.display = (i >= (p - 1) * porPagina && i < p * porPagina) ? '' : 'none';
});
const de = (p - 1) * porPagina + 1;
const ate = Math.min(p * porPagina, linhas.length);
info.textContent = de + '–' + ate + ' de ' + linhas.length + ' pagamentos';
abas.querySelectorAll('button').forEach(function (b) {
const ativa = Number(b.dataset.pagina) === p;
b.className = 'px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors ' +
(ativa ? 'bg-[#f97316] text-white'
: 'bg-[#0a0a0a] text-gray-400 border border-white/5 hover:text-white');
});
}
for (let p = 1; p <= paginas; p++) {
const btn = document.createElement('button');
btn.type = 'button';
btn.textContent = p;
btn.dataset.pagina = p;
btn.addEventListener('click', function () { mostrarPagina(p); });
abas.appendChild(btn);
}
mostrarPagina(1);
}
initPaginacaoPagamentos();
document.addEventListener('turbo:load', initPaginacaoPagamentos);
})();
</script>
<%# Filtro de operação — submete o form ao marcar/desmarcar %>
<script>
(function () {