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.

app/db/clientes.py

@@ -26,15 +26,25 @@ ORDENACOES_VALIDAS = {
 }
 ORDENACAO_PADRAO = "razao"
 
+# Idem para a direção — nunca interpolar "asc"/"desc" vindo da URL sem
+# passar por aqui.
+DIRECOES_VALIDAS = {"asc": "ASC", "desc": "DESC"}
+DIRECAO_PADRAO = "asc"
+
 
 class ClienteComDependenciasError(Exception):
     """Levantada ao tentar excluir um CLIENTE que ainda tem CLIENTE_CONTATO."""
 
 
 def listar_clientes(
-    busca: str | None = None, limite: int = 100, offset: int = 0, ordenar_por: str = ORDENACAO_PADRAO
+    busca: str | None = None,
+    limite: int = 100,
+    offset: int = 0,
+    ordenar_por: str = ORDENACAO_PADRAO,
+    direcao: str = DIRECAO_PADRAO,
 ) -> list[dict]:
     coluna = ORDENACOES_VALIDAS.get(ordenar_por, ORDENACOES_VALIDAS[ORDENACAO_PADRAO])
+    direcao_sql = DIRECOES_VALIDAS.get(direcao, DIRECOES_VALIDAS[DIRECAO_PADRAO])
     conn = get_connection()
     try:
         with conn.cursor() as cur:
@@ -44,12 +54,12 @@ def listar_clientes(
                 # campos de uma vez.
                 sql = (
                     f"SELECT {_COLUNAS_SELECT} FROM CLIENTE "
-                    f"WHERE {coluna} LIKE %s ORDER BY {coluna} LIMIT %s OFFSET %s"
+                    f"WHERE {coluna} LIKE %s ORDER BY {coluna} {direcao_sql} LIMIT %s OFFSET %s"
                 )
                 cur.execute(sql, (f"%{busca}%", limite, offset))
             else:
                 cur.execute(
-                    f"SELECT {_COLUNAS_SELECT} FROM CLIENTE ORDER BY {coluna} LIMIT %s OFFSET %s",
+                    f"SELECT {_COLUNAS_SELECT} FROM CLIENTE ORDER BY {coluna} {direcao_sql} LIMIT %s OFFSET %s",
                     (limite, offset),
                 )
             return cur.fetchall()

app/routers/clientes.py

@@ -81,6 +81,7 @@ def listar(
     request: Request,
     busca: Optional[str] = None,
     ordenar_por: str = db_clientes.ORDENACAO_PADRAO,
+    direcao: str = db_clientes.DIRECAO_PADRAO,
     pagina: int = 1,
     mensagem: Optional[str] = None,
     mensagem_tipo: Optional[str] = None,
@@ -88,6 +89,8 @@ def listar(
 ):
     if ordenar_por not in db_clientes.ORDENACOES_VALIDAS:
         ordenar_por = db_clientes.ORDENACAO_PADRAO
+    if direcao not in db_clientes.DIRECOES_VALIDAS:
+        direcao = db_clientes.DIRECAO_PADRAO
 
     pagina = max(pagina, 1)
     total = db_clientes.contar_clientes(busca=busca or None, ordenar_por=ordenar_por)
@@ -96,13 +99,13 @@ def listar(
     offset = (pagina - 1) * TAMANHO_PAGINA
 
     clientes = db_clientes.listar_clientes(
-        busca=busca or None, limite=TAMANHO_PAGINA, offset=offset, ordenar_por=ordenar_por
+        busca=busca or None, limite=TAMANHO_PAGINA, offset=offset, ordenar_por=ordenar_por, direcao=direcao
     )
     return templates.TemplateResponse(
         request,
         "clientes_lista.html",
         {
-            "clientes": clientes, "busca": busca, "ordenar_por": ordenar_por,
+            "clientes": clientes, "busca": busca, "ordenar_por": ordenar_por, "direcao": direcao,
             "mensagem": mensagem, "mensagem_tipo": mensagem_tipo,
             "pagina": pagina, "total_paginas": total_paginas, "total": total,
         },

app/templates/base.html

@@ -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; }

app/templates/clientes_lista.html

@@ -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 }}">&larr; Anterior</a>
+        <a class="botao" href="/clientes?pagina={{ pagina - 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">&larr; 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 &rarr;</a>
+        <a class="botao" href="/clientes?pagina={{ pagina + 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">Próxima &rarr;</a>
       {% endif %}
     </p>
   {% endif %}