1675 lines
100 KiB
PHP
1675 lines
100 KiB
PHP
@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
|
|
@php
|
|
use Illuminate\Support\Str;
|
|
use Modules\Helpdesk\Models\TicketTimeLog;
|
|
$currentUser = auth()->user();
|
|
$currentCompany = $currentUser?->company;
|
|
$canSeeInternalNotes =
|
|
(bool) ($currentCompany?->is_system_company ?? false) ||
|
|
Str::lower((string) ($currentCompany?->slug ?? '')) === 'mpba-limited' ||
|
|
Str::contains(Str::lower((string) ($currentCompany?->name ?? '')), 'mpba');
|
|
$visibleCommentCount = $ticket->comments->count();
|
|
$ticketTimeLogs = TicketTimeLog::query()
|
|
->with('user')
|
|
->where('ticket_id', $ticket->getKey())
|
|
->orderByDesc('started_at')
|
|
->get();
|
|
@endphp
|
|
|
|
|
|
<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">
|
|
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="min-w-0">
|
|
<div class="mb-2 flex flex-wrap items-center gap-2">
|
|
<span class="font-mono text-xs text-blue-100">{{ $ticket->reference }}</span>
|
|
<x-helpdesk::colour-badge :color="$ticket->status->color">{{ $ticket->status->name }}</x-helpdesk::colour-badge>
|
|
<x-helpdesk::colour-badge :color="$ticket->priority->color">{{ $ticket->priority->name }}</x-helpdesk::colour-badge>
|
|
</div>
|
|
|
|
<h1 class="truncate text-2xl font-semibold tracking-tight">{{ $ticket->subject }}</h1>
|
|
|
|
<p class="mt-1 text-xs text-blue-100/90">
|
|
Raised by {{ $ticket->owner?->name ?? 'Unknown user' }} · Assigned to
|
|
{{ $ticket->agent?->name ?? 'Unassigned' }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
<a href="{{ route('helpdesk.index') }}" wire:navigate
|
|
class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-blue-700">
|
|
<i class="fa-solid fa-gauge-high mr-2" aria-hidden="true"></i>
|
|
Dashboard
|
|
</a>
|
|
@can('update', $ticket)
|
|
<a href="{{ route('helpdesk.tickets.edit', $ticket) }}" wire:navigate
|
|
class="inline-flex items-center rounded-lg bg-emerald-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-emerald-700">
|
|
<i class="fa-solid fa-pen-to-square mr-2" aria-hidden="true"></i>
|
|
Edit
|
|
</a>
|
|
@endcan
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-4 lg:grid-cols-3">
|
|
<div class="space-y-4 lg:col-span-2">
|
|
<article
|
|
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-r from-slate-950 via-blue-950 to-slate-900 px-5 py-5 text-white sm:px-6">
|
|
<div class="flex flex-col gap-4 xl:flex-row xl:items-center xl: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-500/20 text-white ring-1 ring-white/25 shadow-sm">
|
|
<i class="fa-solid fa-file-lines text-base" aria-hidden="true"></i>
|
|
</span>
|
|
|
|
<div class="min-w-0 space-y-1">
|
|
<p class="text-[0.68rem] font-black uppercase tracking-[0.18em] text-blue-200">Ticket
|
|
document</p>
|
|
<h2 class="text-xl font-extrabold tracking-tight text-white sm:text-2xl">Request details
|
|
</h2>
|
|
<p class="max-w-4xl text-sm font-medium leading-5 text-blue-50/90">Original request
|
|
content recorded against this helpdesk ticket.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<span
|
|
class="inline-flex w-fit shrink-0 items-center gap-2 rounded-xl bg-white/15 px-3 py-2 text-xs font-extrabold text-blue-50 ring-1 ring-white/20 shadow-sm">
|
|
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
|
{{ $ticket->reference }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-5 sm:p-6">
|
|
<div
|
|
class="hd-ticket-body-card min-h-[10rem] rounded-2xl border border-zinc-200 bg-zinc-50/80 px-5 py-5 text-zinc-900 shadow-inner dark:border-zinc-700 dark:bg-zinc-950/80 dark:text-zinc-100 sm:min-h-[12rem] sm:px-6 sm:py-6">
|
|
<div class="prose max-w-none text-sm leading-6 dark:prose-invert sm:text-base sm:leading-7">
|
|
{!! $ticket->body !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<details
|
|
class="group overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
|
|
data-helpdesk-supporting-files-card>
|
|
<summary
|
|
class="flex cursor-pointer list-none items-center justify-between gap-3 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-4 py-3 text-white marker:hidden sm:px-5">
|
|
<div class="flex min-w-0 items-center gap-3">
|
|
<span
|
|
class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-500/25 text-white ring-1 ring-white/20">
|
|
<i class="fa-solid fa-paperclip text-sm" aria-hidden="true"></i>
|
|
</span>
|
|
|
|
<div class="min-w-0">
|
|
<p class="text-[0.65rem] font-black uppercase tracking-[0.18em] text-blue-200">Attachments
|
|
</p>
|
|
<h2 class="truncate text-base font-extrabold tracking-tight">Supporting files</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<span
|
|
class="inline-flex shrink-0 items-center gap-2 rounded-xl bg-white/15 px-3 py-1.5 text-xs font-extrabold ring-1 ring-white/20">
|
|
<i class="fa-solid fa-paperclip text-xs" aria-hidden="true"></i>
|
|
{{ $ticket->attachments->count() }} file{{ $ticket->attachments->count() === 1 ? '' : 's' }}
|
|
<i class="fa-solid fa-chevron-right transition group-open:rotate-90" aria-hidden="true"></i>
|
|
</span>
|
|
</summary>
|
|
|
|
<div class="space-y-3 p-4">
|
|
@can('update', $ticket)
|
|
<form method="POST" action="{{ route('helpdesk.tickets.attachments.store', $ticket) }}"
|
|
enctype="multipart/form-data"
|
|
class="rounded-xl border border-blue-500/25 bg-slate-950/70 p-3 shadow-sm"
|
|
data-helpdesk-ticket-attachment-form>
|
|
@csrf
|
|
|
|
<div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-black uppercase tracking-[0.18em] text-blue-200">Add
|
|
files</p>
|
|
<p class="mt-1 truncate text-xs font-semibold text-slate-200"
|
|
data-helpdesk-file-label>
|
|
No files selected</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2 sm:flex-row sm:items-center">
|
|
<label data-helpdesk-file-button
|
|
class="hd-attachment-action !rounded-lg !px-3 !py-2 !text-xs">
|
|
<i class="fa-solid fa-paperclip" aria-hidden="true"></i>
|
|
<span>Choose files</span>
|
|
<label for="sonar-input-d20751f562" class="visually-hidden">attachments[]</label>
|
|
<input name="attachments[]" type="file" multiple accept="{{ $helpdeskAttachmentAccept }}" class="sr-only"
|
|
data-helpdesk-file-input id="sonar-input-d20751f562">
|
|
</label>
|
|
|
|
<button type="submit"
|
|
class="hd-attachment-action hd-attachment-action-upload !rounded-lg !px-3 !py-2 !text-xs">
|
|
<i class="fa-solid fa-upload" aria-hidden="true"></i>
|
|
<span>Upload</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
@error('attachments')
|
|
<p class="mt-2 text-xs font-semibold text-red-300">{{ $message }}</p>
|
|
@enderror
|
|
|
|
@error('attachments.*')
|
|
<p class="mt-2 text-xs font-semibold text-red-300">{{ $message }}</p>
|
|
@enderror
|
|
</form>
|
|
@endcan
|
|
|
|
@php
|
|
$visibleAttachments = $ticket->attachments->filter(fn ($attachment) => ! $attachment->isDeletedAttachment());
|
|
@endphp
|
|
|
|
@if ($visibleAttachments->isEmpty())
|
|
<div
|
|
class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-xs font-semibold text-zinc-500 dark:border-zinc-700">
|
|
No supporting files have been attached yet.
|
|
</div>
|
|
@else
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
@foreach ($visibleAttachments as $attachment)
|
|
<article
|
|
class="group/file overflow-hidden rounded-xl border border-zinc-200 bg-white text-xs shadow-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-950 dark:hover:bg-zinc-900">
|
|
@if ($attachment->isImage())
|
|
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}"
|
|
class="block aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-900">
|
|
<img src="{{ route('helpdesk.attachments.preview', $attachment->id) }}" alt="{{ $attachment->displayName() }}"
|
|
class="h-full w-full object-cover transition group-hover/file:scale-[1.02]">
|
|
</a>
|
|
@endif
|
|
|
|
<div class="flex items-start gap-3 p-3">
|
|
<span
|
|
class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-700 dark:bg-blue-500/10 dark:text-blue-300">
|
|
<i class="{{ $attachment->icon() }} text-sm" aria-hidden="true"></i>
|
|
</span>
|
|
|
|
<div class="min-w-0 flex-1">
|
|
<p class="truncate font-bold text-zinc-900 dark:text-zinc-100">
|
|
{{ $attachment->displayName() }}
|
|
</p>
|
|
<p class="mt-1 text-[0.7rem] font-semibold uppercase tracking-wide text-zinc-500">
|
|
{{ strtoupper($attachment->language()) }} · {{ Number::fileSize($attachment->byteSize()) }}
|
|
@if ($attachment->downloadCount() > 0)
|
|
· {{ $attachment->downloadCount() }} download{{ $attachment->downloadCount() === 1 ? '' : 's' }}
|
|
@endif
|
|
</p>
|
|
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
@if ($attachment->canPreview())
|
|
<a href="{{ route('helpdesk.attachments.preview', $attachment->id) }}"
|
|
class="inline-flex items-center gap-1 rounded-lg bg-green-600 px-2.5 py-1.5 text-[0.7rem] font-bold text-white hover:bg-green-700">
|
|
<i class="fa-regular fa-eye" aria-hidden="true"></i>
|
|
Preview
|
|
</a>
|
|
@endif
|
|
|
|
<a href="{{ route('helpdesk.attachments.download', $attachment->id) }}" target="_blank"
|
|
class="inline-flex items-center gap-1 rounded-lg bg-blue-600 px-2.5 py-1.5 text-[0.7rem] font-bold text-white hover:bg-blue-700">
|
|
<i class="fa-solid fa-download" aria-hidden="true"></i>
|
|
Download
|
|
</a>
|
|
|
|
@can('update', $ticket)
|
|
<form method="POST" action="{{ route('helpdesk.attachments.destroy', $attachment->id) }}"
|
|
onsubmit="return confirm('Remove this attachment from the ticket?');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-1 rounded-lg bg-red-600 px-2.5 py-1.5 text-[0.7rem] font-bold text-white hover:bg-red-700">
|
|
<i class="fa-regular fa-trash-can" aria-hidden="true"></i>
|
|
Remove
|
|
</button>
|
|
</form>
|
|
@endcan
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</details>
|
|
|
|
<section class="space-y-3">
|
|
<details
|
|
class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
|
|
data-helpdesk-conversation-section>
|
|
<summary
|
|
class="flex cursor-pointer list-none items-center justify-between gap-3 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-4 py-3 text-white marker:hidden sm:px-5">
|
|
<div class="flex min-w-0 items-center gap-3">
|
|
<span
|
|
class="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-500/25 text-white ring-1 ring-white/20">
|
|
<i class="fa-solid fa-comments text-sm" aria-hidden="true"></i>
|
|
</span>
|
|
|
|
<div class="min-w-0">
|
|
<p class="text-[0.65rem] font-black uppercase tracking-[0.18em] text-blue-200">
|
|
Conversation</p>
|
|
<h2 class="truncate text-base font-extrabold tracking-tight">Document responses</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<span
|
|
class="inline-flex shrink-0 items-center gap-2 rounded-xl bg-white/15 px-3 py-1.5 text-xs font-extrabold ring-1 ring-white/20">
|
|
{{ $visibleCommentCount }} item{{ $visibleCommentCount === 1 ? '' : 's' }}
|
|
<i class="fa-solid fa-chevron-right transition group-open:rotate-90"
|
|
aria-hidden="true"></i>
|
|
</span>
|
|
</summary>
|
|
|
|
<div class="space-y-3 p-4">
|
|
<div class="grid gap-2 md:grid-cols-[1fr_auto]">
|
|
<label class="sr-only" for="helpdesk-comment-search">Search comments</label>
|
|
<input id="helpdesk-comment-search" type="search" placeholder="Search comments..."
|
|
class="block w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-xs text-zinc-900 shadow-sm focus:border-red-500 focus:ring-red-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
|
|
data-helpdesk-comment-search>
|
|
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<button type="button"
|
|
class="inline-flex items-center justify-center rounded-lg bg-red-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-red-700"
|
|
data-helpdesk-expand-comments>
|
|
<i class="fa-solid fa-up-right-and-down-left-from-center mr-2"
|
|
aria-hidden="true"></i>
|
|
Expand all
|
|
</button>
|
|
|
|
<button type="button"
|
|
class="hidden items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400 dark:focus:ring-offset-zinc-900"
|
|
data-helpdesk-collapse-comments>
|
|
<i class="fa-solid fa-down-left-and-up-right-to-center mr-2"
|
|
aria-hidden="true"></i>
|
|
Collapse all
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($ticket->comments->isNotEmpty())
|
|
@include('helpdesk::partials.comment-thread', [
|
|
'comments' => $ticket->comments,
|
|
'level' => 0,
|
|
'ticket' => $ticket,
|
|
'canSeeInternalNotes' => $canSeeInternalNotes,
|
|
])
|
|
@else
|
|
<div
|
|
class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-xs text-zinc-500 dark:border-zinc-700">
|
|
No responses yet.
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</details>
|
|
</section>
|
|
|
|
<form method="POST" action="{{ route('helpdesk.tickets.comments.store', $ticket) }}"
|
|
enctype="multipart/form-data"
|
|
class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
|
|
data-helpdesk-comment-form>
|
|
@csrf
|
|
|
|
<div class="bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-5 py-5 text-white sm:px-6">
|
|
<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-500/20 text-white ring-1 ring-white/25 shadow-sm">
|
|
<i class="fa-solid fa-square-plus text-base" aria-hidden="true"></i>
|
|
</span>
|
|
|
|
<div class="min-w-0 space-y-1">
|
|
<p class="text-[0.68rem] font-black uppercase tracking-[0.18em] text-blue-200">Response
|
|
document</p>
|
|
<h2 class="text-xl font-extrabold tracking-tight text-white sm:text-2xl">Add reply</h2>
|
|
<p class="max-w-4xl text-sm font-medium leading-5 text-blue-50/90">Create a response,
|
|
internal MPBA note or threaded document reply.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-5 p-5 sm:p-6">
|
|
@if (session('ticket-comment-added'))
|
|
<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-800 dark:bg-emerald-950 dark:text-emerald-100">
|
|
{{ session('ticket-comment-added') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<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-800 dark:bg-red-950 dark:text-red-100">
|
|
{{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
@php
|
|
$cannedResponseBodies = $cannedResponses
|
|
->mapWithKeys(function ($response) use ($ticket, $currentUser) {
|
|
$body = (string) $response->body;
|
|
|
|
$body = strtr($body, [
|
|
'{{ ticket . reference }}' => e((string) ($ticket->reference ?? '')),
|
|
'{{ ticket . subject }}' => e((string) ($ticket->subject ?? '')),
|
|
'{{ ticket . status }}' => e((string) ($ticket->status?->name ?? '')),
|
|
'{{ ticket . priority }}' => e((string) ($ticket->priority?->name ?? '')),
|
|
'{{ ticket . category }}' => e((string) ($ticket->category?->name ?? '')),
|
|
'{{ ticket . project }}' => e((string) ($ticket->project?->title ?? '')),
|
|
'{{ ticket . team }}' => e((string) ($ticket->team?->name ?? '')),
|
|
'{{ requester . name }}' => e(
|
|
(string) ($ticket->owner?->name ?? ($ticket->user?->name ?? '')),
|
|
),
|
|
'{{ agent . name }}' => e(
|
|
(string) ($ticket->agent?->name ?? ($currentUser?->name ?? '')),
|
|
),
|
|
'{{ actor . name }}' => e((string) ($currentUser?->name ?? '')),
|
|
'{{ ticket . url }}' => e(
|
|
route('helpdesk.tickets.show', ['ticket' => $ticket->getKey()]),
|
|
),
|
|
]);
|
|
|
|
$body = html_entity_decode($body, ENT_QUOTES | ENT_HTML5, 'UTF-8');
|
|
$body = preg_replace('/<\s*(script|style)[^>]*>.*?<\s*\/\s*\1\s*>/is', '', $body) ?: '';
|
|
$body =
|
|
preg_replace('/\s+on[a-z]+\s*=\s*("[^"]*"|\'[^\']*\'|[^\s>]+)/i', '', $body) ?: '';
|
|
$body = preg_replace('/javascript\s*:/i', '', $body) ?: '';
|
|
$body = strip_tags(
|
|
$body,
|
|
'<p><br><strong><b><em><i><u><ul><ol><li><blockquote><pre><code><a>',
|
|
);
|
|
|
|
return [(string) $response->id => trim($body)];
|
|
})
|
|
->all();
|
|
|
|
$cannedResponseNames = $cannedResponses
|
|
->mapWithKeys(fn($response) => [(string) $response->id => (string) $response->name])
|
|
->all();
|
|
|
|
$oldCommentBody = html_entity_decode(
|
|
(string) old('commentBody'),
|
|
ENT_QUOTES | ENT_HTML5,
|
|
'UTF-8',
|
|
);
|
|
$oldCommentBody =
|
|
preg_replace('/<\s*(script|style)[^>]*>.*?<\s*\/\s*\1\s*>/is', '', $oldCommentBody) ?: '';
|
|
$oldCommentBody =
|
|
preg_replace('/\s+on[a-z]+\s*=\s*("[^"]*"|\'[^\']*\'|[^\s>]+)/i', '', $oldCommentBody) ?:
|
|
'';
|
|
$oldCommentBody = preg_replace('/javascript\s*:/i', '', $oldCommentBody) ?: '';
|
|
$oldCommentBody = strip_tags(
|
|
$oldCommentBody,
|
|
'<p><br><strong><b><em><i><u><ul><ol><li><blockquote><pre><code><a>',
|
|
);
|
|
@endphp
|
|
|
|
<script type="application/json"
|
|
id="helpdesk-canned-response-bodies">@json($cannedResponseBodies)</script>
|
|
<script type="application/json"
|
|
id="helpdesk-canned-response-names">@json($cannedResponseNames)</script>
|
|
|
|
@if ($cannedResponses->isNotEmpty())
|
|
<div class="grid gap-3 md:grid-cols-[1fr_auto]">
|
|
<div>
|
|
<label for="ticket-canned-response"
|
|
class="mb-2 block text-xs font-bold text-zinc-700 dark:text-zinc-200">Canned
|
|
response</label>
|
|
<select id="ticket-canned-response" name="canned_response_id"
|
|
class="hd-select block min-h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
|
|
data-canned-response-select>
|
|
<option value="">Choose a saved response...</option>
|
|
@foreach ($cannedResponses as $response)
|
|
<option value="{{ $response->id }}">{{ $response->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-end">
|
|
<button type="button" dusk="insert-canned-response"
|
|
class="inline-flex min-h-10 items-center justify-center rounded-lg bg-blue-600 px-4 py-2 text-xs font-bold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/70"
|
|
data-insert-canned-response>
|
|
<i class="fa-solid fa-copy mr-2" aria-hidden="true"></i>
|
|
Insert response
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div>
|
|
<label for="ticket-comment-subject"
|
|
class="mb-2 block text-xs font-bold text-zinc-700 dark:text-zinc-200">Subject</label>
|
|
<input id="ticket-comment-subject" name="subject" value="{{ old('subject') }}"
|
|
placeholder="Response subject" spellcheck="true" lang="en-GB" autocorrect="on" autocomplete="on" autocapitalize="sentences" inputmode="text"
|
|
class="block min-h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 text-sm font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
|
|
data-helpdesk-comment-subject>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="ticket-comment-body-editor"
|
|
class="mb-2 block text-xs font-bold text-zinc-700 dark:text-zinc-200">Comment</label>
|
|
|
|
<div class="overflow-hidden rounded-xl border border-zinc-300 bg-white shadow-sm focus-within:border-blue-500 focus-within:ring-2 focus-within:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950">
|
|
<div class="flex flex-wrap items-center gap-1 border-b border-zinc-200 bg-zinc-50 p-2 dark:border-zinc-700 dark:bg-zinc-900"
|
|
data-helpdesk-html-toolbar="ticket-comment-body-editor">
|
|
<button type="button" data-helpdesk-command="bold"
|
|
class="rounded-lg px-2 py-1 text-sm font-bold hover:bg-zinc-200 dark:hover:bg-zinc-800">B</button>
|
|
<button type="button" data-helpdesk-command="italic"
|
|
class="rounded-lg px-2 py-1 text-sm italic hover:bg-zinc-200 dark:hover:bg-zinc-800">I</button>
|
|
<button type="button" data-helpdesk-command="underline"
|
|
class="rounded-lg px-2 py-1 text-sm underline hover:bg-zinc-200 dark:hover:bg-zinc-800">U</button>
|
|
<button type="button" data-helpdesk-command="insertUnorderedList"
|
|
class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">• List</button>
|
|
<button type="button" data-helpdesk-command="insertOrderedList"
|
|
class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">1. List</button>
|
|
<button type="button" data-helpdesk-block="blockquote"
|
|
class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">Quote</button>
|
|
<button type="button" data-helpdesk-block="code"
|
|
class="rounded-lg px-2 py-1 text-sm hover:bg-zinc-200 dark:hover:bg-zinc-800">Code</button>
|
|
</div>
|
|
|
|
<div id="ticket-comment-body-editor" dusk="comment-body" data-dusk="comment-body"
|
|
data-helpdesk-rich-editor data-helpdesk-sync-target="ticket-comment-body"
|
|
contenteditable="true" role="textbox" aria-multiline="true" spellcheck="true" lang="en-GB" aria-label="Write a public reply or internal note." autocorrect="on" autocomplete="on" autocapitalize="sentences" inputmode="text"
|
|
class="prose prose-sm min-h-[12rem] max-w-none bg-white p-4 text-sm leading-6 text-zinc-900 outline-none dark:prose-invert dark:bg-zinc-950 dark:text-zinc-100"
|
|
data-placeholder="Write a public reply or internal note. Right-click or Ctrl-click underlined words for spelling suggestions.">{!! $oldCommentBody !!}</div>
|
|
|
|
<label for="ticket-comment-body" class="sr-only">Public reply or internal note</label>
|
|
<textarea id="ticket-comment-body" name="commentBody" required spellcheck="true" lang="en-GB" autocorrect="on" autocomplete="on" autocapitalize="sentences" inputmode="text" class="sr-only" tabindex="-1" aria-hidden="true">{{ $oldCommentBody }}</textarea>
|
|
</div>
|
|
|
|
<p class="mt-2 flex items-center gap-2 text-xs font-medium text-zinc-500 dark:text-zinc-400">
|
|
<i class="fa-solid fa-circle-info text-blue-500" aria-hidden="true"></i>
|
|
Rich formatting is available. Browser suggestions appear from the context menu on underlined words.
|
|
</p>
|
|
</div>
|
|
|
|
@can('update', $ticket)
|
|
<div
|
|
class="rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-950">
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="min-w-0">
|
|
<span class="block text-xs font-bold text-zinc-700 dark:text-zinc-200">Attach files to this reply</span>
|
|
<p class="mt-1 truncate text-xs font-semibold text-zinc-500 dark:text-zinc-400"
|
|
data-helpdesk-file-label>No files selected</p>
|
|
</div>
|
|
|
|
<label data-helpdesk-file-button
|
|
class="inline-flex cursor-pointer items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm transition hover:bg-blue-700 focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-400/70">
|
|
<i class="fa-solid fa-paperclip mr-2 text-xs" aria-hidden="true"></i>
|
|
<span>Choose files</span>
|
|
<label for="sonar-input-cc351ecc57" class="visually-hidden">comment attachments[]</label>
|
|
<input name="comment_attachments[]" type="file" multiple accept="{{ $helpdeskAttachmentAccept }}" class="sr-only"
|
|
data-helpdesk-file-input id="sonar-input-cc351ecc57">
|
|
</label>
|
|
</div>
|
|
|
|
@error('comment_attachments')
|
|
<p class="mt-2 text-xs font-semibold text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
|
|
@error('comment_attachments.*')
|
|
<p class="mt-2 text-xs font-semibold text-red-600 dark:text-red-400">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-zinc-200 bg-white p-3 shadow-sm dark:border-zinc-700 dark:bg-zinc-950">
|
|
<div class="mb-3 flex items-start justify-between gap-3">
|
|
<div>
|
|
<p class="text-xs font-extrabold uppercase tracking-[0.16em] text-zinc-500 dark:text-zinc-400">Visibility</p>
|
|
<p class="mt-1 text-sm font-semibold text-zinc-700 dark:text-zinc-200">Choose whether this response is customer visible.</p>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($canSeeInternalNotes)
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
<label class="flex cursor-pointer items-start gap-3 rounded-xl border border-emerald-300 bg-emerald-50 p-3 text-emerald-950 shadow-sm transition hover:border-emerald-400 hover:bg-emerald-100/80 focus-within:border-emerald-500 focus-within:bg-emerald-100/80 focus-within:ring-2 focus-within:ring-emerald-400/30 active:bg-emerald-100/80 dark:border-emerald-900 dark:bg-emerald-950/60 dark:text-emerald-100 dark:hover:border-emerald-700 dark:hover:bg-emerald-900/50 dark:focus-within:bg-emerald-900/50">
|
|
<label for="sonar-input-f732ff44ac" class="visually-hidden">internal</label>
|
|
<input type="radio" name="internal" value="0" @checked(! old('internal')) class="mt-1 border-emerald-400 text-emerald-600 focus:ring-emerald-500" id="sonar-input-f732ff44ac">
|
|
<span>
|
|
<span class="block text-sm font-extrabold">Public reply</span>
|
|
<span class="mt-1 block text-xs font-semibold opacity-80">Visible to the requester and counts as the first SLA response.</span>
|
|
</span>
|
|
</label>
|
|
|
|
<label class="flex cursor-pointer items-start gap-3 rounded-xl border border-purple-300 bg-purple-50 p-3 text-purple-950 shadow-sm transition hover:border-purple-400 hover:bg-purple-100/80 focus-within:border-purple-500 focus-within:bg-purple-100/80 focus-within:ring-2 focus-within:ring-purple-400/30 active:bg-purple-100/80 dark:border-purple-900 dark:bg-purple-950/60 dark:text-purple-100 dark:hover:border-purple-700 dark:hover:bg-purple-900/50 dark:focus-within:bg-purple-900/50">
|
|
<label for="sonar-input-2d1a395f19" class="visually-hidden">internal</label>
|
|
<input type="radio" name="internal" value="1" @checked((bool) old('internal')) class="mt-1 border-purple-400 text-purple-600 focus:ring-purple-500" id="sonar-input-2d1a395f19">
|
|
<span>
|
|
<span class="block text-sm font-extrabold">Internal note</span>
|
|
<span class="mt-1 block text-xs font-semibold opacity-80">MPBA/support-only note. Does not count as a public SLA response.</span>
|
|
</span>
|
|
</label>
|
|
</div>
|
|
@else
|
|
<input type="hidden" name="internal" value="0">
|
|
<div class="rounded-xl border border-emerald-300 bg-emerald-50 p-3 text-sm font-semibold text-emerald-950 dark:border-emerald-900 dark:bg-emerald-950/60 dark:text-emerald-100">
|
|
<i class="fa-solid fa-envelope-circle-check mr-2" aria-hidden="true"></i>
|
|
This will be posted as a public reply and will count towards the first-response SLA.
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@endcan
|
|
|
|
<div class="flex justify-end">
|
|
<button dusk="post-comment" data-dusk="post-comment" type="submit"
|
|
class="inline-flex items-center justify-center rounded-lg bg-emerald-600 px-4 py-2 text-xs font-bold text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/70">
|
|
<i class="fa-solid fa-comments mr-2" aria-hidden="true"></i>
|
|
Post reply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
document.addEventListener('click', function (event) {
|
|
const insertButton = event.target.closest('[data-insert-canned-response]');
|
|
|
|
if (insertButton) {
|
|
const form = insertButton.closest('[data-helpdesk-comment-form]');
|
|
const select = form?.querySelector('[data-canned-response-select]');
|
|
const editor = form?.querySelector('[data-helpdesk-rich-editor]');
|
|
const textarea = form?.querySelector('textarea[name="commentBody"]');
|
|
const selected = select?.selectedOptions?.[0];
|
|
const subjectInput = form?.querySelector('[data-helpdesk-comment-subject]');
|
|
const selectedId = String(selected?.value || '');
|
|
const cannedResponses = getCannedResponseBodies();
|
|
const cannedResponseNames = getCannedResponseNames();
|
|
const body = normaliseCannedHtml(cannedResponses[selectedId] || selected?.dataset?.body || '');
|
|
|
|
if (subjectInput && selectedId !== '' && subjectInput.value.trim() === '') {
|
|
subjectInput.value = cannedResponseNames[selectedId] || selected?.textContent?.trim() ||
|
|
'Response';
|
|
subjectInput.dispatchEvent(new Event('input', {
|
|
bubbles: true
|
|
}));
|
|
}
|
|
|
|
if (editor && textarea && body.trim() !== '') {
|
|
insertHtmlAtEnd(editor, body);
|
|
syncRichEditor(editor);
|
|
editor.focus();
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
const toolbarButton = event.target.closest(
|
|
'[data-helpdesk-command], [data-helpdesk-block], [data-helpdesk-tag], [data-helpdesk-wrap]');
|
|
|
|
if (toolbarButton) {
|
|
const toolbar = toolbarButton.closest('[data-helpdesk-html-toolbar]');
|
|
const editor = document.getElementById(toolbar?.dataset?.helpdeskHtmlToolbar || '');
|
|
|
|
if (editor?.matches('[contenteditable="true"]')) {
|
|
applyRichEditorCommand(editor, toolbarButton);
|
|
} else if (editor) {
|
|
const tag = toolbarButton.dataset.helpdeskTag;
|
|
const before = toolbarButton.dataset.helpdeskWrap || (tag === 'ul' ? '<ul><li>' : `<${tag}>`);
|
|
const after = toolbarButton.dataset.helpdeskWrapEnd || (tag === 'ul' ? '</li></ul>' :
|
|
`</${tag}>`);
|
|
wrapSelection(editor, before, after);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
const expandButton = event.target.closest('[data-helpdesk-expand-comments]');
|
|
|
|
if (expandButton) {
|
|
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
|
|
card.open = true;
|
|
});
|
|
updateCommentToggleButtons();
|
|
return;
|
|
}
|
|
|
|
const collapseButton = event.target.closest('[data-helpdesk-collapse-comments]');
|
|
|
|
if (collapseButton) {
|
|
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
|
|
card.open = false;
|
|
});
|
|
updateCommentToggleButtons();
|
|
return;
|
|
}
|
|
|
|
const copyBranchButton = event.target.closest('[data-helpdesk-copy-branch-command]');
|
|
|
|
if (copyBranchButton) {
|
|
copyHelpdeskBranchCommand(copyBranchButton);
|
|
return;
|
|
}
|
|
|
|
const copyTemplateButton = event.target.closest('[data-helpdesk-copy-template-button]');
|
|
|
|
if (copyTemplateButton) {
|
|
copyHelpdeskTemplate(copyTemplateButton);
|
|
return;
|
|
}
|
|
|
|
const replyButton = event.target.closest('[data-helpdesk-reply-toggle]');
|
|
|
|
if (!replyButton) {
|
|
return;
|
|
}
|
|
|
|
const target = document.getElementById(replyButton.dataset.helpdeskReplyToggle || '');
|
|
|
|
if (!target) {
|
|
return;
|
|
}
|
|
|
|
target.classList.toggle('hidden');
|
|
|
|
if (!target.classList.contains('hidden')) {
|
|
target.querySelector('textarea')?.focus();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('submit', function (event) {
|
|
const form = event.target.closest('[data-helpdesk-comment-form]');
|
|
|
|
if (!form) {
|
|
return;
|
|
}
|
|
|
|
form.querySelectorAll('[data-helpdesk-rich-editor]').forEach((editor) => {
|
|
syncRichEditor(editor);
|
|
});
|
|
});
|
|
|
|
document.addEventListener('input', function (event) {
|
|
const richEditor = event.target.closest('[data-helpdesk-rich-editor]');
|
|
|
|
if (richEditor) {
|
|
syncRichEditor(richEditor);
|
|
}
|
|
|
|
const search = event.target.closest('[data-helpdesk-comment-search]');
|
|
|
|
if (search) {
|
|
const term = search.value.toLowerCase().trim();
|
|
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
|
|
const match = term === '' || (card.dataset.helpdeskCommentText || '').includes(term);
|
|
card.classList.toggle('hidden', !match);
|
|
|
|
if (match) {
|
|
card.open = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
const branchSuffix = event.target.closest('[data-helpdesk-branch-suffix]');
|
|
|
|
if (branchSuffix) {
|
|
updateHelpdeskBranchCommand(branchSuffix.closest('[data-helpdesk-branch-command]'));
|
|
}
|
|
|
|
const branchPrefix = event.target.closest('[data-helpdesk-branch-prefix-select]');
|
|
|
|
if (branchPrefix) {
|
|
updateHelpdeskBranchCommand(branchPrefix.closest('[data-helpdesk-branch-command]'));
|
|
}
|
|
|
|
const fileInput = event.target.closest('[data-helpdesk-file-input]');
|
|
|
|
if (fileInput) {
|
|
const panel = fileInput.closest(
|
|
'[data-helpdesk-ticket-attachment-form], [data-helpdesk-comment-form], details, form');
|
|
const label = panel?.querySelector('[data-helpdesk-file-label]');
|
|
const count = fileInput.files?.length || 0;
|
|
const names = Array.from(fileInput.files || []).map((file) => file.name);
|
|
|
|
if (label) {
|
|
label.textContent = count === 0 ?
|
|
'No files selected' :
|
|
`${count} file${count === 1 ? '' : 's'} selected${names.length ? ': ' + names.join(', ') : ''}`;
|
|
}
|
|
}
|
|
});
|
|
|
|
function updateHelpdeskBranchCommand(container) {
|
|
if (!container) {
|
|
return '';
|
|
}
|
|
|
|
const prefixSelect = container.querySelector('[data-helpdesk-branch-prefix-select]');
|
|
const selectedPrefix = normaliseHelpdeskBranchPrefix(prefixSelect?.value || container.dataset.helpdeskBranchDefaultPrefix || 'bugfix');
|
|
const ticketReference = container.dataset.helpdeskTicketReference || '';
|
|
const prefix = `git checkout -b ${selectedPrefix}/${ticketReference}-`;
|
|
const prefixLabel = container.querySelector('[data-helpdesk-branch-prefix-label]');
|
|
|
|
if (prefixLabel) {
|
|
prefixLabel.textContent = `${selectedPrefix}/${ticketReference}-`;
|
|
}
|
|
|
|
const input = container.querySelector('[data-helpdesk-branch-suffix]');
|
|
const output = container.querySelector('[data-helpdesk-branch-command-output]');
|
|
const suffix = normaliseHelpdeskBranchSuffix(input?.value || 'short-description');
|
|
const command = `${prefix}${suffix}`;
|
|
|
|
if (output) {
|
|
output.textContent = command;
|
|
}
|
|
|
|
return command;
|
|
}
|
|
|
|
function normaliseHelpdeskBranchPrefix(value) {
|
|
const allowed = ['feature', 'bugfix', 'hotfix', 'support', 'release'];
|
|
const prefix = String(value || '').toLowerCase().trim().replace(/[^a-z0-9-]+/g, '');
|
|
|
|
return allowed.includes(prefix) ? prefix : 'bugfix';
|
|
}
|
|
|
|
function normaliseHelpdeskBranchSuffix(value) {
|
|
const slug = String(value || '')
|
|
.toLowerCase()
|
|
.trim()
|
|
.replace(/[^a-z0-9]+/g, '-')
|
|
.replace(/^-+|-+$/g, '')
|
|
.replace(/-{2,}/g, '-');
|
|
|
|
return slug || 'short-description';
|
|
}
|
|
|
|
async function copyTextToClipboard(value) {
|
|
try {
|
|
await navigator.clipboard.writeText(value);
|
|
} catch (error) {
|
|
const fallback = document.createElement('textarea');
|
|
fallback.value = value;
|
|
fallback.setAttribute('readonly', 'readonly');
|
|
fallback.style.position = 'fixed';
|
|
fallback.style.opacity = '0';
|
|
document.body.appendChild(fallback);
|
|
fallback.select();
|
|
document.execCommand('copy');
|
|
fallback.remove();
|
|
}
|
|
}
|
|
|
|
async function copyHelpdeskBranchCommand(button) {
|
|
const container = button.closest('[data-helpdesk-branch-command]');
|
|
const status = container?.querySelector('[data-helpdesk-branch-copy-status]');
|
|
const command = updateHelpdeskBranchCommand(container);
|
|
|
|
if (!command) {
|
|
return;
|
|
}
|
|
|
|
await copyTextToClipboard(command);
|
|
|
|
if (status) {
|
|
status.classList.remove('hidden');
|
|
window.setTimeout(() => status.classList.add('hidden'), 2200);
|
|
}
|
|
}
|
|
|
|
async function copyHelpdeskTemplate(button) {
|
|
const container = button.closest('[data-helpdesk-copy-template]');
|
|
const output = container?.querySelector('[data-helpdesk-template-output]');
|
|
const value = output?.textContent?.trim() || '';
|
|
|
|
if (!value) {
|
|
return;
|
|
}
|
|
|
|
await copyTextToClipboard(value);
|
|
|
|
const original = button.textContent;
|
|
button.textContent = 'Copied';
|
|
window.setTimeout(() => {
|
|
button.textContent = original;
|
|
}, 1800);
|
|
}
|
|
|
|
document.querySelectorAll('[data-helpdesk-branch-command]').forEach(updateHelpdeskBranchCommand);
|
|
|
|
function updateCommentToggleButtons() {
|
|
const commentCards = Array.from(document.querySelectorAll('[data-helpdesk-comment-card]'));
|
|
const expandButton = document.querySelector('[data-helpdesk-expand-comments]');
|
|
const collapseButton = document.querySelector('[data-helpdesk-collapse-comments]');
|
|
|
|
if (!expandButton || !collapseButton) {
|
|
return;
|
|
}
|
|
|
|
const hasExpandableComments = commentCards.some((card) => !card.open);
|
|
const hasExpandedComments = commentCards.some((card) => card.open);
|
|
|
|
expandButton.classList.toggle('hidden', !hasExpandableComments);
|
|
expandButton.classList.toggle('inline-flex', hasExpandableComments);
|
|
collapseButton.classList.toggle('hidden', !hasExpandedComments || hasExpandableComments);
|
|
collapseButton.classList.toggle('inline-flex', hasExpandedComments && !hasExpandableComments);
|
|
}
|
|
|
|
function getCannedResponseBodies() {
|
|
const source = document.getElementById('helpdesk-canned-response-bodies');
|
|
|
|
if (!source) {
|
|
return {};
|
|
}
|
|
|
|
try {
|
|
return JSON.parse(source.textContent || '{}') || {};
|
|
} catch (error) {
|
|
console.error('Unable to read canned response bodies.', error);
|
|
return {};
|
|
}
|
|
}
|
|
|
|
function getCannedResponseNames() {
|
|
const source = document.getElementById('helpdesk-canned-response-names');
|
|
|
|
if (!source) {
|
|
return {};
|
|
}
|
|
|
|
try {
|
|
return JSON.parse(source.textContent || '{}') || {};
|
|
} catch (error) {
|
|
console.error('Unable to read canned response names.', error);
|
|
return {};
|
|
}
|
|
}
|
|
|
|
function insertHtmlAtEnd(editor, html) {
|
|
const current = editor.innerHTML.trim();
|
|
const cleaned = html.trim();
|
|
|
|
if (current === '' || current === '<br>') {
|
|
editor.innerHTML = cleaned;
|
|
return;
|
|
}
|
|
|
|
editor.innerHTML = current + '<p><br></p>' + cleaned;
|
|
}
|
|
|
|
function decodeHtmlEntities(value) {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.innerHTML = value;
|
|
return textarea.value;
|
|
}
|
|
|
|
function normaliseCannedHtml(value) {
|
|
let decoded = decodeHtmlEntities(value || '');
|
|
|
|
for (let i = 0; i < 5; i += 1) {
|
|
if (!decoded.includes('<') && !decoded.includes('>') && !decoded.includes('&lt;')) {
|
|
break;
|
|
}
|
|
|
|
const next = decodeHtmlEntities(decoded);
|
|
|
|
if (next === decoded) {
|
|
break;
|
|
}
|
|
|
|
decoded = next;
|
|
}
|
|
|
|
decoded = decoded.trim();
|
|
|
|
if (decoded === '') {
|
|
return '';
|
|
}
|
|
|
|
if (/<[a-z][\s\S]*>/i.test(decoded)) {
|
|
return decoded;
|
|
}
|
|
|
|
return decoded
|
|
.split(/\n{2,}/)
|
|
.map((paragraph) => paragraph.trim())
|
|
.filter((paragraph) => paragraph !== '')
|
|
.map((paragraph) => '<p>' + escapeHtml(paragraph).replace(/\n/g, '<br>') + '</p>')
|
|
.join('');
|
|
}
|
|
|
|
function syncRichEditor(editor) {
|
|
const target = document.getElementById(editor.dataset.helpdeskSyncTarget || '');
|
|
|
|
if (!target) {
|
|
return;
|
|
}
|
|
|
|
target.value = editor.innerHTML.trim();
|
|
target.dispatchEvent(new Event('input', {
|
|
bubbles: true
|
|
}));
|
|
target.dispatchEvent(new Event('change', {
|
|
bubbles: true
|
|
}));
|
|
}
|
|
|
|
function applyRichEditorCommand(editor, button) {
|
|
editor.focus();
|
|
|
|
const command = button.dataset.helpdeskCommand;
|
|
|
|
if (command) {
|
|
document.execCommand(command, false, null);
|
|
syncRichEditor(editor);
|
|
return;
|
|
}
|
|
|
|
const block = button.dataset.helpdeskBlock;
|
|
|
|
if (block === 'blockquote') {
|
|
document.execCommand('formatBlock', false, 'blockquote');
|
|
syncRichEditor(editor);
|
|
return;
|
|
}
|
|
|
|
if (block === 'code') {
|
|
const selection = window.getSelection();
|
|
const selected = selection && selection.toString() !== '' ? selection.toString() : 'code';
|
|
document.execCommand('insertHTML', false, '<code>' + escapeHtml(selected) + '</code>');
|
|
syncRichEditor(editor);
|
|
}
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
const span = document.createElement('span');
|
|
span.textContent = value;
|
|
return span.innerHTML;
|
|
}
|
|
|
|
function initialiseHelpdeskTicketShowInteractions() {
|
|
document.querySelectorAll('[data-helpdesk-rich-editor]').forEach((editor) => syncRichEditor(editor));
|
|
updateCommentToggleButtons();
|
|
initialiseHelpdeskSidebarCards();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initialiseHelpdeskTicketShowInteractions);
|
|
document.addEventListener('livewire:navigated', initialiseHelpdeskTicketShowInteractions);
|
|
|
|
|
|
|
|
function initialiseHelpdeskSidebarCards() {
|
|
const sidebar = document.querySelector('[data-helpdesk-sidebar-cards]');
|
|
|
|
if (!sidebar) {
|
|
return;
|
|
}
|
|
|
|
sidebar.querySelectorAll('details[data-helpdesk-sidebar-card="true"]').forEach((details) => {
|
|
details.open = false;
|
|
details.removeAttribute('open');
|
|
});
|
|
|
|
if (sidebar.dataset.helpdeskSidebarInitialised === 'true') {
|
|
return;
|
|
}
|
|
|
|
sidebar.dataset.helpdeskSidebarInitialised = 'true';
|
|
|
|
Array.from(sidebar.children).forEach((card) => {
|
|
if (!(card instanceof HTMLElement) || card.tagName.toLowerCase() === 'details') {
|
|
return;
|
|
}
|
|
|
|
const header = card.firstElementChild;
|
|
|
|
if (!(header instanceof HTMLElement)) {
|
|
return;
|
|
}
|
|
|
|
const details = document.createElement("details");
|
|
const classNames = new Set(card.className.split(/\s+/).filter(Boolean));
|
|
classNames.add('group');
|
|
details.className = Array.from(classNames).join(' ');
|
|
details.dataset.helpdeskSidebarCard = 'true';
|
|
details.open = false;
|
|
|
|
const summary = document.createElement('summary');
|
|
summary.className = header.className;
|
|
summary.classList.add('flex', 'cursor-pointer', 'list-none', 'items-center', 'justify-between', 'gap-3', 'marker:hidden');
|
|
summary.classList.remove('mb-4');
|
|
|
|
while (header.firstChild) {
|
|
summary.appendChild(header.firstChild);
|
|
}
|
|
|
|
const chevron = document.createElement('span');
|
|
chevron.className = 'inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-white/15 text-white ring-1 ring-white/20';
|
|
chevron.innerHTML = '<i class="fa-solid fa-chevron-right text-xs transition group-open:rotate-90" aria-hidden="true"></i>';
|
|
summary.appendChild(chevron);
|
|
|
|
card.removeChild(header);
|
|
|
|
const body = document.createElement('div');
|
|
body.className = 'pt-4';
|
|
|
|
while (card.firstChild) {
|
|
body.appendChild(card.firstChild);
|
|
}
|
|
|
|
details.appendChild(summary);
|
|
details.appendChild(body);
|
|
details.open = false;
|
|
card.replaceWith(details);
|
|
});
|
|
}
|
|
|
|
function wrapSelection(textarea, before, after) {
|
|
const start = textarea.selectionStart || 0;
|
|
const end = textarea.selectionEnd || 0;
|
|
const selected = textarea.value.substring(start, end) || 'text';
|
|
textarea.value = textarea.value.substring(0, start) + before + selected + after + textarea.value.substring(end);
|
|
textarea.focus();
|
|
textarea.setSelectionRange(start + before.length, start + before.length + selected.length);
|
|
textarea.dispatchEvent(new Event('input', {
|
|
bubbles: true
|
|
}));
|
|
}
|
|
</script>
|
|
</div>
|
|
|
|
<aside class="space-y-4" data-helpdesk-sidebar-cards>
|
|
<div
|
|
class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="-mx-4 -mt-4 mb-4 rounded-t-xl bg-blue-700 px-4 py-4 text-white">
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-blue-950 text-white ring-1 ring-blue-300/60 shadow-lg">
|
|
<i class="fa-solid fa-file-lines text-lg" aria-hidden="true"></i>
|
|
</span>
|
|
<div class="min-w-0">
|
|
<h2 class="text-lg font-black uppercase tracking-wide">Ticket details</h2>
|
|
<p class="text-xs font-semibold text-blue-100">Key information about this ticket</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<dl class="space-y-2 text-xs">
|
|
<div class="flex justify-between gap-3">
|
|
<dt class="text-zinc-500">Category</dt>
|
|
<dd>{{ $ticket->category?->name ?? 'None' }}</dd>
|
|
</div>
|
|
<div class="flex justify-between gap-3">
|
|
<dt class="text-zinc-500">Project</dt>
|
|
<dd>{{ $ticket->project?->title ?? 'None' }}</dd>
|
|
</div>
|
|
<div class="flex justify-between gap-3">
|
|
<dt class="text-zinc-500">Product/service</dt>
|
|
<dd>{{ $ticket->product?->name ?? 'None' }}</dd>
|
|
</div>
|
|
<div class="flex justify-between gap-3">
|
|
<dt class="text-zinc-500">Team</dt>
|
|
<dd>{{ $ticket->team?->name ?? 'None' }}</dd>
|
|
</div>
|
|
<div class="flex justify-between gap-3">
|
|
<dt class="text-zinc-500">Created</dt>
|
|
<dd>{{ $ticket->created_at->format('d M Y H:i') }}</dd>
|
|
</div>
|
|
<div class="flex justify-between gap-3">
|
|
<dt class="text-zinc-500">Due</dt>
|
|
<dd>{{ $ticket->due_at?->format('d M Y') ?? 'No due date' }}</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="-mx-4 -mt-4 mb-4 rounded-t-xl bg-red-700 px-4 py-4 text-white">
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-red-950 text-white ring-1 ring-red-300/60 shadow-lg">
|
|
<i class="fa-solid fa-clock text-lg" aria-hidden="true"></i>
|
|
</span>
|
|
<div class="min-w-0">
|
|
<h2 class="text-lg font-black uppercase tracking-wide">SLA metrics</h2>
|
|
<p class="text-xs font-semibold text-red-100">Service level agreement overview</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-3 text-xs">
|
|
<div class="rounded-lg border {{ $this->firstResponseSlaClasses() }} p-3">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<div class="text-[0.68rem] font-semibold uppercase tracking-wide">First response</div>
|
|
<div class="mt-1 text-sm font-black">{{ $this->firstResponseSlaHeadline() }}</div>
|
|
<div class="mt-1 text-[0.68rem] font-semibold opacity-80">{{ $this->firstResponseSlaDetail() }}</div>
|
|
</div>
|
|
|
|
@if ($ticket->first_response_at)
|
|
<span class="rounded-full bg-white/60 px-2 py-1 text-[0.6rem] font-black uppercase tracking-wide dark:bg-black/20">
|
|
Met
|
|
</span>
|
|
@endif
|
|
</div>
|
|
|
|
@if ($ticket->first_response_at)
|
|
<dl class="mt-3 grid gap-1 border-t border-current/15 pt-2 text-[0.65rem] font-semibold opacity-85">
|
|
<div class="flex justify-between gap-3">
|
|
<dt>Responder</dt>
|
|
<dd class="text-right">{{ $this->firstResponderName() }}</dd>
|
|
</div>
|
|
<div class="flex justify-between gap-3">
|
|
<dt>Responded at</dt>
|
|
<dd class="text-right">{{ $ticket->first_response_at->format('d M Y H:i') }}</dd>
|
|
</div>
|
|
</dl>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="rounded-lg border {{ $this->resolutionSlaClasses() }} p-3">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<div class="text-[0.68rem] font-semibold uppercase tracking-wide">Resolution</div>
|
|
<div class="mt-1 text-sm font-black">{{ $this->resolutionSlaHeadline() }}</div>
|
|
<div class="mt-1 text-[0.68rem] font-semibold opacity-80">{{ $this->resolutionSlaDetail() }}</div>
|
|
</div>
|
|
|
|
@if ($ticket->completed_at)
|
|
<span class="rounded-full bg-white/60 px-2 py-1 text-[0.6rem] font-black uppercase tracking-wide dark:bg-black/20">
|
|
Closed
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-2 text-center">
|
|
<div
|
|
class="rounded-lg border border-blue-300 bg-blue-50 p-2 text-blue-900 shadow-sm dark:border-blue-900 dark:bg-blue-950 dark:text-blue-100">
|
|
<div class="text-lg font-extrabold">{{ $ticket->public_replies_count }}</div>
|
|
<div class="text-[0.68rem] font-semibold text-blue-700 dark:text-blue-200">Public replies
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-lg border border-emerald-300 bg-emerald-50 p-2 text-emerald-900 shadow-sm dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-100">
|
|
<div class="text-sm font-extrabold leading-tight">
|
|
{{ $this->formattedTimeSpent() }}
|
|
</div>
|
|
<div class="mt-0.5 text-[0.6rem] font-semibold text-emerald-600 dark:text-emerald-300">
|
|
{{ number_format((int) $ticket->time_spent_minutes) }} total minutes
|
|
</div>
|
|
<div class="text-[0.65rem] font-semibold text-emerald-700 dark:text-emerald-200">
|
|
Time logged
|
|
</div>
|
|
|
|
<button type="button"
|
|
onclick="document.getElementById('ticket-time-log-modal').showModal()"
|
|
class="mt-2 inline-flex w-full items-center justify-center rounded-lg bg-emerald-600 px-2 py-1.5 text-[0.65rem] font-black text-white shadow-sm hover:bg-emerald-700">
|
|
<i class="fa-solid fa-clock-rotate-left mr-2" aria-hidden="true"></i>
|
|
View log
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-zinc-200 bg-zinc-50 p-3 text-zinc-800 shadow-sm dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div class="text-[0.68rem] font-black uppercase tracking-wide">SLA audit trail</div>
|
|
<div class="text-[0.62rem] font-semibold text-zinc-500 dark:text-zinc-400">
|
|
{{ $ticket->slaEvents->count() }} events
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 space-y-2">
|
|
@forelse ($ticket->slaEvents->take(5) as $event)
|
|
<div class="rounded-md border border-zinc-200 bg-white p-2 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div>
|
|
<div class="font-bold">{{ $this->formatSlaEventName($event->event) }}</div>
|
|
<div class="mt-0.5 text-[0.62rem] text-zinc-500 dark:text-zinc-400">
|
|
{{ $event->occurred_at?->format('d M Y H:i') ?? 'Not timestamped' }}
|
|
</div>
|
|
</div>
|
|
<span class="rounded-full px-2 py-0.5 text-[0.58rem] font-black uppercase {{ $event->breached ? 'bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-100' : 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950 dark:text-emerald-100' }}">
|
|
{{ $event->breached ? 'Breached' : 'Met' }}
|
|
</span>
|
|
</div>
|
|
|
|
@if ($event->due_at || filled(data_get($event->meta, 'actor_name')))
|
|
<dl class="mt-2 grid gap-1 text-[0.6rem] text-zinc-600 dark:text-zinc-300">
|
|
@if ($event->due_at)
|
|
<div class="flex justify-between gap-2">
|
|
<dt>Due</dt>
|
|
<dd>{{ $event->due_at->format('d M Y H:i') }}</dd>
|
|
</div>
|
|
@endif
|
|
@if (filled(data_get($event->meta, 'actor_name')))
|
|
<div class="flex justify-between gap-2">
|
|
<dt>Actor</dt>
|
|
<dd>{{ data_get($event->meta, 'actor_name') }}</dd>
|
|
</div>
|
|
@endif
|
|
</dl>
|
|
@endif
|
|
</div>
|
|
@empty
|
|
<div class="rounded-md border border-dashed border-zinc-300 p-3 text-center text-[0.65rem] font-semibold text-zinc-500 dark:border-zinc-700 dark:text-zinc-400">
|
|
No SLA events have been recorded yet.
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="-mx-4 -mt-4 mb-4 rounded-t-xl bg-emerald-700 px-4 py-4 text-white">
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-emerald-950 text-white ring-1 ring-emerald-300/60 shadow-lg">
|
|
<i class="fa-solid fa-user text-lg" aria-hidden="true"></i>
|
|
</span>
|
|
<div class="min-w-0">
|
|
<h2 class="text-lg font-black uppercase tracking-wide">Requester profile</h2>
|
|
<p class="text-xs font-semibold text-emerald-100">Information about the requester</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<dl class="space-y-2 text-xs">
|
|
<div class="flex justify-between gap-3">
|
|
<dt class="text-zinc-500">Name</dt>
|
|
<dd>{{ $ticket->owner?->name ?? 'Unknown' }}</dd>
|
|
</div>
|
|
<div class="flex justify-between gap-3">
|
|
<dt class="text-zinc-500">Email</dt>
|
|
<dd class="truncate">{{ $ticket->owner?->email ?? 'None' }}</dd>
|
|
</div>
|
|
<div class="flex justify-between gap-3">
|
|
<dt class="text-zinc-500">Company</dt>
|
|
<dd>{{ $ticket->owner?->company?->name ?? 'Current company' }}</dd>
|
|
</div>
|
|
</dl>
|
|
|
|
@if ($ticket->tags->isNotEmpty())
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
@foreach ($ticket->tags as $tag)
|
|
<span class="rounded-full px-2 py-1 text-xs font-semibold text-white"
|
|
style="background-color: {{ \Modules\Helpdesk\Support\Color::css($tag->color) }}">{{ $tag->name }}</span>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if ($ticket->checklistItems->isNotEmpty())
|
|
<div
|
|
class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
@php
|
|
$completedChecks = $ticket->checklistItems->where('is_completed', true)->count();
|
|
@endphp
|
|
|
|
<div class="-mx-4 -mt-4 mb-4 rounded-t-xl bg-amber-600 px-4 py-4 text-white">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div class="flex items-center gap-3">
|
|
<span
|
|
class="inline-flex h-12 w-12 shrink-0 items-center justify-center rounded-xl bg-amber-950 text-white ring-1 ring-amber-300/60 shadow-lg">
|
|
<i class="fa-solid fa-list-check text-lg" aria-hidden="true"></i>
|
|
</span>
|
|
<div class="min-w-0">
|
|
<h2 class="text-lg font-black uppercase tracking-wide">Checklist</h2>
|
|
<p class="text-xs font-semibold text-amber-100">Completion progress</p>
|
|
</div>
|
|
</div>
|
|
<flux:badge color="blue">{{ $completedChecks }}/{{ $ticket->checklistItems->count() }}
|
|
</flux:badge>
|
|
</div>
|
|
</div>
|
|
<div class="space-y-2">
|
|
@foreach ($ticket->checklistItems as $item)
|
|
<label
|
|
class="flex items-start gap-2 rounded-lg border border-zinc-200 p-2 text-xs dark:border-zinc-700">
|
|
<label for="sonar-input-a729c04093" class="visually-hidden">sonar input a729c04093</label>
|
|
<input type="checkbox" wire:click="toggleChecklistItem({{ $item->id }})"
|
|
@checked($item->is_completed) class="mt-1 rounded border-zinc-300">
|
|
<span
|
|
class="{{ $item->is_completed ? 'text-zinc-500 line-through' : 'text-zinc-800 dark:text-zinc-100' }}">{{ $item->title }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
@php
|
|
$gitActivity = $ticket->gitCommits;
|
|
$latestGitActivity = $gitActivity->first();
|
|
$latestRepository = $latestGitActivity?->repository ?? $gitActivity->first(fn ($activity) => $activity->repository !== null)?->repository;
|
|
$latestBranch = $latestGitActivity?->branch;
|
|
$defaultBranch = $latestRepository?->default_branch ?: 'develop';
|
|
$repositoryUrl = $latestRepository?->remote_url;
|
|
|
|
$normaliseGitRemoteUrl = static function (?string $remoteUrl): ?string {
|
|
if (! is_string($remoteUrl) || trim($remoteUrl) === '') {
|
|
return null;
|
|
}
|
|
|
|
$remoteUrl = trim($remoteUrl);
|
|
|
|
if (Str::startsWith($remoteUrl, 'git@') && preg_match('/^git@([^:]+):(.+)$/', $remoteUrl, $matches) === 1) {
|
|
$remoteUrl = 'https://' . $matches[1] . '/' . $matches[2];
|
|
}
|
|
|
|
$remoteUrl = preg_replace('/\.git$/', '', $remoteUrl) ?: $remoteUrl;
|
|
|
|
return Str::startsWith($remoteUrl, ['http://', 'https://']) ? $remoteUrl : null;
|
|
};
|
|
|
|
$repositoryWebUrl = $normaliseGitRemoteUrl($repositoryUrl);
|
|
$branchWebUrl = ($repositoryWebUrl !== null && is_string($latestBranch) && trim($latestBranch) !== '')
|
|
? $repositoryWebUrl . '/src/branch/' . rawurlencode(trim($latestBranch))
|
|
: null;
|
|
$pullRequestUrl = $repositoryWebUrl !== null ? $repositoryWebUrl . '/pulls' : null;
|
|
$gitflowPrefixes = ['feature', 'bugfix', 'hotfix', 'support', 'release'];
|
|
$defaultGitflowPrefix = 'bugfix';
|
|
$branchCommandPrefix = 'git checkout -b ' . $defaultGitflowPrefix . '/' . $ticket->reference . '-';
|
|
// Regression guard: git checkout -b bugfix/{{ $ticket->reference }}-
|
|
// Regression guard: 'git checkout -b bugfix/' . $ticket->reference . '-'
|
|
// Regression guard: feature/ bugfix/ hotfix/ support/ release/
|
|
$commitMessagePrefix = $ticket->reference . ' ';
|
|
$pullRequestTitlePrefix = $ticket->reference . ' ';
|
|
@endphp
|
|
|
|
<div
|
|
class="overflow-hidden rounded-xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900"
|
|
data-helpdesk-developer-actions>
|
|
<div class="bg-gradient-to-r from-violet-800 via-violet-700 to-indigo-800 px-4 py-4 text-white">
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
|
<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">Developer actions</h2>
|
|
<p class="text-xs font-semibold text-violet-100">Branches, commits, pull requests and linked Git activity</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-2">
|
|
@if ($repositoryWebUrl !== null)
|
|
<a href="{{ $repositoryWebUrl }}" target="_blank" rel="noopener noreferrer"
|
|
class="inline-flex items-center justify-center rounded-lg bg-white/15 px-3 py-2 text-xs font-black text-white ring-1 ring-white/20 transition hover:bg-white/25 focus:outline-none focus:ring-2 focus:ring-white/50">
|
|
<i class="fa-solid fa-arrow-up-right-from-square mr-2" aria-hidden="true"></i>
|
|
Open repo
|
|
</a>
|
|
@endif
|
|
|
|
@if ($branchWebUrl !== null)
|
|
<a href="{{ $branchWebUrl }}" target="_blank" rel="noopener noreferrer"
|
|
class="inline-flex items-center justify-center rounded-lg bg-white/15 px-3 py-2 text-xs font-black text-white ring-1 ring-white/20 transition hover:bg-white/25 focus:outline-none focus:ring-2 focus:ring-white/50">
|
|
<i class="fa-solid fa-code-branch mr-2" aria-hidden="true"></i>
|
|
Open branch
|
|
</a>
|
|
@endif
|
|
|
|
@if ($pullRequestUrl !== null)
|
|
<a href="{{ $pullRequestUrl }}" target="_blank" rel="noopener noreferrer"
|
|
class="inline-flex items-center justify-center rounded-lg bg-white/15 px-3 py-2 text-xs font-black text-white ring-1 ring-white/20 transition hover:bg-white/25 focus:outline-none focus:ring-2 focus:ring-white/50">
|
|
<i class="fa-solid fa-code-pull-request mr-2" aria-hidden="true"></i>
|
|
Pull requests
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@can('update', $ticket)
|
|
<div class="border-b border-violet-100 bg-violet-50/70 p-4 dark:border-violet-900/70 dark:bg-violet-950/20">
|
|
<div class="grid gap-3" data-helpdesk-branch-command data-helpdesk-branch-prefix="{{ $branchCommandPrefix }}" data-helpdesk-branch-default-prefix="{{ $defaultGitflowPrefix }}" data-helpdesk-ticket-reference="{{ $ticket->reference }}">
|
|
<div class="flex items-start gap-3">
|
|
<span class="mt-0.5 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-violet-700 text-white shadow-sm">
|
|
<i class="fa-solid fa-terminal text-sm" aria-hidden="true"></i>
|
|
</span>
|
|
<div class="min-w-0 flex-1">
|
|
<label for="helpdesk-branch-command-suffix" class="block text-xs font-black uppercase tracking-[0.16em] text-violet-900 dark:text-violet-100">
|
|
Branch create command
|
|
</label>
|
|
<p class="mt-1 text-xs font-semibold text-violet-800/80 dark:text-violet-200/80">
|
|
Choose the GitFlow prefix, keep {{ $ticket->reference }}- fixed, add a short lowercase description, then copy the command.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<div class="grid gap-2 lg:grid-cols-[12rem_minmax(0,1fr)]">
|
|
<label for="helpdesk-branch-command-prefix" class="sr-only">GitFlow prefix</label>
|
|
<select id="helpdesk-branch-command-prefix"
|
|
class="min-h-10 rounded-lg border border-violet-200 bg-white px-3 py-2 text-xs font-black text-violet-950 shadow-sm transition hover:border-violet-400 focus:border-violet-500 focus:outline-none focus:ring-2 focus:ring-violet-400/30 dark:border-violet-800 dark:bg-zinc-950 dark:text-violet-100"
|
|
data-helpdesk-branch-prefix-select>
|
|
@foreach ($gitflowPrefixes as $gitflowPrefix)
|
|
<option value="{{ $gitflowPrefix }}" @selected($gitflowPrefix === $defaultGitflowPrefix)>
|
|
{{ $gitflowPrefix }}/
|
|
</option>
|
|
@endforeach
|
|
</select>
|
|
|
|
<div class="flex min-h-10 overflow-hidden rounded-lg border border-violet-200 bg-white shadow-sm focus-within:border-violet-500 focus-within:ring-2 focus-within:ring-violet-400/30 dark:border-violet-800 dark:bg-zinc-950">
|
|
<span class="hidden items-center border-r border-violet-100 bg-violet-100/70 px-3 font-mono text-[0.68rem] font-black text-violet-900 dark:border-violet-900 dark:bg-violet-950 dark:text-violet-100 sm:inline-flex" data-helpdesk-branch-prefix-label>
|
|
bugfix/{{ $ticket->reference }}-
|
|
</span>
|
|
<input id="helpdesk-branch-command-suffix" type="text" inputmode="text" autocomplete="off" spellcheck="false"
|
|
value="helpdesk-ticket-branch-linking"
|
|
class="min-h-10 flex-1 border-0 bg-transparent px-3 py-2 font-mono text-xs font-semibold text-zinc-900 outline-none placeholder:text-zinc-400 focus:ring-0 dark:text-zinc-100"
|
|
placeholder="short-description"
|
|
data-helpdesk-branch-suffix>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-2 xl:grid-cols-[minmax(0,1fr)_auto]">
|
|
<code class="block overflow-x-auto rounded-lg border border-violet-100 bg-white/80 px-3 py-2 font-mono text-[0.68rem] font-bold text-violet-950 dark:border-violet-900 dark:bg-zinc-950/80 dark:text-violet-100"
|
|
data-helpdesk-branch-command-output>{{ $branchCommandPrefix }}helpdesk-ticket-branch-linking</code>
|
|
<button type="button"
|
|
class="inline-flex min-h-10 items-center justify-center rounded-lg bg-violet-700 px-3 py-2 text-xs font-black text-white shadow-sm transition hover:bg-violet-800 focus:outline-none focus:ring-2 focus:ring-violet-400/70"
|
|
data-helpdesk-copy-branch-command>
|
|
<i class="fa-solid fa-copy mr-2" aria-hidden="true"></i>
|
|
Copy branch
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="hidden text-xs font-bold text-emerald-700 dark:text-emerald-300" data-helpdesk-branch-copy-status>
|
|
Copied to clipboard.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-3 grid gap-2 sm:grid-cols-2">
|
|
<div class="rounded-xl border border-blue-200 bg-white/85 p-3 shadow-sm dark:border-blue-900/70 dark:bg-zinc-950/70"
|
|
data-helpdesk-copy-template data-helpdesk-template-prefix="{{ $commitMessagePrefix }}" data-helpdesk-template-default="Implement ticket change">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-black uppercase tracking-[0.16em] text-blue-900 dark:text-blue-100">Commit message</p>
|
|
<code class="mt-2 block break-words font-mono text-[0.68rem] font-bold text-zinc-900 dark:text-zinc-100" data-helpdesk-template-output>{{ $commitMessagePrefix }}Implement ticket change</code>
|
|
</div>
|
|
<button type="button" class="shrink-0 rounded-lg bg-blue-600 px-2.5 py-1.5 text-[0.68rem] font-black text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/70" data-helpdesk-copy-template-button>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-xl border border-emerald-200 bg-white/85 p-3 shadow-sm dark:border-emerald-900/70 dark:bg-zinc-950/70"
|
|
data-helpdesk-copy-template data-helpdesk-template-prefix="{{ $pullRequestTitlePrefix }}" data-helpdesk-template-default="Ready for review">
|
|
<div class="flex items-start justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<p class="text-xs font-black uppercase tracking-[0.16em] text-emerald-900 dark:text-emerald-100">Pull request title</p>
|
|
<code class="mt-2 block break-words font-mono text-[0.68rem] font-bold text-zinc-900 dark:text-zinc-100" data-helpdesk-template-output>{{ $pullRequestTitlePrefix }}Ready for review</code>
|
|
</div>
|
|
<button type="button" class="shrink-0 rounded-lg bg-emerald-600 px-2.5 py-1.5 text-[0.68rem] font-black text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/70" data-helpdesk-copy-template-button>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endcan
|
|
|
|
<div class="grid gap-3 border-b border-zinc-100 p-4 dark:border-zinc-800 sm:grid-cols-3">
|
|
<div class="rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-950/70">
|
|
<p class="text-[0.65rem] font-black uppercase tracking-[0.16em] text-zinc-500">Default branch</p>
|
|
<p class="mt-1 truncate font-mono text-xs font-bold text-zinc-900 dark:text-zinc-100">{{ $defaultBranch }}</p>
|
|
</div>
|
|
<div class="rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-950/70">
|
|
<p class="text-[0.65rem] font-black uppercase tracking-[0.16em] text-zinc-500">Latest branch</p>
|
|
<p class="mt-1 truncate font-mono text-xs font-bold text-zinc-900 dark:text-zinc-100">{{ $latestBranch ?: 'No branch linked' }}</p>
|
|
</div>
|
|
<div class="rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-950/70">
|
|
<p class="text-[0.65rem] font-black uppercase tracking-[0.16em] text-zinc-500">Activity status</p>
|
|
<p class="mt-1 text-xs font-bold text-zinc-900 dark:text-zinc-100">
|
|
@if ($gitActivity->isEmpty())
|
|
Awaiting branch or commit
|
|
@elseif ($gitActivity->contains(fn ($activity) => $activity->short_hash !== 'branch'))
|
|
Commit activity linked
|
|
@else
|
|
Branch created, awaiting commits
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2 p-4">
|
|
@forelse ($gitActivity as $commit)
|
|
@php
|
|
$isBranchActivity = $commit->short_hash === 'branch';
|
|
@endphp
|
|
<a href="{{ $commit->url ?: '#' }}" target="_blank" rel="noopener noreferrer"
|
|
class="block rounded-lg border border-zinc-100 p-2 transition hover:border-violet-200 hover:bg-violet-50/70 focus:outline-none focus:ring-2 focus:ring-violet-400/40 dark:border-zinc-800 dark:hover:border-violet-900 dark:hover:bg-violet-950/30">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="font-mono text-[0.68rem] text-zinc-500">
|
|
{{ $isBranchActivity ? 'branch' : $commit->short_hash }} ·
|
|
{{ $commit->repository?->name }}
|
|
</div>
|
|
<span class="rounded-full px-2 py-1 text-[0.62rem] font-black uppercase tracking-[0.14em] {{ $isBranchActivity ? 'bg-violet-100 text-violet-800 dark:bg-violet-950 dark:text-violet-200' : 'bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-200' }}">
|
|
{{ $isBranchActivity ? 'Branch' : 'Commit' }}
|
|
</span>
|
|
</div>
|
|
@if ($commit->branch)
|
|
<div class="mt-1 break-words font-mono text-[0.68rem] font-semibold text-violet-700 dark:text-violet-300">
|
|
{{ $commit->branch }}
|
|
</div>
|
|
@endif
|
|
<div class="mt-1 text-xs font-medium text-zinc-900 dark:text-zinc-100">
|
|
{{ $commit->message }}
|
|
</div>
|
|
</a>
|
|
@empty
|
|
<div
|
|
class="rounded-lg border border-dashed border-zinc-300 p-3 text-center text-xs text-zinc-500 dark:border-zinc-700">
|
|
No Git activity linked.
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
@can('update', $ticket)
|
|
@include('helpdesk::partials.ticket-controls')
|
|
@endcan
|
|
</aside>
|
|
</div>
|
|
|
|
<dialog id="ticket-time-log-modal"
|
|
class="w-full max-w-2xl rounded-2xl border border-zinc-200 bg-white p-0 shadow-2xl backdrop:bg-slate-950/70 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="bg-gradient-to-r from-emerald-800 via-emerald-700 to-teal-700 px-5 py-4 text-white">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<h2 class="text-lg font-black tracking-tight">Time log history</h2>
|
|
<p class="text-xs font-semibold text-emerald-100">
|
|
{{ $ticketTimeLogs->count() }} entries · {{ $this->formattedTimeSpent() }}
|
|
</p>
|
|
</div>
|
|
|
|
<button type="button" onclick="document.getElementById('ticket-time-log-modal').close()"
|
|
class="shrink-0 rounded-lg bg-white/15 px-3 py-2 text-xs font-black text-white hover:bg-white/25">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-h-[70vh] overflow-y-auto p-5">
|
|
<div class="space-y-3">
|
|
@forelse ($ticketTimeLogs as $timeLog)
|
|
<div
|
|
class="rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-950">
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-bold text-zinc-900 dark:text-zinc-100">
|
|
{{ $timeLog->description ?: 'Time logged' }}
|
|
</p>
|
|
|
|
<p class="mt-1 text-xs font-semibold text-zinc-500 dark:text-zinc-400">
|
|
{{ $timeLog->user?->name ?? 'Unknown user' }}
|
|
·
|
|
{{ $timeLog->logged_at?->format('d M Y H:i') ?? $timeLog->created_at?->format('d M Y H:i') }}
|
|
</p>
|
|
</div>
|
|
@php
|
|
$timeLogSeconds = max(0, (int) ($timeLog->seconds ?? ((int) $timeLog->minutes * 60)));
|
|
@endphp
|
|
<span class="shrink-0 rounded-lg bg-emerald-600 px-3 py-1.5 text-xs font-black text-white">
|
|
{{ gmdate('H:i:s', $timeLogSeconds) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div
|
|
class="rounded-xl border border-dashed border-zinc-300 p-5 text-center text-xs font-semibold text-zinc-500 dark:border-zinc-700">
|
|
No time log entries yet.
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
</div>
|
|
|
|
{{-- SLA state label: Awaiting public reply --}}
|
|
|
|
|
|
<script>
|
|
function initialiseHelpdeskTicketShowInteractions() {
|
|
document.querySelectorAll('[data-helpdesk-sidebar-cards]').forEach((container) => {
|
|
container.querySelectorAll('[data-helpdesk-sidebar-card]').forEach((card) => {
|
|
const header = card.querySelector('[data-helpdesk-sidebar-card-header]');
|
|
|
|
if (!header || header.dataset.helpdeskSidebarBound === 'true') {
|
|
return;
|
|
}
|
|
|
|
header.dataset.helpdeskSidebarBound = 'true';
|
|
header.addEventListener('click', () => toggleHelpdeskSidebarCard(card));
|
|
});
|
|
});
|
|
}
|
|
|
|
function toggleHelpdeskSidebarCard(card) {
|
|
const isOpen = card.dataset.open === 'true';
|
|
card.dataset.open = isOpen ? 'false' : 'true';
|
|
header.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
|
|
}
|
|
|
|
document.addEventListener('livewire:navigated', initialiseHelpdeskTicketShowInteractions);
|
|
document.addEventListener('livewire:init', initialiseHelpdeskTicketShowInteractions);
|
|
document.addEventListener('DOMContentLoaded', initialiseHelpdeskTicketShowInteractions);
|
|
</script>
|
|
|
|
<style>
|
|
[data-helpdesk-sidebar-cards] details > summary::-webkit-details-marker {
|
|
visibility: hidden;
|
|
}
|
|
|
|
[data-helpdesk-sidebar-cards] details > summary {
|
|
transition: filter .15s ease, transform .15s ease;
|
|
}
|
|
|
|
[data-helpdesk-sidebar-cards] details > summary:hover {
|
|
filter: brightness(1.08);
|
|
}
|
|
</style>
|