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>
2026-01-30 23:43:36 -05:00
parent 1c1eb19876
commit a8738fdf57
9 changed files with 1081 additions and 46 deletions
--- a/assets/js/advanced-search.js
+++ b/assets/js/advanced-search.js
@@ -35,7 +35,9 @@ function closeOnAdvancedSearchBackdropClick(event) {
 // Load users for dropdown
 async function loadUsersForSearch() {
    try {
-        const response = await fetch('/api/get_users.php');
+        const response = await fetch('/api/get_users.php', {
+            credentials: 'same-origin'
+        });
        const data = await response.json();

        if (data.success && data.users) {
@@ -163,6 +165,7 @@ async function saveCurrentFilter() {
            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
@@ -230,7 +233,9 @@ function getCurrentFilterCriteria() {
 // Load saved filters
 async function loadSavedFilters() {
    try {
-        const response = await fetch('/api/saved_filters.php');
+        const response = await fetch('/api/saved_filters.php', {
+            credentials: 'same-origin'
+        });
        const data = await response.json();

        if (data.success && data.filters) {
@@ -326,6 +331,7 @@ async function deleteSavedFilter() {
            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
--- a/assets/js/dashboard.js
+++ b/assets/js/dashboard.js
@@ -539,6 +539,7 @@ function quickSave() {
    
    fetch('/api/update_ticket.php', {
        method: 'POST',
+        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
@@ -607,6 +608,7 @@ function saveTicket() {

    fetch('/api/update_ticket.php', {
        method: 'POST',
+        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
@@ -645,7 +647,9 @@ function loadTemplate() {
    }

    // Fetch template data
-    fetch(`/api/get_template.php?template_id=${templateId}`)
+    fetch(`/api/get_template.php?template_id=${templateId}`, {
+        credentials: 'same-origin'
+    })
        .then(response => {
            if (!response.ok) {
                throw new Error('Failed to fetch template');
@@ -776,6 +780,7 @@ function performBulkCloseAction(ticketIds) {

    fetch('/api/bulk_operation.php', {
        method: 'POST',
+        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
@@ -848,7 +853,9 @@ function showBulkAssignModal() {
    document.body.insertAdjacentHTML('beforeend', modalHtml);

    // Fetch users for the dropdown
-    fetch('/api/get_users.php')
+    fetch('/api/get_users.php', {
+        credentials: 'same-origin'
+    })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.users) {
@@ -884,6 +891,7 @@ function performBulkAssign() {

    fetch('/api/bulk_operation.php', {
        method: 'POST',
+        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
@@ -979,6 +987,7 @@ function performBulkPriority() {

    fetch('/api/bulk_operation.php', {
        method: 'POST',
+        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
@@ -1113,6 +1122,7 @@ function performBulkStatusChange() {

    fetch('/api/bulk_operation.php', {
        method: 'POST',
+        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
@@ -1201,6 +1211,7 @@ function performBulkDelete() {

    fetch('/api/bulk_operation.php', {
        method: 'POST',
+        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
@@ -1474,6 +1485,7 @@ function performQuickStatusChange(ticketId) {

    fetch('/api/update_ticket.php', {
        method: 'POST',
+        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
@@ -1539,7 +1551,9 @@ function quickAssign(ticketId) {
    document.body.insertAdjacentHTML('beforeend', modalHtml);

    // Load users
-    fetch('/api/get_users.php')
+    fetch('/api/get_users.php', {
+        credentials: 'same-origin'
+    })
        .then(response => response.json())
        .then(data => {
            if (data.success && data.users) {
@@ -1565,6 +1579,7 @@ function performQuickAssign(ticketId) {

    fetch('/api/assign_ticket.php', {
        method: 'POST',
+        credentials: 'same-origin',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': window.CSRF_TOKEN
@@ -1859,3 +1874,108 @@ function exportSelectedTickets(format) {
    const dropdown = document.getElementById('exportDropdown');
    if (dropdown) dropdown.classList.remove('open');
 }
+
+// ========================================
+// Skeleton Loading Helpers
+// ========================================
+
+/**
+ * Generate skeleton table rows
+ */
+function generateSkeletonRows(count = 5) {
+    let html = '';
+    for (let i = 0; i < count; i++) {
+        html += `
+            <tr class="skeleton-row-tr">
+                <td><div class="skeleton skeleton-text" style="width: 80px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 40px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: ${70 + Math.random() * 30}%;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 60px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 50px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 70px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 80px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 80px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 70px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 70px;"></div></td>
+                <td><div class="skeleton skeleton-text" style="width: 60px;"></div></td>
+            </tr>
+        `;
+    }
+    return html;
+}
+
+/**
+ * Generate skeleton comments
+ */
+function generateSkeletonComments(count = 3) {
+    let html = '';
+    for (let i = 0; i < count; i++) {
+        html += `
+            <div class="skeleton-comment">
+                <div class="skeleton-comment-header">
+                    <div class="skeleton skeleton-avatar"></div>
+                    <div class="skeleton-comment-meta">
+                        <div class="skeleton skeleton-text short"></div>
+                        <div class="skeleton skeleton-text" style="width: 100px;"></div>
+                    </div>
+                </div>
+                <div class="skeleton skeleton-text long"></div>
+                <div class="skeleton skeleton-text medium"></div>
+                <div class="skeleton skeleton-text short"></div>
+            </div>
+        `;
+    }
+    return html;
+}
+
+/**
+ * Generate skeleton stat cards
+ */
+function generateSkeletonStats(count = 4) {
+    let html = '';
+    for (let i = 0; i < count; i++) {
+        html += `
+            <div class="skeleton-stat skeleton">
+                <div class="skeleton skeleton-value"></div>
+                <div class="skeleton skeleton-label"></div>
+            </div>
+        `;
+    }
+    return html;
+}
+
+/**
+ * Show loading overlay on element
+ */
+function showLoadingOverlay(element, message = 'Loading...') {
+    // Remove existing overlay
+    const existing = element.querySelector('.loading-overlay');
+    if (existing) existing.remove();
+
+    const overlay = document.createElement('div');
+    overlay.className = 'loading-overlay';
+    overlay.innerHTML = `
+        <div class="loading-spinner"></div>
+        <div class="loading-text">${message}</div>
+    `;
+    element.style.position = 'relative';
+    element.appendChild(overlay);
+}
+
+/**
+ * Hide loading overlay
+ */
+function hideLoadingOverlay(element) {
+    const overlay = element.querySelector('.loading-overlay');
+    if (overlay) {
+        overlay.style.opacity = '0';
+        overlay.style.transition = 'opacity 0.3s';
+        setTimeout(() => overlay.remove(), 300);
+    }
+}
+
+// Export for use in other scripts
+window.generateSkeletonRows = generateSkeletonRows;
+window.generateSkeletonComments = generateSkeletonComments;
+window.showLoadingOverlay = showLoadingOverlay;
+window.hideLoadingOverlay = hideLoadingOverlay;
--- a/assets/js/settings.js
+++ b/assets/js/settings.js
@@ -8,7 +8,9 @@ let userPreferences = {};
 // Load preferences on page load
 async function loadUserPreferences() {
    try {
-        const response = await fetch('/api/user_preferences.php');
+        const response = await fetch('/api/user_preferences.php', {
+            credentials: 'same-origin'
+        });
        const data = await response.json();
        if (data.success) {
            userPreferences = data.preferences;
@@ -96,6 +98,7 @@ async function saveSettings() {
        for (const [key, value] of Object.entries(prefs)) {
            const response = await fetch('/api/user_preferences.php', {
                method: 'POST',
+                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': window.CSRF_TOKEN
--- a/assets/js/ticket.js
+++ b/assets/js/ticket.js
@@ -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;