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;
}