511 lines
23 KiB
JavaScript
511 lines
23 KiB
JavaScript
/**
|
|
* Ticket Create View
|
|
* Minimal, fast form for creating new tickets.
|
|
*/
|
|
const TicketCreateView = {
|
|
async render() {
|
|
const container = document.getElementById('view-container');
|
|
container.innerHTML = '<div class="loading-screen"><div class="spinner"></div><p>Caricamento form...</p></div>';
|
|
|
|
try {
|
|
await App.ensureLookups();
|
|
|
|
container.innerHTML = `
|
|
<a class="back-link" onclick="history.back()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
|
|
Torna indietro
|
|
</a>
|
|
|
|
<div class="card create-form">
|
|
<div class="card-title" style="margin-bottom:var(--space-lg); font-size:0.9rem; display:flex; justify-content:space-between; align-items:center; width:100%; gap: var(--space-md); flex-wrap: wrap;">
|
|
<span>Crea Nuovo Ticket</span>
|
|
<select class="form-select" id="create-state" style="width:200px; padding: 6px 12px; height: 32px; font-size: 0.85rem; margin: 0; line-height: 1;">
|
|
${(App.lookups.states || []).map(s => {
|
|
const sel = s.type_name === 'new' ? 'selected' : '';
|
|
return `<option value="${s.id}" ${sel}>${s.name}</option>`;
|
|
}).join('')}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-grid">
|
|
<div class="form-group full-width">
|
|
<label class="form-label">Titolo <span class="required">*</span></label>
|
|
<input type="text" class="form-input" id="create-title" placeholder="Descrizione breve del problema" autofocus />
|
|
</div>
|
|
|
|
<div class="form-group" style="position:relative;">
|
|
<label class="form-label">Coda <span class="required">*</span></label>
|
|
<input type="text" class="form-input" id="create-queue-search" placeholder="Cerca coda..." autocomplete="off" />
|
|
<input type="hidden" id="create-queue" />
|
|
<div id="queue-suggestions" class="autocomplete-suggestions" style="display:none;"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label">Tipo</label>
|
|
<select class="form-select" id="create-type">
|
|
<option value="">—</option>
|
|
${(App.lookups.types || []).map(t => `<option value="${t.id}">${t.name}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group" style="position:relative;">
|
|
<label class="form-label">Owner (Proprietario)</label>
|
|
<input type="text" class="form-input" id="create-owner-search" placeholder="Cerca proprietario..." autocomplete="off" />
|
|
<input type="hidden" id="create-owner" />
|
|
<div id="owner-suggestions" class="autocomplete-suggestions" style="display:none;"></div>
|
|
</div>
|
|
|
|
<div class="form-group" style="position:relative;">
|
|
<label class="form-label">Responsabile</label>
|
|
<input type="text" class="form-input" id="create-responsible-search" placeholder="Cerca responsabile..." autocomplete="off" />
|
|
<input type="hidden" id="create-responsible" />
|
|
<div id="responsible-suggestions" class="autocomplete-suggestions" style="display:none;"></div>
|
|
</div>
|
|
|
|
<div class="form-group full-width" style="position:relative;">
|
|
<label class="form-label">Utente Cliente (Persona) <span class="required">*</span></label>
|
|
<input type="text" class="form-input" id="create-user-search" placeholder="Cerca utente (nome, email, login)..." autocomplete="off" />
|
|
<input type="hidden" id="create-customer-user-id" />
|
|
<div id="user-suggestions" class="autocomplete-suggestions" style="display:none;"></div>
|
|
</div>
|
|
|
|
<!-- Collapsible Advanced Options -->
|
|
<div class="full-width" id="advanced-options" style="display: none; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); padding: var(--space-md); background: rgba(255,255,255,0.02); border: 1px dashed var(--border-light); border-radius: var(--radius-md); margin-top: var(--space-md); margin-bottom: var(--space-md);">
|
|
<div class="form-group" style="margin-bottom:0;">
|
|
<label class="form-label">Azienda Cliente (Società)</label>
|
|
<input type="text" class="form-input" id="create-company-search" readonly disabled placeholder="Auto-assegnata dal cliente" style="cursor: not-allowed; background: rgba(255,255,255,0.05); color: var(--text-secondary); margin-bottom:0;" />
|
|
<input type="hidden" id="create-customer-id" />
|
|
</div>
|
|
<div class="form-group" style="margin-bottom:0;">
|
|
<label class="form-label">Priorità</label>
|
|
<select class="form-select" id="create-priority" style="margin-bottom:0;">
|
|
${(App.lookups.priorities || []).map(p => {
|
|
const sel = p.id === 3 ? 'selected' : '';
|
|
return `<option value="${p.id}" ${sel}>${p.name}</option>`;
|
|
}).join('')}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group full-width">
|
|
<label class="form-label">Oggetto</label>
|
|
<input type="text" class="form-input" id="create-subject" placeholder="Oggetto del primo articolo (opzionale)" />
|
|
</div>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<div class="form-actions" style="display:flex; justify-content:space-between; align-items:center;">
|
|
<div>
|
|
<button type="button" class="btn btn-ghost btn-sm" id="toggle-advanced" style="display: flex; align-items: center; gap: var(--space-xs); padding: 6px 12px; height: auto; margin:0;">
|
|
<svg id="advanced-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px; height:14px; transition: transform var(--transition-normal);"><path d="M9 18l6-6-6-6"/></svg>
|
|
Opzioni Avanzate
|
|
</button>
|
|
</div>
|
|
<div style="display:flex; gap:var(--space-sm);">
|
|
<button class="btn btn-ghost" onclick="history.back()">Annulla</button>
|
|
<button class="btn btn-primary" id="create-submit">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;">
|
|
<path d="M12 5v14M5 12h14"/>
|
|
</svg>
|
|
Crea Ticket
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
this.bindEvents();
|
|
|
|
} catch (err) {
|
|
container.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon">⚠️</div>
|
|
<div class="empty-state-text">Errore caricamento form</div>
|
|
<div class="empty-state-sub">${App.escapeHtml(err.message)}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
},
|
|
|
|
bindEvents() {
|
|
const submitBtn = document.getElementById('create-submit');
|
|
const companySearchInput = document.getElementById('create-company-search');
|
|
const customerIdInput = document.getElementById('create-customer-id');
|
|
|
|
const userSearchInput = document.getElementById('create-user-search');
|
|
const userSuggestionsDiv = document.getElementById('user-suggestions');
|
|
const customerUserIdInput = document.getElementById('create-customer-user-id');
|
|
|
|
const ownerSearchInput = document.getElementById('create-owner-search');
|
|
const ownerSuggestionsDiv = document.getElementById('owner-suggestions');
|
|
const ownerIdInput = document.getElementById('create-owner');
|
|
|
|
const responsibleSearchInput = document.getElementById('create-responsible-search');
|
|
const responsibleSuggestionsDiv = document.getElementById('responsible-suggestions');
|
|
const responsibleIdInput = document.getElementById('create-responsible');
|
|
|
|
const queueSearchInput = document.getElementById('create-queue-search');
|
|
const queueSuggestionsDiv = document.getElementById('queue-suggestions');
|
|
const queueIdInput = document.getElementById('create-queue');
|
|
|
|
const stateIdInput = document.getElementById('create-state');
|
|
|
|
const toggleBtn = document.getElementById('toggle-advanced');
|
|
const advancedOptions = document.getElementById('advanced-options');
|
|
const arrow = document.getElementById('advanced-arrow');
|
|
|
|
// Pre-populate default values asynchronously
|
|
setTimeout(async () => {
|
|
// 1. Owner & Responsible pre-population with active agent
|
|
const currentAgentId = localStorage.getItem('activeAgentId') || '1';
|
|
const activeAgent = (App.lookups.users || []).find(u => String(u.id) === String(currentAgentId));
|
|
if (activeAgent) {
|
|
if (ownerSearchInput && ownerIdInput) {
|
|
ownerSearchInput.value = `${activeAgent.first_name} ${activeAgent.last_name}`;
|
|
ownerIdInput.value = activeAgent.id;
|
|
}
|
|
if (responsibleSearchInput && responsibleIdInput) {
|
|
responsibleSearchInput.value = `${activeAgent.first_name} ${activeAgent.last_name}`;
|
|
responsibleIdInput.value = activeAgent.id;
|
|
}
|
|
}
|
|
|
|
// 2. Customer User pre-population with first match
|
|
try {
|
|
const companies = await App.api('/api/customer-companies/search?q=cliente');
|
|
if (companies.length > 0 && customerIdInput && companySearchInput) {
|
|
const defaultCompany = companies[0];
|
|
customerIdInput.value = defaultCompany.customer_id;
|
|
companySearchInput.value = defaultCompany.customer_id;
|
|
|
|
// Search users for this company
|
|
const users = await App.api(`/api/customer-users/search?q=&customer_company_id=${encodeURIComponent(defaultCompany.customer_id)}`);
|
|
if (users.length > 0 && userSearchInput && customerUserIdInput) {
|
|
const defaultUser = users[0];
|
|
userSearchInput.value = `${defaultUser.first_name} ${defaultUser.last_name}`;
|
|
customerUserIdInput.value = defaultUser.login;
|
|
} else {
|
|
// Fallback: use company name as customer user ID
|
|
userSearchInput.value = defaultCompany.name;
|
|
customerUserIdInput.value = defaultCompany.customer_id;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Error pre-populating defaults:', err);
|
|
}
|
|
|
|
// 3. Queue pre-population
|
|
try {
|
|
const queues = await App.api('/api/queues/search?q=');
|
|
if (queues.length > 0 && queueSearchInput && queueIdInput) {
|
|
queueSearchInput.value = queues[0].name;
|
|
queueIdInput.value = queues[0].id;
|
|
}
|
|
} catch (err) {
|
|
console.error('Error pre-populating queues:', err);
|
|
}
|
|
}, 50);
|
|
|
|
// Collapsible Options Toggle
|
|
if (toggleBtn && advancedOptions && arrow) {
|
|
toggleBtn.addEventListener('click', () => {
|
|
const isHidden = advancedOptions.style.display === 'none';
|
|
advancedOptions.style.display = isHidden ? 'grid' : 'none';
|
|
arrow.style.transform = isHidden ? 'rotate(90deg)' : 'rotate(0deg)';
|
|
});
|
|
}
|
|
|
|
// User Autocomplete
|
|
let userDebounce;
|
|
if (userSearchInput) {
|
|
userSearchInput.addEventListener('input', () => {
|
|
clearTimeout(userDebounce);
|
|
const q = userSearchInput.value.trim();
|
|
if (q.length < 2) {
|
|
userSuggestionsDiv.style.display = 'none';
|
|
customerUserIdInput.value = '';
|
|
return;
|
|
}
|
|
|
|
userDebounce = setTimeout(async () => {
|
|
try {
|
|
const users = await App.api(`/api/customer-users/search?q=${encodeURIComponent(q)}`);
|
|
if (users.length === 0) {
|
|
userSuggestionsDiv.innerHTML = '<div class="autocomplete-suggestion-item" style="color:var(--text-muted); cursor:default;">Nessun utente trovato</div>';
|
|
userSuggestionsDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
userSuggestionsDiv.innerHTML = users.map(u => `
|
|
<div class="autocomplete-suggestion-item" data-login="${App.escapeHtml(u.login)}" data-customer-id="${App.escapeHtml(u.customer_id || '')}" data-name="${App.escapeHtml(u.first_name + ' ' + u.last_name)}">
|
|
<strong>${App.escapeHtml(u.first_name)} ${App.escapeHtml(u.last_name)}</strong>
|
|
<span style="font-size:0.75rem; color:var(--text-muted); margin-left:var(--space-xs); font-weight:normal;">(Login: ${App.escapeHtml(u.login)} | Azienda: ${App.escapeHtml(u.customer_id || '—')})</span>
|
|
</div>
|
|
`).join('');
|
|
userSuggestionsDiv.style.display = 'block';
|
|
|
|
// Bind click
|
|
userSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => {
|
|
if (item.dataset.login) {
|
|
item.addEventListener('click', () => {
|
|
userSearchInput.value = item.dataset.name;
|
|
customerUserIdInput.value = item.dataset.login;
|
|
userSuggestionsDiv.style.display = 'none';
|
|
|
|
// Auto-fill company inside Advanced Options
|
|
if (item.dataset.customerId) {
|
|
customerIdInput.value = item.dataset.customerId;
|
|
companySearchInput.value = item.dataset.customerId;
|
|
}
|
|
});
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}, 300);
|
|
});
|
|
}
|
|
|
|
// Owner Autocomplete (dynamic backend search)
|
|
let ownerDebounce;
|
|
if (ownerSearchInput) {
|
|
ownerSearchInput.addEventListener('input', () => {
|
|
clearTimeout(ownerDebounce);
|
|
const q = ownerSearchInput.value.trim();
|
|
// Do not block empty query to allow all agent results on focus
|
|
|
|
|
|
ownerDebounce = setTimeout(async () => {
|
|
try {
|
|
const agents = await App.api(`/api/agents/search?q=${encodeURIComponent(q)}`);
|
|
if (agents.length === 0) {
|
|
ownerSuggestionsDiv.innerHTML = '<div class="autocomplete-suggestion-item" style="color:var(--text-muted); cursor:default;">Nessun agente trovato</div>';
|
|
ownerSuggestionsDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
ownerSuggestionsDiv.innerHTML = agents.map(u => `
|
|
<div class="autocomplete-suggestion-item" data-id="${App.escapeHtml(u.id)}" data-name="${App.escapeHtml(u.first_name + ' ' + u.last_name)}">
|
|
<strong>${App.escapeHtml(u.first_name)} ${App.escapeHtml(u.last_name)}</strong>
|
|
<span style="font-size:0.75rem; color:var(--text-muted); margin-left:var(--space-xs); font-weight:normal;">(Login: ${App.escapeHtml(u.login)})</span>
|
|
</div>
|
|
`).join('');
|
|
ownerSuggestionsDiv.style.display = 'block';
|
|
|
|
// Bind click
|
|
ownerSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => {
|
|
if (item.dataset.id) {
|
|
item.addEventListener('click', () => {
|
|
ownerSearchInput.value = item.dataset.name;
|
|
ownerIdInput.value = item.dataset.id;
|
|
ownerSuggestionsDiv.style.display = 'none';
|
|
});
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}, 300);
|
|
});
|
|
ownerSearchInput.addEventListener('focus', () => {
|
|
ownerSearchInput.value = '';
|
|
ownerIdInput.value = '';
|
|
ownerSearchInput.dispatchEvent(new Event('input'));
|
|
});
|
|
}
|
|
|
|
// Responsible Autocomplete (dynamic backend search)
|
|
let responsibleDebounce;
|
|
if (responsibleSearchInput) {
|
|
responsibleSearchInput.addEventListener('input', () => {
|
|
clearTimeout(responsibleDebounce);
|
|
const q = responsibleSearchInput.value.trim();
|
|
// Do not block empty query to allow all agent results on focus
|
|
|
|
|
|
responsibleDebounce = setTimeout(async () => {
|
|
try {
|
|
const agents = await App.api(`/api/agents/search?q=${encodeURIComponent(q)}`);
|
|
if (agents.length === 0) {
|
|
responsibleSuggestionsDiv.innerHTML = '<div class="autocomplete-suggestion-item" style="color:var(--text-muted); cursor:default;">Nessun agente trovato</div>';
|
|
responsibleSuggestionsDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
responsibleSuggestionsDiv.innerHTML = agents.map(u => `
|
|
<div class="autocomplete-suggestion-item" data-id="${App.escapeHtml(u.id)}" data-name="${App.escapeHtml(u.first_name + ' ' + u.last_name)}">
|
|
<strong>${App.escapeHtml(u.first_name)} ${App.escapeHtml(u.last_name)}</strong>
|
|
<span style="font-size:0.75rem; color:var(--text-muted); margin-left:var(--space-xs); font-weight:normal;">(Login: ${App.escapeHtml(u.login)})</span>
|
|
</div>
|
|
`).join('');
|
|
responsibleSuggestionsDiv.style.display = 'block';
|
|
|
|
// Bind click
|
|
responsibleSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => {
|
|
if (item.dataset.id) {
|
|
item.addEventListener('click', () => {
|
|
responsibleSearchInput.value = item.dataset.name;
|
|
responsibleIdInput.value = item.dataset.id;
|
|
responsibleSuggestionsDiv.style.display = 'none';
|
|
});
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}, 300);
|
|
});
|
|
responsibleSearchInput.addEventListener('focus', () => {
|
|
responsibleSearchInput.value = '';
|
|
responsibleIdInput.value = '';
|
|
responsibleSearchInput.dispatchEvent(new Event('input'));
|
|
});
|
|
}
|
|
|
|
// Queue Autocomplete
|
|
let queueDebounce;
|
|
if (queueSearchInput) {
|
|
queueSearchInput.addEventListener('input', () => {
|
|
clearTimeout(queueDebounce);
|
|
const q = queueSearchInput.value.trim();
|
|
queueDebounce = setTimeout(async () => {
|
|
try {
|
|
const queues = await App.api(`/api/queues/search?q=${encodeURIComponent(q)}`);
|
|
if (queues.length === 0) {
|
|
queueSuggestionsDiv.innerHTML = '<div class="autocomplete-suggestion-item" style="color:var(--text-muted); cursor:default;">Nessuna coda trovata</div>';
|
|
queueSuggestionsDiv.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
queueSuggestionsDiv.innerHTML = queues.map(q => `
|
|
<div class="autocomplete-suggestion-item" data-id="${App.escapeHtml(q.id)}" data-name="${App.escapeHtml(q.name)}">
|
|
<strong>${App.escapeHtml(q.name)}</strong>
|
|
</div>
|
|
`).join('');
|
|
queueSuggestionsDiv.style.display = 'block';
|
|
|
|
// Bind click
|
|
queueSuggestionsDiv.querySelectorAll('.autocomplete-suggestion-item').forEach(item => {
|
|
if (item.dataset.id) {
|
|
item.addEventListener('click', () => {
|
|
queueSearchInput.value = item.dataset.name;
|
|
queueIdInput.value = item.dataset.id;
|
|
queueSuggestionsDiv.style.display = 'none';
|
|
});
|
|
}
|
|
});
|
|
} catch (err) {
|
|
console.error(err);
|
|
}
|
|
}, 150);
|
|
});
|
|
queueSearchInput.addEventListener('focus', () => {
|
|
queueSearchInput.value = '';
|
|
queueIdInput.value = '';
|
|
queueSearchInput.dispatchEvent(new Event('input'));
|
|
});
|
|
}
|
|
|
|
// Close suggestions on click outside
|
|
document.addEventListener('click', (e) => {
|
|
if (userSearchInput && e.target !== userSearchInput && e.target !== userSuggestionsDiv) {
|
|
userSuggestionsDiv.style.display = 'none';
|
|
}
|
|
if (ownerSearchInput && e.target !== ownerSearchInput && e.target !== ownerSuggestionsDiv) {
|
|
ownerSuggestionsDiv.style.display = 'none';
|
|
}
|
|
if (responsibleSearchInput && e.target !== responsibleSearchInput && e.target !== responsibleSuggestionsDiv) {
|
|
responsibleSuggestionsDiv.style.display = 'none';
|
|
}
|
|
if (queueSearchInput && e.target !== queueSearchInput && e.target !== queueSuggestionsDiv) {
|
|
queueSuggestionsDiv.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
submitBtn.addEventListener('click', async () => {
|
|
const title = document.getElementById('create-title').value.trim();
|
|
const queue_id = queueIdInput.value;
|
|
const state_id = stateIdInput.value;
|
|
const priority_id = document.getElementById('create-priority').value;
|
|
const type_id = document.getElementById('create-type')?.value;
|
|
|
|
const customerId = customerIdInput.value;
|
|
let customerUserId = customerUserIdInput.value;
|
|
|
|
const ownerId = ownerIdInput.value;
|
|
const responsibleId = responsibleIdInput.value;
|
|
|
|
// Validation
|
|
if (!title) {
|
|
Toast.warning('Il titolo è obbligatorio');
|
|
document.getElementById('create-title').focus();
|
|
return;
|
|
}
|
|
if (!queue_id) {
|
|
Toast.warning('Seleziona una coda');
|
|
queueSearchInput.focus();
|
|
return;
|
|
}
|
|
if (!state_id) {
|
|
Toast.warning('Seleziona uno stato');
|
|
document.getElementById('create-state').focus();
|
|
return;
|
|
}
|
|
if (!customerId && !customerUserId) {
|
|
Toast.warning('Seleziona un Utente Cliente');
|
|
userSearchInput.focus();
|
|
return;
|
|
}
|
|
|
|
// Company fallback if no individual user selected
|
|
if (customerId && !customerUserId) {
|
|
customerUserId = customerId;
|
|
}
|
|
|
|
const payload = {
|
|
title,
|
|
queue_id: parseInt(queue_id),
|
|
state_id: parseInt(state_id),
|
|
priority_id: parseInt(priority_id),
|
|
user_id: ownerId ? parseInt(ownerId) : undefined,
|
|
responsible_user_id: responsibleId ? parseInt(responsibleId) : undefined,
|
|
type_id: type_id ? parseInt(type_id) : undefined,
|
|
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,
|
|
};
|
|
|
|
try {
|
|
submitBtn.disabled = true;
|
|
submitBtn.innerHTML = '<div class="spinner" style="width:16px;height:16px;border-width:2px;"></div> Creazione...';
|
|
|
|
const result = await App.api('/api/tickets', {
|
|
method: 'POST',
|
|
body: JSON.stringify(payload),
|
|
});
|
|
|
|
Toast.success(`Ticket #${result.tn} creato!`);
|
|
|
|
// Navigate to the new ticket
|
|
window.location.hash = `#/tickets/${result.id}`;
|
|
|
|
} catch (err) {
|
|
Toast.error('Errore creazione: ' + err.message);
|
|
submitBtn.disabled = false;
|
|
submitBtn.innerHTML = `
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:16px;height:16px;">
|
|
<path d="M12 5v14M5 12h14"/>
|
|
</svg>
|
|
Crea Ticket
|
|
`;
|
|
}
|
|
});
|
|
},
|
|
};
|