Add Permission

app/Components/Permission/Manager.php

@@ -10,7 +10,7 @@ use Spatie\Permission\Models\Permission;
 class Manager extends Component
 {
     use WithPagination;
-
+    public int $perPage = 10;
     protected string $paginationTheme = 'bootstrap';
 
     public string $mode = 'index';      // 'index' hoặc 'form'
@@ -78,7 +78,7 @@ class Manager extends Component
     {
         $permissions = Permission::where('name', 'like', "%{$this->search}%")
             ->orderByDesc('id')
-            ->paginate(10);
+            ->paginate($this->perPage);
 
         return view('components.permission.manager', compact('permissions'));
     }

resources/views/components/permission/manager.blade.php

@@ -11,11 +11,11 @@
                             <input type="text" wire:model.debounce.500ms="search" wire:keydown.enter="resetPage"
                                 class="form-control" placeholder="Search...">
                         </div>
-                        <button wire:click="resetPage" class="btn btn-sm btn-outline-primary me-2">
+                        <button wire:click="resetPage" class="btn btn-sm btn-outline-primary me-2 m-0">
                             Search
                         </button>
-                        <button wire:click="showForm" class="btn btn-sm btn-outline-secondary">
-                            + New
+                        <button wire:click="showForm" class="btn btn-sm btn-primary m-0">
+                            Create
                         </button>
                     </div>
                 @else
@@ -65,41 +65,34 @@
                             </tbody>
                         </table>
                     </div>
-                    <div class="mt-3">{{ $permissions->links('pagination::bootstrap-5') }}</div>
+
+                    {{-- Phân trang chỉ khi >1 trang --}}
+                    <div class="mt-3">
+                        @if ($permissions->lastPage() > 1)
+                            {{ $permissions->links() }}
+                        @endif
+                    </div>
                 @else
-                    {{-- Form --}}
-                    <div class="row justify-content-center">
-                        <div class="col-lg-6">
-                            <div class="card">
-                                <div class="card-header pb-0">
-                                    <h6 class="mb-0">
-                                        {{ $editingId ? 'Edit Permission' : 'Create Permission' }}
-                                    </h6>
-                                </div>
-                                <div class="card-body">
-                                    <form wire:submit.prevent="save">
-                                        <div class="mb-3">
-                                            <label class="form-label">Name</label>
-                                            <input type="text" wire:model.defer="name" class="form-control"
-                                                placeholder="Enter permission name">
-                                            @error('name')
-                                                <div class="text-danger text-xs mt-1">{{ $message }}</div>
-                                            @enderror
-                                        </div>
-                                        <div class="d-flex justify-content-end">
-                                            <button wire:click="showIndex" type="button"
-                                                class="btn btn-secondary btn-sm me-2">
-                                                Cancel
-                                            </button>
-                                            <button type="submit" class="btn btn-primary btn-sm">
-                                                {{ $editingId ? 'Update' : 'Create' }}
-                                            </button>
-                                        </div>
-                                    </form>
-                                </div>
-                            </div>
+                    {{-- Form (không lồng thêm card) --}}
+                    <h6 class="mb-3">{{ $editingId ? 'Edit Permission' : 'Create Permission' }}</h6>
+                    <form wire:submit.prevent="save">
+                        <div class="mb-3">
+                            <label class="form-label">Name</label>
+                            <input type="text" wire:model.defer="name" class="form-control"
+                                placeholder="Enter permission name">
+                            @error('name')
+                                <div class="text-danger text-xs mt-1">{{ $message }}</div>
+                            @enderror
                         </div>
-                    </div>
+                        <div class="d-flex justify-content-end">
+                            <button wire:click="showIndex" type="button" class="btn btn-secondary btn-sm me-2">
+                                Cancel
+                            </button>
+                            <button type="submit" class="btn btn-primary btn-sm">
+                                {{ $editingId ? 'Update' : 'Create' }}
+                            </button>
+                        </div>
+                    </form>
                 @endif
 
             </div>