feat: ora i menu a tendina sono freccettabili. fix: sistemata la modifica massiva nella pagina ricerca spudorata

public/js/app.js

@@ -1080,6 +1080,67 @@ const App = {
       });
     });
   },
+
+  /**
+   * Helper to enable arrow keys (Up/Down), Enter, and Escape navigation on autocomplete inputs.
+   * @param {HTMLInputElement} inputEl 
+   * @param {HTMLElement} suggestionsEl 
+   * @param {Function} onSelect Callback(itemElement) when an item is selected via Enter or Click
+   */
+  setupAutocompleteKeyboardNavigation(inputEl, suggestionsEl, onSelect) {
+    if (!inputEl || !suggestionsEl) return;
+
+    inputEl.addEventListener('keydown', (e) => {
+      if (suggestionsEl.style.display === 'none' || !suggestionsEl.children.length) {
+        return;
+      }
+
+      const items = Array.from(suggestionsEl.querySelectorAll('.autocomplete-suggestion-item[data-id]'));
+      if (items.length === 0) return;
+
+      let currentIndex = items.findIndex(item => item.classList.contains('selected'));
+
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (currentIndex < items.length - 1) {
+          currentIndex++;
+        } else {
+          currentIndex = 0;
+        }
+        items.forEach((item, idx) => {
+          if (idx === currentIndex) {
+            item.classList.add('selected');
+            item.scrollIntoView({ block: 'nearest' });
+          } else {
+            item.classList.remove('selected');
+          }
+        });
+      } else if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        if (currentIndex > 0) {
+          currentIndex--;
+        } else {
+          currentIndex = items.length - 1;
+        }
+        items.forEach((item, idx) => {
+          if (idx === currentIndex) {
+            item.classList.add('selected');
+            item.scrollIntoView({ block: 'nearest' });
+          } else {
+            item.classList.remove('selected');
+          }
+        });
+      } else if (e.key === 'Enter') {
+        if (currentIndex >= 0 && items[currentIndex]) {
+          e.preventDefault();
+          e.stopPropagation();
+          onSelect(items[currentIndex]);
+        }
+      } else if (e.key === 'Escape') {
+        suggestionsEl.style.display = 'none';
+      }
+    });
+  },
 };
 
 // Start the app when DOM is ready

public/js/views/ricercaSpudorata.js

@@ -20,6 +20,7 @@ const RicercaSpudorataView = {
   },
 
   async render() {
+    await App.ensureLookups();
     Filters.currentMode = 'spudorata';
     Filters.load();
 
@@ -48,8 +49,6 @@ const RicercaSpudorataView = {
 
     this.renderContainer(container);
     this.bindEvents();
-
-    App.ensureLookups();
   },
 
   renderContainer(container) {
@@ -541,6 +540,13 @@ const RicercaSpudorataView = {
           });
         } catch (err) { console.error(err); }
       });
+      App.setupAutocompleteKeyboardNavigation(batchQueueSearchInput, batchQueueSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          batchQueueSearchInput.value = item.dataset.name;
+          if (batchQueueIdInput) batchQueueIdInput.value = item.dataset.id;
+          batchQueueSuggestionsDiv.style.display = 'none';
+        }
+      });
       batchQueueSearchInput.addEventListener('focus', () => {
         batchQueueSearchInput.value = '';
         if (batchQueueIdInput) batchQueueIdInput.value = '';

public/js/views/ticketCreate.js

@@ -379,27 +379,31 @@ const TicketCreateView = {
             }
 
             userSuggestionsDiv.innerHTML = users.map(u => `
-              <div class="autocomplete-suggestion-item" data-login="${App.escapeHtml(u.login || '')}" data-customer-id="${App.escapeHtml(u.customer_id || '')}" data-name="${App.escapeHtml((u.first_name + ' ' + u.last_name).trim() || u.login || '')}">
+              <div class="autocomplete-suggestion-item" data-id="${App.escapeHtml(u.login || '')}" data-login="${App.escapeHtml(u.login || '')}" data-customer-id="${App.escapeHtml(u.customer_id || '')}" data-name="${App.escapeHtml((u.first_name + ' ' + u.last_name).trim() || u.login || '')}">
                 <strong>${App.escapeHtml(u.first_name)} ${App.escapeHtml(u.last_name)}</strong>
                 <span style="font-size:0.75rem; color:var(--text-muted); margin-left:var(--space-xs); font-weight:normal;">(Login: ${App.escapeHtml(u.login || '')} | Azienda: ${App.escapeHtml(u.customer_id || '—')})</span>
               </div>
             `).join('');
             userSuggestionsDiv.style.display = 'block';
 
+            const selectUserItem = (item) => {
+              userSearchInput.value = item.dataset.name;
+              customerUserIdInput.value = item.dataset.login;
+              userSuggestionsDiv.style.display = 'none';
+
+              // Auto-fill company inside Advanced Options
+              if (item.dataset.customerId) {
+                customerIdInput.value = item.dataset.customerId;
+                companySearchInput.value = item.dataset.customerId;
+              }
+            };
+
             // Use mousedown instead of click to fire before blur event
             userSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => {
               if (item.dataset.login) {
                 item.addEventListener('mousedown', (e) => {
                   e.preventDefault(); // prevent input from losing focus before value is set
-                  userSearchInput.value = item.dataset.name;
-                  customerUserIdInput.value = item.dataset.login;
-                  userSuggestionsDiv.style.display = 'none';
-
-                  // Auto-fill company inside Advanced Options
-                  if (item.dataset.customerId) {
-                    customerIdInput.value = item.dataset.customerId;
-                    companySearchInput.value = item.dataset.customerId;
-                  }
+                  selectUserItem(item);
                 });
               }
             });
@@ -408,6 +412,17 @@ const TicketCreateView = {
           }
         }, 300);
       });
+      App.setupAutocompleteKeyboardNavigation(userSearchInput, userSuggestionsDiv, (item) => {
+        if (item && item.dataset.login) {
+          userSearchInput.value = item.dataset.name;
+          customerUserIdInput.value = item.dataset.login;
+          userSuggestionsDiv.style.display = 'none';
+          if (item.dataset.customerId) {
+            customerIdInput.value = item.dataset.customerId;
+            companySearchInput.value = item.dataset.customerId;
+          }
+        }
+      });
       userSearchInput.addEventListener('focus', () => {
         if (!customerUserIdInput.value) {
           // Only search if no user is selected yet
@@ -462,6 +477,13 @@ const TicketCreateView = {
           }
         }, 300);
       });
+      App.setupAutocompleteKeyboardNavigation(ownerSearchInput, ownerSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          ownerSearchInput.value = item.dataset.name;
+          ownerIdInput.value = item.dataset.id;
+          ownerSuggestionsDiv.style.display = 'none';
+        }
+      });
       ownerSearchInput.addEventListener('focus', () => {
         ownerSearchInput.value = '';
         ownerIdInput.value = '';
@@ -510,6 +532,13 @@ const TicketCreateView = {
           }
         }, 300);
       });
+      App.setupAutocompleteKeyboardNavigation(responsibleSearchInput, responsibleSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          responsibleSearchInput.value = item.dataset.name;
+          responsibleIdInput.value = item.dataset.id;
+          responsibleSuggestionsDiv.style.display = 'none';
+        }
+      });
       responsibleSearchInput.addEventListener('focus', () => {
         responsibleSearchInput.value = '';
         responsibleIdInput.value = '';
@@ -557,6 +586,13 @@ const TicketCreateView = {
           }
         }, 150);
       });
+      App.setupAutocompleteKeyboardNavigation(queueSearchInput, queueSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          queueSearchInput.value = item.dataset.name;
+          queueIdInput.value = item.dataset.id;
+          queueSuggestionsDiv.style.display = 'none';
+        }
+      });
       queueSearchInput.addEventListener('focus', () => {
         queueSearchInput.value = '';
         queueIdInput.value = '';

public/js/views/ticketDetail.js

@@ -694,6 +694,15 @@ const TicketDetailView = {
         }, 150);
       });
 
+      App.setupAutocompleteKeyboardNavigation(queueSearchInput, queueSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          queueSearchInput.value = item.dataset.name;
+          queueIdInput.value = item.dataset.id;
+          queueSuggestionsDiv.style.display = 'none';
+          queueIdInput.dispatchEvent(new Event('change'));
+        }
+      });
+
       queueSearchInput.addEventListener('focus', () => {
         queueSearchInput.value = '';
         queueIdInput.value = '';

public/js/views/ticketList.js

@@ -735,6 +735,13 @@ const TicketListView = {
           }
         }, 300);
       });
+      App.setupAutocompleteKeyboardNavigation(batchQueueSearchInput, batchQueueSuggestionsDiv, (item) => {
+        if (item && item.dataset.id) {
+          batchQueueSearchInput.value = item.dataset.name;
+          if (batchQueueIdInput) batchQueueIdInput.value = item.dataset.id;
+          batchQueueSuggestionsDiv.style.display = 'none';
+        }
+      });
       batchQueueSearchInput.addEventListener('focus', () => {
         batchQueueSearchInput.value = '';
         if (batchQueueIdInput) batchQueueIdInput.value = '';