wagtail-enap-designsystem 1.2.1.131__py3-none-any.whl → 1.2.1.132__py3-none-any.whl

enap_designsystem/templates/enap_designsystem/form_templates/formulario_page.html

@@ -1336,7 +1336,7 @@
             </div>
 
         <!-- FORMULÁRIO -->
-        <form method="post" id="wagtailForm" enctype="multipart/form-data">
+        <form method="post" id="wagtailForm" enctype="multipart/form-data" novalidate>
             {% csrf_token %}
             
             <!-- STEPS DINÂMICOS -->
@@ -1420,6 +1420,10 @@
 </div>
 
 <script>
+    window.FormularioSystem = window.FormularioSystem || {
+        multiRedirectFields: new Map(),
+        initialized: false
+    };
     // VARIÁVEIS GLOBAIS
     let currentStep = 0;
     let currentActiveWizardIndex = 0;
@@ -1561,33 +1565,30 @@
         const currentStepElement = document.getElementById('step' + currentStep);
         if (!currentStepElement) return true;
         
+        console.log(`Validando step ${currentStep}`);
+        
         let isValid = true;
         const requiredInputs = currentStepElement.querySelectorAll('input[required], select[required], textarea[required]');
         
         for (let i = 0; i < requiredInputs.length; i++) {
             const input = requiredInputs[i];
             
-            // Pular campos que estão dentro de conditional-fields ocultos
-            const conditionalParent = input.closest('.conditional-fields');
-            if (conditionalParent && conditionalParent.style.display === 'none') {
+            // VERIFICAÇÃO MELHORADA - pular campos ocultos
+            const isHidden = (
+                input.style.display === 'none' ||
+                input.offsetParent === null ||
+                input.closest('[style*="display: none"]') ||
+                input.closest('.conditional-fields[style*="display: none"]') ||
+                input.closest('.conditional-condicional-fields[style*="display: none"]')
+            );
+            
+            if (isHidden) {
+                console.log(`Pulando campo oculto: ${input.name}`);
+                // REMOVER temporariamente o required de campos ocultos
+                input.required = false;
                 continue;
             }
             
-            // Pular campos em seções ocultas
-            const sectionElement = input.closest('[data-section-name]');
-            if (sectionElement) {
-                const sectionName = sectionElement.dataset.sectionName;
-                if (hiddenSections.has(sectionName)) {
-                    continue;
-                }
-            }
-            
-            // Limpar erros anteriores
-            const errorDiv = input.parentNode.querySelector('.error-message');
-            if (errorDiv) {
-                errorDiv.style.display = 'none';
-            }
-            
             let hasValue = false;
             
             if (input.type === 'checkbox') {
@@ -1998,6 +1999,9 @@
         
         // Inicializar sistemas
         initializeSmartNavigation();
+
+        initializeConditionalFields();
+        initializeMultiRedirectFields();
         
         // Verificar success na URL primeiro
         if (!checkForSuccess()) {
@@ -2151,123 +2155,466 @@ function hideChildrenQuestions() {
     });
 }
 
-// Modificar a função handleSmartNavigation para incluir a lógica de filhos
-function handleSmartNavigation(element) {
-    const fieldContainer = element.closest('[data-field-type="smart_navigation_field"]');
-    if (!fieldContainer) return;
-    
-    const fieldId = fieldContainer.dataset.fieldId;
-    const selectedValue = getSelectedValue(element);
-    
-    // Verificar se é a pergunta sobre filhos (substitua pelo ID real)
-    if (fieldId.includes('filhos') || fieldContainer.querySelector('label').textContent.toLowerCase().includes('filhos')) {
-        // Encontrar dados de navegação
-        if (!navigationData[fieldId] || !selectedValue) {
+    function handleSmartNavigation(element) {
+        const fieldContainer = element.closest('[data-field-type="smart_navigation_field"], [data-field-type="checkbox_multi_redirect_field"]');
+        if (!fieldContainer) return;
+        
+        const fieldId = fieldContainer.dataset.fieldId;
+        const selectedValue = getSelectedValue(element);
+        
+        console.log(`Smart navigation: ${fieldId} = ${selectedValue}`);
+        
+        if (!selectedValue) return;
+        
+        // Para multi-redirect fields
+        if (fieldContainer.dataset.fieldType === 'checkbox_multi_redirect_field') {
+            const configData = fieldContainer.dataset.fieldConfig;
+            if (configData) {
+                try {
+                    const config = JSON.parse(configData);
+                    const option = config.options.find(opt => opt.value === selectedValue);
+                    
+                    if (option) {
+                        console.log(`Ação encontrada: ${option.action} para ${selectedValue}`);
+                        
+                        // Limpar campos condicionais primeiro
+                        hideAllConditionalFields(fieldId);
+                        
+                        switch(option.action) {
+                            case 'show_fields':
+                                showConditionalFields(fieldId, selectedValue);
+                                break;
+                            case 'skip_to_end':
+                                setTimeout(() => {
+                                    const form = document.getElementById('wagtailForm');
+                                    if (form) form.submit();
+                                }, (option.delay || 1) * 1000);
+                                break;
+                            case 'continue':
+                                console.log('Continuando normalmente');
+                                break;
+                        }
+                    }
+                } catch(e) {
+                    console.error('Erro config multi-redirect:', e);
+                }
+            }
             return;
         }
         
+        // Para smart navigation normal
+        if (!navigationData[fieldId]) return;
         const actionData = navigationData[fieldId][selectedValue];
-        if (!actionData) {
-            return;
-        }
+        if (!actionData) return;
         
-        // Executar lógica específica para filhos
-        handleChildrenNavigation(selectedValue, actionData.target_section);
-        return;
+        switch (actionData.action_type) {
+            case 'jump_to_section':
+                handleJumpToSection(actionData.target_section);
+                break;
+            case 'finish_form':
+                handleFinishForm();
+                break;
+        }
     }
-    
-    // Continuar com lógica normal para outros campos
-    if (!navigationData[fieldId] || !selectedValue) {
-        return;
+
+    function showConditionalFields(fieldId, value) {
+        console.log(`Mostrando campos condicionais para ${fieldId} = ${value}`);
+        
+        // Primeiro: esconder TODOS os campos condicionais deste campo
+        hideAllConditionalFields(fieldId);
+        
+        // Segundo: mostrar apenas o campo específico para este valor
+        const specificField = document.querySelector(
+            `[data-parent-field="${fieldId}"][data-option-value="${value}"]`
+        );
+        
+        if (specificField) {
+            specificField.style.display = 'block';
+            
+            // Animação suave
+            specificField.style.opacity = '0';
+            specificField.style.transform = 'translateY(-10px)';
+            
+            setTimeout(() => {
+                specificField.style.transition = 'all 0.3s ease';
+                specificField.style.opacity = '1';
+                specificField.style.transform = 'translateY(0)';
+            }, 10);
+            
+            console.log(`✅ Campo condicional mostrado para valor: ${value}`);
+            
+            // Scroll suave para o campo que apareceu
+            setTimeout(() => {
+                specificField.scrollIntoView({ 
+                    behavior: 'smooth', 
+                    block: 'nearest' 
+                });
+            }, 200);
+        } else {
+            console.log(`⚠️ Nenhum campo condicional encontrado para valor: ${value}`);
+        }
     }
     
-    const actionData = navigationData[fieldId][selectedValue];
-    if (!actionData) {
-        return;
+    function hideAllConditionalFields(fieldId) {
+        // Esconder apenas os campos condicionais DESTE campo específico
+        const conditionalFields = document.querySelectorAll(`[data-parent-field="${fieldId}"]`);
+        
+        conditionalFields.forEach(field => {
+            field.style.display = 'none';
+            
+            // Limpar valores dos campos ocultos
+            const inputs = field.querySelectorAll('input, select, textarea');
+            inputs.forEach(input => {
+                if (input.type === 'checkbox' || input.type === 'radio') {
+                    input.checked = false;
+                } else {
+                    input.value = '';
+                }
+                input.required = false;
+            });
+        });
+        
+        console.log(`Campos condicionais ocultos para: ${fieldId}`);
     }
+
+    // SUBSTITUA as funções de campos condicionais por estas:
+
+document.addEventListener('DOMContentLoaded', function() {
+    console.log('DOM carregado - inicializando campos condicionais');
+    
+    // Aguardar um pouco para garantir que tudo carregou
+    setTimeout(() => {
+        initializeAllConditionalFields();
+    }, 500);
+});
+
+function initializeAllConditionalFields() {
+    // Campos conditional_field_condicional
+    const triggers = document.querySelectorAll('select[data-field-id*="conditional_field_condicional"]');
+    console.log(`Triggers encontrados: ${triggers.length}`);
     
-    console.log(`Navegação ativada: ${fieldId} -> ${selectedValue}`);
-    
-    // Executar ação baseada no tipo
-    switch (actionData.action_type) {
-        case 'continue':
-            console.log('Continuando navegação normal');
-            break;
+    triggers.forEach(trigger => {
+        console.log(`Configurando trigger: ${trigger.id}`);
+        
+        trigger.addEventListener('change', function() {
+            const fieldId = this.dataset.fieldId;
+            const selectedValue = this.value;
             
-        case 'jump_to_section':
-            handleJumpToSection(actionData.target_section);
-            break;
+            console.log(`Mudança detectada: ${fieldId} = "${selectedValue}"`);
             
-        case 'finish_form':
-            handleFinishForm();
-            break;
+            // Encontrar containers condicionais
+            const containers = document.querySelectorAll(`[data-parent-field="${fieldId}"]`);
+            console.log(`Containers encontrados: ${containers.length}`);
+            
+            // Esconder todos primeiro
+            containers.forEach(container => {
+                container.style.display = 'none';
+                console.log(`Ocultando container com triggerValue: ${container.dataset.triggerValue}`);
+            });
             
-        case 'show_message_and_finish':
-            handleShowMessageAndFinish(actionData);
-            break;
+            // Mostrar apenas o correto
+            if (selectedValue) {
+                const targetContainer = document.querySelector(`[data-parent-field="${fieldId}"][data-trigger-value="${selectedValue}"]`);
+                if (targetContainer) {
+                    targetContainer.style.display = 'block';
+                    console.log(`Mostrando container para: ${selectedValue}`);
+                } else {
+                    console.log(`Container não encontrado para valor: ${selectedValue}`);
+                }
+            }
+        });
+    });
+    
+    // Multi-redirect fields
+    const multiRedirectGroups = document.querySelectorAll('.checkbox-multi-redirect-group');
+    console.log(`Multi-redirect groups: ${multiRedirectGroups.length}`);
+    
+    multiRedirectGroups.forEach(group => {
+        const inputs = group.querySelectorAll('.multi-redirect-input');
+        const fieldId = group.dataset.fieldId;
+        
+        inputs.forEach(input => {
+            input.addEventListener('change', function() {
+                const selectedValue = this.value;
+                const configData = group.dataset.fieldConfig;
+                
+                console.log(`Multi-redirect mudou: ${fieldId} = "${selectedValue}"`);
+                
+                if (configData) {
+                    try {
+                        const config = JSON.parse(configData);
+                        const option = config.options.find(opt => opt.value === selectedValue);
+                        
+                        if (option) {
+                            console.log(`Ação: ${option.action} para ${selectedValue}`);
+                            
+                            // Mostrar mensagem se configurada
+                            if (option.message) {
+                                showRedirectMessage(fieldId, option, config.options.indexOf(option));
+                            }
+                            
+                            if (option.action === 'skip_to_end') {
+                                console.log('Finalizando formulário...');
+                                
+                                // Mostrar mensagem por X segundos antes de finalizar
+                                const delay = (option.delay || 1) * 1000;
+                                
+                                setTimeout(() => {
+                                    const form = document.getElementById('wagtailForm');
+                                    if (form) {
+                                        form.submit();
+                                    } else {
+                                        console.log('Formulário não encontrado!');
+                                    }
+                                }, delay);
+                            }
+                        }
+                    } catch(e) {
+                        console.error('Erro ao processar config:', e);
+                    }
+                }
+            });
+        });
+    });
     }
-}
 
-// Função melhorada para redirecionar para seção específica
-function redirectToSpecificSection(sectionTitle) {
-    console.log(`Procurando seção: "${sectionTitle}"`);
-    
-    // Procurar por diferentes tipos de elementos que podem conter o título da seção
-    const selectors = [
-        '.divider-title',
-        '.section-title', 
-        '[data-section-title]',
-        'h2', 'h3', 'h4'
-    ];
+    function showRedirectMessage(fieldId, option, optionIndex) {
+        const blockId = fieldId.split('_').pop();
+        const messageEl = document.getElementById(`redirect_message_${blockId}_${optionIndex}`);
+        
+        if (messageEl) {
+            messageEl.style.display = 'block';
+            console.log(`Mensagem mostrada: ${option.message}`);
+            
+            // Scroll para a mensagem
+            setTimeout(() => {
+                messageEl.scrollIntoView({ 
+                    behavior: 'smooth', 
+                    block: 'center' 
+                });
+            }, 100);
+        } else {
+            console.log(`Elemento de mensagem não encontrado: redirect_message_${blockId}_${optionIndex}`);
+        }
+    }
     
-    for (let selector of selectors) {
-        const elements = document.querySelectorAll(selector);
+    function handleConditionalFieldFixed(triggerElement) {
+        const fieldId = triggerElement.dataset.fieldId;
+        const selectedValue = triggerElement.value;
+        
+        console.log(`🎯 Campo condicional: ${fieldId} = "${selectedValue}"`);
+        
+        // Encontrar APENAS os divs condicionais diretos
+        const conditionalContainers = document.querySelectorAll(`div[data-parent-field="${fieldId}"]`);
         
-        for (let element of elements) {
-            const elementText = element.textContent?.trim() || '';
-            const dataTitle = element.dataset.sectionTitle || '';
+        console.log(`Containers encontrados: ${conditionalContainers.length}`);
+        
+        conditionalContainers.forEach((container, index) => {
+            const triggerValue = container.dataset.triggerValue;
+            console.log(`Container ${index}: triggerValue="${triggerValue}", selectedValue="${selectedValue}"`);
             
-            // Verificar se o texto corresponde (ignorando case e espaços extras)
-            if (elementText.toLowerCase().includes(sectionTitle.toLowerCase()) ||
-                dataTitle.toLowerCase().includes(sectionTitle.toLowerCase()) ||
-                sectionTitle.toLowerCase().includes(elementText.toLowerCase())) {
+            if (selectedValue === triggerValue) {
+                console.log(`✅ Mostrando container para valor: ${triggerValue}`);
+                container.style.display = 'block';
                 
-                console.log(`Seção encontrada: "${elementText}"`);
+                // Reativar campos dentro do container
+                const inputs = container.querySelectorAll('input, select, textarea');
+                inputs.forEach(input => {
+                    if (input.dataset.wasRequired === 'true') {
+                        input.required = true;
+                    }
+                });
+            } else {
+                console.log(`❌ Ocultando container para valor: ${triggerValue}`);
+                container.style.display = 'none';
                 
-                // Scroll suave para a seção
-                setTimeout(() => {
-                    const formContent = document.getElementById('formContent');
-                    if (formContent) {
-                        const offset = 120;
-                        const elementPosition = element.getBoundingClientRect().top + 
-                                              formContent.scrollTop - offset;
-                        
-                        formContent.scrollTo({
-                            top: elementPosition,
-                            behavior: 'smooth'
-                        });
-                        
-                        // Destacar temporariamente a seção
-                        element.style.background = 'rgba(42, 94, 44, 0.1)';
-                        element.style.padding = '1rem';
-                        element.style.borderRadius = '8px';
-                        element.style.transition = 'all 0.3s ease';
+                // Desativar campos dentro do container
+                const inputs = container.querySelectorAll('input, select, textarea');
+                inputs.forEach(input => {
+                    if (!input.dataset.wasRequired) {
+                        input.dataset.wasRequired = input.required ? 'true' : 'false';
+                    }
+                    input.required = false;
+                    
+                    // Limpar valores
+                    if (input.type === 'checkbox' || input.type === 'radio') {
+                        input.checked = false;
+                    } else {
+                        input.value = '';
+                    }
+                });
+            }
+        });
+    }
+    
+    function initializeMultiRedirectFields() {
+        const groups = document.querySelectorAll('.checkbox-multi-redirect-group');
+        
+        groups.forEach(group => {
+            const fieldId = group.dataset.fieldId;
+            const inputs = group.querySelectorAll('.multi-redirect-input');
+            
+            inputs.forEach(input => {
+                input.addEventListener('change', function() {
+                    const selectedValue = this.value;
+                    
+                    console.log(`Multi-redirect mudou: ${fieldId} = ${selectedValue}`);
+                    
+                    // Limpar todos os campos condicionais deste grupo primeiro
+                    hideAllConditionalFields(fieldId);
+                    
+                    // Se tem valor selecionado, mostrar campos específicos
+                    if (this.checked || (this.tagName === 'SELECT' && selectedValue)) {
+                        // Verificar se tem campos condicionais para esta opção
+                        const conditionalField = document.querySelector(
+                            `[data-parent-field="${fieldId}"][data-option-value="${selectedValue}"]`
+                        );
                         
-                        setTimeout(() => {
-                            element.style.background = '';
-                            element.style.padding = '';
-                        }, 2000);
+                        if (conditionalField) {
+                            conditionalField.style.display = 'block';
+                            console.log(`Mostrando campos condicionais para: ${selectedValue}`);
+                            
+                            // Animação suave
+                            setTimeout(() => {
+                                conditionalField.scrollIntoView({ 
+                                    behavior: 'smooth', 
+                                    block: 'nearest' 
+                                });
+                            }, 200);
+                        } else {
+                            console.log(`Nenhum campo condicional configurado para: ${selectedValue}`);
+                        }
                     }
-                }, 100);
+                });
+            });
+            
+            console.log(`Multi-redirect configurado: ${fieldId}`);
+        });
+        
+        console.log(`Multi-redirect fields inicializados: ${groups.length}`);
+    }
+    
+    function hideAllConditionalFields(fieldId) {
+        // Esconder apenas os campos condicionais DESTE campo específico
+        const conditionalFields = document.querySelectorAll(`[data-parent-field="${fieldId}"].multi-redirect-fields`);
+        
+        conditionalFields.forEach(field => {
+            field.style.display = 'none';
+            
+            // Limpar valores dos campos ocultos
+            const inputs = field.querySelectorAll('input, select, textarea');
+            inputs.forEach(input => {
+                if (input.type === 'checkbox' || input.type === 'radio') {
+                    input.checked = false;
+                } else {
+                    input.value = '';
+                }
+                input.required = false;
+            });
+        });
+        
+        console.log(`Campos condicionais multi-redirect ocultos para: ${fieldId}`);
+    }
+
+    // Função melhorada para redirecionar para seção específica
+    function redirectToSpecificSection(sectionTitle) {
+        console.log(`Procurando seção: "${sectionTitle}"`);
+        
+        // Procurar por diferentes tipos de elementos que podem conter o título da seção
+        const selectors = [
+            '.divider-title',
+            '.section-title', 
+            '[data-section-title]',
+            'h2', 'h3', 'h4'
+        ];
+        
+        for (let selector of selectors) {
+            const elements = document.querySelectorAll(selector);
+            
+            for (let element of elements) {
+                const elementText = element.textContent?.trim() || '';
+                const dataTitle = element.dataset.sectionTitle || '';
                 
-                return true;
+                // Verificar se o texto corresponde (ignorando case e espaços extras)
+                if (elementText.toLowerCase().includes(sectionTitle.toLowerCase()) ||
+                    dataTitle.toLowerCase().includes(sectionTitle.toLowerCase()) ||
+                    sectionTitle.toLowerCase().includes(elementText.toLowerCase())) {
+                    
+                    console.log(`Seção encontrada: "${elementText}"`);
+                    
+                    // Scroll suave para a seção
+                    setTimeout(() => {
+                        const formContent = document.getElementById('formContent');
+                        if (formContent) {
+                            const offset = 120;
+                            const elementPosition = element.getBoundingClientRect().top + 
+                                                formContent.scrollTop - offset;
+                            
+                            formContent.scrollTo({
+                                top: elementPosition,
+                                behavior: 'smooth'
+                            });
+                            
+                            // Destacar temporariamente a seção
+                            element.style.background = 'rgba(42, 94, 44, 0.1)';
+                            element.style.padding = '1rem';
+                            element.style.borderRadius = '8px';
+                            element.style.transition = 'all 0.3s ease';
+                            
+                            setTimeout(() => {
+                                element.style.background = '';
+                                element.style.padding = '';
+                            }, 2000);
+                        }
+                    }, 100);
+                    
+                    return true;
+                }
             }
         }
+        
+        console.log(`Seção "${sectionTitle}" não encontrada`);
+        return false;
     }
+
+
+
+
+
+// ADICIONE esta função para debug
+window.testConditional = function() {
+    console.log('=== TESTE MANUAL ===');
+    
+    // Listar todos os selects
+    const selects = document.querySelectorAll('select');
+    console.log(`Total de selects: ${selects.length}`);
+    
+    selects.forEach((select, i) => {
+        console.log(`Select ${i}:`, {
+            id: select.id,
+            name: select.name,
+            fieldId: select.dataset.fieldId,
+            classes: select.className
+        });
+    });
     
-    console.log(`Seção "${sectionTitle}" não encontrada`);
-    return false;
-}
+    // Listar containers condicionais
+    const containers = document.querySelectorAll('[data-parent-field]');
+    console.log(`Containers condicionais: ${containers.length}`);
+    
+    containers.forEach((container, i) => {
+        console.log(`Container ${i}:`, {
+            parentField: container.dataset.parentField,
+            triggerValue: container.dataset.triggerValue,
+            display: container.style.display
+        });
+    });
+};
+
+
+
+
+
 </script>