First commit
This commit is contained in:
commit
7cf3558ba7
12933 changed files with 1180047 additions and 0 deletions
189
resources/views/livewire/portal/users.blade.php
Normal file
189
resources/views/livewire/portal/users.blade.php
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
<?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>
|
||||
144
resources/views/livewire/portal/users/table.blade.php
Normal file
144
resources/views/livewire/portal/users/table.blade.php
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<?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>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue