mirror of
https://github.com/HolgerHatGarKeineNode/einundzwanzig-app.git
synced 2025-12-13 23:56:47 +00:00
🎉 Add event creation and editing functionality for meetups
This commit is contained in:
HolgerHatGarKeineNode
141
resources/views/livewire/meetups/create-edit-events.blade.php
Normal file
141
resources/views/livewire/meetups/create-edit-events.blade.php
Normal file
@@ -0,0 +1,141 @@
|
||||
<?php
|
||||
|
||||
use App\Models\Meetup;
|
||||
use App\Models\MeetupEvent;
|
||||
use Livewire\Attributes\Validate;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public Meetup $meetup;
|
||||
public ?MeetupEvent $event = null;
|
||||
|
||||
public $country = 'de';
|
||||
|
||||
#[Validate('required|date')]
|
||||
public string $start = '';
|
||||
|
||||
#[Validate('required|string|max:255')]
|
||||
public ?string $location = null;
|
||||
|
||||
#[Validate('required|string')]
|
||||
public ?string $description = null;
|
||||
|
||||
#[Validate('required|url|max:255')]
|
||||
public ?string $link = null;
|
||||
|
||||
public function mount(): void
|
||||
{
|
||||
$this->country = request()->route('country');
|
||||
if ($this->event) {
|
||||
$this->start = $this->event->start->format('Y-m-d\TH:i');
|
||||
$this->location = $this->event->location;
|
||||
$this->description = $this->event->description;
|
||||
$this->link = $this->event->link;
|
||||
} else {
|
||||
// Set default start time to next Monday at 19:00
|
||||
$this->start = now()->next('Monday')->setTime(19, 0)->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->meetup->meetupEvents()->create([
|
||||
...$validated,
|
||||
'created_by' => auth()->id(),
|
||||
'attendees' => [],
|
||||
'might_attendees' => [],
|
||||
]);
|
||||
session()->flash('status', __('Event erfolgreich erstellt!'));
|
||||
}
|
||||
|
||||
$this->redirect(route('meetups.landingpage', ['meetup' => $this->meetup, '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_with_country('meetups.edit', ['meetup' => $this->meetup]), navigate: true);
|
||||
}
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="max-w-4xl mx-auto p-6">
|
||||
<flux:heading size="xl" class="mb-8">
|
||||
{{ $event ? __('Event bearbeiten') : __('Neues Event erstellen') }}: {{ $meetup->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="start" type="datetime-local" required/>
|
||||
<flux:description>{{ __('Wann findet das Event statt?') }}</flux:description>
|
||||
<flux:error name="start"/>
|
||||
</flux:field>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('Ort') }}</flux:label>
|
||||
<flux:input wire:model="location" placeholder="{{ __('z.B. Café Mustermann, Hauptstr. 1') }}"/>
|
||||
<flux:description>{{ __('Wo findet das Event statt?') }}</flux:description>
|
||||
<flux:error name="location"/>
|
||||
</flux:field>
|
||||
</div>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('Beschreibung') }}</flux:label>
|
||||
<flux:textarea wire:model="description" rows="6" placeholder="{{ __('Beschreibe das Event...') }}"/>
|
||||
<flux:description>{{ __('Details über das Event') }}</flux:description>
|
||||
<flux:error name="description"/>
|
||||
</flux:field>
|
||||
|
||||
<flux:field>
|
||||
<flux:label>{{ __('Link') }}</flux:label>
|
||||
<flux:input wire:model="link" type="url" placeholder="https://example.com"/>
|
||||
<flux:description>{{ __('Link zu weiteren Informationen') }}</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 variant="ghost" type="button" :href="route_with_country('meetups.edit', ['meetup' => $meetup])">
|
||||
{{ __('Abbrechen') }}
|
||||
</flux:button>
|
||||
|
||||
@if($event)
|
||||
<flux:button 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 variant="primary" type="submit">
|
||||
{{ $event ? __('Event aktualisieren') : __('Event erstellen') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -152,6 +152,9 @@ new class extends Component {
|
||||
variant="filled" icon="pencil">
|
||||
{{ __('Bearbeiten') }}
|
||||
</flux:button>
|
||||
<flux:button :href="route_with_country('meetups.events.create', ['meetup' => $meetup])" size="xs" variant="ghost" icon="calendar">
|
||||
{{ __('Events') }}
|
||||
</flux:button>
|
||||
</flux:table.cell>
|
||||
</flux:table.row>
|
||||
@endforeach
|
||||
|
||||
@@ -194,39 +194,56 @@ new class extends Component {
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach($events as $event)
|
||||
<a href="{{ route('meetups.landingpage-event', ['meetup' => $meetup->slug, 'event' => $event->id, 'country' => $country]) }}"
|
||||
aria-label="{{ $event->description ?? 'Event details' }}">
|
||||
<flux:card size="sm" class="hover:bg-zinc-50 dark:hover:bg-zinc-700 h-full">
|
||||
<flux:heading class="flex items-center gap-2">
|
||||
{{ $event->start->format('d.m.Y') }}
|
||||
<flux:icon name="arrow-up-right" class="ml-auto text-zinc-400" variant="micro"/>
|
||||
</flux:heading>
|
||||
<flux:card size="sm" class="h-full flex flex-col">
|
||||
<flux:heading class="flex items-center gap-2">
|
||||
{{ $event->start->format('d.m.Y') }}
|
||||
</flux:heading>
|
||||
|
||||
<flux:text class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<flux:icon.clock class="inline w-4 h-4"/>
|
||||
{{ $event->start->format('H:i') }} Uhr
|
||||
<flux:text class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<flux:icon.clock class="inline w-4 h-4"/>
|
||||
{{ $event->start->format('H:i') }} Uhr
|
||||
</flux:text>
|
||||
|
||||
@if($event->location)
|
||||
<flux:text class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<flux:icon.map-pin class="inline w-4 h-4"/>
|
||||
{{ $event->location }}
|
||||
</flux:text>
|
||||
@endif
|
||||
|
||||
@if($event->location)
|
||||
<flux:text class="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<flux:icon.map-pin class="inline w-4 h-4"/>
|
||||
{{ $event->location }}
|
||||
</flux:text>
|
||||
@if($event->description)
|
||||
<flux:text class="mt-2">{{ Str::limit($event->description, 100) }}</flux:text>
|
||||
@endif
|
||||
|
||||
<flux:text class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<div class="text-xs text-zinc-500 flex items-center gap-2">
|
||||
<span>{{ count($event->attendees ?? []) }} Zusagen</span>
|
||||
<flux:separator vertical/>
|
||||
<span>{{ count($event->might_attendees ?? []) }} Vielleicht</span>
|
||||
</div>
|
||||
</flux:text>
|
||||
|
||||
<div class="mt-auto pt-4 flex gap-2">
|
||||
<flux:button
|
||||
:href="route('meetups.landingpage-event', ['meetup' => $meetup->slug, 'event' => $event->id, 'country' => $country])"
|
||||
size="xs"
|
||||
variant="primary"
|
||||
class="flex-1"
|
||||
>
|
||||
{{ __('Öffnen/RSVP') }}
|
||||
</flux:button>
|
||||
@if($meetup->belongsToMe)
|
||||
<flux:button
|
||||
:href="route_with_country('meetups.events.edit', ['meetup' => $meetup, 'event' => $event])"
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
icon="pencil"
|
||||
>
|
||||
{{ __('Bearbeiten') }}
|
||||
</flux:button>
|
||||
@endif
|
||||
|
||||
@if($event->description)
|
||||
<flux:text class="mt-2">{{ Str::limit($event->description, 100) }}</flux:text>
|
||||
@endif
|
||||
|
||||
<flux:text class="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<div class="text-xs text-zinc-500 flex items-center gap-2">
|
||||
<span>{{ count($event->attendees ?? []) }} Zusagen</span>
|
||||
<flux:separator vertical/>
|
||||
<span>{{ count($event->might_attendees ?? []) }} Vielleicht</span>
|
||||
</div>
|
||||
</flux:text>
|
||||
</flux:card>
|
||||
</a>
|
||||
</div>
|
||||
</flux:card>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,6 +21,8 @@ Route::middleware(['auth'])
|
||||
->group(function () {
|
||||
Volt::route('dashboard', 'dashboard')->name('dashboard');
|
||||
Volt::route('meetup-edit/{meetup}', 'meetups.edit')->name('meetups.edit');
|
||||
Volt::route('meetup/{meetup}/events/create', 'meetups.create-edit-events')->name('meetups.events.create');
|
||||
Volt::route('meetup/{meetup}/events/{event}/edit', 'meetups.create-edit-events')->name('meetups.events.edit');
|
||||
});
|
||||
|
||||
Route::middleware(['auth'])
|
||||
|
||||
Reference in New Issue
Block a user