Toggle button added instead of text on click

app/Livewire/Backend/Comment/IndexRow.php

@@ -5,6 +5,7 @@
 use App\Models\Article;
 use App\Models\Comment;
 use Illuminate\Contracts\View\View;
+use Illuminate\Support\Sleep;
 use Livewire\Component;
 
 class IndexRow extends Component

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "resources/css/app.css": {
-    "file": "assets/app-DNo4ntGz.css",
+    "file": "assets/app-C4oVJ3Q3.css",
     "src": "resources/css/app.css",
     "isEntry": true
   },

resources/views/components/backend/form/button.blade.php

@@ -1,5 +1,6 @@
 @props(['type' => 'submit'])
 <button type="{{$type}}"
+    wire:loading.attr="disabled" wire:loading.class="cursor-wait"
     {{$attributes->merge(['class' => 'bg-indigo-300 hover:bg-indigo-500 rounded py-1 px-2 focus:outline-none'])}}>
     {{$slot}}
 </button>

resources/views/components/backend/reply.blade.php

@@ -16,7 +16,7 @@ class="border-b-2 border-indigo-500">{{\Illuminate\Support\Str::title($reply->us
     <div>
         <a href="{{route('backend.comment.edit', $reply->id)}}" class="text-indigo-700 hover:underline">Edit</a>
         <span wire:click="delete({{$reply->id}})"
-              onclick="confirm('You are deleting this comment!') || event.stopImmediatePropagation()"
+              wire:confirm="You are deleting this comment!"
               class="cursor-pointer text-red-700 hover:underline">Delete</span>
     </div>
 </div>

resources/views/components/status.blade.php

@@ -0,0 +1,10 @@
+@props(['text', 'state' => 'positive'])
+@php
+    $statusClasses = match ($state) {
+        'positive' => 'bg-green-100 text-green-700',
+        'negative' => 'bg-red-100 text-red-700',
+        'neutral' => 'bg-red-100 text-gray-600',
+    }
+@endphp
+
+<span {{$attributes->merge(['class' => "inline-flex items-center rounded-full px-2 py-1 text-xs font-medium whitespace-nowrap ".$statusClasses])}}>{{$text}}</span>

resources/views/components/toggle.blade.php

@@ -0,0 +1,25 @@
+@props(['text' => null, 'isEnabled' => false])
+<div class="flex items-center">
+    <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
+    <button {{$attributes}}
+            type="button"
+            wire:loading.attr="disabled" wire:loading.class="cursor-wait"
+            @class([
+                'relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2',
+                'bg-indigo-600' => $isEnabled,
+                'bg-gray-200' => !$isEnabled,
+            ])
+            role="switch" aria-checked="false" aria-labelledby="annual-billing-label">
+
+            <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
+            <span aria-hidden="true"
+                @class([
+                    "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out",
+                    'translate-x-5' => $isEnabled,
+                    'translate-x-0' => !$isEnabled,
+            ])></span>
+    </button>
+    @if($text)
+        <div class="inline ml-3">{{$text}}</div>
+    @endif
+</div>

resources/views/livewire/backend/article/index-row.blade.php

@@ -1,47 +1,48 @@
-<tr wire:loading.class="opacity-25">
+<tr>
     <x-backend.table.td :wrap="true">
         <article>
             <a href="{{route('get-article', $article->slug)}}"
                class="hover:underline" target="_blank">
                 {{$article->heading}}
             </a>
         </article>
-        <section class="text-gray-600">
+        <section class="text-gray-500">
             On {{$article->categoryName}}
         </section>
-        <section class="text-gray-600">
+        <section class="text-gray-500">
             At {{$article->created_date_time_formatted}}
             in {{ucfirst($article->language)}}
         </section>
-        <section class="text-indigo-500">
-            <a href="{{route('backend.comment.index', ['article' => $article->id])}}">
-                {{$article->comment_count < 1 ? 'No comment' : $article->comment_count.' '.\Illuminate\Support\Str::plural('comment', $article->comment_count)}}
+        <section>
+            @if($article->comment_count > 0)
+            <a href="{{route('backend.comment.index', ['article' => $article->id])}}" class="text-indigo-500">
+                {{$article->comment_count.' '.Str::plural('comment', $article->comment_count)}}
             </a>
+            @else
+                <span class="text-gray-400">No comment</span>
+            @endif
         </section>
     </x-backend.table.td>
     <x-backend.table.td>
-        @if($article->is_published)
-            <span wire:click="togglePublish"
-                  class="cursor-pointer px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                Published
-            </span>
-            <section class="text-gray-600">
+        <div class="flex">
+            <x-toggle :isEnabled="$article->is_published" wire:click="togglePublish"/>
+            <x-status class="ml-3"
+                :text="$article->is_published ? 'Published' : 'Not Published'"
+                :state="$article->is_published ? 'positive' : 'negative'"></x-status>
+        </div>
+        <section class="text-gray-500">
+            @if($article->is_published)
                 {{$article->published_at_human_diff}}<br>
-                Updated: {{$article->updated_at_human_diff}}
-            </section>
-        @else
-            <span wire:click="togglePublish"
-                  class="cursor-pointer px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                Not Published
-            </span>
-        @endif
+            @endif
+            Updated: {{$article->updated_at_human_diff}}
+        </section>
     </x-backend.table.td>
     <x-backend.table.td>
         <a href="{{route('backend.article.edit', $article->id)}}" class="text-indigo-700 hover:underline">
             Edit
         </a>
         <a wire:click="destroy" class="ml-1 text-red-700 hover:underline cursor-pointer"
-           onclick="return confirm('Are you sure to delete?') || event.stopImmediatePropagation()">
+           wire:confirm="Are you sure to delete?">
             Delete
         </a>
     </x-backend.table.td>

resources/views/livewire/backend/category/index-row.blade.php

@@ -1,47 +1,46 @@
-<tr wire:loading.class="opacity-50">
-
+<tr>
     @if($editing)
         <form>
             <td class="px-6 py-4">
-                <x-backend.form.input type="text" wire:model.defer="categoryData.name" name="category.name"
+                <x-backend.form.input type="text"
+                                      wire:model.defer="categoryData.name"
+                                      name="category.name"
                                       class="w-full"/>
             </td>
             <td class="px-6 py-4" colspan="2">
-                <x-backend.form.input type="text" wire:model.defer="categoryData.alias" name="category.alias"
+                <x-backend.form.input type="text"
+                                      wire:model.defer="categoryData.alias"
+                                      name="category.alias"
                                       class="w-full"/>
             </td>
             <td class="px-6 py-4" wire:click="update">
                 <x-backend.form.button>Save</x-backend.form.button>
             </td>
         </form>
     @else
-        @php
-            $articleCount = $category->articles->count();
-        @endphp
-
         <x-backend.table.td>
             {{$category->name}}<br>
-            <a href="{{route('backend.article.index', ['category' => $category->id])}}" class="text-indigo-500">
-                {{$articleCount <=0 ? 'No article' : $articleCount.' '.\Illuminate\Support\Str::plural('article', $articleCount)}}
-            </a>
+            @if($category->articles->count() > 0)
+                <a href="{{route('backend.article.index', ['category' => $category->id])}}" class="text-indigo-500">
+                    {{$category->articles->count().' '.Str::plural('article', $category->articles->count())}}
+                </a>
+            @else
+                <div class="text-gray-400">No article</div>
+            @endif
         </x-backend.table.td>
         <x-backend.table.td>{{$category->alias}}</x-backend.table.td>
         <x-backend.table.td>
-            @if($category->is_active)
-                <span wire:click="toggleActive"
-                      class="cursor-pointer px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                    Active
-                </span>
-            @else
-                <span wire:click="toggleActive"
-                      class="cursor-pointer px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                    Inactive
-                </span>
-            @endif
+            <div class="flex">
+                <x-toggle :isEnabled="$category->is_active" wire:click="toggleActive"/>
+                <x-status class="ml-3"
+                          :text="$category->is_active ? 'Active' : 'Inactive'"
+                          :state="$category->is_active ? 'positive' : 'negative'"
+                />
+            </div>
         </x-backend.table.td>
         <x-backend.table.td>
             <span wire:click="startEditing" class="text-indigo-700 hover:underline cursor-pointer">Edit</span>
-            <span onclick="confirm('Are you sure to delete?') || event.stopImmediatePropagation()"
+            <span wire:confirm="Are you sure to delete?"
                   wire:click="destroy({{$category}})"
                   class="ml-1 cursor-pointer text-red-700 hover:underline">Delete</span>
         </x-backend.table.td>

resources/views/livewire/backend/comment/index-row.blade.php

@@ -1,20 +1,28 @@
-<tr wire:loading.class="opacity-25">
+<tr>
     <x-backend.table.td :wrap="true">
-        <a href="{{route('backend.comment.show', $comment->id)}}" class="hover:underline">
-            {{mb_substr($comment->content, 0, 70)}}
-            {{mb_strlen($comment->content)  > 70 ? '...' : '' }}
-        </a><br>
-        @if($comment->published_date_time_formatted)
-            <span class="text-gray-600">{{$comment->published_date_time_formatted}}</span><br>
-        @endif
-        <span class="text-indigo-500">
+        <section>
+            <a href="{{route('backend.comment.show', $comment->id)}}" class="hover:underline">
+                {{mb_substr($comment->content, 0, 70)}}
+                {{mb_strlen($comment->content)  > 70 ? '...' : '' }}
+            </a>
+        </section>
+        <section>
+            @if($comment->published_date_time_formatted)
+                <span class="text-gray-500">{{$comment->published_date_time_formatted}}</span>
+            @endif
+        </section>
+        <section>
             @php
                 $totalReplies = $comment->replies->count();
             @endphp
-            <a href="{{route('backend.comment.show', $comment->id)}}">
-                {{$totalReplies < 1 ? 'No reply' : $totalReplies.' '.\Illuminate\Support\Str::plural('reply', $totalReplies)}}
-            </a>
-        </span>
+            @if($comment->replies->count() > 0)
+                <a href="{{route('backend.comment.show', $comment->id)}}" class="text-indigo-500">
+                    {{$comment->replies->count().' '.Str::plural('reply', $totalReplies)}}
+                </a>
+            @else
+                <span class="text-gray-400">No reply</span>
+            @endif
+        </section>
     </x-backend.table.td>
     <x-backend.table.td>
         <span>{{$comment->user->name}}</span><br>
@@ -27,21 +35,16 @@
         </a>
     </x-backend.table.td>
     <x-backend.table.td>
-        @if($comment->is_published)
-            <span wire:click="togglePublish"
-                  class="cursor-pointer px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                Published
-            </span>
-        @else
-            <span wire:click="togglePublish"
-                  class="cursor-pointer px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                Not Published
-            </span>
-        @endif
+        <div class="flex">
+            <x-toggle :isEnabled="$comment->is_published" wire:click="togglePublish"/>
+            <x-status class="ml-3"
+                :text="$comment->is_published ? 'Published' : 'No published'"
+                :state="$comment->is_published ? 'positive' : 'negative'"/>
+        </div>
     </x-backend.table.td>
     <x-backend.table.td>
         <a href="{{route('backend.comment.edit', $comment->id)}}" class="text-indigo-700 hover:underline">Edit</a>
-        <span onclick="confirm('Are you sure to delete?') || event.stopImmediatePropagation()"
+        <span wire:confirm="Are you sure to delete?"
               wire:click="destroy({{$comment}})"
               class="ml-1 cursor-pointer text-red-700 hover:underline">
             Delete

resources/views/livewire/backend/feedback/index.blade.php

@@ -4,8 +4,7 @@
             <div class="border border-indigo-300 rounded px-3 py-1">
                 <div class="flex justify-between">
                     <div>{{$feedback->name}}</div>
-                    <x-tni-x-circle-o
-                        onclick="confirm('You are closing this feedback') || event.stopImmediatePropagation()"
+                    <x-tni-x-circle-o wire:confirm="You are closing this feedback"
                         wire:click="close({{$feedback->id}})"
                         class="w-4 h-4 text-gray-600 hover:text-red-700 -mr-5 -mt-2 bg-white cursor-pointer"/>
                 </div>

resources/views/livewire/backend/keyword/index.blade.php

@@ -4,8 +4,7 @@
             <div class="rounded border border-indigo-300 pl-2">
                 <div class="flex justify-between">
                     <div>{{$keyword->name}}</div>
-                    <x-tni-x-circle-o
-                        onclick="confirm('Are you sure to delete') || event.stopImmediatePropagation()"
+                    <x-tni-x-circle-o wire:confirm="Are you sure to delete"
                         wire:click="delete({{$keyword->id}})"
                         class="w-3 h-3 bg-white text-gray-600 hover:text-red-700 -mt-1 -mr-1 cursor-pointer"/>
                 </div>

resources/views/livewire/backend/user/index.blade.php

@@ -28,46 +28,25 @@
                         <div class="text-blue-600">{{$user->email}}</div>
                     </x-backend.table.td>
                     <x-backend.table.td>
-                        @if($user->is_active)
-                            <div wire:click="toggleActive({{$user->id}})"
-                                 class="cursor-pointer px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                                Active
-                            </div>
-                        @else
-                            <div wire:click="toggleActive({{$user->id}})"
-                                 class="cursor-pointer px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                                Inactive
-                            </div>
-                        @endif
-                        @if(optional($user->reader)->is_verified)
-                            <div
-                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                                Verified
-                            </div>
-                        @else
-                            <div
-                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                                Not Verified
-                            </div>
-                        @endif
-                        @if(optional($user->reader)->notify)
-                            <div
-                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
-                                Notify
-                            </div>
-                        @else
-                            <div
-                                class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
-                                Don't Notify
-                            </div>
-                        @endif
+                        <div class="flex">
+                            <x-toggle :isEnabled="$user->is_active" wire:click="toggleActive({{$user->id}})"/>
+
+                            <x-status class="ml-3"
+                                :text="optional($user->reader)->is_verified ? 'Verified' : 'Not Verified'"
+                                :state="optional($user->reader)->is_verified ? 'positive' : 'negative'"/>
+
+                            <x-status class="ml-3"
+                                :text='optional($user->reader)->notify ? "Notify" : "No Notify"'
+                                :state="optional($user->reader)->notify ? 'positive' : 'negative'"/>
+                        </div>
                     </x-backend.table.td>
                     <x-backend.table.td>
                         <a href="{{route('backend.user.edit', $user->id)}}"
                            class="text-indigo-700 hover:underline">Edit</a>
+
                         <span wire:click="delete({{$user->id}})"
-                              onclick="confirm('You are deleting this user') || event.stopImmediatePropagation()"
-                              class="cursor-pointer text-red-700 hover:underline">Delete</span>
+                              wire:confirm="You are deleting this user"
+                              class="ml-1 cursor-pointer text-red-700 hover:underline">Delete</span>
                     </x-backend.table.td>
                 </tr>
             @endforeach