req-068: Alinhamento Visual do CRUD e Painel de Conteúdo de Formulários com Menus

Descrição do Problema / Contexto

Queremos padronizar a experiência visual do painel administrativo do módulo de Formulários (forms) para seguir a mesma estrutura consagrada do módulo de Menus (menus).

Atualmente, o selecionador de modelo, a prévia e o código do widget de formulários ficam embutidos dentro de uma aba principal chamada "Template". Em contraste, no módulo de menus, o selecionador de modelo fica sempre visível e a seção de conteúdo (Pré-Visualização, Editor HTML e Código do Widget) fica fora das abas principais, estruturada em seu próprio conjunto de sub-abas logo abaixo dos demais campos.

Queremos remover a aba principal "Template" de formulários, unificar seus elementos logo abaixo das abas principais em uma seção chamada "Conteúdo do Formulário" (Form Content) e adotar uma navegação de abas secundárias identica à de menus.

Mudanças Necessárias

1. Restruturação das Páginas de CRUD (HTMLs)

Aplicar as alterações nos 6 templates de formulários:

• forms-adicionar.html (pt-br + en)

• forms-editar.html (pt-br + en)

• forms-clonar.html (pt-br + en)

Detalhes da Reestruturação:

1. Menu Principal de Abas:

   • Remover o item da aba "Template" (data-tab="forms-template").

   • Manter as abas principais: Geral (forms-general), E-mail (forms-email), Redirects (forms-redirects) e Campos (forms-fields).

2. Seção de Conteúdo Raiz:

   • Fora e logo abaixo das abas principais, renderizar o cabeçalho: <h4 class="ui dividing header">Conteúdo do Formulário</h4> (ou Form Content em inglês).

   • Renderizar o selecionador de modelo (dropdown #template_id) logo abaixo desse cabeçalho.

   • Renderizar o novo menu de abas anexado:

     <div class="ui top attached tabular menu menuConteudoForm">
      <a class="active item" data-tab="forms-preview"><i class="eye icon"></i> Pré-Visualização</a>
      <a class="item" data-tab="forms-editor"><i class="code icon"></i> Editor HTML</a>
      <a class="item" data-tab="forms-widget"><i class="cubes icon"></i> Código do Widget</a>
     </div>

   • Renderizar os três segmentos correspondentes a este menu:

     • forms-preview (ativo por padrão): contendo o iframe de prévia (iframe-forms-preview).

     • forms-editor: contendo o placeholder #html-editor#.

     • forms-widget: contendo o campo de variável do widget (forms-widget-val, botão de copiar) e a área de texto do código (forms-widget-code).

2. Sincronização e Ajuste da Lógica no JavaScript (forms.js)

• Inicializar a navegação das novas abas com Fomantic-UI:

  $('.menuConteudoForm .item').tab({
    onLoad: function (tabPath) {
        // Salvar estado ativo no localStorage
        localStorage.setItem(gestor.moduloId + 'tabFormContentActive', tabPath);
        if (tabPath === 'forms-preview') schedulePreview(true, true);
        if (tabPath === 'forms-editor' && typeof window.contentPageTabHandler === 'function') window.contentPageTabHandler();
        if (tabPath === 'forms-widget') updateWidgetCodeTab();
    }
  });

• No carregamento da página, recuperar a aba ativa persistida no localStorage sob a chave tabFormContentActive e disparar a mudança síncrona de aba na menuConteudoForm.

• Remover listeners antigos obsoletos ou vinculados a seletores inexistentes que faziam parte da antiga aba forms-template ou menuFormsTemplate.

3. Validação e Testes

1. Verificação Estática:

   • Executar node --check nos arquivos JavaScript modificados.

   • Executar php -l nos arquivos PHP correspondentes.

2. Testes de Integração:

   • Rodar composer test e confirmar aprovação total do suite.

3. Validação Manual (Runtime):

   • Carregar o formulário para edição.

   • Mudar de templates no dropdown.

   • Alternar entre as abas secundárias ("Pré-Visualização", "Editor HTML", "Código do Widget") e certificar-se de que a troca é instantânea, a prévia funciona, o editor é corretamente renderizado/redimensionado e nenhuma exceção é logada no console do navegador.