workign comments strucuture

This commit is contained in:
Mark Gregory
2026-06-17 10:16:37 +01:00
parent fe05ef8104
commit fd193a5047
2 changed files with 23 additions and 6 deletions
@@ -98,10 +98,16 @@
<div class="grid gap-3 md:grid-cols-[1fr_auto]">
<label class="sr-only" for="helpdesk-comment-search">Search comments</label>
<input id="helpdesk-comment-search" type="search" placeholder="Search comments, GUID, UNID, author or text..." class="block w-full rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm focus:border-red-500 focus:ring-red-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-helpdesk-comment-search>
<button type="button" class="inline-flex items-center justify-center rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-red-700" data-helpdesk-expand-comments>
<i class="fa-solid fa-up-right-and-down-left-from-center mr-2" aria-hidden="true"></i>
Expand all
</button>
<div class="flex flex-wrap items-center gap-2">
<button type="button" class="inline-flex items-center justify-center rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-red-700" data-helpdesk-expand-comments>
<i class="fa-solid fa-up-right-and-down-left-from-center mr-2" aria-hidden="true"></i>
Expand all
</button>
<button type="button" class="inline-flex items-center justify-center rounded-xl bg-slate-700 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-slate-800 dark:bg-slate-600 dark:hover:bg-slate-500" data-helpdesk-collapse-comments>
<i class="fa-solid fa-down-left-and-up-right-to-center mr-2" aria-hidden="true"></i>
Collapse all
</button>
</div>
</div>
@if ($ticket->comments->isNotEmpty())
@@ -228,7 +234,18 @@
const expandButton = event.target.closest('[data-helpdesk-expand-comments]');
if (expandButton) {
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => card.open = true);
document.querySelectorAll('[data-helpdesk-comments-shell], [data-helpdesk-comment-card]').forEach((card) => {
card.open = true;
});
return;
}
const collapseButton = event.target.closest('[data-helpdesk-collapse-comments]');
if (collapseButton) {
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
card.open = false;
});
return;
}
@@ -15,7 +15,7 @@
@endphp
@if (! $isInternal || $canSeeInternalNotes)
<details open class="group rounded-2xl border {{ $borderClass }} bg-white shadow-sm transition dark:bg-zinc-900" data-helpdesk-comment-card data-helpdesk-comment-text="{{ e(Str::lower(strip_tags((string) $comment->body).' '.($comment->body_text ?? '').' '.($commentUser?->name ?? '').' '.($comment->unid ?? '').' '.($comment->guid ?? ''))) }}" style="margin-left: {{ min((int) $level, 4) * 1.25 }}rem">
<details class="group rounded-2xl border {{ $borderClass }} bg-white shadow-sm transition dark:bg-zinc-900" data-helpdesk-comment-card data-helpdesk-comment-text="{{ e(Str::lower(strip_tags((string) $comment->body).' '.($comment->body_text ?? '').' '.($commentUser?->name ?? '').' '.($comment->unid ?? '').' '.($comment->guid ?? ''))) }}" style="margin-left: {{ min((int) $level, 4) * 1.25 }}rem">
<summary class="flex cursor-pointer list-none items-start gap-3 rounded-2xl p-4 marker:hidden">
<span class="mt-1 inline-flex h-12 w-2 shrink-0 rounded-full {{ $railClass }}" aria-hidden="true"></span>