Conn2Flow
Docs
Navegação das docs

SDD

Human Request: Lançamento v2.8.0, Correção HTML e Automação de Campos (req-021)

Esta especificação define o lote de trabalho req-021 (BATCH-021) para o Engenheiro Executor. O escopo abrange três tarefas principais: 1. Correção de Perda de Valores em Campos…

Esta especificação define o lote de trabalho req-021 (BATCH-021) para o Engenheiro Executor. O escopo abrange três tarefas principais:

  1. Correção de Perda de Valores em Campos HTML no módulo publisher-pages.

  2. Implementação do Botão "Adicionar todos os campos" no módulo publisher.

  3. Atualização de Documentação e Workflow de Release para o lançamento da versão 2.8.0.

1. Módulo publisher-pages - Correção de Bug nos Campos HTML

1.1 Sintoma e Causa Raiz

Ao editar e salvar um registro no módulo publisher-pages, campos do tipo html (editores Quill) que não foram ativamente modificados pelo usuário perdem seus valores no banco de dados.

  • Causa: O <input type="hidden"> correspondente a cada editor HTML inicia vazio e só recebe valor quando o evento text-change do Quill é disparado. Se o usuário clicar em "Enviar" sem alterar o HTML, o campo é enviado como string vazia e descartado pelo backend.

1.2 Solução no Frontend

No arquivo publisher-pages.js, logo após a instância do Quill ser associada ao objeto quillEditors (dentro da iteração $('.quill-editor').each), inicializar o valor do input hidden com o conteúdo HTML atual do editor:

quillEditors[quillEditorsCount] = {
    quill,
    parent: $(obj).parents('.pfc-field-html')
};
// Inicializar o valor do input hidden para evitar perda de dados
const initialHtml = valorAtualizadoQuillEditor(quillEditors[quillEditorsCount].parent.data('id'));
quillEditors[quillEditorsCount].parent.find('input[type="hidden"]').val(initialHtml);

2. Módulo publisher - Inserção Automática de Campos do Modelo

2.1 Páginas HTML (Interface)

Adicionar o botão #add-all-fields-btn ao lado do botão #add-field-btn nos seguintes arquivos:

2.2 Lógica JavaScript (publisher.js)

  • Visibilidade: Atualizar templateWrapper(visible, subwrapper) para exibir (removeClass('hidden')) ou ocultar (addClass('hidden')) o botão #add-all-fields-btn em conformidade com a ativação de um modelo/template.

  • Inserção em Lote: Registrar o evento de clique para #add-all-fields-btn:

    1. Validar clique de mouse (e.which).

    2. Forçar recalculateFieldSets() para obter a lista mais recente de campos disponíveis (gestor.template.fieldSets.available).

    3. Iterar nos campos disponíveis e invocar addFieldRow com a estrutura abaixo:

      addFieldRow({
 id: f.id,
 name: generateLabelFromId(f.id),
 type: f.type,
 template_field_id: f.id
});

  • Helper de Formatação: Criar a função auxiliar para capitalizar e remover underscores de IDs (ex: lista_signatarios -> Lista Signatarios):

    function generateLabelFromId(id) {
  if (!id) return '';
  return id.replace(/_/g, ' ')
           .replace(/\b\w/g, char => char.toUpperCase());
}

  • Preenchimento dos Prompts:

    • Em addFieldRow(data): Se template_field_id for fornecido no objeto data, preencher antecipadamente o input .field-template com a string formatada da variável ([[publisher#type#template_field_id]]).

    • Em updateFieldTemplateSearches(): Se a variável de prompt para currentTemplateId não for encontrada em initialTemplateMap (caso de campos inseridos em lote dinamicamente), gerar a string da variável a partir do tipo e ID como fallback:

      var currentTemplateId = $(this).closest('.field-row').find('.field-template-id').val();
if (currentTemplateId) {
var tm = initialTemplateMap.find(tm => tm.id === currentTemplateId);
if (tm) {
    $(this).find('.prompt').val(tm.variable);
} else {
    var fieldType = $(this).closest('.field-row').find('.field-type').dropdown('get value') || 'text';
    $(this).find('.prompt').val('[[publisher#' + fieldType + '#' + currentTemplateId + ']]');
}
}

3. Preparação do Lançamento da Versão 2.8.0

3.1 CHANGELOG-PT-BR.md

Adicionar a seção de novidades para a versão 2.8.0 sob o cabeçalho ## [Unreleased]:

## [2.8.0] - 2026-06-08
### Added
- **Módulo de Menus Completo**: Gerenciamento de menus com árvore hierárquica e editor visual drag-and-drop em Pointer Events vanilla (sem dependências externas). Suporta itens de Página, Link Personalizado (com target `_blank`/`_self`), Cabeçalhos, Ações de Link e Separadores estruturados (bloco `item-separator`).
- **Módulo de Menus - Nós de Publicadores**: Tipo de item `publicador` que expande sub-itens dinâmicos a partir de publicações do publicador selecionado com limite (`count`) e ordenação customizados.
- **Módulo de Galerias de Imagens**: Módulo de curadoria visual com seleção de arquivos em lote e ordenação Sortable.js. Suporta múltiplos layouts (Grid, Carousel, Masonry, Slider) e parâmetros de slide (setas, dot pagination, autoplay com velocidade configurável e loop).
- **Interatividade Pública de Widgets**: Scripts públicos nativos (`menus.widget.js` e `galleries.widget.js`) para suportar menu hambúrguer mobile, hover recursivo em submenus e interatividade de sliders/carrosséis sem quebrar caso o Tailwind v3/v4 falhe em produção.
- **Compilação do Tailwind CSS CLI**: Integração de compilação dos estilos globais do core via `npx @tailwindcss/cli` a partir da pasta `gestor/assets/tailwindcss/`. A compilação é acionada nas tarefas locais de sync e no pipeline de release.
- **Configuração Dinâmica do Core**: Suporte à chave `tailwindcss/cli` em `environment.json` (com auditoria e normalização automática do template).
- **Suporte a Variáveis de IA e Glossário**: Alvos e prompts de IA atualizados (`menus.md` e `galleries.md`) com suporte a variáveis globais de controle renderizadas sem prefixos.
- **Automação de Campos no Publicador**: Botão "Adicionar todos os campos" para instanciar automaticamente todas as variáveis não vinculadas de um modelo de template com geração de labels amigáveis.
### Changed
- **Pipeline de Release**: Adicionada etapa do Node.js v20 e execução do compilador do Tailwind CSS CLI antes de gerar o pacote ZIP de distribuição. Os CSS compilados são adicionados ao commit automático de release.
- **Diretiva de Configuração do Core**: Arquivo de entrada `input.css` do core integrado à configuração do workspace (`tailwind.config.js`) via diretiva `@config` para limitar a varredura e compilação de classes a apenas templates e recursos úteis.
- **Auditoria de Configurações**: Verificação estrutural do arquivo de template do `environment.json` contra o arquivo ativo de desenvolvimento.
### Fixed
- **Módulo publisher-pages**: Correção de bug no qual valores de campos HTML (editores Quill) eram perdidos em salvamentos sucessivos caso o campo não sofresse novas interações do usuário.

3.2 CHANGELOG.md

Adicionar a seção correspondente em inglês:

## [2.8.0] - 2026-06-08
### Added
- **Complete Menus Module**: Menu management with hierarchical tree and visual drag-and-drop editor based on vanilla Pointer Events (no external DND dependencies). Supports Page, Custom Link (with target `_blank`/`_self`), Header, Link Action, and structured Separators (using the `item-separator` block).
- **Menus Publisher Nodes**: New `publicador` item type that dynamically expands sub-items at runtime from publisher pages, supporting custom counts and order options.
- **Image Galleries Module**: Visual curatorship module supporting batch file selection and Sortable.js DND reordering. Supports multiple layouts (Grid, Carousel, Masonry, Slider) and slide parameters (arrows, dot pagination, autoplay speed, and loop).
- **Public Widgets Interactivity**: Public scripts (`menus.widget.js` and `galleries.widget.js`) supporting mobile hamburger menu, recursive submenu hover fallbacks, and slide carousel transitions to avoid styling failures in production.
- **Tailwind CSS CLI Compilation**: Integrated compilation of core global styles via `npx @tailwindcss/cli` under `gestor/assets/tailwindcss/`. Compilation is triggered during local sync tasks and the release pipeline.
- **Dynamic Core Configuration**: Support for the `tailwindcss/cli` configuration key in `environment.json` with automated template auditing and updating.
- **AI Prompts & Variables Support**: Updated AI targets and prompt markdown files (`menus.md` and `galleries.md`) supporting global control variables rendered without item prefixes.
- **Publisher Fields Automation**: Added "Add all fields" button to automatically instantiate all unlinked variables from the selected template, generating user-friendly labels.
### Changed
- **Release Pipeline**: Setup Node.js v20 and Tailwind CSS CLI compilation added to the GitHub Actions release workflow before packaging the distribution ZIP. Compiled CSS is added to the automated release commit.
- **Core CSS Configuration**: Core stylesheet `input.css` linked to workspace config (`tailwind.config.js`) via `@config` directive to restrict class scanning to templates and system resources.
- **Environment Template Auditing**: Verification of `environment.json` template keys against the active environment settings.
### Fixed
- **publisher-pages Module**: Resolved values loss bug in HTML fields (Quill editors) where empty hidden inputs caused omission of data on consecutive edits if left untouched.

3.3 README-PT-BR.md

Atualizar a última versão sob ## Última Versão:

## Última Versão
**v2.8.0 (8 Junho 2026)**
**? Novas Funcionalidades:**
- **Módulo de Menus Completo**: Gerenciamento de menus com árvore hierárquica e editor visual drag-and-drop.
- **Módulo de Galerias de Imagens**: Curadoria visual, seleção em lote, ordenação Sortable.js e carrosséis públicos.
- **Compilação Tailwind CSS CLI**: Build automático do CSS do Core via `npx @tailwindcss/cli` integrado localmente e no CI.
- **Automação de Campos do Publicador**: Inserção em lote ("Adicionar todos os campos") com mapeamento automático ao modelo.

3.4 README.md

Atualizar o cabeçalho ## Latest Release:

## Latest Release
**v2.8.0 (June 8, 2026)**
**? New Features:**
- **Complete Menus Module**: Menu management with hierarchical tree and visual drag-and-drop.
- **Image Galleries Module**: Batch selection, Sortable.js DND reordering and public carousels.
- **Tailwind CSS CLI Compilation**: Automatic core CSS compilation via `npx @tailwindcss/cli` locally and in CI.
- **Publisher Fields Automation**: Batch insertion ("Add all fields") with automatic template variables mapping.

3.5 Workflow .github/workflows/release-gestor.yml

Atualizar o corpo da ação Create Release para refletir as novidades da versão v2.8.0 e os novos módulos do sistema:

      - name: Create Release
        id: create_release
        uses: softprops/action-gh-release@v2
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tag_name: ${{ steps.tag.outputs.TAG_NAME }}
          name: "Gestor ${{ steps.tag.outputs.TAG_NAME }}"
          make_latest: true
          body: |
            ## ? Conn2Flow Gestor Release v2.8.0 (Módulo de Menus Completo + Módulo de Galerias + Compilador Tailwind CSS CLI + Automação)
            Esta versão traz o **Módulo de Menus Completo** com hierarquia arrastável estilo WordPress e suporte a publicadores, o **Módulo de Galerias de Imagens** com seleção em lote e controles de slider/carrossel dinâmicos, a **Integração do compilador do Tailwind CSS v4 via CLI** no core do sistema e no pipeline de release, o novo botão **Adicionar todos os campos** no gerenciador de schemas de publicadores, além da correção de bug de integridade de campos HTML.
            ### ? Novidades Principais desta Versão:
            - ✅ **Módulo de Menus Completo**: Gerenciamento de menus com árvore hierárquica e editor visual drag-and-drop em Pointer Events vanilla (sem dependências externas). Suporta itens de Página, Link Personalizado (com target `_blank`/`_self`), Cabeçalhos, Ações de Link e Separadores estruturados (bloco `item-separator`).
            - ✅ **Módulo de Menus - Nós de Publicadores**: Tipo de item `publicador` que expande sub-itens dinâmicos a partir de publicações em runtime, com suporte a limite de quantidade e ordenação.
            - ✅ **Módulo de Galerias de Imagens**: Módulo de curadoria visual com seleção de arquivos em lote e ordenação Sortable.js. Suporta múltiplos layouts (Grid, Carousel, Masonry, Slider) e parâmetros de slide (setas, dot pagination, autoplay e loop).
            - ✅ **Automação de Campos no Publicador**: Botão "Adicionar todos os campos" para instanciar automaticamente todas as variáveis não vinculadas de um modelo de template com geração de labels amigáveis.
            - ✅ **Compilação do Tailwind CSS CLI**: Integração de compilação dos estilos globais do core via `npx @tailwindcss/cli` a partir da pasta `gestor/assets/tailwindcss/`. A compilação é acionada nas tarefas locais de sync e no pipeline de release.
            ### ? Melhorias e Correções Técnicas:
            - ✅ **Correção de Perda de Dados em Campos HTML**: Resolvido bug no qual valores de editores HTML (Quill) eram omitidos no submit em edições consecutivas sem modificação direta.
            - ✅ **Integração `@config` no CSS**: Arquivo de entrada `input.css` do core integrado à configuração do workspace (`tailwind.config.js`) para limitar a varredura e compilação de classes a apenas templates e recursos úteis.
            - ✅ **Node.js v20 no Pipeline**: Setup do Node.js v20 integrado no pipeline de release do GitHub Actions (`release-gestor.yml`) para compilar assets dinamicamente na nuvem e incluí-los na release.
            - ✅ **Auditoria de Configurações**: Verificação estrutural do arquivo de template do `environment.json` contra o arquivo ativo de desenvolvimento.

O Futuro é Híbrido: Humano + IA.

O Conn2Flow é a ferramenta. Se você precisa do Arquiteto para desenhar a estratégia da sua empresa usando essa tecnologia...

Contrate Consultoria Especializada