sorting by column added
This commit is contained in:
erishBRBS
parent
817dac463c
commit
3049bd01e2
|
|
@ -8,35 +8,29 @@ class Table extends Component
|
|||
{
|
||||
public $columns = [];
|
||||
public $rows = [];
|
||||
public $selected = []; // Holds the selected row IDs
|
||||
public $selectAll = false; // To track if 'Select All' is checked
|
||||
public $selected = [];
|
||||
public $selectAll = false;
|
||||
public $hasActions = 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 editRow($rowId)
|
||||
public function mount($columns, $rows)
|
||||
{
|
||||
// Logic for editing a row (e.g., redirect to the edit page or open modal)
|
||||
session()->flash('message', 'Edit action for user ID: ' . $rowId);
|
||||
$this->columns = $columns;
|
||||
$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)
|
||||
session()->flash('message', 'Delete action for user ID: ' . $rowId);
|
||||
$this->selected = [];
|
||||
}
|
||||
|
||||
public function viewRow($rowId)
|
||||
{
|
||||
// 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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Select all rows
|
||||
public function selectAllRows()
|
||||
{
|
||||
// Convert rows to a collection if it is an array, then pluck the 'id'
|
||||
if ($this->selectAll) {
|
||||
$this->selected = collect($this->rows)->pluck('id')->toArray();
|
||||
} else {
|
||||
|
|
@ -44,6 +38,7 @@ class Table extends Component
|
|||
}
|
||||
}
|
||||
|
||||
// Select single row
|
||||
public function selectRow($rowId)
|
||||
{
|
||||
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()
|
||||
{
|
||||
return view('livewire.components.table');
|
||||
return view('livewire.components.table', [
|
||||
'rows' => $this->rows,
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +1,28 @@
|
|||
<?php
|
||||
|
||||
// UserManagement.php
|
||||
namespace App\Livewire;
|
||||
|
||||
use Livewire\Component;
|
||||
|
||||
class UserManagement extends Component
|
||||
{
|
||||
public $search = '';
|
||||
public $users = [];
|
||||
|
||||
// protected $queryString = ['search'];
|
||||
|
||||
// // Reset the current page when search is updated
|
||||
// public function updatingSearch()
|
||||
// {
|
||||
// $this->search = $this->search;
|
||||
// }
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$this->loadUsers();
|
||||
$this->loadUsers(); // Load users initially
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Get filtered users based on the search input
|
||||
public function loadUsers()
|
||||
{
|
||||
$this->users = collect(json_decode(file_get_contents(storage_path('app/users.json')), true));
|
||||
}
|
||||
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.user-management.user-management', [
|
||||
'users' => $this->users, // Pass filtered users here
|
||||
'users' => $this->users, // Pass all users to the table
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,13 @@
|
|||
<div>
|
||||
<div class="p-4 bg-white rounded-lg shadow-md">
|
||||
<div class="mt-10">
|
||||
<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">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
|
|
@ -9,12 +17,25 @@
|
|||
</th>
|
||||
|
||||
@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'] }}
|
||||
<!-- Sorting Icons -->
|
||||
@if ($sortField === $column['field'])
|
||||
@if ($sortDirection === 'asc')
|
||||
<!-- Ascending Triangle (Up) -->
|
||||
<span class="ml-2">↑</span> <!-- Up Triangle -->
|
||||
@else
|
||||
<!-- Descending Triangle (Down) -->
|
||||
<span class="ml-2"> ↓</span> <!-- Down Triangle -->
|
||||
@endif
|
||||
@else
|
||||
<!-- Default to Ascending Triangle (Up) -->
|
||||
<span class="ml-2">↕</span> <!-- Up Triangle by default -->
|
||||
@endif
|
||||
</th>
|
||||
@endforeach
|
||||
|
||||
@if ($hasActions) <!-- Show the Actions column only if hasActions is true -->
|
||||
@if ($hasActions)
|
||||
<th class="px-4 py-2 text-left">Actions</th>
|
||||
@endif
|
||||
</tr>
|
||||
|
|
@ -34,28 +55,21 @@
|
|||
</td>
|
||||
@endforeach
|
||||
|
||||
@if ($hasActions) <!-- Show action icons only if hasActions is true -->
|
||||
<td class="px-4 py-2 text-center">
|
||||
@if($isViewPage) <!-- Check if it's the "View" page -->
|
||||
<!-- Only Show View Button for View Page -->
|
||||
<button wire:click="view({{ $row['id'] }})" class="text-green-500 hover:text-green-700">
|
||||
<i class="fas fa-eye"></i> <!-- Font Awesome View Icon -->
|
||||
@if ($hasActions)
|
||||
<td class="px-4 py-2 gap-2 flex">
|
||||
@if($isViewPage)
|
||||
<button wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
@else
|
||||
<!-- Show Edit, View, and Delete Icons for Non-View Pages -->
|
||||
<!-- Edit Icon -->
|
||||
<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 wire:click="editRow({{ $row['id'] }})" class="text-blue-500 hover:text-blue-700">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
|
||||
<!-- View Icon (only shown when it's NOT the View page) -->
|
||||
<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 wire:click="viewRow({{ $row['id'] }})" class="text-gray-500 hover:text-gray-700">
|
||||
<i class="fas fa-eye"></i>
|
||||
</button>
|
||||
|
||||
<!-- Delete Icon -->
|
||||
<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 wire:click="deleteRow({{ $row['id'] }})" class="text-red-500 hover:text-red-700">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
@endif
|
||||
</td>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<img src="{{ asset('assets/unioil(orange).png') }}" alt="Unioil Logo" class="mx-auto w-20 mt-5">
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue