/** * Ticket Detail View * Shows full ticket info with quick-edit dropdowns, article timeline, and add-note form. */ const TicketDetailView = { ticketId: null, htmlMode: false, originalValues: {}, async render(id) { this.ticketId = id; this.htmlMode = localStorage.getItem('otrs_turbo_html_mode') === 'true'; const container = document.getElementById('view-container'); container.innerHTML = '

Caricamento ticket...

'; try { await App.ensureLookups(); const data = await App.api(`/api/tickets/${id}`); const { ticket, articles, attachments } = data; const localISO = (dateStr) => { if (!dateStr) return ''; const d = new Date(dateStr); return new Date(d.getTime() - d.getTimezoneOffset() * 60000).toISOString().slice(0, 16); }; const totalTime = articles.reduce((sum, a) => { const val = parseFloat(a.time_unit); return sum + (isNaN(val) ? 0 : val); }, 0); this.originalValues = { ticket_state_id: ticket.ticket_state_id, ticket_priority_id: ticket.ticket_priority_id, queue_id: ticket.queue_id, user_id: ticket.user_id, type_id: ticket.type_id, }; container.innerHTML = ` Torna alla lista

#${ticket.tn}

${App.escapeHtml(ticket.title || '(senza titolo)')}

${ticket.state_name} ${ticket.priority_name} ${ticket.queue_name} ${ticket.lock_name === 'lock' ? '🔒 Bloccato' : ''}

Modifica Rapida

Stato

Priorità

Coda

Owner

${(App.lookups.types || []).length > 0 ? `

Tipo

` : ''}

Aggiungi Nota

Articoli & Note (${articles.length})

Visualizza HTML

${articles.length > 0 ? articles.map(a => { const hasHtml = (a.a_content_type || '').toLowerCase().includes('html') || a.a_body.includes(''); const displayBody = this.htmlMode && hasHtml ? `` : `

${App.escapeHtml(a.a_body || '')}

`; const articleAttachments = (attachments || []).filter(att => att.article_id === a.article_id); return `

${a.sender_type || 'System'} ID: ${a.article_id} ${App.escapeHtml(a.a_from || a.creator_first + ' ' + a.creator_last || 'Sistema')} ${a.channel_name ? `via ${a.channel_name}` : ''}

${a.time_unit ? `⏱ ${parseFloat(a.time_unit)} min` : ''}

${App.formatDateTime(a.create_time)}

${a.a_subject ? `

${App.escapeHtml(a.a_subject)}

` : ''} ${displayBody} ${articleAttachments.length > 0 ? `

${articleAttachments.map(att => ` 📎 ${App.escapeHtml(att.filename)} (${Math.round(att.content_size / 1024)} KB) `).join('')}

` : ''}

`; }).join('') : `

💬

Nessun articolo

`}

Dettagli

Numero ${ticket.tn}

Creato

${App.formatDateTime(ticket.create_time)}

Modificato ${App.formatDateTime(ticket.change_time)}

Lock ${ticket.lock_name || 'unlock'}

${ticket.type_name ? `

Tipo ${ticket.type_name}

` : ''} ${ticket.responsible_first ? `

Responsabile ${ticket.responsible_first} ${ticket.responsible_last}

` : ''} ${totalTime > 0 ? `

Tempo Totale ⏱ ${totalTime} min

` : ''}

${ticket.customer_user_id || ticket.customer_id ? `

Cliente

${ticket.customer_first ? `

Nome ${ticket.customer_first} ${ticket.customer_last}

` : ''} ${ticket.customer_email ? `

Email ${ticket.customer_email}

` : ''} ${ticket.customer_phone ? `

Telefono ${ticket.customer_phone}

` : ''} ${ticket.customer_id ? `

Customer ID ${ticket.customer_id}

` : ''}

` : ''} ${ticket.escalation_time > 0 ? ` ` : ''}

`; this.bindEvents(); } catch (err) { container.innerHTML = `

⚠️

Errore caricamento ticket

${App.escapeHtml(err.message)}

`; } }, bindEvents() { // Quick-edit change detection const selects = document.querySelectorAll('.quick-edit-select'); const saveBtn = document.getElementById('qe-save'); const resetBtn = document.getElementById('qe-reset'); const checkChanges = () => { let hasChanges = false; selects.forEach(sel => { const field = sel.dataset.field; const original = String(this.originalValues[field] || ''); const current = sel.value; const changed = current !== original; sel.classList.toggle('changed', changed); if (changed) hasChanges = true; }); saveBtn.disabled = !hasChanges; }; selects.forEach(sel => sel.addEventListener('change', checkChanges)); // Reset quick-edit resetBtn.addEventListener('click', () => { selects.forEach(sel => { sel.value = this.originalValues[sel.dataset.field] || ''; sel.classList.remove('changed'); }); saveBtn.disabled = true; }); // Save quick-edit saveBtn.addEventListener('click', async () => { const updates = {}; selects.forEach(sel => { const field = sel.dataset.field; const val = sel.value ? parseInt(sel.value) : null; if (val !== null && val !== this.originalValues[field]) { updates[field] = val; } }); if (Object.keys(updates).length === 0) return; try { saveBtn.disabled = true; saveBtn.textContent = 'Salvando...'; const res = await App.api(`/api/tickets/${this.ticketId}`, { method: 'PATCH', body: JSON.stringify(updates), }); Toast.success(res.message || 'Ticket aggiornato!'); // Refresh the view this.render(this.ticketId); } catch (err) { Toast.error('Errore: ' + err.message); saveBtn.disabled = false; saveBtn.textContent = 'Salva Modifiche'; } }); // Send note const noteSendBtn = document.getElementById('note-send'); noteSendBtn.addEventListener('click', async () => { const body = document.getElementById('note-body').value.trim(); const subject = document.getElementById('note-subject').value.trim(); const time_unit = document.getElementById('note-time-units').value.trim(); if (!body) { Toast.warning('Scrivi qualcosa prima di inviare'); return; } try { noteSendBtn.disabled = true; noteSendBtn.innerHTML = '

Invio...'; const res = await App.api(`/api/tickets/${this.ticketId}/articles`, { method: 'POST', body: JSON.stringify({ subject, body, time_unit }), }); Toast.success(res.message || 'Nota aggiunta!'); this.render(this.ticketId); } catch (err) { Toast.error('Errore: ' + err.message); noteSendBtn.disabled = false; noteSendBtn.innerHTML = 'Invia Nota'; } }); // Retrodate Ticket Event Listeners const btnEditTicketDate = document.getElementById('btn-edit-ticket-date'); const ticketDateEditor = document.getElementById('ticket-date-editor'); const ticketDateText = document.getElementById('ticket-date-text'); const btnSaveTicketDate = document.getElementById('btn-save-ticket-date'); const btnCancelTicketDate = document.getElementById('btn-cancel-ticket-date'); const inputTicketDate = document.getElementById('input-ticket-date'); if (btnEditTicketDate) { btnEditTicketDate.addEventListener('click', () => { btnEditTicketDate.style.display = 'none'; ticketDateText.style.display = 'none'; ticketDateEditor.style.display = 'flex'; }); btnCancelTicketDate.addEventListener('click', () => { ticketDateEditor.style.display = 'none'; btnEditTicketDate.style.display = 'inline-flex'; ticketDateText.style.display = 'inline'; }); btnSaveTicketDate.addEventListener('click', async () => { const val = inputTicketDate.value; if (!val) { Toast.warning('Scegli una data/ora valida.'); return; } try { btnSaveTicketDate.disabled = true; await App.api(`/api/tickets/${this.ticketId}/retrodata-ticket`, { method: 'POST', body: JSON.stringify({ create_time: val }) }); Toast.success('Data creazione ticket aggiornata!'); this.render(this.ticketId); } catch (err) { Toast.error('Errore retrodatazione ticket: ' + err.message); btnSaveTicketDate.disabled = false; } }); } // Retrodate Articles Event Listeners document.querySelectorAll('.retrodate-container[data-article-id]').forEach(container => { const articleId = container.dataset.articleId; const btnEdit = container.querySelector('.btn-edit-article-date'); const editor = container.querySelector('.retrodate-editor'); const timeText = container.querySelector('.article-time'); const btnSave = container.querySelector('.btn-save-article-date'); const btnCancel = container.querySelector('.btn-cancel-article-date'); const input = container.querySelector('.input-article-date'); if (btnEdit) { btnEdit.addEventListener('click', () => { btnEdit.style.display = 'none'; timeText.style.display = 'none'; editor.style.display = 'flex'; }); btnCancel.addEventListener('click', () => { editor.style.display = 'none'; btnEdit.style.display = 'inline-flex'; timeText.style.display = 'inline'; }); btnSave.addEventListener('click', async () => { const val = input.value; if (!val) { Toast.warning('Scegli una data/ora valida.'); return; } try { btnSave.disabled = true; await App.api(`/api/tickets/articles/${articleId}/retrodata-article`, { method: 'POST', body: JSON.stringify({ create_time: val }) }); Toast.success('Data creazione articolo aggiornata!'); this.render(this.ticketId); } catch (err) { Toast.error('Errore retrodatazione articolo: ' + err.message); btnSave.disabled = false; } }); } }); // HTML Mode Toggle Listener const htmlToggle = document.getElementById('html-toggle'); if (htmlToggle) { htmlToggle.addEventListener('change', (e) => { const isChecked = e.target.checked; localStorage.setItem('otrs_turbo_html_mode', isChecked); this.htmlMode = isChecked; this.render(this.ticketId); }); } }, };