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

Fix reply: dynamically add to DOM instead of page reload

Browse Source
This commit is contained in:
Jared Vititoe
2026-01-30 23:54:42 -05:00
parent 651c8115f6
commit 3ceea77fe1
1 changed files with 61 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
assets/js/ticket.js
View File

@@ -1232,7 +1232,6 @@ document.addEventListener('DOMContentLoaded', function() {
if (!target) return;
const action = target.dataset.action;
console.log('Action clicked:', action, 'Target:', target);
switch (action) {
case 'remove-dependency':
removeDependency(target.dataset.dependencyId);
@@ -1464,13 +1463,10 @@ function deleteComment(commentId) {
* Show reply form for a comment
*/
function showReplyForm(commentId, userName) {
console.log('showReplyForm called:', 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}"]`);
console.log('commentDiv found:', commentDiv);
if (!commentDiv) return;
const replyFormHtml = `
@@ -1549,10 +1545,68 @@ function submitReply(parentCommentId) {
// Close the reply form
closeReplyForm();
// Reload page to show the new threaded comment properly
// (Threading requires proper hierarchical rendering)
// Dynamically add the reply to the DOM
const parentComment = document.querySelector(`.comment[data-comment-id="${parentCommentId}"]`);
if (parentComment) {
// Get or create replies container
let repliesContainer = parentComment.querySelector('.comment-replies');
if (!repliesContainer) {
repliesContainer = document.createElement('div');
repliesContainer.className = 'comment-replies';
parentComment.appendChild(repliesContainer);
}
// Get parent's thread depth
const parentDepth = parseInt(parentComment.dataset.threadDepth) || 0;
const newDepth = Math.min(parentDepth + 1, 3);
// Format the comment text for display
let displayText;
if (isMarkdownEnabled) {
displayText = typeof parseMarkdown === 'function' ? parseMarkdown(commentText) : commentText;
} else {
displayText = commentText
.replace(/&/g, '&')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;')
.replace(/\n/g, '<br>');
}
// Create the new reply element
const replyDiv = document.createElement('div');
replyDiv.className = `comment thread-depth-${newDepth} comment-reply`;
replyDiv.dataset.commentId = data.comment_id;
replyDiv.dataset.markdownEnabled = isMarkdownEnabled ? '1' : '0';
replyDiv.dataset.threadDepth = newDepth;
replyDiv.dataset.parentId = parentCommentId;
replyDiv.innerHTML = `
<div class="thread-line"></div>
<div class="comment-content">
<div class="comment-header">
<span class="comment-user">${data.user_name}</span>
<span class="comment-date">${data.created_at}</span>
<div class="comment-actions">
${newDepth < 3 ? `<button type="button" class="comment-action-btn reply-btn" data-action="reply-comment" data-comment-id="${data.comment_id}" data-user="${data.user_name}" title="Reply">↩</button>` : ''}
<button type="button" class="comment-action-btn edit-btn" data-action="edit-comment" data-comment-id="${data.comment_id}" title="Edit">✏️</button>
<button type="button" class="comment-action-btn delete-btn" data-action="delete-comment" data-comment-id="${data.comment_id}" title="Delete">🗑️</button>
</div>
</div>
<div class="comment-text" id="comment-text-${data.comment_id}" ${isMarkdownEnabled ? 'data-markdown' : ''}>
${displayText}
</div>
<textarea class="comment-edit-raw" id="comment-raw-${data.comment_id}" style="display:none;">${commentText.replace(/</g, '&lt;').replace(/>/g, '&gt;')}</textarea>
</div>
`;
// Add animation
replyDiv.style.animation = 'fadeIn 0.3s ease';
repliesContainer.appendChild(replyDiv);
}
showToast('Reply added successfully', 'success');
setTimeout(() => window.location.reload(), 500);
} else {
showToast(data.error || 'Failed to add reply', 'error');
}