Integrate web_template design system and fix security/quality issues
Security fixes: - Add HTTP method validation to delete_comment.php (block CSRF via GET) - Remove $_GET fallback in comment deletion (was CSRF bypass vector) - Guard session_start() with session_status() check across API files - Escape json_encode() data attributes with htmlspecialchars in views - Escape inline APP_TIMEZONE config values in DashboardView/TicketView - Validate timezone param against DateTimeZone::listIdentifiers() in index.php - Remove Database::escape() (was using real_escape_string, not safe) - Fix AttachmentModel hardcoded connection; inject via constructor Backend fixes: - Fix CommentModel bind_param type for ticket_id (s→i) - Fix buildCommentThread orphan parent guard - Fix StatsModel JOIN→LEFT JOIN so unassigned tickets aren't excluded - Add ticket ID validation in BulkOperationsModel before implode() - Add duplicate key retry in TicketModel::createTicket() for race conditions - Wrap SavedFiltersModel default filter changes in transactions - Add null result guards in WorkflowModel query methods Frontend JS: - Rewrite toast.js as lt.toast shim (base.js dependency) - Delegate escapeHtml() to lt.escHtml() - Rewrite keyboard-shortcuts.js using lt.keys.on() - Migrate settings.js to lt.api.* and lt.modal.open/close() - Migrate advanced-search.js to lt.api.* and lt.modal.open/close() - Migrate dashboard.js fetch calls to lt.api.*; update all dynamic modals (bulk ops, quick actions, confirm/input) to lt-modal structure - Migrate ticket.js fetchMentionUsers to lt.api.get() - Remove console.log/error/warn calls from JS files Views: - Add /web_template/base.css and base.js to all 10 view files - Call lt.keys.initDefaults() in DashboardView, TicketView, admin views - Migrate all modal HTML from settings-modal/settings-content to lt-modal-overlay/lt-modal/lt-modal-header/lt-modal-body/lt-modal-footer - Replace style="display:none" with aria-hidden="true" on all modals - Replace modal open/close style.display with lt.modal.open/close() - Update modal buttons to lt-btn lt-btn-primary/lt-btn-ghost classes - Remove manual ESC keydown handlers (replaced by lt.keys.initDefaults) - Fix unescaped timezone values in TicketView inline script Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -504,7 +504,6 @@ function initStatusFilter() {
|
||||
|
||||
function quickSave() {
|
||||
if (!window.ticketData) {
|
||||
console.error('No ticket data available');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -512,7 +511,6 @@ function quickSave() {
|
||||
const prioritySelect = document.getElementById('priority-select');
|
||||
|
||||
if (!statusSelect || !prioritySelect) {
|
||||
console.error('Status or priority select not found');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -568,12 +566,10 @@ function quickSave() {
|
||||
}
|
||||
|
||||
} else {
|
||||
console.error('Error updating ticket:', result.error || 'Unknown error');
|
||||
toast.error('Error updating ticket: ' + (result.error || 'Unknown error'), 5000);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error updating ticket:', error);
|
||||
toast.error('Error updating ticket: ' + error.message, 5000);
|
||||
});
|
||||
}
|
||||
@@ -611,7 +607,12 @@ function saveTicket() {
|
||||
statusDisplay.className = `status-${data.status}`;
|
||||
statusDisplay.textContent = data.status;
|
||||
}
|
||||
} else {
|
||||
lt.toast.error('Error saving ticket: ' + (data.error || 'Unknown error'));
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
lt.toast.error('Error saving ticket: ' + error.message);
|
||||
});
|
||||
}
|
||||
/**
|
||||
@@ -670,12 +671,10 @@ function loadTemplate() {
|
||||
document.getElementById('priority').value = template.default_priority;
|
||||
}
|
||||
} else {
|
||||
console.error('Failed to load template:', data.error);
|
||||
toast.error('Failed to load template: ' + (data.error || 'Unknown error'), 4000);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading template:', error);
|
||||
toast.error('Error loading template: ' + error.message, 4000);
|
||||
});
|
||||
}
|
||||
@@ -793,7 +792,6 @@ function performBulkCloseAction(ticketIds) {
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error performing bulk close:', error);
|
||||
toast.error('Bulk close failed: ' + error.message, 5000);
|
||||
});
|
||||
}
|
||||
@@ -808,44 +806,31 @@ function showBulkAssignModal() {
|
||||
|
||||
// Create modal HTML
|
||||
const modalHtml = `
|
||||
<div class="modal-overlay" id="bulkAssignModal">
|
||||
<div class="modal-content ascii-frame-outer">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header">Assign ${ticketIds.length} Ticket(s)</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="modal-body">
|
||||
<label for="bulkAssignUser">Assign to:</label>
|
||||
<select id="bulkAssignUser" class="editable">
|
||||
<option value="">Select User...</option>
|
||||
<!-- Users will be loaded dynamically -->
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-modal-overlay" id="bulkAssignModal" aria-hidden="true">
|
||||
<div class="lt-modal">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">Assign ${ticketIds.length} Ticket(s)</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="modal-footer">
|
||||
<button data-action="perform-bulk-assign" class="btn btn-bulk">Assign</button>
|
||||
<button data-action="close-bulk-assign-modal" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<label for="bulkAssignUser">Assign to:</label>
|
||||
<select id="bulkAssignUser" class="lt-select" style="width:100%;margin-top:0.5rem;">
|
||||
<option value="">Select User...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button data-action="perform-bulk-assign" class="lt-btn lt-btn-primary">Assign</button>
|
||||
<button data-action="close-bulk-assign-modal" class="lt-btn lt-btn-ghost">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
lt.modal.open('bulkAssignModal');
|
||||
|
||||
// Fetch users for the dropdown
|
||||
fetch('/api/get_users.php', {
|
||||
credentials: 'same-origin'
|
||||
})
|
||||
.then(response => response.json())
|
||||
lt.api.get('/api/get_users.php')
|
||||
.then(data => {
|
||||
if (data.success && data.users) {
|
||||
const select = document.getElementById('bulkAssignUser');
|
||||
@@ -857,16 +842,13 @@ function showBulkAssignModal() {
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading users:', error);
|
||||
});
|
||||
.catch(() => lt.toast.error('Error loading users'));
|
||||
}
|
||||
|
||||
function closeBulkAssignModal() {
|
||||
lt.modal.close('bulkAssignModal');
|
||||
const modal = document.getElementById('bulkAssignModal');
|
||||
if (modal) {
|
||||
modal.remove();
|
||||
}
|
||||
if (modal) setTimeout(() => modal.remove(), 300);
|
||||
}
|
||||
|
||||
function performBulkAssign() {
|
||||
@@ -906,7 +888,6 @@ function performBulkAssign() {
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error performing bulk assign:', error);
|
||||
toast.error('Bulk assign failed: ' + error.message, 5000);
|
||||
});
|
||||
}
|
||||
@@ -920,49 +901,39 @@ function showBulkPriorityModal() {
|
||||
}
|
||||
|
||||
const modalHtml = `
|
||||
<div class="modal-overlay" id="bulkPriorityModal">
|
||||
<div class="modal-content ascii-frame-outer">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header">Change Priority for ${ticketIds.length} Ticket(s)</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="modal-body">
|
||||
<label for="bulkPriority">Priority:</label>
|
||||
<select id="bulkPriority" class="editable">
|
||||
<option value="">Select Priority...</option>
|
||||
<option value="1">P1 - Critical Impact</option>
|
||||
<option value="2">P2 - High Impact</option>
|
||||
<option value="3">P3 - Medium Impact</option>
|
||||
<option value="4">P4 - Low Impact</option>
|
||||
<option value="5">P5 - Minimal Impact</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-modal-overlay" id="bulkPriorityModal" aria-hidden="true">
|
||||
<div class="lt-modal">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">Change Priority for ${ticketIds.length} Ticket(s)</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="modal-footer">
|
||||
<button data-action="perform-bulk-priority" class="btn btn-bulk">Update</button>
|
||||
<button data-action="close-bulk-priority-modal" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<label for="bulkPriority">Priority:</label>
|
||||
<select id="bulkPriority" class="lt-select" style="width:100%;margin-top:0.5rem;">
|
||||
<option value="">Select Priority...</option>
|
||||
<option value="1">P1 - Critical Impact</option>
|
||||
<option value="2">P2 - High Impact</option>
|
||||
<option value="3">P3 - Medium Impact</option>
|
||||
<option value="4">P4 - Low Impact</option>
|
||||
<option value="5">P5 - Minimal Impact</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button data-action="perform-bulk-priority" class="lt-btn lt-btn-primary">Update</button>
|
||||
<button data-action="close-bulk-priority-modal" class="lt-btn lt-btn-ghost">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
lt.modal.open('bulkPriorityModal');
|
||||
}
|
||||
|
||||
function closeBulkPriorityModal() {
|
||||
lt.modal.close('bulkPriorityModal');
|
||||
const modal = document.getElementById('bulkPriorityModal');
|
||||
if (modal) {
|
||||
modal.remove();
|
||||
}
|
||||
if (modal) setTimeout(() => modal.remove(), 300);
|
||||
}
|
||||
|
||||
function performBulkPriority() {
|
||||
@@ -1002,7 +973,6 @@ function performBulkPriority() {
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error performing bulk priority update:', error);
|
||||
toast.error('Bulk priority update failed: ' + error.message, 5000);
|
||||
});
|
||||
}
|
||||
@@ -1056,48 +1026,38 @@ function showBulkStatusModal() {
|
||||
}
|
||||
|
||||
const modalHtml = `
|
||||
<div class="modal-overlay" id="bulkStatusModal">
|
||||
<div class="modal-content ascii-frame-outer">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header">Change Status for ${ticketIds.length} Ticket(s)</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="modal-body">
|
||||
<label for="bulkStatus">New Status:</label>
|
||||
<select id="bulkStatus" class="editable">
|
||||
<option value="">Select Status...</option>
|
||||
<option value="Open">Open</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="In Progress">In Progress</option>
|
||||
<option value="Closed">Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-modal-overlay" id="bulkStatusModal" aria-hidden="true">
|
||||
<div class="lt-modal">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">Change Status for ${ticketIds.length} Ticket(s)</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="modal-footer">
|
||||
<button data-action="perform-bulk-status" class="btn btn-bulk">Update</button>
|
||||
<button data-action="close-bulk-status-modal" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<label for="bulkStatus">New Status:</label>
|
||||
<select id="bulkStatus" class="lt-select" style="width:100%;margin-top:0.5rem;">
|
||||
<option value="">Select Status...</option>
|
||||
<option value="Open">Open</option>
|
||||
<option value="Pending">Pending</option>
|
||||
<option value="In Progress">In Progress</option>
|
||||
<option value="Closed">Closed</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button data-action="perform-bulk-status" class="lt-btn lt-btn-primary">Update</button>
|
||||
<button data-action="close-bulk-status-modal" class="lt-btn lt-btn-ghost">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
lt.modal.open('bulkStatusModal');
|
||||
}
|
||||
|
||||
function closeBulkStatusModal() {
|
||||
lt.modal.close('bulkStatusModal');
|
||||
const modal = document.getElementById('bulkStatusModal');
|
||||
if (modal) {
|
||||
modal.remove();
|
||||
}
|
||||
if (modal) setTimeout(() => modal.remove(), 300);
|
||||
}
|
||||
|
||||
function performBulkStatusChange() {
|
||||
@@ -1137,7 +1097,6 @@ function performBulkStatusChange() {
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error performing bulk status change:', error);
|
||||
toast.error('Bulk status change failed: ' + error.message, 5000);
|
||||
});
|
||||
}
|
||||
@@ -1152,47 +1111,32 @@ function showBulkDeleteModal() {
|
||||
}
|
||||
|
||||
const modalHtml = `
|
||||
<div class="modal-overlay" id="bulkDeleteModal">
|
||||
<div class="modal-content ascii-frame-outer">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header" style="color: var(--status-closed);">⚠ Delete ${ticketIds.length} Ticket(s)</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="modal-body" style="text-align: center; padding: 2rem;">
|
||||
<p style="color: var(--terminal-amber); font-size: 1.1rem; margin-bottom: 1rem;">
|
||||
This action cannot be undone!
|
||||
</p>
|
||||
<p style="color: var(--terminal-green);">
|
||||
You are about to permanently delete ${ticketIds.length} ticket(s).<br>
|
||||
All associated comments and history will be lost.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-modal-overlay" id="bulkDeleteModal" aria-hidden="true">
|
||||
<div class="lt-modal">
|
||||
<div class="lt-modal-header" style="color: var(--status-closed);">
|
||||
<span class="lt-modal-title">⚠ Delete ${ticketIds.length} Ticket(s)</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="modal-footer">
|
||||
<button data-action="perform-bulk-delete" class="btn btn-bulk" style="background: var(--status-closed); border-color: var(--status-closed);">Delete Permanently</button>
|
||||
<button data-action="close-bulk-delete-modal" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
<div class="lt-modal-body" style="text-align:center;">
|
||||
<p style="color: var(--terminal-amber); font-size: 1.1rem; margin-bottom: 1rem;">This action cannot be undone!</p>
|
||||
<p style="color: var(--terminal-green);">You are about to permanently delete ${ticketIds.length} ticket(s).<br>All associated comments and history will be lost.</p>
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button data-action="perform-bulk-delete" class="lt-btn lt-btn-primary" style="background: var(--status-closed); border-color: var(--status-closed);">Delete Permanently</button>
|
||||
<button data-action="close-bulk-delete-modal" class="lt-btn lt-btn-ghost">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
lt.modal.open('bulkDeleteModal');
|
||||
}
|
||||
|
||||
function closeBulkDeleteModal() {
|
||||
lt.modal.close('bulkDeleteModal');
|
||||
const modal = document.getElementById('bulkDeleteModal');
|
||||
if (modal) {
|
||||
modal.remove();
|
||||
}
|
||||
if (modal) setTimeout(() => modal.remove(), 300);
|
||||
}
|
||||
|
||||
function performBulkDelete() {
|
||||
@@ -1221,7 +1165,6 @@ function performBulkDelete() {
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error performing bulk delete:', error);
|
||||
toast.error('Bulk delete failed: ' + error.message, 5000);
|
||||
});
|
||||
}
|
||||
@@ -1262,32 +1205,18 @@ function showConfirmModal(title, message, type = 'warning', onConfirm, onCancel
|
||||
const safeMessage = escapeHtml(message);
|
||||
|
||||
const modalHtml = `
|
||||
<div class="modal-overlay" id="${modalId}">
|
||||
<div class="modal-content ascii-frame-outer" style="max-width: 500px;">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header" style="color: ${color};">
|
||||
${icon} ${safeTitle}
|
||||
<div class="lt-modal-overlay" id="${modalId}" aria-hidden="true">
|
||||
<div class="lt-modal" style="max-width: 500px;">
|
||||
<div class="lt-modal-header" style="color: ${color};">
|
||||
<span class="lt-modal-title">${icon} ${safeTitle}</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="modal-body" style="padding: 1.5rem; text-align: center;">
|
||||
<p style="color: var(--terminal-green); white-space: pre-line;">
|
||||
${safeMessage}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-modal-body" style="text-align: center;">
|
||||
<p style="color: var(--terminal-green); white-space: pre-line;">${safeMessage}</p>
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" id="${modalId}_confirm">Confirm</button>
|
||||
<button class="btn btn-secondary" id="${modalId}_cancel">Cancel</button>
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button class="lt-btn lt-btn-primary" id="${modalId}_confirm">Confirm</button>
|
||||
<button class="lt-btn lt-btn-ghost" id="${modalId}_cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1296,28 +1225,17 @@ function showConfirmModal(title, message, type = 'warning', onConfirm, onCancel
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
|
||||
const modal = document.getElementById(modalId);
|
||||
const confirmBtn = document.getElementById(`${modalId}_confirm`);
|
||||
const cancelBtn = document.getElementById(`${modalId}_cancel`);
|
||||
lt.modal.open(modalId);
|
||||
|
||||
confirmBtn.addEventListener('click', () => {
|
||||
modal.remove();
|
||||
if (onConfirm) onConfirm();
|
||||
});
|
||||
|
||||
cancelBtn.addEventListener('click', () => {
|
||||
modal.remove();
|
||||
if (onCancel) onCancel();
|
||||
});
|
||||
|
||||
// ESC key to cancel
|
||||
const escHandler = (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
modal.remove();
|
||||
if (onCancel) onCancel();
|
||||
document.removeEventListener('keydown', escHandler);
|
||||
}
|
||||
const cleanup = (cb) => {
|
||||
lt.modal.close(modalId);
|
||||
setTimeout(() => modal.remove(), 300);
|
||||
if (cb) cb();
|
||||
};
|
||||
document.addEventListener('keydown', escHandler);
|
||||
|
||||
document.getElementById(`${modalId}_confirm`).addEventListener('click', () => cleanup(onConfirm));
|
||||
document.getElementById(`${modalId}_cancel`).addEventListener('click', () => cleanup(onCancel));
|
||||
modal.querySelector('[data-modal-close]').addEventListener('click', () => cleanup(onCancel));
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -1338,39 +1256,19 @@ function showInputModal(title, label, placeholder = '', onSubmit, onCancel = nul
|
||||
const safePlaceholder = escapeHtml(placeholder);
|
||||
|
||||
const modalHtml = `
|
||||
<div class="modal-overlay" id="${modalId}">
|
||||
<div class="modal-content ascii-frame-outer" style="max-width: 500px;">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header">
|
||||
${safeTitle}
|
||||
<div class="lt-modal-overlay" id="${modalId}" aria-hidden="true">
|
||||
<div class="lt-modal" style="max-width: 500px;">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">${safeTitle}</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="modal-body" style="padding: 1.5rem;">
|
||||
<label for="${inputId}" style="display: block; margin-bottom: 0.5rem; color: var(--terminal-green);">
|
||||
${safeLabel}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="${inputId}"
|
||||
class="terminal-input"
|
||||
placeholder="${safePlaceholder}"
|
||||
style="width: 100%; padding: 0.5rem; background: var(--bg-primary); border: 1px solid var(--terminal-green); color: var(--terminal-green); font-family: var(--font-mono);"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<label for="${inputId}" style="display: block; margin-bottom: 0.5rem; color: var(--terminal-green);">${safeLabel}</label>
|
||||
<input type="text" id="${inputId}" class="lt-input" placeholder="${safePlaceholder}" style="width: 100%;" />
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-primary" id="${modalId}_submit">Save</button>
|
||||
<button class="btn btn-secondary" id="${modalId}_cancel">Cancel</button>
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button class="lt-btn lt-btn-primary" id="${modalId}_submit">Save</button>
|
||||
<button class="lt-btn lt-btn-ghost" id="${modalId}_cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1380,41 +1278,22 @@ function showInputModal(title, label, placeholder = '', onSubmit, onCancel = nul
|
||||
|
||||
const modal = document.getElementById(modalId);
|
||||
const input = document.getElementById(inputId);
|
||||
const submitBtn = document.getElementById(`${modalId}_submit`);
|
||||
const cancelBtn = document.getElementById(`${modalId}_cancel`);
|
||||
lt.modal.open(modalId);
|
||||
|
||||
// Focus input
|
||||
setTimeout(() => input.focus(), 100);
|
||||
|
||||
const handleSubmit = () => {
|
||||
const value = input.value.trim();
|
||||
modal.remove();
|
||||
if (onSubmit) onSubmit(value);
|
||||
const cleanup = (cb) => {
|
||||
lt.modal.close(modalId);
|
||||
setTimeout(() => modal.remove(), 300);
|
||||
if (cb) cb();
|
||||
};
|
||||
|
||||
submitBtn.addEventListener('click', handleSubmit);
|
||||
const handleSubmit = () => cleanup(() => onSubmit && onSubmit(input.value.trim()));
|
||||
|
||||
// Enter key to submit
|
||||
input.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
handleSubmit();
|
||||
}
|
||||
});
|
||||
|
||||
cancelBtn.addEventListener('click', () => {
|
||||
modal.remove();
|
||||
if (onCancel) onCancel();
|
||||
});
|
||||
|
||||
// ESC key to cancel
|
||||
const escHandler = (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
modal.remove();
|
||||
if (onCancel) onCancel();
|
||||
document.removeEventListener('keydown', escHandler);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', escHandler);
|
||||
document.getElementById(`${modalId}_submit`).addEventListener('click', handleSubmit);
|
||||
input.addEventListener('keypress', (e) => { if (e.key === 'Enter') handleSubmit(); });
|
||||
document.getElementById(`${modalId}_cancel`).addEventListener('click', () => cleanup(onCancel));
|
||||
modal.querySelector('[data-modal-close]').addEventListener('click', () => cleanup(onCancel));
|
||||
}
|
||||
|
||||
// ========================================
|
||||
@@ -1429,44 +1308,36 @@ function quickStatusChange(ticketId, currentStatus) {
|
||||
const otherStatuses = statuses.filter(s => s !== currentStatus);
|
||||
|
||||
const modalHtml = `
|
||||
<div class="modal-overlay" id="quickStatusModal">
|
||||
<div class="modal-content ascii-frame-outer" style="max-width: 400px;">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header">Quick Status Change</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="modal-body" style="padding: 1rem;">
|
||||
<p style="margin-bottom: 1rem;">Ticket #${escapeHtml(ticketId)}</p>
|
||||
<p style="margin-bottom: 0.5rem; color: var(--terminal-amber);">Current: ${escapeHtml(currentStatus)}</p>
|
||||
<label for="quickStatusSelect">New Status:</label>
|
||||
<select id="quickStatusSelect" class="editable" style="width: 100%; margin-top: 0.5rem;">
|
||||
${otherStatuses.map(s => `<option value="${s}">${s}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-modal-overlay" id="quickStatusModal" aria-hidden="true">
|
||||
<div class="lt-modal" style="max-width:400px;">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">Quick Status Change</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="modal-footer">
|
||||
<button data-action="perform-quick-status" data-ticket-id="${ticketId}" class="btn btn-primary">Update</button>
|
||||
<button data-action="close-quick-status-modal" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<p style="margin-bottom:0.5rem;">Ticket #${escapeHtml(ticketId)}</p>
|
||||
<p style="margin-bottom:0.5rem;color:var(--terminal-amber);">Current: ${escapeHtml(currentStatus)}</p>
|
||||
<label for="quickStatusSelect">New Status:</label>
|
||||
<select id="quickStatusSelect" class="lt-select" style="width:100%;margin-top:0.5rem;">
|
||||
${otherStatuses.map(s => `<option value="${s}">${s}</option>`).join('')}
|
||||
</select>
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button data-action="perform-quick-status" data-ticket-id="${ticketId}" class="lt-btn lt-btn-primary">Update</button>
|
||||
<button data-action="close-quick-status-modal" class="lt-btn lt-btn-ghost">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
lt.modal.open('quickStatusModal');
|
||||
}
|
||||
|
||||
function closeQuickStatusModal() {
|
||||
lt.modal.close('quickStatusModal');
|
||||
const modal = document.getElementById('quickStatusModal');
|
||||
if (modal) modal.remove();
|
||||
if (modal) setTimeout(() => modal.remove(), 300);
|
||||
}
|
||||
|
||||
function performQuickStatusChange(ticketId) {
|
||||
@@ -1496,7 +1367,6 @@ function performQuickStatusChange(ticketId) {
|
||||
})
|
||||
.catch(error => {
|
||||
closeQuickStatusModal();
|
||||
console.error('Error:', error);
|
||||
toast.error('Error updating status', 4000);
|
||||
});
|
||||
}
|
||||
@@ -1506,44 +1376,32 @@ function performQuickStatusChange(ticketId) {
|
||||
*/
|
||||
function quickAssign(ticketId) {
|
||||
const modalHtml = `
|
||||
<div class="modal-overlay" id="quickAssignModal">
|
||||
<div class="modal-content ascii-frame-outer" style="max-width: 400px;">
|
||||
<span class="bottom-left-corner">╚</span>
|
||||
<span class="bottom-right-corner">╝</span>
|
||||
|
||||
<div class="ascii-section-header">Quick Assign</div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="ascii-frame-inner">
|
||||
<div class="modal-body" style="padding: 1rem;">
|
||||
<p style="margin-bottom: 1rem;">Ticket #${escapeHtml(ticketId)}</p>
|
||||
<label for="quickAssignSelect">Assign to:</label>
|
||||
<select id="quickAssignSelect" class="editable" style="width: 100%; margin-top: 0.5rem;">
|
||||
<option value="">Unassigned</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lt-modal-overlay" id="quickAssignModal" aria-hidden="true">
|
||||
<div class="lt-modal" style="max-width:400px;">
|
||||
<div class="lt-modal-header">
|
||||
<span class="lt-modal-title">Quick Assign</span>
|
||||
<button class="lt-modal-close" data-modal-close>✕</button>
|
||||
</div>
|
||||
|
||||
<div class="ascii-divider"></div>
|
||||
|
||||
<div class="ascii-content">
|
||||
<div class="modal-footer">
|
||||
<button data-action="perform-quick-assign" data-ticket-id="${ticketId}" class="btn btn-primary">Assign</button>
|
||||
<button data-action="close-quick-assign-modal" class="btn btn-secondary">Cancel</button>
|
||||
</div>
|
||||
<div class="lt-modal-body">
|
||||
<p style="margin-bottom:0.5rem;">Ticket #${escapeHtml(ticketId)}</p>
|
||||
<label for="quickAssignSelect">Assign to:</label>
|
||||
<select id="quickAssignSelect" class="lt-select" style="width:100%;margin-top:0.5rem;">
|
||||
<option value="">Unassigned</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="lt-modal-footer">
|
||||
<button data-action="perform-quick-assign" data-ticket-id="${ticketId}" class="lt-btn lt-btn-primary">Assign</button>
|
||||
<button data-action="close-quick-assign-modal" class="lt-btn lt-btn-ghost">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
document.body.insertAdjacentHTML('beforeend', modalHtml);
|
||||
lt.modal.open('quickAssignModal');
|
||||
|
||||
// Load users
|
||||
fetch('/api/get_users.php', {
|
||||
credentials: 'same-origin'
|
||||
})
|
||||
.then(response => response.json())
|
||||
lt.api.get('/api/get_users.php')
|
||||
.then(data => {
|
||||
if (data.success && data.users) {
|
||||
const select = document.getElementById('quickAssignSelect');
|
||||
@@ -1555,12 +1413,13 @@ function quickAssign(ticketId) {
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => console.error('Error loading users:', error));
|
||||
.catch(() => lt.toast.error('Error loading users'));
|
||||
}
|
||||
|
||||
function closeQuickAssignModal() {
|
||||
lt.modal.close('quickAssignModal');
|
||||
const modal = document.getElementById('quickAssignModal');
|
||||
if (modal) modal.remove();
|
||||
if (modal) setTimeout(() => modal.remove(), 300);
|
||||
}
|
||||
|
||||
function performQuickAssign(ticketId) {
|
||||
@@ -1590,7 +1449,6 @@ function performQuickAssign(ticketId) {
|
||||
})
|
||||
.catch(error => {
|
||||
closeQuickAssignModal();
|
||||
console.error('Error:', error);
|
||||
toast.error('Error updating assignment', 4000);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user