Prima importazione
This commit is contained in:
@@ -0,0 +1,303 @@
|
||||
/**
|
||||
* Ticket List View
|
||||
* Full-featured ticket list with filters, sorting, batch actions, and pagination.
|
||||
*/
|
||||
const TicketListView = {
|
||||
currentPage: 1,
|
||||
perPage: 50,
|
||||
sortBy: 'create_time',
|
||||
sortDir: 'DESC',
|
||||
selectedIds: new Set(),
|
||||
searchTimeout: null,
|
||||
|
||||
async render() {
|
||||
const container = document.getElementById('view-container');
|
||||
container.innerHTML = '<div class="loading-screen"><div class="spinner"></div><p>Caricamento ticket...</p></div>';
|
||||
|
||||
try {
|
||||
// Fetch lookups for filter dropdowns
|
||||
await App.ensureLookups();
|
||||
|
||||
// Build query params
|
||||
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);
|
||||
this.bindEvents(data);
|
||||
|
||||
} catch (err) {
|
||||
container.innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">⚠️</div>
|
||||
<div class="empty-state-text">Errore caricamento ticket</div>
|
||||
<div class="empty-state-sub">${App.escapeHtml(err.message)}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
},
|
||||
|
||||
renderContent(container, data) {
|
||||
const tickets = data.tickets || [];
|
||||
const { total, page, per_page, total_pages } = data;
|
||||
|
||||
container.innerHTML = `
|
||||
${Filters.renderBar(App.lookups)}
|
||||
|
||||
<!-- Batch Actions Bar -->
|
||||
<div class="batch-bar" id="batch-bar">
|
||||
<span class="batch-count" id="batch-count">0 selezionati</span>
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">Stato</span>
|
||||
<select class="filter-select" id="batch-state">
|
||||
<option value="">—</option>
|
||||
${(App.lookups.states || []).map(s => `<option value="${s.id}">${s.name}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">Coda</span>
|
||||
<select class="filter-select" id="batch-queue">
|
||||
<option value="">—</option>
|
||||
${(App.lookups.queues || []).map(q => `<option value="${q.id}">${q.name}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<span class="filter-label">Owner</span>
|
||||
<select class="filter-select" id="batch-owner">
|
||||
<option value="">—</option>
|
||||
${(App.lookups.users || []).map(u => `<option value="${u.id}">${u.first_name} ${u.last_name}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn btn-primary btn-sm" id="batch-apply">Applica</button>
|
||||
<button class="btn btn-ghost btn-xs" id="batch-cancel">Annulla</button>
|
||||
</div>
|
||||
|
||||
<!-- Ticket Table -->
|
||||
<div class="ticket-table-wrapper">
|
||||
<table class="ticket-table" id="ticket-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="checkbox-cell">
|
||||
<input type="checkbox" id="select-all" title="Seleziona tutti" />
|
||||
</th>
|
||||
<th class="sortable ${this.sortBy === 'tn' ? (this.sortDir === 'ASC' ? 'sort-asc' : 'sort-desc') : ''}" data-sort="tn">N°</th>
|
||||
<th class="sortable ${this.sortBy === 'title' ? (this.sortDir === 'ASC' ? 'sort-asc' : 'sort-desc') : ''}" data-sort="title">Titolo</th>
|
||||
<th class="sortable ${this.sortBy === 'state' ? (this.sortDir === 'ASC' ? 'sort-asc' : 'sort-desc') : ''}" data-sort="state">Stato</th>
|
||||
<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 class="sortable ${this.sortBy === 'create_time' ? (this.sortDir === 'ASC' ? 'sort-asc' : 'sort-desc') : ''}" data-sort="create_time">Creato</th>
|
||||
<th class="sortable ${this.sortBy === 'change_time' ? (this.sortDir === 'ASC' ? 'sort-asc' : 'sort-desc') : ''}" data-sort="change_time">Modificato</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${tickets.length > 0 ? tickets.map(t => `
|
||||
<tr data-ticket-id="${t.id}" class="${this.selectedIds.has(String(t.id)) ? 'selected' : ''}">
|
||||
<td class="checkbox-cell" onclick="event.stopPropagation()">
|
||||
<input type="checkbox" class="ticket-checkbox" value="${t.id}" ${this.selectedIds.has(String(t.id)) ? 'checked' : ''} />
|
||||
</td>
|
||||
<td><span class="ticket-tn">${t.tn}</span></td>
|
||||
<td class="ticket-title-cell">${App.escapeHtml(t.title || '(senza titolo)')}</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)}">${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-tertiary);font-size:0.78rem;">${App.formatDate(t.create_time)}</td>
|
||||
<td style="color:var(--text-tertiary);font-size:0.78rem;">${App.formatDate(t.change_time)}</td>
|
||||
</tr>
|
||||
`).join('') : `
|
||||
<tr>
|
||||
<td colspan="9">
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">📭</div>
|
||||
<div class="empty-state-text">Nessun ticket trovato</div>
|
||||
<div class="empty-state-sub">Prova a cambiare i filtri o crea un nuovo ticket.</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
`}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
${total_pages > 1 ? `
|
||||
<div class="pagination">
|
||||
<div class="pagination-info">
|
||||
Mostrando ${((page - 1) * per_page) + 1}–${Math.min(page * per_page, total)} di ${total} ticket
|
||||
</div>
|
||||
<div class="pagination-controls">
|
||||
<button class="pagination-btn" data-page="1" ${page <= 1 ? 'disabled' : ''}>«</button>
|
||||
<button class="pagination-btn" data-page="${page - 1}" ${page <= 1 ? 'disabled' : ''}>‹</button>
|
||||
${this.renderPageButtons(page, total_pages)}
|
||||
<button class="pagination-btn" data-page="${page + 1}" ${page >= total_pages ? 'disabled' : ''}>›</button>
|
||||
<button class="pagination-btn" data-page="${total_pages}" ${page >= total_pages ? 'disabled' : ''}>»</button>
|
||||
</div>
|
||||
</div>
|
||||
` : `
|
||||
<div class="pagination">
|
||||
<div class="pagination-info">${total} ticket totali</div>
|
||||
<div></div>
|
||||
</div>
|
||||
`}
|
||||
`;
|
||||
},
|
||||
|
||||
renderPageButtons(current, total) {
|
||||
const pages = [];
|
||||
const start = Math.max(1, current - 2);
|
||||
const end = Math.min(total, current + 2);
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(`<button class="pagination-btn ${i === current ? 'active' : ''}" data-page="${i}">${i}</button>`);
|
||||
}
|
||||
return pages.join('');
|
||||
},
|
||||
|
||||
bindEvents(data) {
|
||||
// Filter events
|
||||
Filters.bindEvents(() => {
|
||||
this.currentPage = 1;
|
||||
this.selectedIds.clear();
|
||||
this.render();
|
||||
});
|
||||
|
||||
// Sort events
|
||||
document.querySelectorAll('.ticket-table th.sortable').forEach(th => {
|
||||
th.addEventListener('click', () => {
|
||||
const sortKey = th.dataset.sort;
|
||||
if (this.sortBy === sortKey) {
|
||||
this.sortDir = this.sortDir === 'ASC' ? 'DESC' : 'ASC';
|
||||
} else {
|
||||
this.sortBy = sortKey;
|
||||
this.sortDir = 'DESC';
|
||||
}
|
||||
this.currentPage = 1;
|
||||
this.render();
|
||||
});
|
||||
});
|
||||
|
||||
// Row click → detail
|
||||
document.querySelectorAll('.ticket-table tbody tr[data-ticket-id]').forEach(row => {
|
||||
row.addEventListener('click', (e) => {
|
||||
if (e.target.type === 'checkbox' || e.target.closest('.checkbox-cell')) return;
|
||||
window.location.hash = `#/tickets/${row.dataset.ticketId}`;
|
||||
});
|
||||
});
|
||||
|
||||
// Checkbox selection
|
||||
const selectAll = document.getElementById('select-all');
|
||||
if (selectAll) {
|
||||
selectAll.addEventListener('change', (e) => {
|
||||
const checkboxes = document.querySelectorAll('.ticket-checkbox');
|
||||
checkboxes.forEach(cb => {
|
||||
cb.checked = e.target.checked;
|
||||
const id = cb.value;
|
||||
if (e.target.checked) {
|
||||
this.selectedIds.add(id);
|
||||
} else {
|
||||
this.selectedIds.delete(id);
|
||||
}
|
||||
cb.closest('tr').classList.toggle('selected', e.target.checked);
|
||||
});
|
||||
this.updateBatchBar();
|
||||
});
|
||||
}
|
||||
|
||||
document.querySelectorAll('.ticket-checkbox').forEach(cb => {
|
||||
cb.addEventListener('change', (e) => {
|
||||
const id = e.target.value;
|
||||
if (e.target.checked) {
|
||||
this.selectedIds.add(id);
|
||||
} else {
|
||||
this.selectedIds.delete(id);
|
||||
}
|
||||
e.target.closest('tr').classList.toggle('selected', e.target.checked);
|
||||
this.updateBatchBar();
|
||||
});
|
||||
});
|
||||
|
||||
// Batch apply
|
||||
const batchApply = document.getElementById('batch-apply');
|
||||
if (batchApply) {
|
||||
batchApply.addEventListener('click', () => this.applyBatch());
|
||||
}
|
||||
|
||||
// Batch cancel
|
||||
const batchCancel = document.getElementById('batch-cancel');
|
||||
if (batchCancel) {
|
||||
batchCancel.addEventListener('click', () => {
|
||||
this.selectedIds.clear();
|
||||
document.querySelectorAll('.ticket-checkbox').forEach(cb => {
|
||||
cb.checked = false;
|
||||
cb.closest('tr').classList.remove('selected');
|
||||
});
|
||||
const selectAll = document.getElementById('select-all');
|
||||
if (selectAll) selectAll.checked = false;
|
||||
this.updateBatchBar();
|
||||
});
|
||||
}
|
||||
|
||||
// Pagination
|
||||
document.querySelectorAll('.pagination-btn[data-page]').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
this.currentPage = parseInt(btn.dataset.page);
|
||||
this.selectedIds.clear();
|
||||
this.render();
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
updateBatchBar() {
|
||||
const bar = document.getElementById('batch-bar');
|
||||
const count = document.getElementById('batch-count');
|
||||
if (this.selectedIds.size > 0) {
|
||||
bar.classList.add('visible');
|
||||
count.textContent = `${this.selectedIds.size} selezionat${this.selectedIds.size === 1 ? 'o' : 'i'}`;
|
||||
} else {
|
||||
bar.classList.remove('visible');
|
||||
}
|
||||
},
|
||||
|
||||
async applyBatch() {
|
||||
if (this.selectedIds.size === 0) return;
|
||||
|
||||
const updates = {};
|
||||
const batchState = document.getElementById('batch-state')?.value;
|
||||
const batchQueue = document.getElementById('batch-queue')?.value;
|
||||
const batchOwner = document.getElementById('batch-owner')?.value;
|
||||
|
||||
if (batchState) updates.ticket_state_id = parseInt(batchState);
|
||||
if (batchQueue) updates.queue_id = parseInt(batchQueue);
|
||||
if (batchOwner) updates.user_id = parseInt(batchOwner);
|
||||
|
||||
if (Object.keys(updates).length === 0) {
|
||||
Toast.warning('Seleziona almeno un campo da modificare');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await App.api('/api/tickets/batch/update', {
|
||||
method: 'PATCH',
|
||||
body: JSON.stringify({
|
||||
ticket_ids: Array.from(this.selectedIds),
|
||||
updates,
|
||||
}),
|
||||
});
|
||||
Toast.success(res.message || `${this.selectedIds.size} ticket aggiornati`);
|
||||
this.selectedIds.clear();
|
||||
this.render();
|
||||
} catch (err) {
|
||||
Toast.error('Errore aggiornamento batch: ' + err.message);
|
||||
}
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user