mag/WMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed ticket card folding

Browse Source
This commit is contained in:
Mark Gregory
2026-06-24 16:54:48 +01:00
parent 0239f12d45
commit 0ee87279b6
4 changed files with 113 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+57 -29
View File
@@ -23,6 +23,7 @@
@endphp
<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface space-y-4">
<style>
[data-helpdesk-sidebar-cards] > div > :first-child {
cursor: pointer;
@@ -64,8 +65,6 @@
display: block;
}
</style>
<div data-dusk="helpdesk-ticket-show" dusk="helpdesk-ticket-show" class="hd-helpdesk-surface space-y-4">
<div
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-5 py-4 text-white">
@@ -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 = '<i class="fa-solid fa-chevron-down" aria-hidden="true"></i>';
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) {
Modules/Helpdesk/Tests/Feature/TicketSidebarCardsExpandableFilesTest.php
+43
View File
@@ -0,0 +1,43 @@
<?php
declare(strict_types=1);
namespace Modules\Helpdesk\Tests\Feature;
use PHPUnit\Framework\TestCase;
final class TicketSidebarCardsExpandableFilesTest extends TestCase
{
/**
* Ticket show sidebar cards must be expandable after normal page loads and Livewire navigation.
*/
public function test_ticket_show_sidebar_cards_have_livewire_safe_expand_toggle(): void
{
$viewPath = dirname(__DIR__, 2) . '/Resources/views/livewire/ticket-show.blade.php';
$view = file_get_contents($viewPath);
self::assertIsString($view);
self::assertStringContainsString('data-helpdesk-sidebar-cards', $view);
self::assertStringContainsString('data-helpdesk-sidebar-card-header', $view);
self::assertStringContainsString('toggleHelpdeskSidebarCard', $view);
self::assertStringContainsString("document.addEventListener('livewire:navigated', initialiseHelpdeskTicketShowInteractions);", $view);
self::assertStringContainsString("document.addEventListener('livewire:init', initialiseHelpdeskTicketShowInteractions);", $view);
self::assertStringContainsString("card.dataset.open = isOpen ? 'false' : 'true';", $view);
self::assertStringContainsString("header.setAttribute('aria-expanded', isOpen ? 'false' : 'true');", $view);
}
/**
* Inline styles must stay inside the Livewire root element so the component root remains stable.
*/
public function test_ticket_show_does_not_place_style_before_livewire_root(): void
{
$viewPath = dirname(__DIR__, 2) . '/Resources/views/livewire/ticket-show.blade.php';
$view = file_get_contents($viewPath);
self::assertIsString($view);
self::assertLessThan(
strpos($view, '<style>'),
strpos($view, '<div data-dusk="helpdesk-ticket-show"'),
);
}
}
Modules/Helpdesk/changelog.yaml
+12
View File
@@ -491,3 +491,15 @@
- Logged rejected Gitea deliveries against the matched repository after payload parsing so future webhook failures are visible in Helpdesk Git webhook logs.
- Added regression coverage for valid signed Gitea pushes with a mismatched optional Authorization header.
- Preserved append-only changelog history.
- version: 1.10.21
date: 2026-06-24
type: bugfix
summary: Restore expandable right-hand cards on Helpdesk ticket view.
changes:
- Reworked the ticket show right-hand card toggles so Ticket details, SLA metrics, Requester profile, Checklist, Git commits and Ticket controls expand and collapse without depending on a one-time DOMContentLoaded-only conversion.
- Reinitialised ticket show interactions after Livewire navigation and Livewire initialisation so expandable sidebar cards continue working after wire:navigate page visits.
- Moved the ticket show inline sidebar styles inside the Livewire root container to preserve stable Livewire component markup.
- Added file-level regression coverage for Livewire-safe sidebar card expansion behaviour.
- Preserved append-only changelog history.
Modules/Helpdesk/module.json
+1 -1
View File
@@ -23,5 +23,5 @@
"Modules\\Helpdesk\\Providers\\HelpdeskServiceProvider"
],
"files": [],
"version": "1.10.20"
"version": "1.10.21"
}