✨ Add course event creation, editing, and listing with dynamic validations

resources/views/livewire/courses/create-edit-events.blade.php

@@ -0,0 +1,162 @@
+<?php
+
+use App\Models\Course;
+use App\Models\CourseEvent;
+use App\Models\Venue;
+use Livewire\Attributes\Validate;
+use Livewire\Volt\Component;
+
+new class extends Component {
+    public Course $course;
+    public ?CourseEvent $event = null;
+
+    public $country = 'de';
+
+    #[Validate('required|date')]
+    public string $from = '';
+
+    #[Validate('required|date|after:from')]
+    public string $to = '';
+
+    #[Validate('required|exists:venues,id')]
+    public ?int $venue_id = null;
+
+    #[Validate('required|url|max:255')]
+    public ?string $link = null;
+
+    public function mount(): void
+    {
+        $this->country = request()->route('country');
+        if ($this->event) {
+            $this->from = $this->event->from->format('Y-m-d\TH:i');
+            $this->to = $this->event->to->format('Y-m-d\TH:i');
+            $this->venue_id = $this->event->venue_id;
+            $this->link = $this->event->link;
+        } else {
+            // Set default start time to next Monday at 09:00
+            $nextMonday = now()->next('Monday')->setTime(9, 0);
+            $this->from = $nextMonday->format('Y-m-d\TH:i');
+            $this->to = $nextMonday->copy()->addHours(3)->format('Y-m-d\TH:i');
+        }
+    }
+
+    public function save(): void
+    {
+        $validated = $this->validate();
+
+        if ($this->event) {
+            // Update existing event
+            $this->event->update($validated);
+            session()->flash('status', __('Event erfolgreich aktualisiert!'));
+        } else {
+            // Create new event
+            $this->course->courseEvents()->create([
+                ...$validated,
+                'created_by' => auth()->id(),
+            ]);
+            session()->flash('status', __('Event erfolgreich erstellt!'));
+        }
+
+        $this->redirect(route('courses.landingpage', ['course' => $this->course, 'country' => $this->country]), navigate: true);
+    }
+
+    public function delete(): void
+    {
+        if ($this->event) {
+            $this->event->delete();
+            session()->flash('status', __('Event erfolgreich gelöscht!'));
+            $this->redirect(route('courses.landingpage', ['course' => $this->course, 'country' => $this->country]), navigate: true);
+        }
+    }
+
+    public function with(): array
+    {
+        return [
+            'venues' => Venue::query()->orderBy('name')->get(),
+        ];
+    }
+}; ?>
+
+<div class="max-w-4xl mx-auto p-6">
+    <flux:heading size="xl" class="mb-8">
+        {{ $event ? __('Event bearbeiten') : __('Neues Event erstellen') }}: {{ $course->name }}
+    </flux:heading>
+
+    <form wire:submit="save" class="space-y-10">
+
+        <!-- Event Details -->
+        <flux:fieldset class="space-y-6">
+            <flux:legend>{{ __('Event Details') }}</flux:legend>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+                <flux:field>
+                    <flux:label>{{ __('Startzeit') }} <span class="text-red-500">*</span></flux:label>
+                    <flux:input wire:model="from" type="datetime-local" required/>
+                    <flux:description>{{ __('Wann beginnt das Event?') }}</flux:description>
+                    <flux:error name="from"/>
+                </flux:field>
+
+                <flux:field>
+                    <flux:label>{{ __('Endzeit') }} <span class="text-red-500">*</span></flux:label>
+                    <flux:input wire:model="to" type="datetime-local" required/>
+                    <flux:description>{{ __('Wann endet das Event?') }}</flux:description>
+                    <flux:error name="to"/>
+                </flux:field>
+            </div>
+
+            <flux:field>
+                <flux:label>{{ __('Veranstaltungsort') }} <span class="text-red-500">*</span></flux:label>
+                <flux:select variant="listbox" searchable wire:model="venue_id"
+                             placeholder="{{ __('Veranstaltungsort auswählen') }}" required>
+                    <x-slot name="search">
+                        <flux:select.search class="px-4" placeholder="{{ __('Suche nach Ort...') }}"/>
+                    </x-slot>
+                    @foreach($venues as $venue)
+                        <flux:select.option value="{{ $venue->id }}">
+                            {{ $venue->name }}
+                            @if($venue->city)
+                                - {{ $venue->city->name }}
+                            @endif
+                        </flux:select.option>
+                    @endforeach
+                </flux:select>
+                <flux:description>{{ __('Wo findet das Event statt?') }}</flux:description>
+                <flux:error name="venue_id"/>
+            </flux:field>
+
+            <flux:field>
+                <flux:label>{{ __('Link') }} <span class="text-red-500">*</span></flux:label>
+                <flux:input wire:model="link" type="url" placeholder="https://example.com" required/>
+                <flux:description>{{ __('Link zu weiteren Informationen oder zur Anmeldung') }}</flux:description>
+                <flux:error name="link"/>
+            </flux:field>
+        </flux:fieldset>
+
+        <!-- Form Actions -->
+        <div class="flex items-center justify-between pt-8 border-t border-gray-200 dark:border-gray-700">
+            <div class="flex items-center gap-4">
+                <flux:button class="cursor-pointer" variant="ghost" type="button" :href="route('courses.landingpage', ['course' => $course, 'country' => $country])">
+                    {{ __('Abbrechen') }}
+                </flux:button>
+
+                @if($event)
+                    <flux:button class="cursor-pointer" variant="danger" type="button" wire:click="delete" wire:confirm="{{ __('Bist du sicher, dass du dieses Event löschen möchtest?') }}">
+                        {{ __('Event löschen') }}
+                    </flux:button>
+                @endif
+            </div>
+
+            <div class="flex items-center gap-4">
+                @if (session('status'))
+                    <flux:text class="text-green-600 dark:text-green-400 font-medium">
+                        {{ session('status') }}
+                    </flux:text>
+                @endif
+
+                <flux:button class="cursor-pointer" variant="primary" type="submit">
+                    {{ $event ? __('Event aktualisieren') : __('Event erstellen') }}
+                </flux:button>
+            </div>
+        </div>
+    </form>
+</div>

resources/views/livewire/courses/index.blade.php

@@ -113,7 +113,8 @@ new class extends Component {
                             {{ __('Bearbeiten') }}
                         </flux:button>
                         <flux:button
-                            :href="route_with_country('courses.events.create', ['course' => $course])"
+                            :disabled="$course->created_by !== auth()->id()"
+                            :href="$course->created_by === auth()->id() ? route_with_country('courses.events.create', ['course' => $course]) : null"
                             size="xs"
                             variant="filled"
                             icon="calendar">

resources/views/livewire/lecturers/index.blade.php

@@ -8,8 +8,6 @@ new class extends Component {
     use WithPagination;
 
     public $country = 'de';
-    public $sortBy = 'name';
-    public $sortDirection = 'asc';
     public $search = '';
 
     public function mount(): void
@@ -17,26 +15,23 @@ new class extends Component {
         $this->country = request()->route('country');
     }
 
-    public function sort($column)
-    {
-        if ($this->sortBy === $column) {
-            $this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
-        } else {
-            $this->sortBy = $column;
-            $this->sortDirection = 'asc';
-        }
-    }
-
     public function with(): array
     {
         return [
-            'lecturers' => Lecturer::with(['createdBy'])
+            'lecturers' => Lecturer::with(['createdBy', 'coursesEvents' => fn($query) => $query->where('from', '>=', now())->orderBy('from', 'asc')])
+                ->withExists([
+                    'coursesEvents as has_future_events' => fn($query) => $query->where('from', '>=', now())
+                ])
+                ->withCount([
+                    'coursesEvents as future_events_count' => fn($query) => $query->where('from', '>=', now())
+                ])
                 ->when($this->search, fn($query)
                     => $query->where('name', 'ilike', '%'.$this->search.'%')
                         ->orWhere('description', 'ilike', '%'.$this->search.'%')
                         ->orWhere('subtitle', 'ilike', '%'.$this->search.'%'),
                 )
-                ->orderBy($this->sortBy, $this->sortDirection)
+                ->orderByDesc('has_future_events')
+                ->orderBy('name', 'asc')
                 ->paginate(15),
         ];
     }
@@ -61,10 +56,9 @@ new class extends Component {
 
     <flux:table :paginate="$lecturers" class="mt-6">
         <flux:table.columns>
-            <flux:table.column sortable :sorted="$sortBy === 'name'" :direction="$sortDirection"
-                               wire:click="sort('name')">{{ __('Name') }}
+            <flux:table.column>{{ __('Name') }}
             </flux:table.column>
-            <flux:table.column>{{ __('Untertitel') }}</flux:table.column>
+            <flux:table.column>{{ __('Nächster Termin') }}</flux:table.column>
             <flux:table.column>{{ __('Kurse') }}</flux:table.column>
             <flux:table.column>{{ __('Links') }}</flux:table.column>
             <flux:table.column>{{ __('Aktionen') }}</flux:table.column>
@@ -74,6 +68,7 @@ new class extends Component {
             @foreach ($lecturers as $lecturer)
                 <flux:table.row :key="$lecturer->id">
                     <flux:table.cell variant="strong" class="flex items-center gap-3">
+                        <div class="flex items-center gap-3">
                             <flux:avatar size="lg" src="{{ $lecturer->getFirstMedia('avatar') ? $lecturer->getFirstMediaUrl('avatar', 'thumb') : asset('img/einundzwanzig.png') }}"/>
                             <div>
                                 <div class="font-semibold">{{ $lecturer->name }}</div>
@@ -83,12 +78,25 @@ new class extends Component {
                                     <flux:badge size="sm" color="zinc">{{ __('Inaktiv') }}</flux:badge>
                                 @endif
                             </div>
+                        </div>
                     </flux:table.cell>
 
                     <flux:table.cell>
-                        @if($lecturer->subtitle)
-                            <div class="text-sm text-zinc-600 dark:text-zinc-400">
-                                {{ Str::limit($lecturer->subtitle, 50) }}
+                        @php
+                            $nextEvent = $lecturer->coursesEvents->first();
+                        @endphp
+                        @if($nextEvent)
+                            <div class="flex flex-col gap-1">
+                                <a href="{{ route('courses.landingpage', ['course' => $nextEvent->course, 'country' => $country]) }}">
+                                    <flux:badge color="green" size="sm">
+                                        {{ $nextEvent->from->format('d.m.Y H:i') }}
+                                    </flux:badge>
+                                </a>
+                                @if($lecturer->future_events_count > 1)
+                                    <div class="text-xs text-zinc-500">
+                                        +{{ $lecturer->future_events_count - 1 }} {{ __('weitere Termine') }}
+                                    </div>
+                                @endif
                             </div>
                         @endif
                     </flux:table.cell>