144 lines
5.5 KiB
PHP
144 lines
5.5 KiB
PHP
<?php
|
|
|
|
use App\Models\User;
|
|
use Livewire\Volt\Component;
|
|
use Livewire\WithPagination; // Wichtig für Paginierung
|
|
|
|
|
|
new class extends Component {
|
|
use WithPagination;
|
|
|
|
// Optional: Such- und Filter-Properties
|
|
public string $search = '';
|
|
public string $statusFilter = '';
|
|
public string $roleFilter = '';
|
|
|
|
// Optional: Sortierung
|
|
public $sortBy = 'name';
|
|
public $sortDirection = 'asc';
|
|
|
|
|
|
/**
|
|
* Mount the component.
|
|
*/
|
|
public function mount(): void
|
|
{
|
|
// Standardwerte für Sortierung setzen
|
|
$this->sortBy = 'name';
|
|
$this->sortDirection = 'asc';
|
|
}
|
|
|
|
|
|
public function sort($column) {
|
|
if ($this->sortBy === $column) {
|
|
$this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
|
|
} else {
|
|
$this->sortBy = $column;
|
|
$this->sortDirection = 'asc';
|
|
}
|
|
}
|
|
|
|
|
|
/*public function orders()
|
|
{
|
|
return \App\Models\Order::query()
|
|
->tap(fn ($query) => $this->sortBy ? $query->orderBy($this->sortBy, $this->sortDirection) : $query)
|
|
->paginate(5);
|
|
}*/
|
|
|
|
|
|
|
|
// Die Hauptmethode, um Daten zu laden
|
|
#[\Livewire\Attributes\Computed]
|
|
public function users()
|
|
{
|
|
return User::query()
|
|
->when($this->search, fn($query, $search) =>
|
|
$query->where('name', 'like', '%' . $search . '%')
|
|
->orWhere('email', 'like', '%' . $search . '%')
|
|
)
|
|
->when($this->statusFilter, fn($query, $status) =>
|
|
$query->where('status', $status)
|
|
)
|
|
->when($this->roleFilter, fn($query, $role) =>
|
|
$query->where('role', $role) // oder 'role_id' wenn du IDs verwendest
|
|
)
|
|
->orderBy($this->sortBy, $this->sortDirection)
|
|
->paginate(10); // 10 Einträge pro Seite
|
|
}
|
|
|
|
// Optional: Lifecycle hook für das Zurücksetzen der Paginierung bei Suche/Filterung
|
|
public function updatedSearch() { $this->resetPage(); }
|
|
public function updatedStatusFilter() { $this->resetPage(); }
|
|
public function updatedRoleFilter() { $this->resetPage(); }
|
|
|
|
// Wird für die Paginierung mit Tailwind benötigt (Standard in Livewire 3)
|
|
// Wenn FluxUI Bootstrap-basierte Paginierung braucht, musst du das anpassen
|
|
// public function paginationView()
|
|
// {
|
|
// return 'vendor.livewire.tailwind'; // oder 'livewire::bootstrap'
|
|
// }
|
|
|
|
// Wenn du mit Relationen arbeitest (z.B. user->role->name)
|
|
// public function with(): array
|
|
// {
|
|
// return [
|
|
// 'users' => User::with(['role', 'group']) // Eager loading
|
|
// // ... deine Query-Logik von oben ...
|
|
// ->paginate(10),
|
|
// ];
|
|
// }
|
|
}; ?>
|
|
<flux:table :paginate="$this->users">
|
|
<flux:table.columns>
|
|
<flux:table.column>Customer</flux:table.column>
|
|
<flux:table.column sortable :sorted="$sortBy === 'date'" :direction="$sortDirection" wire:click="sort('date')">Date</flux:table.column>
|
|
<flux:table.column sortable :sorted="$sortBy === 'status'" :direction="$sortDirection" wire:click="sort('status')">Status</flux:table.column>
|
|
<flux:table.column sortable :sorted="$sortBy === 'amount'" :direction="$sortDirection" wire:click="sort('amount')">Amount</flux:table.column>
|
|
</flux:table.columns>
|
|
|
|
<flux:table.rows>
|
|
@foreach ($this->users as $user)
|
|
<flux:table.row :key="$user->id">
|
|
<flux:table.cell class="flex items-center gap-3">
|
|
<flux:avatar size="xs" src="{{ $user->avatar }}" />
|
|
|
|
{{ $user->name }}
|
|
</flux:table.cell>
|
|
|
|
<flux:table.cell class="whitespace-nowrap">{{ $user->email }}</flux:table.cell>
|
|
|
|
<flux:table.cell>
|
|
<flux:badge size="sm" color="lime" inset="top bottom">RTest</flux:badge>
|
|
</flux:table.cell>
|
|
|
|
<flux:table.cell variant="strong">{{ $user->role }}</flux:table.cell>
|
|
|
|
<flux:table.cell>
|
|
<flux:dropdown>
|
|
<flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset="top bottom"></flux:button>
|
|
<flux:menu>
|
|
<flux:menu.item icon="plus">New post</flux:menu.item>
|
|
<flux:menu.separator />
|
|
<flux:menu.submenu heading="Sort by">
|
|
<flux:menu.radio.group>
|
|
<flux:menu.radio checked>Name</flux:menu.radio>
|
|
<flux:menu.radio>Date</flux:menu.radio>
|
|
<flux:menu.radio>Popularity</flux:menu.radio>
|
|
</flux:menu.radio.group>
|
|
</flux:menu.submenu>
|
|
<flux:menu.submenu heading="Filter">
|
|
<flux:menu.checkbox checked>Draft</flux:menu.checkbox>
|
|
<flux:menu.checkbox checked>Published</flux:menu.checkbox>
|
|
<flux:menu.checkbox>Archived</flux:menu.checkbox>
|
|
</flux:menu.submenu>
|
|
<flux:menu.separator />
|
|
<flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>
|
|
</flux:menu>
|
|
</flux:dropdown>
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@endforeach
|
|
</flux:table.rows>
|
|
</flux:table>
|
|
|