req-091: Refinamentos de CRUD, Novos Modelos de Lupa e Autocomplete AJAX Otimizado no Módulo "forms-search"

Descrição do Problema / Contexto

Após os testes iniciais do lote BATCH-088, identificamos a necessidade de otimizar e ajustar o módulo forms-search para remover configurações inúteis que foram copiadas do módulo base forms, além de reformular a experiência visual e a interatividade da caixa de busca através de um autocomplete AJAX inteligente e responsivo.

Mudanças Necessárias (Repositório conn2flow)

1. Saneamento do CRUD no Módulo forms-search

• Remoção de Abas Inúteis: O formulário de busca não envia e-mails e nem realiza redirecionamentos simples pós-sucesso. Portanto, as abas "Email" e "Redirects" devem ser completamente removidas das views de CRUD (adicionar, editar, clonar) e suas lógicas associadas no PHP/JS administrativos de forms-search.

• Aba Campos Extras: Renomear a aba "Campos" para "Campos Extras". Nesta aba, o usuário poderá definir campos opcionais adicionais de filtro (ex: categoria, data, tags), mas a busca básica por input de texto (search) é sempre obrigatória e intrínseca.

• Campo de Busca Padrão: O formulário sempre renderizará o input de texto padrão de busca (name="search"), independentemente de haver ou não campos extras configurados.

2. Modelos Visuais de Lupa / Pesquisa (Templates)

• Redesenho dos Modelos: Redesenhar os 5 templates padrão de widget (atualmente copiados de contato/newsletter) em forms-search.json e arquivos físicos de recursos. Eles devem ter layouts focados em barras de busca (ex: com ícones de lupa, caixa minimalista, etc.).

• Células Obrigatórias:

  • Os templates devem incluir a célula <!-- input-search < --> ... <!-- input-search > --> para demarcar onde o campo de busca padrão é injetado pelo PHP.

  • Os templates devem incluir a célula <!-- results-box < --> ... <!-- results-box > --> para demarcar onde a caixa de resultados de autocomplete é injetada.

3. Autocomplete AJAX Otimizado com Paginação

• Comportamento do Widget e AJAX:

  • Ação do Formulário: O formulário deve usar method="GET". O campo action aponta para o caminho configurado na aba Geral (admin). Se vazio, usa o fallback padrão para a página pages-index-search/.

  • Autocomplete: Adicionar suporte a autocomplete assíncrono no forms-search.widget.js e .widget.php:

  • Ao digitar no input de busca, fazer requisição AJAX para um novo endpoint no backend que consulta a tabela paginas.

  • Os resultados devem ser renderizados dentro de uma caixa flutuante demarcada pela célula <!-- results-box < --> ... <!-- results-box > -->.

  • Limitar a listagem inicial em 30 resultados de cada vez.

  • Se houver mais resultados, renderizar um botão "Carregar mais" no final da caixa para buscar os próximos resultados assincronamente.

  • Ao clicar em um resultado do autocomplete, o usuário é navegado diretamente para a página correspondente.

  • Se o usuário clicar no botão de submissão (lupa/buscar) ou pressionar Enter, ele é redirecionado para a página de resultados completa (pages-index-search/ ou o action configurado).

4. Melhorias e Sugestões de Usabilidade Aprovadas

• Debounce de Digitação: Implementar um atraso (debounce) de 300ms na escuta do evento input/keyup do campo de busca. O AJAX de autocomplete só deve disparar quando o usuário parar de digitar por 300ms.

• Limite Mínimo de Caracteres: A consulta AJAX do autocomplete só deve ser acionada se houver pelo menos 3 caracteres preenchidos na caixa de busca.

• Navegação via Teclado: Suportar navegação na lista de resultados do autocomplete usando as teclas de setas do teclado (Cima e Baixo) e permitir abrir o resultado selecionado ao pressionar Enter.

• Destaque do Termo (Highlighting): Envolver os trechos correspondentes ao termo buscado no autocomplete em uma tag <mark> (ou classe de estilização em negrito) nos títulos e resumos exibidos, facilitando a identificação da relevância.

• Cache de Resultados Local: Armazenar em cache em memória JS local (objeto chave-valor do JavaScript) os resultados das últimas consultas para exibições instantâneas caso o usuário utilize o backspace, evitando consultas repetidas à rede para as mesmas palavras.

5. AI Mode e Assistente de Edição

• AI Mode para forms-search: Adaptar os prompts de IA em forms-search.json para que as instruções geradas para criação/edição de formulários de busca sigam este modelo sem abas de e-mail/redirects e com as diretrizes de autocomplete e input de busca padrão.

Validação e Testes

1. Verificação de Sintaxe:

   • Executar php -l em todos os novos arquivos PHP gerados nos novos diretórios dos módulos.

   • Executar node --check ou similar nos novos arquivos JavaScript.

2. Testes Unitários:

   • Rodar composer test no projeto conn2flow para garantir que os testes existentes não sofrem nenhuma regressão.

3. Validação Operacional:

   • Validar que a exclusão de abas reflete corretamente nas interfaces de CRUD.

   • Testar o comportamento do autocomplete no preview do editor de HTML e na página pública, aferindo o debounce, limite de caracteres, cache local e a paginação de 30 itens com botão "Carregar mais".