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

Arrumar a tela de pagamento pendente colocando paginação

Browse Source
This commit is contained in:
victor
2026-07-13 17:12:55 -03:00
parent df9256c556
commit 962f79266a
1 changed files with 19 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -386,9 +386,9 @@
<th class="py-2 pl-3 font-medium text-right">Valor</th> <th class="py-2 pl-3 font-medium text-right">Valor</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody id="pagamentos-pendentes-tbody">
<% @pagamentos_pendentes.each do |cm| %> <% @pagamentos_pendentes.each do |cm| %>
<tr class="border-b border-white/5"> <tr class="border-b border-white/5 pagamento-pendente-row">
<td class="py-2.5 pr-3 text-white"><%= cm.motorista_nome %></td> <td class="py-2.5 pr-3 text-white"><%= cm.motorista_nome %></td>
<td class="py-2.5 px-3"> <td class="py-2.5 px-3">
<%= link_to cm.consolidacao.nome, consolidacao_path(cm.consolidacao), <%= link_to cm.consolidacao.nome, consolidacao_path(cm.consolidacao),
@@ -400,6 +400,10 @@
</tbody> </tbody>
</table> </table>
</div> </div>
<div id="pagamentos-pendentes-paginacao" class="flex items-center justify-between mt-3 hidden">
<p class="text-gray-400 text-xs" id="pagamentos-pendentes-info"></p>
<div class="flex gap-1" id="pagamentos-pendentes-abas"></div>
</div>
<% else %> <% else %>
<p class="text-gray-400 text-sm py-3">Nenhuma pendência no período. 🎉</p> <p class="text-gray-400 text-sm py-3">Nenhuma pendência no período. 🎉</p>
<% end %> <% end %>
@@ -477,22 +481,22 @@
})(); })();
</script> </script>
<%# Paginação client-side da tabela de pagamentos realizados (10 por página) %> <%# Paginação client-side das tabelas de pagamentos (10 por página) %>
<script> <script>
(function () { (function () {
function initPaginacaoPagamentos() { function paginarTabela(prefixo, classeLinha, rotulo) {
const tbody = document.getElementById('pagamentos-feitos-tbody'); const tbody = document.getElementById(prefixo + '-tbody');
const nav = document.getElementById('pagamentos-feitos-paginacao'); const nav = document.getElementById(prefixo + '-paginacao');
if (!tbody || !nav || nav.dataset.iniciado) return; if (!tbody || !nav || nav.dataset.iniciado) return;
nav.dataset.iniciado = '1'; nav.dataset.iniciado = '1';
const porPagina = 10; const porPagina = 10;
const linhas = Array.from(tbody.querySelectorAll('.pagamento-feito-row')); const linhas = Array.from(tbody.querySelectorAll('.' + classeLinha));
const paginas = Math.ceil(linhas.length / porPagina); const paginas = Math.ceil(linhas.length / porPagina);
if (paginas <= 1) return; if (paginas <= 1) return;
const abas = document.getElementById('pagamentos-feitos-abas'); const abas = document.getElementById(prefixo + '-abas');
const info = document.getElementById('pagamentos-feitos-info'); const info = document.getElementById(prefixo + '-info');
nav.classList.remove('hidden'); nav.classList.remove('hidden');
function mostrarPagina(p) { function mostrarPagina(p) {
@@ -501,7 +505,7 @@
}); });
const de = (p - 1) * porPagina + 1; const de = (p - 1) * porPagina + 1;
const ate = Math.min(p * porPagina, linhas.length); const ate = Math.min(p * porPagina, linhas.length);
info.textContent = de + '–' + ate + ' de ' + linhas.length + ' pagamentos'; info.textContent = de + '–' + ate + ' de ' + linhas.length + ' ' + rotulo;
abas.querySelectorAll('button').forEach(function (b) { abas.querySelectorAll('button').forEach(function (b) {
const ativa = Number(b.dataset.pagina) === p; const ativa = Number(b.dataset.pagina) === p;
b.className = 'px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors ' + b.className = 'px-3 py-1.5 rounded-lg text-xs font-semibold transition-colors ' +
@@ -521,6 +525,11 @@
mostrarPagina(1); mostrarPagina(1);
} }
function initPaginacaoPagamentos() {
paginarTabela('pagamentos-feitos', 'pagamento-feito-row', 'pagamentos');
paginarTabela('pagamentos-pendentes', 'pagamento-pendente-row', 'pendências');
}
initPaginacaoPagamentos(); initPaginacaoPagamentos();
document.addEventListener('turbo:load', initPaginacaoPagamentos); document.addEventListener('turbo:load', initPaginacaoPagamentos);
})(); })();