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

feat: contatore tempo allocato, pagina miei ticket, unione ticket (da db)

Browse Source
This commit is contained in:
VVER440
2026-07-07 00:18:22 +02:00
parent e55cccbaa5
commit 0f012816ea
15 changed files with 1133 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/views/dashboard.js
+8 -2
View File
@@ -134,8 +134,14 @@ const DashboardView = {
// Update open ticket count in sidebar badge
const badge = document.getElementById('open-ticket-count');
if (badge && stats.total_open > 0) {
badge.textContent = stats.total_open;
if (badge) {
badge.textContent = stats.total_open > 0 ? stats.total_open : '';
}
// Update my ticket count in sidebar badge
const myBadge = document.getElementById('my-ticket-count');
if (myBadge) {
myBadge.textContent = stats.total_my_open > 0 ? stats.total_my_open : '';
}
} catch (err) {
public/js/views/ticketCreate.js
+32 -3
View File
@@ -45,7 +45,7 @@ const TicketCreateView = {
company_search: document.getElementById('create-company-search').value,
priority_id: document.getElementById('create-priority').value,
subject: document.getElementById('create-subject').value,
body: document.getElementById('create-body').value,
body: this.quill ? this.quill.root.innerHTML : '',
isAdvancedVisible: document.getElementById('advanced-options').style.display !== 'none'
};
},
@@ -192,7 +192,9 @@ const TicketCreateView = {
<div class="form-group full-width">
<label class="form-label">Messaggio / Nota iniziale</label>
<textarea class="form-textarea" id="create-body" placeholder="Descrivi il problema in dettaglio..."></textarea>
<div id="create-body-container" style="background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden;">
<div id="create-body-editor" style="min-height: 200px; font-family: inherit; font-size: 0.95rem; border: none; color: var(--text-primary);"></div>
</div>
</div>
</div>
@@ -221,6 +223,30 @@ const TicketCreateView = {
</div>
`;
// Initialize Quill Editor
if (window.Quill) {
this.quill = new Quill('#create-body-editor', {
theme: 'snow',
placeholder: 'Descrivi il problema in dettaglio...',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'header': [1, 2, 3, false] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link', 'image'],
['clean']
]
}
});
// Set saved body/state if available
if (this.savedState && this.savedState.body) {
this.quill.root.innerHTML = this.savedState.body;
}
} else {
this.quill = null;
}
this.bindEvents();
} catch (err) {
@@ -607,7 +633,7 @@ const TicketCreateView = {
customer_id: customerId || undefined,
customer_user_id: customerUserId || undefined,
subject: document.getElementById('create-subject').value.trim() || undefined,
body: document.getElementById('create-body').value.trim() || undefined,
body: this.quill ? this.quill.root.innerHTML.trim() : undefined,
attachments: this.attachments.length > 0 ? this.attachments : undefined
};
@@ -624,6 +650,9 @@ const TicketCreateView = {
this.savedState = null; // Clear cached state on success
this.attachments = []; // Clear attachments array
// Update daily timer
App.updateDailyTimer();
// Navigate to the new ticket
window.location.hash = `#/tickets/${result.id}`;
public/js/views/ticketDetail.js
+68 -16
View File
@@ -28,6 +28,12 @@ const TicketDetailView = {
return sum + (isNaN(val) ? 0 : val);
}, 0);
// Display total time in the topbar
const titleEl = document.getElementById('page-title');
if (titleEl) {
titleEl.innerHTML = `Ticket #${id} <span style="font-size:0.85rem; font-weight:normal; color:var(--text-secondary); margin-left:var(--space-md); background:var(--bg-tertiary); padding:4px 10px; border-radius:var(--radius-sm); border:1px solid var(--border-light); display:inline-flex; align-items:center; gap:4px;">⏱ Tempo Consultivato: <strong>${totalTime} min</strong></span>`;
}
this.originalValues = {
ticket_state_id: ticket.ticket_state_id,
ticket_priority_id: ticket.ticket_priority_id,
@@ -119,11 +125,13 @@ const TicketDetailView = {
<div class="card-title">Aggiungi Nota</div>
<div style="display:flex; gap:var(--space-md); margin-bottom:var(--space-md);">
<input type="text" class="note-subject-input" id="note-subject" placeholder="Oggetto (opzionale)" style="flex:1; margin-bottom:0;" />
<input type="number" step="any" min="0" class="note-subject-input" id="note-time-units" placeholder="Tempo (minuti)" style="width:140px; margin-bottom:0;" />
</div>
<textarea class="note-textarea" id="note-body" placeholder="Scrivi una nota interna..."></textarea>
<div style="display:flex;gap:var(--space-sm);justify-content:flex-end;">
<button class="btn btn-primary btn-sm" id="note-send">
<div id="note-body-container" style="background: var(--bg-tertiary); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-md);">
<div id="note-body-editor" style="min-height: 180px; font-family: inherit; font-size: 0.95rem; border: none; color: var(--text-primary);"></div>
</div>
<div style="display:flex; gap:var(--space-md); justify-content:flex-end; align-items:center; margin-top:var(--space-md);">
<input type="number" step="any" min="0" class="note-subject-input" id="note-time-units" placeholder="Tempo (minuti)" style="width:140px; margin-bottom:0; height:32px; padding:4px 10px; font-size:0.85rem;" />
<button class="btn btn-primary btn-sm" id="note-send" style="height:32px; display:flex; align-items:center; gap:var(--space-xs);">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px;"><path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>
Invia Nota
</button>
@@ -141,14 +149,14 @@ const TicketDetailView = {
</div>
<div class="articles-timeline">
${articles.length > 0 ? articles.map(a => {
const hasHtml = (a.a_content_type || '').toLowerCase().includes('html') || a.a_body.includes('</') || a.a_body.includes('/>');
const displayBody = this.htmlMode && hasHtml
? `<iframe srcdoc="${a.a_body.replace(/"/g, '&quot;')}" style="width:100%; border:none; background:var(--bg-card); border-radius:var(--radius-md); min-height:220px; font-family:inherit; color-scheme: dark;"></iframe>`
: `<div class="article-body">${App.escapeHtml(a.a_body || '')}</div>`;
const articleAttachments = (attachments || []).filter(att => att.article_id === a.article_id);
const hasHtml = (a.a_content_type || '').toLowerCase().includes('html') || a.a_body.includes('</') || a.a_body.includes('/>');
const displayBody = this.htmlMode && hasHtml
? `<iframe srcdoc="${a.a_body.replace(/"/g, '&quot;')}" style="width:100%; border:none; background:var(--bg-card); border-radius:var(--radius-md); min-height:220px; font-family:inherit; color-scheme: dark;"></iframe>`
: `<div class="article-body">${App.escapeHtml(a.a_body || '')}</div>`;
return `
const articleAttachments = (attachments || []).filter(att => att.article_id === a.article_id);
return `
<div class="article-card sender-${(a.sender_type || 'system').toLowerCase()}">
<div class="article-header">
<div class="article-sender">
@@ -189,7 +197,7 @@ const TicketDetailView = {
` : ''}
</div>
`;
}).join('') : `
}).join('') : `
<div class="empty-state" style="padding:var(--space-lg);">
<div class="empty-state-icon">💬</div>
<div class="empty-state-text">Nessun articolo</div>
@@ -207,6 +215,10 @@ const TicketDetailView = {
<span class="meta-label">Numero</span>
<span class="meta-value" style="font-family:monospace;">${ticket.tn}</span>
</div>
<div class="meta-row">
<span class="meta-label">Stato</span>
<span class="meta-value"><span class="badge badge-state" data-state-type="${(ticket.state_type || '').toLowerCase()}">${ticket.state_name}</span></span>
</div>
<div class="meta-row">
<span class="meta-label">Creato</span>
<span class="meta-value">
@@ -294,6 +306,24 @@ const TicketDetailView = {
</div>
`;
// Initialize Quill Editor for Note
if (window.Quill) {
this.noteQuill = new Quill('#note-body-editor', {
theme: 'snow',
placeholder: 'Scrivi una nota interna...',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
['link', 'image'],
['clean']
]
}
});
} else {
this.noteQuill = null;
}
this.bindEvents();
} catch (err) {
@@ -371,12 +401,33 @@ const TicketDetailView = {
// Send note
const noteSendBtn = document.getElementById('note-send');
noteSendBtn.addEventListener('click', async () => {
const body = document.getElementById('note-body').value.trim();
const subject = document.getElementById('note-subject').value.trim();
let body = this.noteQuill ? this.noteQuill.root.innerHTML.trim() : '';
if (body === '<p><br></p>') {
body = '';
}
let subject = document.getElementById('note-subject').value.trim();
const time_unit = document.getElementById('note-time-units').value.trim();
if (!body) {
Toast.warning('Scrivi qualcosa prima di inviare');
// If body is empty but subject is provided, fill body with subject text
if (!body && subject) {
body = `<p>${App.escapeHtml(subject)}</p>`;
if (this.noteQuill) {
this.noteQuill.root.innerHTML = body;
}
}
// If subject is empty but body is provided, fill subject with truncated plain text of body
if (body && !subject) {
const tempDiv = document.createElement('div');
tempDiv.innerHTML = body;
const plainText = tempDiv.textContent || tempDiv.innerText || '';
subject = plainText.trim().substring(0, 50) || 'Nota interna';
document.getElementById('note-subject').value = subject;
}
// If both are still empty, show warning
if (!body && !subject) {
Toast.warning('Inserisci un oggetto o il corpo della nota prima di inviare');
return;
}
@@ -390,6 +441,7 @@ const TicketDetailView = {
});
Toast.success(res.message || 'Nota aggiunta!');
App.updateDailyTimer();
this.render(this.ticketId);
} catch (err) {
Toast.error('Errore: ' + err.message);
public/js/views/ticketList.js
+117 -7
View File
@@ -8,6 +8,7 @@ const TicketListView = {
sortBy: 'create_time',
sortDir: 'DESC',
selectedIds: new Set(),
selectedOrder: [],
searchTimeout: null,
async render() {
@@ -19,17 +20,23 @@ const TicketListView = {
await App.ensureLookups();
// Build query params
const isMyTickets = window.location.hash.startsWith('#/tickets/my');
if (isMyTickets) {
const activeAgentId = localStorage.getItem('activeAgentId') || '1';
Filters.state.user_id = activeAgentId;
}
const params = Filters.toQueryParams();
params.set('page', this.currentPage);
params.set('per_page', this.perPage);
params.set('sort_by', this.sortBy);
params.set('sort_dir', this.sortDir);
const searchInput = document.getElementById('global-search');
if (searchInput && searchInput.value.trim()) {
params.set('search', searchInput.value.trim());
}
const data = await App.api(`/api/tickets?${params.toString()}`);
this.renderContent(container, data);
@@ -79,6 +86,7 @@ const TicketListView = {
</select>
</div>
<button class="btn btn-primary btn-sm" id="batch-apply">Applica</button>
<button class="btn btn-primary btn-sm" id="batch-merge" disabled style="background: var(--accent-secondary); border-color: var(--accent-secondary); margin-left: 8px;">Unisci Selezionati</button>
<button class="btn btn-ghost btn-xs" id="batch-cancel">Annulla</button>
</div>
@@ -95,18 +103,20 @@ const TicketListView = {
<th class="sortable ${this.sortBy === 'priority' ? (this.sortDir === 'ASC' ? 'sort-asc' : 'sort-desc') : ''}" data-sort="priority">Priorità</th>
<th class="sortable ${this.sortBy === 'queue' ? (this.sortDir === 'ASC' ? 'sort-asc' : 'sort-desc') : ''}" data-sort="queue">Coda</th>
<th>Owner</th>
<th>Cliente</th>
<th class="sortable ${this.sortBy === 'create_time' ? (this.sortDir === 'ASC' ? 'sort-asc' : 'sort-desc') : ''}" data-sort="create_time">Creato</th>
</tr>
</thead>
<tbody>
${tickets.length > 0 ? tickets.map(t => `
<tr data-ticket-id="${t.id}" class="${this.selectedIds.has(String(t.id)) ? 'selected' : ''}" style="cursor:pointer;">
<tr data-ticket-id="${t.id}" class="${this.selectedIds.has(String(t.id)) ? 'selected' : ''} ${this.selectedOrder[0] === String(t.id) ? 'first-selected' : ''}" style="cursor:pointer;">
<td><span class="ticket-tn"><a href="#/tickets/${t.id}" class="ticket-tn-link" onclick="event.stopPropagation()">${t.tn}</a></span></td>
<td class="ticket-title-cell"><a href="#/tickets/${t.id}" class="ticket-title-link" onclick="event.stopPropagation()">${App.escapeHtml(t.title || '(senza titolo)')}</a></td>
<td><span class="badge badge-state" data-state-type="${(t.state_type || '').toLowerCase()}">${t.state_name}</span></td>
<td><span class="badge badge-priority" data-priority="${App.priorityIndex(t.priority_name)}">${App.priorityIndex(t.priority_name)}</span></td>
<td><span class="badge badge-queue">${t.queue_name}</span></td>
<td style="color:var(--text-secondary);font-size:0.82rem;">${t.owner_first || ''} ${t.owner_last || ''}</td>
<td style="color:var(--text-secondary);font-size:0.82rem;">${t.customer_first ? `${t.customer_first} ${t.customer_last}` : (t.customer_user_id || '—')}</td>
<td style="color:var(--text-tertiary);font-size:0.78rem;">${App.formatDateTime(t.create_time)}</td>
</tr>
`).join('') : `
@@ -163,6 +173,7 @@ const TicketListView = {
Filters.bindEvents(() => {
this.currentPage = 1;
this.selectedIds.clear();
this.selectedOrder = [];
this.render();
});
@@ -192,11 +203,27 @@ const TicketListView = {
const id = String(row.dataset.ticketId);
if (this.selectedIds.has(id)) {
this.selectedIds.delete(id);
row.classList.remove('selected');
this.selectedOrder = this.selectedOrder.filter(x => x !== id);
} else {
this.selectedIds.add(id);
row.classList.add('selected');
this.selectedOrder.push(id);
}
// Update classes on all rows
document.querySelectorAll('.ticket-table tbody tr[data-ticket-id]').forEach(tr => {
const trId = String(tr.dataset.ticketId);
if (this.selectedIds.has(trId)) {
tr.classList.add('selected');
} else {
tr.classList.remove('selected');
}
if (this.selectedOrder[0] === trId) {
tr.classList.add('first-selected');
} else {
tr.classList.remove('first-selected');
}
});
this.updateBatchBar();
});
});
@@ -207,15 +234,35 @@ const TicketListView = {
batchApply.addEventListener('click', () => this.applyBatch());
}
// Batch merge (Issue #7)
const batchMerge = document.getElementById('batch-merge');
if (batchMerge) {
batchMerge.addEventListener('click', () => this.mergeBatch());
}
// Batch select all visible
const batchSelectAll = document.getElementById('batch-select-all');
if (batchSelectAll) {
batchSelectAll.addEventListener('click', () => {
document.querySelectorAll('.ticket-table tbody tr[data-ticket-id]').forEach(row => {
const id = String(row.dataset.ticketId);
this.selectedIds.add(id);
row.classList.add('selected');
if (!this.selectedIds.has(id)) {
this.selectedIds.add(id);
this.selectedOrder.push(id);
}
});
// Update classes
document.querySelectorAll('.ticket-table tbody tr[data-ticket-id]').forEach(tr => {
const trId = String(tr.dataset.ticketId);
tr.classList.add('selected');
if (this.selectedOrder[0] === trId) {
tr.classList.add('first-selected');
} else {
tr.classList.remove('first-selected');
}
});
this.updateBatchBar();
});
}
@@ -225,8 +272,10 @@ const TicketListView = {
if (batchCancel) {
batchCancel.addEventListener('click', () => {
this.selectedIds.clear();
this.selectedOrder = [];
document.querySelectorAll('.ticket-table tbody tr').forEach(tr => {
tr.classList.remove('selected');
tr.classList.remove('first-selected');
});
this.updateBatchBar();
});
@@ -237,6 +286,7 @@ const TicketListView = {
btn.addEventListener('click', () => {
this.currentPage = parseInt(btn.dataset.page);
this.selectedIds.clear();
this.selectedOrder = [];
this.render();
});
});
@@ -247,6 +297,16 @@ const TicketListView = {
if (count) {
count.textContent = `${this.selectedIds.size} selezionat${this.selectedIds.size === 1 ? 'o' : 'i'}`;
}
// Enable/disable merge button
const mergeBtn = document.getElementById('batch-merge');
if (mergeBtn) {
if (this.selectedIds.size >= 2) {
mergeBtn.disabled = false;
} else {
mergeBtn.disabled = true;
}
}
},
async applyBatch() {
@@ -276,9 +336,59 @@ const TicketListView = {
});
Toast.success(res.message || `${this.selectedIds.size} ticket aggiornati`);
this.selectedIds.clear();
this.selectedOrder = [];
this.render();
} catch (err) {
Toast.error('Errore aggiornamento batch: ' + err.message);
}
},
async mergeBatch() {
if (this.selectedOrder.length < 2) return;
const targetId = this.selectedOrder[0];
const sourceIds = this.selectedOrder.slice(1);
// Get target ticket number
const targetRow = document.querySelector(`.ticket-table tbody tr[data-ticket-id="${targetId}"]`);
const targetTn = targetRow ? targetRow.querySelector('.ticket-tn-link').textContent.trim() : targetId;
// Collect source ticket numbers
const sourceTns = [];
sourceIds.forEach(id => {
const row = document.querySelector(`.ticket-table tbody tr[data-ticket-id="${id}"]`);
if (row) {
sourceTns.push(row.querySelector('.ticket-tn-link').textContent.trim());
} else {
sourceTns.push(`#${id}`);
}
});
const confirmed = confirm(`Sei sicuro di voler unire i ticket ${sourceTns.join(', ')} nel ticket principale #${targetTn}? Questa azione sposterà tutti gli articoli e tempi consultivati.`);
if (!confirmed) return;
try {
const mergeBtn = document.getElementById('batch-merge');
if (mergeBtn) {
mergeBtn.disabled = true;
mergeBtn.textContent = 'Unione in corso...';
}
const res = await App.api('/api/tickets/merge', {
method: 'POST',
body: JSON.stringify({
targetId: parseInt(targetId),
sourceIds: sourceIds.map(x => parseInt(x))
})
});
Toast.success(res.message || 'Ticket uniti con successo');
this.selectedIds.clear();
this.selectedOrder = [];
this.render();
} catch (err) {
Toast.error('Errore durante l\'unione: ' + err.message);
this.updateBatchBar();
}
},
};