fix: modificato in elenco a discesa il selettore della coda della pagina nuovo ticket. style: ottimizzazioni visive delle code

public/js/views/ticketCreate.js

@@ -568,13 +568,10 @@ const TicketCreateView = {
             }
 
             queueSuggestionsDiv.innerHTML = queues.map(q => {
-              const parts = q.name.split('::');
+              const displayName = q.name.replace(/::/g, ' › ');
-              const lastPart = parts[parts.length - 1];
-              const parentPath = parts.length > 1 ? parts.slice(0, -1).join(' › ') + ' › ' : '';
               return `
-                <div class="autocomplete-suggestion-item" data-id="${App.escapeHtml(q.id)}" data-name="${App.escapeHtml(q.name)}" style="padding: 6px 12px; font-size: 0.78rem; line-height: 1.25; display: flex; flex-direction: column;">
+                <div class="autocomplete-suggestion-item" data-id="${App.escapeHtml(q.id)}" data-name="${App.escapeHtml(q.name)}" style="padding: 6px 12px; font-size: 0.78rem; line-height: 1.25;">
-                  <span style="font-size: 0.65rem; opacity: 0.6; margin-bottom: 2px;">${App.escapeHtml(parentPath)}</span>
+                  ${App.escapeHtml(displayName)}
-                  <strong>${App.escapeHtml(lastPart)}</strong>
                 </div>
               `;
             }).join('');

public/js/views/ticketDetail.js

@@ -73,6 +73,7 @@ const TicketDetailView = {
         ticket_state_id: ticket.ticket_state_id,
         ticket_priority_id: ticket.ticket_priority_id,
         queue_id: ticket.queue_id,
+        queue_name: ticket.queue_name,
         user_id: ticket.user_id,
         type_id: ticket.type_id,
         customer_id: ticket.customer_id,
@@ -131,13 +132,11 @@ const TicketDetailView = {
       ).join('')}
                   </select>
                 </div>
-                <div class="quick-edit-field">
+                <div class="quick-edit-field" style="position:relative;">
                   <label class="quick-edit-label">Coda</label>
-                  <select class="quick-edit-select" id="qe-queue" data-field="queue_id">
+                  <input type="text" class="quick-edit-select" id="qe-queue-search" placeholder="Cerca coda..." autocomplete="off" value="${App.escapeHtml(ticket.queue_name || '')}" style="background-image: none; cursor: text;" />
-                    ${(App.lookups.queues || []).map(q =>
+                  <input type="hidden" id="qe-queue" data-field="queue_id" value="${ticket.queue_id || ''}" />
-        `<option value="${q.id}" ${q.id === ticket.queue_id ? 'selected' : ''}>${q.name}</option>`
+                  <div id="qe-queue-suggestions" class="autocomplete-suggestions" style="display:none; width: 800px; max-width: 800px; z-index: 1005;"></div>
-      ).join('')}
-                  </select>
                 </div>
                 <div class="quick-edit-field">
                   <label class="quick-edit-label">Owner</label>
@@ -474,7 +473,7 @@ const TicketDetailView = {
 
   bindEvents(ticket, articles, container, groupsData) {
     // Quick-edit change detection
-    const fields = document.querySelectorAll('.quick-edit-select, #qe-customer-user-id, #qe-customer-id');
+    const fields = document.querySelectorAll('.quick-edit-select:not(#qe-queue-search), #qe-queue, #qe-customer-user-id, #qe-customer-id');
     const saveBtn = document.getElementById('qe-save');
     const resetBtn = document.getElementById('qe-reset');
     const timeUnitInput = document.getElementById('qe-time-unit');
@@ -486,7 +485,12 @@ const TicketDetailView = {
         const original = String(this.originalValues[field] || '');
         const current = el.value;
         const changed = current !== original;
+        if (el.id === 'qe-queue') {
+          const searchInput = document.getElementById('qe-queue-search');
+          if (searchInput) searchInput.classList.toggle('changed', changed);
+        } else {
           el.classList.toggle('changed', changed);
+        }
         if (changed) hasChanges = true;
       });
 
@@ -504,6 +508,68 @@ const TicketDetailView = {
       timeUnitInput.addEventListener('change', checkChanges);
     }
 
+    // Queue Autocomplete inside Quick Edit
+    const queueSearchInput = document.getElementById('qe-queue-search');
+    const queueSuggestionsDiv = document.getElementById('qe-queue-suggestions');
+    const queueIdInput = document.getElementById('qe-queue');
+
+    let queueDebounce;
+    if (queueSearchInput) {
+      queueSearchInput.addEventListener('input', () => {
+        clearTimeout(queueDebounce);
+        const q = queueSearchInput.value.trim();
+
+        queueDebounce = setTimeout(async () => {
+          try {
+            const queues = await App.api(`/api/queues/search?q=${encodeURIComponent(q)}`);
+            if (queueSearchInput.value.trim() !== q) {
+              return;
+            }
+            if (queues.length === 0) {
+              queueSuggestionsDiv.innerHTML = '<div class="autocomplete-suggestion-item" style="color:var(--text-muted); cursor:default;">Nessuna coda trovata</div>';
+              queueSuggestionsDiv.style.display = 'block';
+              return;
+            }
+
+            queueSuggestionsDiv.innerHTML = queues.map(q => {
+              const displayName = q.name.replace(/::/g, ' › ');
+              return `
+                <div class="autocomplete-suggestion-item" data-id="${App.escapeHtml(q.id)}" data-name="${App.escapeHtml(q.name)}" style="padding: 6px 12px; font-size: 0.78rem; line-height: 1.25;">
+                  ${App.escapeHtml(displayName)}
+                </div>
+              `;
+            }).join('');
+            queueSuggestionsDiv.style.display = 'block';
+
+            // Bind click/mousedown
+            queueSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => {
+              if (item.dataset.id) {
+                item.addEventListener('mousedown', (e) => {
+                  e.preventDefault();
+                  queueSearchInput.value = item.dataset.name;
+                  queueIdInput.value = item.dataset.id;
+                  queueSuggestionsDiv.style.display = 'none';
+                  queueIdInput.dispatchEvent(new Event('change'));
+                });
+              }
+            });
+          } catch (err) {
+            console.error(err);
+          }
+        }, 150);
+      });
+
+      queueSearchInput.addEventListener('focus', () => {
+        queueSearchInput.value = '';
+        queueIdInput.value = '';
+        queueSearchInput.dispatchEvent(new Event('input'));
+      });
+
+      queueSearchInput.addEventListener('blur', () => {
+        setTimeout(() => { queueSuggestionsDiv.style.display = 'none'; }, 150);
+      });
+    }
+
     // Customer User Autocomplete inside Quick Edit
     const customerSearchInput = document.getElementById('qe-customer-search');
     const customerSuggestionsDiv = document.getElementById('qe-customer-suggestions');
@@ -574,6 +640,10 @@ const TicketDetailView = {
         el.value = this.originalValues[el.dataset.field] || '';
         el.classList.remove('changed');
       });
+      if (queueSearchInput) {
+        queueSearchInput.classList.remove('changed');
+        queueSearchInput.value = this.originalValues['queue_name'] || '';
+      }
       if (customerSearchInput) {
         const first = this.originalValues['customer_first'] || '';
         const last = this.originalValues['customer_last'] || '';
@@ -587,6 +657,12 @@ const TicketDetailView = {
 
     // Save quick-edit
     saveBtn.addEventListener('click', async () => {
+      const queueSearch = queueSearchInput ? queueSearchInput.value.trim() : '';
+      if (queueSearchInput && !queueIdInput.value) {
+        Toast.warning('Seleziona una coda valida dall\'elenco.');
+        return;
+      }
+
       const customerSearch = customerSearchInput ? customerSearchInput.value.trim() : '';
       if (customerSearch && !customerUserIdInput.value) {
         customerUserIdInput.value = customerSearch;