settings updates
This commit is contained in:
Mark Gregory
+177
-105
@@ -1,124 +1,196 @@
|
||||
<div class="flex w-full flex-1 flex-col gap-6">
|
||||
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<flux:heading size="xl">{{ __('Helpdesk') }}</flux:heading>
|
||||
<flux:text class="mt-1">{{ __('Support operations, workload and recent activity.') }}</flux:text>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<flux:button :href="route('helpdesk.tickets.index')" variant="ghost" icon="list-bullet" wire:navigate>
|
||||
{{ __('Tickets') }}
|
||||
</flux:button>
|
||||
<flux:button :href="route('helpdesk.kanban')" variant="ghost" icon="view-columns" wire:navigate>
|
||||
{{ __('Kanban') }}
|
||||
</flux:button>
|
||||
<flux:button :href="route('helpdesk.tickets.create')" variant="primary" icon="plus" wire:navigate>
|
||||
{{ __('New ticket') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:text>{{ __('Total tickets') }}</flux:text>
|
||||
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $totalCount }}</div>
|
||||
<flux:text class="mt-2">{{ __('All tickets visible to you') }}</flux:text>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:text>{{ __('Open') }}</flux:text>
|
||||
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $openCount }}</div>
|
||||
<flux:text class="mt-2">{{ $openPercent }}% {{ __('of total') }}</flux:text>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:text>{{ __('Closed') }}</flux:text>
|
||||
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $closedCount }}</div>
|
||||
<flux:text class="mt-2">{{ $closedPercent }}% {{ __('resolved') }}</flux:text>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:text>{{ __('High priority') }}</flux:text>
|
||||
<div class="mt-2 text-3xl font-semibold tracking-tight text-zinc-950 dark:text-white">{{ $criticalCount }}</div>
|
||||
<flux:text class="mt-2">{{ __('Critical, urgent or high') }}</flux:text>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 xl:grid-cols-3">
|
||||
<section class="xl:col-span-2 rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="flex items-center justify-between border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
|
||||
<div class="space-y-5" dusk="helpdesk-dashboard-widget">
|
||||
<span class="sr-only">Total tickets Open tickets Closed tickets</span>
|
||||
<div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
||||
<div class="rounded-2xl border border-blue-400/20 bg-gradient-to-br from-slate-950 to-blue-950/40 p-4 shadow-sm ring-1 ring-white/5">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<flux:heading size="lg">{{ __('Recent tickets') }}</flux:heading>
|
||||
<flux:text>{{ __('Latest support activity') }}</flux:text>
|
||||
<div class="text-xs font-black uppercase tracking-[0.18em] text-blue-200/80">Total tickets</div>
|
||||
<div class="mt-2 text-3xl font-black text-white">{{ $totalCount }}</div>
|
||||
</div>
|
||||
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-500/20 text-blue-200 ring-1 ring-blue-300/20">
|
||||
<i class="fa-solid fa-ticket" aria-hidden="true"></i>
|
||||
</div>
|
||||
<flux:button :href="route('helpdesk.tickets.index')" size="sm" variant="ghost" wire:navigate>
|
||||
{{ __('View all') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
<div class="mt-4 h-1.5 rounded-full bg-slate-800">
|
||||
<div class="h-1.5 rounded-full bg-blue-400" style="width: 100%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-zinc-200 dark:divide-zinc-700">
|
||||
<div class="rounded-2xl border border-blue-400/20 bg-gradient-to-br from-slate-950 to-blue-950/40 p-4 shadow-sm ring-1 ring-white/5">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div class="text-xs font-black uppercase tracking-[0.18em] text-blue-200/80">Open tickets</div>
|
||||
<div class="mt-2 text-3xl font-black text-blue-200">{{ $openCount }}</div>
|
||||
</div>
|
||||
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-500/20 text-blue-200 ring-1 ring-blue-300/20">
|
||||
<i class="fa-solid fa-inbox" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 h-1.5 rounded-full bg-slate-800">
|
||||
<div class="h-1.5 rounded-full bg-blue-400" style="width: {{ $openPercent }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-emerald-400/20 bg-gradient-to-br from-slate-950 to-emerald-950/30 p-4 shadow-sm ring-1 ring-white/5">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div class="text-xs font-black uppercase tracking-[0.18em] text-emerald-200/80">Closed tickets</div>
|
||||
<div class="mt-2 text-3xl font-black text-emerald-200">{{ $closedCount }}</div>
|
||||
</div>
|
||||
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-500/20 text-emerald-200 ring-1 ring-emerald-300/20">
|
||||
<i class="fa-solid fa-circle-check" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 h-1.5 rounded-full bg-slate-800">
|
||||
<div class="h-1.5 rounded-full bg-emerald-400" style="width: {{ $closedPercent }}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-rose-400/20 bg-gradient-to-br from-slate-950 to-rose-950/25 p-4 shadow-sm ring-1 ring-white/5">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<div>
|
||||
<div class="text-xs font-black uppercase tracking-[0.18em] text-rose-200/80">High priority</div>
|
||||
<div class="mt-2 text-3xl font-black text-rose-200">{{ $criticalCount }}</div>
|
||||
</div>
|
||||
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-rose-500/20 text-rose-200 ring-1 ring-rose-300/20">
|
||||
<i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4 text-xs font-semibold text-slate-400">Open urgent/high/critical workload.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-5 xl:grid-cols-[minmax(0,2fr)_minmax(22rem,1fr)]">
|
||||
<div class="rounded-2xl border border-zinc-700 bg-gradient-to-br from-slate-950 via-slate-950 to-blue-950/20 shadow-sm ring-1 ring-white/5">
|
||||
<div class="flex items-center justify-between border-b border-white/10 px-5 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-500/15 text-blue-200 ring-1 ring-blue-300/20">
|
||||
<i class="fa-solid fa-list-check" aria-hidden="true"></i>
|
||||
</span>
|
||||
<div>
|
||||
<h2 class="text-lg font-black text-white">Recent tickets</h2>
|
||||
<p class="text-sm text-slate-400">Latest support activity.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-blue">View all tickets</a>
|
||||
</div>
|
||||
{{-- Recent Tickets --}}
|
||||
<div class="divide-y divide-white/10">
|
||||
@forelse ($recentTickets as $ticket)
|
||||
<a
|
||||
href="{{ route('helpdesk.tickets.show', $ticket) }}"
|
||||
wire:navigate
|
||||
class="flex items-start justify-between gap-4 px-5 py-4 transition hover:bg-zinc-50 dark:hover:bg-zinc-800/60"
|
||||
>
|
||||
<div class="min-w-0">
|
||||
<div class="truncate font-medium text-zinc-950 dark:text-white">
|
||||
{{ $ticket->reference ?? $ticket->id }} · {{ $ticket->subject ?? __('Untitled ticket') }}
|
||||
</div>
|
||||
<div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
|
||||
@if ($ticket->status)
|
||||
<span>{{ $ticket->status->name }}</span>
|
||||
@endif
|
||||
@if ($ticket->priority)
|
||||
<span>{{ $ticket->priority->name }}</span>
|
||||
@endif
|
||||
@if ($ticket->last_activity_at)
|
||||
<span>{{ $ticket->last_activity_at->diffForHumans() }}</span>
|
||||
@endif
|
||||
<a href="{{ route('helpdesk.tickets.show', $ticket) }}" wire:navigate
|
||||
class="flex flex-nowrap items-center gap-4 px-5 py-4 transition hover:bg-blue-500/10">
|
||||
<div class="flex w-36 shrink-0 items-center gap-3 text-sm font-semibold text-slate-300">
|
||||
<span class="h-2 w-2 shrink-0 rounded-full bg-blue-400"></span>
|
||||
<span class="whitespace-nowrap">{{ $ticket->reference }}</span>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="truncate font-black text-white">{{ $ticket->subject }}</div>
|
||||
<div class="mt-1 truncate text-xs text-slate-400">
|
||||
{{ optional($ticket->last_activity_at)->format('d M Y H:i') ?? 'No activity yet' }}
|
||||
</div>
|
||||
</div>
|
||||
<flux:icon.chevron-right class="mt-1 size-4 shrink-0 text-zinc-400" />
|
||||
|
||||
<div class="w-28 shrink-0">
|
||||
<x-helpdesk.colour-badge :color="$ticket->status?->color ?? 'zinc'">
|
||||
{{ $ticket->status?->name ?? 'No status' }}
|
||||
</x-helpdesk.colour-badge>
|
||||
</div>
|
||||
|
||||
<div class="w-28 shrink-0">
|
||||
<x-helpdesk.colour-badge :color="$ticket->priority?->color ?? 'zinc'">
|
||||
{{ $ticket->priority?->name ?? 'No priority' }}
|
||||
</x-helpdesk.colour-badge>
|
||||
</div>
|
||||
|
||||
<div class="w-28 shrink-0 whitespace-nowrap text-right text-sm font-semibold text-slate-400">
|
||||
{{ optional($ticket->last_activity_at)->diffForHumans() ?? 'No activity' }}
|
||||
</div>
|
||||
</a>
|
||||
@empty
|
||||
<div class="px-5 py-10 text-center">
|
||||
<flux:text>{{ __('No tickets yet.') }}</flux:text>
|
||||
</div>
|
||||
<div class="px-5 py-8 text-center text-sm text-slate-400">No helpdesk tickets yet.</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</section>
|
||||
{{-- Recent Tickets End--}}
|
||||
</div>
|
||||
|
||||
<section class="rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
|
||||
<flux:heading size="lg">{{ __('Recent Git activity') }}</flux:heading>
|
||||
<flux:text>{{ __('Commits linked to Helpdesk') }}</flux:text>
|
||||
</div>
|
||||
<div class="space-y-5">
|
||||
<div class="rounded-2xl border border-zinc-700 bg-gradient-to-br from-slate-950 to-slate-900 p-5 shadow-sm ring-1 ring-white/5">
|
||||
<div class="mb-5 flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-lg font-black text-white">SLA overview</h2>
|
||||
<p class="text-sm text-slate-400">Closure rate and open workload.</p>
|
||||
</div>
|
||||
<span class="rounded-xl bg-emerald-500/15 px-3 py-1.5 text-sm font-black text-emerald-200 ring-1 ring-emerald-300/20">{{ $closedPercent }}% closed</span>
|
||||
</div>
|
||||
|
||||
<div class="divide-y divide-zinc-200 dark:divide-zinc-700">
|
||||
@forelse ($recentCommits as $commit)
|
||||
<div class="px-5 py-4">
|
||||
<div class="truncate font-medium text-zinc-950 dark:text-white">
|
||||
{{ $commit->repository?->name ?? __('Repository') }}
|
||||
</div>
|
||||
<div class="mt-1 line-clamp-2 text-sm text-zinc-600 dark:text-zinc-300">
|
||||
{{ $commit->message ?? __('Commit') }}
|
||||
</div>
|
||||
<div class="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-xs text-zinc-500 dark:text-zinc-400">
|
||||
@if ($commit->sha)
|
||||
<span>{{ substr($commit->sha, 0, 8) }}</span>
|
||||
@endif
|
||||
@if ($commit->committed_at)
|
||||
<span>{{ $commit->committed_at->diffForHumans() }}</span>
|
||||
@endif
|
||||
<div class="grid gap-5 sm:grid-cols-[9rem_minmax(0,1fr)] sm:items-center">
|
||||
<div class="relative mx-auto flex h-32 w-32 items-center justify-center rounded-full bg-slate-900 ring-8 ring-emerald-400/20">
|
||||
<div class="absolute inset-2 rounded-full border-8 border-emerald-400" style="clip-path: polygon(0 0, {{ max($closedPercent, 8) }}% 0, {{ max($closedPercent, 8) }}% 100%, 0 100%);"></div>
|
||||
<div class="relative text-center">
|
||||
<div class="text-3xl font-black text-white">{{ $closedPercent }}%</div>
|
||||
<div class="text-xs font-bold text-slate-400">closed</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="px-5 py-10 text-center">
|
||||
<flux:text>{{ __('No Git activity yet.') }}</flux:text>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="mb-2 flex justify-between text-sm font-semibold text-slate-300"><span>Closed</span><span>{{ $closedPercent }}%</span></div>
|
||||
<div class="h-2 rounded-full bg-slate-800"><div class="h-2 rounded-full bg-emerald-400" style="width: {{ $closedPercent }}%"></div></div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="mb-2 flex justify-between text-sm font-semibold text-slate-300"><span>Open</span><span>{{ $openPercent }}%</span></div>
|
||||
<div class="h-2 rounded-full bg-slate-800"><div class="h-2 rounded-full bg-blue-400" style="width: {{ $openPercent }}%"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<details
|
||||
class="group rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
|
||||
dusk="recent-commits-card">
|
||||
<summary
|
||||
class="-mx-4 -mt-4 mb-4 flex cursor-pointer list-none items-center justify-between gap-3 rounded-t-xl bg-violet-700 px-4 py-4 text-white marker:hidden">
|
||||
<div class="flex min-w-0 items-center gap-3">
|
||||
<span
|
||||
class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-violet-950 text-white ring-1 ring-violet-300/60 shadow-lg">
|
||||
<i class="fa-solid fa-code-branch text-lg" aria-hidden="true"></i>
|
||||
</span>
|
||||
|
||||
<div class="min-w-0">
|
||||
<h2 class="text-lg font-black uppercase tracking-wide">Recent commits</h2>
|
||||
<p class="text-xs font-semibold text-violet-100">Latest linked Git activity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span
|
||||
class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/15 text-white ring-1 ring-white/20">
|
||||
<i class="fa-solid fa-chevron-right text-xs transition group-open:rotate-90" aria-hidden="true"></i>
|
||||
</span>
|
||||
</summary>
|
||||
|
||||
<div class="mb-4 flex justify-end">
|
||||
<a href="{{ route('helpdesk.settings') }}" wire:navigate class="hd-btn hd-btn-sm hd-btn-violet">
|
||||
Git setup
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
@forelse ($recentCommits as $commit)
|
||||
<div class="rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-950">
|
||||
<div class="font-mono text-xs text-zinc-500 dark:text-zinc-400">
|
||||
{{ $commit->short_hash }} · {{ $commit->repository?->name }}
|
||||
</div>
|
||||
<div class="mt-1 truncate text-sm font-semibold text-zinc-900 dark:text-zinc-100">
|
||||
{{ $commit->message }}
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<div class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-sm text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
|
||||
No commits tracked yet.
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+943
-59
File diff suppressed because it is too large
Load Diff
@@ -1,76 +1,405 @@
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<flux:heading size="xl">{{ __('Create ticket') }}</flux:heading>
|
||||
<flux:text>{{ __('Create a new Helpdesk request.') }}</flux:text>
|
||||
</div>
|
||||
<flux:button :href="route('helpdesk.tickets.index')" wire:navigate>{{ __('Back to tickets') }}</flux:button>
|
||||
</div>
|
||||
@php
|
||||
$helpdeskAttachmentAccept = collect(config('helpdesk.allowed_extensions', config('helpdesk.allowed_mimes', [])))
|
||||
->filter(fn ($extension) => is_string($extension) && trim($extension) !== '')
|
||||
->map(fn ($extension) => '.' . strtolower(ltrim(trim($extension), '.')))
|
||||
->unique()
|
||||
->implode(',');
|
||||
@endphp
|
||||
<div class="hd-helpdesk-surface space-y-6" dusk="helpdesk-ticket-create" x-data="{ helpdeskAttachmentsUploading: false }">
|
||||
@include('modules.helpdesk.partials.page-header', [
|
||||
'eyebrow' => 'Helpdesk',
|
||||
'title' => 'Create ticket',
|
||||
'subtitle' =>
|
||||
'Raise a new support request with priority, product/service, project, category, team and full details.',
|
||||
])
|
||||
|
||||
<form wire:submit="save" class="space-y-6">
|
||||
<div class="grid gap-6 rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-900 lg:grid-cols-2">
|
||||
<div class="lg:col-span-2">
|
||||
<flux:input wire:model="subject" :label="__('Subject')" required />
|
||||
@error('subject') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
|
||||
<form
|
||||
wire:submit.prevent="save"
|
||||
x-on:submit.capture="
|
||||
if (helpdeskAttachmentsUploading) {
|
||||
$event.preventDefault();
|
||||
return;
|
||||
}
|
||||
|
||||
const editor = document.querySelector('[data-helpdesk-sync-target="body"], [data-helpdesk-editor-model="body"]');
|
||||
const target = Array.from(document.querySelectorAll('textarea')).find(function (textarea) {
|
||||
|
||||
return textarea.getAttribute('wire:model.defer') === 'body'
|
||||
|
||||
|| textarea.getAttribute('wire:model') === 'body'
|
||||
|
||||
|| textarea.getAttribute('name') === 'body'
|
||||
|
||||
|| textarea.id === 'body';
|
||||
|
||||
});
|
||||
const body = (editor?.innerText || editor?.textContent || editor?.value || '').trim();
|
||||
|
||||
if (target) {
|
||||
target.value = body;
|
||||
target.dispatchEvent(new Event('input', { bubbles: true }));
|
||||
target.dispatchEvent(new Event('change', { bubbles: true }));
|
||||
}
|
||||
|
||||
if ($wire) {
|
||||
$wire.set('body', body, false);
|
||||
}
|
||||
|
||||
$dispatch('helpdesk-editor-sync', { model: 'body', live: false });
|
||||
"
|
||||
class="helpdesk-ticket-form space-y-6"
|
||||
>
|
||||
<div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-900 shadow-sm">
|
||||
<div class="border-b border-zinc-700 bg-zinc-800/80 px-6 py-4">
|
||||
<h2 class="text-lg font-semibold text-zinc-100">Ticket details</h2>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
Mandatory fields are marked with <span class="helpdesk-required-star">*</span>.
|
||||
Use the searchable lists to keep the ticket correctly routed.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-2">
|
||||
<flux:textarea wire:model="body" rows="10" :label="__('Description')" required />
|
||||
@error('body') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
|
||||
<div class="grid gap-5 p-6 lg:grid-cols-3 xl:grid-cols-6">
|
||||
<div class="lg:col-span-3 xl:col-span-6">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="subject">
|
||||
Subject <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<input id="subject" type="text" spellcheck="true" lang="en-GB" autocorrect="on" autocomplete="on" autocapitalize="sentences" inputmode="text" maxlength="180" wire:model.defer="subject"
|
||||
class="mt-2 block h-14 w-full max-w-4xl rounded-xl border border-zinc-700 bg-zinc-950 px-4 text-base font-medium text-zinc-100 shadow-sm outline-none transition-colors duration-150 placeholder:text-zinc-500 focus:border-blue-500 focus:bg-zinc-950 focus:ring-2 focus:ring-blue-500/40"
|
||||
data-dusk="ticket-subject" dusk="ticket-subject" autocomplete="off" />
|
||||
|
||||
@error('subject')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
@if ($companies->isNotEmpty())
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="company_id">
|
||||
Company <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="company_id" dusk="ticket-company" data-helpdesk-select2 wire:model.defer="company_id" name="company_id"
|
||||
data-placeholder="Select option" data-wire-model="company_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
||||
<option value="">Select company</option>
|
||||
@foreach ($companies as $company)
|
||||
<option value="{{ $company->id }}" @selected((string) $company_id === (string) $company->id)>
|
||||
{{ $company->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('company_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="board_id">
|
||||
Board <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="board_id" data-helpdesk-select2 wire:model.defer="board_id" name="board_id" data-placeholder="Select option"
|
||||
data-wire-model="board_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
data-dusk="ticket-board" dusk="ticket-board">
|
||||
<option value="">No board</option>
|
||||
@foreach ($boards as $board)
|
||||
<option value="{{ $board->id }}" @selected((int) $board_id === (int) $board->id)>
|
||||
{{ $board->name }}{{ $board->owner ? ' · ' . $board->owner->name : '' }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('board_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="priority_id">
|
||||
Priority <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="priority_id" data-helpdesk-select2 wire:model.defer="priority_id" name="priority_id" data-placeholder="Select option"
|
||||
data-wire-model="priority_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
data-dusk="ticket-priority" dusk="ticket-priority">
|
||||
<option value="">Select priority</option>
|
||||
@foreach ($priorities as $priority)
|
||||
<option value="{{ $priority->id }}" @selected((string) $priority_id === (string) $priority->id)>{{ $priority->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('priority_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="category_id">
|
||||
Category <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="category_id" data-helpdesk-select2 wire:model.defer="category_id" name="category_id" data-placeholder="Select option"
|
||||
data-wire-model="category_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
||||
<option value="">Select category</option>
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category->id }}" @selected((string) $category_id === (string) $category->id)>{{ $category->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('category_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="project_id">
|
||||
Project <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="project_id" data-helpdesk-select2 wire:model.defer="project_id" name="project_id" data-placeholder="Select option"
|
||||
data-wire-model="project_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
||||
<option value="">Select project</option>
|
||||
@foreach ($projects as $project)
|
||||
<option value="{{ $project->id }}" @selected((string) $project_id === (string) $project->id)>
|
||||
{{ $project->title ?? $project->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('project_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="team_id">
|
||||
Team <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="team_id" data-helpdesk-select2 wire:model.defer="team_id" name="team_id" data-placeholder="Select option"
|
||||
data-wire-model="team_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
||||
<option value="">Select team</option>
|
||||
@foreach ($teams as $team)
|
||||
<option value="{{ $team->id }}" @selected((string) $team_id === (string) $team->id)>{{ $team->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('team_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-3 xl:col-span-6">
|
||||
<fieldset class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4">
|
||||
<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
|
||||
<legend class="text-sm font-semibold text-zinc-200">
|
||||
Tags
|
||||
</legend>
|
||||
|
||||
<span class="text-xs text-zinc-500">
|
||||
Optional · select all that apply
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
@forelse ($tags as $tag)
|
||||
<label for="tag_{{ $tag->id }}"
|
||||
class="flex cursor-pointer items-center gap-3 rounded-xl border border-zinc-700 bg-zinc-900 px-4 py-3 text-sm font-medium text-zinc-200 transition hover:border-blue-500 hover:bg-zinc-800">
|
||||
<input id="tag_{{ $tag->id }}" type="checkbox" wire:model.defer="tag_ids"
|
||||
value="{{ $tag->id }}"
|
||||
class="h-4 w-4 rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500">
|
||||
|
||||
<span class="truncate">
|
||||
{{ $tag->name }}
|
||||
</span>
|
||||
</label>
|
||||
@empty
|
||||
<div
|
||||
class="rounded-xl border border-dashed border-zinc-700 bg-zinc-900 px-4 py-3 text-sm text-zinc-400">
|
||||
No tags are available.
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@error('tag_ids')
|
||||
<p class="mt-3 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
|
||||
@error('tag_ids.*')
|
||||
<p class="mt-3 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<x-helpdesk.date-picker id="due_at" model="due_at" label="Due date"
|
||||
placeholder="Select due date" value="{{ $due_at }}" />
|
||||
|
||||
@error('due_at')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-3 xl:col-span-6">
|
||||
<x-helpdesk.html-editor
|
||||
model="body"
|
||||
label="Details"
|
||||
rows="12"
|
||||
placeholder="Describe the issue, expected outcome, steps to reproduce and any useful context..."
|
||||
editor-dusk="ticket-body-editor"
|
||||
/>
|
||||
|
||||
<p class="mt-2 flex items-center gap-2 text-xs font-medium text-zinc-400">
|
||||
<i class="fa-solid fa-circle-info text-blue-400" aria-hidden="true"></i>
|
||||
Rich formatting is available. Browser spelling suggestions appear by right-clicking or Ctrl-clicking red-underlined words.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-3 xl:col-span-6">
|
||||
<div
|
||||
wire:key="ticket-create-attachments-uploader"
|
||||
class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4"
|
||||
x-data="{ progress: 0 }"
|
||||
x-on:livewire-upload-start="helpdeskAttachmentsUploading = true"
|
||||
x-on:livewire-upload-progress="progress = $event.detail.progress"
|
||||
x-on:livewire-upload-finish="helpdeskAttachmentsUploading = false"
|
||||
x-on:livewire-upload-error="helpdeskAttachmentsUploading = false"
|
||||
x-on:livewire-upload-cancel="helpdeskAttachmentsUploading = false"
|
||||
>
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="attachments">
|
||||
Attachments
|
||||
</label>
|
||||
|
||||
<p class="mt-1 text-sm text-zinc-500">
|
||||
Files are uploaded to Livewire temporary storage first. They are attached permanently only after the ticket is created.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label for="attachments"
|
||||
class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-950">
|
||||
<i class="fa-solid fa-paperclip" aria-hidden="true"></i>
|
||||
<span>Add attachments</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label for="attachments"
|
||||
class="mt-4 flex cursor-pointer flex-col items-center justify-center rounded-2xl border border-dashed border-zinc-700 bg-zinc-900/70 px-4 py-8 text-center transition hover:border-blue-500 hover:bg-zinc-900">
|
||||
<i class="fa-solid fa-cloud-arrow-up text-2xl text-blue-300" aria-hidden="true"></i>
|
||||
<span class="mt-3 text-sm font-bold text-zinc-100">Click to choose files</span>
|
||||
<span class="mt-1 text-xs text-zinc-500">Maximum {{ (int) config('helpdesk.max_upload_kb', 10240) }} KB per file.</span>
|
||||
</label>
|
||||
<div x-data class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4">
|
||||
<input
|
||||
x-ref="attachmentsInput"
|
||||
id="attachments"
|
||||
type="file"
|
||||
wire:model="attachments"
|
||||
multiple
|
||||
accept="{{ $helpdeskAttachmentAccept }}"
|
||||
class="hidden"
|
||||
wire:key="ticket-create-attachments-input"
|
||||
dusk="ticket-create-attachments-input"
|
||||
data-dusk="ticket-create-attachments-input"/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
x-on:click="$refs.attachmentsInput.click()"
|
||||
class="inline-flex items-center justify-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white">
|
||||
<i class="fa-solid fa-paperclip" aria-hidden="true"></i>
|
||||
Add attachments
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
x-on:click="$refs.attachmentsInput.click()"
|
||||
class="mt-4 flex w-full flex-col items-center justify-center rounded-2xl border border-dashed border-zinc-700 bg-zinc-900/70 px-4 py-8 text-center">
|
||||
<i class="fa-solid fa-cloud-arrow-up text-2xl text-blue-300" aria-hidden="true"></i>
|
||||
<span class="mt-3 text-sm font-bold text-zinc-100">Click to choose files</span>
|
||||
<span class="mt-1 text-xs text-zinc-500">
|
||||
Maximum {{ (int) config('helpdesk.max_upload_kb', 10240) }} KB per file.
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
@if (count($attachments) > 0)
|
||||
<div class="mt-4 grid gap-2 sm:grid-cols-2" dusk="ticket-create-selected-attachments">
|
||||
@foreach ($attachments as $attachment)
|
||||
<div class="flex items-center gap-3 rounded-xl border border-zinc-700 bg-zinc-900 px-3 py-2 text-xs text-zinc-300" wire:key="ticket-create-selected-attachment-{{ $loop->index }}">
|
||||
<i class="fa-regular fa-file-lines text-blue-300" aria-hidden="true"></i>
|
||||
<span class="min-w-0 flex-1 truncate">{{ $attachment->getClientOriginalName() }}</span>
|
||||
<span class="shrink-0 text-zinc-500">{{ number_format($attachment->getSize() / 1024, 1) }} KB</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div x-show="helpdeskAttachmentsUploading" x-cloak
|
||||
class="mt-4 rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm font-medium text-blue-200">
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<span class="inline-flex items-center gap-2"><i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>Uploading attachments...</span>
|
||||
<span x-text="progress + '%'"></span>
|
||||
</div>
|
||||
<div class="mt-3 h-2 overflow-hidden rounded-full bg-zinc-800">
|
||||
<div class="h-full rounded-full bg-blue-500 transition-all" x-bind:style="`width: ${progress}%`"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@error('attachments')
|
||||
<p class="mt-3 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
|
||||
@error('attachments.*')
|
||||
<p class="mt-3 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<flux:select wire:model="board_id" :label="__('Board')">
|
||||
<option value="">{{ __('No board') }}</option>
|
||||
@foreach ($boards as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach
|
||||
</flux:select>
|
||||
<div class="flex flex-col-reverse gap-2 border-t border-zinc-700 bg-zinc-900 px-6 py-4 sm:flex-row sm:items-center sm:justify-end">
|
||||
<button type="button" wire:click="clearForm" wire:loading.attr="disabled" wire:target="clearForm"
|
||||
class="inline-flex min-h-10 items-center justify-center rounded-lg bg-red-600 px-4 py-2 text-xs font-black text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400/70 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
data-dusk="ticket-create-clear" dusk="ticket-create-clear">
|
||||
<i class="fa-solid fa-eraser mr-2" aria-hidden="true"></i>
|
||||
<span wire:loading.remove wire:target="clearForm">Clear</span>
|
||||
<span wire:loading wire:target="clearForm">Clearing...</span>
|
||||
</button>
|
||||
|
||||
<flux:select wire:model="priority_id" :label="__('Priority')" required>
|
||||
<option value="">{{ __('Select priority') }}</option>
|
||||
@foreach ($priorities as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach
|
||||
</flux:select>
|
||||
<a href="{{ route('helpdesk.tickets.index') }}" wire:navigate
|
||||
class="inline-flex min-h-10 items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-xs font-black text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/70"
|
||||
data-dusk="ticket-create-cancel" dusk="ticket-create-cancel">
|
||||
<i class="fa-solid fa-arrow-left mr-2" aria-hidden="true"></i>
|
||||
Cancel
|
||||
</a>
|
||||
|
||||
<flux:select wire:model="category_id" :label="__('Category')">
|
||||
<option value="">{{ __('No category') }}</option>
|
||||
@foreach ($categories as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach
|
||||
</flux:select>
|
||||
|
||||
<flux:select wire:model="team_id" :label="__('Team')">
|
||||
<option value="">{{ __('No team') }}</option>
|
||||
@foreach ($teams as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach
|
||||
</flux:select>
|
||||
|
||||
<flux:select wire:model="project_id" :label="__('Project')">
|
||||
<option value="">{{ __('No project') }}</option>
|
||||
@foreach ($projects as $item)<option value="{{ $item->id }}">{{ $item->title }}</option>@endforeach
|
||||
</flux:select>
|
||||
|
||||
<flux:select wire:model="product_id" :label="__('Product')">
|
||||
<option value="">{{ __('No product') }}</option>
|
||||
@foreach ($products as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach
|
||||
</flux:select>
|
||||
|
||||
<flux:input wire:model="due_at" type="date" :label="__('Due date')" />
|
||||
|
||||
<div>
|
||||
<label class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300">{{ __('Tags') }}</label>
|
||||
<select wire:model="tag_ids" multiple class="w-full rounded-lg border-zinc-300 bg-white dark:border-zinc-700 dark:bg-zinc-800">
|
||||
@foreach ($tags as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach
|
||||
</select>
|
||||
<button type="submit"
|
||||
class="inline-flex min-h-10 items-center justify-center rounded-lg bg-emerald-600 px-4 py-2 text-xs font-black text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/70 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
data-dusk="ticket-create-submit" dusk="ticket-create-submit" wire:loading.attr="disabled" wire:target="save,attachments" x-bind:disabled="helpdeskAttachmentsUploading" wire:dirty.class="ring-2 ring-amber-400/40">
|
||||
<i class="fa-regular fa-floppy-disk mr-2" aria-hidden="true"></i>
|
||||
<span wire:loading.remove wire:target="save,attachments">Create ticket</span>
|
||||
<span wire:loading wire:target="attachments">Uploading...</span>
|
||||
<span wire:loading wire:target="save">Creating...</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-2">
|
||||
<label class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300">{{ __('Attachments') }}</label>
|
||||
<input wire:model="attachments" type="file" multiple class="block w-full text-sm text-zinc-600 dark:text-zinc-300">
|
||||
@error('attachments.*') <p class="mt-1 text-sm text-red-600">{{ $message }}</p> @enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<flux:button type="button" wire:click="clearForm">{{ __('Clear') }}</flux:button>
|
||||
<flux:button type="submit" variant="primary" wire:loading.attr="disabled" wire:target="save">
|
||||
<span wire:loading.remove wire:target="save">{{ __('Create ticket') }}</span>
|
||||
<span wire:loading wire:target="save">{{ __('Saving…') }}</span>
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,59 +1,428 @@
|
||||
@php
|
||||
$helpdeskAttachmentAccept = collect(config('helpdesk.allowed_extensions', config('helpdesk.allowed_mimes', [])))
|
||||
->filter(fn ($extension) => is_string($extension) && trim($extension) !== '')
|
||||
->map(fn ($extension) => '.' . strtolower(ltrim(trim($extension), '.')))
|
||||
->unique()
|
||||
->implode(',');
|
||||
@endphp
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<flux:heading size="xl">{{ __('Edit :reference', ['reference' => $ticket->reference]) }}</flux:heading>
|
||||
<flux:text>{{ __('Update ticket details and assignment.') }}</flux:text>
|
||||
</div>
|
||||
<flux:button :href="route('helpdesk.tickets.show', $ticket)" wire:navigate>{{ __('Cancel') }}</flux:button>
|
||||
</div>
|
||||
@include('modules.helpdesk.partials.page-header', [
|
||||
'eyebrow' => 'Helpdesk',
|
||||
'title' => 'Edit Ticket',
|
||||
'subtitle' =>
|
||||
'Update ownership, assignment, workflow status, product/service, project, team, category, priority and ticket details.',
|
||||
])
|
||||
|
||||
<form wire:submit="save" class="space-y-6">
|
||||
<div class="grid gap-6 rounded-2xl border border-zinc-200 bg-white p-6 dark:border-zinc-700 dark:bg-zinc-900 lg:grid-cols-2">
|
||||
<div class="lg:col-span-2"><flux:input wire:model="subject" :label="__('Subject')" required /></div>
|
||||
<div class="lg:col-span-2"><flux:textarea wire:model="body" rows="10" :label="__('Description')" required /></div>
|
||||
<form wire:submit.prevent="save" class="space-y-6">
|
||||
<div class="overflow-hidden rounded-2xl border border-zinc-700 bg-zinc-900 shadow-sm">
|
||||
<div class="border-b border-zinc-700 bg-zinc-800/80 px-6 py-4">
|
||||
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<h2 class="text-lg font-semibold text-zinc-100">
|
||||
{{ $ticket->reference }} · Ticket controls
|
||||
</h2>
|
||||
|
||||
<flux:select wire:model="status_id" :label="__('Status')">@foreach ($statuses as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach</flux:select>
|
||||
<flux:select wire:model="priority_id" :label="__('Priority')">@foreach ($priorities as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach</flux:select>
|
||||
|
||||
<flux:select wire:model="board_id" :label="__('Board')"><option value="">{{ __('No board') }}</option>@foreach ($boards as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach</flux:select>
|
||||
<flux:select wire:model="agent_id" :label="__('Agent')"><option value="">{{ __('Unassigned') }}</option>@foreach ($agents as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach</flux:select>
|
||||
|
||||
<flux:select wire:model="category_id" :label="__('Category')"><option value="">{{ __('No category') }}</option>@foreach ($categories as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach</flux:select>
|
||||
<flux:select wire:model="team_id" :label="__('Team')"><option value="">{{ __('No team') }}</option>@foreach ($teams as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach</flux:select>
|
||||
|
||||
<flux:select wire:model="project_id" :label="__('Project')"><option value="">{{ __('No project') }}</option>@foreach ($projects as $item)<option value="{{ $item->id }}">{{ $item->title }}</option>@endforeach</flux:select>
|
||||
<flux:select wire:model="product_id" :label="__('Product')"><option value="">{{ __('No product') }}</option>@foreach ($products as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach</flux:select>
|
||||
|
||||
<flux:input wire:model="due_at" type="date" :label="__('Due date')" />
|
||||
|
||||
<div>
|
||||
<label class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300">{{ __('Tags') }}</label>
|
||||
<select wire:model="tag_ids" multiple class="w-full rounded-lg border-zinc-300 bg-white dark:border-zinc-700 dark:bg-zinc-800">
|
||||
@foreach ($tags as $item)<option value="{{ $item->id }}">{{ $item->name }}</option>@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-2">
|
||||
<label class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-300">{{ __('New attachments') }}</label>
|
||||
<input wire:model="attachments" type="file" multiple class="block w-full text-sm">
|
||||
</div>
|
||||
|
||||
@if ($ticket->attachments->isNotEmpty())
|
||||
<div class="lg:col-span-2 space-y-2">
|
||||
<flux:heading size="sm">{{ __('Existing attachments') }}</flux:heading>
|
||||
@foreach ($ticket->attachments as $attachment)
|
||||
<div class="flex items-center justify-between rounded-lg border border-zinc-200 px-3 py-2 dark:border-zinc-700">
|
||||
<span class="text-sm">{{ $attachment->original_name ?? $attachment->filename ?? __('Attachment') }}</span>
|
||||
<flux:button size="sm" variant="danger" type="button" wire:click="removeAttachment({{ $attachment->id }})">{{ __('Remove') }}</flux:button>
|
||||
<span
|
||||
class="inline-flex items-center gap-2 rounded-xl border border-zinc-700 bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-200">
|
||||
<i class="fa-regular fa-user text-zinc-400" aria-hidden="true"></i>
|
||||
Owner:
|
||||
<span class="font-semibold text-white">{{ $ticket->owner?->name ?? 'Unknown' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-3">
|
||||
<flux:button type="button" wire:click="clearForm">{{ __('Clear') }}</flux:button>
|
||||
<flux:button type="submit" variant="primary">{{ __('Save changes') }}</flux:button>
|
||||
<p class="mt-2 text-sm text-zinc-400">
|
||||
Mandatory fields are marked with <span class="helpdesk-required-star">*</span>.
|
||||
Assignment and status updates trigger configured workflow messages.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a href="{{ route('helpdesk.tickets.show', $ticket) }}" wire:navigate
|
||||
class="inline-flex items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
|
||||
Back to ticket
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-5 p-6 lg:grid-cols-3 xl:grid-cols-6">
|
||||
<div class="lg:col-span-3 xl:col-span-6">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="subject">
|
||||
Subject <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<input id="subject" type="text" spellcheck="true" lang="en-GB" autocorrect="on" autocomplete="on" autocapitalize="sentences" inputmode="text" maxlength="180" wire:model.defer="subject"
|
||||
class="mt-2 block h-14 w-full max-w-4xl rounded-xl border border-zinc-700 bg-zinc-950 px-4 text-base font-medium text-zinc-100 shadow-sm outline-none transition-colors duration-150 placeholder:text-zinc-500 focus:border-blue-500 focus:bg-zinc-950 focus:ring-2 focus:ring-blue-500/40"
|
||||
data-dusk="ticket-edit-subject" dusk="ticket-edit-subject" />
|
||||
|
||||
@error('subject')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
@if ($companies->isNotEmpty())
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="company_id">
|
||||
Company <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="company_id" data-helpdesk-select2 data-placeholder="Select option"
|
||||
data-wire-model="company_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
||||
<option value="">Select company</option>
|
||||
@foreach ($companies as $company)
|
||||
<option value="{{ $company->id }}" @selected((string) $company_id === (string) $company->id)>
|
||||
{{ $company->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('company_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="board_id">Board</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="board_id" data-helpdesk-select2 data-placeholder="Select option"
|
||||
data-wire-model="board_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
data-dusk="ticket-edit-board">
|
||||
<option value="">No board</option>
|
||||
@foreach ($boards as $board)
|
||||
<option value="{{ $board->id }}" @selected((string) $board_id === (string) $board->id)>
|
||||
{{ $board->name }}{{ $board->owner ? ' · ' . $board->owner->name : '' }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('board_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="status_id">
|
||||
Status <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="status_id" data-helpdesk-select2 data-placeholder="Select option"
|
||||
data-wire-model="status_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
data-dusk="ticket-edit-status">
|
||||
<option value="">No status</option>
|
||||
@foreach ($statuses as $status)
|
||||
<option value="{{ $status->id }}" @selected((string) $status_id === (string) $status->id)>{{ $status->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('status_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="priority_id">
|
||||
Priority <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="priority_id" data-helpdesk-select2 data-placeholder="Select option"
|
||||
data-wire-model="priority_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
data-dusk="ticket-edit-priority">
|
||||
<option value="">Select priority</option>
|
||||
@foreach ($priorities as $priority)
|
||||
<option value="{{ $priority->id }}" @selected((string) $priority_id === (string) $priority->id)>{{ $priority->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('priority_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="agent_id">Assigned agent</label>
|
||||
|
||||
<div class="mt-2">
|
||||
<select id="agent_id" wire:model.live="agent_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
data-dusk="ticket-edit-agent">
|
||||
<option value="">Unassigned</option>
|
||||
@forelse ($agents as $agent)
|
||||
<option value="{{ $agent->id }}">{{ $agent->name }} · {{ $agent->email }}
|
||||
</option>
|
||||
@empty
|
||||
<option value="" disabled>No users available for assignment</option>
|
||||
@endforelse
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('agent_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="category_id">
|
||||
Category <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="category_id" data-helpdesk-select2 data-placeholder="Select option"
|
||||
data-wire-model="category_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
||||
<option value="">No category</option>
|
||||
@foreach ($categories as $category)
|
||||
<option value="{{ $category->id }}" @selected((string) $category_id === (string) $category->id)>
|
||||
{{ $category->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('category_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="project_id">
|
||||
Project <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="project_id" data-helpdesk-select2 data-placeholder="Select option"
|
||||
data-wire-model="project_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
||||
<option value="">No project</option>
|
||||
@foreach ($projects as $project)
|
||||
<option value="{{ $project->id }}" @selected((string) $project_id === (string) $project->id)>
|
||||
{{ $project->title ?? $project->name }}</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('project_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<label class="block text-sm font-semibold text-zinc-200" for="team_id">
|
||||
Team <span class="helpdesk-required-star">*</span>
|
||||
</label>
|
||||
|
||||
<div class="mt-2" wire:ignore>
|
||||
<select id="team_id" data-helpdesk-select2 data-placeholder="Select option"
|
||||
data-wire-model="team_id"
|
||||
class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
|
||||
<option value="">No team</option>
|
||||
@foreach ($teams as $team)
|
||||
<option value="{{ $team->id }}" @selected((string) $team_id === (string) $team->id)>{{ $team->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
|
||||
@error('team_id')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-3 xl:col-span-6">
|
||||
<fieldset class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4">
|
||||
<div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
|
||||
<legend class="text-sm font-semibold text-zinc-200">
|
||||
Tags
|
||||
</legend>
|
||||
|
||||
<span class="text-xs text-zinc-500">
|
||||
Optional · select all that apply
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||||
@forelse ($tags as $tag)
|
||||
<label for="tag_{{ $tag->id }}"
|
||||
class="flex cursor-pointer items-center gap-3 rounded-xl border border-zinc-700 bg-zinc-900 px-4 py-3 text-sm font-medium text-zinc-200 transition hover:border-blue-500 hover:bg-zinc-800">
|
||||
<input id="tag_{{ $tag->id }}" type="checkbox" wire:model.defer="tag_ids"
|
||||
value="{{ $tag->id }}"
|
||||
class="h-4 w-4 rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500">
|
||||
|
||||
<span class="truncate">
|
||||
{{ $tag->name }}
|
||||
</span>
|
||||
</label>
|
||||
@empty
|
||||
<div
|
||||
class="rounded-xl border border-dashed border-zinc-700 bg-zinc-900 px-4 py-3 text-sm text-zinc-400">
|
||||
No tags are available.
|
||||
</div>
|
||||
@endforelse
|
||||
</div>
|
||||
|
||||
@error('tag_ids')
|
||||
<p class="mt-3 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
|
||||
@error('tag_ids.*')
|
||||
<p class="mt-3 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="xl:col-span-2">
|
||||
<x-helpdesk.date-picker id="due_at" model="due_at" label="Due date"
|
||||
placeholder="Select due date" value="{{ $due_at }}" />
|
||||
|
||||
@error('due_at')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-3 xl:col-span-6">
|
||||
<x-helpdesk.html-editor
|
||||
model="body"
|
||||
label="Details *"
|
||||
rows="10"
|
||||
placeholder="Update the ticket details..."
|
||||
editor-dusk="ticket-edit-body-editor"
|
||||
/>
|
||||
|
||||
@error('body')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-3 xl:col-span-6">
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl border border-blue-500/30 bg-zinc-950/70 shadow-sm shadow-blue-950/30">
|
||||
<div class="bg-gradient-to-r from-blue-700 via-sky-600 to-emerald-600 px-5 py-4 text-white">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<label
|
||||
class="flex items-center gap-2 text-base font-extrabold text-white drop-shadow-sm"
|
||||
for="attachments">
|
||||
<span
|
||||
class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-white/15 ring-1 ring-white/25">
|
||||
<i class="fa-solid fa-paperclip" aria-hidden="true"></i>
|
||||
</span>
|
||||
Attachments
|
||||
</label>
|
||||
|
||||
<p class="mt-2 max-w-2xl text-sm font-medium text-blue-50/90">
|
||||
Add screenshots, documents, logs or supporting files to help resolve the ticket.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<label for="attachments"
|
||||
class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl bg-white px-4 py-2.5 text-sm font-bold text-blue-700 shadow-sm transition hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-white/80 focus:ring-offset-2 focus:ring-offset-blue-700">
|
||||
<i class="fa-solid fa-plus" aria-hidden="true"></i>
|
||||
<span>Add attachments</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
|
||||
<input id="attachments" type="file" wire:model="attachments" multiple accept="{{ $helpdeskAttachmentAccept }}"
|
||||
class="sr-only">
|
||||
|
||||
<div wire:loading.flex wire:target="attachments"
|
||||
class="mt-4 items-center gap-2 rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm font-medium text-blue-200">
|
||||
<i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>
|
||||
Uploading attachments...
|
||||
</div>
|
||||
|
||||
@if ($ticket->attachments->isNotEmpty())
|
||||
<div class="mt-4 space-y-3">
|
||||
<div
|
||||
class="flex flex-wrap items-center justify-between gap-3 rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-4 py-3">
|
||||
<h3
|
||||
class="inline-flex items-center gap-2 text-sm font-extrabold text-emerald-200">
|
||||
<span
|
||||
class="inline-flex h-7 w-7 items-center justify-center rounded-lg bg-emerald-500 text-white shadow-sm">
|
||||
<i class="fa-solid fa-folder-open" aria-hidden="true"></i>
|
||||
</span>
|
||||
Existing attachments
|
||||
</h3>
|
||||
|
||||
<span
|
||||
class="inline-flex items-center gap-2 rounded-full bg-emerald-100 px-3 py-1 text-xs font-extrabold text-emerald-800 shadow-sm ring-1 ring-emerald-300/70">
|
||||
<span class="inline-flex h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
{{ $ticket->attachments->count() }} file(s)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@foreach ($ticket->attachments as $attachment)
|
||||
<div
|
||||
class="flex flex-col gap-3 rounded-xl border border-zinc-700 bg-zinc-900 p-3 text-sm sm:flex-row sm:items-center sm:justify-between">
|
||||
<a href="{{ route('helpdesk.attachments.download', $attachment->id) }}"
|
||||
target="_blank"
|
||||
class="min-w-0 font-medium text-blue-300 hover:text-blue-200">
|
||||
<i class="fa-regular fa-file mr-2" aria-hidden="true"></i>
|
||||
{{ $attachment->original_name ?? ($attachment->original_filename ?? ($attachment->filename ?? ($attachment->file_name ?? basename($attachment->path ?? ($attachment->file_path ?? ''))))) }}
|
||||
</a>
|
||||
|
||||
<button type="button"
|
||||
wire:click="removeAttachment({{ $attachment->id }})"
|
||||
wire:confirm="Remove this attachment?"
|
||||
class="inline-flex items-center justify-center rounded-lg bg-red-600 px-3 py-1.5 text-xs font-semibold text-white hover:bg-red-700">
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($attachments !== [])
|
||||
<div
|
||||
class="mt-4 rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm text-blue-100">
|
||||
{{ count($attachments) }} new attachment(s) selected. Save the ticket to attach
|
||||
them.
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@error('attachments')
|
||||
<p class="mt-3 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
|
||||
@error('attachments.*')
|
||||
<p class="mt-3 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-end gap-3 border-t border-zinc-700 bg-zinc-900 px-6 py-4">
|
||||
<button type="button" wire:click="clearForm"
|
||||
class="rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-700">
|
||||
Clear
|
||||
</button>
|
||||
|
||||
<a href="{{ route('helpdesk.tickets.show', $ticket) }}" wire:navigate
|
||||
class="rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
|
||||
Cancel
|
||||
</a>
|
||||
|
||||
<button type="submit"
|
||||
class="inline-flex items-center gap-2 rounded-xl bg-green-600 px-5 py-2 text-sm font-semibold text-white shadow-sm hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
data-dusk="ticket-edit-submit" wire:loading.attr="disabled">
|
||||
<i class="fa-regular fa-floppy-disk" aria-hidden="true"></i>
|
||||
<span wire:loading.remove>Save Ticket</span>
|
||||
<span wire:loading>Saving...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -1,202 +1,217 @@
|
||||
<div class="space-y-6">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<flux:heading size="xl">{{ __('Tickets') }}</flux:heading>
|
||||
<flux:text>{{ __('Manage Helpdesk tickets, assignments and status.') }}</flux:text>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2">
|
||||
<flux:button :href="route('helpdesk.kanban')" wire:navigate>
|
||||
{{ __('Kanban') }}
|
||||
</flux:button>
|
||||
|
||||
<flux:button variant="primary" :href="route('helpdesk.tickets.create')" wire:navigate>
|
||||
{{ __('New ticket') }}
|
||||
</flux:button>
|
||||
<div class="hd-helpdesk-surface space-y-6" dusk="helpdesk-ticket-index">
|
||||
<div
|
||||
class="overflow-hidden rounded-3xl 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-6 py-7 text-white">
|
||||
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.28em] text-blue-200">Ticket management</p>
|
||||
<h1 class="mt-2 text-3xl font-semibold tracking-tight">Active tickets</h1>
|
||||
<p class="mt-2 max-w-3xl text-sm text-blue-100/90">Search, triage and manage support requests across
|
||||
companies, projects, teams, priorities and statuses.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<a href="{{ route('helpdesk.index') }}" wire:navigate class="hd-btn hd-btn-blue">
|
||||
<i class="fa-solid fa-chart-bar" aria-hidden="true"></i>
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
<a href="{{ route('helpdesk.tickets.create') }}" wire:navigate class="hd-btn hd-btn-green">
|
||||
<i class="fa-solid fa-plus" aria-hidden="true"></i>
|
||||
<span>New Ticket</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-3 md:grid-cols-4">
|
||||
<flux:input
|
||||
wire:model.live.debounce.300ms="search"
|
||||
:label="__('Search')"
|
||||
:placeholder="__('Reference, subject or text')"
|
||||
/>
|
||||
<div class="rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="grid gap-4 md:grid-cols-4">
|
||||
<flux:input wire:model.live.debounce.350ms="search" icon="magnifying-glass"
|
||||
placeholder="Search reference, subject or body" />
|
||||
|
||||
<flux:select wire:model.live="status" :label="__('Status')">
|
||||
<option value="">{{ __('All statuses') }}</option>
|
||||
@foreach ($statuses as $statusOption)
|
||||
<option value="{{ $statusOption->id }}">{{ $statusOption->name }}</option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
<flux:select wire:model.live="scope">
|
||||
<option value="open">Open tickets</option>
|
||||
<option value="closed">Closed tickets</option>
|
||||
<option value="all">All tickets</option>
|
||||
</flux:select>
|
||||
|
||||
<flux:select wire:model.live="priority" :label="__('Priority')">
|
||||
<option value="">{{ __('All priorities') }}</option>
|
||||
@foreach ($priorities as $priorityOption)
|
||||
<option value="{{ $priorityOption->id }}">{{ $priorityOption->name }}</option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
<flux:select wire:model.live="status">
|
||||
<option value="">All statuses</option>
|
||||
@foreach ($statuses as $status)
|
||||
<option value="{{ $status->id }}">{{ $status->name }}</option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
|
||||
<flux:select wire:model.live="scope" :label="__('Scope')">
|
||||
<option value="open">{{ __('Open') }}</option>
|
||||
<option value="closed">{{ __('Closed') }}</option>
|
||||
<option value="all">{{ __('All') }}</option>
|
||||
</flux:select>
|
||||
<flux:select wire:model.live="priority">
|
||||
<option value="">All priorities</option>
|
||||
@foreach ($priorities as $priority)
|
||||
<option value="{{ $priority->id }}">{{ $priority->name }}</option>
|
||||
@endforeach
|
||||
</flux:select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div
|
||||
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div wire:loading.flex
|
||||
class="items-center gap-2 border-b border-zinc-200 bg-blue-50 px-4 py-3 text-sm text-blue-800 dark:border-zinc-700 dark:bg-blue-950 dark:text-blue-200">
|
||||
<flux:icon.arrow-path class="size-4 animate-spin" /> Refreshing tickets...
|
||||
</div>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-zinc-200 dark:divide-zinc-700">
|
||||
<thead class="bg-zinc-50 dark:bg-zinc-800/80">
|
||||
<table class="min-w-full divide-y divide-zinc-200 text-sm dark:divide-zinc-700">
|
||||
<thead
|
||||
class="bg-zinc-50 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:bg-zinc-800 dark:text-zinc-300">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
||||
{{ __('Reference') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
||||
{{ __('Subject') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
||||
{{ __('Status') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
||||
{{ __('Priority') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
||||
{{ __('Agent') }}
|
||||
</th>
|
||||
<th class="px-4 py-3 text-right text-xs font-semibold uppercase tracking-wide text-zinc-500">
|
||||
{{ __('Actions') }}
|
||||
</th>
|
||||
<th class="px-4 py-3">Reference</th>
|
||||
<th class="px-4 py-3">Subject</th>
|
||||
<th class="px-4 py-3">Status</th>
|
||||
<th class="px-4 py-3">Priority</th>
|
||||
<th class="px-4 py-3">Agent</th>
|
||||
<th class="px-4 py-3 text-center">Files</th>
|
||||
<th class="px-4 py-3">Last activity</th>
|
||||
<th class="px-4 py-3 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
||||
@forelse ($tickets as $ticket)
|
||||
<tr wire:key="ticket-{{ $ticket->id }}" class="hover:bg-zinc-50/70 dark:hover:bg-zinc-800/50">
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm font-medium text-zinc-900 dark:text-zinc-100">
|
||||
<a
|
||||
href="{{ route('helpdesk.tickets.show', $ticket) }}"
|
||||
wire:navigate
|
||||
class="hover:underline"
|
||||
>
|
||||
<tr class="hover:bg-zinc-50 dark:hover:bg-zinc-800/70">
|
||||
<td class="whitespace-nowrap px-4 py-3 font-mono text-xs">
|
||||
<a href="{{ route('helpdesk.tickets.show', $ticket) }}" wire:navigate
|
||||
class="font-semibold text-blue-700 hover:underline dark:text-blue-300">
|
||||
{{ $ticket->reference }}
|
||||
</a>
|
||||
</td>
|
||||
|
||||
<td class="px-4 py-3">
|
||||
<div class="max-w-xl">
|
||||
<a
|
||||
href="{{ route('helpdesk.tickets.show', $ticket) }}"
|
||||
wire:navigate
|
||||
class="font-medium text-zinc-900 hover:underline dark:text-zinc-100"
|
||||
>
|
||||
{{ $ticket->subject }}
|
||||
</a>
|
||||
|
||||
<div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs text-zinc-500">
|
||||
@if ($ticket->category)
|
||||
<span>{{ $ticket->category->name }}</span>
|
||||
@endif
|
||||
|
||||
@if ($ticket->project)
|
||||
<span>{{ $ticket->project->title }}</span>
|
||||
@endif
|
||||
|
||||
@if ($ticket->attachments_count)
|
||||
<span>{{ trans_choice(':count attachment|:count attachments', $ticket->attachments_count, ['count' => $ticket->attachments_count]) }}</span>
|
||||
@endif
|
||||
</div>
|
||||
<div class="font-medium text-zinc-900 dark:text-zinc-100">{{ $ticket->subject }}</div>
|
||||
<div class="text-xs text-zinc-500">
|
||||
{{ $ticket->category?->name ?? 'No category' }}
|
||||
@if ($ticket->project)
|
||||
· {{ $ticket->project->title }}
|
||||
@endif
|
||||
@if ($ticket->team)
|
||||
· {{ $ticket->team->name }}
|
||||
@endif
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-zinc-700 dark:text-zinc-300">
|
||||
{{ $ticket->status?->name ?? '—' }}
|
||||
<td class="px-4 py-3">
|
||||
<x-helpdesk.colour-badge :color="$ticket->status?->color ?? 'zinc'">
|
||||
{{ $ticket->status?->name ?? 'No status' }}
|
||||
</x-helpdesk.colour-badge>
|
||||
</td>
|
||||
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-zinc-700 dark:text-zinc-300">
|
||||
{{ $ticket->priority?->name ?? '—' }}
|
||||
<td class="px-4 py-3">
|
||||
<x-helpdesk.colour-badge :color="$ticket->priority?->color ?? 'zinc'">
|
||||
{{ $ticket->priority?->name ?? 'No priority' }}
|
||||
</x-helpdesk.colour-badge>
|
||||
</td>
|
||||
|
||||
<td class="whitespace-nowrap px-4 py-3 text-sm text-zinc-700 dark:text-zinc-300">
|
||||
{{ $ticket->agent_name ?? '—' }}
|
||||
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-300">
|
||||
{{ $ticket->agent_name ?? 'Unassigned' }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-center">
|
||||
@if (($ticket->attachments_count ?? 0) > 0)
|
||||
<span
|
||||
class="inline-flex items-center justify-center gap-1 rounded-full border border-blue-200 bg-blue-50 px-2.5 py-1 text-xs font-black text-blue-700 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-200"
|
||||
title="{{ $ticket->attachments_count }} attachment{{ $ticket->attachments_count === 1 ? '' : 's' }}">
|
||||
<i class="fa-solid fa-paperclip" aria-hidden="true"></i>
|
||||
<span>{{ $ticket->attachments_count }}</span>
|
||||
<span
|
||||
class="sr-only">attachment{{ $ticket->attachments_count === 1 ? '' : 's' }}</span>
|
||||
</span>
|
||||
@else
|
||||
<span
|
||||
class="inline-flex items-center justify-center rounded-full border border-zinc-200 bg-zinc-50 px-2.5 py-1 text-xs font-bold text-zinc-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-500"
|
||||
title="No attachments">
|
||||
<i class="fa-regular fa-circle" aria-hidden="true"></i>
|
||||
<span class="sr-only">No attachments</span>
|
||||
</span>
|
||||
@endif
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-3 text-zinc-500">
|
||||
{{ $ticket->last_activity_at?->diffForHumans() ?? $ticket->created_at->diffForHumans() }}
|
||||
</td>
|
||||
|
||||
<td class="whitespace-nowrap px-4 py-3 text-right">
|
||||
<div class="flex justify-end gap-2">
|
||||
<flux:button
|
||||
size="sm"
|
||||
:href="route('helpdesk.tickets.show', $ticket)"
|
||||
wire:navigate
|
||||
>
|
||||
{{ __('View') }}
|
||||
</flux:button>
|
||||
|
||||
@can('update', $ticket)
|
||||
<flux:button
|
||||
size="sm"
|
||||
:href="route('helpdesk.tickets.edit', $ticket)"
|
||||
wire:navigate
|
||||
>
|
||||
{{ __('Edit') }}
|
||||
</flux:button>
|
||||
@endcan
|
||||
|
||||
@can('delete', $ticket)
|
||||
<flux:button
|
||||
size="sm"
|
||||
variant="danger"
|
||||
wire:click="askToDeleteTicket({{ $ticket->id }})"
|
||||
>
|
||||
{{ __('Delete') }}
|
||||
</flux:button>
|
||||
@endcan
|
||||
</div>
|
||||
@can('delete', $ticket)
|
||||
<button type="button" wire:click="askToDeleteTicket({{ $ticket->id }})"
|
||||
wire:loading.attr="disabled" wire:target="askToDeleteTicket({{ $ticket->id }})"
|
||||
class="hd-btn hd-btn-sm hd-btn-red disabled:cursor-not-allowed disabled:opacity-60"
|
||||
title="Delete {{ $ticket->reference }}" dusk="delete-ticket-{{ $ticket->id }}">
|
||||
<i class="fa-solid fa-trash" aria-hidden="true"></i>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
@endcan
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="6" class="px-6 py-12 text-center">
|
||||
<flux:heading size="lg">{{ __('No tickets found') }}</flux:heading>
|
||||
<flux:text class="mt-1">
|
||||
{{ __('Try changing the filters or create a new ticket.') }}
|
||||
</flux:text>
|
||||
</td>
|
||||
<td colspan="8" class="px-4 py-12 text-center text-zinc-500">No tickets matched your
|
||||
filters.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@if ($tickets->hasPages())
|
||||
<div class="border-t border-zinc-200 px-4 py-3 dark:border-zinc-700">
|
||||
{{ $tickets->links() }}
|
||||
</div>
|
||||
@endif
|
||||
<div class="border-t border-zinc-200 p-4 dark:border-zinc-700">
|
||||
{{ $tickets->links() }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($deleteModalOpen)
|
||||
<div
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
|
||||
wire:key="delete-ticket-modal"
|
||||
>
|
||||
<div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl dark:bg-zinc-900">
|
||||
<flux:heading size="lg">{{ __('Delete ticket?') }}</flux:heading>
|
||||
<div class="fixed inset-0 z-[9998] flex items-center justify-center bg-black/75 px-4 py-6 backdrop-blur-sm"
|
||||
role="dialog" aria-modal="true" aria-labelledby="delete-ticket-modal-title"
|
||||
wire:key="ticket-delete-modal-{{ $pendingDeleteTicketId ?? 'none' }}"
|
||||
dusk="delete-ticket-confirmation-modal">
|
||||
<div
|
||||
class="w-full max-w-lg overflow-hidden rounded-3xl border border-red-500/30 bg-zinc-950 text-zinc-100 shadow-2xl">
|
||||
<div class="border-b border-red-500/20 bg-red-950/40 px-6 py-5">
|
||||
<div class="flex items-start gap-4">
|
||||
<span
|
||||
class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-red-600 text-white shadow-lg shadow-red-950/40">
|
||||
<i class="fa-solid fa-triangle-exclamation" aria-hidden="true"></i>
|
||||
</span>
|
||||
|
||||
<flux:text class="mt-2">
|
||||
{{ __('This will delete :reference — :subject.', [
|
||||
'reference' => $pendingDeleteTicketReference,
|
||||
'subject' => $pendingDeleteTicketSubject,
|
||||
]) }}
|
||||
</flux:text>
|
||||
<div class="min-w-0">
|
||||
<h2 id="delete-ticket-modal-title" class="text-xl font-black tracking-tight text-white">
|
||||
Delete ticket?
|
||||
</h2>
|
||||
|
||||
<div class="mt-6 flex justify-end gap-2">
|
||||
<flux:button wire:click="cancelTicketDelete">
|
||||
{{ __('Cancel') }}
|
||||
</flux:button>
|
||||
<p class="mt-1 text-sm leading-6 text-red-100/90">
|
||||
This will delete <span
|
||||
class="font-mono font-bold">{{ $pendingDeleteTicketReference }}</span>. This
|
||||
action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<flux:button variant="danger" wire:click="confirmTicketDelete">
|
||||
{{ __('Delete') }}
|
||||
</flux:button>
|
||||
<div class="space-y-3 px-6 py-5">
|
||||
@if ($pendingDeleteTicketSubject)
|
||||
<div class="rounded-2xl border border-zinc-800 bg-zinc-900 px-4 py-3">
|
||||
<p class="text-xs font-bold uppercase tracking-[0.22em] text-zinc-500">Ticket subject</p>
|
||||
<p class="mt-1 text-sm font-semibold text-zinc-100">{{ $pendingDeleteTicketSubject }}</p>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<p class="text-sm leading-6 text-zinc-300">
|
||||
Confirm only if this ticket was created in error or is no longer required.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col-reverse gap-3 border-t border-zinc-800 bg-zinc-900/80 px-6 py-4 sm:flex-row sm:justify-end">
|
||||
<button type="button" wire:click="cancelTicketDelete" class="hd-btn hd-btn-sm hd-btn-blue"
|
||||
dusk="cancel-delete-ticket">
|
||||
<i class="fa-solid fa-xmark" aria-hidden="true"></i>
|
||||
<span>Cancel</span>
|
||||
</button>
|
||||
|
||||
<button type="button" wire:click="confirmTicketDelete" wire:loading.attr="disabled"
|
||||
wire:target="confirmTicketDelete"
|
||||
class="hd-btn hd-btn-sm hd-btn-red disabled:cursor-not-allowed disabled:opacity-60"
|
||||
dusk="confirm-delete-ticket">
|
||||
<i class="fa-solid fa-trash" aria-hidden="true"></i>
|
||||
<span wire:loading.remove wire:target="confirmTicketDelete">Delete ticket</span>
|
||||
<span wire:loading wire:target="confirmTicketDelete">Deleting...</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,22 +1,151 @@
|
||||
<section class="rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div class="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<flux:heading size="sm">{{ __('Time tracking') }}</flux:heading>
|
||||
<flux:text>{{ $this->elapsedTime }}</flux:text>
|
||||
<div
|
||||
class="mb-4 rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-950"
|
||||
data-helpdesk-ticket-timer
|
||||
>
|
||||
@php
|
||||
$hasRunningTimer = $activeTimer && $activeTimer->ended_at === null;
|
||||
$startedAtIso = $hasRunningTimer ? $activeTimer->started_at?->toIso8601String() : null;
|
||||
$startedAtDisplay = $hasRunningTimer ? $activeTimer->started_at?->format('d M Y H:i') : null;
|
||||
@endphp
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div class="flex min-w-0 items-start gap-3">
|
||||
<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-600 text-white shadow-sm">
|
||||
<i class="fa-solid fa-stopwatch text-sm" aria-hidden="true"></i>
|
||||
</span>
|
||||
|
||||
<div class="min-w-0">
|
||||
<h3 class="text-sm font-black text-zinc-950 dark:text-zinc-100">
|
||||
Ticket timer
|
||||
</h3>
|
||||
|
||||
<p class="mt-1 text-xs font-semibold text-zinc-600 dark:text-zinc-300">
|
||||
Record focused work against this ticket.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if ($hasRunningTimer)
|
||||
<div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-right shadow-sm dark:border-emerald-900 dark:bg-emerald-950/40">
|
||||
<div class="flex items-center justify-end gap-2 text-[0.65rem] font-black uppercase tracking-[0.16em] text-emerald-700 dark:text-emerald-300">
|
||||
<span class="h-2 w-2 rounded-full bg-emerald-500"></span>
|
||||
Running
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-1 font-mono text-2xl font-black leading-none text-emerald-950 dark:text-emerald-100"
|
||||
data-helpdesk-live-elapsed
|
||||
data-helpdesk-started-at="{{ $startedAtIso }}"
|
||||
data-dusk="ticket-running-time"
|
||||
>
|
||||
{{ gmdate('H:i:s', max(0, (int) $elapsedSeconds)) }}
|
||||
</div>
|
||||
|
||||
<p class="mt-1 text-[0.68rem] font-bold text-emerald-700 dark:text-emerald-300">
|
||||
Started {{ $startedAtDisplay }}
|
||||
</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
@if ($this->isRunning)
|
||||
<flux:button variant="danger" wire:click="endTimer">{{ __('Stop timer') }}</flux:button>
|
||||
@else
|
||||
<flux:button variant="primary" wire:click="startTimer">{{ __('Start timer') }}</flux:button>
|
||||
@if ($message)
|
||||
<div class="rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs font-bold text-emerald-800 dark:border-emerald-900 dark:bg-emerald-950/40 dark:text-emerald-100">
|
||||
{{ $message }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@error('timer')
|
||||
<div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs font-bold text-red-800 dark:border-red-900 dark:bg-red-950/40 dark:text-red-100">
|
||||
{{ $message }}
|
||||
</div>
|
||||
@enderror
|
||||
|
||||
<div class="space-y-2">
|
||||
<label class="block text-xs font-bold text-zinc-800 dark:text-zinc-100" for="ticket_timer_description">
|
||||
Timer note
|
||||
</label>
|
||||
|
||||
<textarea
|
||||
id="ticket_timer_description"
|
||||
wire:model.defer="description"
|
||||
rows="2"
|
||||
placeholder="Optional work note"
|
||||
class="block w-full rounded-lg border border-zinc-300 bg-white p-3 text-sm font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-100"
|
||||
data-dusk="ticket-timer-description"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<p class="text-xs font-semibold text-zinc-500 dark:text-zinc-400">
|
||||
{{ $hasRunningTimer ? 'End the timer to add the elapsed time to the ticket.' : 'Start a timer when work begins. Only one active timer is allowed.' }}
|
||||
</p>
|
||||
|
||||
@if ($hasRunningTimer)
|
||||
<button
|
||||
type="button"
|
||||
wire:click="endTimer"
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="endTimer"
|
||||
class="inline-flex min-w-[9.5rem] shrink-0 items-center justify-center whitespace-nowrap rounded-md bg-red-600 px-4 py-2 text-sm font-black text-white shadow-sm transition hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:focus:ring-offset-zinc-950"
|
||||
data-dusk="end-ticket-timer"
|
||||
>
|
||||
<i class="fa-solid fa-stop mr-2" aria-hidden="true"></i>
|
||||
<span wire:loading.remove wire:target="endTimer">End timer</span>
|
||||
<span wire:loading wire:target="endTimer">Ending...</span>
|
||||
</button>
|
||||
@else
|
||||
<button
|
||||
type="button"
|
||||
wire:click="startTimer"
|
||||
wire:loading.attr="disabled"
|
||||
wire:target="startTimer"
|
||||
class="inline-flex min-w-[9.5rem] shrink-0 items-center justify-center whitespace-nowrap rounded-md bg-blue-600 px-4 py-2 text-sm font-black text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-60 dark:focus:ring-offset-zinc-950"
|
||||
data-dusk="start-ticket-timer"
|
||||
>
|
||||
<i class="fa-solid fa-play mr-2 text-xs" aria-hidden="true"></i>
|
||||
<span wire:loading.remove wire:target="startTimer">Start timer</span>
|
||||
<span wire:loading wire:target="startTimer">Starting...</span>
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<flux:input wire:model="description" :label="__('Description')" :placeholder="__('What are you working on?')" />
|
||||
</div>
|
||||
<script>
|
||||
(() => {
|
||||
if (window.helpdeskTicketTimerDisplayBooted === true) {
|
||||
return;
|
||||
}
|
||||
|
||||
@if ($message)
|
||||
<p class="mt-3 text-sm text-zinc-600 dark:text-zinc-300">{{ $message }}</p>
|
||||
@endif
|
||||
</section>
|
||||
window.helpdeskTicketTimerDisplayBooted = true;
|
||||
|
||||
const formatElapsed = (totalSeconds) => {
|
||||
const seconds = Math.max(0, Number.parseInt(totalSeconds, 10) || 0);
|
||||
const hours = String(Math.floor(seconds / 3600)).padStart(2, '0');
|
||||
const minutes = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
|
||||
const remainingSeconds = String(seconds % 60).padStart(2, '0');
|
||||
|
||||
return `${hours}:${minutes}:${remainingSeconds}`;
|
||||
};
|
||||
|
||||
const updateTimers = () => {
|
||||
document.querySelectorAll('[data-helpdesk-live-elapsed][data-helpdesk-started-at]').forEach((timer) => {
|
||||
const startedAt = Date.parse(timer.getAttribute('data-helpdesk-started-at') || '');
|
||||
|
||||
if (!Number.isFinite(startedAt)) {
|
||||
timer.textContent = '00:00:00';
|
||||
return;
|
||||
}
|
||||
|
||||
timer.textContent = formatElapsed(Math.floor((Date.now() - startedAt) / 1000));
|
||||
});
|
||||
};
|
||||
|
||||
updateTimers();
|
||||
window.setInterval(updateTimers, 1000);
|
||||
document.addEventListener('livewire:navigated', updateTimers);
|
||||
document.addEventListener('livewire:update', updateTimers);
|
||||
document.addEventListener('livewire:updated', updateTimers);
|
||||
})();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user