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

workign comments strucuture

Browse Source
This commit is contained in:
Mark Gregory
2026-06-17 10:09:42 +01:00
parent 878f383f7a
commit fe05ef8104
13 changed files with 575 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php
+126 -15
View File
@@ -2,6 +2,14 @@
'resources/css/app.css',
'resources/js/app.js',
])
@php
$currentUser = auth()->user();
$currentCompany = $currentUser?->company;
$canSeeInternalNotes = (bool) ($currentCompany?->is_system_company ?? false)
|| \Illuminate\Support\Str::lower((string) ($currentCompany?->slug ?? '')) === 'mpba-limited'
|| \Illuminate\Support\Str::contains(\Illuminate\Support\Str::lower((string) ($currentCompany?->name ?? '')), 'mpba');
$visibleCommentCount = $ticket->comments->count();
@endphp
<div class="hd-helpdesk-surface space-y-6" dusk="helpdesk-ticket-show">
<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">
@@ -71,13 +79,38 @@
@endif
<section class="space-y-4">
<h2 class="text-lg font-semibold text-zinc-900 dark:text-white">Conversation</h2>
<details open class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
<summary class="flex cursor-pointer list-none items-center justify-between gap-4 bg-gradient-to-r from-slate-950 via-slate-900 to-red-950 px-5 py-4 text-white marker:hidden">
<div>
<h2 class="flex items-center gap-2 text-lg font-extrabold">
<i class="fa-solid fa-comments" aria-hidden="true"></i>
Conversation
</h2>
<p class="mt-1 text-sm font-medium text-red-50/85">Lotus Notes-style document responses and responses to responses.</p>
</div>
<span class="inline-flex items-center gap-2 rounded-full bg-white/15 px-3 py-1 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>
@if ($ticket->comments->isNotEmpty())
@include('helpdesk::partials.comment-thread', ['comments' => $ticket->comments, 'level' => 0, 'ticket' => $ticket])
@else
<div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-zinc-500 dark:border-zinc-700">No responses yet.</div>
@endif
<div class="space-y-4 p-5">
<div class="grid gap-3 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, GUID, UNID, author or text..." class="block w-full rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm 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>
<button type="button" class="inline-flex items-center justify-center rounded-xl bg-red-600 px-4 py-2 text-sm 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>
</div>
@if ($ticket->comments->isNotEmpty())
@include('helpdesk::partials.comment-thread', ['comments' => $ticket->comments, 'level' => 0, 'ticket' => $ticket, 'canSeeInternalNotes' => $canSeeInternalNotes])
@else
<div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center 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="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-comment-form>
@@ -116,19 +149,33 @@
<div>
<label for="ticket-comment-body" class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-200">Comment</label>
<textarea id="ticket-comment-body" dusk="ticket-comment-editor" name="commentBody" rows="5" placeholder="Write a professional response..." required class="block w-full rounded-xl border border-zinc-300 bg-white p-3 text-sm 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">{{ old('commentBody') }}</textarea>
<div class="mb-2 flex flex-wrap gap-2" data-helpdesk-html-toolbar="ticket-comment-body">
<button type="button" data-helpdesk-tag="strong" class="rounded-lg border px-2 py-1 text-xs font-black">B</button>
<button type="button" data-helpdesk-tag="em" class="rounded-lg border px-2 py-1 text-xs italic">I</button>
<button type="button" data-helpdesk-tag="u" class="rounded-lg border px-2 py-1 text-xs underline">U</button>
<button type="button" data-helpdesk-tag="ul" class="rounded-lg border px-2 py-1 text-xs">List</button>
<button type="button" data-helpdesk-wrap="<blockquote>" data-helpdesk-wrap-end="</blockquote>" class="rounded-lg border px-2 py-1 text-xs">Quote</button>
<button type="button" data-helpdesk-wrap="<code>" data-helpdesk-wrap-end="</code>" class="rounded-lg border px-2 py-1 text-xs">Code</button>
</div>
<textarea id="ticket-comment-body" dusk="ticket-comment-editor" name="commentBody" rows="6" placeholder="Write a professional HTML response..." required class="block w-full rounded-xl border border-zinc-300 bg-white p-3 text-sm 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">{{ old('commentBody') }}</textarea>
</div>
@can('update', $ticket)
<label class="mt-4 flex items-center gap-2 text-sm font-semibold text-zinc-700 dark:text-zinc-200">
<input type="checkbox" name="internal" value="1" @checked(old('internal')) class="rounded border-zinc-300">
Internal note only
</label>
@if ($canSeeInternalNotes)
<label class="mt-4 flex items-center gap-2 text-sm font-semibold text-zinc-700 dark:text-zinc-200">
<input type="checkbox" name="internal" value="1" @checked(old('internal')) class="rounded border-zinc-300">
MPBA internal note only
</label>
@endif
@endcan
<div class="mt-4">
<label class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-200">Attach files</label>
<input name="attachments[]" type="file" multiple class="block w-full rounded-lg border border-zinc-300 bg-white p-2 text-sm dark:border-zinc-700 dark:bg-zinc-950" />
<div class="mt-4 rounded-xl border border-dashed border-blue-300 p-3 dark:border-blue-800">
<label class="inline-flex cursor-pointer items-center gap-2 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-thumbtack" aria-hidden="true"></i>
Pin attachments
<input name="attachments[]" type="file" multiple class="sr-only" data-helpdesk-file-input>
</label>
<span class="ml-2 text-xs font-semibold text-zinc-500" data-helpdesk-file-label>No files pinned</span>
@error('attachments.*') <div class="mt-2 text-sm text-red-600">{{ $message }}</div> @enderror
</div>
@@ -149,7 +196,7 @@
const select = form?.querySelector('[data-canned-response-select]');
const textarea = form?.querySelector('textarea[name="commentBody"]');
const selected = select?.selectedOptions?.[0];
const body = selected?.dataset?.body || '';
const body = decodeHtmlEntities(selected?.dataset?.body || '');
if (textarea && body.trim() !== '') {
textarea.value = textarea.value.trim() === ''
@@ -162,6 +209,29 @@
return;
}
const toolbarButton = event.target.closest('[data-helpdesk-tag], [data-helpdesk-wrap]');
if (toolbarButton) {
const toolbar = toolbarButton.closest('[data-helpdesk-html-toolbar]');
const textarea = document.getElementById(toolbar?.dataset?.helpdeskHtmlToolbar || '');
if (textarea) {
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(textarea, 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);
return;
}
const replyButton = event.target.closest('[data-helpdesk-reply-toggle]');
if (! replyButton) {
@@ -180,6 +250,47 @@
target.querySelector('textarea')?.focus();
}
});
document.addEventListener('input', function (event) {
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 fileInput = event.target.closest('[data-helpdesk-file-input]');
if (fileInput) {
const label = fileInput.closest('div')?.querySelector('[data-helpdesk-file-label]');
const count = fileInput.files?.length || 0;
if (label) {
label.textContent = count === 0 ? 'No files pinned' : `${count} file${count === 1 ? '' : 's'} pinned`;
}
}
});
function decodeHtmlEntities(value) {
const textarea = document.createElement('textarea');
textarea.innerHTML = value;
return textarea.value;
}
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>