From d4486c4b2ffd6b7ffacddd411ab05fc883d3f99c Mon Sep 17 00:00:00 2001
From: sundayenglish <quyetluu217@gmail.com>
Date: Tue, 24 Jun 2025 14:50:55 +0700
Subject: [PATCH] Add loading Permission

---
 app/View/Components/SkeletonForm.php          | 22 ++++++++
 app/View/Components/SkeletonTable.php         | 24 ++++++++
 .../components/permission/manager.blade.php   | 55 ++-----------------
 .../views/components/skeleton-form.blade.php  | 22 ++++++++
 .../views/components/skeleton-table.blade.php | 26 +++++++++
 5 files changed, 100 insertions(+), 49 deletions(-)
 create mode 100644 app/View/Components/SkeletonForm.php
 create mode 100644 app/View/Components/SkeletonTable.php
 create mode 100644 resources/views/components/skeleton-form.blade.php
 create mode 100644 resources/views/components/skeleton-table.blade.php

diff --git a/app/View/Components/SkeletonForm.php b/app/View/Components/SkeletonForm.php
new file mode 100644
index 0000000..d03c771
--- /dev/null
+++ b/app/View/Components/SkeletonForm.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class SkeletonForm extends Component
+{
+    public $fields;
+    public $buttonCount;
+
+    public function __construct(int $fields = 2, int $buttonCount = 2)
+    {
+        $this->fields      = $fields;
+        $this->buttonCount = $buttonCount;
+    }
+
+    public function render()
+    {
+        return view('components.skeleton-form');
+    }
+}
diff --git a/app/View/Components/SkeletonTable.php b/app/View/Components/SkeletonTable.php
new file mode 100644
index 0000000..6747e25
--- /dev/null
+++ b/app/View/Components/SkeletonTable.php
@@ -0,0 +1,24 @@
+<?php
+
+namespace App\View\Components;
+
+use Illuminate\View\Component;
+
+class SkeletonTable extends Component
+{
+    public $columns;
+    public $rows;
+    public $height;
+
+    public function __construct(int $columns = 3, int $rows = 5, string $height = '3.5rem')
+    {
+        $this->columns = $columns;
+        $this->rows    = $rows;
+        $this->height  = $height;
+    }
+
+    public function render()
+    {
+        return view('components.skeleton-table');
+    }
+}
diff --git a/resources/views/components/permission/manager.blade.php b/resources/views/components/permission/manager.blade.php
index 7fb5b20..68e4a11 100644
--- a/resources/views/components/permission/manager.blade.php
+++ b/resources/views/components/permission/manager.blade.php
@@ -1,3 +1,5 @@
+{{-- resources/views/livewire/permission-manager.blade.php --}}
+
 <div class="row">
     <div class="col-12">
         <div class="card mb-4">
@@ -34,44 +36,11 @@
 
                 @if ($mode === 'index')
                     {{-- SKELETON TABLE --}}
-                    <div wire:loading class="w-100">
-                        <div class="table-responsive">
-                            <table class="table mb-0">
-                                <thead>
-                                    <tr style="visibility:hidden; height:3.5rem">
-                                        <th class="text-center">ID</th>
-                                        <th>Name</th>
-                                        <th class="text-center">Actions</th>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                    @for ($i = 0; $i < 5; $i++)
-                                        <tr style="height:3.5rem">
-                                            <td class="text-center align-middle">
-                                                <div class="skeleton rounded"
-                                                    style="width:2rem; height:2rem; margin:0 auto;"></div>
-                                            </td>
-                                            <td class="align-middle">
-                                                <div class="skeleton rounded" style="width:90%; height:1.75rem;"></div>
-                                            </td>
-                                            <td class="text-center align-middle">
-                                                <div class="d-inline-flex gap-3">
-                                                    <div class="skeleton rounded" style="width:3rem; height:2rem;">
-                                                    </div>
-                                                    <div class="skeleton rounded" style="width:3rem; height:2rem;">
-                                                    </div>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    @endfor
-                                </tbody>
-                            </table>
-                        </div>
-                    </div>
+                    <x-skeleton-table :columns="3" :rows="5" height="3.5rem" />
 
                     {{-- ACTUAL TABLE --}}
-                    <div wire:loading.remove class="table-responsive">
-                        <table class="table align-items-center mb-0">
+                    <div wire:loading.remove class="table-responsive w-100">
+                        <table class="table align-items-center mb-0 w-100">
                             <thead>
                                 <tr style="height:3.5rem">
                                     <th class="text-center">ID</th>
@@ -112,18 +81,7 @@
                     </div>
                 @else
                     {{-- SKELETON FORM --}}
-                    <div wire:loading class="w-100">
-                        <div class="p-4 border rounded-lg shadow-sm max-w-md mx-auto space-y-4">
-                            <div class="skeleton rounded" style="width:10rem; height:2rem;"></div>
-                            <div class="space-y-3 mt-2">
-                                <div class="skeleton rounded" style="width:100%; height:3.5rem;"></div>
-                            </div>
-                            <div class="d-flex justify-content-end gap-3 mt-2">
-                                <div class="skeleton rounded" style="width:5.5rem; height:2.5rem;"></div>
-                                <div class="skeleton rounded" style="width:5.5rem; height:2.5rem;"></div>
-                            </div>
-                        </div>
-                    </div>
+                    <x-skeleton-form :fields="1" :button-count="2" />
 
                     {{-- ACTUAL FORM --}}
                     <div wire:loading.remove>
@@ -147,7 +105,6 @@
                             </div>
                         </form>
                     </div>
-
                 @endif
             </div>
         </div>
diff --git a/resources/views/components/skeleton-form.blade.php b/resources/views/components/skeleton-form.blade.php
new file mode 100644
index 0000000..3758e40
--- /dev/null
+++ b/resources/views/components/skeleton-form.blade.php
@@ -0,0 +1,22 @@
+@props(['fields', 'buttonCount'])
+
+<div wire:loading class="w-100">
+  <div class="p-4 border rounded-lg shadow-sm max-w-md mx-auto space-y-4">
+    {{-- Title --}}
+    <div class="skeleton rounded" style="width:10rem; height:2rem;"></div>
+
+    {{-- Fields --}}
+    <div class="space-y-3 mt-2">
+      @for ($i = 0; $i < $fields; $i++)
+        <div class="skeleton rounded" style="width:100%; height:3.5rem;"></div>
+      @endfor
+    </div>
+
+    {{-- Buttons --}}
+    <div class="d-flex justify-content-end gap-3 mt-2">
+      @for ($i = 0; $i < $buttonCount; $i++)
+        <div class="skeleton rounded" style="width:5.5rem; height:2.5rem;"></div>
+      @endfor
+    </div>
+  </div>
+</div>
diff --git a/resources/views/components/skeleton-table.blade.php b/resources/views/components/skeleton-table.blade.php
new file mode 100644
index 0000000..4ee3f5d
--- /dev/null
+++ b/resources/views/components/skeleton-table.blade.php
@@ -0,0 +1,26 @@
+@props(['columns', 'rows', 'height'])
+
+<div wire:loading class="w-100">
+  <div class="table-responsive w-100">
+    <table class="table mb-0 w-100">
+      <thead>
+        <tr style="visibility:hidden; height:{{ $height }}">
+          @for ($i = 0; $i < $columns; $i++)
+            <th>&nbsp;</th>
+          @endfor
+        </tr>
+      </thead>
+      <tbody>
+        @for ($r = 0; $r < $rows; $r++)
+          <tr style="height:{{ $height }}">
+            @for ($c = 0; $c < $columns; $c++)
+              <td class="align-middle">
+                <div class="skeleton rounded w-100" style="height:1.75rem"></div>
+              </td>
+            @endfor
+          </tr>
+        @endfor
+      </tbody>
+    </table>
+  </div>
+</div>