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

enap_designsystem/templates/enap_designsystem/includes/form_field.html

@@ -1,7 +1,189 @@
 <!-- home/templates/home/includes/form_field.html -->
 {% load wagtailcore_tags %}
 {% load wagtailimages_tags %}
-
+<style>
+    .conditional-fields {
+        border-left: 4px solid var(--primary-color);
+        background: #f8f9fa;
+        border-radius: 8px;
+        position: relative;
+    }
+    
+    .conditional-header h4 {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    
+    .checkbox-multi-redirect-group {
+        position: relative;
+        margin-bottom: 2rem;
+    }
+    
+    .multi-redirect-item {
+        border: 2px solid #e1e5e9;
+        border-radius: 12px;
+        padding: 1.2rem;
+        margin-bottom: 0.75rem;
+        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+        transition: all 0.3s ease;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+    }
+    
+    .multi-redirect-item:hover {
+        border-color: var(--primary-color, #2A5E2C);
+        background: linear-gradient(135deg, rgba(42, 94, 44, 0.02) 0%, #ffffff 100%);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 15px rgba(42, 94, 44, 0.1);
+    }
+    
+    .multi-redirect-item.selected {
+        border-color: var(--primary-color, #2A5E2C);
+        background: linear-gradient(135deg, rgba(42, 94, 44, 0.05) 0%, #ffffff 100%);
+        box-shadow: 0 4px 15px rgba(42, 94, 44, 0.15);
+    }
+    
+    .multi-redirect-input[type="checkbox"],
+    .multi-redirect-input[type="radio"] {
+        width: 20px !important;
+        height: 20px !important;
+        margin-right: 1rem;
+        accent-color: var(--primary-color, #2A5E2C);
+        transform: scale(1.2);
+        flex-shrink: 0;
+    }
+    
+    .checkbox-label,
+    .radio-label {
+        font-size: 1.1rem;
+        font-weight: 500;
+        color: #434A54;
+        cursor: pointer;
+        margin: 0 !important;
+        flex: 1;
+    }
+    
+    .multi-redirect-radio-group {
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+    }
+    
+    /* Dropdown especial */
+    .multi-redirect-input.form-control {
+        border: 2px solid #e1e5e9;
+        border-radius: 12px;
+        padding: 1rem;
+        font-size: 1.1rem;
+        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+        transition: all 0.3s ease;
+    }
+    
+    .multi-redirect-input.form-control:focus {
+        border-color: var(--primary-color, #2A5E2C);
+        background: white;
+        box-shadow: 0 0 0 3px rgba(42, 94, 44, 0.1);
+    }
+    
+    /* Mensagens de redirecionamento */
+    .multi-redirect-message {
+        animation: slideDown 0.5s ease-out;
+    }
+    
+    .multi-redirect-message .redirect-message-content {
+        padding: 0.5rem;
+    }
+    
+    /* Campos condicionais */
+    .multi-redirect-fields {
+        animation: expandDown 0.4s ease-out;
+        border-left: 4px solid var(--primary-color, #2A5E2C) !important;
+    }
+    
+    .conditional-header {
+        border-bottom: 1px solid rgba(42, 94, 44, 0.1);
+        padding-bottom: 0.75rem;
+    }
+    
+    /* Indicador de ação pendente */
+    .checkbox-multi-redirect-group.action-pending {
+        position: relative;
+    }
+    
+    .checkbox-multi-redirect-group.action-pending::after {
+        content: attr(data-pending-action);
+        position: absolute;
+        top: -10px;
+        right: 10px;
+        background: var(--primary-color, #2A5E2C);
+        color: white;
+        padding: 0.25rem 0.75rem;
+        border-radius: 15px;
+        font-size: 0.75rem;
+        font-weight: 600;
+        z-index: 10;
+        animation: pulse 2s infinite;
+    }
+    
+    /* Animações */
+    @keyframes slideDown {
+        from {
+            opacity: 0;
+            max-height: 0;
+            transform: translateY(-10px);
+        }
+        to {
+            opacity: 1;
+            max-height: 300px;
+            transform: translateY(0);
+        }
+    }
+    
+    @keyframes expandDown {
+        from {
+            opacity: 0;
+            max-height: 0;
+            transform: scaleY(0.8);
+        }
+        to {
+            opacity: 1;
+            max-height: 1000px;
+            transform: scaleY(1);
+        }
+    }
+    
+    @keyframes pulse {
+        0% { opacity: 0.8; transform: scale(1); }
+        50% { opacity: 1; transform: scale(1.05); }
+        100% { opacity: 0.8; transform: scale(1); }
+    }
+    
+    /* Responsivo */
+    @media (max-width: 768px) {
+        .multi-redirect-item {
+            padding: 1rem;
+            flex-direction: row;
+            align-items: flex-start;
+        }
+        
+        .multi-redirect-input[type="checkbox"],
+        .multi-redirect-input[type="radio"] {
+            transform: scale(1.1);
+            margin-top: 0.2rem;
+        }
+        
+        .checkbox-label,
+        .radio-label {
+            font-size: 1rem;
+        }
+        
+        .multi-redirect-fields {
+            padding: 1rem;
+        }
+    }
+    </style>
 
 
 {% if block.block_type == 'section_header' %}
@@ -572,9 +754,140 @@
         </div>
     </div>
 
-
-    
-
+    {% elif block.block_type == 'checkbox_multi_redirect_field' %}
+    <div class="form-group checkbox-multi-redirect-group" 
+         data-field-type="checkbox_multi_redirect_field" 
+         data-field-id="{{ block.block_type }}_{{ block.id }}"
+         data-field-config='{
+            "fieldId": "{{ block.block_type }}_{{ block.id }}",
+            "fieldType": "{{ block.value.field_type }}",
+            "options": [
+                {% for option_block in block.value.redirect_options %}
+                {
+                    "value": "{{ option_block.value.value|escapejs }}",
+                    "action": "{{ option_block.value.action }}",
+                    "targetSection": "{{ option_block.value.target_section_title|default:''|escapejs }}",
+                    "message": "{{ option_block.value.redirect_message|striptags|default:''|escapejs }}",
+                    "delay": {{ option_block.value.delay_seconds|default:1 }}
+                }{% if not forloop.last %},{% endif %}
+                {% endfor %}
+            ]
+         }'>
+        
+        <!-- Label principal -->
+        <label class="form-label">
+            {{ block.value.label }}
+            {% if block.value.required %}<span class="required">*</span>{% endif %}
+        </label>
+        
+        <!-- Texto de ajuda -->
+        {% if block.value.help_text %}
+            <div class="help-text">{{ block.value.help_text }}</div>
+        {% endif %}
+        
+        <!-- Renderizar campo baseado no tipo -->
+        {% if block.value.field_type == 'checkbox' %}
+            <!-- Checkbox único (primeira opção) -->
+            {% for option_block in block.value.redirect_options|slice:":1" %}
+                <div class="checkbox-item multi-redirect-item" data-option-value="{{ option_block.value.value }}">
+                    <input 
+                        type="checkbox" 
+                        id="{{ block.block_type }}_{{ block.id }}" 
+                        name="{{ block.block_type }}_{{ block.id }}"
+                        value="{{ option_block.value.value }}"
+                        {% if block.value.required %}required{% endif %}
+                        class="multi-redirect-input"
+                        data-option-index="0"
+                    >
+                    <label for="{{ block.block_type }}_{{ block.id }}" class="checkbox-label">
+                        {{ option_block.value.value }}
+                    </label>
+                </div>
+            {% endfor %}
+            
+        {% elif block.value.field_type == 'radio' %}
+            <!-- Múltiplos radio buttons -->
+            <div class="radio-group multi-redirect-radio-group">
+                {% for option_block in block.value.redirect_options %}
+                    <div class="radio-item multi-redirect-item" data-option-value="{{ option_block.value.value }}">
+                        <input 
+                            type="radio" 
+                            id="{{ block.block_type }}_{{ block.id }}_{{ forloop.counter }}" 
+                            name="{{ block.block_type }}_{{ block.id }}"
+                            value="{{ option_block.value.value }}"
+                            {% if block.value.required %}required{% endif %}
+                            class="multi-redirect-input"
+                            data-option-index="{{ forloop.counter0 }}"
+                        >
+                        <label for="{{ block.block_type }}_{{ block.id }}_{{ forloop.counter }}" class="radio-label">
+                            {{ option_block.value.value }}
+                        </label>
+                    </div>
+                {% endfor %}
+            </div>
+            
+        {% else %}
+            <!-- Dropdown -->
+            <select 
+                id="{{ block.block_type }}_{{ block.id }}" 
+                name="{{ block.block_type }}_{{ block.id }}"
+                class="form-control multi-redirect-input"
+                {% if block.value.required %}required{% endif %}
+            >
+                <option value="">Selecione uma opção...</option>
+                {% for option_block in block.value.redirect_options %}
+                    <option value="{{ option_block.value.value }}" data-option-index="{{ forloop.counter0 }}">
+                        {{ option_block.value.value }}
+                    </option>
+                {% endfor %}
+            </select>
+        {% endif %}
+        
+        <!-- Mensagens de redirecionamento para cada opção -->
+        {% for option_block in block.value.redirect_options %}
+            {% if option_block.value.redirect_message %}
+                <div class="redirect-message multi-redirect-message" 
+                     id="redirect_message_{{ block.id }}_{{ forloop.counter0 }}" 
+                     style="display: none; margin-top: 1rem;">
+                    <div class="info-block info-info">
+                        <div class="redirect-message-content">
+                            <strong>
+                                {% if option_block.value.action == 'next_step' %}⏩ Avançando...
+                                {% elif option_block.value.action == 'specific_section' %}🎯 Redirecionando...
+                                {% elif option_block.value.action == 'skip_to_end' %}⏭️ Finalizando...
+                                {% else %}ℹ️ Informação:
+                                {% endif %}
+                            </strong>
+                            {{ option_block.value.redirect_message|richtext }}
+                        </div>
+                    </div>
+                </div>
+            {% endif %}
+        {% endfor %}
+        
+        <!-- 🎯 CAMPOS CONDICIONAIS PARA CADA OPÇÃO -->
+        {% for option_block in block.value.redirect_options %}
+            {% if option_block.value.action == 'show_fields' and option_block.value.fields_to_show %}
+                <div class="conditional-fields multi-redirect-fields" 
+                     data-option-value="{{ option_block.value.value }}"
+                     data-parent-field="{{ block.block_type }}_{{ block.id }}"
+                     style="display: none; margin-top: 1.5rem; padding: 1.5rem; border: 2px solid var(--primary-color, #2A5E2C); border-radius: 12px; background: linear-gradient(135deg, rgba(42, 94, 44, 0.02) 0%, #ffffff 100%);">
+                    
+                    <div class="conditional-header" style="margin-bottom: 1rem;">
+                        
+                    </div>
+                    
+                    <!-- 🚀 RENDERIZAR CAMPOS CONDICIONAIS -->
+                    {% for field_block in option_block.value.fields_to_show %}
+                        {% include 'enap_designsystem/includes/form_field.html' with block=field_block %}
+                    {% endfor %}
+                </div>
+            {% endif %}
+        {% endfor %}
+        
+        <!-- Campo de erro -->
+        <div class="error-message" style="display: none;"></div>
+    </div>
 
         <!-- {% elif block.block_type == 'estado_cidade_field' %}
         <div class="form-group estado-cidade-group" data-layout="{{ block.value.layout }}">
@@ -687,6 +1000,8 @@
         {% endif %}
     </div>
 
+    
+
 {% endif %}
 
 <script>
@@ -910,7 +1225,349 @@ document.addEventListener('DOMContentLoaded', function() {
 });
 
 
+// ADICIONE ESTE CÓDIGO AO FINAL DO SEU <script> NO form_field.html
+
+// ========================================
+// SISTEMA MULTI-REDIRECIONAMENTO
+// ========================================
+
+// Variáveis de controle
+let multiRedirectFields = new Map();
+let pendingActions = new Map();
+
+// INICIALIZAÇÃO DOS CAMPOS MULTI-REDIRECT
+function initializeMultiRedirectFields() {
+    console.log('🔀 Inicializando multi-redirecionamento...');
+    
+    const groups = document.querySelectorAll('.checkbox-multi-redirect-group');
+    console.log(`🔍 Encontrados ${groups.length} grupos multi-redirect`);
+    
+    groups.forEach(group => {
+        try {
+            const configData = group.getAttribute('data-field-config');
+            if (!configData) {
+                console.log('⚠️ Configuração não encontrada para grupo:', group);
+                return;
+            }
+            
+            const config = JSON.parse(configData);
+            multiRedirectFields.set(config.fieldId, config);
+            
+            const inputs = group.querySelectorAll('.multi-redirect-input');
+            inputs.forEach(input => {
+                input.addEventListener('change', function() {
+                    handleMultiRedirectChange(config, this);
+                });
+            });
+            
+            console.log(`✅ Campo configurado: ${config.fieldId} (${config.fieldType})`);
+            
+        } catch (error) {
+            console.error('❌ Erro configuração multi-redirect:', error, group);
+        }
+    });
+    
+    console.log(`🔀 ${multiRedirectFields.size} campos multi-redirect ativos`);
+}
+
+// GERENCIAR MUDANÇA NO CAMPO
+function handleMultiRedirectChange(config, input) {
+    const value = input.value;
+    const isSelected = input.checked || (input.tagName === 'SELECT' && value);
+    
+    console.log(`🎯 Campo ${config.fieldId}: valor="${value}", selecionado=${isSelected}`);
+    
+    // Para radio e select, sempre processar se tem valor
+    // Para checkbox, só processar se estiver marcado
+    const shouldProcess = (config.fieldType === 'checkbox') ? input.checked : Boolean(value);
+    
+    if (!shouldProcess) {
+        hideAllMessages(config.fieldId);
+        hideAllConditionalFields(config.fieldId);
+        return;
+    }
+    
+    const option = config.options.find(opt => opt.value === value);
+    if (!option) {
+        console.log(`⚠️ Opção não encontrada para valor: ${value}`);
+        return;
+    }
+    
+    console.log(`🚀 Executando ação: ${option.action} para "${option.value}"`);
+    
+    // Limpar ações/mensagens anteriores
+    clearPreviousActions(config.fieldId);
+    
+    // Mostrar mensagem se configurada
+    if (option.message) {
+        showMultiRedirectMessage(config.fieldId, option);
+    }
+    
+    // Processar ação
+    const delay = (option.delay || 1) * 1000;
+    
+    switch (option.action) {
+        case 'continue':
+            console.log('➡️ Continuando normalmente');
+            break;
+            
+        case 'next_step':
+            console.log('⏩ Programando próxima etapa');
+            setTimeout(() => {
+                if (typeof nextStep === 'function') {
+                    nextStep();
+                } else {
+                    console.log('⚠️ Função nextStep não encontrada');
+                }
+            }, delay);
+            break;
+            
+        case 'specific_section':
+            if (option.targetSection) {
+                console.log(`🎯 Programando redirecionamento para: ${option.targetSection}`);
+                setTimeout(() => {
+                    if (typeof redirectToSpecificSection === 'function') {
+                        redirectToSpecificSection(option.targetSection);
+                    } else {
+                        console.log('⚠️ Função redirectToSpecificSection não encontrada');
+                    }
+                }, delay);
+            }
+            break;
+            
+        case 'skip_to_end':
+            console.log('⏭️ Programando finalização');
+            setTimeout(() => {
+                skipToFinalStep();
+            }, delay);
+            break;
+            
+        case 'show_fields':
+            console.log(`👁️ Mostrando campos condicionais para: ${value}`);
+            showConditionalFields(config.fieldId, value);
+            break;
+    }
+}
+
+// MOSTRAR MENSAGEM DE REDIRECIONAMENTO
+function showMultiRedirectMessage(fieldId, option) {
+    const blockId = fieldId.split('_').pop();
+    const optionIndex = multiRedirectFields.get(fieldId).options.findIndex(opt => opt.value === option.value);
+    const messageEl = document.getElementById(`redirect_message_${blockId}_${optionIndex}`);
+    
+    if (messageEl) {
+        messageEl.style.display = 'block';
+        console.log(`💬 Mensagem mostrada para opção: ${option.value}`);
+        
+        setTimeout(() => {
+            messageEl.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'center' 
+            });
+        }, 100);
+    }
+}
+
+// MOSTRAR CAMPOS CONDICIONAIS
+function showConditionalFields(fieldId, value) {
+    // Primeiro esconder todos os campos condicionais deste campo
+    hideAllConditionalFields(fieldId);
+    
+    // Mostrar apenas o campo correspondente ao valor selecionado
+    const conditionalField = document.querySelector(
+        `[data-parent-field="${fieldId}"][data-option-value="${value}"]`
+    );
+    
+    if (conditionalField) {
+        conditionalField.style.display = 'block';
+        console.log(`👁️ Campos condicionais mostrados para: ${value}`);
+        
+        setTimeout(() => {
+            conditionalField.scrollIntoView({ 
+                behavior: 'smooth', 
+                block: 'center' 
+            });
+        }, 200);
+    }
+}
+
+// OCULTAR TODAS AS MENSAGENS
+function hideAllMessages(fieldId) {
+    const blockId = fieldId.split('_').pop();
+    const messages = document.querySelectorAll(`[id^="redirect_message_${blockId}_"]`);
+    
+    messages.forEach(message => {
+        message.style.display = 'none';
+    });
+}
+
+// OCULTAR TODOS OS CAMPOS CONDICIONAIS
+function hideAllConditionalFields(fieldId) {
+    const conditionalFields = document.querySelectorAll(`[data-parent-field="${fieldId}"]`);
+    
+    conditionalFields.forEach(field => {
+        field.style.display = 'none';
+    });
+}
+
+// LIMPAR AÇÕES ANTERIORES
+function clearPreviousActions(fieldId) {
+    pendingActions.delete(fieldId);
+    hideAllMessages(fieldId);
+}
+
+// PULAR PARA ETAPA FINAL
+function skipToFinalStep() {
+    console.log(`⏭️ Executando pulo para final`);
+    
+    // Adicionar campo hidden indicando redirecionamento
+    const form = document.getElementById('wagtailForm');
+    if (form) {
+        let skipField = form.querySelector('input[name="form_redirected"]');
+        if (!skipField) {
+            skipField = document.createElement('input');
+            skipField.type = 'hidden';
+            skipField.name = 'form_redirected';
+            form.appendChild(skipField);
+        }
+        skipField.value = 'true';
+        
+        console.log('📨 Submetendo formulário...');
+        form.submit();
+    } else {
+        console.log('⚠️ Formulário não encontrado');
+    }
+}
+
+// FUNÇÃO PARA REDIRECIONAR PARA SEÇÃO ESPECÍFICA (caso não exista)
+if (typeof redirectToSpecificSection === 'undefined') {
+    function redirectToSpecificSection(sectionTitle) {
+        console.log(`🎯 Procurando seção: "${sectionTitle}"`);
+        
+        // Procurar divisores com título correspondente
+        const dividers = document.querySelectorAll('.divider-title');
+        
+        for (const divider of dividers) {
+            const dividerTitle = divider.textContent?.trim() || '';
+            
+            if (dividerTitle.toLowerCase().includes(sectionTitle.toLowerCase()) ||
+                sectionTitle.toLowerCase().includes(dividerTitle.toLowerCase())) {
+                
+                console.log(`✅ Seção encontrada: "${dividerTitle}"`);
+                
+                // Scroll para o divisor
+                setTimeout(() => {
+                    divider.scrollIntoView({ 
+                        behavior: 'smooth', 
+                        block: 'center' 
+                    });
+                }, 100);
+                
+                return true;
+            }
+        }
+        
+        console.log(`❌ Seção "${sectionTitle}" não encontrada`);
+        return false;
+    }
+}
+
+// INICIALIZAÇÃO QUANDO DOM CARREGAR
+document.addEventListener('DOMContentLoaded', function() {
+    // Aguardar um pouco para garantir que tudo carregou
+    setTimeout(() => {
+        initializeMultiRedirectFields();
+    }, 500);
+});
+
+// DEBUGGING
+window.debugMultiRedirect = {
+    fields: () => multiRedirectFields,
+    pending: () => pendingActions,
+    testSection: (name) => redirectToSpecificSection(name),
+    skipToEnd: () => skipToFinalStep(),
+    init: () => initializeMultiRedirectFields()
+};
+
+console.log('🔀 Sistema Multi-Redirecionamento carregado');
+console.log('🔧 Debug: window.debugMultiRedirect');
+
+document.addEventListener('DOMContentLoaded', function() {
+    initializeMultiRedirectField('{{ block.block_type }}_{{ block.id }}');
+});
+
+function initializeMultiRedirectField(fieldId) {
+    const fieldGroup = document.querySelector(`[data-field-id="${fieldId}"]`);
+    if (!fieldGroup) return;
+
+    const inputs = fieldGroup.querySelectorAll('.multi-redirect-input');
+    const conditionalFields = fieldGroup.querySelectorAll('.multi-redirect-fields');
+
+    // Função para mostrar/ocultar campos condicionais
+    function toggleConditionalFields(selectedValue) {
+        conditionalFields.forEach(conditionalField => {
+            const optionValue = conditionalField.getAttribute('data-option-value');
+            
+            if (optionValue === selectedValue) {
+                // Mostrar campos desta opção
+                conditionalField.style.display = 'block';
+                conditionalField.style.animation = 'fadeIn 0.3s ease-in-out';
+                
+                // Marcar campos como obrigatórios se necessário
+                const nestedInputs = conditionalField.querySelectorAll('input[data-originally-required], select[data-originally-required], textarea[data-originally-required]');
+                nestedInputs.forEach(input => {
+                    input.required = true;
+                });
+            } else {
+                // Ocultar campos de outras opções
+                conditionalField.style.display = 'none';
+                
+                // Remover obrigatoriedade dos campos ocultos
+                const nestedInputs = conditionalField.querySelectorAll('input, select, textarea');
+                nestedInputs.forEach(input => {
+                    if (!input.getAttribute('data-originally-required')) {
+                        input.setAttribute('data-originally-required', input.required ? 'true' : 'false');
+                    }
+                    input.required = false;
+                    
+                    // Limpar valores dos campos ocultos
+                    if (input.type === 'checkbox' || input.type === 'radio') {
+                        input.checked = false;
+                    } else {
+                        input.value = '';
+                    }
+                });
+            }
+        });
+    }
+
+    // Event listeners para diferentes tipos de input
+    inputs.forEach(input => {
+        if (input.type === 'checkbox') {
+            input.addEventListener('change', function() {
+                if (this.checked) {
+                    toggleConditionalFields(this.value);
+                } else {
+                    toggleConditionalFields('');
+                }
+            });
+            
+        } else if (input.type === 'radio') {
+            input.addEventListener('change', function() {
+                if (this.checked) {
+                    toggleConditionalFields(this.value);
+                }
+            });
+            
+        } else if (input.tagName === 'SELECT') {
+            input.addEventListener('change', function() {
+                toggleConditionalFields(this.value);
+            });
+        }
+    });
 
+    console.log(`✅ Multi-redirect field ${fieldId} inicializado com ${conditionalFields.length} campos condicionais`);
+}
 
 // document.addEventListener('DOMContentLoaded', function() {
 //     // Dados dos estados passados pelo Django