feat: cabecalhos clicaveis para ordenar (crescente/decrescente) a lista de clientes
Codigo, Razao, Fantasia e CNPJ agora sao links no cabecalho da tabela: clicar ordena crescente; clicar de novo na mesma coluna alterna pra decrescente (e vice-versa). Trocar de coluna sempre comeca em crescente. Seta (▲/▼) indica a coluna/direcao ativa. db_clientes.listar_clientes() ganha o parametro direcao (whitelist asc/desc, igual ja acontecia com ordenar_por). Links de Anterior/Proxima da paginacao preservam a direcao escolhida. 97/97 testes passando.
This commit is contained in:
@@ -12,6 +12,8 @@
|
||||
main { padding: 20px; max-width: 960px; margin: 0 auto; }
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 12px; }
|
||||
th, td { text-align: left; padding: 8px; border-bottom: 1px solid #3a3a3e; }
|
||||
th a { color: inherit; text-decoration: none; white-space: nowrap; }
|
||||
th a:hover { color: #F5821F; }
|
||||
input, select { padding: 8px; border-radius: 6px; border: 1px solid #3a3a3e; background: #17171a; color: #f4f4f5; width: 100%; box-sizing: border-box; }
|
||||
label { display: block; margin-top: 10px; font-size: 0.85rem; color: #a1a1aa; }
|
||||
button { margin-top: 14px; padding: 10px 16px; border: none; border-radius: 6px; background: #F5821F; color: #17171a; font-weight: 700; cursor: pointer; }
|
||||
|
||||
@@ -16,7 +16,18 @@
|
||||
</form>
|
||||
<p><a class="botao" href="/clientes/novo">+ Novo cliente</a></p>
|
||||
<table>
|
||||
<tr><th>Código</th><th>Razão</th><th>Fantasia</th><th>CNPJ</th><th></th></tr>
|
||||
<tr>
|
||||
{% set colunas_tabela = [("codigo", "Código"), ("razao", "Razão"), ("fantasia", "Fantasia"), ("cnpj", "CNPJ")] %}
|
||||
{% for campo, rotulo in colunas_tabela %}
|
||||
{% set nova_direcao = "desc" if (ordenar_por == campo and direcao == "asc") else "asc" %}
|
||||
<th>
|
||||
<a href="/clientes?ordenar_por={{ campo }}&direcao={{ nova_direcao }}&pagina=1{{ '&busca=' + busca if busca else '' }}">
|
||||
{{ rotulo }}{% if ordenar_por == campo %}{{ " ▲" if direcao == "asc" else " ▼" }}{% endif %}
|
||||
</a>
|
||||
</th>
|
||||
{% endfor %}
|
||||
<th></th>
|
||||
</tr>
|
||||
{% for c in clientes %}
|
||||
<tr>
|
||||
<td>{{ c.CODIGO }}</td>
|
||||
@@ -30,11 +41,11 @@
|
||||
{% if total_paginas and total_paginas > 1 %}
|
||||
<p>
|
||||
{% if pagina > 1 %}
|
||||
<a class="botao" href="/clientes?pagina={{ pagina - 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}">← Anterior</a>
|
||||
<a class="botao" href="/clientes?pagina={{ pagina - 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">← Anterior</a>
|
||||
{% endif %}
|
||||
Página {{ pagina }} de {{ total_paginas }} ({{ total }} clientes)
|
||||
{% if pagina < total_paginas %}
|
||||
<a class="botao" href="/clientes?pagina={{ pagina + 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}">Próxima →</a>
|
||||
<a class="botao" href="/clientes?pagina={{ pagina + 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">Próxima →</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
Reference in New Issue
Block a user