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.
162 lines
8.3 KiB
162 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">
|
|
<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>
|
|
<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')
|
|
{{-- 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>
|
|
|
|
{{-- ACTUAL TABLE --}}
|
|
<div wire:loading.remove class="table-responsive">
|
|
<table class="table align-items-center mb-0">
|
|
<thead>
|
|
<tr style="height:3.5rem">
|
|
<th class="text-center">ID</th>
|
|
<th>Name</th>
|
|
<th class="text-center">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($permissions as $p)
|
|
<tr style="height:3.5rem">
|
|
<td class="text-center align-middle">{{ $p->id }}</td>
|
|
<td class="align-middle">{{ $p->name }}</td>
|
|
<td class="text-center align-middle">
|
|
<button wire:click="showForm({{ $p->id }})"
|
|
class="btn btn-sm btn-outline-info me-1">
|
|
Edit
|
|
</button>
|
|
<button wire:click="delete({{ $p->id }})"
|
|
class="btn btn-sm btn-danger">
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="3" class="text-center">No permissions found.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- Pagination --}}
|
|
<div wire:loading.remove class="mt-3">
|
|
@if ($permissions->lastPage() > 1)
|
|
{{ $permissions->links() }}
|
|
@endif
|
|
</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">
|
|
<div class="skeleton rounded" style="width:100%; height:3.5rem;"></div>
|
|
<div class="skeleton rounded" style="width:95%; height:3.5rem;"></div>
|
|
</div>
|
|
<div class="d-flex justify-content-end gap-3">
|
|
<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>
|
|
|
|
{{-- ACTUAL FORM --}}
|
|
<div wire:loading.remove>
|
|
<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 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-info btn-sm">
|
|
{{ $editingId ? 'Update' : 'Create' }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@script
|
|
<script>
|
|
document.title = @json($title);
|
|
</script>
|
|
@endscript
|
|
</div>
|
|
|