Add comment threading and fix fetch authentication
- Add comment threading/reply functionality with nested display - Database migration for parent_comment_id and thread_depth columns - Recursive comment rendering with depth-based indentation - Reply form with inline UI and smooth animations - Thread collapse/expand capability - Max thread depth of 3 levels - Fix 401 authentication errors on API calls - Add credentials: 'same-origin' to all fetch calls - Affects settings.js, ticket.js, dashboard.js, advanced-search.js - Ensures session cookies are sent with requests - Enhanced comment styling - Thread connector lines for visual hierarchy - Reply button on comments (up to depth 3) - Quote block styling for replies Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -72,6 +72,7 @@ function saveTicket() {
|
||||
|
||||
fetch(apiUrl, {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
@@ -173,6 +174,7 @@ function addComment() {
|
||||
|
||||
fetch('/api/add_comment.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
@@ -333,6 +335,7 @@ function handleAssignmentChange() {
|
||||
|
||||
fetch('/api/assign_ticket.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
@@ -367,6 +370,7 @@ function handleMetadataChanges() {
|
||||
|
||||
fetch('/api/update_ticket.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
@@ -590,7 +594,9 @@ function showTab(tabName) {
|
||||
function loadDependencies() {
|
||||
const ticketId = window.ticketData.id;
|
||||
|
||||
fetch(`/api/ticket_dependencies.php?ticket_id=${ticketId}`)
|
||||
fetch(`/api/ticket_dependencies.php?ticket_id=${ticketId}`, {
|
||||
credentials: 'same-origin'
|
||||
})
|
||||
.then(response => {
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}`);
|
||||
@@ -708,6 +714,7 @@ function addDependency() {
|
||||
|
||||
fetch('/api/ticket_dependencies.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
@@ -741,6 +748,7 @@ function removeDependency(dependencyId) {
|
||||
|
||||
fetch('/api/ticket_dependencies.php', {
|
||||
method: 'DELETE',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
@@ -906,7 +914,9 @@ function loadAttachments() {
|
||||
|
||||
if (!container) return;
|
||||
|
||||
fetch(`/api/upload_attachment.php?ticket_id=${ticketId}`)
|
||||
fetch(`/api/upload_attachment.php?ticket_id=${ticketId}`, {
|
||||
credentials: 'same-origin'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
@@ -984,6 +994,7 @@ function deleteAttachment(attachmentId) {
|
||||
|
||||
fetch('/api/delete_attachment.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
@@ -1047,7 +1058,9 @@ function initMentionAutocomplete() {
|
||||
* Fetch available users for mentions
|
||||
*/
|
||||
function fetchMentionUsers() {
|
||||
fetch('/api/get_users.php')
|
||||
fetch('/api/get_users.php', {
|
||||
credentials: 'same-origin'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success && data.users) {
|
||||
@@ -1235,6 +1248,15 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
case 'cancel-edit-comment':
|
||||
cancelEditComment(parseInt(target.dataset.commentId));
|
||||
break;
|
||||
case 'reply-comment':
|
||||
showReplyForm(parseInt(target.dataset.commentId), target.dataset.user);
|
||||
break;
|
||||
case 'edit-comment':
|
||||
editComment(parseInt(target.dataset.commentId));
|
||||
break;
|
||||
case 'delete-comment':
|
||||
deleteComment(parseInt(target.dataset.commentId));
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1311,6 +1333,7 @@ function saveEditComment(commentId) {
|
||||
// Send update request
|
||||
fetch('/api/update_comment.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
@@ -1395,6 +1418,7 @@ function deleteComment(commentId) {
|
||||
|
||||
fetch('/api/delete_comment.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
@@ -1425,8 +1449,126 @@ function deleteComment(commentId) {
|
||||
});
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// Comment Reply Functions
|
||||
// ========================================
|
||||
|
||||
/**
|
||||
* Show reply form for a comment
|
||||
*/
|
||||
function showReplyForm(commentId, userName) {
|
||||
// Remove any existing reply forms
|
||||
document.querySelectorAll('.reply-form-container').forEach(form => form.remove());
|
||||
|
||||
const commentDiv = document.querySelector(`.comment[data-comment-id="${commentId}"]`);
|
||||
if (!commentDiv) return;
|
||||
|
||||
const replyFormHtml = `
|
||||
<div class="reply-form-container" data-parent-id="${commentId}">
|
||||
<div class="reply-header">
|
||||
<span>Replying to <span class="replying-to">@${userName}</span></span>
|
||||
<button type="button" class="close-reply-btn" onclick="closeReplyForm()">Cancel</button>
|
||||
</div>
|
||||
<textarea id="replyText" placeholder="Write your reply..."></textarea>
|
||||
<div class="reply-actions">
|
||||
<label class="markdown-toggle-small">
|
||||
<input type="checkbox" id="replyMarkdown">
|
||||
<span>Markdown</span>
|
||||
</label>
|
||||
<div class="reply-buttons">
|
||||
<button type="button" class="btn btn-small" onclick="submitReply(${commentId})">Reply</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// Find the comment-content div and insert after it
|
||||
const contentDiv = commentDiv.querySelector('.comment-content') || commentDiv;
|
||||
contentDiv.insertAdjacentHTML('afterend', replyFormHtml);
|
||||
|
||||
// Focus on the textarea
|
||||
const textarea = document.getElementById('replyText');
|
||||
if (textarea) {
|
||||
textarea.focus();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close reply form
|
||||
*/
|
||||
function closeReplyForm() {
|
||||
document.querySelectorAll('.reply-form-container').forEach(form => {
|
||||
form.style.animation = 'fadeIn 0.2s ease reverse';
|
||||
setTimeout(() => form.remove(), 200);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Submit a reply to a comment
|
||||
*/
|
||||
function submitReply(parentCommentId) {
|
||||
const replyText = document.getElementById('replyText');
|
||||
const replyMarkdown = document.getElementById('replyMarkdown');
|
||||
const ticketId = window.ticketData.id;
|
||||
|
||||
if (!replyText || !replyText.value.trim()) {
|
||||
showToast('Please enter a reply', 'warning');
|
||||
return;
|
||||
}
|
||||
|
||||
const commentText = replyText.value.trim();
|
||||
const isMarkdownEnabled = replyMarkdown ? replyMarkdown.checked : false;
|
||||
|
||||
fetch('/api/add_comment.php', {
|
||||
method: 'POST',
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': window.CSRF_TOKEN
|
||||
},
|
||||
body: JSON.stringify({
|
||||
ticket_id: ticketId,
|
||||
comment_text: commentText,
|
||||
markdown_enabled: isMarkdownEnabled,
|
||||
parent_comment_id: parentCommentId
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
// Close the reply form
|
||||
closeReplyForm();
|
||||
|
||||
// Reload page to show the new threaded comment properly
|
||||
// (Threading requires proper hierarchical rendering)
|
||||
showToast('Reply added successfully', 'success');
|
||||
setTimeout(() => window.location.reload(), 500);
|
||||
} else {
|
||||
showToast(data.error || 'Failed to add reply', 'error');
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error adding reply:', error);
|
||||
showToast('Failed to add reply', 'error');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Toggle thread collapse/expand
|
||||
*/
|
||||
function toggleThreadCollapse(commentId) {
|
||||
const commentDiv = document.querySelector(`.comment[data-comment-id="${commentId}"]`);
|
||||
if (commentDiv) {
|
||||
commentDiv.classList.toggle('collapsed');
|
||||
}
|
||||
}
|
||||
|
||||
// Expose functions globally
|
||||
window.editComment = editComment;
|
||||
window.saveEditComment = saveEditComment;
|
||||
window.cancelEditComment = cancelEditComment;
|
||||
window.deleteComment = deleteComment;
|
||||
window.showReplyForm = showReplyForm;
|
||||
window.closeReplyForm = closeReplyForm;
|
||||
window.submitReply = submitReply;
|
||||
window.toggleThreadCollapse = toggleThreadCollapse;
|
||||
|
||||
Reference in New Issue
Block a user