From 5ee12c75d28fd7d0e1eb39b496c0f33f25be9f43 Mon Sep 17 00:00:00 2001
From: Gemini <bot@mindtek.com.br>
Date: Thu, 2 Jul 2026 17:12:32 -0300
Subject: [PATCH] =?UTF-8?q?feat(2.0):=20remove=20a=20coluna=20de=20vari?=
 =?UTF-8?q?=C3=A1veis=20=E2=80=94=20vira=20autocomplete=20no=20campo=20de?=
 =?UTF-8?q?=20valor?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Feedback de UX: com o Gerar template automático, a coluna ficava ociosa.
As variáveis do GLPI agora aparecem como autocomplete (datalist) direto no
campo de valor de cada linha, + um painel de referência colapsado (fechado
por padrão) para descoberta em remapeamentos. Editores em largura total.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 templates/config_form.html.twig | 53 +++++++++++++++++----------------
 1 file changed, 28 insertions(+), 25 deletions(-)

diff --git a/templates/config_form.html.twig b/templates/config_form.html.twig
index 3d17761..74ed33c 100644
--- a/templates/config_form.html.twig
+++ b/templates/config_form.html.twig
@@ -153,32 +153,36 @@
             {{ __('Personalize o JSON enviado ao Redmine em cada operação. Sem template ativo, o plugin usa o comportamento padrão. "Gerar template" cria o ponto de partida equivalente ao padrão + campos obrigatórios descobertos no seu Redmine.', 'redmine') }}
         </div>
 
-        <div class="row">
-            {# ---- Paleta ---- #}
-            <div class="col-lg-4">
-                <div class="card">
-                    <div class="card-header py-2">
-                        <strong>{{ __('Variáveis do GLPI — o "DE"', 'redmine') }}</strong>
-                        <div class="text-muted" style="font-size:.7rem">{{ __('Clique para copiar a tag. Os campos que o Redmine espera (o "PARA") estão em cada operação, à direita.', 'redmine') }}</div>
-                    </div>
-                    <div class="card-body p-2" style="max-height: 480px; overflow-y: auto;">
-                        {% set lastgroup = '' %}
-                        {% for v in palette_vars %}
-                            {% if v.group != lastgroup %}
-                                {% set lastgroup = v.group %}
-                                <div class="mt-2 mb-1 text-uppercase text-muted" style="font-size: .7rem;">{{ v.group }}</div>
-                            {% endif %}
-                            <div class="rm-var d-flex justify-content-between align-items-center px-1 rounded" data-tag="{{ v.tag }}" title="{{ v.desc }}">
-                                <code style="font-size:.75rem">{{ v.tag }}</code>
-                                <i class="ti ti-copy text-muted" style="font-size:.7rem"></i>
-                            </div>
-                        {% endfor %}
-                    </div>
+        {# Variáveis do GLPI como AUTOCOMPLETE nos campos de valor #}
+        <datalist id="rm-glpi-vars">
+            {% for v in palette_vars %}
+                <option value="{{ v.tag }}">{{ v.group }} — {{ v.desc }}</option>
+            {% endfor %}
+        </datalist>
+
+        {# Referência opcional (colapsada) — descoberta das tags para remapeamentos #}
+        <div class="mb-3">
+            <a class="small" data-bs-toggle="collapse" href="#rm-glpi-vars-panel" role="button">
+                <i class="ti ti-variable me-1"></i>{{ __('Variáveis do GLPI disponíveis — o "DE" (referência; nos campos de valor há autocomplete)', 'redmine') }}
+            </a>
+            <div class="collapse" id="rm-glpi-vars-panel">
+                <div class="card card-body p-2 mt-1" style="max-height:300px;overflow-y:auto;columns:2">
+                    {% set lastgroup = '' %}
+                    {% for v in palette_vars %}
+                        {% if v.group != lastgroup %}
+                            {% set lastgroup = v.group %}
+                            <div class="mt-1 mb-1 text-uppercase text-muted" style="font-size:.7rem;break-inside:avoid">{{ v.group }}</div>
+                        {% endif %}
+                        <div class="rm-var px-1 rounded" data-tag="{{ v.tag }}" title="{{ v.desc }}" style="break-inside:avoid">
+                            <code style="font-size:.75rem">{{ v.tag }}</code>
+                        </div>
+                    {% endfor %}
                 </div>
             </div>
+        </div>
 
-            {# ---- Editores por operação ---- #}
-            <div class="col-lg-8">
+        {# ---- Editores por operação (largura total) ---- #}
+        <div>
                 {% for op, t in templates %}
                     <form method="post" action="{{ action_url }}">
                         <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token_value }}">
@@ -249,7 +253,6 @@
                         </div>
                     </form>
                 {% endfor %}
-            </div>
         </div>
     </div>
 </div>
@@ -330,7 +333,7 @@
             row.className = 'd-flex gap-2 mb-1 rm-tpl-row';
             row.innerHTML =
                 '<input class="form-control form-control-sm rm-k" style="max-width:42%;font-family:monospace;font-size:.78rem" placeholder="caminho.do.campo" value="' + esc(p) + '">' +
-                '<input class="form-control form-control-sm rm-v" style="font-family:monospace;font-size:.78rem" placeholder="valor fixo ou tag da paleta" value="' + esc(v) + '">' +
+                '<input class="form-control form-control-sm rm-v" list="rm-glpi-vars" style="font-family:monospace;font-size:.78rem" placeholder="valor fixo ou variável do GLPI (autocomplete)" value="' + esc(v) + '">' +
                 '<button type="button" class="btn btn-sm btn-outline-danger rm-del">&times;</button>';
             row.querySelector('.rm-del').addEventListener('click', function () { row.remove(); });
             linesBox.appendChild(row);