non working comments
This commit is contained in:
Mark Gregory
@@ -80,7 +80,7 @@
|
||||
@endif
|
||||
</section>
|
||||
|
||||
<form wire:submit="addComment" class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<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">
|
||||
<h2 class="mb-4 text-base font-semibold text-zinc-900 dark:text-white">Add reply</h2>
|
||||
@if ($cannedResponses->isNotEmpty())
|
||||
<div class="mb-4 grid gap-3 md:grid-cols-[1fr_auto]">
|
||||
@@ -96,7 +96,20 @@
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<x-helpdesk::html-editor dusk="ticket-comment-editor" wire:model="commentBody" label="Comment" rows="5" placeholder="Write a professional response..." />
|
||||
<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>
|
||||
|
||||
@can('update', $ticket)
|
||||
<div class="mt-4">
|
||||
@@ -111,12 +124,20 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-5 flex justify-end">
|
||||
<flux:button dusk="post-comment" type="submit" variant="primary" icon="chat-bubble-left-right" class="!bg-emerald-600 !text-white hover:!bg-emerald-700 focus:!ring-emerald-400/60" wire:loading.attr="disabled">
|
||||
<span wire:loading.remove>Post reply</span>
|
||||
<span wire:loading>Posting...</span>
|
||||
</flux:button>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<aside class="space-y-6">
|
||||
|
||||
@@ -43,14 +43,31 @@
|
||||
</div>
|
||||
|
||||
@if (($reply_parent_id ?? null) === $comment->id)
|
||||
<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 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>
|
||||
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if ($commentReplies->isNotEmpty())
|
||||
|
||||
@@ -60,11 +60,9 @@ final class HelpdeskTicketBrowserTest extends DuskTestCase
|
||||
$browser->loginAs($user)
|
||||
->visitRoute('helpdesk.tickets.show', $ticket)
|
||||
->waitFor('@helpdesk-ticket-show')
|
||||
->assertSee('Browser response ticket');
|
||||
|
||||
$this->setHelpdeskEditor($browser, 'ticket-comment-editor', '<p>First browser response</p>');
|
||||
|
||||
$browser->press('@post-comment')
|
||||
->assertSee('Browser response ticket')
|
||||
->type('@ticket-comment-body', 'First browser response')
|
||||
->press('@post-comment')
|
||||
->waitForText('First browser response', 10)
|
||||
->assertSee('First browser response');
|
||||
});
|
||||
@@ -73,7 +71,7 @@ final class HelpdeskTicketBrowserTest extends DuskTestCase
|
||||
'ticket_id' => $ticket->id,
|
||||
'parent_id' => null,
|
||||
'user_id' => $user->id,
|
||||
'body' => '<p>First browser response</p>',
|
||||
'body' => 'First browser response',
|
||||
'is_internal' => false,
|
||||
]);
|
||||
}
|
||||
@@ -114,7 +112,20 @@ editor.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
editor.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, composed: true }));
|
||||
editor.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));
|
||||
|
||||
const model = root.getAttribute('wire:model')
|
||||
|| root.getAttribute('wire:model.live')
|
||||
|| root.getAttribute('wire:model.defer')
|
||||
|| root.getAttribute('data-wire-model');
|
||||
|
||||
const componentRoot = root.closest('[wire\\\\:id]');
|
||||
|
||||
if (model && componentRoot && window.Livewire) {
|
||||
const component = window.Livewire.find(componentRoot.getAttribute('wire:id'));
|
||||
|
||||
if (component) {
|
||||
component.set(model, html);
|
||||
}
|
||||
}
|
||||
JS);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user