VVER440/otrs-turbo
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Gabriele Cimaschi
2026-07-10 16:28:32 +02:00
parent 191f9a407b
commit e764c37d46
2 changed files with 87 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/views/ticketDetail.js
+84 -8
View File
@@ -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">
${(App.lookups.queues || []).map(q =>
`<option value="${q.id}" ${q.id === ticket.queue_id ? 'selected' : ''}>${q.name}</option>`
).join('')}
</select>
<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;" />
<input type="hidden" id="qe-queue" data-field="queue_id" value="${ticket.queue_id || ''}" />
<div id="qe-queue-suggestions" class="autocomplete-suggestions" style="display:none; width: 800px; max-width: 800px; z-index: 1005;"></div>
</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;
el.classList.toggle('changed', changed);
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;