Human Request: Preservação de Ordenação, Estado de Selects, Variáveis na Inserção e Simulação Dinâmica de Destaques (req-011)

Esta especificação detalha as correções necessárias no módulo publisher-highlights do core (conn2flow) para solucionar 5 problemas residuais: a preservação de ordem na curadoria manual, a reidratação visual de dropdowns na edição, a listagem de variáveis do modelo na tela de inserção, e a aleatoriedade e diversificação de dados mockados na simulação de preview do editor HTML.

Detalhes das Correções e Ajustes Solicitados

1. Preservação da Ordenação Manual de Itens Curados

• Problema: A regra de curadoria manual de destaques perde a ordem de seleção dos itens. Quando o usuário clica na Nota 2 e depois na Nota 1, o dropdown visual do Fomantic UI reordena as tags de forma física no DOM, refletindo a ordem estrutural do <select> nativo e perdendo a ordem cronológica original. Isso faz com que no banco de dados e no preview a ordem não seja mantida.

• Ajuste:

  • No Dropdown Customizado (jquery-custom-dropdown.js):

  • Adicionar callbacks para interceptar a seleção via onAdd e onRemove no objeto retornado pela função settings().

  • Manter e gerenciar um array interno this.selectedIds que armazene na ordem correta de cliques os IDs adicionados e removidos.

  • Sincronizar o estado de this.selectedIds no método setValues a partir do parâmetro selectedIds recebido.

  • Chamar o método do callback/evento com a cópia ordenada de this.selectedIds.

  • No Fluxo do Módulo (publisher-highlights.js):

  • Impedir a sobrescrita do array de ordenação schema.selected_items usando o valor cru retornado por $('#selected_items').val() (que retorna a ordem do DOM, ou seja, estrutural do select, não de cliques) no submit da página e na função de atualização de preview (refreshWidgetPreview).

  • Permitir a leitura crua do select apenas para validar a existência ou limpar os IDs caso a regra não seja 'manual'. Se a regra for 'manual', manter a ordem do array construída dinamicamente.

2. Hidratação do Estado Inicial dos Selects "Regra de Alimentação" e "Ordenação"

• Problema: Ao carregar a página de edição de um destaque cujo modo de alimentação foi salvo como "Manual" (ou outra configuração de ordenação), os selects de "Regra de Alimentação" (#rule) e "Ordenação" (#order_by) voltam visualmente para o padrão "Automática" e "Por data". A hidratação via .val() altera o select nativo, mas a casca visual do Fomantic UI já foi renderizada e não reflete essa mudança.

• Ajuste:

  • Em publisher-highlights.js:

  • Após as atribuições iniciais de .val(), disparar a hidratação visual do Fomantic UI chamando explicitamente a API .dropdown('set selected', ...) com um pequeno atraso (setTimeout(..., 50)):

    setTimeout(function () {
      $('#rule').dropdown('set selected', schema.rule || 'latest');
      $('#order_by').dropdown('set selected', schema.order_by || 'date_desc');
    }, 50);

3. Exibição de Variáveis Globais na Tela "Adicionar" (Inserção)

• Problema: Na tela de inserção de novos registros (ação "Adicionar"), ao escolher um modelo visual de destaque, a aba de mapeamento de variáveis do editor exibe "Nenhum Publicador Vinculado" e impede que o mapeamento visual seja feito. Isto ocorre porque a lógica do backend no html-editor.php determina $tem_vinculo avaliando se $target_variables possui dados. Na inserção, esse array é inicialmente vazio porque nenhum mapeamento existe no banco, resultando na exclusão do container HTML correspondente.

• Ajuste:

  • Em gestor/bibliotecas/html-editor.php:

  • Na validação de vínculo (linhas 34–38 ou local correlato), se o alvo ($target) for 'publisher-highlights', forçar $tem_vinculo = true independentemente de haver ou não mapeamento de variáveis no array.

4. Simulação Dinâmica de Destaques sem Duplicidades no Preview

• Problema: O modo de simulação do preview do editor HTML repete a mesma imagem ou textos repetidos para diferentes campos de um mesmo card ou entre cards vizinhos.

• Ajuste:

  • Em gestor/assets/interface/html-editor-interface.js:

  • Remover completamente o seletor .publisher-design-mode-simulation do DOM ao simular destaques para evitar qualquer sobreposição ou conflitos visuais de estilos.

  • Mudar o rastreamento de deslocamento (offsets aleatórios) para associá-lo a cada variável (varName), e não ao tipo de campo (fieldType), evitando que [[item#titulo]] e [[item#resumo]] peguem o mesmo índice de dados no mesmo card.

  • Na renderização do laço de repetição, calcular o índice do item mockado como (i + offsets[varName]) % simulItems.length (onde i é o índice do item/card) para garantir que cards vizinhos e variáveis vizinhas usem dados e imagens diferentes.

5. Enriquecimento da Massa de Dados Mockados de Simulação

• Problema: O arquivo HTML de recursos de simulação possui poucos registros mockados de itens/páginas de publicador de teste, gerando duplicidade visual quando o usuário desenha blocos de destaques com 4 ou mais cards.

• Ajuste:

  • Enriquecer e adicionar mais itens e registros completos de posts (títulos, resumos, datas, URLs e imagens mockadas variadas) nos arquivos de recursos:

  • gestor/resources/pt-br/components/html-editor-publisher-highlights-simulation/html-editor-publisher-highlights-simulation.html

  • gestor/resources/en/components/html-editor-publisher-highlights-simulation/html-editor-publisher-highlights-simulation.html