erishberboso
/
unioil-cms-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sorting by column added

This commit is contained in:
erishBRBS 2025-04-20 15:33:19 +08:00
parent 817dac463c
commit 3049bd01e2
4 changed files with 74 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/Livewire/Components/Table.php
View File

@ -8,35 +8,29 @@ class Table extends Component
{ {
public $columns = []; public $columns = [];
public $rows = []; public $rows = [];
public $selected = []; // Holds the selected row IDs public $selected = [];
public $selectAll = false; // To track if 'Select All' is checked public $selectAll = false;
public $hasActions = false; public $hasActions = false;
public $isViewPage = false; public $isViewPage = false;
public $search = '';
public $sortField = null; // Column to sort
public $sortDirection = 'asc'; // Default sort direction
// Add new methods for handling actions public function mount($columns, $rows)
public function editRow($rowId)
{ {
// Logic for editing a row (e.g., redirect to the edit page or open modal) $this->columns = $columns;
session()->flash('message', 'Edit action for user ID: ' . $rowId); $this->rows = $rows;
} }
public function deleteRow($rowId) // Update rows based on search
public function updatedSearch()
{ {
// Logic for deleting a row (e.g., delete from database) $this->selected = [];
session()->flash('message', 'Delete action for user ID: ' . $rowId);
} }
public function viewRow($rowId) // Select all rows
{
// Logic for viewing a row (e.g., redirect to the view page or open a modal)
session()->flash('message', 'View action for user ID: ' . $rowId);
}
public function selectAllRows() public function selectAllRows()
{ {
// Convert rows to a collection if it is an array, then pluck the 'id'
if ($this->selectAll) { if ($this->selectAll) {
$this->selected = collect($this->rows)->pluck('id')->toArray(); $this->selected = collect($this->rows)->pluck('id')->toArray();
} else { } else {
@ -44,6 +38,7 @@ class Table extends Component
} }
} }
// Select single row
public function selectRow($rowId) public function selectRow($rowId)
{ {
if (in_array($rowId, $this->selected)) { if (in_array($rowId, $this->selected)) {
@ -53,11 +48,25 @@ class Table extends Component
} }
} }
// Simplified version
public function sortBy($field)
{
if ($this->sortField === $field) {
$this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
} else {
$this->sortField = $field;
$this->sortDirection = 'asc';
}
$this->rows = collect($this->rows)->sortBy(function ($row) {
return $row[$this->sortField] ?? null;
}, SORT_REGULAR, $this->sortDirection === 'desc')->values()->all(); // Use all() to return plain array again
}
public function render() public function render()
{ {
return view('livewire.components.table'); return view('livewire.components.table', [
'rows' => $this->rows,
]);
} }
} }

18
app/Livewire/UserManagement.php
View File

@ -1,40 +1,28 @@
<?php <?php
// UserManagement.php
namespace App\Livewire; namespace App\Livewire;
use Livewire\Component; use Livewire\Component;
class UserManagement extends Component class UserManagement extends Component
{ {
public $search = '';
public $users = []; public $users = [];
// protected $queryString = ['search'];
// // Reset the current page when search is updated
// public function updatingSearch()
// {
// $this->search = $this->search;
// }
public function mount() public function mount()
{ {
$this->loadUsers(); $this->loadUsers(); // Load users initially
} }
// Get filtered users based on the search input
public function loadUsers() public function loadUsers()
{ {
$this->users = collect(json_decode(file_get_contents(storage_path('app/users.json')), true)); $this->users = collect(json_decode(file_get_contents(storage_path('app/users.json')), true));
} }
public function render() public function render()
{ {
return view('livewire.user-management.user-management', [ return view('livewire.user-management.user-management', [
'users' => $this->users, // Pass filtered users here 'users' => $this->users, // Pass all users to the table
]); ]);
} }
} }

58
resources/views/livewire/components/table.blade.php
View File

@ -1,5 +1,13 @@
<div> <div class="mt-10">
<div class="p-4 bg-white rounded-lg shadow-md"> <div class="p-4 bg-white shadow-md">
<!-- Search Input with Debounce -->
<div class="mb-4">
<input type="text" wire:model.debounce.500ms="search"
class="w-80 p-2 border border-gray-300 rounded-md"
placeholder="Search..."
autofocus>
</div>
<table class="table-auto w-full"> <table class="table-auto w-full">
<thead class="bg-gray-100"> <thead class="bg-gray-100">
<tr> <tr>
@ -9,12 +17,25 @@
</th> </th>
@foreach ($columns as $column) @foreach ($columns as $column)
<th class="px-4 py-2 text-left cursor-pointer"> <th class="px-4 py-2 text-left cursor-pointer" wire:click="sortBy('{{ $column['field'] }}')">
{{ $column['label'] }} {{ $column['label'] }}
<!-- Sorting Icons -->
@if ($sortField === $column['field'])
@if ($sortDirection === 'asc')
<!-- Ascending Triangle (Up) -->
<span class="ml-2">&#8593;</span> <!-- Up Triangle -->
@else
<!-- Descending Triangle (Down) -->
<span class="ml-2"> &#8595;</span> <!-- Down Triangle -->
@endif
@else
<!-- Default to Ascending Triangle (Up) -->
<span class="ml-2">&#8597;</span> <!-- Up Triangle by default -->
@endif
</th> </th>
@endforeach @endforeach
@if ($hasActions) <!-- Show the Actions column only if hasActions is true --> @if ($hasActions)
<th class="px-4 py-2 text-left">Actions</th> <th class="px-4 py-2 text-left">Actions</th>
@endif @endif
</tr> </tr>
@ -34,28 +55,21 @@
</td> </td>
@endforeach @endforeach
@if ($hasActions) <!-- Show action icons only if hasActions is true --> @if ($hasActions)
<td class="px-4 py-2 text-center"> <td class="px-4 py-2 gap-2 flex">
@if($isViewPage) <!-- Check if it's the "View" page --> @if($isViewPage)
<!-- Only Show View Button for View Page --> <button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
<button wire:click="view({{ $row['id'] }})" class="text-green-500 hover:text-green-700"> <i class="fas fa-eye"></i>
<i class="fas fa-eye"></i> <!-- Font Awesome View Icon -->
</button> </button>
@else @else
<!-- Show Edit, View, and Delete Icons for Non-View Pages --> <button wire:click="editRow({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
<!-- Edit Icon --> <i class="fas fa-edit"></i>
<button wire:click="edit({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
<i class="fas fa-edit"></i> <!-- Font Awesome Edit Icon -->
</button> </button>
<button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
<!-- View Icon (only shown when it's NOT the View page) --> <i class="fas fa-eye"></i>
<button wire:click="view({{ $row['id'] }})" class="text-green-500 hover:text-green-700">
<i class="fas fa-eye"></i> <!-- Font Awesome View Icon -->
</button> </button>
<button wire:click="deleteRow({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
<!-- Delete Icon --> <i class="fas fa-trash-alt"></i>
<button wire:click="delete({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
<i class="fas fa-trash-alt"></i> <!-- Font Awesome Delete Icon -->
</button> </button>
@endif @endif
</td> </td>

2
resources/views/livewire/navigation/drawer.blade.php
View File

@ -1,4 +1,4 @@
<div class="w-80 bg-slate-50 text-black flex-shrink-0"> <div class="w-80 bg-white text-black flex-shrink-0 shadow-md">
<div class="text-center mb-5"> <div class="text-center mb-5">
<img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto w-20 mt-5"> <img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto w-20 mt-5">
</div> </div>