/** * Ticket Detail View * Shows full ticket info with quick-edit dropdowns, article timeline, and add-note form. */ const TicketDetailView = { ticketId: null, htmlMode: true, originalValues: {}, noteAttachments: [], saveDraft() { if (!this.ticketId) return; const body = this.noteQuill ? this.noteQuill.root.innerHTML.trim() : ''; const subject = document.getElementById('note-subject') ? document.getElementById('note-subject').value.trim() : ''; const time_unit = document.getElementById('note-time-units') ? document.getElementById('note-time-units').value.trim() : ''; const ticket_state_id = document.getElementById('note-ticket-state') ? document.getElementById('note-ticket-state').value : ''; if ((body !== '

' && body !== '') || subject !== '' || time_unit !== '' || this.noteAttachments.length > 0 || ticket_state_id !== '') { App.saveDraft(this.ticketId, { type: 'note', body, subject, time_unit, ticket_state_id, attachments: [...this.noteAttachments] }); } else { App.clearDraft(this.ticketId, 'note'); } }, extractLinks(htmlOrText) { if (!htmlOrText) return []; const links = []; const seen = new Set(); // 1. Extract tags const anchorRegex = /]*?\s+)?href=["']([^"']+)["'][^>]*>(.*?)<\/a>/gi; let match; while ((match = anchorRegex.exec(htmlOrText)) !== null) { let url = match[1].trim().replace(/&/g, '&'); let text = match[2].replace(/<[^>]+>/g, '').trim(); if (!text) text = url; if (/^(javascript|mailto|tel|cid|#|\/api\/tickets\/attachments)/i.test(url)) { continue; } if (!seen.has(url)) { seen.add(url); links.push({ url, text }); } } // 2. Extract plain HTTP/HTTPS URLs from text const plainUrlRegex = /(https?:\/\/[^\s<"'>]+)/gi; while ((match = plainUrlRegex.exec(htmlOrText)) !== null) { let url = match[1].trim().replace(/[.,;)]+$/, ''); if (/^\/api\/tickets\/attachments/i.test(url)) continue; if (!seen.has(url)) { seen.add(url); links.push({ url, text: url }); } } return links; }, updateNoteAttachmentList() { const listEl = document.getElementById('note-file-list'); if (!listEl) return; listEl.innerHTML = this.noteAttachments.map((att, idx) => `

📎 ${App.escapeHtml(att.filename)} (${Math.round(att.content.length * 0.75 / 1024)} KB)

`; } else if (current.type === 'pdf') { previewHtml = `

Rendering documento PDF in corso...

`; } else if (current.type === 'text') { const attId = (current.src.match(/\/attachments\/(\d+)/) || [])[1]; previewHtml = `

`; } else { const icon = this.getFileIcon(current.filename); previewHtml = `

${icon}

${App.escapeHtml(current.filename)}

${App.escapeHtml(current.sizeText || 'Allegato documento')}

Scegli se aprire il file con l'applicazione predefinita del tuo computer (Word, Excel, PowerPoint, ecc.) oppure scaricarne una copia locale.

Scarica copia

`; } wrapper.innerHTML = previewHtml; this.currentFilename = current.filename || 'documento.pdf'; titleEl.textContent = current.filename || 'Allegato'; counterEl.textContent = `${currentIndex + 1} / ${itemsList.length}`; downloadBtn.href = current.downloadUrl; downloadBtn.download = current.filename || ''; if (itemsList.length <= 1) { prevBtn.style.display = 'none'; nextBtn.style.display = 'none'; } else { prevBtn.style.display = 'flex'; nextBtn.style.display = 'flex'; } if (current.type === 'pdf') { this.initPdfJsViewer(current.src); } else if (current.type === 'image') { this.initImageEditor(current.src, current.filename); } else if (current.type === 'text') { const textarea = document.getElementById('text-editor-textarea'); const saveBtn = document.getElementById('text-save-btn'); const attId = (current.src.match(/\/attachments\/(\d+)/) || [])[1]; if (textarea) { fetch(current.src) .then(r => r.text()) .then(txt => { textarea.value = txt; }) .catch(err => { textarea.value = 'Errore nel caricamento del file: ' + err.message; }); } if (saveBtn && attId && textarea) { saveBtn.addEventListener('click', async () => { try { saveBtn.disabled = true; saveBtn.innerHTML = '💾 Salvataggio...'; await App.api(`/api/tickets/attachments/${attId}`, { method: 'PUT', body: JSON.stringify({ content: textarea.value }) }); Toast.success('File di testo salvato con successo!'); } catch (err) { Toast.error('Errore durante il salvataggio: ' + err.message); } finally { saveBtn.disabled = false; saveBtn.innerHTML = '💾 Salva Modifiche'; } }); } } else { const openSysBtn = document.getElementById('doc-open-system-btn'); const attId = (current.src.match(/\/attachments\/(\d+)/) || [])[1]; if (openSysBtn && attId) { openSysBtn.addEventListener('click', async () => { try { openSysBtn.disabled = true; openSysBtn.innerHTML = '🚀 Apertura in corso...'; await App.api(`/api/tickets/attachments/${attId}/open`, { method: 'POST' }); Toast.success('File aperto con l\'applicazione di sistema!'); } catch (err) { Toast.error('Impossibile aprire il file: ' + err.message); } finally { openSysBtn.disabled = false; openSysBtn.innerHTML = '🚀 Apri con app di sistema'; } }); } } overlay.focus(); }; this.pdfHasBeenSaved = false; const checkPdfHasModifications = () => { if (this.pdfHasBeenSaved) return false; const canvases = document.querySelectorAll('.pdf-annotation-canvas'); for (const c of canvases) { if (c.pageObjects && c.pageObjects.length > 0) return true; const ctx = c.getContext('2d'); const imgData = ctx.getImageData(0, 0, c.width, c.height); if (imgData.data.some(channel => channel !== 0)) return true; } return false; }; const confirmDiscardChanges = () => { if (checkPdfHasModifications()) { return confirm('Attenzione: Sono presenti modifiche non salvate al PDF. Vuoi davvero uscire o cambiare allegato senza salvare?'); } return true; }; const showPrev = () => { if (itemsList.length <= 1) return; if (!confirmDiscardChanges()) return; this.pdfHasBeenSaved = false; currentIndex = (currentIndex - 1 + itemsList.length) % itemsList.length; updateDisplay(); }; const showNext = () => { if (itemsList.length <= 1) return; if (!confirmDiscardChanges()) return; this.pdfHasBeenSaved = false; currentIndex = (currentIndex + 1) % itemsList.length; updateDisplay(); }; const closeLightbox = () => { if (!confirmDiscardChanges()) return; window.currentPdfDoc = null; document.removeEventListener('keydown', handleKeydown, true); window.removeEventListener('keydown', handleKeydown, true); window.removeEventListener('blur', handleWindowBlur); overlay.style.opacity = '0'; setTimeout(() => overlay.remove(), 200); }; // Helper to generate filename with optional timestamp prefix if already downloaded in current session const getOutputFilename = (originalName) => this.getOutputFilename(originalName); const savePdfDocument = async () => { if (!window.PDFLib) { Toast.error('Libreria salvataggio PDF-Lib non caricata'); return; } const saveBtn = document.getElementById('pdf-save-edited'); try { if (saveBtn) { saveBtn.disabled = true; saveBtn.textContent = 'Generazione PDF...'; } const pdfDocLib = await window.PDFLib.PDFDocument.load(this.currentRawPdfBytes); const libPages = pdfDocLib.getPages(); const totalPages = libPages.length; for (let num = 1; num <= totalPages; num++) { const baseCanvas = document.getElementById(`pdf-canvas-page-${num}`); const drawCanvas = document.getElementById(`pdf-draw-canvas-page-${num}`); if (!baseCanvas || !drawCanvas) continue; // Check if drawCanvas has any annotations const drawCtx = drawCanvas.getContext('2d'); const imgData = drawCtx.getImageData(0, 0, drawCanvas.width, drawCanvas.height); const hasDrawing = imgData.data.some(channel => channel !== 0); if (hasDrawing && libPages[num - 1]) { // Merge base page and drawings onto a temporary canvas const tempCanvas = document.createElement('canvas'); tempCanvas.width = baseCanvas.width; tempCanvas.height = baseCanvas.height; const tempCtx = tempCanvas.getContext('2d'); tempCtx.drawImage(baseCanvas, 0, 0); tempCtx.globalCompositeOperation = 'multiply'; tempCtx.drawImage(drawCanvas, 0, 0); tempCtx.globalCompositeOperation = 'source-over'; const dataUrl = tempCanvas.toDataURL('image/jpeg', 0.92); const jpgImage = await pdfDocLib.embedJpg(dataUrl); const targetPage = libPages[num - 1]; const { width, height } = targetPage.getSize(); targetPage.drawImage(jpgImage, { x: 0, y: 0, width: width, height: height, }); } } const modifiedBytes = await pdfDocLib.save(); const blob = new Blob([modifiedBytes], { type: 'application/pdf' }); const downloadUrl = URL.createObjectURL(blob); const outName = getOutputFilename(this.currentFilename); const a = document.createElement('a'); a.href = downloadUrl; a.download = outName; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(downloadUrl); this.pdfHasBeenSaved = true; Toast.success(`PDF modificato scaricato: ${outName}`); } catch (saveErr) { console.error('Error saving edited PDF', saveErr); Toast.error('Errore durante il salvataggio: ' + saveErr.message); } finally { if (saveBtn) { saveBtn.disabled = false; saveBtn.textContent = '💾 Scarica PDF Modificato'; } } }; const handleKeydown = (e) => { const currentItem = itemsList[currentIndex]; if (currentItem && App.isShortcutTriggered(e, 'pdf_save_edited')) { e.preventDefault(); e.stopPropagation(); if (currentItem.type === 'pdf') { savePdfDocument(); } else if (currentItem.type === 'image') { this.saveImageDocument(currentItem.filename); } else { // Non-PDF/image attachment: trigger download/open link const downloadBtn = overlay.querySelector('#lightbox-download-btn'); if (downloadBtn) { downloadBtn.click(); } else if (currentItem.src) { const a = document.createElement('a'); a.href = currentItem.src; a.download = currentItem.filename || 'allegato'; a.target = '_blank'; a.click(); } } return; } // If user is editing text in an input, textarea or contenteditable element, allow standard cursor navigation for arrow keys etc. const activeTag = document.activeElement ? document.activeElement.tagName.toUpperCase() : ''; const isInputOrTextarea = activeTag === 'INPUT' || activeTag === 'TEXTAREA' || (document.activeElement && document.activeElement.isContentEditable); if (isInputOrTextarea) { return; } if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeLightbox(); } else if (e.key === 'ArrowLeft') { e.preventDefault(); e.stopPropagation(); showPrev(); } else if (e.key === 'ArrowRight') { e.preventDefault(); e.stopPropagation(); showNext(); } else if (e.key === 'ArrowUp' && window.currentPdfDoc) { e.preventDefault(); const prevPageBtn = document.getElementById('pdf-prev-page'); if (prevPageBtn) prevPageBtn.click(); } else if (e.key === 'ArrowDown' && window.currentPdfDoc) { e.preventDefault(); const nextPageBtn = document.getElementById('pdf-next-page'); if (nextPageBtn) nextPageBtn.click(); } }; // When clicking anywhere on the lightbox overlay or pressing ESC, ensure focus returns to main window const handleWindowBlur = () => { window.focus(); }; window.addEventListener('blur', handleWindowBlur); document.addEventListener('keydown', handleKeydown, true); window.addEventListener('keydown', handleKeydown, true); prevBtn.addEventListener('click', (e) => { e.stopPropagation(); showPrev(); }); nextBtn.addEventListener('click', (e) => { e.stopPropagation(); showNext(); }); closeBtn.addEventListener('click', (e) => { e.stopPropagation(); closeLightbox(); }); overlay.addEventListener('click', (e) => { if (e.target === overlay || e.target.id === 'lightbox-img-wrapper') { closeLightbox(); } }); updateDisplay(); overlay.offsetHeight; overlay.style.opacity = '1'; }, async initPdfJsViewer(url) { if (!window.pdfjsLib) { console.warn('PDF.js library not loaded'); return; } try { window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js'; const response = await fetch(url); const pdfBytes = await response.arrayBuffer(); this.currentRawPdfBytes = pdfBytes.slice(0); // copy buffer for pdf-lib export const loadingTask = window.pdfjsLib.getDocument({ data: new Uint8Array(pdfBytes) }); const pdfDoc = await loadingTask.promise; window.currentPdfDoc = pdfDoc; const totalPages = pdfDoc.numPages; const pageNumEl = document.getElementById('pdf-page-num'); const loadingEl = document.getElementById('pdf-loading'); const wrapper = document.getElementById('pdf-canvas-wrapper'); if (!wrapper) return; if (pageNumEl) pageNumEl.textContent = `Pagina 1 / ${totalPages}`; let currentTool = 'draw'; // 'draw' | 'text' | 'highlight' | 'shape' | 'signature' let currentColor = '#ef4444'; let currentHighlightOpacity = 0.15; let mousePos = null; let activeSignature = null; // Pre-fetch signatures to select default signature try { App.api('/api/config/user-signatures').then(sigs => { if (sigs && sigs.length > 0) { activeSignature = sigs.find(s => s.is_default) || sigs[0]; } }).catch(() => { }); } catch (_) { } const toolSelectBtn = document.getElementById('pdf-tool-select'); const toolDrawBtn = document.getElementById('pdf-tool-draw'); const toolTextBtn = document.getElementById('pdf-tool-text'); const toolHighlightBtn = document.getElementById('pdf-tool-highlight'); const toolShapeBtn = document.getElementById('pdf-tool-shape'); const toolSigBtn = document.getElementById('pdf-tool-signature'); const shapeControls = document.getElementById('pdf-shape-controls'); const highlightControls = document.getElementById('pdf-highlight-controls'); const highlightOpacityInput = document.getElementById('pdf-highlight-opacity'); const highlightOpacityVal = document.getElementById('pdf-highlight-opacity-val'); const colorPicker = document.getElementById('pdf-color-picker'); const toolClearBtn = document.getElementById('pdf-tool-clear'); const saveEditedBtn = document.getElementById('pdf-save-edited'); if (highlightOpacityInput && highlightOpacityVal) { highlightOpacityInput.oninput = (e) => { currentHighlightOpacity = parseFloat(e.target.value); highlightOpacityVal.textContent = `${Math.round(currentHighlightOpacity * 100)}%`; }; } const setActiveTool = (tool, activeBtn) => { currentTool = tool; const allToolBtns = [toolSelectBtn, toolDrawBtn, toolTextBtn, toolHighlightBtn, toolShapeBtn, toolSigBtn]; allToolBtns.forEach(b => { if (b) { b.style.background = 'transparent'; b.classList.remove('active'); } }); if (activeBtn) { activeBtn.style.background = 'var(--accent-primary)'; activeBtn.classList.add('active'); } if (shapeControls) { shapeControls.style.display = tool === 'shape' ? 'flex' : 'none'; } if (highlightControls) { highlightControls.style.display = (tool === 'draw' || tool === 'highlight') ? 'flex' : 'none'; } // Adjust pointer-events for text selection layer vs annotation canvas for (let num = 1; num <= totalPages; num++) { const dCanvas = document.getElementById(`pdf-draw-canvas-page-${num}`); const tLayer = document.getElementById(`pdf-text-layer-page-${num}`); if (dCanvas) { dCanvas.style.pointerEvents = tool === 'select' ? 'none' : 'auto'; } if (tLayer) { tLayer.style.pointerEvents = tool === 'select' ? 'auto' : 'none'; } } }; if (toolSelectBtn) toolSelectBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('select', toolSelectBtn); }; if (toolDrawBtn) toolDrawBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('draw', toolDrawBtn); }; if (toolTextBtn) toolTextBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('text', toolTextBtn); }; if (toolHighlightBtn) toolHighlightBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('highlight', toolHighlightBtn); }; if (toolSigBtn) { toolSigBtn.onclick = async (e) => { e.stopPropagation(); setActiveTool('signature', toolSigBtn); let sigPopup = document.getElementById('pdf-sig-picker-popup'); if (sigPopup) { sigPopup.remove(); return; } let allSignatures = []; try { allSignatures = await App.api('/api/config/user-signatures'); } catch (_) { } if (!activeSignature && allSignatures.length > 0) { activeSignature = allSignatures.find(s => s.is_default) || allSignatures[0]; } const btnRect = toolSigBtn.getBoundingClientRect(); sigPopup = document.createElement('div'); sigPopup.id = 'pdf-sig-picker-popup'; sigPopup.style.cssText = ` position: fixed; z-index: 20000; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); color: #ffffff; font-size: 0.78rem; min-width: 240px; max-height: 290px; overflow-y: auto; user-select: none; `; sigPopup.innerHTML = `

✍️ Seleziona Firma da Apporre

${allSignatures.length > 0 ? `

Clicca per scegliere la firma da timbrare:

${allSignatures.map(s => ` `).join('')}

` : `

Nessuna firma salvata nel database.
Puoi caricarne su Configurazioni Utente.

`} `; document.body.appendChild(sigPopup); const sRect = sigPopup.getBoundingClientRect(); const sWinW = window.innerWidth; const sWinH = window.innerHeight; let sLeft = btnRect.left; let sTop = btnRect.bottom + 6; if (sLeft + sRect.width > sWinW - 12) sLeft = sWinW - sRect.width - 12; if (sLeft < 12) sLeft = 12; if (sTop + sRect.height > sWinH - 12) { sTop = btnRect.top - sRect.height - 6; if (sTop < 12) sTop = sWinH - sRect.height - 12; } sigPopup.style.left = `${sLeft}px`; sigPopup.style.top = `${sTop}px`; const closeSigPopup = () => { if (sigPopup) sigPopup.remove(); }; sigPopup.querySelector('#sig-popup-close').onclick = closeSigPopup; sigPopup.querySelectorAll('.sig-picker-item').forEach(btn => { btn.onclick = (eBtn) => { eBtn.stopPropagation(); const found = allSignatures.find(s => s.id == btn.dataset.id); if (found) { activeSignature = found; Toast.success(`Firma "${found.name}" selezionata! Clicca sul PDF per apporla.`); } closeSigPopup(); }; }); const closeOnOutside = (evt) => { if (!sigPopup.contains(evt.target) && evt.target !== toolSigBtn) { closeSigPopup(); document.removeEventListener('mousedown', closeOnOutside, true); } }; setTimeout(() => document.addEventListener('mousedown', closeOnOutside, true), 50); }; } if (toolShapeBtn) { toolShapeBtn.onclick = async (e) => { e.stopPropagation(); setActiveTool('shape', toolShapeBtn); let shapePopup = document.getElementById('pdf-shape-picker-popup'); if (shapePopup) { shapePopup.remove(); return; } let allShapes = []; try { allShapes = await App.api('/api/config/user-shapes'); } catch (_) { } const btnRect = toolShapeBtn.getBoundingClientRect(); shapePopup = document.createElement('div'); shapePopup.id = 'pdf-shape-picker-popup'; shapePopup.style.cssText = ` position: fixed; left: ${btnRect.left}px; top: ${btnRect.bottom + 6}px; z-index: 20000; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); color: #ffffff; font-size: 0.78rem; min-width: 220px; max-height: 280px; overflow-y: auto; user-select: none; `; shapePopup.innerHTML = `

📐 Seleziona Forma

Forme Base

Forme Salvate in SQLite ${allShapes.length > 0 ? `

${allShapes.map(sh => ` `).join('')}

` : `

Nessuna forma salvata. Puoi crearne su 'Configurazioni Utente'.

`; document.body.appendChild(shapePopup); const sRect = shapePopup.getBoundingClientRect(); const sWinW = window.innerWidth; const sWinH = window.innerHeight; let sLeft = btnRect.left; let sTop = btnRect.bottom + 6; if (sLeft + sRect.width > sWinW - 12) { sLeft = sWinW - sRect.width - 12; } if (sLeft < 12) { sLeft = 12; } if (sTop + sRect.height > sWinH - 12) { sTop = btnRect.top - sRect.height - 6; if (sTop < 12) sTop = sWinH - sRect.height - 12; } shapePopup.style.left = `${sLeft}px`; shapePopup.style.top = `${sTop}px`; const closePopup = () => { if (shapePopup) shapePopup.remove(); }; shapePopup.querySelector('#shape-popup-close').onclick = closePopup; shapePopup.querySelectorAll('.base-shape-btn').forEach(btn => { btn.onclick = (eBtn) => { eBtn.stopPropagation(); const typeSelect = document.getElementById('pdf-shape-type'); if (typeSelect) typeSelect.value = btn.dataset.type; closePopup(); }; }); shapePopup.querySelectorAll('.preset-shape-btn').forEach(btn => { btn.onclick = (eBtn) => { eBtn.stopPropagation(); const sh = allShapes.find(s => s.id == btn.dataset.id); if (sh) { const typeSelect = document.getElementById('pdf-shape-type'); const fillPicker = document.getElementById('pdf-shape-fill-color'); const borderPicker = document.getElementById('pdf-shape-border-color'); const borderWidth = document.getElementById('pdf-shape-border-width'); if (typeSelect) typeSelect.value = sh.shape_type; if (fillPicker && sh.fill_color !== 'transparent') fillPicker.value = sh.fill_color; if (borderPicker) borderPicker.value = sh.border_color; if (borderWidth) borderWidth.value = sh.border_width; Toast.success(`Forma "${sh.name}" selezionata! Clicca sul PDF per posizionarla.`); } closePopup(); }; }); const closeOnOutsideClick = (evt) => { if (!shapePopup.contains(evt.target) && evt.target !== toolShapeBtn) { closePopup(); document.removeEventListener('mousedown', closeOnOutsideClick, true); } }; setTimeout(() => document.addEventListener('mousedown', closeOnOutsideClick, true), 50); }; } if (colorPicker) colorPicker.onchange = (e) => { currentColor = e.target.value; }; const shapeBorderWidthEl = document.getElementById('pdf-shape-border-width'); if (shapeBorderWidthEl) { shapeBorderWidthEl.oninput = (e) => { const val = parseInt(e.target.value, 10) || 1; if (selectedObject && selectedObject.type === 'shape') { selectedObject.borderWidth = val; redrawPageObjects(); } }; } const shapeBorderColorEl = document.getElementById('pdf-shape-border-color'); if (shapeBorderColorEl) { shapeBorderColorEl.oninput = (e) => { if (selectedObject && selectedObject.type === 'shape') { selectedObject.borderColor = e.target.value; redrawPageObjects(); } }; } const shapeFillColorEl = document.getElementById('pdf-shape-fill-color'); if (shapeFillColorEl) { shapeFillColorEl.oninput = (e) => { if (selectedObject && selectedObject.type === 'shape') { selectedObject.fillColor = e.target.value; redrawPageObjects(); } }; } // Helper for manual text layer rendering fallback const renderManualTextLayer = (textContent, textLayerDiv, viewport) => { textLayerDiv.innerHTML = ''; if (!textContent || !textContent.items) return; textContent.items.forEach(item => { if (!item.str) return; const tx = window.pdfjsLib.Util.transform(viewport.transform, item.transform); const fontHeight = Math.hypot(tx[2], tx[3]); const span = document.createElement('span'); span.textContent = item.str; span.style.cssText = ` position: absolute; left: ${tx[4]}px; top: ${tx[5] - fontHeight}px; font-size: ${fontHeight}px; font-family: sans-serif; color: transparent; white-space: pre; cursor: text; transform-origin: 0% 0%; line-height: 1; `; if (tx[0] !== 1 || tx[1] !== 0) { const angle = Math.atan2(tx[1], tx[0]); if (angle !== 0) span.style.transform = `rotate(${angle}rad)`; } textLayerDiv.appendChild(span); }); }; // Create page containers, base canvases, text layers, and annotation overlay canvases for (let num = 1; num <= totalPages; num++) { const pageContainer = document.createElement('div'); pageContainer.className = 'pdf-page-container'; pageContainer.dataset.pageNum = num; pageContainer.style.cssText = 'position: relative; margin-bottom: 16px; display: flex; flex-direction: column; align-items: center; user-select: text;'; const baseCanvas = document.createElement('canvas'); baseCanvas.id = `pdf-canvas-page-${num}`; baseCanvas.style.cssText = 'box-shadow: 0 4px 20px rgba(0,0,0,0.4); border-radius: 4px; background: #ffffff; display: block;'; const textLayerDiv = document.createElement('div'); textLayerDiv.id = `pdf-text-layer-page-${num}`; textLayerDiv.className = 'textLayer'; textLayerDiv.style.cssText = 'position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-radius: 4px; z-index: 5; pointer-events: none; user-select: text; -webkit-user-select: text;'; const drawCanvas = document.createElement('canvas'); drawCanvas.id = `pdf-draw-canvas-page-${num}`; drawCanvas.className = 'pdf-annotation-canvas'; drawCanvas.dataset.pageNum = num; drawCanvas.style.cssText = 'position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-radius: 4px; cursor: crosshair; z-index: 10; touch-action: none;'; pageContainer.appendChild(baseCanvas); pageContainer.appendChild(textLayerDiv); pageContainer.appendChild(drawCanvas); wrapper.appendChild(pageContainer); } if (loadingEl) loadingEl.style.display = 'none'; // Render pages & bind drawing events on overlay canvases for (let num = 1; num <= totalPages; num++) { try { const page = await pdfDoc.getPage(num); const viewport = page.getViewport({ scale: 1.25 }); const baseCanvas = document.getElementById(`pdf-canvas-page-${num}`); const textLayerDiv = document.getElementById(`pdf-text-layer-page-${num}`); const drawCanvas = document.getElementById(`pdf-draw-canvas-page-${num}`); if (!baseCanvas || !drawCanvas) continue; baseCanvas.height = viewport.height; baseCanvas.width = viewport.width; if (textLayerDiv) { textLayerDiv.style.width = `${viewport.width}px`; textLayerDiv.style.height = `${viewport.height}px`; textLayerDiv.style.setProperty('--scale-factor', viewport.scale); } drawCanvas.height = viewport.height; drawCanvas.width = viewport.width; const baseCtx = baseCanvas.getContext('2d'); const renderContext = { canvasContext: baseCtx, viewport: viewport }; await page.render(renderContext).promise; if (textLayerDiv) { try { const textContent = await page.getTextContent(); if (window.pdfjsLib.renderTextLayer) { const task = window.pdfjsLib.renderTextLayer({ textContentSource: textContent, container: textLayerDiv, viewport: viewport, textDivs: [] }); if (task && task.promise) await task.promise; } else if (window.pdfjsLib.TextLayer) { const textLayer = new window.pdfjsLib.TextLayer({ textContentSource: textContent, container: textLayerDiv, viewport: viewport }); await textLayer.render(); } else { renderManualTextLayer(textContent, textLayerDiv, viewport); } } catch (textErr) { console.warn('PDF text layer render note:', textErr); try { const textContent = await page.getTextContent(); renderManualTextLayer(textContent, textLayerDiv, viewport); } catch (_) { } } } // Setup Object-Based Interactive Annotation System for each PDF page const drawCtx = drawCanvas.getContext('2d'); // Page elements array: [{ id, type: 'stroke'|'text'|'image', x, y, width, height, color, size, text, img, strokePoints }] const pageObjects = []; drawCanvas.pageObjects = pageObjects; let selectedObject = null; let isDraggingObj = false; let isResizingObj = false; let resizeHandleIndex = -1; // 0..7 let dragOffsetX = 0; let dragOffsetY = 0; let isDrawingStroke = false; let currentStrokePoints = []; let currentBrushType = 'pencil'; // 'pencil' | 'brush' | 'highlight' let currentBrushSize = 3; const redrawPageObjects = () => { drawCtx.clearRect(0, 0, drawCanvas.width, drawCanvas.height); pageObjects.forEach(obj => { drawCtx.save(); if (obj.type === 'stroke') { if (obj.points && obj.points.length > 0) { drawCtx.beginPath(); drawCtx.moveTo(obj.points[0].x, obj.points[0].y); obj.points.forEach(p => drawCtx.lineTo(p.x, p.y)); drawCtx.strokeStyle = obj.color; drawCtx.lineWidth = obj.size; if (obj.brushType === 'highlight' || obj.type === 'highlight') { drawCtx.globalCompositeOperation = 'multiply'; drawCtx.globalAlpha = obj.opacity !== undefined ? obj.opacity : 0.15; drawCtx.lineCap = 'square'; } else { drawCtx.globalCompositeOperation = 'source-over'; drawCtx.globalAlpha = obj.opacity !== undefined ? obj.opacity : 1.0; drawCtx.lineCap = 'round'; } drawCtx.lineJoin = 'round'; drawCtx.stroke(); } } else if (obj.type === 'text') { drawCtx.font = `bold ${obj.size || 16}px Inter, sans-serif`; drawCtx.fillStyle = obj.color; drawCtx.globalAlpha = 1.0; drawCtx.fillText(obj.text, obj.x, obj.y + (obj.size || 16)); } else if (obj.type === 'image') { drawCtx.globalAlpha = 1.0; if (obj.img) { drawCtx.drawImage(obj.img, obj.x, obj.y, obj.width, obj.height); } } else if (obj.type === 'shape') { drawCtx.globalAlpha = 1.0; drawCtx.beginPath(); if (obj.shapeType === 'circle') { const rx = obj.width / 2; const ry = obj.height / 2; const cx = obj.x + rx; const cy = obj.y + ry; drawCtx.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, 0, Math.PI * 2); if (obj.fillColor && obj.fillColor !== 'transparent') { drawCtx.fillStyle = obj.fillColor; drawCtx.fill(); } if (obj.borderWidth > 0 && obj.borderColor) { drawCtx.lineWidth = obj.borderWidth; drawCtx.strokeStyle = obj.borderColor; drawCtx.stroke(); } } else if (obj.shapeType === 'line' || obj.shapeType === 'arrow') { const startX = obj.x; const startY = obj.y; const endX = obj.x + obj.width; const endY = obj.y + obj.height; const bw = obj.borderWidth || 3; const strokeColor = obj.borderColor || obj.fillColor || '#1e3a8a'; if (obj.shapeType === 'arrow') { const angle = Math.atan2(endY - startY, endX - startX); const headLength = Math.max(14, bw * 3.5); const shorten = headLength * 0.6; // Shorten main line stem so round lineCap doesn't stick out past arrow tip const stemEndX = endX - shorten * Math.cos(angle); const stemEndY = endY - shorten * Math.sin(angle); drawCtx.moveTo(startX, startY); drawCtx.lineTo(stemEndX, stemEndY); drawCtx.lineWidth = bw; drawCtx.strokeStyle = strokeColor; drawCtx.lineCap = 'round'; drawCtx.stroke(); drawCtx.beginPath(); drawCtx.moveTo(endX, endY); drawCtx.lineTo( endX - headLength * Math.cos(angle - Math.PI / 6), endY - headLength * Math.sin(angle - Math.PI / 6) ); drawCtx.lineTo( endX - headLength * Math.cos(angle + Math.PI / 6), endY - headLength * Math.sin(angle + Math.PI / 6) ); drawCtx.closePath(); drawCtx.fillStyle = strokeColor; drawCtx.fill(); } else { drawCtx.moveTo(startX, startY); drawCtx.lineTo(endX, endY); drawCtx.lineWidth = bw; drawCtx.strokeStyle = strokeColor; drawCtx.lineCap = 'round'; drawCtx.stroke(); } } else { drawCtx.rect(obj.x, obj.y, obj.width, obj.height); if (obj.fillColor && obj.fillColor !== 'transparent') { drawCtx.fillStyle = obj.fillColor; drawCtx.fill(); } if (obj.borderWidth > 0 && obj.borderColor) { drawCtx.lineWidth = obj.borderWidth; drawCtx.strokeStyle = obj.borderColor; drawCtx.stroke(); } } } drawCtx.restore(); // Draw selection box & resize/endpoint handles if selected if (selectedObject === obj) { drawCtx.save(); drawCtx.strokeStyle = '#3b82f6'; drawCtx.lineWidth = 1.5; if (obj.type === 'shape' && (obj.shapeType === 'line' || obj.shapeType === 'arrow')) { // For line and arrow, draw guide line between origin and endpoint drawCtx.setLineDash([3, 3]); drawCtx.beginPath(); drawCtx.moveTo(obj.x, obj.y); drawCtx.lineTo(obj.x + obj.width, obj.y + obj.height); drawCtx.stroke(); drawCtx.setLineDash([]); } else { drawCtx.setLineDash([4, 4]); drawCtx.strokeRect(obj.x - 4, obj.y - 4, obj.width + 8, obj.height + 8); drawCtx.setLineDash([]); } // Handles at corners/endpoints const handles = getObjectHandles(obj); handles.forEach(h => { drawCtx.fillStyle = '#ffffff'; drawCtx.strokeStyle = '#2563eb'; drawCtx.lineWidth = 1.5; drawCtx.beginPath(); drawCtx.arc(h.x, h.y, 5, 0, Math.PI * 2); drawCtx.fill(); drawCtx.stroke(); }); drawCtx.restore(); } }); // Draw brush size circle indicator under mouse cursor when drawing/highlighting if (mousePos && (currentTool === 'draw' || currentTool === 'highlight')) { const currentSize = (currentTool === 'highlight' || currentBrushType === 'highlight') ? (currentBrushSize || 20) : (currentBrushType === 'brush' ? (currentBrushSize || 8) : (currentBrushSize || 3)); const radius = Math.max(2, currentSize / 2); drawCtx.save(); drawCtx.globalCompositeOperation = 'source-over'; drawCtx.beginPath(); drawCtx.arc(mousePos.x, mousePos.y, radius, 0, Math.PI * 2); drawCtx.strokeStyle = 'rgba(0, 0, 0, 0.7)'; drawCtx.lineWidth = 1.5; drawCtx.stroke(); drawCtx.beginPath(); drawCtx.arc(mousePos.x, mousePos.y, radius, 0, Math.PI * 2); drawCtx.strokeStyle = 'rgba(255, 255, 255, 0.9)'; drawCtx.lineWidth = 1; drawCtx.stroke(); drawCtx.restore(); } }; const getObjectHandles = (obj) => { const x = obj.x; const y = obj.y; const w = obj.width; const h = obj.height; if (obj.type === 'shape' && (obj.shapeType === 'line' || obj.shapeType === 'arrow')) { // Handle 0: Start / Origin point (P1), Handle 1: Midpoint, Handle 2: End / Target point (P2) return [ { x: x, y: y }, // 0: Punto di Origine { x: x + w / 2, y: y + h / 2 }, // 1: Punto Centrale { x: x + w, y: y + h } // 2: Punto di Arrivo ]; } return [ { x: x, y: y }, // 0: Top-Left { x: x + w / 2, y: y }, // 1: Top-Center { x: x + w, y: y }, // 2: Top-Right { x: x + w, y: y + h / 2 }, // 3: Middle-Right { x: x + w, y: y + h }, // 4: Bottom-Right { x: x + w / 2, y: y + h }, // 5: Bottom-Center { x: x, y: y + h }, // 6: Bottom-Left { x: x, y: y + h / 2 } // 7: Middle-Left ]; }; const hitTestObject = (x, y) => { for (let i = pageObjects.length - 1; i >= 0; i--) { const obj = pageObjects[i]; if (x >= obj.x - 6 && x <= obj.x + obj.width + 6 && y >= obj.y - 6 && y <= obj.y + obj.height + 6) { return obj; } } return null; }; const hitTestHandle = (obj, x, y) => { if (!obj) return -1; const handles = getObjectHandles(obj); for (let i = 0; i < handles.length; i++) { const h = handles[i]; const dist = Math.hypot(x - h.x, y - h.y); if (dist <= 7) return i; } return -1; }; // Delete selected object on Delete or Backspace key const deleteSelectedObject = () => { if (selectedObject) { const idx = pageObjects.indexOf(selectedObject); if (idx !== -1) { pageObjects.splice(idx, 1); selectedObject = null; redrawPageObjects(); Toast.info('Elemento rimosso'); } } }; document.addEventListener('keydown', (e) => { if (selectedObject && (e.key === 'Delete' || e.key === 'Backspace')) { if (document.activeElement && ['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) return; e.preventDefault(); deleteSelectedObject(); } }); // Ctrl + Right Click Context Menu Handler drawCanvas.oncontextmenu = async (e) => { if (e.ctrlKey || e.metaKey) { e.preventDefault(); e.stopPropagation(); const rect = drawCanvas.getBoundingClientRect(); const clickX = e.clientX - rect.left; const clickY = e.clientY - rect.top; // Fetch signatures and shapes from SQLite let signatures = []; let favoriteShapes = []; try { const [sigRes, shapeRes] = await Promise.all([ App.api('/api/config/user-signatures'), App.api('/api/config/user-shapes') ]); signatures = sigRes || []; favoriteShapes = (shapeRes || []).filter(s => s.is_favorite); } catch (_) { } let menuOverlay = document.getElementById('pdf-context-menu-popup'); if (menuOverlay) menuOverlay.remove(); menuOverlay = document.createElement('div'); menuOverlay.id = 'pdf-context-menu-popup'; menuOverlay.style.cssText = ` position: fixed; left: ${e.clientX}px; top: ${e.clientY}px; z-index: 20000; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); color: #ffffff; font-size: 0.8rem; min-width: 260px; user-select: none; `; menuOverlay.innerHTML = `

⚙️ Strumenti Rapidi PDF ✕

Tipo di Strumento

Dimensione tratto ${currentBrushSize}px

Colore

📐 Forme Preferite Salvate ${favoriteShapes.length > 0 ? `

${favoriteShapes.map(sh => ` `).join('')}

` : `

Nessuna forma preferita salvata.

✍️ Inserisci Firma / Immagine Utente ${signatures.length > 0 ? `

${signatures.map(s => ` `).join('')}

` : `

Nessuna firma salvata in SQLite.

`; document.body.appendChild(menuOverlay); // Clamp positioning to prevent overflowing window boundaries const menuRect = menuOverlay.getBoundingClientRect(); const winW = window.innerWidth; const winH = window.innerHeight; let finalLeft = e.clientX; let finalTop = e.clientY; if (finalLeft + menuRect.width > winW - 12) { finalLeft = winW - menuRect.width - 12; } if (finalLeft < 12) { finalLeft = 12; } if (finalTop + menuRect.height > winH - 12) { finalTop = winH - menuRect.height - 12; } if (finalTop < 12) { finalTop = 12; } menuOverlay.style.left = `${finalLeft}px`; menuOverlay.style.top = `${finalTop}px`; // Menu Event Listeners const closeCtx = () => { if (menuOverlay) menuOverlay.remove(); }; menuOverlay.querySelector('#ctx-close').onclick = closeCtx; menuOverlay.querySelectorAll('.ctx-btn').forEach(btn => { btn.onclick = (e) => { e.stopPropagation(); const type = btn.dataset.type; menuOverlay.querySelectorAll('.ctx-btn').forEach(b => { b.style.background = 'rgba(255,255,255,0.1)'; b.classList.remove('active'); }); btn.style.background = 'var(--accent-primary)'; btn.classList.add('active'); if (type === 'pencil') { currentBrushType = 'pencil'; currentBrushSize = 3; setActiveTool('draw', toolDrawBtn); } else if (type === 'brush') { currentBrushType = 'brush'; currentBrushSize = 8; setActiveTool('draw', toolDrawBtn); } else if (type === 'highlight') { currentBrushType = 'highlight'; currentBrushSize = 20; setActiveTool('highlight', toolHighlightBtn); } else if (type === 'shape') { setActiveTool('shape', toolShapeBtn); } const valBadge = menuOverlay.querySelector('#ctx-brush-val-badge'); if (valBadge) valBadge.textContent = `${currentBrushSize}px`; const pCircle = menuOverlay.querySelector('#ctx-brush-preview-circle'); if (pCircle) { pCircle.style.width = `${Math.max(2, currentBrushSize)}px`; pCircle.style.height = `${Math.max(2, currentBrushSize)}px`; } if (sizeInput) sizeInput.value = currentBrushSize; }; }); const sizeInput = menuOverlay.querySelector('#ctx-brush-size'); if (sizeInput) { sizeInput.oninput = (eVal) => { eVal.stopPropagation(); const val = parseInt(eVal.target.value, 10); currentBrushSize = val; const valBadge = menuOverlay.querySelector('#ctx-brush-val-badge'); if (valBadge) valBadge.textContent = `${val}px`; const pCircle = menuOverlay.querySelector('#ctx-brush-preview-circle'); if (pCircle) { pCircle.style.width = `${Math.max(2, val)}px`; pCircle.style.height = `${Math.max(2, val)}px`; } // Update shape border width input in toolbar if shape tool is active const shapeBorderWidthEl = document.getElementById('pdf-shape-border-width'); if (shapeBorderWidthEl) { shapeBorderWidthEl.value = val; } // If a shape object is currently selected, update its borderWidth live if (selectedObject && selectedObject.type === 'shape') { selectedObject.borderWidth = val; redrawPageObjects(); } }; } const ctxColorPicker = menuOverlay.querySelector('#ctx-color'); if (ctxColorPicker) { ctxColorPicker.onchange = (eVal) => { eVal.stopPropagation(); currentColor = eVal.target.value; const pCircle = menuOverlay.querySelector('#ctx-brush-preview-circle'); if (pCircle) pCircle.style.background = currentColor; if (colorPicker) colorPicker.value = currentColor; }; } menuOverlay.querySelectorAll('.ctx-shape-btn').forEach(btn => { btn.onclick = (e) => { e.stopPropagation(); const shId = btn.dataset.id; const sh = favoriteShapes.find(s => s.id == shId); if (sh) { const defaultW = 130; const defaultH = 85; const newObj = { id: Date.now(), type: 'shape', shapeType: sh.shape_type, x: clickX - defaultW / 2, y: clickY - defaultH / 2, width: defaultW, height: defaultH, fillColor: sh.fill_color, borderColor: sh.border_color, borderWidth: sh.border_width }; pageObjects.push(newObj); selectedObject = newObj; redrawPageObjects(); Toast.success(`Forma "${sh.name}" inserita!`); } closeCtx(); }; }); menuOverlay.querySelectorAll('.ctx-sig-btn').forEach(btn => { btn.onclick = (e) => { e.stopPropagation(); const sigId = btn.dataset.id; const sig = signatures.find(s => s.id == sigId); if (sig) { const img = new Image(); img.onload = () => { const targetWidth = Math.min(220, img.width || 180); const targetHeight = (img.height / img.width) * targetWidth || 80; const newObj = { id: Date.now(), type: 'image', img: img, x: clickX - targetWidth / 2, y: clickY - targetHeight / 2, width: targetWidth, height: targetHeight }; pageObjects.push(newObj); selectedObject = newObj; redrawPageObjects(); Toast.success(`Firma "${sig.name}" aggiunta al PDF! Usa 'Seleziona' per trascinare o ridimensionare.`); }; img.src = sig.image_data; } closeCtx(); }; }); const closeOnOutside = (evt) => { if (!menuOverlay.contains(evt.target)) { closeCtx(); document.removeEventListener('mousedown', closeOnOutside, true); } }; setTimeout(() => document.addEventListener('mousedown', closeOnOutside, true), 50); } }; // Tool Select Button Handler const toolSelectBtn = document.getElementById('pdf-tool-select'); if (toolSelectBtn) { toolSelectBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('select', toolSelectBtn); drawCanvas.style.cursor = 'default'; }; } drawCanvas.onmousedown = (e) => { if (e.button !== 0) return; // Only primary click const existingPopup = document.getElementById('pdf-context-menu-popup') || document.getElementById('img-context-menu-popup'); if (existingPopup) existingPopup.remove(); e.preventDefault(); e.stopPropagation(); const rect = drawCanvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // 1. Check if clicking on resize handles of currently selected object (any tool mode) if (selectedObject) { const hIdx = hitTestHandle(selectedObject, x, y); if (hIdx !== -1) { isResizingObj = true; resizeHandleIndex = hIdx; return; } } // 2. Check if clicking directly on an existing object border/body (any tool mode) const hitObj = hitTestObject(x, y); if (hitObj) { selectedObject = hitObj; isDraggingObj = true; dragOffsetX = x - hitObj.x; dragOffsetY = y - hitObj.y; redrawPageObjects(); return; } // If clicked empty space, deselect current object if (selectedObject) { selectedObject = null; redrawPageObjects(); } if (currentTool === 'select') { return; } if (currentTool === 'signature') { if (activeSignature) { const img = new Image(); img.onload = () => { const targetWidth = Math.min(220, img.width || 180); const targetHeight = (img.height / img.width) * targetWidth || 80; const newObj = { id: Date.now(), type: 'image', img: img, x: x - targetWidth / 2, y: y - targetHeight / 2, width: targetWidth, height: targetHeight }; pageObjects.push(newObj); selectedObject = newObj; redrawPageObjects(); Toast.success(`Firma "${activeSignature.name}" apposta sul PDF!`); }; img.src = activeSignature.image_data; } else { Toast.warning('Nessuna firma selezionata. Clicca sul pulsante ✍️ Firma per sceglierne una.'); } return; } const openInlineTextEditor = (clientX, clientY, initialX, initialY, existingTextObj = null) => { let inlineInput = document.getElementById('pdf-inline-text-input'); if (inlineInput) inlineInput.remove(); const initialText = existingTextObj ? existingTextObj.text : ''; const textColor = existingTextObj ? existingTextObj.color : currentColor; const textSize = existingTextObj ? existingTextObj.size : (currentBrushSize > 8 ? currentBrushSize : 16); inlineInput = document.createElement('input'); inlineInput.id = 'pdf-inline-text-input'; inlineInput.type = 'text'; inlineInput.value = initialText; inlineInput.placeholder = 'Scrivi testo...'; inlineInput.style.cssText = ` position: absolute; left: ${clientX}px; top: ${clientY}px; z-index: 20000; background: var(--bg-card); color: ${textColor}; border: 2px solid var(--accent-primary); border-radius: 4px; padding: 2px 6px; font-family: Inter, sans-serif; font-weight: 700; font-size: ${textSize}px; box-shadow: 0 4px 14px rgba(0,0,0,0.5); outline: none; min-width: 140px; `; document.body.appendChild(inlineInput); inlineInput.focus(); if (existingTextObj) inlineInput.select(); let isCommitted = false; const commitInlineText = () => { if (isCommitted) return; isCommitted = true; const text = inlineInput ? inlineInput.value.trim() : ''; if (inlineInput) inlineInput.remove(); if (existingTextObj) { if (text) { existingTextObj.text = text; drawCtx.font = `bold ${existingTextObj.size}px Inter, sans-serif`; existingTextObj.width = drawCtx.measureText(text).width; existingTextObj.height = existingTextObj.size * 1.2; selectedObject = existingTextObj; } else { // Remove if empty const idx = pageObjects.indexOf(existingTextObj); if (idx !== -1) pageObjects.splice(idx, 1); selectedObject = null; } redrawPageObjects(); } else if (text) { drawCtx.font = `bold ${textSize}px Inter, sans-serif`; const textWidth = drawCtx.measureText(text).width; const newObj = { id: Date.now(), type: 'text', text: text, x: initialX, y: initialY, width: textWidth, height: textSize * 1.2, color: currentColor, size: textSize }; pageObjects.push(newObj); selectedObject = newObj; redrawPageObjects(); } }; inlineInput.onkeydown = (eInput) => { if (eInput.key === 'Enter') { eInput.preventDefault(); commitInlineText(); } else if (eInput.key === 'Escape') { eInput.preventDefault(); isCommitted = true; if (inlineInput) inlineInput.remove(); redrawPageObjects(); } }; inlineInput.onblur = () => { setTimeout(commitInlineText, 100); }; }; // Bind double click to re-edit existing text objects drawCanvas.ondblclick = (eDbl) => { eDbl.preventDefault(); eDbl.stopPropagation(); const rect = drawCanvas.getBoundingClientRect(); const dblX = eDbl.clientX - rect.left; const dblY = eDbl.clientY - rect.top; const hitObj = hitTestObject(dblX, dblY); if (hitObj && hitObj.type === 'text') { openInlineTextEditor(eDbl.clientX, eDbl.clientY, dblX, dblY, hitObj); } }; if (currentTool === 'text') { openInlineTextEditor(e.clientX, e.clientY, x, y); return; } if (currentTool === 'shape') { const shapeTypeEl = document.getElementById('pdf-shape-type'); const fillColorEl = document.getElementById('pdf-shape-fill-color'); const borderColorEl = document.getElementById('pdf-shape-border-color'); const borderWidthEl = document.getElementById('pdf-shape-border-width'); const shapeType = shapeTypeEl ? shapeTypeEl.value : 'rectangle'; const fillColor = fillColorEl ? fillColorEl.value : '#3b82f6'; const borderColor = borderColorEl ? borderColorEl.value : '#1e3a8a'; const borderWidth = borderWidthEl ? parseInt(borderWidthEl.value, 10) : 3; if (shapeType === 'line' || shapeType === 'arrow') { // Interactive click-and-drag line / arrow creation const newShapeObj = { id: Date.now(), type: 'shape', shapeType: shapeType, x: x, y: y, width: 0, height: 0, fillColor: fillColor, borderColor: borderColor, borderWidth: borderWidth }; pageObjects.push(newShapeObj); selectedObject = newShapeObj; isResizingObj = true; resizeHandleIndex = 2; // Dragging target/endpoint handle redrawPageObjects(); return; } // Interactive click-and-drag for rectangle, circle / ellipse, etc. const newShapeObj = { id: Date.now(), type: 'shape', shapeType: shapeType, startX: x, startY: y, x: x, y: y, width: 0, height: 0, fillColor: fillColor, borderColor: borderColor, borderWidth: borderWidth }; pageObjects.push(newShapeObj); selectedObject = newShapeObj; isResizingObj = true; resizeHandleIndex = 99; // Dynamic 2D shape creation drag redrawPageObjects(); return; } // Drawing mode (pencil / brush / highlight) isDrawingStroke = true; currentStrokePoints = [{ x, y }]; const opacity = (currentTool === 'highlight' || currentBrushType === 'highlight') ? currentHighlightOpacity : (currentTool === 'draw' ? currentHighlightOpacity : 1.0); const size = (currentTool === 'highlight' || currentBrushType === 'highlight') ? (currentBrushSize || 20) : (currentBrushType === 'brush' ? (currentBrushSize || 8) : (currentBrushSize || 3)); const newStrokeObj = { id: Date.now(), type: 'stroke', points: currentStrokePoints, x: x, y: y, width: size, height: size, color: currentColor, size: size, opacity: opacity, brushType: currentBrushType }; pageObjects.push(newStrokeObj); // Keep selectedObject null during active drawing so no blue bounding box displays while drawing selectedObject = null; }; drawCanvas.onmousemove = (e) => { const rect = drawCanvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; mousePos = { x, y }; if (isResizingObj && selectedObject) { e.preventDefault(); const obj = selectedObject; const oldX = obj.x; const oldY = obj.y; const oldW = obj.width || 1; const oldH = obj.height || 1; if (obj.type === 'shape' && resizeHandleIndex === 99) { // Dynamic creation box for rectangle, ellipse, etc. const startX = obj.startX !== undefined ? obj.startX : obj.x; const startY = obj.startY !== undefined ? obj.startY : obj.y; obj.x = Math.min(startX, x); obj.y = Math.min(startY, y); obj.width = Math.abs(x - startX); obj.height = Math.abs(y - startY); redrawPageObjects(); return; } if (obj.type === 'shape' && (obj.shapeType === 'line' || obj.shapeType === 'arrow')) { // Line / Arrow endpoint dragging if (resizeHandleIndex === 0) { // Origin (P1: x, y) const endX = obj.x + obj.width; const endY = obj.y + obj.height; obj.x = x; obj.y = y; obj.width = endX - x; obj.height = endY - y; } else if (resizeHandleIndex === 2) { // Target / Endpoint (P2: x+width, y+height) obj.width = x - obj.x; obj.height = y - obj.y; } } else if (resizeHandleIndex === 0) { // Top-Left const oldRight = obj.x + obj.width; const oldBottom = obj.y + obj.height; obj.x = Math.min(x, oldRight - 10); obj.y = Math.min(y, oldBottom - 10); obj.width = oldRight - obj.x; obj.height = oldBottom - obj.y; } else if (resizeHandleIndex === 2) { // Top-Right const oldLeft = obj.x; const oldBottom = obj.y + obj.height; obj.y = Math.min(y, oldBottom - 10); obj.width = Math.max(10, x - oldLeft); obj.height = oldBottom - obj.y; } else if (resizeHandleIndex === 4) { // Bottom-Right obj.width = Math.max(10, x - obj.x); obj.height = Math.max(10, y - obj.y); } else if (resizeHandleIndex === 6) { // Bottom-Left const oldRight = obj.x + obj.width; obj.x = Math.min(x, oldRight - 10); obj.width = oldRight - obj.x; obj.height = Math.max(10, y - obj.y); } else if (resizeHandleIndex === 1) { // Top-Center const oldBottom = obj.y + obj.height; obj.y = Math.min(y, oldBottom - 10); obj.height = oldBottom - obj.y; } else if (resizeHandleIndex === 3) { // Middle-Right obj.width = Math.max(10, x - obj.x); } else if (resizeHandleIndex === 5) { // Bottom-Center obj.height = Math.max(10, y - obj.y); } else if (resizeHandleIndex === 7) { // Middle-Left const oldRight = obj.x + obj.width; obj.x = Math.min(x, oldRight - 10); obj.width = oldRight - obj.x; } if (obj.type === 'stroke' && obj.points) { const scaleX = obj.width / oldW; const scaleY = obj.height / oldH; obj.points.forEach(p => { p.x = obj.x + (p.x - oldX) * scaleX; p.y = obj.y + (p.y - oldY) * scaleY; }); } else if (obj.type === 'text') { const scaleY = obj.height / oldH; obj.size = Math.max(10, Math.round((obj.size || 16) * scaleY)); drawCtx.font = `bold ${obj.size}px Inter, sans-serif`; obj.width = drawCtx.measureText(obj.text).width; obj.height = obj.size * 1.2; } redrawPageObjects(); return; } if (isDraggingObj && selectedObject) { e.preventDefault(); const newX = x - dragOffsetX; const newY = y - dragOffsetY; const dx = newX - selectedObject.x; const dy = newY - selectedObject.y; selectedObject.x = newX; selectedObject.y = newY; if (selectedObject.type === 'stroke' && selectedObject.points) { selectedObject.points.forEach(p => { p.x += dx; p.y += dy; }); } redrawPageObjects(); return; } // Update cursor on hover over object or handle if (selectedObject) { const hIdx = hitTestHandle(selectedObject, x, y); if (hIdx !== -1) { drawCanvas.style.cursor = 'nwse-resize'; return; } } const hoverObj = hitTestObject(x, y); if (hoverObj) { drawCanvas.style.cursor = 'move'; } else if (currentTool === 'select') { drawCanvas.style.cursor = 'default'; } else { // Custom subtle dot cursor so the outer stroke-size circle is the main visual indicator drawCanvas.style.cursor = 'url("data:image/svg+xml;utf8,") 4 4, crosshair'; } // Live preview ghost for active signature under cursor if (currentTool === 'signature' && activeSignature && !isDrawingStroke && !isDraggingObj && !isResizingObj) { redrawPageObjects(); if (!activeSignature._imgCache || activeSignature._imgCache.src !== activeSignature.image_data) { const cachedImg = new Image(); cachedImg.src = activeSignature.image_data; activeSignature._imgCache = cachedImg; } const img = activeSignature._imgCache; if (img && img.complete && img.naturalWidth !== 0) { const targetW = Math.min(220, img.width || 180); const targetH = (img.height / img.width) * targetW || 80; const ghostX = x - targetW / 2; const ghostY = y - targetH / 2; drawCtx.save(); drawCtx.globalAlpha = 0.6; drawCtx.drawImage(img, ghostX, ghostY, targetW, targetH); drawCtx.strokeStyle = '#3b82f6'; drawCtx.lineWidth = 1.5; drawCtx.setLineDash([4, 4]); drawCtx.strokeRect(ghostX - 2, ghostY - 2, targetW + 4, targetH + 4); drawCtx.restore(); } return; } if (isDrawingStroke) { e.preventDefault(); e.stopPropagation(); currentStrokePoints.push({ x, y }); // Update stroke bounding box if (pageObjects.length > 0) { const activeStrokeObj = pageObjects[pageObjects.length - 1]; if (activeStrokeObj && activeStrokeObj.type === 'stroke') { let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; currentStrokePoints.forEach(p => { if (p.x < minX) minX = p.x; if (p.y < minY) minY = p.y; if (p.x > maxX) maxX = p.x; if (p.y > maxY) maxY = p.y; }); activeStrokeObj.x = minX; activeStrokeObj.y = minY; activeStrokeObj.width = maxX - minX; activeStrokeObj.height = maxY - minY; } } } redrawPageObjects(); }; const stopDrawing = (e) => { if (isResizingObj && selectedObject && selectedObject.type === 'shape') { if (resizeHandleIndex === 99) { if (selectedObject.width < 5 && selectedObject.height < 5) { const defaultW = 120; const defaultH = 80; const startX = selectedObject.startX !== undefined ? selectedObject.startX : selectedObject.x; const startY = selectedObject.startY !== undefined ? selectedObject.startY : selectedObject.y; selectedObject.x = startX - defaultW / 2; selectedObject.y = startY - defaultH / 2; selectedObject.width = defaultW; selectedObject.height = defaultH; } } else if (selectedObject.shapeType === 'line' || selectedObject.shapeType === 'arrow') { if (Math.hypot(selectedObject.width, selectedObject.height) < 5) { selectedObject.width = 120; selectedObject.height = 0; } } } if (isDrawingStroke && pageObjects.length > 0) { const activeObj = pageObjects[pageObjects.length - 1]; if (activeObj && activeObj.type === 'stroke') { if (!activeObj.points || activeObj.points.length <= 1) { // Single click without dragging: discard stroke pageObjects.pop(); redrawPageObjects(); } } } isDrawingStroke = false; isDraggingObj = false; isResizingObj = false; resizeHandleIndex = -1; redrawPageObjects(); }; drawCanvas.onmouseup = stopDrawing; drawCanvas.onmouseleave = (e) => { mousePos = null; stopDrawing(e); redrawPageObjects(); }; } catch (pErr) { console.warn(`Failed rendering PDF page ${num}`, pErr); } } // Clear button handler for current page if (toolClearBtn) { toolClearBtn.onclick = (e) => { e.stopPropagation(); const pageContainers = wrapper.querySelectorAll('.pdf-page-container'); let activePageNum = 1; const wrapperTop = wrapper.scrollTop; pageContainers.forEach((container) => { if (container.offsetTop - wrapper.offsetTop <= wrapperTop + 150) { activePageNum = parseInt(container.dataset.pageNum, 10); } }); const drawCanvas = document.getElementById(`pdf-draw-canvas-page-${activePageNum}`); if (drawCanvas) { if (drawCanvas.pageObjects) { drawCanvas.pageObjects.length = 0; } const ctx = drawCanvas.getContext('2d'); ctx.clearRect(0, 0, drawCanvas.width, drawCanvas.height); Toast.info(`Pagina ${activePageNum} pulita.`); } }; } // Save Edited PDF using pdf-lib and html canvas flattening if (saveEditedBtn) { saveEditedBtn.onclick = (e) => { e.stopPropagation(); savePdfDocument(); }; } // Scroll listener to update page counter in toolbar wrapper.addEventListener('scroll', () => { const pageContainers = wrapper.querySelectorAll('.pdf-page-container'); let currentVisiblePage = 1; const wrapperTop = wrapper.scrollTop; pageContainers.forEach((container) => { if (container.offsetTop - wrapper.offsetTop <= wrapperTop + 150) { currentVisiblePage = parseInt(container.dataset.pageNum, 10); } }); if (pageNumEl) { pageNumEl.textContent = `Pagina ${currentVisiblePage} / ${totalPages}`; } }); } catch (err) { console.error('Failed to load PDF via PDF.js', err); const loadingEl = document.getElementById('pdf-loading'); if (loadingEl) { loadingEl.innerHTML = `Errore caricamento PDF: ${App.escapeHtml(err.message)}`; } } }, initImageEditor(url, filename) { const baseCanvas = document.getElementById('image-base-canvas'); const drawCanvas = document.getElementById('image-draw-canvas'); const wrapper = document.getElementById('image-canvas-wrapper'); if (!baseCanvas || !drawCanvas || !wrapper) return; const baseCtx = baseCanvas.getContext('2d'); const drawCtx = drawCanvas.getContext('2d'); const loadedImg = new Image(); loadedImg.crossOrigin = 'anonymous'; let brightness = 100; let contrast = 100; let saturate = 100; let rotation = 0; let isGrayscale = false; let currentTool = 'draw'; let currentColor = '#ef4444'; let currentHighlightOpacity = 0.15; let currentBrushType = 'pencil'; let currentBrushSize = 3; let activeSignature = null; try { App.api('/api/config/user-signatures').then(sigs => { if (sigs && sigs.length > 0) { activeSignature = sigs.find(s => s.is_default) || sigs[0]; } }).catch(() => { }); } catch (_) { } const pageObjects = []; drawCanvas.pageObjects = pageObjects; let selectedObject = null; let isDraggingObj = false; let isResizingObj = false; let resizeHandleIndex = -1; let dragOffsetX = 0; let dragOffsetY = 0; let isDrawingStroke = false; let currentStrokePoints = []; const renderBaseImage = () => { const w = baseCanvas.width; const h = baseCanvas.height; baseCtx.clearRect(0, 0, w, h); baseCtx.save(); let filterStr = `brightness(${brightness}%) contrast(${contrast}%) saturate(${saturate}%)`; if (isGrayscale) filterStr += ' grayscale(100%)'; baseCtx.filter = filterStr; if (rotation !== 0) { baseCtx.translate(w / 2, h / 2); baseCtx.rotate((rotation * Math.PI) / 180); if (rotation === 90 || rotation === 270) { baseCtx.translate(-h / 2, -w / 2); baseCtx.drawImage(loadedImg, 0, 0, h, w); } else { baseCtx.translate(-w / 2, -h / 2); baseCtx.drawImage(loadedImg, 0, 0, w, h); } } else { baseCtx.drawImage(loadedImg, 0, 0, w, h); } baseCtx.restore(); }; let mousePos = null; const redrawPageObjects = () => { drawCtx.clearRect(0, 0, drawCanvas.width, drawCanvas.height); pageObjects.forEach(obj => { drawCtx.save(); if (obj.type === 'stroke') { if (obj.points && obj.points.length > 0) { drawCtx.beginPath(); drawCtx.moveTo(obj.points[0].x, obj.points[0].y); obj.points.forEach(p => drawCtx.lineTo(p.x, p.y)); drawCtx.strokeStyle = obj.color; drawCtx.lineWidth = obj.size; if (obj.brushType === 'highlight' || obj.type === 'highlight') { drawCtx.globalCompositeOperation = 'multiply'; drawCtx.globalAlpha = obj.opacity !== undefined ? obj.opacity : 0.15; drawCtx.lineCap = 'square'; } else { drawCtx.globalCompositeOperation = 'source-over'; drawCtx.globalAlpha = obj.opacity !== undefined ? obj.opacity : 1.0; drawCtx.lineCap = 'round'; } drawCtx.lineJoin = 'round'; drawCtx.stroke(); } } else if (obj.type === 'text') { drawCtx.font = `bold ${obj.size || 16}px Inter, sans-serif`; drawCtx.fillStyle = obj.color; drawCtx.globalAlpha = 1.0; drawCtx.fillText(obj.text, obj.x, obj.y + (obj.size || 16)); } else if (obj.type === 'image') { drawCtx.globalAlpha = 1.0; if (obj.img) { drawCtx.drawImage(obj.img, obj.x, obj.y, obj.width, obj.height); } } else if (obj.type === 'shape') { drawCtx.globalAlpha = 1.0; drawCtx.beginPath(); if (obj.shapeType === 'circle') { const rx = obj.width / 2; const ry = obj.height / 2; const cx = obj.x + rx; const cy = obj.y + ry; drawCtx.ellipse(cx, cy, Math.abs(rx), Math.abs(ry), 0, 0, Math.PI * 2); if (obj.fillColor && obj.fillColor !== 'transparent') { drawCtx.fillStyle = obj.fillColor; drawCtx.fill(); } if (obj.borderWidth > 0 && obj.borderColor) { drawCtx.lineWidth = obj.borderWidth; drawCtx.strokeStyle = obj.borderColor; drawCtx.stroke(); } } else if (obj.shapeType === 'line' || obj.shapeType === 'arrow') { const startX = obj.x; const startY = obj.y; const endX = obj.x + obj.width; const endY = obj.y + obj.height; const bw = obj.borderWidth || 3; const strokeColor = obj.borderColor || obj.fillColor || '#1e3a8a'; if (obj.shapeType === 'arrow') { const angle = Math.atan2(endY - startY, endX - startX); const headLength = Math.max(14, bw * 3.5); const shorten = headLength * 0.6; const stemEndX = endX - shorten * Math.cos(angle); const stemEndY = endY - shorten * Math.sin(angle); drawCtx.moveTo(startX, startY); drawCtx.lineTo(stemEndX, stemEndY); drawCtx.lineWidth = bw; drawCtx.strokeStyle = strokeColor; drawCtx.lineCap = 'round'; drawCtx.stroke(); drawCtx.beginPath(); drawCtx.moveTo(endX, endY); drawCtx.lineTo( endX - headLength * Math.cos(angle - Math.PI / 6), endY - headLength * Math.sin(angle - Math.PI / 6) ); drawCtx.lineTo( endX - headLength * Math.cos(angle + Math.PI / 6), endY - headLength * Math.sin(angle + Math.PI / 6) ); drawCtx.closePath(); drawCtx.fillStyle = strokeColor; drawCtx.fill(); } else { drawCtx.moveTo(startX, startY); drawCtx.lineTo(endX, endY); drawCtx.lineWidth = bw; drawCtx.strokeStyle = strokeColor; drawCtx.lineCap = 'round'; drawCtx.stroke(); } } else { drawCtx.rect(obj.x, obj.y, obj.width, obj.height); if (obj.fillColor && obj.fillColor !== 'transparent') { drawCtx.fillStyle = obj.fillColor; drawCtx.fill(); } if (obj.borderWidth > 0 && obj.borderColor) { drawCtx.lineWidth = obj.borderWidth; drawCtx.strokeStyle = obj.borderColor; drawCtx.stroke(); } } } drawCtx.restore(); if (selectedObject === obj) { drawCtx.save(); drawCtx.strokeStyle = '#3b82f6'; drawCtx.lineWidth = 1.5; if (obj.type === 'shape' && (obj.shapeType === 'line' || obj.shapeType === 'arrow')) { drawCtx.setLineDash([3, 3]); drawCtx.beginPath(); drawCtx.moveTo(obj.x, obj.y); drawCtx.lineTo(obj.x + obj.width, obj.y + obj.height); drawCtx.stroke(); drawCtx.setLineDash([]); } else { drawCtx.setLineDash([4, 4]); drawCtx.strokeRect(obj.x - 4, obj.y - 4, obj.width + 8, obj.height + 8); drawCtx.setLineDash([]); } const handles = getObjectHandles(obj); handles.forEach(h => { drawCtx.fillStyle = '#ffffff'; drawCtx.strokeStyle = '#2563eb'; drawCtx.lineWidth = 1.5; drawCtx.beginPath(); drawCtx.arc(h.x, h.y, 5, 0, Math.PI * 2); drawCtx.fill(); drawCtx.stroke(); }); drawCtx.restore(); } }); // Draw brush size circle indicator under mouse cursor when drawing/highlighting if (mousePos && (currentTool === 'draw' || currentTool === 'highlight')) { const currentSize = (currentTool === 'highlight' || currentBrushType === 'highlight') ? (currentBrushSize || 20) : (currentBrushType === 'brush' ? (currentBrushSize || 8) : (currentBrushSize || 3)); const radius = Math.max(2, currentSize / 2); drawCtx.save(); drawCtx.globalCompositeOperation = 'source-over'; drawCtx.beginPath(); drawCtx.arc(mousePos.x, mousePos.y, radius, 0, Math.PI * 2); drawCtx.strokeStyle = 'rgba(0, 0, 0, 0.7)'; drawCtx.lineWidth = 1.5; drawCtx.stroke(); drawCtx.beginPath(); drawCtx.arc(mousePos.x, mousePos.y, radius, 0, Math.PI * 2); drawCtx.strokeStyle = 'rgba(255, 255, 255, 0.9)'; drawCtx.lineWidth = 1; drawCtx.stroke(); drawCtx.restore(); } }; const getObjectHandles = (obj) => { const x = obj.x; const y = obj.y; const w = obj.width; const h = obj.height; if (obj.type === 'shape' && (obj.shapeType === 'line' || obj.shapeType === 'arrow')) { return [ { x: x, y: y }, { x: x + w / 2, y: y + h / 2 }, { x: x + w, y: y + h } ]; } return [ { x: x, y: y }, { x: x + w / 2, y: y }, { x: x + w, y: y }, { x: x + w, y: y + h / 2 }, { x: x + w, y: y + h }, { x: x + w / 2, y: y + h }, { x: x, y: y + h }, { x: x, y: y + h / 2 } ]; }; const hitTestObject = (x, y) => { for (let i = pageObjects.length - 1; i >= 0; i--) { const obj = pageObjects[i]; if (x >= obj.x - 6 && x <= obj.x + obj.width + 6 && y >= obj.y - 6 && y <= obj.y + obj.height + 6) { return obj; } } return null; }; const hitTestHandle = (obj, x, y) => { if (!obj) return -1; const handles = getObjectHandles(obj); for (let i = 0; i < handles.length; i++) { const h = handles[i]; if (Math.hypot(x - h.x, y - h.y) <= 7) return i; } return -1; }; loadedImg.onload = () => { const containerW = wrapper.clientWidth - 32 || 800; const containerH = wrapper.clientHeight - 32 || 600; let targetW = loadedImg.naturalWidth || loadedImg.width || 800; let targetH = loadedImg.naturalHeight || loadedImg.height || 600; const scale = Math.min(containerW / targetW, containerH / targetH, 1.0); targetW = Math.max(300, Math.round(targetW * scale)); targetH = Math.max(200, Math.round(targetH * scale)); baseCanvas.width = targetW; baseCanvas.height = targetH; drawCanvas.width = targetW; drawCanvas.height = targetH; renderBaseImage(); redrawPageObjects(); }; loadedImg.src = url; // Image Adjustment inputs const bInput = document.getElementById('img-adj-brightness'); const cInput = document.getElementById('img-adj-contrast'); const sInput = document.getElementById('img-adj-saturate'); const btnRotate = document.getElementById('img-btn-rotate'); const btnGrayscale = document.getElementById('img-btn-grayscale'); const btnResetAdj = document.getElementById('img-btn-reset-adj'); if (bInput) bInput.oninput = (e) => { brightness = e.target.value; renderBaseImage(); }; if (cInput) cInput.oninput = (e) => { contrast = e.target.value; renderBaseImage(); }; if (sInput) sInput.oninput = (e) => { saturate = e.target.value; renderBaseImage(); }; if (btnRotate) btnRotate.onclick = (e) => { e.stopPropagation(); rotation = (rotation + 90) % 360; renderBaseImage(); }; if (btnGrayscale) btnGrayscale.onclick = (e) => { e.stopPropagation(); isGrayscale = !isGrayscale; btnGrayscale.style.background = isGrayscale ? 'var(--accent-primary)' : 'transparent'; renderBaseImage(); }; if (btnResetAdj) btnResetAdj.onclick = (e) => { e.stopPropagation(); brightness = 100; contrast = 100; saturate = 100; rotation = 0; isGrayscale = false; if (bInput) bInput.value = 100; if (cInput) cInput.value = 100; if (sInput) sInput.value = 100; if (btnGrayscale) btnGrayscale.style.background = 'transparent'; renderBaseImage(); }; // Tool switching const toolSelectBtn = document.getElementById('img-tool-select'); const toolDrawBtn = document.getElementById('img-tool-draw'); const toolTextBtn = document.getElementById('img-tool-text'); const toolHighlightBtn = document.getElementById('img-tool-highlight'); const toolShapeBtn = document.getElementById('img-tool-shape'); const toolSigBtn = document.getElementById('img-tool-signature'); const shapeControls = document.getElementById('img-shape-controls'); const highlightControls = document.getElementById('img-highlight-controls'); const highlightOpacityInput = document.getElementById('img-highlight-opacity'); const highlightOpacityVal = document.getElementById('img-highlight-opacity-val'); const colorPicker = document.getElementById('img-color-picker'); const toolClearBtn = document.getElementById('img-tool-clear'); const saveEditedBtn = document.getElementById('img-save-edited'); if (highlightOpacityInput && highlightOpacityVal) { highlightOpacityInput.oninput = (e) => { currentHighlightOpacity = parseFloat(e.target.value); highlightOpacityVal.textContent = `${Math.round(currentHighlightOpacity * 100)}%`; }; } const setActiveTool = (tool, activeBtn) => { currentTool = tool; const allToolBtns = [toolSelectBtn, toolDrawBtn, toolTextBtn, toolHighlightBtn, toolShapeBtn, toolSigBtn]; allToolBtns.forEach(b => { if (b) { b.style.background = 'transparent'; b.classList.remove('active'); } }); if (activeBtn) { activeBtn.style.background = 'var(--accent-primary)'; activeBtn.classList.add('active'); } if (shapeControls) { shapeControls.style.display = tool === 'shape' ? 'flex' : 'none'; } if (highlightControls) { highlightControls.style.display = (tool === 'draw' || tool === 'highlight') ? 'flex' : 'none'; } drawCanvas.style.pointerEvents = tool === 'select' ? 'none' : 'auto'; }; if (toolSelectBtn) toolSelectBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('select', toolSelectBtn); }; if (toolDrawBtn) toolDrawBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('draw', toolDrawBtn); }; if (toolTextBtn) toolTextBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('text', toolTextBtn); }; if (toolHighlightBtn) toolHighlightBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('highlight', toolHighlightBtn); }; if (toolShapeBtn) toolShapeBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('shape', toolShapeBtn); }; if (toolSigBtn) toolSigBtn.onclick = (e) => { e.stopPropagation(); setActiveTool('signature', toolSigBtn); }; if (colorPicker) { colorPicker.onchange = (e) => { currentColor = e.target.value; if (selectedObject) { if (selectedObject.type === 'stroke') selectedObject.color = currentColor; else if (selectedObject.type === 'text') selectedObject.color = currentColor; redrawPageObjects(); } }; } if (toolClearBtn) { toolClearBtn.onclick = (e) => { e.stopPropagation(); pageObjects.length = 0; selectedObject = null; redrawPageObjects(); Toast.info('Annotazioni immagine pulite'); }; } if (saveEditedBtn) { saveEditedBtn.onclick = (e) => { e.stopPropagation(); this.saveImageDocument(filename); }; } // Mouse Events on drawCanvas drawCanvas.onmousedown = (e) => { if (e.button !== 0) return; const existingPopup = document.getElementById('img-context-menu-popup') || document.getElementById('pdf-context-menu-popup'); if (existingPopup) existingPopup.remove(); e.preventDefault(); e.stopPropagation(); const rect = drawCanvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; if (selectedObject) { const hIdx = hitTestHandle(selectedObject, x, y); if (hIdx !== -1) { isResizingObj = true; resizeHandleIndex = hIdx; return; } } const hitObj = hitTestObject(x, y); if (hitObj) { selectedObject = hitObj; isDraggingObj = true; dragOffsetX = x - hitObj.x; dragOffsetY = y - hitObj.y; redrawPageObjects(); return; } if (selectedObject) { selectedObject = null; redrawPageObjects(); } if (currentTool === 'select') return; if (currentTool === 'signature') { if (activeSignature) { const img = new Image(); img.onload = () => { const targetWidth = Math.min(220, img.width || 180); const targetHeight = (img.height / img.width) * targetWidth || 80; const newObj = { id: Date.now(), type: 'image', img: img, x: x - targetWidth / 2, y: y - targetHeight / 2, width: targetWidth, height: targetHeight }; pageObjects.push(newObj); selectedObject = newObj; redrawPageObjects(); }; img.src = activeSignature.image_data; } else { Toast.warning('Nessuna firma selezionata.'); } return; } if (currentTool === 'shape') { const shapeTypeEl = document.getElementById('img-shape-type'); const fillColorEl = document.getElementById('img-shape-fill-color'); const borderColorEl = document.getElementById('img-shape-border-color'); const borderWidthEl = document.getElementById('img-shape-border-width'); const shapeType = shapeTypeEl ? shapeTypeEl.value : 'rectangle'; const fillColor = fillColorEl ? fillColorEl.value : '#3b82f6'; const borderColor = borderColorEl ? borderColorEl.value : '#1e3a8a'; const borderWidth = borderWidthEl ? parseInt(borderWidthEl.value, 10) : 3; if (shapeType === 'line' || shapeType === 'arrow') { const newShapeObj = { id: Date.now(), type: 'shape', shapeType: shapeType, x: x, y: y, width: 0, height: 0, fillColor: fillColor, borderColor: borderColor, borderWidth: borderWidth }; pageObjects.push(newShapeObj); selectedObject = newShapeObj; isResizingObj = true; resizeHandleIndex = 2; redrawPageObjects(); return; } const newShapeObj = { id: Date.now(), type: 'shape', shapeType: shapeType, startX: x, startY: y, x: x, y: y, width: 0, height: 0, fillColor: fillColor, borderColor: borderColor, borderWidth: borderWidth }; pageObjects.push(newShapeObj); selectedObject = newShapeObj; isResizingObj = true; resizeHandleIndex = 99; redrawPageObjects(); return; } isDrawingStroke = true; currentStrokePoints = [{ x, y }]; const opacity = (currentTool === 'highlight' || currentBrushType === 'highlight') ? currentHighlightOpacity : (currentTool === 'draw' ? currentHighlightOpacity : 1.0); const size = (currentTool === 'highlight' || currentBrushType === 'highlight') ? (currentBrushSize || 20) : (currentBrushType === 'brush' ? (currentBrushSize || 8) : (currentBrushSize || 3)); const newStrokeObj = { id: Date.now(), type: 'stroke', points: currentStrokePoints, x: x, y: y, width: size, height: size, color: currentColor, size: size, opacity: opacity, brushType: currentBrushType }; pageObjects.push(newStrokeObj); selectedObject = null; }; drawCanvas.onmousemove = (e) => { const rect = drawCanvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; mousePos = { x, y }; if (isResizingObj && selectedObject) { e.preventDefault(); const obj = selectedObject; if (obj.type === 'shape' && resizeHandleIndex === 99) { const startX = obj.startX !== undefined ? obj.startX : obj.x; const startY = obj.startY !== undefined ? obj.startY : obj.y; obj.x = Math.min(startX, x); obj.y = Math.min(startY, y); obj.width = Math.abs(x - startX); obj.height = Math.abs(y - startY); redrawPageObjects(); return; } if (obj.type === 'shape' && (obj.shapeType === 'line' || obj.shapeType === 'arrow')) { if (resizeHandleIndex === 0) { const endX = obj.x + obj.width; const endY = obj.y + obj.height; obj.x = x; obj.y = y; obj.width = endX - x; obj.height = endY - y; } else if (resizeHandleIndex === 2) { obj.width = x - obj.x; obj.height = y - obj.y; } } else if (resizeHandleIndex === 4) { obj.width = Math.max(10, x - obj.x); obj.height = Math.max(10, y - obj.y); } redrawPageObjects(); return; } if (isDraggingObj && selectedObject) { e.preventDefault(); selectedObject.x = x - dragOffsetX; selectedObject.y = y - dragOffsetY; redrawPageObjects(); return; } if (isDrawingStroke) { e.preventDefault(); currentStrokePoints.push({ x, y }); } if (selectedObject) { const hIdx = hitTestHandle(selectedObject, x, y); if (hIdx !== -1) { drawCanvas.style.cursor = 'nwse-resize'; redrawPageObjects(); return; } } const hoverObj = hitTestObject(x, y); if (hoverObj) { drawCanvas.style.cursor = 'move'; } else if (currentTool === 'select') { drawCanvas.style.cursor = 'default'; } else { // Custom subtle dot cursor so the outer stroke-size circle is the main visual indicator drawCanvas.style.cursor = 'url("data:image/svg+xml;utf8,") 4 4, crosshair'; } redrawPageObjects(); }; const stopDrawing = () => { if (isResizingObj && selectedObject && selectedObject.type === 'shape') { if (resizeHandleIndex === 99) { if (selectedObject.width < 5 && selectedObject.height < 5) { const defaultW = 120; const defaultH = 80; const startX = selectedObject.startX !== undefined ? selectedObject.startX : selectedObject.x; const startY = selectedObject.startY !== undefined ? selectedObject.startY : selectedObject.y; selectedObject.x = startX - defaultW / 2; selectedObject.y = startY - defaultH / 2; selectedObject.width = defaultW; selectedObject.height = defaultH; } } else if (selectedObject.shapeType === 'line' || selectedObject.shapeType === 'arrow') { if (Math.hypot(selectedObject.width, selectedObject.height) < 5) { selectedObject.width = 120; selectedObject.height = 0; } } } isDrawingStroke = false; isDraggingObj = false; isResizingObj = false; resizeHandleIndex = -1; redrawPageObjects(); }; drawCanvas.onmouseup = stopDrawing; drawCanvas.onmouseleave = () => { mousePos = null; stopDrawing(); }; // Ctrl + Right Click Context Menu Handler for Image Editor drawCanvas.oncontextmenu = async (e) => { if (e.ctrlKey || e.metaKey) { e.preventDefault(); e.stopPropagation(); const rect = drawCanvas.getBoundingClientRect(); const clickX = e.clientX - rect.left; const clickY = e.clientY - rect.top; // Fetch signatures and shapes from SQLite let signatures = []; let favoriteShapes = []; try { const [sigRes, shapeRes] = await Promise.all([ App.api('/api/config/user-signatures'), App.api('/api/config/user-shapes') ]); signatures = sigRes || []; favoriteShapes = (shapeRes || []).filter(s => s.is_favorite); } catch (_) { } let menuOverlay = document.getElementById('img-context-menu-popup'); if (menuOverlay) menuOverlay.remove(); menuOverlay = document.createElement('div'); menuOverlay.id = 'img-context-menu-popup'; menuOverlay.style.cssText = ` position: fixed; left: ${e.clientX}px; top: ${e.clientY}px; z-index: 20000; background: #0f172a; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; padding: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.8); color: #ffffff; font-size: 0.8rem; min-width: 260px; user-select: none; `; menuOverlay.innerHTML = `

⚙️ Strumenti Rapidi Immagine ✕

Tipo di Strumento

Dimensione tratto ${currentBrushSize}px

Colore

📐 Forme Preferite Salvate ${favoriteShapes.length > 0 ? `

${favoriteShapes.map(sh => ` `).join('')}

` : `

Nessuna forma preferita salvata.

✍️ Inserisci Firma / Immagine Utente ${signatures.length > 0 ? `

${signatures.map(s => ` `).join('')}

` : `

Nessuna firma salvata in SQLite.

🔤 Inserisci Testo sul PDF

`; document.body.appendChild(modal); const inputEl = modal.querySelector('#pdf-modal-text-input'); const confirmBtn = modal.querySelector('#pdf-modal-confirm-btn'); const cancelBtn = modal.querySelector('#pdf-modal-cancel-btn'); const closeBtn = modal.querySelector('#pdf-modal-close-btn'); if (inputEl) { inputEl.focus(); inputEl.select(); } const closeModal = () => { if (modal) modal.remove(); }; const submitText = () => { const val = inputEl ? inputEl.value : ''; closeModal(); if (onSubmitCallback) onSubmitCallback(val); }; confirmBtn.onclick = submitText; cancelBtn.onclick = closeModal; closeBtn.onclick = closeModal; inputEl.onkeydown = (e) => { if (e.key === 'Enter') { e.preventDefault(); submitText(); } else if (e.key === 'Escape') { e.preventDefault(); closeModal(); } }; modal.onclick = (e) => { if (e.target === modal) closeModal(); }; }, async render(id) { this.ticketId = id; this.noteAttachments = []; 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}`); // Route guard: verify user is still on this ticket's detail page const currentHash = (window.location.hash || '').split('?')[0]; if (currentHash !== `#/tickets/${id}`) { return; } const { ticket, articles, attachments } = data; // No automatic tab creation here anymore let groupsData = { asMaster: [], asMember: [] }; try { groupsData = await App.api(`/api/groups/by-ticket/${id}`); } catch (gErr) { console.warn('Failed to load group associations for ticket', gErr); } 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); // Display ticket number in the topbar with OTRS link if available const titleEl = document.getElementById('page-title'); if (titleEl) { if (data.otrsWebUrl) { titleEl.innerHTML = `Ticket #${ticket.tn || id} `; } else { titleEl.innerHTML = `Ticket #${ticket.tn || id}`; } } this.originalValues = { 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, responsible_user_id: ticket.responsible_user_id, type_id: ticket.type_id, customer_id: ticket.customer_id, customer_user_id: ticket.customer_user_id, customer_first: ticket.customer_first, customer_last: ticket.customer_last, }; const hasEmailDraft = App.getDraft(id, 'email'); const emailBtnText = hasEmailDraft ? 'Continua mail' : 'Invia Email'; const ticketRealAttachments = (attachments || []).filter(att => { const fname = (att.filename || '').toLowerCase(); return !fname.startsWith('file-1') && !fname.startsWith('file-2') && !fname.startsWith('file-3'); }); container.innerHTML = ` Torna alla lista

📋 #${ticket.tn} -

${App.escapeHtml(ticket.title || '(senza titolo)')} ${ticketRealAttachments.length > 0 ? ` ` : ''}

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

${groupsData.asMaster.length === 0 && groupsData.asMember.length === 0 ? ` Nessun gruppo associato ` : ''} ${groupsData.asMaster.map(g => ` 👑 Master in: ${App.escapeHtml(g.nome)} `).join('')} ${groupsData.asMember.map(g => ` 🔗 Membro di: ${App.escapeHtml(g.nome)} `).join('')}

Modifica Rapida

Stato

Priorità

Coda

Owner

Responsabile

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

Tipo

` : ''}

Utente Cliente

📝 Aggiungi Nota / Messaggio Interno Opzionale se aggiorni solo i campi sopra

Data/Ora: Tempo (min):

Articoli & Note (${articles.length})

Visualizza HTML

${articles.length > 0 ? articles.map(a => { const hasHtml = a.has_html || (a.a_content_type || '').toLowerCase().includes('html') || /<(div|p|br|table|html|body|span|img|a|style)\b/i.test(a.html_body || a.a_body || ''); let processedBody = (hasHtml && a.html_body) ? a.html_body : (a.a_body || ''); const articleAttachments = (attachments || []).filter(att => att.article_id === a.article_id); const usedAttachmentIds = new Set(); if (hasHtml && this.htmlMode) { articleAttachments.forEach(att => { let replaced = false; if (att.content_id) { const cleanCid = att.content_id.replace(/[<>]/g, '').trim(); if (cleanCid) { const escapedCid = cleanCid.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); const regex = new RegExp(`cid:?`, 'gi'); if (regex.test(processedBody)) { processedBody = processedBody.replace(regex, `/api/tickets/attachments/${att.id}`); replaced = true; } } } if (att.filename) { const escapedFilename = att.filename.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); const regexFilename = new RegExp(`cid:?`, 'gi'); if (regexFilename.test(processedBody)) { processedBody = processedBody.replace(regexFilename, `/api/tickets/attachments/${att.id}`); replaced = true; } const regexSrc = new RegExp(`src=["']${escapedFilename}["']`, 'gi'); if (regexSrc.test(processedBody)) { processedBody = processedBody.replace(regexSrc, `src="/api/tickets/attachments/${att.id}"`); replaced = true; } const nameWithoutExt = att.filename.replace(/\.[^/.]+$/, ''); if (nameWithoutExt && nameWithoutExt.length > 3) { const escapedBase = nameWithoutExt.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); const regexBase = new RegExp(`cid:\\s]*>?`, 'gi'); if (regexBase.test(processedBody)) { processedBody = processedBody.replace(regexBase, `/api/tickets/attachments/${att.id}`); replaced = true; } } } if (att.disposition === 'inline' || replaced) { usedAttachmentIds.add(att.id); } }); if (!processedBody.includes('')) { processedBody = processedBody.replace('', ''); } else { processedBody = `${processedBody}`; } } } const displayBody = (this.htmlMode && hasHtml) ? `` : `

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

`; const visibleAttachments = articleAttachments.filter(att => { const fname = (att.filename || '').toLowerCase(); if (fname.startsWith('file-1') || fname.startsWith('file-2') || fname.startsWith('file-3')) { return false; } if (usedAttachmentIds.has(att.id)) { return false; } return true; }); const extractedLinks = this.extractLinks(processedBody || a.a_body || ''); 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} ${visibleAttachments.length > 0 ? `

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

` : ''}

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

💬

Nessun articolo

Dettagli

Numero ${ticket.tn}

Stato ${ticket.state_name}

Creato

${App.formatDateTime(ticket.create_time)}

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

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

${ticket.type_name ? `

Tipo ${ticket.type_name}

` : ''}

Owner ${ticket.owner_first ? `${ticket.owner_first} ${ticket.owner_last}` : (ticket.owner_login || '—')}

Responsabile ${ticket.responsible_first ? `${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 ? ` ` : ''}

`; if (window.Quill) { this.noteQuill = new Quill('#note-body-editor', { theme: 'snow', placeholder: 'Scrivi una nota interna...', modules: { toolbar: [ [{ 'header': [1, 2, 3, false] }], ['bold', 'italic', 'underline', 'strike'], [{ 'color': [] }, { 'background': [] }], [{ 'list': 'ordered' }, { 'list': 'bullet' }], [{ 'align': [] }], ['link', 'image', 'code-block'], ['clean'] ], keyboard: { bindings: { tab: { key: 'Tab', handler: function () { return true; } } } } } }); // Prevent tab navigation on toolbar items const toolbar = container.querySelector('.ql-toolbar'); if (toolbar) { toolbar.querySelectorAll('button, select, span[role="button"], input').forEach(el => { el.setAttribute('tabindex', '-1'); }); } } else { this.noteQuill = null; } // Restore Note Draft const noteDraft = App.getDraft(id, 'note'); if (noteDraft) { if (this.noteQuill && noteDraft.body) { this.noteQuill.root.innerHTML = noteDraft.body; } if (document.getElementById('note-subject')) { document.getElementById('note-subject').value = noteDraft.subject || ''; } if (document.getElementById('note-time-units')) { document.getElementById('note-time-units').value = noteDraft.time_unit || ''; } if (document.getElementById('note-ticket-state') && noteDraft.ticket_state_id) { document.getElementById('note-ticket-state').value = noteDraft.ticket_state_id; } this.noteAttachments = noteDraft.attachments || []; this.updateNoteAttachmentList(); } this.bindEvents(ticket, articles, container, groupsData, attachments); } catch (err) { container.innerHTML = `

⚠️

Errore caricamento ticket

${App.escapeHtml(err.message)}

`; } }, bindEvents(ticket, articles, container, groupsData, attachments) { // Quick-edit change detection 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 queueSearchInput = document.getElementById('qe-queue-search'); const queueIdInput = document.getElementById('qe-queue'); const customerSearchInput = document.getElementById('qe-customer-search'); const customerUserIdInput = document.getElementById('qe-customer-user-id'); const customerIdInput = document.getElementById('qe-customer-id'); const noteSubjectInput = document.getElementById('note-subject'); const noteTimeUnitsInput = document.getElementById('note-time-units'); const noteCreateTimeInput = document.getElementById('note-create-time'); const checkChanges = () => { let hasChanges = false; fields.forEach(el => { const field = el.dataset.field; const original = String(this.originalValues[field] || ''); const current = el.value; const changed = current !== original; if (el.id === 'qe-queue') { if (queueSearchInput) queueSearchInput.classList.toggle('changed', changed); } else { el.classList.toggle('changed', changed); } if (changed) hasChanges = true; }); const noteSubText = noteSubjectInput ? noteSubjectInput.value.trim() : ''; if (noteSubText.length > 0) hasChanges = true; const noteBodyText = (this.noteQuill ? this.noteQuill.root.innerText : '').trim(); if (noteBodyText.length > 0) hasChanges = true; const noteTimeUnitsVal = parseFloat(noteTimeUnitsInput ? noteTimeUnitsInput.value : '0') || 0; if (noteTimeUnitsVal > 0) hasChanges = true; if (noteCreateTimeInput && noteCreateTimeInput.value) hasChanges = true; if (this.noteAttachments && this.noteAttachments.length > 0) hasChanges = true; if (saveBtn) saveBtn.disabled = !hasChanges; }; fields.forEach(el => { el.addEventListener('change', checkChanges); }); if (noteSubjectInput) { noteSubjectInput.addEventListener('input', checkChanges); } if (noteTimeUnitsInput) { noteTimeUnitsInput.addEventListener('input', checkChanges); } if (noteCreateTimeInput) { noteCreateTimeInput.addEventListener('change', checkChanges); } if (this.noteQuill) { this.noteQuill.on('text-change', checkChanges); } // Reset quick-edit & note form if (resetBtn) { resetBtn.addEventListener('click', () => { fields.forEach(el => { 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'] || ''; customerSearchInput.value = first ? `${first} ${last}` : (this.originalValues['customer_user_id'] || ''); } if (noteSubjectInput) noteSubjectInput.value = ''; if (this.noteQuill) this.noteQuill.root.innerHTML = ''; if (noteTimeUnitsInput) noteTimeUnitsInput.value = ''; if (noteCreateTimeInput) noteCreateTimeInput.value = ''; this.noteAttachments = []; this.updateNoteAttachmentList(); App.clearDraft(this.ticketId, 'note'); if (saveBtn) saveBtn.disabled = true; }); } // Queue Search Autocomplete const queueSuggestionsDiv = document.getElementById('qe-queue-suggestions'); let queueDebounce; if (queueSearchInput && queueSuggestionsDiv) { queueSearchInput.addEventListener('input', () => { clearTimeout(queueDebounce); const q = queueSearchInput.value.trim(); const origQueueName = (this.originalValues['queue_name'] || '').trim(); if (q !== origQueueName) { if (queueIdInput) queueIdInput.value = ''; } else { if (queueIdInput) queueIdInput.value = String(this.originalValues['queue_id'] || ''); } checkChanges(); queueDebounce = setTimeout(async () => { try { const queues = await App.api(`/api/queues/search?q=${encodeURIComponent(q)}`); if (!queues || queues.length === 0) { queueSuggestionsDiv.innerHTML = '

Nessuna coda trovata

'; queueSuggestionsDiv.style.display = 'block'; return; } queueSuggestionsDiv.innerHTML = queues.map(qObj => { const displayName = qObj.name.replace(/::/g, ' › '); return `

${App.escapeHtml(displayName)}

`; }).join(''); queueSuggestionsDiv.style.display = 'block'; queueSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => { if (item.dataset.id) { item.addEventListener('mousedown', (e) => { e.preventDefault(); queueSearchInput.value = item.dataset.name; if (queueIdInput) queueIdInput.value = item.dataset.id; queueSuggestionsDiv.style.display = 'none'; checkChanges(); }); } }); } catch (err) { console.error('Queue search error:', err); } }, 150); }); if (App.setupAutocompleteKeyboardNavigation) { App.setupAutocompleteKeyboardNavigation(queueSearchInput, queueSuggestionsDiv, (item) => { if (item && item.dataset.id) { queueSearchInput.value = item.dataset.name; if (queueIdInput) queueIdInput.value = item.dataset.id; queueSuggestionsDiv.style.display = 'none'; checkChanges(); } }); } queueSearchInput.addEventListener('focus', () => { queueSearchInput.dispatchEvent(new Event('input')); }); } // Customer Search Autocomplete const customerSuggestionsDiv = document.getElementById('qe-customer-suggestions'); let customerDebounce; if (customerSearchInput && customerSuggestionsDiv) { customerSearchInput.addEventListener('input', () => { clearTimeout(customerDebounce); const q = customerSearchInput.value.trim(); if (customerUserIdInput) customerUserIdInput.value = ''; if (customerIdInput) customerIdInput.value = ''; checkChanges(); customerDebounce = setTimeout(async () => { try { const customers = await App.api(`/api/customers/search?q=${encodeURIComponent(q)}`); if (!customers || customers.length === 0) { customerSuggestionsDiv.innerHTML = '

Nessun cliente trovato

'; customerSuggestionsDiv.style.display = 'block'; return; } customerSuggestionsDiv.innerHTML = customers.map(c => `

${App.escapeHtml(c.first_name ? `${c.first_name} ${c.last_name}` : c.customer_user_id)} ${c.email ? `(${App.escapeHtml(c.email)})` : ''}

`).join(''); customerSuggestionsDiv.style.display = 'block'; customerSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => { if (item.dataset.userId) { item.addEventListener('mousedown', (e) => { e.preventDefault(); customerSearchInput.value = item.dataset.name; if (customerUserIdInput) customerUserIdInput.value = item.dataset.userId; if (customerIdInput) customerIdInput.value = item.dataset.customerId; customerSuggestionsDiv.style.display = 'none'; checkChanges(); }); } }); } catch (err) { console.error('Customer search error:', err); } }, 150); }); customerSearchInput.addEventListener('focus', () => { customerSearchInput.dispatchEvent(new Event('input')); }); } // Close suggestions on click outside document.addEventListener('click', (e) => { if (queueSearchInput && queueSuggestionsDiv && e.target !== queueSearchInput && !queueSuggestionsDiv.contains(e.target)) { queueSuggestionsDiv.style.display = 'none'; } if (customerSearchInput && customerSuggestionsDiv && e.target !== customerSearchInput && !customerSuggestionsDiv.contains(e.target)) { customerSuggestionsDiv.style.display = 'none'; } }); // Unified Save Quick Edit & Send Note action if (saveBtn) { saveBtn.addEventListener('click', async () => { const queueSearch = queueSearchInput ? queueSearchInput.value.trim() : ''; if (queueSearchInput && !queueIdInput.value) { const origName = (this.originalValues['queue_name'] || '').trim(); if (queueSearch === origName && this.originalValues['queue_id']) { queueIdInput.value = String(this.originalValues['queue_id']); } else { Toast.warning('Seleziona una coda valida dall\'elenco.'); return; } } const customerSearch = customerSearchInput ? customerSearchInput.value.trim() : ''; if (customerSearch && customerUserIdInput && !customerUserIdInput.value) { customerUserIdInput.value = customerSearch; if (customerIdInput) customerIdInput.value = customerSearch; } // Check metadata updates const updates = {}; fields.forEach(el => { const field = el.dataset.field; let val; if (field === 'customer_id' || field === 'customer_user_id') { val = el.value || null; } else { val = el.value ? parseInt(el.value) : null; } const origVal = this.originalValues[field] || null; if (val !== origVal) { updates[field] = val; } }); // Check note content let noteBody = this.noteQuill ? this.noteQuill.root.innerHTML.trim() : ''; if (noteBody === '

') noteBody = ''; let noteSubject = noteSubjectInput ? noteSubjectInput.value.trim() : ''; const timeUnitVal = noteTimeUnitsInput ? noteTimeUnitsInput.value.trim() : ''; const noteCreateTimeVal = noteCreateTimeInput ? noteCreateTimeInput.value : ''; const hasMetadataChanges = Object.keys(updates).length > 0; const hasNoteContent = !!(noteBody || noteSubject || timeUnitVal || this.noteAttachments.length > 0 || noteCreateTimeVal); if (!hasMetadataChanges && !hasNoteContent) { Toast.warning('Nessuna modifica o nota da salvare'); return; } try { saveBtn.disabled = true; saveBtn.innerHTML = '

Salvataggio...'; // 1. Perform metadata updates if changed if (hasMetadataChanges) { await App.api(`/api/tickets/${this.ticketId}`, { method: 'PATCH', body: JSON.stringify(updates), }); } // 2. Perform article note creation if note fields are populated if (hasNoteContent) { if (!noteSubject && !noteBody) { noteSubject = 'consuntivazione'; noteBody = '

consuntivazione

'; } else if (!noteBody && noteSubject) { noteBody = `

${App.escapeHtml(noteSubject)}

`; } else if (noteBody && !noteSubject) { const tempDiv = document.createElement('div'); tempDiv.innerHTML = noteBody; const plainText = tempDiv.textContent || tempDiv.innerText || ''; noteSubject = plainText.trim().substring(0, 50) || 'consuntivazione'; } const resNote = await App.api(`/api/tickets/${this.ticketId}/articles`, { method: 'POST', body: JSON.stringify({ subject: noteSubject, body: noteBody, time_unit: timeUnitVal, attachments: this.noteAttachments.length > 0 ? this.noteAttachments : undefined }), }); this.noteAttachments = []; // Clear attachments after successful send if (noteCreateTimeVal && resNote.article_id) { try { const formattedDate = noteCreateTimeVal.replace('T', ' '); await App.api(`/api/tickets/articles/${resNote.article_id}/retrodata-article`, { method: 'POST', body: JSON.stringify({ create_time: formattedDate }) }); } catch (retErr) { console.warn('Note retrodate error:', retErr); } } } Toast.success('Modifiche e note salvate con successo!'); App.clearDraft(this.ticketId, 'note'); App.updateDailyTimer(); TicketListView.invalidateCache(); this.render(this.ticketId); } catch (err) { Toast.error('Errore durante il salvataggio: ' + err.message); saveBtn.disabled = false; } }); } // Note Attachments Upload Handlers const noteAttachBtn = document.getElementById('btn-note-add-attachments'); const noteFileInput = document.getElementById('note-attachments'); if (noteAttachBtn && noteFileInput) { noteAttachBtn.addEventListener('click', () => noteFileInput.click()); noteFileInput.addEventListener('change', (e) => { const files = Array.from(e.target.files); for (const file of files) { const reader = new FileReader(); reader.onload = () => { const base64Data = reader.result.split(',')[1]; this.noteAttachments.push({ filename: file.name, content: base64Data, content_type: file.type }); this.updateNoteAttachmentList(); }; reader.readAsDataURL(file); } noteFileInput.value = ''; // Reset input }); } // Email Compose Button const btnEmailCompose = document.getElementById('btn-open-email-compose'); if (btnEmailCompose) { btnEmailCompose.addEventListener('click', () => { if (window.EmailCompose) { const tId = parseInt(btnEmailCompose.dataset.ticketId, 10); const emailDraft = App.getDraft(tId, 'email'); if (emailDraft) { EmailCompose.open({ ...emailDraft.options, draft: emailDraft }); } else { EmailCompose.open({ ticketId: tId, ticketTn: btnEmailCompose.dataset.ticketTn, ticketTitle: btnEmailCompose.dataset.ticketTitle, customerEmail: btnEmailCompose.dataset.customerEmail, }); } } else { Toast.error('Modulo email non disponibile'); } }); } // Article Email Reply Buttons document.querySelectorAll('.btn-email-article').forEach(btn => { btn.addEventListener('click', () => { const articleId = parseInt(btn.dataset.articleId, 10); const article = articles.find(art => art.article_id == articleId); if (!article) return; if (window.EmailCompose) { const rawQuotedBody = article.html_body || article.a_body || ''; const hasHtml = article.has_html || (article.a_content_type || '').toLowerCase().includes('html') || rawQuotedBody.includes(''); let processedQuoted = rawQuotedBody; if (hasHtml) { const articleAttachments = (attachments || []).filter(att => att.article_id === article.article_id); articleAttachments.forEach(att => { if (att.content_id) { const cleanCid = att.content_id.replace(/[<>]/g, '').trim(); if (cleanCid) { const escapedCid = cleanCid.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); const regex = new RegExp(`cid:?`, 'gi'); processedQuoted = processedQuoted.replace(regex, `/api/tickets/attachments/${att.id}`); } } if (att.filename) { const escapedFilename = att.filename.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'); const regexFilename = new RegExp(`cid:?`, 'gi'); processedQuoted = processedQuoted.replace(regexFilename, `/api/tickets/attachments/${att.id}`); } }); } const quotedBody = hasHtml ? processedQuoted : App.escapeHtml(article.a_body || '').replace(/\n/g, '
'); const initialBodyHtml = `

Il ${App.formatDateTime(article.create_time)}, ${App.escapeHtml(article.a_from || 'Sistema')} ha scritto:

${quotedBody}

`; // Helper to extract email addresses from headers const parseEmails = (str) => { if (!str) return []; return (str.match(/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g) || []) .map(email => email.toLowerCase().trim()); }; const fromEmails = parseEmails(article.a_from); const toEmails = parseEmails(article.a_to); const ccEmails = parseEmails(article.a_cc); // Exclude list (helpdesk and active agent) const config = App.lookups.config || {}; const helpdeskEmail = (config.helpdeskEmail || 'helpdesk@pharmaidea.com').toLowerCase(); const agentEmail = (config.agentEmail || '').toLowerCase(); const excludeEmails = [helpdeskEmail, agentEmail].filter(Boolean); const initialToSet = new Set(); fromEmails.forEach(e => { if (!excludeEmails.includes(e) && !e.includes('helpdesk')) { initialToSet.add(e); } }); if (initialToSet.size === 0 && ticket.customer_email) { initialToSet.add(ticket.customer_email.toLowerCase()); } const initialCcSet = new Set(); [...toEmails, ...ccEmails].forEach(e => { if (!excludeEmails.includes(e) && !e.includes('helpdesk') && !initialToSet.has(e)) { initialCcSet.add(e); } }); let inReplyTo = article.a_message_id || ''; let references = ''; if (article.a_references) { references = article.a_references + (article.a_message_id ? ' ' + article.a_message_id : ''); } else if (article.a_message_id) { references = article.a_message_id; } EmailCompose.open({ ticketId: ticket.id, ticketTn: ticket.tn, ticketTitle: ticket.title, initialTo: Array.from(initialToSet), initialCc: Array.from(initialCcSet), initialBodyHtml: initialBodyHtml, inReplyTo: inReplyTo, references: references, }); } else { Toast.error('Modulo email non disponibile'); } }); }); // Event listener for email address copy buttons inside popover container.querySelectorAll('.btn-copy-email-addr').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); const textToCopy = btn.dataset.copyText || ''; if (textToCopy) { navigator.clipboard.writeText(textToCopy).then(() => { const origText = btn.textContent; btn.textContent = '✓ Copiato!'; btn.style.color = 'var(--success)'; setTimeout(() => { btn.textContent = origText; btn.style.color = 'var(--text-secondary)'; }, 1500); }).catch(err => { Toast.error('Impossibile copiare: ' + err.message); }); } }); }); // 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; } }); } }); // Time Edit Event Listeners (Issue 21) document.querySelectorAll('.time-edit-container[data-article-id]').forEach(container => { const articleId = container.dataset.articleId; const btnEdit = container.querySelector('.btn-edit-article-time'); const popover = container.querySelector('.time-editor-popover'); const btnSave = container.querySelector('.btn-save-article-time'); const btnCancel = container.querySelector('.btn-cancel-article-time'); const input = container.querySelector('.input-article-time'); if (btnEdit) { btnEdit.addEventListener('click', (e) => { e.stopPropagation(); // Close all other open time edit popovers document.querySelectorAll('.time-editor-popover').forEach(p => { if (p !== popover) p.style.display = 'none'; }); const isOpen = popover.style.display === 'block'; popover.style.display = isOpen ? 'none' : 'block'; if (!isOpen) { input.focus(); input.select(); } }); } if (btnCancel) { btnCancel.addEventListener('click', (e) => { e.stopPropagation(); popover.style.display = 'none'; }); } if (btnSave) { btnSave.addEventListener('click', async (e) => { e.stopPropagation(); const val = parseFloat(input.value); if (isNaN(val) || val < 0) { Toast.warning('Inserisci un valore numerico valido maggiore o uguale a 0.'); return; } try { btnSave.disabled = true; await App.api(`/api/tickets/articles/${articleId}/time`, { method: 'PUT', body: JSON.stringify({ time_unit: val }) }); Toast.success('Tempo consuntivato aggiornato con successo!'); popover.style.display = 'none'; this.render(this.ticketId); } catch (err) { Toast.error('Errore durante l\'aggiornamento del tempo: ' + err.message); btnSave.disabled = false; } }); } // Stop propagation so clicking inside doesn't close it if (popover) { popover.addEventListener('click', (e) => e.stopPropagation()); } }); // Article Info Popover (ℹ️) listeners & Copy email address buttons document.querySelectorAll('.article-info-popover-wrapper').forEach(wrapper => { const btnInfo = wrapper.querySelector('.btn-article-info'); const popover = wrapper.querySelector('.article-info-popover'); const card = wrapper.closest('.article-card'); const iframe = card ? card.querySelector('iframe') : null; if (btnInfo && popover) { btnInfo.addEventListener('click', (e) => { e.stopPropagation(); const isOpen = popover.style.display === 'block'; // Close all popovers and restore pointer-events on all iframes document.querySelectorAll('.article-info-popover, .time-editor-popover').forEach(p => p.style.display = 'none'); document.querySelectorAll('.article-card iframe').forEach(f => f.style.pointerEvents = 'auto'); if (!isOpen) { popover.style.display = 'block'; if (iframe) iframe.style.pointerEvents = 'none'; } }); popover.addEventListener('click', (e) => e.stopPropagation()); popover.addEventListener('wheel', (e) => e.stopPropagation(), { passive: true }); } }); document.querySelectorAll('.btn-copy-email-addr').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); const text = btn.dataset.copyText; if (text) { navigator.clipboard.writeText(text); Toast.success('Indirizzo copiato negli appunti!'); } }); }); // Close popovers clicking outside document.addEventListener('click', () => { document.querySelectorAll('.time-editor-popover, .article-info-popover').forEach(p => { p.style.display = 'none'; }); document.querySelectorAll('.article-card iframe').forEach(f => f.style.pointerEvents = 'auto'); }); // Delete Article Event Listeners document.querySelectorAll('.btn-delete-article').forEach(btn => { btn.addEventListener('click', async (e) => { e.stopPropagation(); const articleId = btn.dataset.articleId; const ok = await App.confirm( "Elimina Articolo", "Sei sicuro di voler eliminare questa nota/articolo? Tutti i file allegati e i tempi ad esso associati verranno rimossi permanentemente.", { confirmText: 'Elimina', cancelText: 'Annulla' } ); if (ok) { try { btn.disabled = true; await App.api(`/api/tickets/articles/${articleId}`, { method: 'DELETE' }); Toast.success('Articolo/nota eliminato con successo!'); this.render(this.ticketId); } catch (err) { Toast.error('Errore durante l\'eliminazione: ' + err.message); btn.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); }); } // Populate Group Association dropdown App.api('/api/groups').then(allGroups => { const select = document.getElementById('group-association-select'); if (select) { allGroups.forEach(g => { const isMember = groupsData.asMember.some(m => m.id === g.id); const isMaster = groupsData.asMaster.some(m => m.id === g.id); if (!isMember && !isMaster) { const opt = document.createElement('option'); opt.value = g.id; opt.textContent = g.nome; select.appendChild(opt); } }); } }).catch(err => console.warn('Failed to load groups for association dropdown', err)); const btnAssociate = document.getElementById('btn-associate-to-group'); if (btnAssociate) { btnAssociate.addEventListener('click', async () => { const select = document.getElementById('group-association-select'); const groupId = select.value; if (!groupId) { sessionStorage.setItem('otrs_create_group_with_master_tn', ticket.tn); window.location.hash = '#/tickets/groups'; return; } try { btnAssociate.disabled = true; await App.api(`/api/groups/${groupId}/tickets`, { method: 'POST', body: JSON.stringify({ ticket_identifier: this.ticketId }) }); Toast.success('Ticket associato al gruppo!'); this.render(this.ticketId); } catch (err) { Toast.error('Errore associazione: ' + err.message); btnAssociate.disabled = false; } }); } // Inline image preview & lightbox binding document.querySelectorAll('.articles-timeline iframe').forEach(iframe => { const attachImageClick = () => { try { const doc = iframe.contentDocument || iframe.contentWindow.document; if (doc) { doc.querySelectorAll('img').forEach(img => { img.style.cursor = 'zoom-in'; img.addEventListener('click', (e) => { e.preventDefault(); this.openImageLightbox(img.src); }); }); } } catch (err) { console.warn('Cannot attach click listeners to iframe images', err); } }; iframe.addEventListener('load', attachImageClick); try { const doc = iframe.contentDocument || iframe.contentWindow.document; if (doc && doc.readyState === 'complete') { attachImageClick(); } } catch (_) { } }); document.querySelectorAll('.attachment-badge').forEach(badge => { badge.style.cursor = 'pointer'; badge.addEventListener('click', (e) => { e.preventDefault(); this.openImageLightbox(badge.href); }); }); document.querySelectorAll('.copy-ticket-btn').forEach(btn => { btn.addEventListener('click', (e) => { e.stopPropagation(); const tn = btn.dataset.tn; if (tn) { navigator.clipboard.writeText(tn).then(() => { Toast.success('Copiato negli appunti!'); }).catch(err => { Toast.error('Errore durante la copia: ' + err.message); }); } }); }); document.querySelectorAll('.copy-full-ticket-title').forEach(el => { el.addEventListener('click', (e) => { e.stopPropagation(); const fullText = el.dataset.full; if (fullText) { navigator.clipboard.writeText(fullText).then(() => { Toast.success('TN e Oggetto copiati negli appunti!'); }).catch(err => { Toast.error('Errore durante la copia: ' + err.message); }); } }); }); const headerAttBtn = document.querySelector('.header-open-attachments-btn'); if (headerAttBtn) { headerAttBtn.addEventListener('click', (e) => { e.stopPropagation(); const firstBadge = document.querySelector('.attachment-badge'); const firstSrc = firstBadge ? firstBadge.href : ''; this.openImageLightbox(firstSrc); }); } // Keydown listener for Ticket Detail shortcut (Save Quick Edit / Send Note) const handleTicketDetailShortcut = (e) => { if (!document.getElementById('qe-save')) { document.removeEventListener('keydown', handleTicketDetailShortcut, true); return; } if (App.isShortcutTriggered(e, 'quick_edit_save')) { e.preventDefault(); e.stopPropagation(); const btn = document.getElementById('qe-save'); if (btn && !btn.disabled) { btn.click(); } } }; document.addEventListener('keydown', handleTicketDetailShortcut, true); // Set focus on State dropdown (#qe-state) on page load so Tab navigation starts from State setTimeout(() => { const qeStateEl = document.getElementById('qe-state'); if (qeStateEl) { qeStateEl.focus(); } }, 50); }, };

${App.escapeHtml(ticket.title || '(senza titolo)')} + 👤+ Assegna & Scheda ${ticketRealAttachments.length > 0 ? ` 📎 ${ticketRealAttachments.length} ` : ''}

${App.escapeHtml(ticket.title || '(senza titolo)')} ${ticketRealAttachments.length > 0 ? ` ` : ''}