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

feat: adiciona modal global para edição de militantes na home

Browse Source
This commit is contained in:
andersonid
2025-04-04 13:02:23 -03:00
parent 7f4fe77711
commit 75ba696355
2 changed files with 88 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
static/js/home.js Normal file
View File

@@ -0,0 +1,11 @@
document.addEventListener('DOMContentLoaded', function() {
// Configurar clique nos itens da lista de pagamentos
document.querySelectorAll('.list-group-item[onclick*="carregarDadosPagamento"]').forEach(item => {
item.addEventListener('click', function(e) {
const pagamentoId = this.getAttribute('data-pagamento-id');
if (pagamentoId) {
carregarDadosPagamento(pagamentoId);
}
});
});
});

185
templates/home.html
View File

@@ -82,14 +82,9 @@
{% for militante in ultimos_militantes %}
<div class="list-group-item" style="cursor: pointer"
data-bs-toggle="modal"
data-bs-target="#militanteModal"
data-bs-target="#modalEditarMilitante"
data-militante-id="{{ militante.id }}"
data-militante-nome="{{ militante.nome }}"
data-militante-cpf="{{ militante.cpf }}"
data-militante-email="{{ militante.email }}"
data-militante-telefone="{{ militante.telefone }}"
data-militante-endereco="{{ militante.endereco }}"
data-militante-filiado="{{ militante.filiado }}">
data-militante-nome="{{ militante.nome }}">
<div class="militante-info">
<h6 class="mb-1">{{ militante.nome }}</h6>
<small>{{ militante.email }}</small>
@@ -153,107 +148,6 @@
</div>
</div>
<!-- Modal de Detalhes do Militante -->
<div class="modal fade" id="militanteModal" 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-user me-2"></i>Detalhes do Militante
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
</div>
<div class="modal-body">
<div class="mb-3">
<label class="fw-bold">Nome:</label>
<p id="militanteNome" class="mb-2"></p>
</div>
<div class="mb-3">
<label class="fw-bold">CPF:</label>
<p id="militanteCPF" class="mb-2"></p>
</div>
<div class="mb-3">
<label class="fw-bold">Email:</label>
<p id="militanteEmail" class="mb-2"></p>
</div>
<div class="mb-3">
<label class="fw-bold">Telefone:</label>
<p id="militanteTelefone" class="mb-2"></p>
</div>
<div class="mb-3">
<label class="fw-bold">Endereço:</label>
<p id="militanteEndereco" class="mb-2"></p>
</div>
<div class="mb-3">
<label class="fw-bold">Status:</label>
<p id="militanteFiliado" class="mb-2"></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalEditarMilitante" style="background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important;">
<i class="fas fa-edit me-2"></i>Editar
</button>
<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
<i class="fas fa-trash me-2"></i>Excluir
</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
</div>
</div>
</div>
</div>
<!-- Modal de Edição -->
<div class="modal fade" id="modalEditarMilitante" tabindex="-1">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
<i class="fas fa-user-edit me-2"></i>Editar Militante
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="formEditarMilitante" method="post">
<div class="row">
<div class="col-md-6 mb-3">
<label for="editNome" class="form-label">Nome:</label>
<input type="text" class="form-control" id="editNome" name="nome" required>
</div>
<div class="col-md-6 mb-3">
<label for="editCpf" class="form-label">CPF:</label>
<input type="text" class="form-control" id="editCpf" name="cpf" required>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<label for="editEmail" class="form-label">Email:</label>
<input type="email" class="form-control" id="editEmail" name="email" required>
</div>
<div class="col-md-6 mb-3">
<label for="editTelefone" class="form-label">Telefone:</label>
<input type="text" class="form-control" id="editTelefone" name="telefone">
</div>
</div>
<div class="mb-3">
<label for="editEndereco" class="form-label">Endereço:</label>
<input type="text" class="form-control" id="editEndereco" name="endereco">
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="editFiliado" name="filiado">
<label class="form-check-label" for="editFiliado">Filiado</label>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="submit" form="formEditarMilitante" class="btn btn-success">
<i class="fas fa-save me-2"></i>Salvar
</button>
</div>
</div>
</div>
</div>
<!-- Modal de Edição de Pagamento -->
<div class="modal fade" id="modalEditarPagamento" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
@@ -330,6 +224,10 @@
</div>
</div>
<!-- Incluir os modais globais de militantes -->
{% include 'modals/militante_editar.html' %}
{% include 'modals/militante_excluir.html' %}
<style>
.welcome-header {
background: linear-gradient(to right, var(--background-color), rgba(232, 0, 12, 0.05));
@@ -427,6 +325,76 @@
background-color: var(--bs-primary-dark) !important;
border-color: var(--bs-primary-dark) !important;
}
/* Estilo para os itens da lista de militantes */
.list-group-item {
transition: all 0.3s ease;
border-left: 3px solid transparent;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}
.list-group-item:hover {
background-color: rgba(232, 0, 12, 0.05);
border-left-color: var(--primary-color);
transform: translateX(5px);
}
.list-group-item .militante-info {
flex: 1;
}
.list-group-item .fa-chevron-right {
color: var(--primary-color);
opacity: 0.5;
transition: opacity 0.3s ease;
}
.list-group-item:hover .fa-chevron-right {
opacity: 1;
}
/* Garantir que o botão de salvar mantenha a cor correta */
.btn-success,
.modal-footer .btn-success {
background-color: var(--bs-success) !important;
border-color: var(--bs-success) !important;
color: white !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.modal-footer .btn-success:hover,
.modal-footer .btn-success:focus,
.modal-footer .btn-success:active {
background-color: var(--bs-success-dark) !important;
border-color: var(--bs-success-dark) !important;
color: white !important;
opacity: 0.9;
}
/* Garantir que o botão de cancelar mantenha a cor correta */
.btn-secondary,
.modal-footer .btn-secondary {
background-color: var(--bs-secondary) !important;
border-color: var(--bs-secondary) !important;
color: white !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.modal-footer .btn-secondary:hover,
.modal-footer .btn-secondary:focus,
.modal-footer .btn-secondary:active {
background-color: var(--bs-secondary-dark) !important;
border-color: var(--bs-secondary-dark) !important;
color: white !important;
opacity: 0.9;
}
</style>
{% block extra_js %}
@@ -639,5 +607,6 @@ document.addEventListener('DOMContentLoaded', function() {
{% block scripts %}
<script src="{{ url_for('static', filename='js/militantes.js') }}"></script>
<script src="{{ url_for('static', filename='js/home.js') }}"></script>
{% endblock %}
{% endblock %}