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:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user