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:
co-authored by
Claude Sonnet 5
parent
e21b1646a7
commit
343f61ade7
@@ -24,24 +24,31 @@
|
|||||||
Não foi possível salvar: {{ erro_gravacao }}
|
Não foi possível salvar: {{ erro_gravacao }}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<form method="post">
|
<div class="cartao">
|
||||||
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
<form method="post">
|
||||||
{% for campo in campos %}
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
||||||
<label for="{{ campo }}">{{ campo }}{% if campo in campos_obrigatorios %} *{% endif %}</label>
|
<div class="grid-form">
|
||||||
{% if campo in ["DATA_CONTRATO", "VENCIMENTO_CONTRATO"] %}
|
{% for campo in campos %}
|
||||||
<input type="date" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
{% set largura_total = campo in ["OBS"] %}
|
||||||
{% elif campo in ["IMPLANTACAO", "MENSALIDADE", "JUROS_MORA", "JUROS_MULTA"] %}
|
<div class="{{ 'grid-form-largura-total' if largura_total }}">
|
||||||
<input type="number" step="0.01" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
<label for="{{ campo }}">{{ campo }}{% if campo in campos_obrigatorios %} *{% endif %}</label>
|
||||||
{% else %}
|
{% if campo in ["DATA_CONTRATO", "VENCIMENTO_CONTRATO"] %}
|
||||||
<input type="text" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
<input type="date" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
||||||
{% if campo == "CNPJ" %}
|
{% elif campo in ["IMPLANTACAO", "MENSALIDADE", "JUROS_MORA", "JUROS_MULTA"] %}
|
||||||
<small id="cnpj-status" style="display:block;color:#a1a1aa;margin-top:4px"></small>
|
<input type="number" step="0.01" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
||||||
{% endif %}
|
{% else %}
|
||||||
{% endif %}
|
<input type="text" id="{{ campo }}" name="{{ campo }}" value="{{ dados[campo] if dados else '' }}" {% if campo in campos_obrigatorios %}required{% endif %}>
|
||||||
{% endfor %}
|
{% if campo == "CNPJ" %}
|
||||||
<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>
|
<small id="cnpj-status" style="display:block;color:var(--cor-texto-secundario);margin-top:4px"></small>
|
||||||
<button type="submit">Salvar</button>
|
{% endif %}
|
||||||
</form>
|
{% 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>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
|
|||||||
@@ -3,50 +3,54 @@
|
|||||||
{% block titulo %}Clientes{% endblock %}
|
{% block titulo %}Clientes{% endblock %}
|
||||||
{% block conteudo %}
|
{% block conteudo %}
|
||||||
<h1>Clientes</h1>
|
<h1>Clientes</h1>
|
||||||
<form method="get" action="/clientes">
|
<div class="cartao">
|
||||||
<label for="ordenar_por">Buscar/ordenar por</label>
|
<form method="get" action="/clientes">
|
||||||
<select id="ordenar_por" name="ordenar_por">
|
<label for="ordenar_por">Buscar/ordenar por</label>
|
||||||
<option value="razao" {% if ordenar_por == "razao" %}selected{% endif %}>Razão social</option>
|
<select id="ordenar_por" name="ordenar_por">
|
||||||
<option value="codigo" {% if ordenar_por == "codigo" %}selected{% endif %}>Código</option>
|
<option value="razao" {% if ordenar_por == "razao" %}selected{% endif %}>Razão social</option>
|
||||||
<option value="fantasia" {% if ordenar_por == "fantasia" %}selected{% endif %}>Fantasia</option>
|
<option value="codigo" {% if ordenar_por == "codigo" %}selected{% endif %}>Código</option>
|
||||||
<option value="cnpj" {% if ordenar_por == "cnpj" %}selected{% endif %}>CNPJ</option>
|
<option value="fantasia" {% if ordenar_por == "fantasia" %}selected{% endif %}>Fantasia</option>
|
||||||
</select>
|
<option value="cnpj" {% if ordenar_por == "cnpj" %}selected{% endif %}>CNPJ</option>
|
||||||
<input type="text" name="busca" value="{{ busca or '' }}" placeholder="Buscar só no campo escolhido acima">
|
</select>
|
||||||
<button type="submit">Buscar</button>
|
<input type="text" name="busca" value="{{ busca or '' }}" placeholder="Buscar só no campo escolhido acima">
|
||||||
</form>
|
<button type="submit">Buscar</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
<p><a class="botao" href="/clientes/novo">+ Novo cliente</a></p>
|
<p><a class="botao" href="/clientes/novo">+ Novo cliente</a></p>
|
||||||
<table>
|
<div class="tabela-wrap">
|
||||||
<tr>
|
<table>
|
||||||
{% set colunas_tabela = [("codigo", "Código"), ("razao", "Razão"), ("fantasia", "Fantasia"), ("cnpj", "CNPJ")] %}
|
<tr>
|
||||||
{% for campo, rotulo in colunas_tabela %}
|
{% set colunas_tabela = [("codigo", "Código"), ("razao", "Razão"), ("fantasia", "Fantasia"), ("cnpj", "CNPJ")] %}
|
||||||
{% set nova_direcao = "desc" if (ordenar_por == campo and direcao == "asc") else "asc" %}
|
{% for campo, rotulo in colunas_tabela %}
|
||||||
<th>
|
{% set nova_direcao = "desc" if (ordenar_por == campo and direcao == "asc") else "asc" %}
|
||||||
<a href="/clientes?ordenar_por={{ campo }}&direcao={{ nova_direcao }}&pagina=1{{ '&busca=' + busca if busca else '' }}">
|
<th>
|
||||||
{{ rotulo }}{% if ordenar_por == campo %}{{ " ▲" if direcao == "asc" else " ▼" }}{% endif %}
|
<a href="/clientes?ordenar_por={{ campo }}&direcao={{ nova_direcao }}&pagina=1{{ '&busca=' + busca if busca else '' }}">
|
||||||
</a>
|
{{ rotulo }}{% if ordenar_por == campo %}{{ " ▲" if direcao == "asc" else " ▼" }}{% endif %}
|
||||||
</th>
|
</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 %}
|
{% endfor %}
|
||||||
<th></th>
|
</table>
|
||||||
</tr>
|
</div>
|
||||||
{% 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>
|
|
||||||
{% if total_paginas and total_paginas > 1 %}
|
{% if total_paginas and total_paginas > 1 %}
|
||||||
<p>
|
<div class="paginacao">
|
||||||
{% if pagina > 1 %}
|
{% if pagina > 1 %}
|
||||||
<a class="botao" href="/clientes?pagina={{ pagina - 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">← Anterior</a>
|
<a class="botao" href="/clientes?pagina={{ pagina - 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">← Anterior</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
Página {{ pagina }} de {{ total_paginas }} ({{ total }} clientes)
|
<span>Página {{ pagina }} de {{ total_paginas }} ({{ total }} clientes)</span>
|
||||||
{% if pagina < total_paginas %}
|
{% 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>
|
<a class="botao" href="/clientes?pagina={{ pagina + 1 }}{{ '&busca=' + busca if busca else '' }}&ordenar_por={{ ordenar_por }}&direcao={{ direcao }}">Próxima →</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</p>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Reference in New Issue
Block a user