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

Add loading Permission

Browse Source
pull/2/head
sundayenglish 4 weeks ago
parent 62173e9ace
commit d4486c4b2f
5 changed files with 100 additions and 49 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      app/View/Components/SkeletonForm.php
  2. 24
      app/View/Components/SkeletonTable.php
  3. 55
      resources/views/components/permission/manager.blade.php
  4. 22
      resources/views/components/skeleton-form.blade.php
  5. 26
      resources/views/components/skeleton-table.blade.php

22
app/View/Components/SkeletonForm.php
Unescape View File

@ -0,0 +1,22 @@
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class SkeletonForm extends Component
{
public $fields;
public $buttonCount;
public function __construct(int $fields = 2, int $buttonCount = 2)
{
$this->fields = $fields;
$this->buttonCount = $buttonCount;
}
public function render()
{
return view('components.skeleton-form');
}
}

24
app/View/Components/SkeletonTable.php
Unescape View File

@ -0,0 +1,24 @@
<?php
namespace App\View\Components;
use Illuminate\View\Component;
class SkeletonTable extends Component
{
public $columns;
public $rows;
public $height;
public function __construct(int $columns = 3, int $rows = 5, string $height = '3.5rem')
{
$this->columns = $columns;
$this->rows = $rows;
$this->height = $height;
}
public function render()
{
return view('components.skeleton-table');
}
}

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

@ -1,3 +1,5 @@
{{-- resources/views/livewire/permission-manager.blade.php --}}
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<div class="card mb-4"> <div class="card mb-4">
@ -34,44 +36,11 @@
@if ($mode === 'index') @if ($mode === 'index')
{{-- SKELETON TABLE --}} {{-- SKELETON TABLE --}}
<div wire:loading class="w-100"> <x-skeleton-table :columns="3" :rows="5" height="3.5rem" />
<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 --}} {{-- ACTUAL TABLE --}}
<div wire:loading.remove class="table-responsive"> <div wire:loading.remove class="table-responsive w-100">
<table class="table align-items-center mb-0"> <table class="table align-items-center mb-0 w-100">
<thead> <thead>
<tr style="height:3.5rem"> <tr style="height:3.5rem">
<th class="text-center">ID</th> <th class="text-center">ID</th>
@ -112,18 +81,7 @@
</div> </div>
@else @else
{{-- SKELETON FORM --}} {{-- SKELETON FORM --}}
<div wire:loading class="w-100"> <x-skeleton-form :fields="1" :button-count="2" />
<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 mt-2">
<div class="skeleton rounded" style="width:100%; height:3.5rem;"></div>
</div>
<div class="d-flex justify-content-end gap-3 mt-2">
<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 --}} {{-- ACTUAL FORM --}}
<div wire:loading.remove> <div wire:loading.remove>
@ -147,7 +105,6 @@
</div> </div>
</form> </form>
</div> </div>
@endif @endif
</div> </div>
</div> </div>

22
resources/views/components/skeleton-form.blade.php
Unescape View File

@ -0,0 +1,22 @@
@props(['fields', 'buttonCount'])
<div wire:loading class="w-100">
<div class="p-4 border rounded-lg shadow-sm max-w-md mx-auto space-y-4">
{{-- Title --}}
<div class="skeleton rounded" style="width:10rem; height:2rem;"></div>
{{-- Fields --}}
<div class="space-y-3 mt-2">
@for ($i = 0; $i < $fields; $i++)
<div class="skeleton rounded" style="width:100%; height:3.5rem;"></div>
@endfor
</div>
{{-- Buttons --}}
<div class="d-flex justify-content-end gap-3 mt-2">
@for ($i = 0; $i < $buttonCount; $i++)
<div class="skeleton rounded" style="width:5.5rem; height:2.5rem;"></div>
@endfor
</div>
</div>
</div>

26
resources/views/components/skeleton-table.blade.php
Unescape View File

@ -0,0 +1,26 @@
@props(['columns', 'rows', 'height'])
<div wire:loading class="w-100">
<div class="table-responsive w-100">
<table class="table mb-0 w-100">
<thead>
<tr style="visibility:hidden; height:{{ $height }}">
@for ($i = 0; $i < $columns; $i++)
<th>&nbsp;</th>
@endfor
</tr>
</thead>
<tbody>
@for ($r = 0; $r < $rows; $r++)
<tr style="height:{{ $height }}">
@for ($c = 0; $c < $columns; $c++)
<td class="align-middle">
<div class="skeleton rounded w-100" style="height:1.75rem"></div>
</td>
@endfor
</tr>
@endfor
</tbody>
</table>
</div>
</div>
Write Preview
Loading…
Cancel
Save