sundayenglish
/
GK-Content-Management
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Add loading Permission

Browse Source
master
sundayenglish 4 weeks ago
parent 61b5596eb7
commit c06a821008
3 changed files with 118 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 33
      public/css/skeleton.css
  2. 112
      resources/views/components/permission/manager.blade.php
  3. 3
      resources/views/layouts/app.blade.php

33
public/css/skeleton.css vendored
Unescape View File

@ -0,0 +1,33 @@
/* public/css/skeleton.css */
/* 1. Định nghĩa keyframes cho shimmer */
@keyframes shimmer {
0% { transform: translateX(0%); }
100% { transform: translateX(100%); }
}
/* 2. Lớp base cho skeleton */
.skeleton {
position: relative;
overflow: hidden;
background-color: #e2e2e2;
}
/* 3. Pseudo-element để tạo shimmer */
.skeleton::after {
content: "";
position: absolute;
top: 0; left: -150%;
width: 150%; height: 100%;
background: linear-gradient(
90deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,0.5) 50%,
rgba(255,255,255,0) 100%
);
animation: shimmer 1.5s infinite;
}
/* Tuỳ biến thêm nếu muốn */
/* .skeleton.rounded { border-radius: .375rem; } */
/* .skeleton-lg { height: 3.5rem; } */

112
resources/views/components/permission/manager.blade.php
Unescape View File

@ -1,9 +1,9 @@
<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">
{{-- Tiêu đề động --}}
<h6 class="mb-0">{{ $title }}</h6>
@if ($mode === 'index')
@ -33,10 +33,47 @@
@endif
@if ($mode === 'index')
<div class="table-responsive">
{{-- 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>
<tr style="height:3.5rem">
<th class="text-center">ID</th>
<th>Name</th>
<th class="text-center">Actions</th>
@ -44,10 +81,10 @@
</thead>
<tbody>
@forelse($permissions as $p)
<tr>
<td class="text-center">{{ $p->id }}</td>
<td>{{ $p->name }}</td>
<td class="text-center">
<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
@ -67,39 +104,56 @@
</table>
</div>
{{-- Phân trang --}}
<div class="mt-3">
{{-- Pagination --}}
<div wire:loading.remove class="mt-3">
@if ($permissions->lastPage() > 1)
{{ $permissions->links() }}
@endif
</div>
@else
{{-- Form --}}
<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
{{-- 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 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>
{{-- 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>
{{-- Livewire sẽ chèn và chạy block này sau mỗi lần component render xong --}}
@script
<script>
document.title = @json($title);

3
resources/views/layouts/app.blade.php
Unescape View File

@ -21,7 +21,8 @@
{{-- CSS --}}
<link id="pagestyle" href="{{ asset('soft-ui/assets/css/soft-ui-dashboard.css?v=1.1.0') }}" rel="stylesheet">
<link href="{{ asset('css/skeleton.css') }}" rel="stylesheet">
{{-- Livewire Styles --}}
@livewireStyles

Write Preview
Loading…
Cancel
Save