diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php index ed64419e..23bf3fd2 100644 --- a/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php +++ b/Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php @@ -23,6 +23,7 @@ @endphp +
- -
@@ -904,25 +903,26 @@ return span.innerHTML; } - document.addEventListener('DOMContentLoaded', function () { + initialiseHelpdeskTicketShowInteractions(); + document.addEventListener('DOMContentLoaded', initialiseHelpdeskTicketShowInteractions); + document.addEventListener('livewire:navigated', initialiseHelpdeskTicketShowInteractions); + document.addEventListener('livewire:init', initialiseHelpdeskTicketShowInteractions); + + function initialiseHelpdeskTicketShowInteractions() { document.querySelectorAll('[data-helpdesk-rich-editor]').forEach((editor) => syncRichEditor(editor)); updateCommentToggleButtons(); initialiseHelpdeskSidebarCards(); - }); - - + } function initialiseHelpdeskSidebarCards() { const sidebar = document.querySelector('[data-helpdesk-sidebar-cards]'); - if (!sidebar || sidebar.dataset.helpdeskSidebarInitialised === 'true') { + if (!sidebar) { return; } - sidebar.dataset.helpdeskSidebarInitialised = 'true'; - Array.from(sidebar.children).forEach((card) => { - if (!(card instanceof HTMLElement) || card.tagName.toLowerCase() === 'details') { + if (!(card instanceof HTMLElement)) { return; } @@ -932,32 +932,60 @@ return; } - const details = document.createElement('details'); - details.className = card.className; - details.dataset.helpdeskSidebarCard = 'true'; - details.open = false; + card.dataset.helpdeskSidebarCard = 'true'; + card.dataset.open = card.dataset.open || 'false'; + header.dataset.helpdeskSidebarCardHeader = 'true'; + header.setAttribute('role', 'button'); + header.setAttribute('tabindex', '0'); + header.setAttribute('aria-expanded', card.dataset.open === 'true' ? 'true' : 'false'); + }); - const summary = document.createElement('summary'); - summary.className = 'cursor-pointer list-none marker:hidden'; - header.classList.add('relative', 'pr-10'); + if (sidebar.dataset.helpdeskSidebarInitialised === 'true') { + return; + } - const chevron = document.createElement('span'); - chevron.className = 'pointer-events-none absolute right-4 top-1/2 -translate-y-1/2 text-white/80 transition group-open:rotate-180'; - chevron.innerHTML = ''; - header.appendChild(chevron); - summary.appendChild(header); + sidebar.dataset.helpdeskSidebarInitialised = 'true'; - const body = document.createElement('div'); - body.className = 'pt-4'; + sidebar.addEventListener('click', function (event) { + const header = event.target.closest('[data-helpdesk-sidebar-card-header]'); - while (card.firstChild) { - body.appendChild(card.firstChild); + if (!header || !sidebar.contains(header)) { + return; } - details.appendChild(summary); - details.appendChild(body); - card.replaceWith(details); + if (event.target.closest('a, button, input, select, textarea, label, dialog')) { + return; + } + + toggleHelpdeskSidebarCard(header); }); + + sidebar.addEventListener('keydown', function (event) { + if (!['Enter', ' '].includes(event.key)) { + return; + } + + const header = event.target.closest('[data-helpdesk-sidebar-card-header]'); + + if (!header || !sidebar.contains(header)) { + return; + } + + event.preventDefault(); + toggleHelpdeskSidebarCard(header); + }); + } + + function toggleHelpdeskSidebarCard(header) { + const card = header.closest('[data-helpdesk-sidebar-card]'); + + if (!card) { + return; + } + + const isOpen = card.dataset.open === 'true'; + card.dataset.open = isOpen ? 'false' : 'true'; + header.setAttribute('aria-expanded', isOpen ? 'false' : 'true'); } function wrapSelection(textarea, before, after) { diff --git a/Modules/Helpdesk/Tests/Feature/TicketSidebarCardsExpandableFilesTest.php b/Modules/Helpdesk/Tests/Feature/TicketSidebarCardsExpandableFilesTest.php new file mode 100644 index 00000000..26787e92 --- /dev/null +++ b/Modules/Helpdesk/Tests/Feature/TicketSidebarCardsExpandableFilesTest.php @@ -0,0 +1,43 @@ +'), + strpos($view, '