wagtail-enap-designsystem 1.2.1.121__py3-none-any.whl → 1.2.1.123__py3-none-any.whl

enap_designsystem/templates/enap_designsystem/form_templates/formulario_page.html

@@ -22,19 +22,20 @@
         margin: 0;
         padding: 0;
         font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-        {% if page.background_image %}
-        {% for block in page.background_image %}
-            {% if block.block_type == 'background_image' %}
-                {% image block.value max-1920x1080 as bg_image %}
-                background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('{{ bg_image.url }}');
-                background-size: cover;
-                background-position: center;
-                background-attachment: fixed;
-            {% endif %}
-        {% endfor %}
-    {% else %}
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    {% endif %}
+        {% if page.background_image_fundo %}
+            {% for block in page.background_image_fundo %}
+                {% if block.block_type == 'background_image_stream' %}
+                    {% image block.value max-1920x1080 as bg_image %}
+                    background: linear-gradient(rgba(0,125,122,0.3), rgba(0,105,105,0.3)), url('{{ bg_image.url }}');
+                    background-size: cover;
+                    background-position: center;
+                    background-attachment: fixed;
+                {% endif %}
+            {% endfor %}
+        {% else %}
+            /* Gradiente padrão com as novas cores #007D7A e #006969 */
+            background: linear-gradient(135deg, #007D7A 0%, #006969 100%);
+        {% endif %}
         min-height: 100vh;
     }
 
@@ -2090,8 +2091,484 @@ if (input.classList.contains('cnpj-field') && input.value) {
     });
 
 
+    // ========================================
+    // SISTEMA AVANÇADO DE MULTI-REDIRECIONAMENTO
+    // ========================================
+
+    // Variáveis para controle avançado
+    let multiRedirectFields = new Map();
+    let pendingActions = new Map();
+    let conditionalFieldsVisible = new Set();
+
+    // INICIALIZAÇÃO DOS CAMPOS MULTI-REDIRECT
+    function initializeMultiRedirectFields() {
+        console.log('🔀 Inicializando sistema multi-redirecionamento...');
+        
+        const multiRedirectGroups = document.querySelectorAll('.checkbox-multi-redirect-group');
+        
+        multiRedirectGroups.forEach(group => {
+            try {
+                const configData = group.getAttribute('data-field-config');
+                const config = JSON.parse(configData);
+                
+                multiRedirectFields.set(config.fieldId, config);
+                
+                // Configurar listeners baseado no tipo de campo
+                if (config.fieldType === 'checkbox') {
+                    setupCheckboxListeners(group, config);
+                } else if (config.fieldType === 'radio') {
+                    setupRadioListeners(group, config);
+                } else if (config.fieldType === 'dropdown') {
+                    setupDropdownListeners(group, config);
+                }
+                
+                console.log(`✅ Multi-redirect configurado: ${config.fieldId} (${config.fieldType})`);
+                
+            } catch (error) {
+                console.error('❌ Erro configuração multi-redirect:', error);
+            }
+        });
+        
+        console.log(`🔀 ${multiRedirectFields.size} campos multi-redirect ativos`);
+    }
+
+    // CONFIGURAR LISTENERS PARA CHECKBOX
+    function setupCheckboxListeners(group, config) {
+        const checkbox = group.querySelector('.multi-redirect-input');
+        const item = group.querySelector('.multi-redirect-item');
+        
+        if (checkbox && item) {
+            checkbox.addEventListener('change', function(e) {
+                const isChecked = e.target.checked;
+                
+                if (isChecked) {
+                    item.classList.add('selected');
+                    handleOptionSelected(config, 0, config.options[0]); // Primeira opção
+                } else {
+                    item.classList.remove('selected');
+                    handleOptionDeselected(config);
+                }
+            });
+        }
+    }
+
+    // CONFIGURAR LISTENERS PARA RADIO
+    function setupRadioListeners(group, config) {
+        const radios = group.querySelectorAll('.multi-redirect-input');
+        const items = group.querySelectorAll('.multi-redirect-item');
+        
+        radios.forEach((radio, index) => {
+            radio.addEventListener('change', function(e) {
+                if (e.target.checked) {
+                    // Remover seleção anterior
+                    items.forEach(item => item.classList.remove('selected'));
+                    
+                    // Adicionar seleção atual
+                    const selectedItem = e.target.closest('.multi-redirect-item');
+                    if (selectedItem) {
+                        selectedItem.classList.add('selected');
+                    }
+                    
+                    const optionIndex = parseInt(e.target.getAttribute('data-option-index'));
+                    handleOptionSelected(config, optionIndex, config.options[optionIndex]);
+                }
+            });
+        });
+    }
+
+    // CONFIGURAR LISTENERS PARA DROPDOWN
+    function setupDropdownListeners(group, config) {
+        const select = group.querySelector('.multi-redirect-input');
+        
+        if (select) {
+            select.addEventListener('change', function(e) {
+                const selectedOption = e.target.selectedOptions[0];
+                
+                if (selectedOption && selectedOption.value) {
+                    const optionIndex = parseInt(selectedOption.getAttribute('data-option-index'));
+                    handleOptionSelected(config, optionIndex, config.options[optionIndex]);
+                } else {
+                    handleOptionDeselected(config);
+                }
+            });
+        }
+    }
+
+    // GERENCIAR OPÇÃO SELECIONADA
+    function handleOptionSelected(config, optionIndex, option) {
+        console.log(`🎯 Opção selecionada: "${option.value}" - Ação: ${option.action}`);
+        
+        const fieldId = config.fieldId;
+        const group = document.querySelector(`[data-field-id="${fieldId}"]`);
+        
+        // Limpar ações anteriores
+        clearPreviousActions(fieldId);
+        
+        // Mostrar mensagem se configurada
+        if (option.message) {
+            showRedirectMessage(fieldId, optionIndex, option.message);
+        }
+        
+        // Processar ação baseada no tipo
+        switch (option.action) {
+            case 'continue':
+                // Não fazer nada, apenas continuar
+                console.log('➡️ Continuando normalmente');
+                break;
+                
+            case 'next_step':
+                schedulePendingAction(fieldId, {
+                    type: 'next_step',
+                    delay: option.delay || 1,
+                    message: option.message
+                });
+                break;
+                
+            case 'specific_section':
+                if (option.targetSection) {
+                    schedulePendingAction(fieldId, {
+                        type: 'specific_section',
+                        target: option.targetSection,
+                        delay: option.delay || 1,
+                        message: option.message
+                    });
+                }
+                break;
+                
+            case 'skip_to_end':
+                schedulePendingAction(fieldId, {
+                    type: 'skip_to_end',
+                    delay: option.delay || 2,
+                    message: option.message
+                });
+                break;
+                
+            case 'show_fields':
+                showConditionalFields(fieldId, option.value);
+                break;
+        }
+    }
+
+    // GERENCIAR OPÇÃO DESELECIONADA
+    function handleOptionDeselected(config) {
+        const fieldId = config.fieldId;
+        console.log(`❌ Opção deselecionada: ${fieldId}`);
+        
+        clearPreviousActions(fieldId);
+        hideAllConditionalFields(fieldId);
+    }
+
+    // AGENDAR AÇÃO PENDENTE
+    function schedulePendingAction(fieldId, action) {
+        // Adicionar indicador visual
+        const group = document.querySelector(`[data-field-id="${fieldId}"]`);
+        if (group) {
+            group.classList.add('action-pending');
+            
+            let pendingText = '🔄 Processando...';
+            if (action.type === 'next_step') pendingText = '⏩ Próxima etapa...';
+            else if (action.type === 'specific_section') pendingText = '🎯 Redirecionando...';
+            else if (action.type === 'skip_to_end') pendingText = '⏭️ Finalizando...';
+            
+            group.setAttribute('data-pending-action', pendingText);
+        }
+        
+        // Agendar execução
+        pendingActions.set(fieldId, action);
+        
+        console.log(`📅 Ação agendada para ${action.delay}s: ${action.type}`);
+    }
+
+    // LIMPAR AÇÕES ANTERIORES
+    function clearPreviousActions(fieldId) {
+        // Remover ação pendente
+        pendingActions.delete(fieldId);
+        
+        // Remover indicador visual
+        const group = document.querySelector(`[data-field-id="${fieldId}"]`);
+        if (group) {
+            group.classList.remove('action-pending');
+            group.removeAttribute('data-pending-action');
+        }
+        
+        // Ocultar mensagens
+        hideAllRedirectMessages(fieldId);
+    }
+
+    // MOSTRAR MENSAGEM DE REDIRECIONAMENTO
+    function showRedirectMessage(fieldId, optionIndex, message) {
+        const blockId = fieldId.split('_').pop();
+        const messageElement = document.getElementById(`redirect_message_${blockId}_${optionIndex}`);
+        
+        if (messageElement) {
+            messageElement.style.display = 'block';
+            
+            setTimeout(() => {
+                messageElement.scrollIntoView({ 
+                    behavior: 'smooth', 
+                    block: 'center' 
+                });
+            }, 100);
+        }
+    }
 
+    // OCULTAR TODAS AS MENSAGENS
+    function hideAllRedirectMessages(fieldId) {
+        const blockId = fieldId.split('_').pop();
+        const messages = document.querySelectorAll(`[id^="redirect_message_${blockId}_"]`);
+        
+        messages.forEach(message => {
+            message.style.display = 'none';
+        });
+    }
+
+    // MOSTRAR CAMPOS CONDICIONAIS
+    function showConditionalFields(fieldId, optionValue) {
+        const conditionalField = document.querySelector(`[data-parent-field="${fieldId}"][data-option-value="${optionValue}"]`);
+        
+        if (conditionalField) {
+            conditionalField.style.display = 'block';
+            conditionalFieldsVisible.add(`${fieldId}_${optionValue}`);
+            
+            console.log(`👁️ Campos condicionais mostrados para: ${optionValue}`);
+            
+            setTimeout(() => {
+                conditionalField.scrollIntoView({ 
+                    behavior: 'smooth', 
+                    block: 'center' 
+                });
+            }, 200);
+        }
+    }
+
+    // OCULTAR TODOS OS CAMPOS CONDICIONAIS
+    function hideAllConditionalFields(fieldId) {
+        const conditionalFields = document.querySelectorAll(`[data-parent-field="${fieldId}"]`);
+        
+        conditionalFields.forEach(field => {
+            field.style.display = 'none';
+        });
+        
+        // Limpar controle
+        Array.from(conditionalFieldsVisible).forEach(key => {
+            if (key.startsWith(fieldId)) {
+                conditionalFieldsVisible.delete(key);
+            }
+        });
+    }
+
+    // EXECUTAR AÇÃO PENDENTE
+    function executePendingAction(action) {
+        console.log(`🚀 Executando ação: ${action.type}`);
+        
+        switch (action.type) {
+            case 'next_step':
+                executeNextStep();
+                break;
+                
+            case 'specific_section':
+                executeSpecificSection(action.target);
+                break;
+                
+            case 'skip_to_end':
+                executeSkipToEnd();
+                break;
+        }
+    }
+
+    // EXECUTAR PRÓXIMA ETAPA
+    function executeNextStep() {
+        console.log(`➡️ Indo para próxima etapa`);
+        
+        if (currentStep < formSteps) {
+            currentStep++;
+            showStep(currentStep);
+        } else {
+            const form = document.getElementById('wagtailForm');
+            if (form) {
+                form.submit();
+            }
+        }
+    }
+
+    // EXECUTAR SEÇÃO ESPECÍFICA
+    function executeSpecificSection(sectionTitle) {
+        console.log(`🎯 Redirecionando para: "${sectionTitle}"`);
+        
+        const success = redirectToSpecificSection(sectionTitle);
+        if (!success) {
+            console.log(`⚠️ Seção não encontrada, indo para próxima etapa`);
+            executeNextStep();
+        }
+    }
+
+    // EXECUTAR PULAR PARA O FINAL
+    function executeSkipToEnd() {
+        console.log(`⏭️ Pulando para o final`);
+        
+        const form = document.getElementById('wagtailForm');
+        if (form) {
+            let skipField = form.querySelector('input[name="form_multi_redirected"]');
+            if (!skipField) {
+                skipField = document.createElement('input');
+                skipField.type = 'hidden';
+                skipField.name = 'form_multi_redirected';
+                form.appendChild(skipField);
+            }
+            skipField.value = 'true';
+        }
+        
+        currentStep = totalSteps - 1;
+        showStep(currentStep);
+        
+        // Auto-submeter após delay
+        setTimeout(() => {
+            if (form) {
+                console.log('📨 Auto-submetendo formulário');
+                form.submit();
+            }
+        }, 1500);
+    }
+
+    // MODIFICAR VALIDAÇÃO PARA CONSIDERAR AÇÕES PENDENTES
+    const originalValidateCurrentStep = validateCurrentStep;
+    validateCurrentStep = function() {
+        // Executar ações pendentes antes da validação
+        if (pendingActions.size > 0) {
+            console.log(`🔀 ${pendingActions.size} ações pendentes`);
+            
+            const actions = Array.from(pendingActions.values());
+            pendingActions.clear();
+            
+            // Limpar indicadores visuais
+            document.querySelectorAll('.action-pending').forEach(group => {
+                group.classList.remove('action-pending');
+                group.removeAttribute('data-pending-action');
+            });
+            
+            if (actions.length > 0) {
+                setTimeout(() => executePendingAction(actions[0]), (actions[0].delay || 1) * 1000);
+                return true;
+            }
+        }
+        
+        return originalValidateCurrentStep();
+    };
+
+    // MODIFICAR NEXTSTEP PARA CONSIDERAR AÇÕES
+    const originalNextStep = nextStep;
+    nextStep = function() {
+        if (pendingActions.size > 0) {
+            console.log('🔀 Executando ações pendentes...');
+            
+            const actions = Array.from(pendingActions.values());
+            pendingActions.clear();
+            
+            // Limpar indicadores visuais
+            document.querySelectorAll('.action-pending').forEach(group => {
+                group.classList.remove('action-pending');
+                group.removeAttribute('data-pending-action');
+            });
+            
+            if (actions.length > 0) {
+                executePendingAction(actions[0]);
+                return;
+            }
+        }
+        
+        originalNextStep();
+    };
+
+    // FUNÇÃO PARA REDIRECIONAR PARA SEÇÃO ESPECÍFICA (reutilizada)
+    function redirectToSpecificSection(sectionTitle) {
+        console.log(`🎯 Procurando seção: "${sectionTitle}"`);
+        
+        const dividers = document.querySelectorAll('[data-block-type="divider"], .divider-title');
+        
+        for (const divider of dividers) {
+            let dividerTitle = '';
+            
+            if (divider.classList.contains('divider-title')) {
+                dividerTitle = divider.textContent?.trim() || '';
+            } else {
+                const titleElement = divider.querySelector('.divider-title');
+                if (titleElement) {
+                    dividerTitle = titleElement.textContent?.trim() || '';
+                }
+            }
+            
+            if (dividerTitle.toLowerCase().includes(sectionTitle.toLowerCase()) ||
+                sectionTitle.toLowerCase().includes(dividerTitle.toLowerCase())) {
+                
+                console.log(`✅ Seção encontrada: "${dividerTitle}"`);
+                
+                let stepElement = divider;
+                while (stepElement && !stepElement.classList.contains('step-content')) {
+                    stepElement = stepElement.parentElement;
+                }
+                
+                if (stepElement && stepElement.id) {
+                    const stepMatch = stepElement.id.match(/step(\d+)/);
+                    if (stepMatch) {
+                        const targetStep = parseInt(stepMatch[1]);
+                        
+                        if (targetStep >= 1 && targetStep <= formSteps) {
+                            currentStep = targetStep;
+                            showStep(currentStep);
+                            
+                            setTimeout(() => {
+                                const formContent = document.getElementById('formContent');
+                                if (formContent) {
+                                    const offset = 150;
+                                    const elementTop = divider.offsetTop - offset;
+                                    
+                                    formContent.scrollTo({
+                                        top: Math.max(0, elementTop),
+                                        behavior: 'smooth'
+                                    });
+                                }
+                            }, 300);
+                            
+                            return true;
+                        }
+                    }
+                }
+            }
+        }
+        
+        console.log(`❌ Seção "${sectionTitle}" não encontrada`);
+        return false;
+    }
+
+    // INICIALIZAÇÃO
+    document.addEventListener('DOMContentLoaded', function() {
+        setTimeout(() => {
+            initializeMultiRedirectFields();
+        }, 300);
+    });
+
+    // DEBUGGING
+    window.debugMultiRedirect = {
+        fields: () => multiRedirectFields,
+        pending: () => pendingActions,
+        conditionals: () => conditionalFieldsVisible,
+        testSection: (name) => redirectToSpecificSection(name),
+        clearAll: () => {
+            pendingActions.clear();
+            conditionalFieldsVisible.clear();
+            document.querySelectorAll('.action-pending').forEach(group => {
+                group.classList.remove('action-pending');
+                group.removeAttribute('data-pending-action');
+            });
+            console.log('🧹 Multi-redirect limpo');
+        },
+        executeAction: (type, target) => {
+            executePendingAction({ type: type, target: target });
+        }
+    };
 
+    console.log('🔀 Sistema Multi-Redirecionamento Avançado carregado');
+    console.log('🔧 Debug: window.debugMultiRedirect');
 
 </script>
 {% endif %}