WORKIGN COMMENTS
This commit is contained in:
Mark Gregory
@@ -80,8 +80,14 @@
|
||||
@endif
|
||||
</section>
|
||||
|
||||
<section class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900" dusk="ticket-comment-form">
|
||||
<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">
|
||||
@csrf
|
||||
<h2 class="mb-4 text-base font-semibold text-zinc-900 dark:text-white">Add reply</h2>
|
||||
@if (session('ticket-comment-added'))
|
||||
<div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm font-bold text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100">
|
||||
{{ session('ticket-comment-added') }}
|
||||
</div>
|
||||
@endif
|
||||
@if ($cannedResponses->isNotEmpty())
|
||||
<div class="mb-4 grid gap-3 md:grid-cols-[1fr_auto]">
|
||||
<flux:select wire:model="canned_response_id" label="Canned response">
|
||||
@@ -96,20 +102,7 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="ticket-comment-body" class="block text-sm font-medium text-zinc-700 dark:text-zinc-200">Comment</label>
|
||||
<textarea
|
||||
id="ticket-comment-body"
|
||||
dusk="ticket-comment-body"
|
||||
wire:model.live="commentBody"
|
||||
rows="5"
|
||||
placeholder="Write a professional response..."
|
||||
class="block w-full rounded-xl border border-zinc-300 bg-white p-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
|
||||
></textarea>
|
||||
@error('commentBody')
|
||||
<div class="text-sm text-red-600">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<x-helpdesk::html-editor dusk="ticket-comment-editor" wire:model="commentBody" label="Comment" rows="5" placeholder="Write a professional response..." />
|
||||
|
||||
@can('update', $ticket)
|
||||
<div class="mt-4">
|
||||
@@ -119,25 +112,17 @@
|
||||
|
||||
<div class="mt-4">
|
||||
<label class="mb-2 block text-sm font-medium text-zinc-700 dark:text-zinc-200">Attach files</label>
|
||||
<input wire:model="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" />
|
||||
<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" />
|
||||
@error('attachments.*') <div class="mt-2 text-sm text-red-600">{{ $message }}</div> @enderror
|
||||
</div>
|
||||
|
||||
<div class="mt-5 flex justify-end">
|
||||
<button
|
||||
dusk="post-comment"
|
||||
type="button"
|
||||
wire:click.prevent="addComment"
|
||||
wire:target="addComment"
|
||||
wire:loading.attr="disabled"
|
||||
class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/60 disabled:cursor-not-allowed disabled:opacity-70"
|
||||
>
|
||||
<button dusk="post-comment" type="submit" class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-4 py-2 text-sm 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>
|
||||
<span wire:loading.remove wire:target="addComment">Post reply</span>
|
||||
<span wire:loading wire:target="addComment">Posting...</span>
|
||||
<span>Post reply</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<aside class="space-y-6">
|
||||
|
||||
@@ -43,31 +43,14 @@
|
||||
</div>
|
||||
|
||||
@if (($reply_parent_id ?? null) === $comment->id)
|
||||
<div class="mt-4 rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-900 dark:bg-blue-950/40">
|
||||
<div class="space-y-2">
|
||||
<label for="ticket-reply-body-{{ $comment->id }}" class="block text-sm font-medium text-zinc-700 dark:text-zinc-200">Reply</label>
|
||||
<textarea
|
||||
id="ticket-reply-body-{{ $comment->id }}"
|
||||
dusk="ticket-reply-body"
|
||||
wire:key="reply-editor-{{ $comment->id }}"
|
||||
wire:model.live="replyBody"
|
||||
rows="4"
|
||||
placeholder="Write a reply..."
|
||||
class="block w-full rounded-xl border border-zinc-300 bg-white p-4 text-sm text-zinc-900 shadow-sm outline-none transition focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/30 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100"
|
||||
></textarea>
|
||||
@error('replyBody')
|
||||
<div class="text-sm text-red-600">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
<form wire:submit="addReply" class="mt-4 rounded-xl border border-blue-200 bg-blue-50 p-4 dark:border-blue-900 dark:bg-blue-950/40">
|
||||
<x-helpdesk::html-editor wire:key="reply-editor-{{ $comment->id }}" wire:model="replyBody" label="Reply" rows="4" placeholder="Write a reply..." />
|
||||
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<button type="button" wire:click.prevent="cancelReply" class="inline-flex items-center justify-center rounded-xl bg-slate-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400/60">Cancel</button>
|
||||
<button type="button" wire:click.prevent="addReply" wire:target="addReply" wire:loading.attr="disabled" class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/60 disabled:cursor-not-allowed disabled:opacity-70">
|
||||
<span wire:loading.remove wire:target="addReply">Post reply</span>
|
||||
<span wire:loading wire:target="addReply">Posting...</span>
|
||||
</button>
|
||||
<flux:button type="button" wire:click="cancelReply" variant="ghost" class="!bg-slate-600 !text-white hover:!bg-slate-700 focus:!ring-slate-400/60">Cancel</flux:button>
|
||||
<flux:button type="submit" variant="primary" class="!bg-emerald-600 !text-white hover:!bg-emerald-700 focus:!ring-emerald-400/60">Post reply</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
@if ($commentReplies->isNotEmpty())
|
||||
|
||||
Reference in New Issue
Block a user