comunatec/controles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: restaura layout da dashboard e corrige exibição das listas

Browse Source
This commit is contained in:
andersonid
2025-04-03 13:48:09 -03:00
parent 10ff9cab3b
commit 417b5c3f96
13 changed files with 3149 additions and 1013 deletions
Download Patch File Download Diff File Expand all files Collapse all files

380
templates/listar_cotas.html
View File

@@ -7,11 +7,11 @@
<div class="col-12">
<div class="d-flex justify-content-between align-items-center">
<h1 class="mb-0">
<i class="fas fa-dollar-sign me-2"></i>Cotas
<i class="fas fa-money-bill me-2"></i>Cotas
</h1>
<a href="{{ url_for('nova_cota') }}" class="btn btn-primary">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalNovaCota">
<i class="fas fa-plus me-2"></i>Nova Cota
</a>
</button>
</div>
</div>
</div>
@@ -27,23 +27,10 @@
<input type="text" class="form-control" id="searchInput" placeholder="Pesquisar cotas...">
</div>
</div>
<div class="col-md-6">
<div class="d-flex justify-content-end gap-2">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
<i class="fas fa-filter me-1"></i>Filtrar
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#" data-filter="todos">Todas</a></li>
<li><a class="dropdown-item" href="#" data-filter="pagas">Pagas</a></li>
<li><a class="dropdown-item" href="#" data-filter="pendentes">Pendentes</a></li>
<li><a class="dropdown-item" href="#" data-filter="atrasadas">Atrasadas</a></li>
</ul>
</div>
<button type="button" class="btn btn-outline-secondary" id="btnExportar">
<i class="fas fa-download me-1"></i>Exportar
</button>
</div>
<div class="col-md-6 text-end">
<button id="btnExportar" class="btn btn-outline-primary">
<i class="fas fa-download me-2"></i>Exportar
</button>
</div>
</div>
@@ -52,30 +39,36 @@
<thead>
<tr>
<th data-sort="militante">Militante <i class="fas fa-sort"></i></th>
<th data-sort="valor">Valor <i class="fas fa-sort"></i></th>
<th data-sort="data_vencimento">Vencimento <i class="fas fa-sort"></i></th>
<th data-sort="status">Status <i class="fas fa-sort"></i></th>
<th data-sort="valor_antigo">Valor Antigo <i class="fas fa-sort"></i></th>
<th data-sort="valor_novo">Valor Novo <i class="fas fa-sort"></i></th>
<th data-sort="data_alteracao">Data de Alteração <i class="fas fa-sort"></i></th>
<th data-sort="data_vencimento">Data de Vencimento <i class="fas fa-sort"></i></th>
<th class="text-end">Ações</th>
</tr>
</thead>
<tbody>
{% for cota in cotas %}
<tr data-cota="{{ cota.id }}" data-status="{{ cota.status }}">
<tr>
<td data-militante="{{ cota.militante.nome }}">{{ cota.militante.nome }}</td>
<td data-valor="{{ cota.valor_novo }}">R$ {{ "%.2f"|format(cota.valor_novo) }}</td>
<td data-valor_antigo="{{ cota.valor_antigo }}">R$ {{ "%.2f"|format(cota.valor_antigo) }}</td>
<td data-valor_novo="{{ cota.valor_novo }}">R$ {{ "%.2f"|format(cota.valor_novo) }}</td>
<td data-data_alteracao="{{ cota.data_alteracao }}">{{ cota.data_alteracao.strftime('%d/%m/%Y') }}</td>
<td data-data_vencimento="{{ cota.data_vencimento }}">{{ cota.data_vencimento.strftime('%d/%m/%Y') }}</td>
<td data-status="{{ cota.status }}">
<span class="badge {{ 'bg-success' if cota.status == 'paga' else 'bg-warning' if cota.status == 'pendente' else 'bg-danger' }}">
{{ cota.status.title() }}
</span>
</td>
<td class="text-end">
<div class="btn-group">
<a href="{{ url_for('editar_cota', id=cota.id) }}"
class="btn btn-sm btn-outline-primary"
title="Editar">
<button type="button"
class="btn btn-sm btn-outline-primary"
data-bs-toggle="modal"
data-bs-target="#modalEditarCota"
data-cota-id="{{ cota.id }}"
data-cota-militante="{{ cota.militante_id }}"
data-cota-valor-antigo="{{ cota.valor_antigo }}"
data-cota-valor-novo="{{ cota.valor_novo }}"
data-cota-data-alteracao="{{ cota.data_alteracao.strftime('%Y-%m-%d') }}"
data-cota-data-vencimento="{{ cota.data_vencimento.strftime('%Y-%m-%d') }}"
title="Editar">
<i class="fas fa-edit"></i>
</a>
</button>
<button type="button"
class="btn btn-sm btn-outline-danger"
data-bs-toggle="modal"
@@ -92,29 +85,108 @@
</tbody>
</table>
</div>
</div>
</div>
<div class="d-flex justify-content-between align-items-center mt-4">
<div class="text-muted">
Mostrando <span id="countCotas">{{ cotas|length }}</span> cotas
<!-- Modal Nova Cota -->
<div class="modal fade" id="modalNovaCota" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i class="fas fa-plus me-2"></i>Nova Cota
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="formNovaCota" method="post" action="{{ url_for('nova_cota') }}">
<div class="mb-3">
<label for="militante_id" class="form-label">Militante:</label>
<select class="form-select" id="militante_id" name="militante_id" required>
<option value="">Selecione um militante</option>
{% for militante in militantes %}
<option value="{{ militante.id }}">{{ militante.nome }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label for="valor_antigo" class="form-label">Valor Antigo:</label>
<input type="number" step="0.01" class="form-control" id="valor_antigo" name="valor_antigo" required>
</div>
<div class="mb-3">
<label for="valor_novo" class="form-label">Valor Novo:</label>
<input type="number" step="0.01" class="form-control" id="valor_novo" name="valor_novo" required>
</div>
<div class="mb-3">
<label for="data_alteracao" class="form-label">Data de Alteração:</label>
<input type="date" class="form-control" id="data_alteracao" name="data_alteracao" required>
</div>
<div class="mb-3">
<label for="data_vencimento" class="form-label">Data de Vencimento:</label>
<input type="date" class="form-control" id="data_vencimento" name="data_vencimento" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="submit" form="formNovaCota" class="btn btn-success">
<i class="fas fa-save me-2"></i>Salvar
</button>
</div>
<nav aria-label="Navegação de páginas">
<ul class="pagination mb-0">
<li class="page-item disabled" id="prevPage">
<a class="page-link" href="#"><i class="fas fa-chevron-left"></i></a>
</li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item" id="nextPage">
<a class="page-link" href="#"><i class="fas fa-chevron-right"></i></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<!-- Modal de Confirmação de Exclusão -->
<!-- Modal de Edição -->
<div class="modal fade" id="modalEditarCota" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i class="fas fa-edit me-2"></i>Editar Cota
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="formEditarCota" method="post">
<div class="mb-3">
<label for="editMilitante" class="form-label">Militante:</label>
<select class="form-select" id="editMilitante" name="militante_id" required>
<option value="">Selecione um militante</option>
{% for militante in militantes %}
<option value="{{ militante.id }}">{{ militante.nome }}</option>
{% endfor %}
</select>
</div>
<div class="mb-3">
<label for="editValorAntigo" class="form-label">Valor Antigo:</label>
<input type="number" step="0.01" class="form-control" id="editValorAntigo" name="valor_antigo" required>
</div>
<div class="mb-3">
<label for="editValorNovo" class="form-label">Valor Novo:</label>
<input type="number" step="0.01" class="form-control" id="editValorNovo" name="valor_novo" required>
</div>
<div class="mb-3">
<label for="editDataAlteracao" class="form-label">Data de Alteração:</label>
<input type="date" class="form-control" id="editDataAlteracao" name="data_alteracao" required>
</div>
<div class="mb-3">
<label for="editDataVencimento" class="form-label">Data de Vencimento:</label>
<input type="date" class="form-control" id="editDataVencimento" name="data_vencimento" required>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="submit" form="formEditarCota" class="btn btn-success">
<i class="fas fa-save me-2"></i>Salvar
</button>
</div>
</div>
</div>
</div>
<!-- Modal de Exclusão -->
<div class="modal fade" id="deleteModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
@@ -153,49 +225,130 @@ document.addEventListener('DOMContentLoaded', function() {
document.getElementById('deleteForm').action = `/cotas/excluir/${cotaId}`;
});
// Envio do formulário de nova cota via AJAX
const formNovaCota = document.getElementById('formNovaCota');
formNovaCota.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch(this.action, {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
// Fechar o modal
bootstrap.Modal.getInstance(document.getElementById('modalNovaCota')).hide();
// Atualizar a lista
location.reload();
// Mostrar mensagem de sucesso
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-success alert-dismissible fade show';
alertDiv.innerHTML = `
${data.message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
document.querySelector('.container').insertBefore(alertDiv, document.querySelector('.container').firstChild);
} else {
// Mostrar erro
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-danger alert-dismissible fade show';
alertDiv.innerHTML = `
${data.message}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
document.querySelector('.modal-body').insertBefore(alertDiv, formNovaCota);
}
})
.catch(error => {
console.error('Erro:', error);
const alertDiv = document.createElement('div');
alertDiv.className = 'alert alert-danger alert-dismissible fade show';
alertDiv.innerHTML = `
Erro ao cadastrar cota. Tente novamente.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
`;
document.querySelector('.modal-body').insertBefore(alertDiv, formNovaCota);
});
});
// Configuração do modal de edição
const modalEditarCota = document.getElementById('modalEditarCota');
modalEditarCota.addEventListener('show.bs.modal', function(event) {
const button = event.relatedTarget;
const cotaId = button.getAttribute('data-cota-id');
const militanteId = button.getAttribute('data-cota-militante');
const valorAntigo = button.getAttribute('data-cota-valor-antigo');
const valorNovo = button.getAttribute('data-cota-valor-novo');
const dataAlteracao = button.getAttribute('data-cota-data-alteracao');
const dataVencimento = button.getAttribute('data-cota-data-vencimento');
const form = document.getElementById('formEditarCota');
form.action = `/cotas/editar/${cotaId}`;
document.getElementById('editMilitante').value = militanteId;
document.getElementById('editValorAntigo').value = valorAntigo;
document.getElementById('editValorNovo').value = valorNovo;
document.getElementById('editDataAlteracao').value = dataAlteracao;
document.getElementById('editDataVencimento').value = dataVencimento;
});
// Envio do formulário de edição via AJAX
const formEditarCota = document.getElementById('formEditarCota');
formEditarCota.addEventListener('submit', function(e) {
e.preventDefault();
const formData = new FormData(this);
fetch(this.action, {
method: 'POST',
body: formData,
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.status === 'success') {
// Fechar o modal
bootstrap.Modal.getInstance(document.getElementById('modalEditarCota')).hide();
// Atualizar a lista
location.reload();
} else {
alert(data.message || 'Erro ao editar cota');
}
})
.catch(error => {
console.error('Erro:', error);
alert('Erro ao editar cota');
});
});
// Limpar alertas quando os modais forem fechados
[modalEditarCota, document.getElementById('modalNovaCota')].forEach(modal => {
modal.addEventListener('hidden.bs.modal', function () {
const alerts = this.querySelectorAll('.alert');
alerts.forEach(alert => alert.remove());
});
});
// Pesquisa em tempo real
const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();
const rows = document.querySelectorAll('#cotasTable tbody tr');
let visibleCount = 0;
rows.forEach(row => {
const text = row.textContent.toLowerCase();
const isVisible = text.includes(searchTerm);
row.style.display = isVisible ? '' : 'none';
if (isVisible) visibleCount++;
});
document.getElementById('countCotas').textContent = visibleCount;
});
// Filtros
const filterButtons = document.querySelectorAll('[data-filter]');
filterButtons.forEach(button => {
button.addEventListener('click', function(e) {
e.preventDefault();
const filter = this.getAttribute('data-filter');
const rows = document.querySelectorAll('#cotasTable tbody tr');
let visibleCount = 0;
rows.forEach(row => {
const status = row.getAttribute('data-status');
let isVisible = true;
if (filter === 'pagas') {
isVisible = status === 'paga';
} else if (filter === 'pendentes') {
isVisible = status === 'pendente';
} else if (filter === 'atrasadas') {
isVisible = status === 'atrasada';
}
row.style.display = isVisible ? '' : 'none';
if (isVisible) visibleCount++;
});
document.getElementById('countCotas').textContent = visibleCount;
row.style.display = text.includes(searchTerm) ? '' : 'none';
});
});
@@ -233,7 +386,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Exportar para CSV
document.getElementById('btnExportar').addEventListener('click', function() {
const rows = document.querySelectorAll('#cotasTable tbody tr:not([style*="display: none"])');
const headers = ['Militante', 'Valor', 'Vencimento', 'Status'];
const headers = ['Militante', 'Valor Antigo', 'Valor Novo', 'Data de Alteração', 'Data de Vencimento'];
let csv = headers.join(',') + '\n';
rows.forEach(row => {
@@ -242,7 +395,8 @@ document.addEventListener('DOMContentLoaded', function() {
cols[0].textContent,
cols[1].textContent,
cols[2].textContent,
cols[3].textContent.trim()
cols[3].textContent,
cols[4].textContent
].map(val => `"${val}"`);
csv += values.join(',') + '\n';
});
@@ -287,12 +441,6 @@ th[data-sort].sort-desc i {
transform: translateX(5px);
}
/* Estilo para badges */
.badge {
font-weight: 500;
padding: 0.5em 0.8em;
}
/* Estilo para botões de ação */
.btn-group .btn {
padding: 0.25rem 0.5rem;
@@ -314,5 +462,49 @@ th[data-sort].sort-desc i {
flex: 1;
}
}
/* Estilo para o backdrop com blur em todos os modais */
.modal-backdrop.show {
backdrop-filter: blur(8px);
background-color: rgba(0, 0, 0, 0.7);
}
/* Estilo para o botão de fechar dos modais */
.btn-close {
background-color: transparent;
padding: 0.5rem;
opacity: 0.8;
transition: opacity 0.2s;
filter: invert(1) grayscale(100%) brightness(200%);
}
.btn-close:hover {
opacity: 1;
background-color: transparent;
}
/* Estilo para modais */
.modal-content {
border: none;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.modal-header {
background: linear-gradient(to right, var(--bs-gray-dark), var(--bs-gray));
color: white;
border-radius: 12px 12px 0 0;
border-bottom: none;
padding: 1rem;
}
.modal-body {
padding: 1.5rem;
}
.modal-footer {
border-top: 1px solid #eee;
padding: 1rem;
}
</style>
{% endblock %}