feat: redesign da lista e formulario de cliente (cartoes, grid, tabela responsiva)
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Gustavo
co-authored by
Claude Sonnet 5
Claude Sonnet 5
parent
e21b1646a7
commit
343f61ade7
@@ -24,24 +24,31 @@
|
||||
Não foi possível salvar: {{ erro_gravacao }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<form method="post">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||
{% for campo in campos %}
|
||||
<label for="{{ campo }}">{{ campo }}{% if campo in campos_obrigatorios %} *{% endif %}</label>
|
||||
{% if campo in ["DATA_CONTRATO", "VENCIMENTO_CONTRATO"] %}
|
||||
<input type="date" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
||||
{% elif campo in ["IMPLANTACAO", "MENSALIDADE", "JUROS_MORA", "JUROS_MULTA"] %}
|
||||
<input type="number" step="0.01" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
||||
{% else %}
|
||||
<input type="text" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
||||
{% if campo == "CNPJ" %}
|
||||
<small id="cnpj-status" style="display:block;color:#a1a1aa;margin-top:4px"></small>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<p><small>* campos obrigatórios. Os demais podem ficar em branco — implantação/mensalidade/juros ficam 0,00 e as datas de contrato ficam com a data de hoje até serem ajustadas.</small></p>
|
||||
<button type="submit">Salvar</button>
|
||||
</form>
|
||||
<div class="cartao">
|
||||
<form method="post">
|
||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||
<div class="grid-form">
|
||||
{% for campo in campos %}
|
||||
{% set largura_total = campo in ["OBS"] %}
|
||||
<div class="{{ 'grid-form-largura-total' if largura_total }}">
|
||||
<label for="{{ campo }}">{{ campo }}{% if campo in campos_obrigatorios %} *{% endif %}</label>
|
||||
{% if campo in ["DATA_CONTRATO", "VENCIMENTO_CONTRATO"] %}
|
||||
<input type="date" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
||||
{% elif campo in ["IMPLANTACAO", "MENSALIDADE", "JUROS_MORA", "JUROS_MULTA"] %}
|
||||
<input type="number" step="0.01" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
||||
{% else %}
|
||||
<input type="text" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
||||
{% if campo == "CNPJ" %}
|
||||
<small id="cnpj-status" style="display:block;color:var(--cor-texto-secundario);margin-top:4px"></small>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<p><small>* campos obrigatórios. Os demais podem ficar em branco — implantação/mensalidade/juros ficam 0,00 e as datas de contrato ficam com a data de hoje até serem ajustadas.</small></p>
|
||||
<button type="submit">Salvar</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
|
||||
@@ -3,50 +3,54 @@
|
||||
{% block titulo %}Clientes{% endblock %}
|
||||
{% block conteudo %}
|
||||
<h1>Clientes</h1>
|
||||
<form method="get" action="/clientes">
|
||||
<label for="ordenar_por">Buscar/ordenar por</label>
|
||||
<select id="ordenar_por" name="ordenar_por">
|
||||
<option value="razao" {% if ordenar_por == "razao" %}selected{% endif %}>Razão social</option>
|
||||
<option value="codigo" {% if ordenar_por == "codigo" %}selected{% endif %}>Código</option>
|
||||
<option value="fantasia" {% if ordenar_por == "fantasia" %}selected{% endif %}>Fantasia</option>
|
||||
<option value="cnpj" {% if ordenar_por == "cnpj" %}selected{% endif %}>CNPJ</option>
|
||||
</select>
|
||||
<input type="text" name="busca" value="{{ busca or '' }}" placeholder="Buscar só no campo escolhido acima">
|
||||
<button type="submit">Buscar</button>
|
||||
</form>
|
||||
<div class="cartao">
|
||||
<form method="get" action="/clientes">
|
||||
<label for="ordenar_por">Buscar/ordenar por</label>
|
||||
<select id="ordenar_por" name="ordenar_por">
|
||||
<option value="razao" {% if ordenar_por == "razao" %}selected{% endif %}>Razão social</option>
|
||||
<option value="codigo" {% if ordenar_por == "codigo" %}selected{% endif %}>Código</option>
|
||||
<option value="fantasia" {% if ordenar_por == "fantasia" %}selected{% endif %}>Fantasia</option>
|
||||
<option value="cnpj" {% if ordenar_por == "cnpj" %}selected{% endif %}>CNPJ</option>
|
||||
</select>
|
||||
<input type="text" name="busca" value="{{ busca or '' }}" placeholder="Buscar só no campo escolhido acima">
|
||||
<button type="submit">Buscar</button>
|
||||
</form>
|
||||
</div>
|
||||
<p><a class="botao" href="/clientes/novo">+ Novo cliente</a></p>
|
||||
<table>
|
||||
<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>
|
||||
<div class="tabela-wrap">
|
||||
<table>
|
||||
<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>
|
||||
<td>{{ c.RAZAO }}</td>
|
||||
<td>{{ c.FANTASIA }}</td>
|
||||
<td>{{ c.CNPJ }}</td>
|
||||
<td><a class="botao" href="/clientes/{{ c.ID }}">Abrir</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<th></th>
|
||||
</tr>
|
||||
{% for c in clientes %}
|
||||
<tr>
|
||||
<td>{{ c.CODIGO }}</td>
|
||||
<td>{{ c.RAZAO }}</td>
|
||||
<td>{{ c.FANTASIA }}</td>
|
||||
<td>{{ c.CNPJ }}</td>
|
||||
<td><a class="botao" href="/clientes/{{ c.ID }}">Abrir</a></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</table>
|
||||
</div>
|
||||
{% if total_paginas and total_paginas > 1 %}
|
||||
<p>
|
||||
<div class="paginacao">
|
||||
{% if pagina > 1 %}
|
||||
<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)
|
||||
<span>Página {{ pagina }} de {{ total_paginas }} ({{ total }} clientes)</span>
|
||||
{% if pagina < total_paginas %}
|
||||
<a class="botao" href="/clientes?pagina={{ pagina + 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">Próxima →</a>
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user