ui updates for ticket layout

This commit is contained in:
Mark Gregory
2026-06-17 13:15:55 +01:00
parent 0b4c821187
commit a87c9762c9
8 changed files with 202 additions and 84 deletions
@@ -254,11 +254,11 @@
This board is being initialised with the default workflow statuses. Refresh the page if the columns do not appear immediately.
</div>
@else
<div class="flex gap-4 overflow-x-auto pb-4" data-helpdesk-kanban-board>
<div class="flex gap-4 overflow-x-auto pb-4" data-helpdesk-kanban-board wire:key="helpdesk-kanban-board-{{ $board?->id ?? 'none' }}">
@foreach ($statuses as $status)
@php($tickets = $ticketsByStatus[$status->id] ?? collect())
<section class="flex min-h-[640px] w-[330px] shrink-0 flex-col overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-100 shadow-sm dark:border-zinc-700 dark:bg-zinc-950" dusk="kanban-column-{{ $status->slug }}">
<section wire:key="helpdesk-kanban-column-{{ $board?->id }}-{{ $status->id }}" class="flex min-h-[640px] w-[330px] shrink-0 flex-col overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-100 shadow-sm dark:border-zinc-700 dark:bg-zinc-950" dusk="kanban-column-{{ $status->slug }}">
<header class="border-b border-zinc-200 bg-white px-4 py-4 dark:border-zinc-800 dark:bg-zinc-900">
<div class="flex items-start justify-between gap-3">
<div>
@@ -281,6 +281,7 @@
data-helpdesk-kanban-ticket
data-ticket-id="{{ $ticket->id }}"
dusk="kanban-ticket-{{ $ticket->id }}"
wire:key="helpdesk-kanban-ticket-{{ $ticket->id }}-{{ $ticket->status_id }}-{{ optional($ticket->updated_at)->timestamp ?? 0 }}"
>
<div class="flex items-start justify-between gap-3">
<div class="min-w-0">
@@ -409,7 +410,9 @@
if (!ticketId || !statusId) return;
$wire.moveTicket(ticketId, statusId);
$wire.moveTicket(ticketId, statusId).then(function () {
initialiseHelpdeskKanban();
});
});
});
};
@@ -417,6 +420,8 @@
initialiseHelpdeskKanban();
document.addEventListener('livewire:navigated', initialiseHelpdeskKanban);
document.addEventListener('livewire:updated', initialiseHelpdeskKanban);
document.addEventListener('livewire:update', initialiseHelpdeskKanban);
document.addEventListener('helpdesk-kanban-ticket-moved', initialiseHelpdeskKanban);
</script>
@endscript
</div>