Add Livewire comment system
This commit is contained in:
@@ -31,7 +31,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-[60vw]">
|
||||
@include('partials.comment', ['comment' => $comment])
|
||||
{{--@include('partials.comment', ['comment' => $comment])--}}
|
||||
</div>
|
||||
</div>
|
||||
@elseif($comment->commentable_type == 'App\Models\Hentai')
|
||||
@@ -53,7 +53,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-[60vw]">
|
||||
@include('partials.comment', ['comment' => $comment])
|
||||
{{--@include('partials.comment', ['comment' => $comment])--}}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
99
resources/views/livewire/comment.blade.php
Normal file
99
resources/views/livewire/comment.blade.php
Normal file
@@ -0,0 +1,99 @@
|
||||
<div>
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<img class="h-10 w-10 rounded-full" src="{{ $comment->user->getAvatar() }}" alt="{{ $comment->user->name }}">
|
||||
</div>
|
||||
<div class="flex-grow">
|
||||
<div>
|
||||
<a href="#" class="font-medium text-gray-900">{{ $comment->user->name }}</a>
|
||||
</div>
|
||||
<div class="mt-1 flex-grow w-full">
|
||||
@if ($isEditing)
|
||||
<form wire:submit.prevent="editComment">
|
||||
<div>
|
||||
<label for="comment" class="sr-only">Comment body</label>
|
||||
<textarea id="comment" name="comment" rows="3"
|
||||
class="shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 rounded-md
|
||||
@error('editState.body') border-red-500 @enderror"
|
||||
placeholder="Write something" wire:model.defer="editState.body"></textarea>
|
||||
@error('editState.body')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<button type="submit"
|
||||
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@else
|
||||
<p class="text-gray-700">{!! $comment->presenter()->markdownBody() !!}</p>
|
||||
@endif
|
||||
</div>
|
||||
<div class="mt-2 space-x-2">
|
||||
<span class="text-gray-500 font-medium">
|
||||
{{ $comment->presenter()->relativeCreatedAt() }}
|
||||
</span>
|
||||
@auth
|
||||
{{--@if ($comment->hasParent())--}}
|
||||
@if ($comment->depth() < 2)
|
||||
<button wire:click="$toggle('isReplying')" type="button" class="text-gray-900 font-medium">
|
||||
Reply
|
||||
</button>
|
||||
@endif
|
||||
{{--@endif--}}
|
||||
|
||||
@can ('update', $comment)
|
||||
<button wire:click="$toggle('isEditing')" type="button" class="text-gray-900 font-medium">
|
||||
Edit
|
||||
</button>
|
||||
@endcan
|
||||
|
||||
@can ('destroy', $comment)
|
||||
<button x-data="{
|
||||
confirmCommentDeletion () {
|
||||
if (window.confirm('Are you sure you want to delete this comment?')) {
|
||||
@this.call('deleteComment');
|
||||
}
|
||||
}
|
||||
}"
|
||||
@click="confirmCommentDeletion"
|
||||
type="button"
|
||||
class="text-gray-900 font-medium"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
@endcan
|
||||
@endauth
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="ml-14 mt-6">
|
||||
@if ($isReplying)
|
||||
<form wire:submit.prevent="postReply" class="my-4">
|
||||
<div>
|
||||
<label for="comment" class="sr-only">Reply body</label>
|
||||
<textarea id="comment" name="comment" rows="3"
|
||||
class="shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 rounded-md
|
||||
@error('replyState.body') border-red-500 @enderror"
|
||||
placeholder="Write something" wire:model.defer="replyState.body"></textarea>
|
||||
@error('replyState.body')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<button type="submit"
|
||||
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
|
||||
Comment
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
@foreach ($comment->children as $child)
|
||||
<livewire:comment :comment="$child" :key="$child->id"/>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
54
resources/views/livewire/comments.blade.php
Normal file
54
resources/views/livewire/comments.blade.php
Normal file
@@ -0,0 +1,54 @@
|
||||
<section>
|
||||
<div class="bg-white shadow sm:rounded-lg sm:overflow-hidden">
|
||||
<div class="divide-y divide-gray-200">
|
||||
<div class="px-4 py-5 sm:px-6">
|
||||
<h2 class="text-lg font-medium text-gray-900">Comments</h2>
|
||||
</div>
|
||||
<div class="px-4 py-6 sm:px-6">
|
||||
<div class="space-y-8">
|
||||
@if ($comments->isNotEmpty())
|
||||
@foreach($comments as $comment)
|
||||
<livewire:comment :comment="$comment" :key="$comment->id"/>
|
||||
@endforeach
|
||||
{{ $comments->links() }}
|
||||
@else
|
||||
<p>No comments yet.</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-gray-50 px-4 py-6 sm:px-6">
|
||||
@auth
|
||||
<div class="flex">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
<img class="h-10 w-10 rounded-full" src="{{ auth()->user()->getAvatar() }}" alt="{{ auth()->user()->name }}">
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<form wire:submit.prevent="postComment">
|
||||
<div>
|
||||
<label for="comment" class="sr-only">Comment body</label>
|
||||
<textarea id="comment" name="comment" rows="3"
|
||||
class="shadow-sm block w-full focus:ring-rose-500 focus:border-rose-500 border-gray-300 rounded-md
|
||||
@error('newCommentState.body') border-red-500 @enderror"
|
||||
placeholder="Write something" wire:model.defer="newCommentState.body"></textarea>
|
||||
@error('newCommentState.body')
|
||||
<p class="mt-2 text-sm text-red-500">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
<div class="mt-3 flex items-center justify-between">
|
||||
<button type="submit"
|
||||
class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-rose-500">
|
||||
Comment
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@endauth
|
||||
|
||||
@guest
|
||||
<p>Log in to comment.</p>
|
||||
@endguest
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1,22 +0,0 @@
|
||||
@inject('markdown', 'Parsedown')
|
||||
@php
|
||||
// TODO: There should be a better place for this.
|
||||
$markdown->setSafeMode(true);
|
||||
@endphp
|
||||
<div id="comment-{{ $comment->id }}" class="flex rounded-lg bg-white p-1 mb-2 shadow-[0_2px_15px_-3px_rgba(0,0,0,0.07),0_10px_20px_-2px_rgba(0,0,0,0.04)] dark:bg-neutral-900">
|
||||
@php $user = cache()->rememberForever('commentUser'.$comment->commenter_id, fn () => \App\Models\User::where('id', $comment->commenter_id)->first()); @endphp
|
||||
<div>
|
||||
<img class="w-16 h-16 rounded-full m-2" src="{{ $user->getAvatar() }}" alt="{{ $user->name }} Avatar">
|
||||
</div>
|
||||
<div class="text-gray-800 dark:text-gray-200">
|
||||
<div>
|
||||
@if($user->is_patreon)
|
||||
<h5 class="text-gray-800 dark:text-gray-400">{{ $user->name }} <a data-te-toggle="tooltip" title="Badge of appreciation for the horny people supporting us! :3"><i class="fa-solid fa-hand-holding-heart text-rose-600 animate-pulse"></i></a> <small class="text-muted">- {{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</small></h5>
|
||||
@else
|
||||
<h5 class="text-gray-800 dark:text-gray-400">{{ $user->name }} <small class="text-muted">- {{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</small></h5>
|
||||
@endif
|
||||
</div>
|
||||
<div style="white-space: pre-wrap;">{!! $markdown->line($comment->comment) !!}</div>
|
||||
<br />
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,7 +26,7 @@
|
||||
<!-- Infos -->
|
||||
@include('stream.partials.info')
|
||||
<!-- Comments -->
|
||||
@include('stream.partials.comments')
|
||||
<livewire:comments :model="$episode"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
@if(! $isMobile)
|
||||
|
||||
@@ -1,8 +0,0 @@
|
||||
<div class="bg-transparent rounded-lg overflow-hidden bg-white dark:bg-neutral-700/40 p-5">
|
||||
<div id="comments" class="grid grid-cols-1 bg-transparent rounded-lg">
|
||||
<p class="leading-normal font-bold text-lg text-rose-600">
|
||||
{{ __('home.latest-comments') }}
|
||||
</p>
|
||||
{{--@comments(['model' => $episode])--}}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user