From b484f93640f49489800e8c959f0ebdaf8fde09d0 Mon Sep 17 00:00:00 2001
From: Gabriele Cimaschi <gabriele.cimaschi@gmail.com>
Date: Wed, 15 Jul 2026 21:15:09 +0200
Subject: [PATCH] feat: menu a tendina ricercabile il campo la coda, del menu
 delle azioni rapide della pagina ticket e a mio carico.

---
 public/js/views/ticketList.js | 63 +++++++++++++++++++++++++++++++----
 1 file changed, 57 insertions(+), 6 deletions(-)

diff --git a/public/js/views/ticketList.js b/public/js/views/ticketList.js
index 13f66ab..64c4ec8 100644
--- a/public/js/views/ticketList.js
+++ b/public/js/views/ticketList.js
@@ -86,12 +86,11 @@ const TicketListView = {
             ${(App.lookups.states || []).map(s => `<option value="${s.id}">${s.name}</option>`).join('')}
           </select>
         </div>
-        <div class="filter-group">
+        <div class="filter-group" style="position:relative;">
           <span class="filter-label">Coda</span>
-          <select class="filter-select" id="batch-queue">
-            <option value="">—</option>
-            ${(App.lookups.queues || []).map(q => `<option value="${q.id}">${q.name}</option>`).join('')}
-          </select>
+          <input type="text" class="form-input filter-select" id="batch-queue-search" placeholder="Cerca coda..." autocomplete="off" style="width:160px; padding: 4px 8px; font-family: inherit; font-size: 0.85rem;" />
+          <input type="hidden" id="batch-queue" />
+          <div id="batch-queue-suggestions" class="autocomplete-suggestions" style="display:none; top: 100%; left: 0; width: 280px; z-index: 1001;"></div>
         </div>
         <div class="filter-group">
           <span class="filter-label">Owner</span>
@@ -432,6 +431,8 @@ const TicketListView = {
         if (batchCustomerId) batchCustomerId.value = '';
         const batchState = document.getElementById('batch-state');
         if (batchState) batchState.value = '';
+        const batchQueueSearch = document.getElementById('batch-queue-search');
+        if (batchQueueSearch) batchQueueSearch.value = '';
         const batchQueue = document.getElementById('batch-queue');
         if (batchQueue) batchQueue.value = '';
         const batchOwner = document.getElementById('batch-owner');
@@ -497,11 +498,61 @@ const TicketListView = {
       });
     }
 
-    // Close suggestions on click outside
+    // Batch Queue Autocomplete
+    const batchQueueSearchInput = document.getElementById('batch-queue-search');
+    const batchQueueSuggestionsDiv = document.getElementById('batch-queue-suggestions');
+    const batchQueueIdInput = document.getElementById('batch-queue');
+
+    let batchQueueDebounce;
+    if (batchQueueSearchInput) {
+      batchQueueSearchInput.addEventListener('input', () => {
+        clearTimeout(batchQueueDebounce);
+        const q = batchQueueSearchInput.value.trim();
+
+        batchQueueDebounce = setTimeout(async () => {
+          try {
+            const queues = await App.api(`/api/queues/search?q=${encodeURIComponent(q)}`);
+            if (queues.length === 0) {
+              batchQueueSuggestionsDiv.innerHTML = '<div class="autocomplete-suggestion-item" style="color:var(--text-muted); cursor:default;">Nessuna coda trovata</div>';
+              batchQueueSuggestionsDiv.style.display = 'block';
+              return;
+            }
+
+            batchQueueSuggestionsDiv.innerHTML = queues.map(queue => `
+              <div class="autocomplete-suggestion-item" data-id="${queue.id}" data-name="${App.escapeHtml(queue.name)}">
+                <strong>${App.escapeHtml(queue.name)}</strong>
+              </div>
+            `).join('');
+            batchQueueSuggestionsDiv.style.display = 'block';
+
+            // Bind click
+            batchQueueSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => {
+              item.addEventListener('click', () => {
+                batchQueueSearchInput.value = item.dataset.name;
+                if (batchQueueIdInput) batchQueueIdInput.value = item.dataset.id;
+                batchQueueSuggestionsDiv.style.display = 'none';
+              });
+            });
+          } catch (err) {
+            console.error(err);
+          }
+        }, 300);
+      });
+      batchQueueSearchInput.addEventListener('focus', () => {
+        batchQueueSearchInput.value = '';
+        if (batchQueueIdInput) batchQueueIdInput.value = '';
+        batchQueueSearchInput.dispatchEvent(new Event('input'));
+      });
+    }
+
+     // Close suggestions on click outside
     document.addEventListener('click', (e) => {
       if (batchCustomerSearchInput && e.target !== batchCustomerSearchInput && e.target !== batchCustomerSuggestionsDiv) {
         batchCustomerSuggestionsDiv.style.display = 'none';
       }
+      if (batchQueueSearchInput && e.target !== batchQueueSearchInput && e.target !== batchQueueSuggestionsDiv) {
+        batchQueueSuggestionsDiv.style.display = 'none';
+      }
     });
 
     // Pagination