LotusGuild/tinker_tickets
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Integrate web_template design system and fix security/quality issues

Browse Source 
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:
Jared Vititoe
2026-03-17 23:22:24 -04:00
parent d204756cfe
commit 89a685a502
34 changed files with 576 additions and 997 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
assets/js/advanced-search.js
View File

@@ -7,8 +7,7 @@
function openAdvancedSearch() {
const modal = document.getElementById('advancedSearchModal');
if (modal) {
modal.style.display = 'flex';
document.body.classList.add('modal-open');
lt.modal.open('advancedSearchModal');
loadUsersForSearch();
populateCurrentFilters();
loadSavedFilters();
@@ -17,11 +16,7 @@ function openAdvancedSearch() {
// Close advanced search modal
function closeAdvancedSearch() {
const modal = document.getElementById('advancedSearchModal');
if (modal) {
modal.style.display = 'none';
document.body.classList.remove('modal-open');
}
lt.modal.close('advancedSearchModal');
}
// Close modal when clicking on backdrop
@@ -35,10 +30,7 @@ function closeOnAdvancedSearchBackdropClick(event) {
// Load users for dropdown
async function loadUsersForSearch() {
try {
const response = await fetch('/api/get_users.php', {
credentials: 'same-origin'
});
const data = await response.json();
const data = await lt.api.get('/api/get_users.php');
if (data.success && data.users) {
const createdBySelect = document.getElementById('adv-created-by');
@@ -68,7 +60,7 @@ async function loadUsersForSearch() {
});
}
} catch (error) {
console.error('Error loading users:', error);
lt.toast.error('Error loading users');
}
}
@@ -163,30 +155,14 @@ async function saveCurrentFilter() {
const filterCriteria = getCurrentFilterCriteria();
try {
const response = await fetch('/api/saved_filters.php', {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': window.CSRF_TOKEN
},
body: JSON.stringify({
filter_name: filterName.trim(),
filter_criteria: filterCriteria
})
await lt.api.post('/api/saved_filters.php', {
filter_name: filterName.trim(),
filter_criteria: filterCriteria
});
const result = await response.json();
if (result.success) {
toast.success(`Filter "${filterName}" saved successfully!`, 3000);
loadSavedFilters();
} else {
toast.error('Failed to save filter: ' + (result.error || 'Unknown error'), 4000);
}
lt.toast.success(`Filter "${filterName}" saved successfully!`, 3000);
loadSavedFilters();
} catch (error) {
console.error('Error saving filter:', error);
toast.error('Error saving filter', 4000);
lt.toast.error('Error saving filter: ' + (error.message || 'Unknown error'), 4000);
}
}
);
@@ -233,16 +209,12 @@ function getCurrentFilterCriteria() {
// Load saved filters
async function loadSavedFilters() {
try {
const response = await fetch('/api/saved_filters.php', {
credentials: 'same-origin'
});
const data = await response.json();
const data = await lt.api.get('/api/saved_filters.php');
if (data.success && data.filters) {
populateSavedFiltersDropdown(data.filters);
}
} catch (error) {
console.error('Error loading saved filters:', error);
lt.toast.error('Error loading saved filters');
}
}
@@ -277,7 +249,7 @@ function loadSavedFilter() {
const criteria = JSON.parse(selectedOption.dataset.criteria);
applySavedFilterCriteria(criteria);
} catch (error) {
console.error('Error loading filter:', error);
lt.toast.error('Error loading filter');
}
}
@@ -314,9 +286,7 @@ async function deleteSavedFilter() {
const selectedOption = dropdown.options[dropdown.selectedIndex];
if (!selectedOption || selectedOption.value === '') {
if (typeof toast !== 'undefined') {
toast.error('Please select a filter to delete');
}
lt.toast.error('Please select a filter to delete');
return;
}
@@ -329,45 +299,21 @@ async function deleteSavedFilter() {
'error',
async () => {
try {
const response = await fetch('/api/saved_filters.php', {
method: 'DELETE',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': window.CSRF_TOKEN
},
body: JSON.stringify({ filter_id: filterId })
});
const result = await response.json();
if (result.success) {
toast.success('Filter deleted successfully', 3000);
loadSavedFilters();
resetAdvancedSearch();
} else {
toast.error('Failed to delete filter', 4000);
}
await lt.api.delete('/api/saved_filters.php', { filter_id: filterId });
lt.toast.success('Filter deleted successfully', 3000);
loadSavedFilters();
resetAdvancedSearch();
} catch (error) {
console.error('Error deleting filter:', error);
toast.error('Error deleting filter', 4000);
lt.toast.error('Error deleting filter', 4000);
}
}
);
}
// Keyboard shortcut (Ctrl+Shift+F)
// Keyboard shortcut (Ctrl+Shift+F) — ESC is handled globally by lt.keys.initDefaults()
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.shiftKey && e.key === 'F') {
e.preventDefault();
openAdvancedSearch();
}
// ESC to close
if (e.key === 'Escape') {
const modal = document.getElementById('advancedSearchModal');
if (modal && modal.style.display === 'flex') {
closeAdvancedSearch();
}
}
});

1
assets/js/ascii-banner.js
View File

@@ -60,7 +60,6 @@ function renderASCIIBanner(bannerId, containerSelector, speed = 5, addGlow = tru
const container = document.querySelector(containerSelector);
if (!container || !banner) {
console.error('ASCII Banner: Container or banner not found', { bannerId, containerSelector });
return;
}

464
assets/js/dashboard.js
View File

@@ -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);
});
}

342
assets/js/keyboard-shortcuts.js
View File

@@ -1,173 +1,9 @@
/**
* Keyboard shortcuts for power users
* Keyboard shortcuts for power users.
* App-specific shortcuts registered via lt.keys.on() from web_template/base.js.
* ESC, Ctrl+K, and ? are handled by lt.keys.initDefaults().
*/
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('keydown', function(e) {
// ESC: Close modals, cancel edit mode, blur inputs
if (e.key === 'Escape') {
// Close any open modals first
const openModals = document.querySelectorAll('.modal-overlay');
let closedModal = false;
openModals.forEach(modal => {
if (modal.style.display !== 'none' && modal.offsetParent !== null) {
modal.remove();
document.body.classList.remove('modal-open');
closedModal = true;
}
});
// Close settings modal if open
const settingsModal = document.getElementById('settingsModal');
if (settingsModal && settingsModal.style.display !== 'none') {
settingsModal.style.display = 'none';
document.body.classList.remove('modal-open');
closedModal = true;
}
// Close advanced search modal if open
const searchModal = document.getElementById('advancedSearchModal');
if (searchModal && searchModal.style.display !== 'none') {
searchModal.style.display = 'none';
document.body.classList.remove('modal-open');
closedModal = true;
}
// If we closed a modal, stop here
if (closedModal) {
e.preventDefault();
return;
}
// Blur any focused input
if (e.target.tagName === 'INPUT' ||
e.target.tagName === 'TEXTAREA' ||
e.target.isContentEditable) {
e.target.blur();
}
// Cancel edit mode on ticket pages
const editButton = document.getElementById('editButton');
if (editButton && editButton.classList.contains('active')) {
window.location.reload();
}
return;
}
// Skip other shortcuts if user is typing in an input/textarea
if (e.target.tagName === 'INPUT' ||
e.target.tagName === 'TEXTAREA' ||
e.target.isContentEditable) {
return;
}
// Ctrl/Cmd + E: Toggle edit mode (on ticket pages)
if ((e.ctrlKey || e.metaKey) && e.key === 'e') {
e.preventDefault();
const editButton = document.getElementById('editButton');
if (editButton) {
editButton.click();
toast.info('Edit mode ' + (editButton.classList.contains('active') ? 'enabled' : 'disabled'));
}
}
// Ctrl/Cmd + S: Save ticket (on ticket pages)
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
e.preventDefault();
const editButton = document.getElementById('editButton');
if (editButton && editButton.classList.contains('active')) {
editButton.click();
toast.success('Saving ticket...');
}
}
// Ctrl/Cmd + K: Focus search (on dashboard)
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
e.preventDefault();
const searchBox = document.querySelector('.search-box');
if (searchBox) {
searchBox.focus();
searchBox.select();
}
}
// ? : Show keyboard shortcuts help (requires Shift on most keyboards)
if (e.key === '?') {
e.preventDefault();
showKeyboardHelp();
}
// J: Move to next row in table (Gmail-style)
if (e.key === 'j') {
e.preventDefault();
navigateTableRow('next');
}
// K: Move to previous row in table (Gmail-style)
if (e.key === 'k') {
e.preventDefault();
navigateTableRow('prev');
}
// Enter: Open selected ticket
if (e.key === 'Enter') {
const selectedRow = document.querySelector('tbody tr.keyboard-selected');
if (selectedRow) {
e.preventDefault();
const ticketLink = selectedRow.querySelector('a[href*="/ticket/"]');
if (ticketLink) {
window.location.href = ticketLink.href;
}
}
}
// N: Create new ticket (on dashboard)
if (e.key === 'n') {
e.preventDefault();
const newTicketBtn = document.querySelector('a[href*="/create"]');
if (newTicketBtn) {
window.location.href = newTicketBtn.href;
}
}
// C: Focus comment textarea (on ticket page)
if (e.key === 'c') {
const commentBox = document.getElementById('newComment');
if (commentBox) {
e.preventDefault();
commentBox.focus();
commentBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
// G then D: Go to Dashboard (vim-style)
if (e.key === 'g') {
window._pendingG = true;
setTimeout(() => { window._pendingG = false; }, 1000);
}
if (e.key === 'd' && window._pendingG) {
e.preventDefault();
window._pendingG = false;
window.location.href = '/';
}
// 1-4: Quick status change on ticket page
if (['1', '2', '3', '4'].includes(e.key)) {
const statusSelect = document.getElementById('statusSelect');
if (statusSelect && !document.querySelector('.modal-overlay')) {
const statusMap = { '1': 'Open', '2': 'Pending', '3': 'In Progress', '4': 'Closed' };
const targetStatus = statusMap[e.key];
const option = Array.from(statusSelect.options).find(opt => opt.value === targetStatus);
if (option && !option.disabled) {
e.preventDefault();
statusSelect.value = targetStatus;
statusSelect.dispatchEvent(new Event('change'));
}
}
}
});
});
// Track currently selected row for J/K navigation
let currentSelectedRowIndex = -1;
@@ -175,7 +11,6 @@ function navigateTableRow(direction) {
const rows = document.querySelectorAll('tbody tr');
if (rows.length === 0) return;
// Remove current selection
rows.forEach(row => row.classList.remove('keyboard-selected'));
if (direction === 'next') {
@@ -184,7 +19,6 @@ function navigateTableRow(direction) {
currentSelectedRowIndex = Math.max(currentSelectedRowIndex - 1, 0);
}
// Add selection to new row
const selectedRow = rows[currentSelectedRowIndex];
if (selectedRow) {
selectedRow.classList.add('keyboard-selected');
@@ -193,59 +27,135 @@ function navigateTableRow(direction) {
}
function showKeyboardHelp() {
// Check if help is already showing
if (document.getElementById('keyboardHelpModal')) {
return;
}
if (document.getElementById('keyboardHelpModal')) return;
const modal = document.createElement('div');
modal.id = 'keyboardHelpModal';
modal.className = 'modal-overlay';
modal.className = 'lt-modal-overlay';
modal.setAttribute('aria-hidden', 'true');
modal.innerHTML = `
<div class="modal-content ascii-frame-outer" style="max-width: 500px;">
<div class="ascii-frame">
<div class="ascii-content">
<h3 style="margin: 0 0 1rem 0; color: var(--terminal-green);">KEYBOARD SHORTCUTS</h3>
<div class="modal-body" style="padding: 0;">
<h4 style="color: var(--terminal-amber); margin: 0.5rem 0; font-size: 0.9rem;">Navigation</h4>
<table style="width: 100%; border-collapse: collapse; margin-bottom: 1rem;">
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>J</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Next ticket in list</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>K</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Previous ticket in list</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>Enter</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Open selected ticket</td></tr>
<tr><td style="padding: 0.4rem;"><kbd>G</kbd> then <kbd>D</kbd></td><td style="padding: 0.4rem;">Go to Dashboard</td></tr>
</table>
<h4 style="color: var(--terminal-amber); margin: 0.5rem 0; font-size: 0.9rem;">Actions</h4>
<table style="width: 100%; border-collapse: collapse; margin-bottom: 1rem;">
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>N</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">New ticket</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>C</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Focus comment box</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>Ctrl/Cmd + E</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Toggle Edit Mode</td></tr>
<tr><td style="padding: 0.4rem;"><kbd>Ctrl/Cmd + S</kbd></td><td style="padding: 0.4rem;">Save Changes</td></tr>
</table>
<h4 style="color: var(--terminal-amber); margin: 0.5rem 0; font-size: 0.9rem;">Quick Status (Ticket Page)</h4>
<table style="width: 100%; border-collapse: collapse; margin-bottom: 1rem;">
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>1</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Set Open</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>2</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Set Pending</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>3</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Set In Progress</td></tr>
<tr><td style="padding: 0.4rem;"><kbd>4</kbd></td><td style="padding: 0.4rem;">Set Closed</td></tr>
</table>
<h4 style="color: var(--terminal-amber); margin: 0.5rem 0; font-size: 0.9rem;">Other</h4>
<table style="width: 100%; border-collapse: collapse;">
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>Ctrl/Cmd + K</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Focus Search</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>ESC</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Close Modal / Cancel</td></tr>
<tr><td style="padding: 0.4rem;"><kbd>?</kbd></td><td style="padding: 0.4rem;">Show This Help</td></tr>
</table>
</div>
<div class="modal-footer" style="margin-top: 1rem;">
<button class="btn btn-secondary" data-action="close-shortcuts-modal">Close</button>
</div>
</div>
<div class="lt-modal" style="max-width: 500px;">
<div class="lt-modal-header">
<span class="lt-modal-title">KEYBOARD SHORTCUTS</span>
<button class="lt-modal-close" data-modal-close aria-label="Close">✕</button>
</div>
<div class="lt-modal-body">
<h4 style="color: var(--terminal-amber); margin: 0 0 0.5rem 0; font-size: 0.9rem;">Navigation</h4>
<table style="width: 100%; border-collapse: collapse; margin-bottom: 1rem;">
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>J</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Next ticket in list</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>K</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Previous ticket in list</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>Enter</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Open selected ticket</td></tr>
<tr><td style="padding: 0.4rem;"><kbd>G</kbd> then <kbd>D</kbd></td><td style="padding: 0.4rem;">Go to Dashboard</td></tr>
</table>
<h4 style="color: var(--terminal-amber); margin: 0 0 0.5rem 0; font-size: 0.9rem;">Actions</h4>
<table style="width: 100%; border-collapse: collapse; margin-bottom: 1rem;">
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>N</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">New ticket</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>C</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Focus comment box</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>Ctrl/Cmd+E</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Toggle Edit Mode</td></tr>
<tr><td style="padding: 0.4rem;"><kbd>Ctrl/Cmd+S</kbd></td><td style="padding: 0.4rem;">Save Changes</td></tr>
</table>
<h4 style="color: var(--terminal-amber); margin: 0 0 0.5rem 0; font-size: 0.9rem;">Quick Status (Ticket Page)</h4>
<table style="width: 100%; border-collapse: collapse; margin-bottom: 1rem;">
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>1</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Set Open</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>2</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Set Pending</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>3</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Set In Progress</td></tr>
<tr><td style="padding: 0.4rem;"><kbd>4</kbd></td><td style="padding: 0.4rem;">Set Closed</td></tr>
</table>
<h4 style="color: var(--terminal-amber); margin: 0 0 0.5rem 0; font-size: 0.9rem;">Other</h4>
<table style="width: 100%; border-collapse: collapse;">
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>Ctrl/Cmd+K</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Focus Search</td></tr>
<tr><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);"><kbd>ESC</kbd></td><td style="padding: 0.4rem; border-bottom: 1px solid var(--border-color);">Close Modal / Cancel</td></tr>
<tr><td style="padding: 0.4rem;"><kbd>?</kbd></td><td style="padding: 0.4rem;">Show This Help</td></tr>
</table>
</div>
<div class="lt-modal-footer">
<button class="lt-btn lt-btn-ghost" data-modal-close>Close</button>
</div>
</div>
`;
document.body.appendChild(modal);
// Add event listener for the close button
modal.querySelector('[data-action="close-shortcuts-modal"]').addEventListener('click', function() {
modal.remove();
});
lt.modal.open('keyboardHelpModal');
}
document.addEventListener('DOMContentLoaded', function() {
// Ctrl+E: Toggle edit mode (ticket pages)
lt.keys.on('ctrl+e', function() {
const editButton = document.getElementById('editButton');
if (editButton) {
editButton.click();
lt.toast.info('Edit mode ' + (editButton.classList.contains('active') ? 'enabled' : 'disabled'));
}
});
// Ctrl+S: Save ticket (ticket pages)
lt.keys.on('ctrl+s', function() {
const editButton = document.getElementById('editButton');
if (editButton && editButton.classList.contains('active')) {
editButton.click();
lt.toast.success('Saving ticket...');
}
});
// ?: Show keyboard shortcuts help (lt.keys.initDefaults also handles this, but we override to show our modal)
lt.keys.on('?', function() {
showKeyboardHelp();
});
// J: Next row
lt.keys.on('j', () => navigateTableRow('next'));
// K: Previous row
lt.keys.on('k', () => navigateTableRow('prev'));
// Enter: Open selected ticket
lt.keys.on('enter', function() {
const selectedRow = document.querySelector('tbody tr.keyboard-selected');
if (selectedRow) {
const ticketLink = selectedRow.querySelector('a[href*="/ticket/"]');
if (ticketLink) window.location.href = ticketLink.href;
}
});
// N: New ticket
lt.keys.on('n', function() {
const newTicketBtn = document.querySelector('a[href*="/create"]');
if (newTicketBtn) window.location.href = newTicketBtn.href;
});
// C: Focus comment box
lt.keys.on('c', function() {
const commentBox = document.getElementById('newComment');
if (commentBox) {
commentBox.focus();
commentBox.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
// G then D: Go to Dashboard (vim-style)
lt.keys.on('g', function() {
window._pendingG = true;
setTimeout(() => { window._pendingG = false; }, 1000);
});
lt.keys.on('d', function() {
if (window._pendingG) {
window._pendingG = false;
window.location.href = '/';
}
});
// 1-4: Quick status change on ticket page
['1', '2', '3', '4'].forEach(key => {
lt.keys.on(key, function() {
const statusSelect = document.getElementById('statusSelect');
if (statusSelect && !document.querySelector('.lt-modal-overlay[aria-hidden="false"]')) {
const statusMap = { '1': 'Open', '2': 'Pending', '3': 'In Progress', '4': 'Closed' };
const targetStatus = statusMap[key];
const option = Array.from(statusSelect.options).find(opt => opt.value === targetStatus);
if (option && !option.disabled) {
statusSelect.value = targetStatus;
statusSelect.dispatchEvent(new Event('change'));
}
}
});
});
});

54
assets/js/settings.js
View File

@@ -8,16 +8,13 @@ let userPreferences = {};
// Load preferences on page load
async function loadUserPreferences() {
try {
const response = await fetch('/api/user_preferences.php', {
credentials: 'same-origin'
});
const data = await response.json();
const data = await lt.api.get('/api/user_preferences.php');
if (data.success) {
userPreferences = data.preferences;
applyPreferences();
}
} catch (error) {
console.error('Error loading preferences:', error);
lt.toast.error('Error loading preferences');
}
}
@@ -94,34 +91,12 @@ async function saveSettings() {
};
try {
// Batch save all preferences in one request
const response = await fetch('/api/user_preferences.php', {
method: 'POST',
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json',
'X-CSRF-Token': window.CSRF_TOKEN
},
body: JSON.stringify({ preferences: prefs })
});
const result = await response.json();
if (!result.success) {
throw new Error('Failed to save preferences');
}
if (typeof toast !== 'undefined') {
toast.success('Preferences saved successfully!');
}
await lt.api.post('/api/user_preferences.php', { preferences: prefs });
lt.toast.success('Preferences saved successfully!');
closeSettingsModal();
// Reload page to apply new preferences
setTimeout(() => window.location.reload(), 1000);
} catch (error) {
if (typeof toast !== 'undefined') {
toast.error('Error saving preferences');
}
console.error('Error saving preferences:', error);
lt.toast.error('Error saving preferences');
}
}
@@ -129,24 +104,18 @@ async function saveSettings() {
function openSettingsModal() {
const modal = document.getElementById('settingsModal');
if (modal) {
modal.style.display = 'flex';
document.body.classList.add('modal-open');
lt.modal.open('settingsModal');
loadUserPreferences();
}
}
function closeSettingsModal() {
const modal = document.getElementById('settingsModal');
if (modal) {
modal.style.display = 'none';
document.body.classList.remove('modal-open');
}
lt.modal.close('settingsModal');
}
// Close modal when clicking on backdrop (outside the settings content)
function closeOnBackdropClick(event) {
const modal = document.getElementById('settingsModal');
// Only close if clicking directly on the modal backdrop, not on content
if (event.target === modal) {
closeSettingsModal();
}
@@ -158,14 +127,7 @@ document.addEventListener('keydown', (e) => {
e.preventDefault();
openSettingsModal();
}
// ESC to close modal
if (e.key === 'Escape') {
const modal = document.getElementById('settingsModal');
if (modal && modal.style.display !== 'none' && modal.style.display !== '') {
closeSettingsModal();
}
}
// ESC is handled globally by lt.keys.initDefaults()
});
// Initialize on page load

36
assets/js/ticket.js
View File

@@ -24,7 +24,6 @@ function saveTicket() {
const ticketId = getTicketIdFromUrl();
if (!ticketId) {
console.error('Could not determine ticket ID');
return;
}
@@ -66,7 +65,6 @@ function saveTicket() {
.then(response => {
if (!response.ok) {
return response.text().then(text => {
console.error('Server response:', text);
throw new Error('Network response was not ok');
});
}
@@ -81,11 +79,9 @@ function saveTicket() {
}
toast.success('Ticket updated successfully');
} else {
console.error('Error in API response:', data.error || 'Unknown error');
}
})
.catch(error => {
console.error('Error updating ticket:', error);
});
}
@@ -140,14 +136,12 @@ function toggleEditMode() {
function addComment() {
const commentText = document.getElementById('newComment').value;
if (!commentText.trim()) {
console.error('Comment text cannot be empty');
return;
}
const ticketId = getTicketIdFromUrl();
if (!ticketId) {
console.error('Could not determine ticket ID');
return;
}
@@ -169,7 +163,6 @@ function addComment() {
.then(response => {
if (!response.ok) {
return response.text().then(text => {
console.error('Server response:', text);
throw new Error('Network response was not ok');
});
}
@@ -224,11 +217,9 @@ function addComment() {
commentsList.insertBefore(commentDiv, commentsList.firstChild);
} else {
console.error('Error adding comment:', data.error || 'Unknown error');
}
})
.catch(error => {
console.error('Error adding comment:', error);
});
}
@@ -327,11 +318,9 @@ function handleAssignmentChange() {
.then(data => {
if (!data.success) {
toast.error('Error updating assignment');
console.error(data.error);
}
})
.catch(error => {
console.error('Error updating assignment:', error);
toast.error('Error updating assignment: ' + error.message);
});
});
@@ -365,7 +354,6 @@ function handleMetadataChanges() {
.then(data => {
if (!data.success) {
toast.error(`Error updating ${fieldName}`);
console.error(data.error);
} else {
// Update window.ticketData
window.ticketData[fieldName] = fieldName === 'priority' ? parseInt(newValue) : newValue;
@@ -387,7 +375,6 @@ function handleMetadataChanges() {
}
})
.catch(error => {
console.error(`Error updating ${fieldName}:`, error);
toast.error(`Error updating ${fieldName}: ` + error.message);
});
}
@@ -472,7 +459,6 @@ function performStatusChange(statusSelect, selectedOption, newStatus) {
const text = await response.text();
if (!response.ok) {
console.error('Server error response:', text);
try {
const data = JSON.parse(text);
throw new Error(data.error || 'Server returned an error');
@@ -484,7 +470,6 @@ function performStatusChange(statusSelect, selectedOption, newStatus) {
try {
return JSON.parse(text);
} catch (parseError) {
console.error('Failed to parse JSON:', text);
throw new Error('Invalid JSON response from server');
}
})
@@ -507,14 +492,12 @@ function performStatusChange(statusSelect, selectedOption, newStatus) {
window.location.reload();
}, 500);
} else {
console.error('Error updating status:', data.error || 'Unknown error');
toast.error('Error updating status: ' + (data.error || 'Unknown error'));
// Reset to current status
statusSelect.selectedIndex = 0;
}
})
.catch(error => {
console.error('Error updating status:', error);
toast.error('Error updating status: ' + error.message);
// Reset to current status
statusSelect.selectedIndex = 0;
@@ -530,7 +513,6 @@ function showTab(tabName) {
const activityTab = document.getElementById('activity-tab');
if (!descriptionTab || !commentsTab) {
console.error('Tab elements not found');
return;
}
@@ -592,12 +574,10 @@ function loadDependencies() {
renderDependencies(data.dependencies);
renderDependents(data.dependents);
} else {
console.error('Error loading dependencies:', data.error);
showDependencyError(data.error || 'Failed to load dependencies');
}
})
.catch(error => {
console.error('Error loading dependencies:', error);
showDependencyError('Failed to load dependencies. The feature may not be available.');
});
}
@@ -720,7 +700,6 @@ function addDependency() {
}
})
.catch(error => {
console.error('Error adding dependency:', error);
toast.error('Error adding dependency', 4000);
});
}
@@ -751,7 +730,6 @@ function removeDependency(dependencyId) {
}
})
.catch(error => {
console.error('Error removing dependency:', error);
toast.error('Error removing dependency', 4000);
});
}
@@ -910,7 +888,6 @@ function loadAttachments() {
}
})
.catch(error => {
console.error('Error loading attachments:', error);
container.innerHTML = '<p style="color: var(--terminal-green-dim);">Error loading attachments.</p>';
});
}
@@ -998,7 +975,6 @@ function deleteAttachment(attachmentId) {
}
})
.catch(error => {
console.error('Error deleting attachment:', error);
toast.error('Error deleting attachment', 4000);
});
}
@@ -1042,18 +1018,13 @@ function initMentionAutocomplete() {
* Fetch available users for mentions
*/
function fetchMentionUsers() {
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) {
mentionUsers = data.users;
}
})
.catch(error => {
console.error('Error fetching users for mentions:', error);
});
.catch(() => { /* silently ignore mention user fetch failures */ });
}
/**
@@ -1380,7 +1351,6 @@ function saveEditComment(commentId) {
}
})
.catch(error => {
console.error('Error updating comment:', error);
showToast('Failed to update comment', 'error');
});
}
@@ -1434,7 +1404,6 @@ function deleteComment(commentId) {
}
})
.catch(error => {
console.error('Error deleting comment:', error);
showToast('Failed to delete comment', 'error');
});
}
@@ -1596,7 +1565,6 @@ function submitReply(parentCommentId) {
}
})
.catch(error => {
console.error('Error adding reply:', error);
showToast('Failed to add reply', 'error');
});
}

100
assets/js/toast.js
View File

@@ -1,94 +1,22 @@
/**
* Terminal-style toast notification system with queuing
* Deprecated: use lt.toast.* directly (from web_template/base.js).
* This shim maintains backwards compatibility while callers are migrated.
*/
// Toast queue management
let toastQueue = [];
let currentToast = null;
function showToast(message, type = 'info', duration = 3000) {
// Queue if a toast is already showing
if (currentToast) {
toastQueue.push({ message, type, duration });
return;
// showToast() shim — used by inline view scripts
function showToast(message, type = 'info', duration = 3500) {
switch (type) {
case 'success': lt.toast.success(message, duration); break;
case 'error': lt.toast.error(message, duration); break;
case 'warning': lt.toast.warning(message, duration); break;
default: lt.toast.info(message, duration); break;
}
displayToast(message, type, duration);
}
function displayToast(message, type, duration) {
// Create toast element
const toast = document.createElement('div');
toast.className = `terminal-toast toast-${type}`;
currentToast = toast;
// Icon based on type
const icons = {
success: '✓',
error: '✗',
info: 'ℹ',
warning: '⚠'
};
const iconSpan = document.createElement('span');
iconSpan.className = 'toast-icon';
iconSpan.textContent = `[${icons[type] || 'ℹ'}]`;
const msgSpan = document.createElement('span');
msgSpan.className = 'toast-message';
msgSpan.textContent = message;
const closeSpan = document.createElement('span');
closeSpan.className = 'toast-close';
closeSpan.style.cssText = 'margin-left: auto; cursor: pointer; opacity: 0.7; padding-left: 1rem;';
closeSpan.textContent = '[×]';
toast.appendChild(iconSpan);
toast.appendChild(msgSpan);
toast.appendChild(closeSpan);
// Add to document
document.body.appendChild(toast);
// Trigger animation
setTimeout(() => toast.classList.add('show'), 10);
// Manual dismiss handler
const closeBtn = toast.querySelector('.toast-close');
closeBtn.addEventListener('click', () => dismissToast(toast));
// Auto-remove after duration
const timeoutId = setTimeout(() => {
dismissToast(toast);
}, duration);
// Store timeout ID for manual dismiss
toast.timeoutId = timeoutId;
}
function dismissToast(toast) {
// Clear auto-dismiss timeout
if (toast.timeoutId) {
clearTimeout(toast.timeoutId);
}
toast.classList.remove('show');
setTimeout(() => {
toast.remove();
currentToast = null;
// Show next toast in queue
if (toastQueue.length > 0) {
const next = toastQueue.shift();
displayToast(next.message, next.type, next.duration);
}
}, 300);
}
// Convenience functions
// window.toast.* shim — used by JS files
window.toast = {
success: (msg, duration) => showToast(msg, 'success', duration),
error: (msg, duration) => showToast(msg, 'error', duration),
info: (msg, duration) => showToast(msg, 'info', duration),
warning: (msg, duration) => showToast(msg, 'warning', duration)
success: (msg, dur) => lt.toast.success(msg, dur),
error: (msg, dur) => lt.toast.error(msg, dur),
warning: (msg, dur) => lt.toast.warning(msg, dur),
info: (msg, dur) => lt.toast.info(msg, dur),
};

6
assets/js/utils.js
View File

@@ -1,8 +1,6 @@
// XSS prevention helper
// XSS prevention helper — delegates to lt.escHtml() from web_template/base.js
function escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
return lt.escHtml(text);
}
// Get ticket ID from URL (handles both /ticket/123 and ?id=123 formats)