From 30e940aaf82df62c82f7df128821db181020672a Mon Sep 17 00:00:00 2001
From: sundayenglish <quyetluu217@gmail.com>
Date: Tue, 24 Jun 2025 15:41:30 +0700
Subject: [PATCH] Add loading Permission

---
 app/Components/Permission/Manager.php         | 68 ++++++-------------
 .../components/permission/manager.blade.php   | 32 ++++++---
 2 files changed, 40 insertions(+), 60 deletions(-)

diff --git a/app/Components/Permission/Manager.php b/app/Components/Permission/Manager.php
index 158ef23..3e2d4a4 100644
--- a/app/Components/Permission/Manager.php
+++ b/app/Components/Permission/Manager.php
@@ -12,39 +12,50 @@ class Manager extends Component
     use WithPagination;
 
     /**
-     * Number of items per page for pagination.
+     * Các tùy chọn số bản ghi mỗi trang.
+     *
+     * @var int[]
+     */
+    public array $perPageOptions = [5, 10, 25, 50, 100];
+
+    /**
+     * Số bản ghi mỗi trang (mặc định).
      */
     public int $perPage = 10;
 
     /**
-     * Pagination theme (bootstrap or tailwind).
+     * Giao diện phân trang (bootstrap hoặc tailwind).
      */
     protected string $paginationTheme = 'bootstrap';
 
     /**
-     * Current UI mode: 'index' (list view) or 'form' (create/edit view).
+     * Chế độ UI: 'index' (danh sách) hoặc 'form' (tạo/sửa).
      */
     public string $mode = 'index';
 
     /**
-     * ID of the permission currently being edited.
-     * Null when creating a new permission.
+     * ID của permission đang sửa (null khi tạo mới).
      */
     public ?int $editingId = null;
 
     /**
-     * Current search query string.
+     * Chuỗi tìm kiếm hiện tại.
      */
     public string $search = '';
 
     /**
-     * Permission name used in the create/edit form.
+     * Tên permission dùng trong form.
      */
     public string $name = '';
 
     /**
-     * Handle internal Livewire event to switch back to the index (list) view.
+     * Khi thay đổi số bản ghi mỗi trang, reset về trang 1.
      */
+    public function updatedPerPage(int $value): void
+    {
+        $this->resetPage();
+    }
+
     #[On('permissionSaved')]
     public function showIndex(): void
     {
@@ -54,23 +65,11 @@ class Manager extends Component
         $this->editingId = null;
     }
 
-    /**
-     * Reset pagination whenever the search term changes.
-     *
-     * @param  string  $value
-     * @return void
-     */
     public function updatedSearch(string $value): void
     {
         $this->resetPage();
     }
 
-    /**
-     * Switch to the form view for creating or editing a permission.
-     *
-     * @param  int|null  $id  Permission ID to edit, or null to create new.
-     * @return void
-     */
     public function showForm(?int $id = null): void
     {
         $this->mode      = 'form';
@@ -80,12 +79,6 @@ class Manager extends Component
             : '';
     }
 
-    /**
-     * Delete a permission by its ID.
-     *
-     * @param  int  $id
-     * @return void
-     */
     public function delete(int $id): void
     {
         Permission::findOrFail($id)->delete();
@@ -93,11 +86,6 @@ class Manager extends Component
         $this->resetPage();
     }
 
-    /**
-     * Validate and save the permission (create or update).
-     *
-     * @return void
-     */
     public function save(): void
     {
         $uniqueRule = 'unique:permissions,name'
@@ -113,16 +101,9 @@ class Manager extends Component
         );
 
         session()->flash('message', 'Permission saved.');
-
-        // Trigger internal Livewire event to return to the list view
         $this->dispatch('permissionSaved');
     }
 
-    /**
-     * Compute dynamic browser title based on current mode and editing state.
-     *
-     * @return string
-     */
     protected function computeTitle(): string
     {
         if ($this->mode === 'index') {
@@ -136,21 +117,11 @@ class Manager extends Component
         return 'Create Permission';
     }
 
-    /**
-     * Expose computed title as a Livewire property.
-     *
-     * @return string
-     */
     public function getTitleProperty(): string
     {
         return $this->computeTitle();
     }
 
-    /**
-     * Render the component view with paginated permissions and dynamic title.
-     *
-     * @return \Illuminate\View\View
-     */
     public function render()
     {
         $permissions = Permission::query()
@@ -160,7 +131,6 @@ class Manager extends Component
 
         return view('components.permission.manager', [
             'permissions' => $permissions,
-            // Blade can now access {{ $title }} via the computed property
             'title'       => $this->title,
         ]);
     }
diff --git a/resources/views/components/permission/manager.blade.php b/resources/views/components/permission/manager.blade.php
index 48219c6..9832bdb 100644
--- a/resources/views/components/permission/manager.blade.php
+++ b/resources/views/components/permission/manager.blade.php
@@ -10,6 +10,18 @@
 
                 @if ($mode === 'index')
                     <div class="d-flex align-items-center">
+
+                        {{-- 1. Dropdown chọn số bản ghi --}}
+                        <div class="me-2">
+                            <select wire:model="perPage" class="form-select form-select-sm"
+                                style="width: 70px; display:inline-block;">
+                                @foreach ($perPageOptions as $opt)
+                                    <option value="{{ $opt }}">{{ $opt }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+
+                        {{-- 2. Search box --}}
                         <div class="input-group input-group-outline me-2">
                             <input type="text" wire:model.debounce.500ms="search" wire:keydown.enter="resetPage"
                                 class="form-control" placeholder="Search...">
@@ -17,7 +29,8 @@
                         <button wire:click="resetPage" class="btn btn-sm btn-outline-success me-2 m-0">
                             <i class="fas fa-search me-1" style="font-size: 1.2rem;"></i>
                         </button>
-                        <!-- Create lại bình thường -->
+
+                        {{-- 3. Create button --}}
                         <button wire:click="showForm" class="btn btn-sm btn-info m-0">
                             Create
                         </button>
@@ -59,12 +72,11 @@
                                                 class="btn btn-sm btn-outline-info me-1">
                                                 Edit
                                             </button>
-                                            <!-- Delete with confirmation -->
                                             <button x-data
                                                 @click.prevent="
-                                                      if (confirm('Bạn có chắc chắn muốn xóa permission này?')) {
-                                                        $wire.delete({{ $p->id }})
-                                                      }
+                                                        if (confirm('Bạn có chắc chắn muốn xóa permission này?')) {
+                                                            $wire.delete({{ $p->id }})
+                                                        }
                                                     "
                                                 class="btn btn-sm btn-danger">
                                                 Delete
@@ -92,7 +104,6 @@
 
                     {{-- ACTUAL FORM --}}
                     <div wire:loading.remove x-data>
-                        {{-- <h6 class="mb-3">{{ $editingId ? 'Edit Permission' : 'Create Permission' }}</h6> --}}
                         <form>
                             <div class="mb-3">
                                 <label class="form-label">Name</label>
@@ -106,13 +117,12 @@
                                 <button wire:click="showIndex" type="button" class="btn btn-secondary btn-sm me-2">
                                     Cancel
                                 </button>
-                                <!-- Chỉ confirm khi submit form -->
                                 <button type="button"
                                     @click.prevent="
-                                      if (confirm('Bạn có chắc chắn muốn {{ $editingId ? 'cập nhật' : 'tạo' }} permission này?')) {
-                                        $wire.save()
-                                      }
-                                    "
+                                            if (confirm('Bạn có chắc chắn muốn {{ $editingId ? 'cập nhật' : 'tạo' }} permission này?')) {
+                                                $wire.save()
+                                            }
+                                        "
                                     class="btn btn-info btn-sm">
                                     {{ $editingId ? 'Update' : 'Create' }}
                                 </button>