You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
163 lines
8.3 KiB
163 lines
8.3 KiB
<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">
|
|
{{-- dropdown perPage --}}
|
|
<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>
|
|
{{-- search --}}
|
|
<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...">
|
|
</div>
|
|
<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>
|
|
{{-- new --}}
|
|
<button wire:click="showForm" class="btn btn-sm btn-info m-0">
|
|
Create
|
|
</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')
|
|
{{-- index --}}
|
|
<x-skeleton-table :columns="4" :rows="5" height="3.5rem" />
|
|
<div wire:loading.remove class="table-responsive">
|
|
<table class="table mb-0 align-middle">
|
|
<thead>
|
|
<tr style="height:3.5rem">
|
|
<th class="text-center">ID</th>
|
|
<th>Name</th>
|
|
<th>Permissions</th> {{-- cột mới --}}
|
|
<th class="text-center">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($roles as $r)
|
|
<tr style="height:3.5rem">
|
|
<td class="text-center">{{ $r->id }}</td>
|
|
<td>{{ $r->name }}</td>
|
|
<td>
|
|
@forelse($r->permissions as $p)
|
|
<span class="badge bg-secondary me-1">{{ $p->name }}</span>
|
|
@empty
|
|
<span class="text-muted">—</span>
|
|
@endforelse
|
|
</td>
|
|
<td class="text-center">
|
|
<button wire:click="showForm({{ $r->id }})"
|
|
class="btn btn-sm btn-outline-info me-1">
|
|
Edit
|
|
</button>
|
|
<button x-data
|
|
@click.prevent="
|
|
if (confirm('Delete role?')) {
|
|
$wire.delete({{ $r->id }})
|
|
}
|
|
"
|
|
class="btn btn-sm btn-danger">
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" class="text-center">No roles found.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div wire:loading.remove class="mt-3">
|
|
@if ($roles->lastPage() > 1)
|
|
{{ $roles->links() }}
|
|
@endif
|
|
</div>
|
|
@else
|
|
{{-- form edit/create --}}
|
|
<x-skeleton-form :fields="1" :button-count="2" />
|
|
<div wire:loading.remove>
|
|
<form>
|
|
<div class="mb-3">
|
|
<label class="form-label">Name</label>
|
|
<input type="text" wire:model.defer="name" class="form-control"
|
|
placeholder="Role name">
|
|
@error('name')
|
|
<div class="text-danger small">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
{{-- checkbox list permissions --}}
|
|
<div class="mb-3">
|
|
<label class="form-label">Permissions</label>
|
|
<div class="row">
|
|
@foreach ($allPermissions as $perm)
|
|
<div class="col-6 col-md-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox"
|
|
wire:model="assignedPermissions" value="{{ $perm['id'] }}"
|
|
id="perm-{{ $perm['id'] }}">
|
|
<label class="form-check-label small" for="perm-{{ $perm['id'] }}">
|
|
{{ $perm['name'] }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@error('assignedPermissions')
|
|
<div class="text-danger small mt-1">{{ $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 role?')) {
|
|
$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>
|
|
|