Implement comprehensive improvement plan (Phases 1-6)
Security (Phase 1-2): - Add SecurityHeadersMiddleware with CSP, X-Frame-Options, etc. - Add RateLimitMiddleware for API rate limiting - Add security event logging to AuditLogModel - Add ResponseHelper for standardized API responses - Update config.php with security constants Database (Phase 3): - Add migration 014 for additional indexes - Add migration 015 for ticket dependencies - Add migration 016 for ticket attachments - Add migration 017 for recurring tickets - Add migration 018 for custom fields Features (Phase 4-5): - Add ticket dependencies with DependencyModel and API - Add duplicate detection with check_duplicates API - Add file attachments with AttachmentModel and upload/download APIs - Add @mentions with autocomplete and highlighting - Add quick actions on dashboard rows Collaboration (Phase 5): - Add mention extraction in CommentModel - Add mention autocomplete dropdown in ticket.js - Add mention highlighting CSS styles Admin & Export (Phase 6): - Add StatsModel for dashboard widgets - Add dashboard stats cards (open, critical, unassigned, etc.) - Add CSV/JSON export via export_tickets API - Add rich text editor toolbar in markdown.js - Add RecurringTicketModel with cron job - Add CustomFieldModel for per-category fields - Add admin views: RecurringTickets, CustomFields, Workflow, Templates, AuditLog, UserActivity - Add admin APIs: manage_workflows, manage_templates, manage_recurring, custom_fields, get_users - Add admin routes in index.php Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,3 +1,10 @@
|
||||
// XSS prevention helper
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function saveTicket() {
|
||||
const editables = document.querySelectorAll('.editable');
|
||||
const data = {};
|
||||
@@ -167,8 +174,8 @@ function addComment() {
|
||||
// Format the comment text for display
|
||||
let displayText;
|
||||
if (isMarkdownEnabled) {
|
||||
// For markdown, use marked.parse
|
||||
displayText = marked.parse(commentText);
|
||||
// For markdown, use parseMarkdown (sanitizes HTML)
|
||||
displayText = parseMarkdown(commentText);
|
||||
} else {
|
||||
// For non-markdown, convert line breaks to <br> and escape HTML
|
||||
displayText = commentText
|
||||
@@ -521,6 +528,8 @@ function showTab(tabName) {
|
||||
// Hide all tab contents
|
||||
const descriptionTab = document.getElementById('description-tab');
|
||||
const commentsTab = document.getElementById('comments-tab');
|
||||
const attachmentsTab = document.getElementById('attachments-tab');
|
||||
const dependenciesTab = document.getElementById('dependencies-tab');
|
||||
const activityTab = document.getElementById('activity-tab');
|
||||
|
||||
if (!descriptionTab || !commentsTab) {
|
||||
@@ -531,6 +540,12 @@ function showTab(tabName) {
|
||||
// Hide all tabs
|
||||
descriptionTab.style.display = 'none';
|
||||
commentsTab.style.display = 'none';
|
||||
if (attachmentsTab) {
|
||||
attachmentsTab.style.display = 'none';
|
||||
}
|
||||
if (dependenciesTab) {
|
||||
dependenciesTab.style.display = 'none';
|
||||
}
|
||||
if (activityTab) {
|
||||
activityTab.style.display = 'none';
|
||||
}
|
||||
@@ -543,4 +558,627 @@ function showTab(tabName) {
|
||||
// Show selected tab and activate its button
|
||||
document.getElementById(`${tabName}-tab`).style.display = 'block';
|
||||
document.querySelector(`[onclick="showTab('${tabName}')"]`).classList.add('active');
|
||||
|
||||
// Load attachments when tab is shown
|
||||
if (tabName === 'attachments') {
|
||||
loadAttachments();
|
||||
initializeUploadZone();
|
||||
}
|
||||
|
||||
// Load dependencies when tab is shown
|
||||
if (tabName === 'dependencies') {
|
||||
loadDependencies();
|
||||
}
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Dependency Management Functions
|
||||
// ========================================
|
||||
|
||||
function loadDependencies() {
|
||||
const ticketId = window.ticketData.id;
|
||||
|
||||
fetch(`/api/ticket_dependencies.php?ticket_id=${ticketId}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
renderDependencies(data.dependencies);
|
||||
renderDependents(data.dependents);
|
||||
} else {
|
||||
console.error('Error loading dependencies:', data.error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading dependencies:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function renderDependencies(dependencies) {
|
||||
const container = document.getElementById('dependenciesList');
|
||||
if (!container) return;
|
||||
|
||||
const typeLabels = {
|
||||
'blocks': 'Blocks',
|
||||
'blocked_by': 'Blocked By',
|
||||
'relates_to': 'Relates To',
|
||||
'duplicates': 'Duplicates'
|
||||
};
|
||||
|
||||
let html = '';
|
||||
let hasAny = false;
|
||||
|
||||
for (const [type, items] of Object.entries(dependencies)) {
|
||||
if (items.length > 0) {
|
||||
hasAny = true;
|
||||
html += `<div class="dependency-group">
|
||||
<h4 style="color: var(--terminal-amber); margin: 0.5rem 0;">${typeLabels[type]}</h4>`;
|
||||
|
||||
items.forEach(dep => {
|
||||
const statusClass = 'status-' + dep.status.toLowerCase().replace(/ /g, '-');
|
||||
html += `<div class="dependency-item" style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; border-bottom: 1px dashed var(--terminal-green-dim);">
|
||||
<div>
|
||||
<a href="/ticket/${escapeHtml(dep.depends_on_id)}" style="color: var(--terminal-green);">
|
||||
#${escapeHtml(dep.depends_on_id)}
|
||||
</a>
|
||||
<span style="margin-left: 0.5rem;">${escapeHtml(dep.title)}</span>
|
||||
<span class="status-badge ${statusClass}" style="margin-left: 0.5rem; font-size: 0.8rem;">${escapeHtml(dep.status)}</span>
|
||||
</div>
|
||||
<button onclick="removeDependency('${dep.dependency_id}')" class="btn btn-small" style="padding: 0.25rem 0.5rem; font-size: 0.8rem;">Remove</button>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
}
|
||||
}
|
||||
|
||||
if (!hasAny) {
|
||||
html = '<p style="color: var(--terminal-green-dim);">No dependencies configured.</p>';
|
||||
}
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function renderDependents(dependents) {
|
||||
const container = document.getElementById('dependentsList');
|
||||
if (!container) return;
|
||||
|
||||
if (dependents.length === 0) {
|
||||
container.innerHTML = '<p style="color: var(--terminal-green-dim);">No tickets depend on this one.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
dependents.forEach(dep => {
|
||||
const statusClass = 'status-' + dep.status.toLowerCase().replace(/ /g, '-');
|
||||
html += `<div class="dependency-item" style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem; border-bottom: 1px dashed var(--terminal-green-dim);">
|
||||
<div>
|
||||
<a href="/ticket/${escapeHtml(dep.ticket_id)}" style="color: var(--terminal-green);">
|
||||
#${escapeHtml(dep.ticket_id)}
|
||||
</a>
|
||||
<span style="margin-left: 0.5rem;">${escapeHtml(dep.title)}</span>
|
||||
<span class="status-badge ${statusClass}" style="margin-left: 0.5rem; font-size: 0.8rem;">${escapeHtml(dep.status)}</span>
|
||||
<span style="margin-left: 0.5rem; color: var(--terminal-amber);">(${escapeHtml(dep.dependency_type)})</span>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function addDependency() {
|
||||
const ticketId = window.ticketData.id;
|
||||
const dependsOnId = document.getElementById('dependencyTicketId').value.trim();
|
||||
const dependencyType = document.getElementById('dependencyType').value;
|
||||
|
||||
if (!dependsOnId) {
|
||||
toast.warning('Please enter a ticket ID', 3000);
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/api/ticket_dependencies.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
},
|
||||
body: JSON.stringify({
|
||||
ticket_id: ticketId,
|
||||
depends_on_id: dependsOnId,
|
||||
dependency_type: dependencyType
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
toast.success('Dependency added', 3000);
|
||||
document.getElementById('dependencyTicketId').value = '';
|
||||
loadDependencies();
|
||||
} else {
|
||||
toast.error('Error: ' + (data.error || 'Unknown error'), 4000);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error adding dependency:', error);
|
||||
toast.error('Error adding dependency', 4000);
|
||||
});
|
||||
}
|
||||
|
||||
function removeDependency(dependencyId) {
|
||||
if (!confirm('Are you sure you want to remove this dependency?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/api/ticket_dependencies.php', {
|
||||
method: 'DELETE',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
},
|
||||
body: JSON.stringify({
|
||||
dependency_id: dependencyId
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
toast.success('Dependency removed', 3000);
|
||||
loadDependencies();
|
||||
} else {
|
||||
toast.error('Error: ' + (data.error || 'Unknown error'), 4000);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error removing dependency:', error);
|
||||
toast.error('Error removing dependency', 4000);
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Attachment Management Functions
|
||||
// ========================================
|
||||
|
||||
let uploadZoneInitialized = false;
|
||||
|
||||
function initializeUploadZone() {
|
||||
if (uploadZoneInitialized) return;
|
||||
|
||||
const uploadZone = document.getElementById('uploadZone');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
|
||||
if (!uploadZone || !fileInput) return;
|
||||
|
||||
// Drag and drop events
|
||||
uploadZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
uploadZone.classList.add('drag-over');
|
||||
});
|
||||
|
||||
uploadZone.addEventListener('dragleave', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
uploadZone.classList.remove('drag-over');
|
||||
});
|
||||
|
||||
uploadZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
uploadZone.classList.remove('drag-over');
|
||||
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) {
|
||||
handleFileUpload(files);
|
||||
}
|
||||
});
|
||||
|
||||
// File input change event
|
||||
fileInput.addEventListener('change', (e) => {
|
||||
if (e.target.files.length > 0) {
|
||||
handleFileUpload(e.target.files);
|
||||
}
|
||||
});
|
||||
|
||||
// Click on upload zone to trigger file input
|
||||
uploadZone.addEventListener('click', (e) => {
|
||||
if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'INPUT') {
|
||||
fileInput.click();
|
||||
}
|
||||
});
|
||||
|
||||
uploadZoneInitialized = true;
|
||||
}
|
||||
|
||||
function handleFileUpload(files) {
|
||||
const ticketId = window.ticketData.id;
|
||||
const progressDiv = document.getElementById('uploadProgress');
|
||||
const progressFill = document.getElementById('progressFill');
|
||||
const statusText = document.getElementById('uploadStatus');
|
||||
|
||||
let uploadedCount = 0;
|
||||
const totalFiles = files.length;
|
||||
|
||||
progressDiv.style.display = 'block';
|
||||
statusText.textContent = `Uploading 0 of ${totalFiles} files...`;
|
||||
progressFill.style.width = '0%';
|
||||
|
||||
Array.from(files).forEach((file, index) => {
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('ticket_id', ticketId);
|
||||
formData.append('csrf_token', window.CSRF_TOKEN);
|
||||
|
||||
const xhr = new XMLHttpRequest();
|
||||
|
||||
xhr.upload.addEventListener('progress', (e) => {
|
||||
if (e.lengthComputable) {
|
||||
const fileProgress = (e.loaded / e.total) * 100;
|
||||
const overallProgress = ((uploadedCount * 100) + fileProgress) / totalFiles;
|
||||
progressFill.style.width = overallProgress + '%';
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('load', () => {
|
||||
uploadedCount++;
|
||||
statusText.textContent = `Uploading ${uploadedCount} of ${totalFiles} files...`;
|
||||
progressFill.style.width = ((uploadedCount / totalFiles) * 100) + '%';
|
||||
|
||||
if (xhr.status === 200 || xhr.status === 201) {
|
||||
try {
|
||||
const response = JSON.parse(xhr.responseText);
|
||||
if (response.success) {
|
||||
if (uploadedCount === totalFiles) {
|
||||
toast.success(`${totalFiles} file(s) uploaded successfully`, 3000);
|
||||
loadAttachments();
|
||||
resetUploadUI();
|
||||
}
|
||||
} else {
|
||||
toast.error(`Error uploading ${file.name}: ${response.error}`, 4000);
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error(`Error parsing response for ${file.name}`, 4000);
|
||||
}
|
||||
} else {
|
||||
toast.error(`Error uploading ${file.name}: Server error`, 4000);
|
||||
}
|
||||
|
||||
if (uploadedCount === totalFiles) {
|
||||
setTimeout(resetUploadUI, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
xhr.addEventListener('error', () => {
|
||||
uploadedCount++;
|
||||
toast.error(`Error uploading ${file.name}: Network error`, 4000);
|
||||
if (uploadedCount === totalFiles) {
|
||||
setTimeout(resetUploadUI, 2000);
|
||||
}
|
||||
});
|
||||
|
||||
xhr.open('POST', '/api/upload_attachment.php');
|
||||
xhr.send(formData);
|
||||
});
|
||||
}
|
||||
|
||||
function resetUploadUI() {
|
||||
const progressDiv = document.getElementById('uploadProgress');
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
|
||||
progressDiv.style.display = 'none';
|
||||
if (fileInput) {
|
||||
fileInput.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function loadAttachments() {
|
||||
const ticketId = window.ticketData.id;
|
||||
const container = document.getElementById('attachmentsList');
|
||||
|
||||
if (!container) return;
|
||||
|
||||
fetch(`/api/upload_attachment.php?ticket_id=${ticketId}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
renderAttachments(data.attachments || []);
|
||||
} else {
|
||||
container.innerHTML = '<p style="color: var(--terminal-green-dim);">Error loading attachments.</p>';
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error loading attachments:', error);
|
||||
container.innerHTML = '<p style="color: var(--terminal-green-dim);">Error loading attachments.</p>';
|
||||
});
|
||||
}
|
||||
|
||||
function renderAttachments(attachments) {
|
||||
const container = document.getElementById('attachmentsList');
|
||||
if (!container) return;
|
||||
|
||||
if (attachments.length === 0) {
|
||||
container.innerHTML = '<p style="color: var(--terminal-green-dim);">No files attached to this ticket.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '<div class="attachments-grid">';
|
||||
|
||||
attachments.forEach(att => {
|
||||
const uploaderName = att.display_name || att.username || 'Unknown';
|
||||
const uploadDate = new Date(att.uploaded_at).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
html += `<div class="attachment-item" data-id="${att.attachment_id}">
|
||||
<div class="attachment-icon">${escapeHtml(att.icon || '📎')}</div>
|
||||
<div class="attachment-info">
|
||||
<div class="attachment-name" title="${escapeHtml(att.original_filename)}">
|
||||
<a href="/api/download_attachment.php?id=${att.attachment_id}" target="_blank" style="color: var(--terminal-green);">
|
||||
${escapeHtml(att.original_filename)}
|
||||
</a>
|
||||
</div>
|
||||
<div class="attachment-meta">
|
||||
${escapeHtml(att.file_size_formatted || formatFileSize(att.file_size))} • ${escapeHtml(uploaderName)} • ${escapeHtml(uploadDate)}
|
||||
</div>
|
||||
</div>
|
||||
<div class="attachment-actions">
|
||||
<a href="/api/download_attachment.php?id=${att.attachment_id}" class="btn btn-small" title="Download">⬇</a>
|
||||
<button onclick="deleteAttachment(${att.attachment_id})" class="btn btn-small btn-danger" title="Delete">✕</button>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes >= 1073741824) {
|
||||
return (bytes / 1073741824).toFixed(2) + ' GB';
|
||||
} else if (bytes >= 1048576) {
|
||||
return (bytes / 1048576).toFixed(2) + ' MB';
|
||||
} else if (bytes >= 1024) {
|
||||
return (bytes / 1024).toFixed(2) + ' KB';
|
||||
} else {
|
||||
return bytes + ' bytes';
|
||||
}
|
||||
}
|
||||
|
||||
function deleteAttachment(attachmentId) {
|
||||
if (!confirm('Are you sure you want to delete this attachment?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch('/api/delete_attachment.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
},
|
||||
body: JSON.stringify({
|
||||
attachment_id: attachmentId,
|
||||
csrf_token: window.CSRF_TOKEN
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
toast.success('Attachment deleted', 3000);
|
||||
loadAttachments();
|
||||
} else {
|
||||
toast.error('Error: ' + (data.error || 'Unknown error'), 4000);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error deleting attachment:', error);
|
||||
toast.error('Error deleting attachment', 4000);
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// @Mention Autocomplete Functions
|
||||
// ========================================
|
||||
|
||||
let mentionAutocomplete = null;
|
||||
let mentionUsers = [];
|
||||
let mentionStartPos = -1;
|
||||
let selectedMentionIndex = 0;
|
||||
|
||||
/**
|
||||
* Initialize mention autocomplete for a textarea
|
||||
*/
|
||||
function initMentionAutocomplete() {
|
||||
const textarea = document.getElementById('newComment');
|
||||
if (!textarea) return;
|
||||
|
||||
// Create autocomplete dropdown
|
||||
mentionAutocomplete = document.createElement('div');
|
||||
mentionAutocomplete.className = 'mention-autocomplete';
|
||||
mentionAutocomplete.id = 'mentionAutocomplete';
|
||||
textarea.parentElement.style.position = 'relative';
|
||||
textarea.parentElement.appendChild(mentionAutocomplete);
|
||||
|
||||
// Fetch users list
|
||||
fetchMentionUsers();
|
||||
|
||||
// Input event to detect @ symbol
|
||||
textarea.addEventListener('input', handleMentionInput);
|
||||
textarea.addEventListener('keydown', handleMentionKeydown);
|
||||
textarea.addEventListener('blur', () => {
|
||||
// Delay hiding to allow click on option
|
||||
setTimeout(hideMentionAutocomplete, 200);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Fetch available users for mentions
|
||||
*/
|
||||
function fetchMentionUsers() {
|
||||
fetch('/api/get_users.php')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success && data.users) {
|
||||
mentionUsers = data.users;
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching users for mentions:', error);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle input events to detect @ mentions
|
||||
*/
|
||||
function handleMentionInput(e) {
|
||||
const textarea = e.target;
|
||||
const text = textarea.value;
|
||||
const cursorPos = textarea.selectionStart;
|
||||
|
||||
// Find @ symbol before cursor
|
||||
let atPos = -1;
|
||||
for (let i = cursorPos - 1; i >= 0; i--) {
|
||||
const char = text[i];
|
||||
if (char === '@') {
|
||||
atPos = i;
|
||||
break;
|
||||
}
|
||||
if (char === ' ' || char === '\n') {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (atPos >= 0) {
|
||||
const query = text.substring(atPos + 1, cursorPos).toLowerCase();
|
||||
mentionStartPos = atPos;
|
||||
showMentionSuggestions(query, textarea);
|
||||
} else {
|
||||
hideMentionAutocomplete();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle keyboard navigation in autocomplete
|
||||
*/
|
||||
function handleMentionKeydown(e) {
|
||||
if (!mentionAutocomplete || !mentionAutocomplete.classList.contains('active')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const options = mentionAutocomplete.querySelectorAll('.mention-option');
|
||||
|
||||
switch (e.key) {
|
||||
case 'ArrowDown':
|
||||
e.preventDefault();
|
||||
selectedMentionIndex = Math.min(selectedMentionIndex + 1, options.length - 1);
|
||||
updateMentionSelection(options);
|
||||
break;
|
||||
case 'ArrowUp':
|
||||
e.preventDefault();
|
||||
selectedMentionIndex = Math.max(selectedMentionIndex - 1, 0);
|
||||
updateMentionSelection(options);
|
||||
break;
|
||||
case 'Enter':
|
||||
case 'Tab':
|
||||
e.preventDefault();
|
||||
if (options[selectedMentionIndex]) {
|
||||
selectMention(options[selectedMentionIndex].dataset.username);
|
||||
}
|
||||
break;
|
||||
case 'Escape':
|
||||
hideMentionAutocomplete();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update visual selection in autocomplete
|
||||
*/
|
||||
function updateMentionSelection(options) {
|
||||
options.forEach((opt, i) => {
|
||||
opt.classList.toggle('selected', i === selectedMentionIndex);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Show mention suggestions
|
||||
*/
|
||||
function showMentionSuggestions(query, textarea) {
|
||||
const filtered = mentionUsers.filter(user => {
|
||||
const username = (user.username || '').toLowerCase();
|
||||
const displayName = (user.display_name || '').toLowerCase();
|
||||
return username.includes(query) || displayName.includes(query);
|
||||
}).slice(0, 5);
|
||||
|
||||
if (filtered.length === 0) {
|
||||
hideMentionAutocomplete();
|
||||
return;
|
||||
}
|
||||
|
||||
let html = '';
|
||||
filtered.forEach((user, index) => {
|
||||
const isSelected = index === 0 ? 'selected' : '';
|
||||
html += `<div class="mention-option ${isSelected}" data-username="${escapeHtml(user.username)}" onclick="selectMention('${escapeHtml(user.username)}')">
|
||||
<span class="mention-username">@${escapeHtml(user.username)}</span>
|
||||
${user.display_name ? `<span class="mention-displayname">${escapeHtml(user.display_name)}</span>` : ''}
|
||||
</div>`;
|
||||
});
|
||||
|
||||
mentionAutocomplete.innerHTML = html;
|
||||
mentionAutocomplete.classList.add('active');
|
||||
selectedMentionIndex = 0;
|
||||
|
||||
// Position dropdown below cursor
|
||||
const rect = textarea.getBoundingClientRect();
|
||||
mentionAutocomplete.style.left = '0';
|
||||
mentionAutocomplete.style.top = (textarea.offsetTop + textarea.offsetHeight) + 'px';
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide mention autocomplete
|
||||
*/
|
||||
function hideMentionAutocomplete() {
|
||||
if (mentionAutocomplete) {
|
||||
mentionAutocomplete.classList.remove('active');
|
||||
}
|
||||
mentionStartPos = -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Select a mention from autocomplete
|
||||
*/
|
||||
function selectMention(username) {
|
||||
const textarea = document.getElementById('newComment');
|
||||
if (!textarea || mentionStartPos < 0) return;
|
||||
|
||||
const text = textarea.value;
|
||||
const before = text.substring(0, mentionStartPos);
|
||||
const after = text.substring(textarea.selectionStart);
|
||||
|
||||
textarea.value = before + '@' + username + ' ' + after;
|
||||
textarea.focus();
|
||||
const newPos = mentionStartPos + username.length + 2;
|
||||
textarea.setSelectionRange(newPos, newPos);
|
||||
|
||||
hideMentionAutocomplete();
|
||||
}
|
||||
|
||||
/**
|
||||
* Highlight mentions in comment text
|
||||
*/
|
||||
function highlightMentions(text) {
|
||||
return text.replace(/@([a-zA-Z0-9_-]+)/g, '<span class="mention">$1</span>');
|
||||
}
|
||||
|
||||
// Initialize mention autocomplete when DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
initMentionAutocomplete();
|
||||
|
||||
// Highlight existing mentions in comments
|
||||
document.querySelectorAll('.comment-text').forEach(el => {
|
||||
if (!el.hasAttribute('data-markdown')) {
|
||||
el.innerHTML = highlightMentions(el.innerHTML);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user