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:
@@ -160,6 +160,215 @@ body::after {
|
||||
100% { content: '10101010'; opacity: 0.1; }
|
||||
}
|
||||
|
||||
/* ===== ENHANCED TERMINAL ANIMATIONS ===== */
|
||||
|
||||
/* Typing cursor effect for focused inputs */
|
||||
input:focus::placeholder,
|
||||
textarea:focus::placeholder {
|
||||
animation: typing-cursor 1s steps(1) infinite;
|
||||
}
|
||||
|
||||
@keyframes typing-cursor {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Glowing border pulse on focus */
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
animation: focus-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes focus-pulse {
|
||||
0%, 100% { box-shadow: var(--glow-amber), inset 0 0 10px rgba(0, 0, 0, 0.5); }
|
||||
50% { box-shadow: var(--glow-amber-intense), inset 0 0 10px rgba(0, 0, 0, 0.5); }
|
||||
}
|
||||
|
||||
/* Boot-up fade in effect */
|
||||
@keyframes boot-up {
|
||||
0% {
|
||||
opacity: 0;
|
||||
filter: brightness(2) saturate(0);
|
||||
}
|
||||
30% {
|
||||
opacity: 1;
|
||||
filter: brightness(1.5) saturate(0.5);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
filter: brightness(1) saturate(1);
|
||||
}
|
||||
}
|
||||
|
||||
.ascii-frame-outer {
|
||||
animation: boot-up 0.8s ease-out;
|
||||
}
|
||||
|
||||
/* Phosphor text glow on important elements */
|
||||
.stat-value,
|
||||
.ticket-id,
|
||||
h1, h2, h3 {
|
||||
text-shadow: 0 0 2px currentColor, 0 0 4px currentColor;
|
||||
}
|
||||
|
||||
/* Enhanced link hover with underline animation */
|
||||
a:not(.btn) {
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not(.btn)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
box-shadow: 0 0 5px currentColor;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
a:not(.btn):hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Matrix-style rain effect on hover for stats */
|
||||
.stat-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(180deg,
|
||||
transparent 0%,
|
||||
rgba(0, 255, 65, 0.03) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 100% 200%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.stat-card:hover::before {
|
||||
opacity: 1;
|
||||
animation: matrix-rain 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes matrix-rain {
|
||||
0% { background-position: 0 -100%; }
|
||||
100% { background-position: 0 100%; }
|
||||
}
|
||||
|
||||
/* Smooth table row selection animation */
|
||||
tbody tr {
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
tbody tr::before {
|
||||
content: '>';
|
||||
position: absolute;
|
||||
left: -20px;
|
||||
opacity: 0;
|
||||
color: var(--terminal-green);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
tbody tr:hover::before {
|
||||
opacity: 1;
|
||||
left: -15px;
|
||||
}
|
||||
|
||||
/* Button press effect */
|
||||
.btn {
|
||||
transition: all 0.15s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.4s, height 0.4s;
|
||||
}
|
||||
|
||||
.btn:active::before {
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Terminal cursor blink for active/selected elements */
|
||||
.keyboard-selected td:first-child::before {
|
||||
content: '█';
|
||||
position: absolute;
|
||||
left: -25px;
|
||||
animation: cursor-blink 0.8s steps(1) infinite;
|
||||
color: var(--terminal-green);
|
||||
}
|
||||
|
||||
@keyframes cursor-blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* Neon glow effect for priority badges */
|
||||
.priority-badge {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.priority-badge::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: inherit;
|
||||
background: inherit;
|
||||
filter: blur(6px);
|
||||
opacity: 0.4;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Smooth scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--bg-primary);
|
||||
border: 1px solid var(--terminal-green);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--terminal-green);
|
||||
box-shadow: 0 0 5px var(--terminal-green);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--terminal-amber);
|
||||
box-shadow: 0 0 10px var(--terminal-amber);
|
||||
}
|
||||
|
||||
/* Firefox scrollbar */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--terminal-green) var(--bg-primary);
|
||||
}
|
||||
|
||||
body.menu-open {
|
||||
padding-left: 260px;
|
||||
}
|
||||
@@ -711,6 +920,148 @@ h1 {
|
||||
100% { content: '|]'; }
|
||||
}
|
||||
|
||||
/* ===== SKELETON LOADING SCREENS ===== */
|
||||
.skeleton {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(0, 255, 65, 0.05) 0%,
|
||||
rgba(0, 255, 65, 0.1) 50%,
|
||||
rgba(0, 255, 65, 0.05) 100%
|
||||
);
|
||||
background-size: 200% 100%;
|
||||
animation: skeleton-shimmer 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes skeleton-shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
/* Skeleton text line */
|
||||
.skeleton-text {
|
||||
height: 1em;
|
||||
margin: 0.5em 0;
|
||||
border-radius: 0;
|
||||
border: 1px solid rgba(0, 255, 65, 0.2);
|
||||
}
|
||||
|
||||
.skeleton-text.short { width: 40%; }
|
||||
.skeleton-text.medium { width: 70%; }
|
||||
.skeleton-text.long { width: 90%; }
|
||||
|
||||
/* Skeleton table row */
|
||||
.skeleton-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 8px;
|
||||
border-bottom: 1px solid rgba(0, 255, 65, 0.1);
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.skeleton-row .skeleton-cell {
|
||||
height: 1.2em;
|
||||
flex: 1;
|
||||
border: 1px solid rgba(0, 255, 65, 0.15);
|
||||
}
|
||||
|
||||
.skeleton-row .skeleton-cell:first-child { flex: 0 0 100px; }
|
||||
.skeleton-row .skeleton-cell:nth-child(2) { flex: 0 0 60px; }
|
||||
.skeleton-row .skeleton-cell:nth-child(3) { flex: 3; }
|
||||
|
||||
/* Skeleton stat card */
|
||||
.skeleton-stat {
|
||||
padding: 1rem;
|
||||
border: 2px solid rgba(0, 255, 65, 0.2);
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.skeleton-stat .skeleton-value {
|
||||
height: 2rem;
|
||||
width: 60%;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.skeleton-stat .skeleton-label {
|
||||
height: 1rem;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
/* Skeleton comment */
|
||||
.skeleton-comment {
|
||||
padding: 1rem;
|
||||
border: 1px solid rgba(0, 255, 65, 0.2);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.skeleton-comment-header {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.skeleton-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 0;
|
||||
border: 1px solid rgba(0, 255, 65, 0.2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.skeleton-comment-meta {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Terminal-style loading indicator */
|
||||
.loading-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 10, 2, 0.9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
font-family: var(--font-mono);
|
||||
color: var(--terminal-green);
|
||||
}
|
||||
|
||||
.loading-overlay .loading-text {
|
||||
margin-top: 1rem;
|
||||
animation: blink-cursor 1s step-end infinite;
|
||||
}
|
||||
|
||||
.loading-overlay .loading-spinner {
|
||||
font-size: 2rem;
|
||||
animation: terminal-spin 0.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes terminal-spin {
|
||||
0% { content: '⠋'; }
|
||||
10% { content: '⠙'; }
|
||||
20% { content: '⠹'; }
|
||||
30% { content: '⠸'; }
|
||||
40% { content: '⠼'; }
|
||||
50% { content: '⠴'; }
|
||||
60% { content: '⠦'; }
|
||||
70% { content: '⠧'; }
|
||||
80% { content: '⠇'; }
|
||||
90% { content: '⠏'; }
|
||||
}
|
||||
|
||||
.loading-spinner::before {
|
||||
content: '⠋';
|
||||
animation: terminal-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes blink-cursor {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
/* ===== MESSAGE STYLES ===== */
|
||||
.error-message {
|
||||
padding: 15px 20px;
|
||||
@@ -3324,19 +3675,59 @@ tr:hover .quick-actions {
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-secondary);
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(0, 255, 65, 0.03) 100%);
|
||||
border: 2px solid var(--terminal-green);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Corner accent */
|
||||
.stat-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: linear-gradient(135deg, transparent 50%, rgba(0, 255, 65, 0.1) 50%);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
border-color: var(--terminal-amber);
|
||||
box-shadow: var(--glow-amber);
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 176, 0, 0.05) 100%);
|
||||
}
|
||||
|
||||
.stat-card:hover::after {
|
||||
background: linear-gradient(135deg, transparent 50%, rgba(255, 176, 0, 0.15) 50%);
|
||||
}
|
||||
|
||||
/* Critical stat card styling */
|
||||
.stat-card.stat-critical {
|
||||
border-color: var(--priority-1);
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 77, 77, 0.08) 100%);
|
||||
}
|
||||
|
||||
.stat-card.stat-critical .stat-value {
|
||||
color: var(--priority-1);
|
||||
text-shadow: var(--glow-priority-1);
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.stat-card.stat-critical::after {
|
||||
background: linear-gradient(135deg, transparent 50%, rgba(255, 77, 77, 0.15) 50%);
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
font-size: 1.5rem;
|
||||
opacity: 0.9;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.stat-card:hover .stat-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
|
||||
@@ -372,6 +372,29 @@ textarea[data-field="description"]:not(:disabled)::after {
|
||||
50% { box-shadow: 0 0 20px rgba(255, 77, 77, 0.8); }
|
||||
}
|
||||
|
||||
/* Tab transition animations */
|
||||
@keyframes tab-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tab-slide-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.ticket-age .age-icon {
|
||||
font-size: 1rem;
|
||||
}
|
||||
@@ -601,13 +624,37 @@ textarea.editable {
|
||||
}
|
||||
|
||||
.comment {
|
||||
background: var(--bg-primary);
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(0, 255, 65, 0.02) 100%);
|
||||
padding: 15px;
|
||||
border: 1px solid var(--terminal-green);
|
||||
border-radius: 0;
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
box-shadow: none;
|
||||
transition: all 0.3s ease;
|
||||
animation: comment-appear 0.4s ease-out;
|
||||
}
|
||||
|
||||
@keyframes comment-appear {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.comment:hover {
|
||||
border-color: var(--terminal-amber);
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(255, 176, 0, 0.03) 100%);
|
||||
box-shadow: 0 0 15px rgba(0, 255, 65, 0.1);
|
||||
}
|
||||
|
||||
.comment:hover::before,
|
||||
.comment:hover::after {
|
||||
color: var(--terminal-amber);
|
||||
}
|
||||
|
||||
/* Add corner decorations to individual comments */
|
||||
@@ -802,6 +849,182 @@ textarea.editable {
|
||||
min-height: auto !important;
|
||||
}
|
||||
|
||||
/* ===== COMMENT THREADING STYLES ===== */
|
||||
|
||||
/* Thread depth indentation */
|
||||
.comment.thread-depth-1 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.comment.thread-depth-2 {
|
||||
margin-left: 4rem;
|
||||
}
|
||||
|
||||
.comment.thread-depth-3 {
|
||||
margin-left: 6rem;
|
||||
}
|
||||
|
||||
/* Reply styling */
|
||||
.comment.comment-reply {
|
||||
position: relative;
|
||||
border-left: 2px solid var(--terminal-green-dim);
|
||||
margin-top: 0.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.comment.comment-reply::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Thread connector line */
|
||||
.comment .thread-line {
|
||||
position: absolute;
|
||||
left: -1rem;
|
||||
top: 0;
|
||||
width: 0.75rem;
|
||||
height: 1rem;
|
||||
border-left: 2px solid var(--terminal-green-dim);
|
||||
border-bottom: 2px solid var(--terminal-green-dim);
|
||||
}
|
||||
|
||||
/* Comment content wrapper for threading */
|
||||
.comment .comment-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Replies container */
|
||||
.comment-replies {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Reply button styling */
|
||||
.comment-action-btn.reply-btn {
|
||||
color: var(--terminal-green);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.comment-action-btn.reply-btn:hover {
|
||||
color: var(--terminal-cyan);
|
||||
border-color: var(--terminal-cyan);
|
||||
}
|
||||
|
||||
/* Reply form inline */
|
||||
.reply-form-container {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(0, 255, 65, 0.03);
|
||||
border: 1px dashed var(--terminal-green);
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.reply-form-container .reply-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--terminal-green);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.reply-form-container .reply-header .replying-to {
|
||||
color: var(--terminal-amber);
|
||||
}
|
||||
|
||||
.reply-form-container .close-reply-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--terminal-red);
|
||||
color: var(--terminal-red);
|
||||
padding: 0.25rem 0.5rem;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.reply-form-container .close-reply-btn:hover {
|
||||
background: rgba(255, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.reply-form-container textarea {
|
||||
width: 100%;
|
||||
min-height: 80px;
|
||||
padding: 0.75rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--terminal-green);
|
||||
color: var(--terminal-green);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.9rem;
|
||||
resize: vertical;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.reply-form-container textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--terminal-amber);
|
||||
box-shadow: 0 0 10px rgba(255, 176, 0, 0.3);
|
||||
}
|
||||
|
||||
.reply-form-container .reply-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.reply-form-container .reply-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* Quote block in replies */
|
||||
.comment-text blockquote {
|
||||
border-left: 3px solid var(--terminal-green-dim);
|
||||
padding-left: 1rem;
|
||||
margin: 0.5rem 0;
|
||||
color: var(--terminal-green-dim);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Thread collapse indicator */
|
||||
.thread-collapse-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--terminal-green-dim);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.8rem;
|
||||
padding: 0.25rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.thread-collapse-btn:hover {
|
||||
color: var(--terminal-green);
|
||||
}
|
||||
|
||||
.comment.collapsed .comment-replies {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.comment.collapsed .thread-collapse-btn::after {
|
||||
content: ' [+]';
|
||||
}
|
||||
|
||||
.comment:not(.collapsed) .thread-collapse-btn::after {
|
||||
content: ' [-]';
|
||||
}
|
||||
|
||||
/* ===== END COMMENT THREADING STYLES ===== */
|
||||
|
||||
/* Comment Tabs - TERMINAL STYLE */
|
||||
.ticket-tabs {
|
||||
display: flex;
|
||||
@@ -857,6 +1080,7 @@ textarea.editable {
|
||||
.tab-content {
|
||||
display: none;
|
||||
padding: 20px;
|
||||
animation: tab-fade-in 0.3s ease-out;
|
||||
border: 2px solid var(--terminal-green);
|
||||
border-top: none;
|
||||
background: var(--bg-secondary);
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
19
migrations/002_add_comment_threading.sql
Normal file
19
migrations/002_add_comment_threading.sql
Normal file
@@ -0,0 +1,19 @@
|
||||
-- Migration: Add comment threading support
|
||||
-- Adds parent_comment_id for reply/thread functionality
|
||||
|
||||
-- Add parent_comment_id column for threaded comments
|
||||
ALTER TABLE ticket_comments
|
||||
ADD COLUMN parent_comment_id INT NULL DEFAULT NULL AFTER comment_id;
|
||||
|
||||
-- Add foreign key constraint (self-referencing for thread hierarchy)
|
||||
ALTER TABLE ticket_comments
|
||||
ADD CONSTRAINT fk_parent_comment
|
||||
FOREIGN KEY (parent_comment_id) REFERENCES ticket_comments(comment_id)
|
||||
ON DELETE CASCADE;
|
||||
|
||||
-- Add index for efficient thread retrieval
|
||||
CREATE INDEX idx_parent_comment ON ticket_comments(parent_comment_id);
|
||||
|
||||
-- Add thread_depth column to track nesting level (prevents infinite recursion issues)
|
||||
ALTER TABLE ticket_comments
|
||||
ADD COLUMN thread_depth TINYINT UNSIGNED NOT NULL DEFAULT 0 AFTER parent_comment_id;
|
||||
@@ -50,18 +50,34 @@ class CommentModel {
|
||||
return $users;
|
||||
}
|
||||
|
||||
public function getCommentsByTicketId($ticketId) {
|
||||
public function getCommentsByTicketId($ticketId, $threaded = true) {
|
||||
// Check if threading columns exist
|
||||
$hasThreading = $this->hasThreadingSupport();
|
||||
|
||||
if ($hasThreading) {
|
||||
$sql = "SELECT tc.*, u.display_name, u.username, tc.parent_comment_id, tc.thread_depth
|
||||
FROM ticket_comments tc
|
||||
LEFT JOIN users u ON tc.user_id = u.user_id
|
||||
WHERE tc.ticket_id = ?
|
||||
ORDER BY
|
||||
CASE WHEN tc.parent_comment_id IS NULL THEN tc.created_at END DESC,
|
||||
CASE WHEN tc.parent_comment_id IS NOT NULL THEN tc.created_at END ASC";
|
||||
} else {
|
||||
$sql = "SELECT tc.*, u.display_name, u.username
|
||||
FROM ticket_comments tc
|
||||
LEFT JOIN users u ON tc.user_id = u.user_id
|
||||
WHERE tc.ticket_id = ?
|
||||
ORDER BY tc.created_at DESC";
|
||||
}
|
||||
|
||||
$stmt = $this->conn->prepare($sql);
|
||||
$stmt->bind_param("s", $ticketId); // Changed to string since ticket_id is varchar
|
||||
$stmt->bind_param("s", $ticketId);
|
||||
$stmt->execute();
|
||||
$result = $stmt->get_result();
|
||||
|
||||
$comments = [];
|
||||
$commentMap = [];
|
||||
|
||||
while ($row = $result->fetch_assoc()) {
|
||||
// Use display_name from users table if available, fallback to user_name field
|
||||
if (!empty($row['display_name'])) {
|
||||
@@ -69,25 +85,102 @@ class CommentModel {
|
||||
} else {
|
||||
$row['display_name_formatted'] = $row['user_name'] ?? 'Unknown User';
|
||||
}
|
||||
$comments[] = $row;
|
||||
$row['replies'] = [];
|
||||
$row['parent_comment_id'] = $row['parent_comment_id'] ?? null;
|
||||
$row['thread_depth'] = $row['thread_depth'] ?? 0;
|
||||
$commentMap[$row['comment_id']] = $row;
|
||||
}
|
||||
|
||||
return $comments;
|
||||
// Build threaded structure if threading is enabled
|
||||
if ($hasThreading && $threaded) {
|
||||
$rootComments = [];
|
||||
foreach ($commentMap as $id => $comment) {
|
||||
if ($comment['parent_comment_id'] === null) {
|
||||
$rootComments[] = $this->buildCommentThread($comment, $commentMap);
|
||||
}
|
||||
}
|
||||
return $rootComments;
|
||||
}
|
||||
|
||||
// Flat list
|
||||
return array_values($commentMap);
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if threading columns exist
|
||||
*/
|
||||
private function hasThreadingSupport() {
|
||||
static $hasSupport = null;
|
||||
if ($hasSupport !== null) {
|
||||
return $hasSupport;
|
||||
}
|
||||
|
||||
$result = $this->conn->query("SHOW COLUMNS FROM ticket_comments LIKE 'parent_comment_id'");
|
||||
$hasSupport = ($result && $result->num_rows > 0);
|
||||
return $hasSupport;
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively build comment thread
|
||||
*/
|
||||
private function buildCommentThread($comment, &$allComments) {
|
||||
$comment['replies'] = [];
|
||||
foreach ($allComments as $c) {
|
||||
if ($c['parent_comment_id'] == $comment['comment_id']) {
|
||||
$comment['replies'][] = $this->buildCommentThread($c, $allComments);
|
||||
}
|
||||
}
|
||||
// Sort replies by date ascending
|
||||
usort($comment['replies'], function($a, $b) {
|
||||
return strtotime($a['created_at']) - strtotime($b['created_at']);
|
||||
});
|
||||
return $comment;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get flat list of comments (for backward compatibility)
|
||||
*/
|
||||
public function getCommentsByTicketIdFlat($ticketId) {
|
||||
return $this->getCommentsByTicketId($ticketId, false);
|
||||
}
|
||||
|
||||
public function addComment($ticketId, $commentData, $userId = null) {
|
||||
$sql = "INSERT INTO ticket_comments (ticket_id, user_id, user_name, comment_text, markdown_enabled)
|
||||
VALUES (?, ?, ?, ?, ?)";
|
||||
|
||||
$stmt = $this->conn->prepare($sql);
|
||||
// Check if threading is supported
|
||||
$hasThreading = $this->hasThreadingSupport();
|
||||
|
||||
// Set default username (kept for backward compatibility)
|
||||
$username = $commentData['user_name'] ?? 'User';
|
||||
$markdownEnabled = isset($commentData['markdown_enabled']) && $commentData['markdown_enabled'] ? 1 : 0;
|
||||
|
||||
// Preserve line breaks in the comment text
|
||||
$commentText = $commentData['comment_text'];
|
||||
$parentCommentId = $commentData['parent_comment_id'] ?? null;
|
||||
$threadDepth = 0;
|
||||
|
||||
// Calculate thread depth if replying to a comment
|
||||
if ($hasThreading && $parentCommentId) {
|
||||
$parentComment = $this->getCommentById($parentCommentId);
|
||||
if ($parentComment) {
|
||||
$threadDepth = min(($parentComment['thread_depth'] ?? 0) + 1, 3); // Max depth of 3
|
||||
}
|
||||
}
|
||||
|
||||
if ($hasThreading) {
|
||||
$sql = "INSERT INTO ticket_comments (ticket_id, user_id, user_name, comment_text, markdown_enabled, parent_comment_id, thread_depth)
|
||||
VALUES (?, ?, ?, ?, ?, ?, ?)";
|
||||
$stmt = $this->conn->prepare($sql);
|
||||
$stmt->bind_param(
|
||||
"sissiii",
|
||||
$ticketId,
|
||||
$userId,
|
||||
$username,
|
||||
$commentText,
|
||||
$markdownEnabled,
|
||||
$parentCommentId,
|
||||
$threadDepth
|
||||
);
|
||||
} else {
|
||||
$sql = "INSERT INTO ticket_comments (ticket_id, user_id, user_name, comment_text, markdown_enabled)
|
||||
VALUES (?, ?, ?, ?, ?)";
|
||||
$stmt = $this->conn->prepare($sql);
|
||||
$stmt->bind_param(
|
||||
"sissi",
|
||||
$ticketId,
|
||||
@@ -96,6 +189,7 @@ class CommentModel {
|
||||
$commentText,
|
||||
$markdownEnabled
|
||||
);
|
||||
}
|
||||
|
||||
if ($stmt->execute()) {
|
||||
$commentId = $this->conn->insert_id;
|
||||
@@ -106,7 +200,9 @@ class CommentModel {
|
||||
'user_name' => $username,
|
||||
'created_at' => date('M d, Y H:i'),
|
||||
'markdown_enabled' => $markdownEnabled,
|
||||
'comment_text' => $commentText
|
||||
'comment_text' => $commentText,
|
||||
'parent_comment_id' => $parentCommentId,
|
||||
'thread_depth' => $threadDepth
|
||||
];
|
||||
} else {
|
||||
return [
|
||||
|
||||
@@ -331,43 +331,77 @@ $nonce = SecurityHeadersMiddleware::getNonce();
|
||||
$currentUserId = $GLOBALS['currentUser']['user_id'] ?? null;
|
||||
$isAdmin = $GLOBALS['currentUser']['is_admin'] ?? false;
|
||||
|
||||
foreach ($comments as $comment) {
|
||||
// Use display_name_formatted which falls back appropriately
|
||||
// Recursive function to render threaded comments
|
||||
function renderComment($comment, $currentUserId, $isAdmin, $depth = 0) {
|
||||
$displayName = $comment['display_name_formatted'] ?? $comment['user_name'] ?? 'Unknown User';
|
||||
$commentId = $comment['comment_id'];
|
||||
$isOwner = ($comment['user_id'] == $currentUserId);
|
||||
$canModify = $isOwner || $isAdmin;
|
||||
$markdownEnabled = $comment['markdown_enabled'] ? 1 : 0;
|
||||
$threadDepth = $comment['thread_depth'] ?? $depth;
|
||||
$parentId = $comment['parent_comment_id'] ?? null;
|
||||
|
||||
echo "<div class='comment' data-comment-id='{$commentId}' data-markdown-enabled='{$markdownEnabled}'>";
|
||||
$depthClass = 'thread-depth-' . min($threadDepth, 3);
|
||||
$threadClass = $parentId ? 'comment-reply' : 'comment-root';
|
||||
|
||||
echo "<div class='comment {$depthClass} {$threadClass}' data-comment-id='{$commentId}' data-markdown-enabled='{$markdownEnabled}' data-thread-depth='{$threadDepth}' data-parent-id='" . ($parentId ?? '') . "'>";
|
||||
|
||||
// Thread connector line for replies
|
||||
if ($parentId) {
|
||||
echo "<div class='thread-line'></div>";
|
||||
}
|
||||
|
||||
echo "<div class='comment-content'>";
|
||||
echo "<div class='comment-header'>";
|
||||
echo "<span class='comment-user'>" . htmlspecialchars($displayName) . "</span>";
|
||||
$dateStr = date('M d, Y H:i', strtotime($comment['created_at']));
|
||||
$editedIndicator = !empty($comment['updated_at']) ? ' <span class="comment-edited">(edited)</span>' : '';
|
||||
echo "<span class='comment-date'>{$dateStr}{$editedIndicator}</span>";
|
||||
|
||||
// Action buttons
|
||||
echo "<div class='comment-actions'>";
|
||||
// Reply button (max depth of 3)
|
||||
if ($threadDepth < 3) {
|
||||
echo "<button type='button' class='comment-action-btn reply-btn' data-action='reply-comment' data-comment-id='{$commentId}' data-user='" . htmlspecialchars($displayName) . "' title='Reply'>↩</button>";
|
||||
}
|
||||
// Edit/Delete buttons for owner or admin
|
||||
if ($canModify) {
|
||||
echo "<div class='comment-actions'>";
|
||||
echo "<button type='button' class='comment-action-btn edit-btn' data-action='edit-comment' data-comment-id='{$commentId}' title='Edit comment'>✏️</button>";
|
||||
echo "<button type='button' class='comment-action-btn delete-btn' data-action='delete-comment' data-comment-id='{$commentId}' title='Delete comment'>🗑️</button>";
|
||||
echo "</div>";
|
||||
echo "<button type='button' class='comment-action-btn edit-btn' data-action='edit-comment' data-comment-id='{$commentId}' title='Edit'>✏️</button>";
|
||||
echo "<button type='button' class='comment-action-btn delete-btn' data-action='delete-comment' data-comment-id='{$commentId}' title='Delete'>🗑️</button>";
|
||||
}
|
||||
|
||||
echo "</div>";
|
||||
|
||||
echo "</div>"; // .comment-header
|
||||
|
||||
echo "<div class='comment-text' id='comment-text-{$commentId}' " . ($comment['markdown_enabled'] ? "data-markdown" : "") . ">";
|
||||
if ($comment['markdown_enabled']) {
|
||||
// Markdown will be rendered by JavaScript
|
||||
echo htmlspecialchars($comment['comment_text']);
|
||||
} else {
|
||||
// For non-markdown comments, convert line breaks to <br> and escape HTML
|
||||
echo nl2br(htmlspecialchars($comment['comment_text']));
|
||||
}
|
||||
echo "</div>";
|
||||
|
||||
// Hidden raw text for editing
|
||||
echo "<textarea class='comment-edit-raw' id='comment-raw-{$commentId}' style='display:none;'>" . htmlspecialchars($comment['comment_text']) . "</textarea>";
|
||||
|
||||
echo "</div>"; // .comment-content
|
||||
|
||||
// Render replies recursively
|
||||
if (!empty($comment['replies'])) {
|
||||
echo "<div class='comment-replies'>";
|
||||
foreach ($comment['replies'] as $reply) {
|
||||
renderComment($reply, $currentUserId, $isAdmin, $threadDepth + 1);
|
||||
}
|
||||
echo "</div>";
|
||||
}
|
||||
|
||||
echo "</div>"; // .comment
|
||||
}
|
||||
|
||||
// Render all comments
|
||||
foreach ($comments as $comment) {
|
||||
renderComment($comment, $currentUserId, $isAdmin);
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user