parent
b30b1fc4fa
commit
8e827de35f
8 changed files with 376 additions and 8 deletions
@ -0,0 +1,141 @@ |
|||||||
|
<?php |
||||||
|
|
||||||
|
namespace App\Components\User; |
||||||
|
|
||||||
|
use Livewire\Component; |
||||||
|
use Livewire\Attributes\On; |
||||||
|
use Livewire\WithPagination; |
||||||
|
use Illuminate\Validation\Rule; |
||||||
|
use App\Models\User; |
||||||
|
use Spatie\Permission\Models\Role; |
||||||
|
|
||||||
|
class Manager extends Component |
||||||
|
{ |
||||||
|
use WithPagination; |
||||||
|
|
||||||
|
public array $perPageOptions = [10, 25, 50, 100]; |
||||||
|
public int $perPage = 10; |
||||||
|
protected string $paginationTheme = 'bootstrap'; |
||||||
|
public string $mode = 'index'; |
||||||
|
public ?int $editingId = null; |
||||||
|
public string $search = ''; |
||||||
|
|
||||||
|
// Form fields |
||||||
|
public string $fullname = ''; |
||||||
|
public string $email = ''; |
||||||
|
public string $password = ''; |
||||||
|
public string $password_confirmation = ''; |
||||||
|
public array $roles = []; |
||||||
|
public array $allRoles = []; |
||||||
|
|
||||||
|
public function mount(): void |
||||||
|
{ |
||||||
|
$this->allRoles = Role::all()->toArray(); |
||||||
|
} |
||||||
|
|
||||||
|
public function updatedPerPage(int $value): void |
||||||
|
{ |
||||||
|
$this->resetPage(); |
||||||
|
} |
||||||
|
|
||||||
|
public function updatedSearch(string $value): void |
||||||
|
{ |
||||||
|
$this->resetPage(); |
||||||
|
} |
||||||
|
|
||||||
|
#[On('userSaved')] |
||||||
|
public function showIndex(): void |
||||||
|
{ |
||||||
|
$this->mode = 'index'; |
||||||
|
$this->resetPage(); |
||||||
|
$this->resetForm(); |
||||||
|
} |
||||||
|
|
||||||
|
public function showForm(?int $id = null): void |
||||||
|
{ |
||||||
|
$this->mode = 'form'; |
||||||
|
$this->editingId = $id; |
||||||
|
|
||||||
|
if ($id) { |
||||||
|
$user = User::with('roles')->findOrFail($id); |
||||||
|
$this->fullname = $user->fullname; |
||||||
|
$this->email = $user->email; |
||||||
|
$this->roles = $user->roles->pluck('name')->toArray(); |
||||||
|
} else { |
||||||
|
$this->resetForm(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
protected function resetForm(): void |
||||||
|
{ |
||||||
|
$this->fullname = ''; |
||||||
|
$this->email = ''; |
||||||
|
$this->password = ''; |
||||||
|
$this->password_confirmation = ''; |
||||||
|
$this->roles = []; |
||||||
|
$this->editingId = null; |
||||||
|
} |
||||||
|
|
||||||
|
public function delete(int $id): void |
||||||
|
{ |
||||||
|
User::findOrFail($id)->delete(); |
||||||
|
session()->flash('message', 'User deleted.'); |
||||||
|
$this->resetPage(); |
||||||
|
} |
||||||
|
|
||||||
|
public function save(): void |
||||||
|
{ |
||||||
|
$rules = [ |
||||||
|
'fullname' => ['required', 'string', 'max:255'], |
||||||
|
'email' => ['required', 'email', 'max:255', Rule::unique('users', 'email')->ignore($this->editingId)], |
||||||
|
'roles' => ['nullable', 'array'], |
||||||
|
'roles.*' => ['string', Rule::exists('roles', 'name')], |
||||||
|
]; |
||||||
|
|
||||||
|
if (! $this->editingId) { |
||||||
|
$rules['password'] = ['required', 'string', 'min:6', 'confirmed']; |
||||||
|
} elseif ($this->password) { |
||||||
|
$rules['password'] = ['string', 'min:6', 'confirmed']; |
||||||
|
} |
||||||
|
|
||||||
|
$this->validate($rules); |
||||||
|
|
||||||
|
$user = $this->editingId |
||||||
|
? User::findOrFail($this->editingId) |
||||||
|
: new User; |
||||||
|
|
||||||
|
$user->fullname = $this->fullname; |
||||||
|
$user->email = $this->email; |
||||||
|
|
||||||
|
if ($this->password) { |
||||||
|
$user->password = $this->password; |
||||||
|
} |
||||||
|
|
||||||
|
$user->save(); |
||||||
|
$user->syncRoles($this->roles); |
||||||
|
|
||||||
|
session()->flash('message', 'User saved.'); |
||||||
|
$this->dispatch('userSaved'); |
||||||
|
} |
||||||
|
|
||||||
|
public function render() |
||||||
|
{ |
||||||
|
$users = User::with('roles') |
||||||
|
->when( |
||||||
|
$this->search, |
||||||
|
fn($q) => $q |
||||||
|
->where('fullname', 'like', "%{$this->search}%") |
||||||
|
->orWhere('email', 'like', "%{$this->search}%") |
||||||
|
) |
||||||
|
->orderByDesc('id') |
||||||
|
->paginate($this->perPage); |
||||||
|
|
||||||
|
return view('components.user.manager', [ |
||||||
|
'users' => $users, |
||||||
|
'allRoles' => collect($this->allRoles), |
||||||
|
'title' => $this->mode === 'index' |
||||||
|
? 'Users' |
||||||
|
: ($this->editingId ? 'Edit User' : 'Create User'), |
||||||
|
]); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,13 @@ |
|||||||
|
<?php |
||||||
|
namespace App\Http\Controllers; |
||||||
|
|
||||||
|
use App\Http\Controllers\Controller; |
||||||
|
use Spatie\Permission\Models\Role; |
||||||
|
|
||||||
|
class UserController extends Controller |
||||||
|
{ |
||||||
|
public function manager() |
||||||
|
{ |
||||||
|
return view('admin.users.manager'); |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,5 @@ |
|||||||
|
@extends('layouts.app') |
||||||
|
|
||||||
|
@section('content') |
||||||
|
<livewire:user.manager /> |
||||||
|
@endsection |
||||||
@ -0,0 +1,184 @@ |
|||||||
|
{{-- resources/views/components/user/manager.blade.php --}} |
||||||
|
<div class="row"> |
||||||
|
<div class="col-12"> |
||||||
|
<div class="card mb-4"> |
||||||
|
{{-- Header --}} |
||||||
|
<div class="card-header d-flex justify-content-between align-items-center pb-0"> |
||||||
|
<h6 class="mb-0">{{ $title }}</h6> |
||||||
|
@if ($mode === 'index') |
||||||
|
<div class="d-flex align-items-center"> |
||||||
|
<div class="me-2"> |
||||||
|
<select wire:model="perPage" wire:change="resetPage" |
||||||
|
class="form-select form-select-sm" style="width:100px;display:inline-block"> |
||||||
|
@foreach ($perPageOptions as $opt) |
||||||
|
<option value="{{ $opt }}">{{ $opt }}</option> |
||||||
|
@endforeach |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div class="input-group input-group-outline me-2"> |
||||||
|
<input type="text" |
||||||
|
wire:model.debounce.500ms="search" |
||||||
|
wire:keydown.enter="resetPage" |
||||||
|
class="form-control form-control-sm" |
||||||
|
placeholder="Search name or email..."> |
||||||
|
</div> |
||||||
|
<button wire:click="resetPage" |
||||||
|
class="btn btn-sm btn-outline-success me-2 m-0"> |
||||||
|
<i class="fas fa-search"></i> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
@else |
||||||
|
<button wire:click="showIndex" class="btn btn-sm btn-secondary"> |
||||||
|
← Back to list |
||||||
|
</button> |
||||||
|
@endif |
||||||
|
</div> |
||||||
|
|
||||||
|
{{-- Body --}} |
||||||
|
<div class="card-body p-3"> |
||||||
|
@if (session()->has('message')) |
||||||
|
<div class="alert alert-success">{{ session('message') }}</div> |
||||||
|
@endif |
||||||
|
|
||||||
|
@if ($mode === 'index') |
||||||
|
{{-- Skeleton with pagination placeholders --}} |
||||||
|
<x-skeleton-table |
||||||
|
:columns="6" |
||||||
|
:rows="10" |
||||||
|
height="3.5rem" |
||||||
|
:pages="5" |
||||||
|
/> |
||||||
|
|
||||||
|
{{-- Actual table --}} |
||||||
|
<div wire:loading.remove class="table-responsive"> |
||||||
|
<table class="table table-sm align-middle mb-0"> |
||||||
|
<thead> |
||||||
|
<tr style="height:3.5rem"> |
||||||
|
<th class="text-center" style="width:5%;">ID</th> |
||||||
|
<th style="width:25%;">Full Name</th> |
||||||
|
<th style="width:30%;">Email</th> |
||||||
|
<th style="width:20%;">Role</th> |
||||||
|
<th style="width:20%;">Phone</th> |
||||||
|
<th class="text-center" style="width:5%;">Actions</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
@forelse($users as $u) |
||||||
|
<tr style="height:3.5rem"> |
||||||
|
<td class="text-center">{{ $u->id }}</td> |
||||||
|
<td>{{ $u->fullname }}</td> |
||||||
|
<td>{{ $u->email }}</td> |
||||||
|
<td>{{ $u->roles->pluck('name')->join(', ') }}</td> |
||||||
|
<td>{{ $u->phone }}</td> |
||||||
|
<td class="text-center"> |
||||||
|
<button wire:click="showForm({{ $u->id }})" |
||||||
|
class="btn btn-sm btn-outline-info me-1"> |
||||||
|
Edit |
||||||
|
</button> |
||||||
|
<button x-data |
||||||
|
@click.prevent="if(confirm('Delete user?')){ $wire.delete({{ $u->id }}) }" |
||||||
|
class="btn btn-sm btn-danger"> |
||||||
|
Delete |
||||||
|
</button> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
@empty |
||||||
|
<tr> |
||||||
|
<td colspan="6" class="text-center">No users found.</td> |
||||||
|
</tr> |
||||||
|
@endforelse |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
|
||||||
|
{{-- Real pagination --}} |
||||||
|
<div wire:loading.remove class="mt-3"> |
||||||
|
@if ($users->lastPage() > 1) |
||||||
|
{{ $users->links() }} |
||||||
|
@endif |
||||||
|
</div> |
||||||
|
@else |
||||||
|
{{-- Form create/edit --}} |
||||||
|
<x-skeleton-form :fields="4" :button-count="2" /> |
||||||
|
<div wire:loading.remove> |
||||||
|
<form> |
||||||
|
<div class="mb-3"> |
||||||
|
<label class="form-label">Name</label> |
||||||
|
<input type="text" |
||||||
|
wire:model.defer="fullname" |
||||||
|
class="form-control form-control-sm" |
||||||
|
placeholder="fullname"> |
||||||
|
@error('fullname') |
||||||
|
<div class="text-danger small">{{ $message }}</div> |
||||||
|
@enderror |
||||||
|
</div> |
||||||
|
<div class="mb-3"> |
||||||
|
<label class="form-label">Email</label> |
||||||
|
<input type="email" |
||||||
|
wire:model.defer="email" |
||||||
|
class="form-control form-control-sm" |
||||||
|
placeholder="Email"> |
||||||
|
@error('email') |
||||||
|
<div class="text-danger small">{{ $message }}</div> |
||||||
|
@enderror |
||||||
|
</div> |
||||||
|
<div class="mb-3"> |
||||||
|
<label class="form-label"> |
||||||
|
Password |
||||||
|
@if ($editingId) |
||||||
|
<small>(leave blank to keep current)</small> |
||||||
|
@endif |
||||||
|
</label> |
||||||
|
<input type="password" |
||||||
|
wire:model.defer="password" |
||||||
|
class="form-control form-control-sm" |
||||||
|
placeholder="Password"> |
||||||
|
@error('password') |
||||||
|
<div class="text-danger small">{{ $message }}</div> |
||||||
|
@enderror |
||||||
|
</div> |
||||||
|
<div class="mb-3"> |
||||||
|
<label class="form-label">Confirm Password</label> |
||||||
|
<input type="password" |
||||||
|
wire:model.defer="password_confirmation" |
||||||
|
class="form-control form-control-sm" |
||||||
|
placeholder="Confirm"> |
||||||
|
</div> |
||||||
|
<div class="mb-3"> |
||||||
|
<label class="form-label">Roles</label> |
||||||
|
<select wire:model.defer="roles" |
||||||
|
multiple |
||||||
|
class="form-select form-select-sm"> |
||||||
|
@foreach ($allRoles as $role) |
||||||
|
<option value="{{ $role['name'] }}">{{ ucfirst($role['name']) }}</option> |
||||||
|
@endforeach |
||||||
|
</select> |
||||||
|
@error('roles') |
||||||
|
<div class="text-danger small">{{ $message }}</div> |
||||||
|
@enderror |
||||||
|
</div> |
||||||
|
<div class="d-flex justify-content-end"> |
||||||
|
<button type="button" |
||||||
|
wire:click="showIndex" |
||||||
|
class="btn btn-secondary btn-sm me-2"> |
||||||
|
Cancel |
||||||
|
</button> |
||||||
|
<button type="button" |
||||||
|
@click.prevent="if(confirm('Do you really want to {{ $editingId ? 'update' : 'create' }} this user?')){ $wire.save() }" |
||||||
|
class="btn btn-primary btn-sm"> |
||||||
|
{{ $editingId ? 'Update' : 'Create' }} |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
|
</div> |
||||||
|
@endif |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
@script |
||||||
|
<script> |
||||||
|
document.title = @json($title); |
||||||
|
</script> |
||||||
|
@endscript |
||||||
|
</div> |
||||||
Loading…
Reference in new issue