From 10ff9cab3b9d90b8c8ea7bca304cde45d367626f Mon Sep 17 00:00:00 2001
From: andersonid <nobre.it@gmail.com>
Date: Wed, 2 Apr 2025 21:33:56 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20Melhorias=20na=20interface=20do=20modal?=
 =?UTF-8?q?=20de=20detalhes=20do=20militante=20-=20Adicionado=20efeito=20d?=
 =?UTF-8?q?e=20blur=20consistente=20em=20todos=20os=20modais=20-=20Corrigi?=
 =?UTF-8?q?do=20estilo=20do=20bot=C3=A3o=20de=20editar=20para=20manter=20a?=
 =?UTF-8?q?=20cor=20azul=20padr=C3=A3o=20-=20Adicionado=20backdrop-filter?=
 =?UTF-8?q?=20no=20modal=20de=20confirma=C3=A7=C3=A3o=20de=20exclus=C3=A3o?=
 =?UTF-8?q?=20-=20Melhorias=20na=20responsividade=20dos=20modais=20para=20?=
 =?UTF-8?q?dispositivos=20m=C3=B3veis=20-=20Ajustado=20comportamento=20de?=
 =?UTF-8?q?=20fechamento=20dos=20modais?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 templates/home.html | 204 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 203 insertions(+), 1 deletion(-)

diff --git a/templates/home.html b/templates/home.html
index 2d52ce9..893d7cc 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -112,7 +112,7 @@
                 {% if ultimos_militantes %}
                 <div class="list-group list-group-flush">
                     {% for militante in ultimos_militantes %}
-                    <a href="{{ url_for('editar_militante', id=militante.id) }}" class="list-group-item list-group-item-action">
+                    <a href="#" class="list-group-item list-group-item-action" data-militante-id="{{ militante.id }}">
                         <div class="d-flex w-100 justify-content-between">
                             <h6 class="mb-1">{{ militante.nome }}</h6>
                             <small class="text-muted">#{{ militante.id }}</small>
@@ -160,6 +160,77 @@
     {% endif %}
 </div>
 
+<!-- Modal de Detalhes do Militante -->
+<div class="modal fade" id="militanteModal" tabindex="-1" aria-labelledby="militanteModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="militanteModalLabel">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">
+                <a href="#" id="btnEditarMilitante" class="btn btn-primary" style="background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: white !important;">
+                    <i class="fas fa-edit me-1"></i>Editar
+                </a>
+                <button type="button" id="btnExcluirMilitante" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#confirmDeleteModal">
+                    <i class="fas fa-trash me-1"></i>Excluir
+                </button>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Modal de Confirmação de Exclusão -->
+<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">Confirmar Exclusão</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
+            </div>
+            <div class="modal-body">
+                <p>Tem certeza que deseja excluir o militante <strong id="militanteExcluirNome"></strong>?</p>
+                <p class="text-danger mb-0">Esta ação não pode ser desfeita.</p>
+            </div>
+            <div class="modal-footer">
+                <form id="formExcluirMilitante" method="POST">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
+                    <button type="submit" class="btn btn-danger">
+                        <i class="fas fa-trash me-1"></i>Excluir
+                    </button>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
 <style>
 .welcome-header {
     background: linear-gradient(to right, var(--background-color), rgba(232, 0, 12, 0.05));
@@ -200,5 +271,136 @@
     margin-left: 8px;
     margin-top: 4px;
 }
+
+/* Estilo para o backdrop do modal com blur */
+.modal-backdrop.show {
+    backdrop-filter: blur(5px);
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+/* Estilo para o modal */
+.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(--secondary-dark), var(--secondary-color));
+    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;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+/* Ajustes para mobile */
+@media (max-width: 576px) {
+    .modal-footer {
+        justify-content: center;
+    }
+    
+    .modal-footer .btn {
+        min-width: 120px;
+    }
+    
+    .modal-body label {
+        font-size: 0.95rem;
+    }
+}
+
+.modal-body label {
+    color: var(--secondary-color);
+    font-size: 0.9rem;
+}
+
+.modal-body p {
+    font-size: 1rem;
+    color: var(--text-color);
+}
+
+/* Garantir que o modal de confirmação mantenha o backdrop quando aberto */
+#confirmDeleteModal {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+#confirmDeleteModal.show {
+    backdrop-filter: blur(5px);
+}
+
+/* Ajuste para garantir que o botão de editar fique azul */
+.btn-primary, 
+.btn-primary:hover, 
+.btn-primary:focus, 
+.btn-primary:active {
+    background-color: var(--bs-primary) !important;
+    border-color: var(--bs-primary) !important;
+    color: white !important;
+}
 </style>
+
+{% block extra_js %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Dados dos militantes para o modal
+    const militantes = {{ ultimos_militantes|tojson|safe }};
+    
+    // Referência ao modal principal
+    const militanteModal = document.getElementById('militanteModal');
+    
+    // Garantir que o backdrop seja removido ao fechar o modal
+    militanteModal.addEventListener('hidden.bs.modal', function () {
+        const backdrop = document.querySelector('.modal-backdrop');
+        if (backdrop) {
+            backdrop.remove();
+        }
+        document.body.classList.remove('modal-open');
+        document.body.style.overflow = '';
+        document.body.style.paddingRight = '';
+    });
+    
+    // Função para abrir o modal com os dados do militante
+    function showMilitanteModal(militanteId) {
+        const militante = militantes.find(m => m.id === militanteId);
+        if (!militante) return;
+        
+        // Preencher os dados no modal
+        document.getElementById('militanteNome').textContent = militante.nome;
+        document.getElementById('militanteCPF').textContent = militante.cpf;
+        document.getElementById('militanteEmail').textContent = militante.email;
+        document.getElementById('militanteTelefone').textContent = militante.telefone;
+        document.getElementById('militanteEndereco').textContent = militante.endereco;
+        document.getElementById('militanteFiliado').textContent = militante.filiado ? 'Filiado' : 'Não Filiado';
+        
+        // Configurar botões
+        document.getElementById('btnEditarMilitante').href = `/militantes/editar/${militante.id}`;
+        document.getElementById('formExcluirMilitante').action = `/militantes/excluir/${militante.id}`;
+        document.getElementById('militanteExcluirNome').textContent = militante.nome;
+        
+        // Abrir o modal
+        const modal = new bootstrap.Modal(document.getElementById('militanteModal'));
+        modal.show();
+    }
+    
+    // Adicionar evento de clique nos itens da lista
+    document.querySelectorAll('[data-militante-id]').forEach(item => {
+        item.addEventListener('click', function(e) {
+            e.preventDefault();
+            const militanteId = parseInt(this.getAttribute('data-militante-id'));
+            showMilitanteModal(militanteId);
+        });
+    });
+});
+</script>
+{% endblock %}
 {% endblock %} 
\ No newline at end of file