table component added
This commit is contained in:
erishBRBS
parent
24a63e924b
commit
817dac463c
|
|
@ -8,62 +8,56 @@ class Table extends Component
|
|||
{
|
||||
public $columns = [];
|
||||
public $rows = [];
|
||||
public $search = '';
|
||||
public $sortField = '';
|
||||
public $sortDirection = 'asc';
|
||||
public $currentPage = 1;
|
||||
public $perPage = 10;
|
||||
public $checkboxes = false;
|
||||
public $showActions = false;
|
||||
public $actions = [];
|
||||
public $addButtonLabel = '';
|
||||
public $searchable = false; // Add this property
|
||||
public $selected = []; // Holds the selected row IDs
|
||||
public $selectAll = false; // To track if 'Select All' is checked
|
||||
public $hasActions = false;
|
||||
public $isViewPage = false;
|
||||
|
||||
// Sort the table by the given field
|
||||
public function sortBy($field)
|
||||
// Add new methods for handling actions
|
||||
public function editRow($rowId)
|
||||
{
|
||||
if ($this->sortField === $field) {
|
||||
$this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
// Logic for editing a row (e.g., redirect to the edit page or open modal)
|
||||
session()->flash('message', 'Edit action for user ID: ' . $rowId);
|
||||
}
|
||||
|
||||
public function deleteRow($rowId)
|
||||
{
|
||||
// Logic for deleting a row (e.g., delete from database)
|
||||
session()->flash('message', 'Delete action for user ID: ' . $rowId);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
|
||||
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 {
|
||||
$this->sortField = $field;
|
||||
$this->sortDirection = 'asc';
|
||||
$this->selected = [];
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate total pages for pagination
|
||||
public function calculateTotalPages()
|
||||
public function selectRow($rowId)
|
||||
{
|
||||
return ceil(count($this->rows) / $this->perPage);
|
||||
}
|
||||
|
||||
// Get the paginated rows for the current page
|
||||
public function getPaginatedRowsProperty()
|
||||
{
|
||||
$sorted = collect($this->rows);
|
||||
|
||||
if ($this->sortField) {
|
||||
$sorted = $this->sortDirection === 'asc'
|
||||
? $sorted->sortBy($this->sortField)
|
||||
: $sorted->sortByDesc($this->sortField);
|
||||
if (in_array($rowId, $this->selected)) {
|
||||
$this->selected = array_diff($this->selected, [$rowId]);
|
||||
} else {
|
||||
$this->selected[] = $rowId;
|
||||
}
|
||||
|
||||
return $sorted
|
||||
->slice(($this->currentPage - 1) * $this->perPage, $this->perPage)
|
||||
->values();
|
||||
}
|
||||
|
||||
|
||||
// Set the current page for pagination
|
||||
public function setPage($page)
|
||||
{
|
||||
$this->currentPage = max(1, min($this->calculateTotalPages(), $page));
|
||||
}
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.components.table', [
|
||||
'paginatedRows' => $this->paginatedRows, // 👈 explicitly pass computed property
|
||||
]);
|
||||
return view('livewire.components.table');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -5,8 +5,33 @@ namespace App\Livewire;
|
|||
use Livewire\Component;
|
||||
class Notification extends Component
|
||||
{
|
||||
public $search = '';
|
||||
public $notifs = [];
|
||||
|
||||
// protected $queryString = ['search'];
|
||||
|
||||
// // Reset the current page when search is updated
|
||||
// public function updatingSearch()
|
||||
// {
|
||||
// $this->search = $this->search;
|
||||
// }
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$this->loadNotifications();
|
||||
}
|
||||
|
||||
// Get filtered users based on the search input
|
||||
public function loadNotifications()
|
||||
{
|
||||
$this->notifs = collect(json_decode(file_get_contents(storage_path('app/notifs.json')), true));
|
||||
}
|
||||
|
||||
|
||||
public function render()
|
||||
{
|
||||
return view('livewire.notification.notification');
|
||||
return view('livewire.notification.notification', [
|
||||
'notification' => $this->notifs, // Pass filtered notifs here
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,35 +9,27 @@ class UserManagement extends Component
|
|||
public $search = '';
|
||||
public $users = [];
|
||||
|
||||
protected $queryString = ['search'];
|
||||
// protected $queryString = ['search'];
|
||||
|
||||
// Reset the current page when search is updated
|
||||
public function updatingSearch()
|
||||
{
|
||||
$this->search = $this->search;
|
||||
}
|
||||
// // Reset the current page when search is updated
|
||||
// public function updatingSearch()
|
||||
// {
|
||||
// $this->search = $this->search;
|
||||
// }
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$this->loadUsers();
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Get filtered users based on the search input
|
||||
public function loadUsers()
|
||||
{
|
||||
$users = collect(json_decode(file_get_contents(storage_path('app/users.json')), true));
|
||||
|
||||
if ($this->search) {
|
||||
$this->users = $users->filter(function ($user) {
|
||||
return str_contains(strtolower($user['username']), strtolower($this->search)) ||
|
||||
str_contains(strtolower($user['first_name']), strtolower($this->search)) ||
|
||||
str_contains(strtolower($user['last_name']), strtolower($this->search)) ||
|
||||
str_contains(strtolower($user['email']), strtolower($this->search));
|
||||
});
|
||||
} else {
|
||||
$this->users = $users;
|
||||
}
|
||||
$this->users = collect(json_decode(file_get_contents(storage_path('app/users.json')), true));
|
||||
}
|
||||
|
||||
|
||||
public function render()
|
||||
{
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="{{ asset('assets/favicon_unioil.ico') }}" type="image/x-icon">
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
|
||||
<title>Unioil</title>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
@livewireStyles <!-- Add Livewire Styles -->
|
||||
|
|
|
|||
|
|
@ -1,112 +1,72 @@
|
|||
<div>
|
||||
<div class="p-4 bg-white rounded shadow">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
@if ($searchable)
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
class="border p-2 rounded w-1/3"
|
||||
wire:model.debounce.300ms="search"
|
||||
>
|
||||
@endif
|
||||
@if ($addButtonLabel)
|
||||
<button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">
|
||||
{{ $addButtonLabel }}
|
||||
</button>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<table class="min-w-full text-sm text-left border border-gray-200">
|
||||
<div class="p-4 bg-white rounded-lg shadow-md">
|
||||
<table class="table-auto w-full">
|
||||
<thead class="bg-gray-100">
|
||||
<tr>
|
||||
@if ($checkboxes)
|
||||
<th class="p-2"><input type="checkbox" /></th>
|
||||
@endif
|
||||
<!-- Select All Checkbox -->
|
||||
<th class="px-4 py-2 text-left">
|
||||
<input type="checkbox" wire:model="selectAll" wire:change="selectAllRows" class="cursor-pointer">
|
||||
</th>
|
||||
|
||||
@foreach ($columns as $col)
|
||||
<th
|
||||
class="p-2 cursor-pointer select-none"
|
||||
wire:click="sortBy('{{ $col['field'] }}')"
|
||||
>
|
||||
<div class="flex items-center space-x-1">
|
||||
<span>{{ $col['label'] }}</span>
|
||||
|
||||
{{-- Sort Icons --}}
|
||||
@if ($sortField === $col['field'])
|
||||
@if ($sortDirection === 'asc')
|
||||
{{-- Ascending Icon --}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 3l4 6H6l4-6z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
@else
|
||||
{{-- Descending Icon --}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-orange-500" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 17l-4-6h8l-4 6z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
@endif
|
||||
@else
|
||||
{{-- Neutral Sort Icon --}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M6 7h8l-4-4-4 4zm0 6h8l-4 4-4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
@endif
|
||||
</div>
|
||||
@foreach ($columns as $column)
|
||||
<th class="px-4 py-2 text-left cursor-pointer">
|
||||
{{ $column['label'] }}
|
||||
</th>
|
||||
@endforeach
|
||||
|
||||
{{-- Status Column --}}
|
||||
|
||||
{{-- Actions Column --}}
|
||||
|
||||
|
||||
@if ($showActions)
|
||||
<th class="p-2">Action</th>
|
||||
@if ($hasActions) <!-- Show the Actions column only if hasActions is true -->
|
||||
<th class="px-4 py-2 text-left">Actions</th>
|
||||
@endif
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse ($paginatedRows as $row)
|
||||
@forelse ($rows as $row)
|
||||
<tr class="hover:bg-gray-50">
|
||||
@if ($checkboxes)
|
||||
<td class="p-2"><input type="checkbox" /></td>
|
||||
@endif
|
||||
<!-- Row Checkbox -->
|
||||
<td class="px-4 py-2">
|
||||
<input type="checkbox" wire:click="selectRow('{{ $row['id'] }}')"
|
||||
@if(in_array($row['id'], $selected)) checked @endif class="cursor-pointer">
|
||||
</td>
|
||||
|
||||
@foreach ($columns as $col)
|
||||
<td class="p-2 {{ $col['field'] === 'status' ? 'text-blue-500' : '' }}">
|
||||
{{ $row[$col['field']] ?? '-' }}
|
||||
@foreach ($columns as $column)
|
||||
<td class="px-4 py-2">
|
||||
{{ $row[$column['field']] ?? '' }}
|
||||
</td>
|
||||
@endforeach
|
||||
|
||||
@if ($showActions)
|
||||
<td class="p-2 flex space-x-2 text-orange-500">
|
||||
@foreach ($actions as $action)
|
||||
<button wire:click="{{ $action['method'] }}({{ $row['id'] ?? 'null' }})">
|
||||
{{ $action['icon'] }}
|
||||
@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 -->
|
||||
</button>
|
||||
@endforeach
|
||||
@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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
@endif
|
||||
</td>
|
||||
@endif
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td class="p-2 text-center" colspan="{{ count($columns) + ($checkboxes ? 1 : 0) + ($showActions ? 1 : 0) }}">
|
||||
No data found.
|
||||
</td>
|
||||
<td colspan="{{ count($columns) + 1 }}" class="text-center p-4">No data available</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{{-- Pagination Controls --}}
|
||||
<div class="mt-4 flex justify-center space-x-2">
|
||||
@for ($page = 1; $page <= $this->calculateTotalPages(); $page++)
|
||||
<button
|
||||
wire:click="setPage({{ $page }})"
|
||||
class="px-3 py-1 border rounded {{ $currentPage === $page ? 'bg-orange-500 text-white' : 'bg-white text-gray-700' }}"
|
||||
>
|
||||
{{ $page }}
|
||||
</button>
|
||||
@endfor
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,17 @@
|
|||
<div>
|
||||
{{-- Top Nav --}}
|
||||
@include('livewire.notification.top-nav.notification')
|
||||
<h1>This is notification page</h1>
|
||||
<livewire:components.table
|
||||
:columns="[
|
||||
['label' => 'Subject', 'field' => 'subject'],
|
||||
['label' => 'Content', 'field' => 'content'],
|
||||
['label' => 'Is Scheduled', 'field' => 'is_scheduled'],
|
||||
['label' => 'Schedule', 'field' => 'schedule'],
|
||||
['label' => 'Expiration', 'field' => 'expiration'],
|
||||
]"
|
||||
:rows="$notifs"
|
||||
:hasActions="false"
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,20 +5,12 @@
|
|||
['label' => 'Username', 'field' => 'username'],
|
||||
['label' => 'First Name', 'field' => 'first_name'],
|
||||
['label' => 'Last Name', 'field' => 'last_name'],
|
||||
['label' => 'Role', 'field' => 'role'],
|
||||
['label' => 'Email', 'field' => 'email'],
|
||||
['label' => 'Role', 'field' => 'role'],
|
||||
['label' => 'Status', 'field' => 'status'],
|
||||
]"
|
||||
:rows="$users"
|
||||
:searchable="true"
|
||||
:search="$search"
|
||||
:checkboxes="true"
|
||||
:showActions="true"
|
||||
:actions="[
|
||||
['method' => 'editUser', 'icon' => '✏️'],
|
||||
['method' => 'deleteUser', 'icon' => '🗑️'],
|
||||
['method' => 'scheduleUser', 'icon' => '⏱️'],
|
||||
]"
|
||||
addButtonLabel="Add User"
|
||||
/>
|
||||
:rows="$users"
|
||||
:hasActions="true"
|
||||
:isViewPage="false"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue