189 lines
No EOL
9.3 KiB
PHP
189 lines
No EOL
9.3 KiB
PHP
<?php
|
|
|
|
use App\Models\User;
|
|
use Illuminate\Support\Facades\Auth;
|
|
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 string $sortField = 'name';
|
|
public string $sortDirection = 'asc';
|
|
|
|
|
|
/**
|
|
* Mount the component.
|
|
*/
|
|
public function mount(): void
|
|
{
|
|
// Standardwerte für Sortierung setzen
|
|
$this->sortField = 'name';
|
|
$this->sortDirection = 'asc';
|
|
}
|
|
|
|
public function sortBy(string $field): void
|
|
{
|
|
if ($this->sortField === $field) {
|
|
$this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
|
|
} else {
|
|
$this->sortDirection = 'asc';
|
|
}
|
|
$this->sortField = $field;
|
|
}
|
|
|
|
// Die Hauptmethode, um Daten zu laden
|
|
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->sortField, $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),
|
|
// ];
|
|
// }
|
|
}; ?>
|
|
|
|
<div>
|
|
{{-- Filter und Suchleiste (Beispiel, FluxUI Klassen anpassen) --}}
|
|
<div class="mb-4 grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-gray-100 rounded">
|
|
<div>
|
|
<label for="search" class="block text-sm font-medium text-gray-700">Suche</label>
|
|
<input wire:model.live.debounce.300ms="search" id="search" type="text" placeholder="Name oder E-Mail..."
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
|
|
</div>
|
|
<div>
|
|
<label for="statusFilter" class="block text-sm font-medium text-gray-700">Status</label>
|
|
<select wire:model.live="statusFilter" id="statusFilter"
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
|
|
<option value="">Alle</option>
|
|
<option value="active">Aktiv</option>
|
|
<option value="inactive">Inaktiv</option>
|
|
<option value="pending">Ausstehend</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="roleFilter" class="block text-sm font-medium text-gray-700">Rolle</label>
|
|
<input wire:model.live.debounce.300ms="roleFilter" id="roleFilter" type="text" placeholder="Rolle..."
|
|
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Tabelle (FluxUI Klassen anpassen!) --}}
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 shadow">
|
|
<thead class="bg-gray-50"> {{-- FluxUI Klasse für Thead --}}
|
|
<tr>
|
|
<th scope="col" wire:click="sortBy('name')"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
|
|
Name @if($sortField === 'name')<span>{{ $sortDirection === 'asc' ? '▲' : '▼' }}</span>@endif
|
|
</th>
|
|
<th scope="col" wire:click="sortBy('email')"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
|
|
E-Mail @if($sortField === 'email')<span>{{ $sortDirection === 'asc' ? '▲' : '▼' }}</span>@endif
|
|
</th>
|
|
<th scope="col" wire:click="sortBy('status')"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
|
|
Status @if($sortField === 'status')<span>{{ $sortDirection === 'asc' ? '▲' : '▼' }}</span>@endif
|
|
</th>
|
|
<th scope="col" wire:click="sortBy('role')"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
|
|
Rolle @if($sortField === 'role')<span>{{ $sortDirection === 'asc' ? '▲' : '▼' }}</span>@endif
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
Gruppe
|
|
</th>
|
|
<th scope="col"
|
|
class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
|
|
Rechte
|
|
</th>
|
|
<th scope="col" class="relative px-6 py-3">
|
|
<span class="sr-only">Aktionen</span>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200"> {{-- FluxUI Klasse für Tbody --}}
|
|
@forelse ($this->users() as $user)
|
|
<tr wire:key="{{ $user->id }}">
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $user->name }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $user->email }}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
|
|
{{ $user->status === 'active' ? 'bg-green-100 text-green-800' : ($user->status === 'inactive' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">
|
|
{{ ucfirst($user->status) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $user->role }} {{-- Oder $user->role->name, wenn es eine Relation ist --}}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{ $user->group }} {{-- Oder $user->group->name --}}
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
{{-- Darstellung der Rechte. Wenn es eine Many-to-Many Relation ist: --}}
|
|
{{-- @foreach($user->permissions as $permission)
|
|
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
|
{{ $permission->name }}
|
|
</span>
|
|
@endforeach --}}
|
|
{{-- Oder wenn es ein JSON-Feld ist, musst du es parsen und anzeigen --}}
|
|
Einfache Rechte-Anzeige (Todo)
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
<a href="#" class="text-indigo-600 hover:text-indigo-900">Bearbeiten</a> {{-- FluxUI Button-Klassen --}}
|
|
<button wire:click="$dispatch('openModal', { component: 'admin.delete-user-modal', arguments: { userId: {{ $user->id }} }})"
|
|
class="text-red-600 hover:text-red-900 ml-2">Löschen</button> {{-- FluxUI Button-Klassen --}}
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="7" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
|
|
Keine Benutzer gefunden.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
{{ $this->users()->links() }} {{-- Stellt sicher, dass die Paginierungs-Views für dein UI-Kit konfiguriert sind --}}
|
|
</div>
|
|
</div>
|