th.guenther/mareike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handling of event addons

Browse Source
This commit is contained in:
th.guenther
2026-08-12 17:18:45 +02:00
parent 085299336e
commit 6e4e6b645c
74 changed files with 3072 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Domains/Event/Actions/CreateEvent/CreateEventCommand.php
+7
View File
@@ -47,6 +47,13 @@ class CreateEventCommand {
'total_max_amount' => 0,
'support_per_person' => 0,
'support_flat' => 0,
// Umsatzsteuerliche Grundlage bei Anlage einfrieren (unveränderlich), damit Preisermittlung und
// spätere Rechnungen von späteren Tenant-Änderungen unberührt bleiben.
'tax_liable' => app('tenant')->tax_liable,
'vat_rate' => app('tenant')->vat_rate,
'vat_pricing_mode' => app('tenant')->vat_pricing_mode,
'tax_exemption_reason' => app('tenant')->tax_exemption_reason,
'tax_exemption_note' => app('tenant')->tax_exemption_note,
]);
if ($event !== null) {
app/Domains/Event/Actions/SetEventAddons/SetEventAddonsCommand.php
+85
View File
@@ -0,0 +1,85 @@
<?php
namespace App\Domains\Event\Actions\SetEventAddons;
use App\ValueObjects\Amount;
use Illuminate\Support\Str;
class SetEventAddonsCommand
{
public function __construct(private SetEventAddonsRequest $request)
{
}
public function execute(): SetEventAddonsResponse
{
$response = new SetEventAddonsResponse();
$this->request->event->addons = $this->normalize($this->request->addons);
$this->request->event->save();
$response->success = true;
return $response;
}
/**
* Normalisiert die rohe Addon-Definition: trimmt Titel/Beschreibung, parst den Preis (≥ 0), erzwingt den
* Titel als Pflichtfeld und generiert stabile Keys (Bestandsschutz für bereits gespeicherte Buchungen).
*
* @param array<int, array<string, mixed>> $addons
* @return array<int, array{key: string, title: string, description: string, price: float, flat: bool}>
*/
private function normalize(array $addons): array
{
$normalized = [];
$usedKeys = [];
foreach ($addons as $addon) {
$title = trim((string)($addon['title'] ?? ''));
if ($title === '') {
continue;
}
$price = Amount::fromString((string)($addon['price'] ?? '0'))->getAmount();
if ($price < 0) {
$price = 0.0;
}
$key = $this->uniqueSlug((string)($addon['key'] ?? ''), $title, $usedKeys);
$usedKeys[] = $key;
$normalized[] = [
'key' => $key,
'title' => $title,
'description' => trim((string)($addon['description'] ?? '')),
'price' => round($price, 2),
'flat' => (bool)($addon['flat'] ?? false),
];
}
return $normalized;
}
/**
* Liefert einen eindeutigen Slug: bevorzugt den bestehenden Wert, sonst aus dem Titel abgeleitet;
* Kollisionen werden durchnummeriert.
*
* @param array<int, string> $used
*/
private function uniqueSlug(string $existing, string $title, array $used): string
{
$base = $existing !== '' ? $existing : Str::slug($title);
if ($base === '') {
$base = 'addon';
}
$candidate = $base;
$suffix = 2;
while (in_array($candidate, $used, true)) {
$candidate = $base . '-' . $suffix;
$suffix++;
}
return $candidate;
}
}
app/Domains/Event/Actions/SetEventAddons/SetEventAddonsRequest.php
+19
View File
@@ -0,0 +1,19 @@
<?php
namespace App\Domains\Event\Actions\SetEventAddons;
use App\Models\Event;
class SetEventAddonsRequest
{
public Event $event;
/** @var array<int, array<string, mixed>> Rohe Addon-Definition aus dem Admin-Panel. */
public array $addons;
public function __construct(Event $event, array $addons)
{
$this->event = $event;
$this->addons = $addons;
}
}
app/Domains/Event/Actions/SetEventAddons/SetEventAddonsResponse.php
+15
View File
@@ -0,0 +1,15 @@
<?php
namespace App\Domains\Event\Actions\SetEventAddons;
class SetEventAddonsResponse
{
public bool $success;
public ?string $message;
public function __construct()
{
$this->success = false;
$this->message = null;
}
}
app/Domains/Event/Actions/SetParticipationOptions/SetParticipationOptionsCommand.php
+115
View File
@@ -0,0 +1,115 @@
<?php
namespace App\Domains\Event\Actions\SetParticipationOptions;
use Illuminate\Support\Str;
class SetParticipationOptionsCommand
{
public function __construct(private SetParticipationOptionsRequest $request)
{
}
public function execute(): SetParticipationOptionsResponse
{
$response = new SetParticipationOptionsResponse();
$this->request->event->participation_options = $this->normalize($this->request->questions);
$this->request->event->save();
$response->success = true;
return $response;
}
/**
* Normalisiert die rohe Fragen-Definition: trimmt Labels, generiert stabile Keys/Values und verwirft
* unvollständige Fragen (kein Label oder keine gültige Option). Keys/Values sind innerhalb ihres
* Geltungsbereichs eindeutig, damit Antworten robust referenzieren können.
*
* @param array<int, array<string, mixed>> $questions
* @return array<int, array{key: string, title: string, label: string, options: array<int, array{value: string, label: string}>}>
*/
private function normalize(array $questions): array
{
$normalized = [];
$usedKeys = [];
foreach ($questions as $question) {
// Titel ist Pflicht (Überschrift/Feldbeschriftung); die Frage ist optionaler Erklärtext.
$title = trim((string)($question['title'] ?? ''));
if ($title === '') {
continue;
}
$label = trim((string)($question['label'] ?? ''));
$options = $this->normalizeOptions($question['options'] ?? []);
if ($options === []) {
continue;
}
$key = $this->uniqueSlug((string)($question['key'] ?? ''), $title, $usedKeys);
$usedKeys[] = $key;
$normalized[] = [
'key' => $key,
'title' => $title,
'label' => $label,
'options' => $options,
];
}
return $normalized;
}
/**
* @param array<int, array<string, mixed>> $options
* @return array<int, array{value: string, label: string}>
*/
private function normalizeOptions(mixed $options): array
{
if (!is_array($options)) {
return [];
}
$normalized = [];
$usedValues = [];
foreach ($options as $option) {
$label = trim((string)($option['label'] ?? ''));
if ($label === '') {
continue;
}
$value = $this->uniqueSlug((string)($option['value'] ?? ''), $label, $usedValues);
$usedValues[] = $value;
$normalized[] = ['value' => $value, 'label' => $label];
}
return $normalized;
}
/**
* Liefert einen eindeutigen Slug: bevorzugt den bestehenden Wert (Bestandsschutz für schon gespeicherte
* Fragen/Antworten), sonst aus dem Label abgeleitet; Kollisionen werden durchnummeriert.
*
* @param array<int, string> $used
*/
private function uniqueSlug(string $existing, string $label, array $used): string
{
$base = $existing !== '' ? $existing : Str::slug($label);
if ($base === '') {
$base = 'option';
}
$candidate = $base;
$suffix = 2;
while (in_array($candidate, $used, true)) {
$candidate = $base . '-' . $suffix;
$suffix++;
}
return $candidate;
}
}
app/Domains/Event/Actions/SetParticipationOptions/SetParticipationOptionsRequest.php
+19
View File
@@ -0,0 +1,19 @@
<?php
namespace App\Domains\Event\Actions\SetParticipationOptions;
use App\Models\Event;
class SetParticipationOptionsRequest
{
public Event $event;
/** @var array<int, array<string, mixed>> Rohe Fragen-Definition aus dem Admin-Panel. */
public array $questions;
public function __construct(Event $event, array $questions)
{
$this->event = $event;
$this->questions = $questions;
}
}
app/Domains/Event/Actions/SetParticipationOptions/SetParticipationOptionsResponse.php
+15
View File
@@ -0,0 +1,15 @@
<?php
namespace App\Domains\Event\Actions\SetParticipationOptions;
class SetParticipationOptionsResponse
{
public bool $success;
public ?string $message;
public function __construct()
{
$this->success = false;
$this->message = null;
}
}
app/Domains/Event/Actions/SignUp/SignUpCommand.php
+89
View File
@@ -27,6 +27,14 @@ class SignUpCommand {
return $response;
}
// Teilnahmeoptionen (event-spezifische Pflicht-Auswahl) gegen die Event-Definition absichern.
$participationOptionRows = $this->buildParticipationOptionRows();
if ($participationOptionRows === null) {
$response->success = false;
$response->message = 'Bitte alle Auswahlfelder ausfüllen.';
return $response;
}
$eatingHabit = match ($this->request->eating_habit) {
'vegan' => EatingHabit::EATING_HABIT_VEGAN,
'vegetarian' => EatingHabit::EATING_HABIT_VEGETARIAN,
@@ -80,8 +88,89 @@ class SignUpCommand {
]
);
$this->persistParticipationOptions($response->participant, $participationOptionRows);
$this->persistAddons($response->participant);
$response->success = true;
return $response;
}
/**
* Speichert die gewählten Zusätze (Event-Addons) als Snapshot-Zeilen (Titel/Preis/Betrag) für die spätere
* Rechnung. Die Beträge sind bereits in der Controller-Auflösung (`resolveAddons`) berechnet, inkl. USt.
*/
private function persistAddons(\App\Models\EventParticipant $participant): void
{
foreach ($this->request->addonItems as $item) {
$participant->selectedAddons()->create([
'tenant' => $this->request->event->tenant,
'event_id' => $this->request->event->id,
'addon_key' => $item['key'],
'title' => $item['title'],
'price' => $item['price'] ?? 0,
'flat' => (bool)($item['flat'] ?? false),
'days' => $item['days'] ?? 0,
'amount' => $item['amount'] ?? 0,
]);
}
}
/**
* Validiert die Antworten gegen die am Event definierten Teilnahmeoptionen und erzeugt die zu speichernden
* Zeilen mit Label-Snapshots. Gibt null zurück, wenn eine Pflicht-Frage unbeantwortet oder eine Antwort
* ungültig ist (Absicherung gegen manipulierte Payloads).
*
* @return array<int, array{question_key: string, question_label: string, value: string, value_label: string}>|null
*/
private function buildParticipationOptionRows(): ?array
{
$rows = [];
foreach ($this->request->event->participation_options ?? [] as $question) {
$key = $question['key'] ?? null;
if ($key === null) {
continue;
}
$value = $this->request->participationOptions[$key] ?? null;
if ($value === null || $value === '') {
return null;
}
$option = null;
foreach ($question['options'] ?? [] as $candidate) {
if (($candidate['value'] ?? null) === $value) {
$option = $candidate;
break;
}
}
if ($option === null) {
return null;
}
$rows[] = [
'question_key' => $key,
'question_label' => $question['label'] ?? $key,
'value' => $value,
'value_label' => $option['label'] ?? $value,
];
}
return $rows;
}
/**
* @param array<int, array{question_key: string, question_label: string, value: string, value_label: string}> $rows
*/
private function persistParticipationOptions(\App\Models\EventParticipant $participant, array $rows): void
{
foreach ($rows as $row) {
$participant->selectedOptions()->create(array_merge($row, [
'tenant' => $this->request->event->tenant,
'event_id' => $this->request->event->id,
]));
}
}
}
app/Domains/Event/Actions/SignUp/SignUpRequest.php
+4
View File
@@ -46,6 +46,10 @@ class SignUpRequest {
public Amount $amount,
public ?string $paymentMethod,
public array $paymentOptions = [],
/** Antworten auf die Teilnahmeoptionen: [ question_key => value ]. */
public array $participationOptions = [],
/** Aufgelöste Zusätze (Event-Addons): je Eintrag [ key, title, price, flat, days, amount ]. */
public array $addonItems = [],
) {
}
}
app/Domains/Event/Actions/UpdateParticipant/UpdateParticipantCommand.php
+86
View File
@@ -72,11 +72,97 @@ class UpdateParticipantCommand {
$p->save();
if ($this->request->participationOptions !== null) {
$this->syncParticipationOptions($p);
}
if ($this->request->selectedAddons !== null) {
$this->syncAddons($p);
}
$this->response->success = true;
$this->response->participant = $p;
return $this->response;
}
/**
* Ersetzt die zugeordneten Zusätze (Event-Addons) anhand der Auswahl. Bewusst **ohne Preis/Betrag**
* (amount 0): der Teilnahmebeitrag wird in den Details ohnehin manuell gesetzt. Es wird nur der Titel als
* Snapshot gespeichert, damit die Zuordnung sichtbar bleibt.
*/
private function syncAddons(EventParticipant $participant): void
{
$participant->selectedAddons()->delete();
$selection = $this->request->selectedAddons ?? [];
foreach ($participant->event?->addons ?? [] as $addon) {
$key = $addon['key'] ?? null;
if ($key === null || empty($selection[$key])) {
continue;
}
$participant->selectedAddons()->create([
'tenant' => $participant->tenant,
'event_id' => $participant->event_id,
'addon_key' => $key,
'title' => $addon['title'] ?? $key,
'price' => 0,
'flat' => (bool)($addon['flat'] ?? false),
'days' => 0,
'amount' => 0,
]);
}
}
/**
* Ersetzt die zugeordneten Teilnahmeoptionen anhand der übergebenen Antworten. Nachträgliche Zuordnung im
* Back-Office ist lückenlos möglich: nur gegen die Event-Definition gültige Antworten werden gespeichert,
* leere/entfallene Antworten werden abgeräumt. Frage-/Options-Label werden als Snapshot mitgeschrieben.
*/
private function syncParticipationOptions(EventParticipant $participant): void
{
$participant->selectedOptions()->delete();
$answers = $this->request->participationOptions ?? [];
foreach ($participant->event?->participation_options ?? [] as $question) {
$key = $question['key'] ?? null;
if ($key === null) {
continue;
}
$value = $answers[$key] ?? null;
if ($value === null || $value === '') {
continue;
}
$option = null;
foreach ($question['options'] ?? [] as $candidate) {
if (($candidate['value'] ?? null) === $value) {
$option = $candidate;
break;
}
}
if ($option === null) {
continue;
}
$label = trim((string)($question['label'] ?? ''));
$participant->selectedOptions()->create([
'tenant' => $participant->tenant,
'event_id' => $participant->event_id,
'question_key' => $key,
'question_label' => $label !== '' ? $label : ($question['title'] ?? $key),
'value' => $value,
'value_label' => $option['label'] ?? $value,
]);
}
}
private function handleAmountChanges(EventParticipant $participant) {
$this->response->amountPaid = $participant->amount_paid;
$this->response->amountExpected = $participant->amount;
app/Domains/Event/Actions/UpdateParticipant/UpdateParticipantRequest.php
+4
View File
@@ -36,5 +36,9 @@ class UpdateParticipantRequest {
public string $amountPaid,
public string $amountExpected,
public string $cocStatus,
/** Antworten auf die Teilnahmeoptionen: [ question_key => value ]. null = unverändert lassen. */
public ?array $participationOptions = null,
/** Gewählte Zusätze: [ addon_key => bool ]. null = unverändert lassen. */
public ?array $selectedAddons = null,
) {}
}
app/Domains/Event/Controllers/DetailsController.php
+32
View File
@@ -2,8 +2,12 @@
namespace App\Domains\Event\Controllers;
use App\Domains\Event\Actions\SetEventAddons\SetEventAddonsCommand;
use App\Domains\Event\Actions\SetEventAddons\SetEventAddonsRequest;
use App\Domains\Event\Actions\SetParticipationFees\SetParticipationFeesCommand;
use App\Domains\Event\Actions\SetParticipationFees\SetParticipationFeesRequest;
use App\Domains\Event\Actions\SetParticipationOptions\SetParticipationOptionsCommand;
use App\Domains\Event\Actions\SetParticipationOptions\SetParticipationOptionsRequest;
use App\Domains\Event\Actions\SetPaymentMethods\SetPaymentMethodsCommand;
use App\Domains\Event\Actions\SetPaymentMethods\SetPaymentMethodsRequest;
use App\Domains\Event\Actions\UpdateEvent\UpdateEventCommand;
@@ -142,6 +146,28 @@ class DetailsController extends CommonController {
return response()->json(['status' => $response->success ? 'success' : 'error']);
}
public function updateParticipationOptions(int $eventId, Request $request): JsonResponse
{
$event = $this->events->getById($eventId);
$setRequest = new SetParticipationOptionsRequest($event, (array)$request->input('questions', []));
$setCommand = new SetParticipationOptionsCommand($setRequest);
$response = $setCommand->execute();
return response()->json(['status' => $response->success ? 'success' : 'error', 'message' => $response->message]);
}
public function updateEventAddons(int $eventId, Request $request): JsonResponse
{
$event = $this->events->getById($eventId);
$setRequest = new SetEventAddonsRequest($event, (array)$request->input('addons', []));
$setCommand = new SetEventAddonsCommand($setRequest);
$response = $setCommand->execute();
return response()->json(['status' => $response->success ? 'success' : 'error', 'message' => $response->message]);
}
public function downloadPdfList(string $eventId, string $listType, Request $request): Response
{
$event = $this->events->getByIdentifier($eventId);
@@ -195,6 +221,12 @@ class DetailsController extends CommonController {
case 'by-participation-group':
$participants = $this->eventParticipants->groupByParticipationType($event, $request);
break;
case 'by-participation-option':
$participants = $this->eventParticipants->groupByParticipationOption($event, $request);
break;
case 'by-addon':
$participants = $this->eventParticipants->groupByAddon($event, $request);
break;
case 'signed-off':
$participants = $this->eventParticipants->getSignedOffParticipants($event, $request);
break;
app/Domains/Event/Controllers/MailCompose/ByGroupController.php
+4
View File
@@ -19,6 +19,10 @@ class ByGroupController extends CommonController
$participants = $this->eventParticipants->groupByParticipationType($event, $request, $request->input('groupName'));
$recipients = $this->eventParticipants->getMailAddresses($participants[$request->input('groupName')]);
break;
case 'by-participation-option':
$participants = $this->eventParticipants->groupByParticipationOption($event, $request, $request->input('groupName'));
$recipients = $this->eventParticipants->getMailAddresses($participants[$request->input('groupName')] ?? []);
break;
case 'signed-off':
$participants = $this->eventParticipants->getSignedOffParticipants($event, $request, $request->input('groupName'));
$recipients = $this->eventParticipants->getMailAddresses($participants[$request->input('groupName')]);
app/Domains/Event/Controllers/ParticipantUpdateController.php
+2
View File
@@ -44,6 +44,8 @@ class ParticipantUpdateController extends CommonController {
amountPaid: $request->input('amountPaid'),
amountExpected: $request->input('amountExpected'),
cocStatus: $request->input('cocStatus'),
participationOptions: $request->has('participationOptions') ? (array)$request->input('participationOptions') : null,
selectedAddons: $request->has('selectedAddons') ? (array)$request->input('selectedAddons') : null,
);
$command = new UpdateParticipantCommand($updateRequest);
app/Domains/Event/Controllers/SignupController.php
+36 -5
View File
@@ -12,6 +12,7 @@ use App\Providers\DoubleCheckEventRegistrationProvider;
use App\Providers\InertiaProvider;
use App\Resources\UserResource;
use App\Scopes\CommonController;
use App\ValueObjects\Amount;
use DateTime;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
@@ -104,6 +105,11 @@ class SignupController extends CommonController {
$siblingReduction
);
// Gewählte Zusätze (Event-Addons) auflösen und auf den Gesamtbetrag aufaddieren.
$selectedAddonKeys = array_keys(array_filter((array)$request->input('addons', []), fn($v) => (bool)$v));
$addonResolution = $eventResource->resolveAddons($selectedAddonKeys, $arrival, $departure);
$amount->addAmount($addonResolution['total']);
$signupRequest = new SignUpRequest(
$event,
$registrationData['userId'] ?? null,
@@ -142,6 +148,8 @@ class SignupController extends CommonController {
$amount,
$registrationData['paymentMethod'] ?? null,
(array)($registrationData['paymentOptions'] ?? []),
(array)($registrationData['participationOptions'] ?? []),
$addonResolution['items'],
);
$signupCommand = new SignUpCommand($signupRequest);
@@ -184,18 +192,41 @@ class SignupController extends CommonController {
$siblingReduction = $request->input('sibling') === 'true';
$amount = $event->calculateAmount(
$arrival = \DateTime::createFromFormat('Y-m-d', $request->input('arrival'));
$departure = \DateTime::createFromFormat('Y-m-d', $request->input('departure'));
$baseFee = $event->calculateAmount(
$request->input('participationType'),
$request->input('beitrag'),
\DateTime::createFromFormat('Y-m-d', $request->input('arrival')),
\DateTime::createFromFormat('Y-m-d', $request->input('departure')),
$arrival,
$departure,
$siblingReduction
);
// Gewählte Zusätze immer einrechnen -- so enthält der finale Anzeigebetrag (und der Bestätigungstext)
// stets die Addons und der Zahlungsschritt wird nur bei Gesamt 0 € übersprungen.
$selectedAddonKeys = array_keys(array_filter((array)$request->input('addons', []), fn($v) => (bool)$v));
$resolution = $event->resolveAddons($selectedAddonKeys, $arrival, $departure);
// Gesamt = Teilnahmebeitrag + Zusätze; Basisbetrag separat für die Kostenübersicht in der Zusammenfassung.
$total = new Amount($baseFee->getAmount(), 'Euro');
$total->addAmount($resolution['total']);
$addonLines = array_map(fn($item) => [
'key' => $item['key'],
'title' => $item['title'],
'amountValue' => $item['amount'],
'amount' => new Amount($item['amount'], 'Euro')->toString(),
'free' => $item['amount'] <= 0,
], $resolution['items']);
// amountValue (numerisch) steuert im Frontend das Überspringen des Zahlungsart-Schritts bei 0 €.
return response()->json([
'amount' => $amount->toString(),
'amountValue' => $amount->getAmount(),
'amount' => $total->toString(),
'amountValue' => $total->getAmount(),
'baseAmount' => $baseFee->toString(),
'baseAmountValue' => $baseFee->getAmount(),
'addons' => $addonLines,
]);
}
}
app/Domains/Event/Routes/api.php
+2
View File
@@ -46,6 +46,8 @@ Route::prefix('api/v1')
Route::post('/participation-fees', [DetailsController::class, 'updateParticipationFees']);
Route::post('/common-settings', [DetailsController::class, 'updateCommonSettings']);
Route::post('/payment-methods', [DetailsController::class, 'updatePaymentMethods']);
Route::post('/participation-options', [DetailsController::class, 'updateParticipationOptions']);
Route::post('/event-addons', [DetailsController::class, 'updateEventAddons']);
});
app/Domains/Event/Views/Details.vue
+13 -6
View File
@@ -1,9 +1,11 @@
<script setup>
import {reactive, inject, onMounted} from 'vue';
import {onMounted} from 'vue';
import AppLayout from "../../../../resources/js/layouts/AppLayout.vue";
import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
import TabbedPage from "../../../Views/Components/TabbedPage.vue";
import ParticipantsList from "./Partials/ParticipantsList.vue";
import ParticipantsByOption from "./Partials/ParticipantsByOption.vue";
import ParticipantsByAddon from "./Partials/ParticipantsByAddon.vue";
import Overview from "./Partials/Overview.vue";
const props = defineProps({
@@ -31,16 +33,21 @@ const tabs = [
component: ParticipantsList,
endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/by-participation-group',
},
{
title: 'Teilis nach Teilnahmeoption',
component: ParticipantsByOption,
endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/by-participation-option',
},
{
title: 'Teilis mit Zusatzoptionen',
component: ParticipantsByAddon,
endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/by-addon',
},
{
title: 'Abgemeldete Teilis',
component: ParticipantsList,
endpoint: "/api/v1/event/details/" + props.event.identifier + '/participants/signed-off',
},
{
title: 'Zusätze',
component: ParticipantsList,
endpoint: "/api/v1/cost-unit/open/archived-cost-units",
},
]
onMounted(() => {
app/Domains/Event/Views/Partials/EventAddons.vue
+166
View File
@@ -0,0 +1,166 @@
<script setup>
import {ref} from "vue";
import {toast} from "vue3-toastify";
import {request} from "../../../../../resources/js/components/HttpClient.js";
import AmountInput from "../../../../Views/Components/AmountInput.vue";
const emit = defineEmits(['close'])
const props = defineProps({
event: Object,
})
// Addon-Definition dieses Events: [ { key, title, description, price, flat } ].
// key bleibt für bestehende Einträge erhalten (Bestandsschutz für bereits gebuchte Zusätze).
const addons = ref((props.event.addons ?? []).map(a => ({
key: a.key ?? '',
title: a.title ?? '',
description: a.description ?? '',
price: a.price != null ? String(a.price).replace('.', ',') : '0',
flat: a.flat ?? false,
})))
function addAddon() {
addons.value.push({key: '', title: '', description: '', price: '0', flat: true})
}
function removeAddon(index) {
addons.value.splice(index, 1)
}
function validate() {
for (const addon of addons.value) {
if (addon.title.trim() === '') {
toast.error('Bitte für jeden Zusatz einen Titel angeben.')
return false
}
}
return true
}
async function save() {
if (!validate()) {
return
}
const response = await request('/api/v1/event/details/' + props.event.id + '/event-addons', {
method: 'POST',
body: {
addons: addons.value,
}
})
if (response.status !== 'success') {
toast.error(response.message ?? 'Die Zusatzoptionen konnten nicht gespeichert werden.')
return
}
toast.success('Die Zusatzoptionen wurden gespeichert')
emit('close')
}
</script>
<template>
<div class="event-addons">
<h3>Zusatzoptionen</h3>
<p style="color: #6b7280; font-size: 0.9rem;">
Buchbare Zusätze zur Veranstaltung (z. B. Parkticket, Aufnäher). Jede Position ist eine Ja/Nein-Auswahl.
Preis 0 wird dem Teilnehmenden als „Kostenfrei" angezeigt. Ist „Pauschale" nicht gesetzt, wird der Preis
mit der Anzahl der Teilnahmetage multipliziert. Ohne Zusätze wird dieser Schritt in der Anmeldung
übersprungen.
</p>
<div v-for="(addon, index) in addons" :key="index" class="addon-card">
<div class="addon-head">
<div class="addon-fields">
<label class="field-label">Titel</label>
<input type="text" v-model="addon.title" class="width-full" placeholder="z. B. „Parkticket“"/>
<label class="field-label">Beschreibung (optional)</label>
<input type="text" v-model="addon.description" class="width-full" placeholder="Kurze Erläuterung"/>
<div class="addon-price-row">
<span>
<label class="field-label">Preis</label>
<AmountInput v-model="addon.price" class="width-small"/> Euro
</span>
<label class="flat-label">
<input type="checkbox" v-model="addon.flat"/>
Pauschale (nicht pro Tag)
</label>
</div>
</div>
<label class="link remove-link" @click="removeAddon(index)">Entfernen</label>
</div>
</div>
<div style="margin-top: 16px;">
<label class="link" @click="addAddon">+ Zusatz hinzufügen</label>
</div>
<div style="margin-top: 24px;">
<input type="button" value="Speichern" @click="save"/>
</div>
</div>
</template>
<style scoped>
.addon-card {
margin-top: 16px;
padding: 14px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
.addon-head {
display: flex;
align-items: flex-start;
gap: 12px;
}
.addon-fields {
flex: 1;
}
.field-label {
display: block;
font-size: 0.78rem;
color: #6b7280;
margin: 6px 0 2px;
}
.addon-fields .field-label:first-child {
margin-top: 0;
}
.addon-price-row {
display: flex;
align-items: flex-end;
gap: 24px;
margin-top: 6px;
}
.flat-label {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.9rem;
color: #374151;
}
.width-full {
width: 100%;
}
.width-small {
width: 90px;
}
.remove-link {
white-space: nowrap;
color: #ef4444;
font-size: 0.85rem;
}
</style>
app/Domains/Event/Views/Partials/Overview.vue
+27 -11
View File
@@ -1,15 +1,17 @@
<script setup>
import {onMounted, reactive, ref} from "vue";
import ParticipationFees from "./ParticipationFees.vue";
import ParticipationSummary from "./ParticipationSummary.vue";
import CommonSettings from "./CommonSettings.vue";
import EventManagement from "./EventManagement.vue";
import Modal from "../../../../Views/Components/Modal.vue";
import MailCompose from "./MailCompose.vue";
import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
import {toast} from "vue3-toastify";
import {onMounted, reactive, ref} from "vue";
import ParticipationFees from "./ParticipationFees.vue";
import ParticipationOptions from "./ParticipationOptions.vue";
import EventAddons from "./EventAddons.vue";
import ParticipationSummary from "./ParticipationSummary.vue";
import CommonSettings from "./CommonSettings.vue";
import EventManagement from "./EventManagement.vue";
import Modal from "../../../../Views/Components/Modal.vue";
import MailCompose from "./MailCompose.vue";
import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
import {toast} from "vue3-toastify";
const props = defineProps({
const props = defineProps({
data: Object,
})
@@ -36,6 +38,14 @@
displayData.value = 'participationFees';
}
async function showParticipationOptions() {
displayData.value = 'participationOptions';
}
async function showEventAddons() {
displayData.value = 'eventAddons';
}
async function showEventManagement() {
displayData.value = 'eventManagement';
}
@@ -107,6 +117,9 @@
<ParticipationFees v-if="displayData === 'participationFees'" :event="dynamicProps.event" @close="showMain" />
<ParticipationOptions v-else-if="displayData === 'participationOptions'" :event="dynamicProps.event"
@close="showMain"/>
<EventAddons v-else-if="displayData === 'eventAddons'" :event="dynamicProps.event" @close="showMain"/>
<CommonSettings v-else-if="displayData === 'commonSettings'" :event="dynamicProps.event" @close="showMain" />
<EventManagement v-else-if="displayData === 'eventManagement'" :event="dynamicProps.event" @close="showMain" />
@@ -185,7 +198,10 @@
<div class="event-flexbox-row bottom">
<label style="font-size: 9pt;" class="link" @click="showCommonSettings">Allgemeine Einstellungen</label> &nbsp;
<label style="font-size: 9pt;" class="link" @click="showEventManagement">Veranstaltungsleitung</label> &nbsp;
<label style="font-size: 9pt;" class="link" @click="showParticipationFees">Teilnahmegebühren</label>
<label style="font-size: 9pt;" class="link" @click="showParticipationFees">Teilnahmegebühren</label> &nbsp;
<label style="font-size: 9pt;" class="link" @click="showParticipationOptions">Teilnahmeoptionen</label>
&nbsp;
<label style="font-size: 9pt;" class="link" @click="showEventAddons">Zusatzoptionen</label>
<a style="font-size: 9pt;" class="link" :href="'/budget/' + props.data.event.costUnit.id">Budget bearbeiten</a>
<a style="font-size: 9pt;" class="link" :href="'/cost-unit/' + props.data.event.costUnit.id">Ausgabenübersicht</a>
<a v-if="!dynamicProps.event.registrationAllowed && !dynamicProps.event.archived" style="color: #ff0000; font-size: 9pt;" class="link" @click="archiveEvent">Archivieren</a>
app/Domains/Event/Views/Partials/ParticipantData.vue
+67 -1
View File
@@ -1,5 +1,5 @@
<script setup>
import {onMounted, reactive, watch} from "vue";
import {computed, onMounted, reactive, watch} from "vue";
import AmountInput from "../../../../Views/Components/AmountInput.vue";
import DialableTelephoneNumber from "../../../../Views/Components/DialableTelephoneNumber.vue";
@@ -60,8 +60,27 @@ const form = reactive({
amountPaid: '',
amountExpected: '',
cocStatus: '',
participationOptions: {},
selectedAddons: {},
});
// Teilnahmeoptionen des Events (Definition mit Titel/Frage/Optionen).
const participationQuestions = computed(() => staticProps.event?.participationOptions ?? []);
// Zusatzoptionen (Event-Addons) des Events.
const eventAddons = computed(() => staticProps.event?.addons ?? []);
// Gewählte Antwort (Options-Label) eines Teilnehmers zu einer Frage – für die Ansicht „Titel: Antwort".
function answerLabelFor(questionKey) {
const answer = (props.participant?.participationOptions ?? []).find(o => o.questionKey === questionKey);
return answer?.valueLabel ?? '—';
}
// Hat der Teilnehmer diesen Zusatz gebucht? – für die Ansicht.
function isAddonSelected(addonKey) {
return (props.participant?.selectedAddons ?? []).some(a => a.addonKey === addonKey);
}
watch(
() => props.participant,
(participant) => {
@@ -94,6 +113,12 @@ watch(
form.amountPaid = participant?.amountPaid.short ?? '';
form.amountExpected = participant?.amountExpected.short ?? '';
form.cocStatus = participant?.efz_status ?? '';
form.participationOptions = Object.fromEntries(
(participant?.participationOptions ?? []).map(o => [o.questionKey, o.value])
);
form.selectedAddons = Object.fromEntries(
(participant?.selectedAddons ?? []).map(a => [a.addonKey, true])
);
},
{ immediate: true }
);
@@ -388,6 +413,43 @@ function saveParticipant() {
</table>
</div>
</div>
<div class="participationData" v-if="participationQuestions.length > 0 || eventAddons.length > 0">
<div>
<template v-if="participationQuestions.length > 0">
<h3>Teilnahmeoptionen</h3>
<table>
<tr v-for="question in participationQuestions" :key="question.key">
<th>{{ question.title || question.label }}</th>
<td>
<span v-if="!staticProps.editMode">{{ answerLabelFor(question.key) }}</span>
<select v-else v-model="form.participationOptions[question.key]">
<option value="">— keine —</option>
<option v-for="option in question.options" :key="option.value"
:value="option.value">
{{ option.label }}
</option>
</select>
</td>
</tr>
</table>
</template>
</div>
<div>
<template v-if="eventAddons.length > 0">
<h3>Zusatzoptionen</h3>
<table>
<tr v-for="addon in eventAddons" :key="addon.key">
<th>{{ addon.title }}</th>
<td>
<span v-if="!staticProps.editMode">{{ isAddonSelected(addon.key) ? 'Ja' : '—' }}</span>
<input v-else type="checkbox" v-model="form.selectedAddons[addon.key]"/>
</td>
</tr>
</table>
</template>
</div>
</div>
</div>
<button v-if="!staticProps.editMode" class="button" @click="enableEditMode">Bearbeiten</button>
@@ -407,6 +469,10 @@ function saveParticipant() {
gap: 20px;
}
.participationData table tr th {
width: 200px;
}
.participationData div {
flex: 1;
vertical-align: top;
app/Domains/Event/Views/Partials/ParticipantsByAddon.vue
+67
View File
@@ -0,0 +1,67 @@
<script setup>
import {computed, inject} from "vue";
import ParticipantsList from "./ParticipantsList.vue";
const props = defineProps({
data: {
type: Object,
default: () => ({participants: {}, event: {}, listType: ''}),
},
});
// Von TabbedPage bereitgestellt: erlaubt den Sprung zum Übersicht-Tab (Index 0), wo die
// Zusatzoptionen konfiguriert werden.
const selectTab = inject('selectTab', null);
const hasAddons = computed(() => (props.data?.event?.addons?.length ?? 0) > 0);
function goToOverview() {
if (selectTab) {
selectTab(0);
}
}
</script>
<template>
<ParticipantsList v-if="hasAddons" :data="data" :show-group-mail="false"/>
<div v-else class="no-addons">
<h3>Keine Zusatzoptionen angelegt</h3>
<p>
Für diese Veranstaltung sind noch keine Zusatzoptionen angelegt. Sobald du unter
<strong>Übersicht → Zusatzoptionen</strong> Zusätze definierst, werden die Teilnehmenden hier nach
ihren gebuchten Zusätzen gruppiert.
</p>
<button v-if="selectTab" type="button" class="button" @click="goToOverview">
Zu den Zusatzoptionen
</button>
</div>
</template>
<style scoped>
.no-addons {
max-width: 640px;
margin: 20px auto;
padding: 24px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
text-align: center;
}
.no-addons p {
color: #4b5563;
line-height: 1.6;
}
.button {
margin-top: 12px;
padding: 8px 18px;
background: #2563eb;
color: #fff;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
</style>
app/Domains/Event/Views/Partials/ParticipantsByOption.vue
+67
View File
@@ -0,0 +1,67 @@
<script setup>
import {computed, inject} from "vue";
import ParticipantsList from "./ParticipantsList.vue";
const props = defineProps({
data: {
type: Object,
default: () => ({participants: {}, event: {}, listType: ''}),
},
});
// Von TabbedPage bereitgestellt: erlaubt den Sprung zum Übersicht-Tab (Index 0), wo die
// Teilnahmeoptionen konfiguriert werden.
const selectTab = inject('selectTab', null);
const hasOptions = computed(() => (props.data?.event?.participationOptions?.length ?? 0) > 0);
function goToOverview() {
if (selectTab) {
selectTab(0);
}
}
</script>
<template>
<ParticipantsList v-if="hasOptions" :data="data" :show-group-mail="false"/>
<div v-else class="no-options">
<h3>Keine Teilnahmeoptionen angelegt</h3>
<p>
Für diese Veranstaltung sind noch keine Teilnahmeoptionen angelegt. Sobald du unter
<strong>Übersicht → Teilnahmeoptionen</strong> Fragen definierst, werden die Teilnehmenden hier nach
ihrer Auswahl gruppiert.
</p>
<button v-if="selectTab" type="button" class="button" @click="goToOverview">
Zu den Teilnahmeoptionen
</button>
</div>
</template>
<style scoped>
.no-options {
max-width: 640px;
margin: 20px auto;
padding: 24px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
text-align: center;
}
.no-options p {
color: #4b5563;
line-height: 1.6;
}
.button {
margin-top: 12px;
padding: 8px 18px;
background: #2563eb;
color: #fff;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
}
</style>
app/Domains/Event/Views/Partials/ParticipantsList.vue
+7 -1
View File
@@ -20,6 +20,11 @@ const props = defineProps({
listType: '',
}),
},
// Steuert, ob je Gruppe der „E-Mail an Gruppe senden"-Button angezeigt wird.
showGroupMail: {
type: Boolean,
default: true,
},
});
const today = format(new Date(), "yyyy-MM-dd");
@@ -404,7 +409,8 @@ function mailToGroup(groupKey) {
27 Jahre und älter: <strong>{{ getAgeCounts(participants)['27+'] ?? 0 }}</strong>
</td>
<td class="pl-summary-action">
<input type="button" class="button" @click="mailToGroup(groupKey)" value="E-Mail an Gruppe senden" />
<input v-if="showGroupMail" type="button" class="button" @click="mailToGroup(groupKey)"
value="E-Mail an Gruppe senden"/>
</td>
</tr>
</tbody>
app/Domains/Event/Views/Partials/ParticipationOptions.vue
+182
View File
@@ -0,0 +1,182 @@
<script setup>
import {ref} from "vue";
import {toast} from "vue3-toastify";
import {request} from "../../../../../resources/js/components/HttpClient.js";
const emit = defineEmits(['close'])
const props = defineProps({
event: Object,
})
// Fragen-Definition dieses Events: [ { key, label, options: [ { value, label } ] } ].
// key/value bleiben für bestehende Einträge erhalten (Bestandsschutz für bereits gespeicherte Antworten);
// neue Einträge bekommen serverseitig beim Speichern einen stabilen Slug.
const questions = ref((props.event.participationOptions ?? []).map(q => ({
key: q.key ?? '',
title: q.title ?? '',
label: q.label ?? '',
options: (q.options ?? []).map(o => ({value: o.value ?? '', label: o.label ?? ''})),
})))
function addQuestion() {
questions.value.push({key: '', title: '', label: '', options: [{value: '', label: ''}, {value: '', label: ''}]})
}
function removeQuestion(index) {
questions.value.splice(index, 1)
}
function addOption(question) {
question.options.push({value: '', label: ''})
}
function removeOption(question, index) {
question.options.splice(index, 1)
}
function validate() {
for (const question of questions.value) {
if (question.title.trim() === '') {
toast.error('Bitte für jede Frage einen Titel angeben.')
return false
}
const validOptions = question.options.filter(o => o.label.trim() !== '')
if (validOptions.length < 1) {
toast.error('Jede Frage braucht mindestens eine Auswahlmöglichkeit.')
return false
}
}
return true
}
async function save() {
if (!validate()) {
return
}
const response = await request('/api/v1/event/details/' + props.event.id + '/participation-options', {
method: 'POST',
body: {
questions: questions.value,
}
})
if (response.status !== 'success') {
toast.error(response.message ?? 'Die Teilnahmeoptionen konnten nicht gespeichert werden.')
return
}
toast.success('Die Teilnahmeoptionen wurden gespeichert')
emit('close')
}
</script>
<template>
<div class="participation-options">
<h3>Teilnahmeoptionen</h3>
<p style="color: #6b7280; font-size: 0.9rem;">
Pflicht-Auswahlfragen für die Anmeldung (z. B. Kurs oder Stufe). Je Frage ist genau eine Option wählbar.
Ohne Fragen wird dieser Schritt in der Anmeldung übersprungen.
</p>
<div v-for="(question, qIndex) in questions" :key="qIndex" class="question-card">
<div class="question-head">
<div class="question-fields">
<label class="field-label">Titel (Überschrift / Feldbeschriftung)</label>
<input
type="text"
v-model="question.title"
class="width-full"
placeholder="Titel, z. B. „Kurs“"
/>
<label class="field-label">Frage / Erklärtext (optional)</label>
<input
type="text"
v-model="question.label"
class="width-full"
placeholder="z. B. „Welchen Kurs möchtest du belegen?“"
/>
</div>
<label class="link remove-link" @click="removeQuestion(qIndex)">Frage entfernen</label>
</div>
<div class="options">
<div v-for="(option, oIndex) in question.options" :key="oIndex" class="option-row">
<input
type="text"
v-model="option.label"
class="width-full"
placeholder="Auswahlmöglichkeit"
/>
<label class="link remove-link" @click="removeOption(question, oIndex)">✕</label>
</div>
<label class="link" @click="addOption(question)">+ Option hinzufügen</label>
</div>
</div>
<div style="margin-top: 16px;">
<label class="link" @click="addQuestion">+ Frage hinzufügen</label>
</div>
<div style="margin-top: 24px;">
<input type="button" value="Speichern" @click="save"/>
</div>
</div>
</template>
<style scoped>
.question-card {
margin-top: 16px;
padding: 14px;
background: #f8fafc;
border: 1px solid #e5e7eb;
border-radius: 10px;
}
.question-head {
display: flex;
align-items: flex-start;
gap: 12px;
}
.question-fields {
flex: 1;
}
.field-label {
display: block;
font-size: 0.78rem;
color: #6b7280;
margin: 6px 0 2px;
}
.question-fields .field-label:first-child {
margin-top: 0;
}
.options {
margin-top: 12px;
padding-left: 12px;
}
.option-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.width-full {
width: 100%;
}
.remove-link {
white-space: nowrap;
color: #ef4444;
font-size: 0.85rem;
}
</style>
app/Domains/Event/Views/Partials/SignUpForm/SignupForm.vue
+18 -9
View File
@@ -6,6 +6,7 @@ import StepPersonalData from './steps/StepPersonalData.vue'
import StepRegistrationMode from './steps/StepRegistrationMode.vue'
import StepArrival from './steps/StepArrival.vue'
import StepAddons from './steps/StepAddons.vue'
import StepParticipationOptions from './steps/StepParticipationOptions.vue'
import StepPhotoPermissions from './steps/StepPhotoPermissions.vue'
import StepAllergies from './steps/StepAllergies.vue'
import StepPaymentMethod from './steps/StepPaymentMethod.vue'
@@ -23,7 +24,8 @@ const emit = defineEmits(['registrationDone'])
const {
currentStep, goToStep, formData, selectedAddons,
submit, submitting, submitResult, summaryLoading, summaryAmount, summaryAmountValue
submit, submitting, submitResult, summaryLoading, summaryAmount, summaryAmountValue,
summaryBaseAmount, summaryAddonLines
} = useSignupForm(props.event, props.participantData)
const steps = [
@@ -33,10 +35,11 @@ const steps = [
{ step: 4, label: 'An-/Abreise' },
{ step: 5, label: 'Teilnahmegruppe' },
{ step: 6, label: 'Zusatzoptionen' },
{ step: 7, label: 'Fotoerlaubnis' },
{ step: 8, label: 'Allergien' },
{step: 9, label: 'Zahlungsart'},
{step: 10, label: 'Zusammenfassung'},
{step: 7, label: 'Teilnahmeoptionen'},
{step: 8, label: 'Fotoerlaubnis'},
{step: 9, label: 'Allergien'},
{step: 10, label: 'Zahlungsart'},
{step: 11, label: 'Zusammenfassung'},
]
</script>
@@ -93,14 +96,20 @@ const steps = [
<StepArrival v-if="currentStep === 4" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
<StepRegistrationMode v-if="currentStep === 5" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
<StepAddons v-if="currentStep === 6" :formData="formData" :event="event" :selectedAddons="selectedAddons" @next="goToStep" @back="goToStep" />
<StepPhotoPermissions v-if="currentStep === 7" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
<StepAllergies v-if="currentStep === 8" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
<StepPaymentMethod v-if="currentStep === 9" :formData="formData" :event="event" @next="goToStep"
<StepParticipationOptions v-if="currentStep === 7" :formData="formData" :event="event" @next="goToStep"
@back="goToStep"/>
<StepPhotoPermissions v-if="currentStep === 8" :formData="formData" :event="event" @next="goToStep"
@back="goToStep"/>
<StepAllergies v-if="currentStep === 9" :formData="formData" :event="event" @next="goToStep"
@back="goToStep"/>
<StepPaymentMethod v-if="currentStep === 10" :formData="formData" :event="event" @next="goToStep"
@back="goToStep"/>
<StepSummary
v-if="currentStep === 10"
v-if="currentStep === 11"
:formData="formData"
:event="event"
:summaryBaseAmount="summaryBaseAmount"
:summaryAddonLines="summaryAddonLines"
:summaryAmount="summaryAmount"
:summaryAmountValue="summaryAmountValue"
:summaryLoading="summaryLoading"
app/Domains/Event/Views/Partials/SignUpForm/composables/stepFlow.js
+45
View File
@@ -0,0 +1,45 @@
// Zentrale Schrittreihenfolge des Anmelde-Wizards. Einige Schritte sind optional und werden
// übersprungen, wenn sie für das Event nicht zutreffen (Zusatzoptionen, Teilnahmeoptionen).
// Der Zahlungsschritt wird separat in useSignupForm anhand des berechneten Betrags übersprungen.
export const STEP_AGE = 1
export const STEP_CONTACT = 2
export const STEP_PERSONAL = 3
export const STEP_ARRIVAL = 4
export const STEP_REGISTRATION = 5
export const STEP_ADDONS = 6
export const STEP_PARTICIPATION_OPTIONS = 7
export const STEP_PHOTO = 8
export const STEP_ALLERGIES = 9
export const STEP_PAYMENT = 10
export const STEP_SUMMARY = 11
// Ob ein (optionaler) Schritt für dieses Event angezeigt wird.
export function stepVisible(event, step) {
if (step === STEP_ADDONS) {
return (event.addons?.length ?? 0) > 0
}
if (step === STEP_PARTICIPATION_OPTIONS) {
return (event.participationOptions?.length ?? 0) > 0
}
return true
}
// Nächster sichtbarer Schritt nach `step` (überspringt ausgeblendete optionale Schritte).
export function nextVisibleFrom(event, step) {
let candidate = step + 1
while (candidate < STEP_SUMMARY && !stepVisible(event, candidate)) {
candidate++
}
return candidate
}
// Vorheriger sichtbarer Schritt vor `step`.
export function prevVisibleFrom(event, step) {
let candidate = step - 1
while (candidate > STEP_AGE && !stepVisible(event, candidate)) {
candidate--
}
return candidate
}
app/Domains/Event/Views/Partials/SignUpForm/composables/useSignupForm.js
+10 -5
View File
@@ -1,5 +1,6 @@
import {reactive, ref} from 'vue'
import axios from 'axios'
import {STEP_PAYMENT, STEP_SUMMARY} from './stepFlow.js'
export function useSignupForm(event, participantData) {
const currentStep = ref(1)
@@ -16,6 +17,8 @@ export function useSignupForm(event, participantData) {
eatingHabit: 'EATING_HABIT_VEGAN',
paymentMethod: activeMethods.length === 1 ? activeMethods[0].slug : null,
paymentOptions: {},
// Antworten auf die event-spezifischen Teilnahmeoptionen: { [question.key]: option.value }
participationOptions: {},
userId: participantData.id,
eventId: event.id,
vorname: participantData.firstname ?? '',
@@ -57,6 +60,8 @@ export function useSignupForm(event, participantData) {
const summaryAmount = ref('')
const summaryAmountValue = ref(0)
const summaryBaseAmount = ref('')
const summaryAddonLines = ref([])
const fetchAmount = async () => {
summaryLoading.value = true
@@ -74,15 +79,13 @@ export function useSignupForm(event, participantData) {
})
summaryAmount.value = res.data.amount
summaryAmountValue.value = Number(res.data.amountValue ?? 0)
summaryBaseAmount.value = res.data.baseAmount ?? ''
summaryAddonLines.value = res.data.addons ?? []
} finally {
summaryLoading.value = false
}
}
// Steps: ... 8 Allergien, 9 Zahlungsart, 10 Zusammenfassung.
const STEP_PAYMENT = 9
const STEP_SUMMARY = 10
const goToStep = async (step) => {
if (step === STEP_PAYMENT) {
// Betrag ermitteln: Bei 0 € wird die Zahlungsart-Auswahl übersprungen.
@@ -129,6 +132,8 @@ export function useSignupForm(event, participantData) {
submitResult,
summaryLoading,
summaryAmount,
summaryAmountValue
summaryAmountValue,
summaryBaseAmount,
summaryAddonLines
}
}
app/Domains/Event/Views/Partials/SignUpForm/steps/StepAddons.vue
+18 -6
View File
@@ -1,6 +1,10 @@
<script setup>
import {nextVisibleFrom, STEP_ADDONS} from "../composables/stepFlow.js";
const props = defineProps({ formData: Object, event: Object, selectedAddons: Object })
const emit = defineEmits(['next', 'back'])
const next = () => emit('next', nextVisibleFrom(props.event, STEP_ADDONS))
</script>
<template>
@@ -25,13 +29,21 @@ const emit = defineEmits(['next', 'back'])
<!-- Addons -->
<div v-if="event.addons?.length > 0">
<h3>Zusatzoptionen</h3>
<div v-for="addon in event.addons" :key="addon.id" style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
<div v-for="addon in event.addons" :key="addon.key"
style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
<label style="display: flex; gap: 12px; cursor: pointer;">
<input type="checkbox" v-model="selectedAddons[addon.id]" style="margin-top: 4px;" />
<input type="checkbox" v-model="selectedAddons[addon.key]" style="margin-top: 4px;"/>
<span>
<strong>{{ addon.name }}</strong>
<span style="display: block; color: #6b7280; font-size: 0.875rem;">Betrag: {{ addon.amount }}</span>
<span style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{ addon.description }}</span>
<strong>{{ addon.title }}</strong>
<span style="display: block; color: #6b7280; font-size: 0.875rem;">
<template v-if="addon.free">Kostenfrei</template>
<template v-else>{{ addon.priceReadable }}<template
v-if="!addon.flat"> / Tag</template></template>
</span>
<span v-if="addon.description"
style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{
addon.description
}}</span>
</span>
</label>
</div>
@@ -39,7 +51,7 @@ const emit = defineEmits(['next', 'back'])
<div class="btn-row">
<button type="button" class="btn-secondary" @click="emit('back', 5)">← Zurück</button>
<button type="button" class="btn-primary" @click="emit('next', 7)">Weiter →</button>
<button type="button" class="btn-primary" @click="next">Weiter →</button>
</div>
</div>
</template>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepAllergies.vue
+2 -2
View File
@@ -43,8 +43,8 @@ const emit = defineEmits(['next', 'back'])
</tr>
<tr>
<td colspan="2" class="btn-row">
<button type="button" class="btn-secondary" @click="emit('back', 7)">← Zurück</button>
<button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
<button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
<button type="button" class="btn-primary" @click="emit('next', 10)">Weiter →</button>
</td>
</tr>
</table>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepParticipationOptions.vue
+62
View File
@@ -0,0 +1,62 @@
<script setup>
import {computed} from "vue";
import {nextVisibleFrom, prevVisibleFrom, STEP_PARTICIPATION_OPTIONS} from "../composables/stepFlow.js";
const props = defineProps({formData: Object, event: Object})
const emit = defineEmits(['next', 'back'])
const questions = computed(() => props.event.participationOptions ?? [])
// Pflichtfeld: "Weiter" erst möglich, wenn jede Frage beantwortet ist.
const canProceed = computed(() =>
questions.value.every(q => {
const value = props.formData.participationOptions[q.key]
return value !== undefined && value !== null && String(value).trim() !== ''
})
)
const back = () => emit('back', prevVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
const next = () => emit('next', nextVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
</script>
<template>
<div>
<h3>Teilnahmeoptionen</h3>
<p style="color: #6b7280; font-size: 0.95rem; margin-bottom: 20px;">
Bitte triff für jede Auswahl eine Entscheidung.
</p>
<table class="form-table">
<tr v-for="question in questions" :key="question.key">
<td>
{{ question.title || question.label }}:
<span v-if="question.title && question.label" class="option-hint">{{ question.label }}</span>
</td>
<td>
<select v-model="formData.participationOptions[question.key]">
<option value="">Bitte wählen</option>
<option v-for="option in question.options" :key="option.value" :value="option.value">
{{ option.label }}
</option>
</select>
</td>
</tr>
</table>
<div class="btn-row">
<button type="button" class="btn-secondary" @click="back">← Zurück</button>
<button type="button" class="btn-primary" :disabled="!canProceed" @click="next">Weiter →</button>
</div>
</div>
</template>
<style scoped>
.option-hint {
display: block;
margin-top: 2px;
font-size: 0.8rem;
font-style: italic;
font-weight: 400;
color: #6b7280;
}
</style>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepPaymentMethod.vue
+2 -2
View File
@@ -78,8 +78,8 @@ const canProceed = computed(() => {
</div>
<div class="btn-row">
<button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
<button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 10)">Weiter →
<button type="button" class="btn-secondary" @click="emit('back', 9)">← Zurück</button>
<button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 11)">Weiter →
</button>
</div>
</div>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepPhotoPermissions.vue
+5 -6
View File
@@ -1,16 +1,15 @@
<script setup>
import {prevVisibleFrom, STEP_ALLERGIES, STEP_PHOTO} from "../composables/stepFlow.js";
const props = defineProps({ formData: Object, event: Object })
const emit = defineEmits(['next', 'back'])
const acceptAll = () => {
Object.keys(props.formData.foto).forEach(k => props.formData.foto[k] = true)
emit('next', 8)
emit('next', STEP_ALLERGIES)
}
const back = () => {
const hasAddons = (props.event.addons?.length > 0) || props.event.solidarityPayment
emit('back', hasAddons ? 6 : 5)
}
const back = () => emit('back', prevVisibleFrom(props.event, STEP_PHOTO))
</script>
<template>
@@ -27,7 +26,7 @@ const back = () => {
<div class="btn-row">
<button type="button" class="btn-secondary" @click="back">← Zurück</button>
<button type="button" class="btn-primary" style="background: #059669;" @click="acceptAll">Alle akzeptieren & weiter</button>
<button type="button" class="btn-primary" @click="emit('next', 8)">Weiter →</button>
<button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
</div>
</div>
</template>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepRegistrationMode.vue
+3 -3
View File
@@ -1,5 +1,6 @@
<script setup>
import { watch } from "vue";
import {watch} from "vue";
import {nextVisibleFrom, STEP_REGISTRATION} from "../composables/stepFlow.js";
const props = defineProps({ formData: Object, event: Object })
const emit = defineEmits(['next', 'back'])
@@ -17,8 +18,7 @@ watch(
)
const nextStep = () => {
const hasAddons = (props.event.addons?.length ?? 0) > 0
emit('next', hasAddons ? 6 : 7)
emit('next', nextVisibleFrom(props.event, STEP_REGISTRATION))
}
</script>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepSummary.vue
+41 -2
View File
@@ -7,6 +7,8 @@ const PAYMENT_ACCOUNT_TRANSACTION = 'PAYMENT_ACCOUNT_TRANSACTION'
const props = defineProps({
formData: Object,
event: Object,
summaryBaseAmount: {type: String, default: ''},
summaryAddonLines: {type: Array, default: () => []},
summaryAmount: String,
summaryAmountValue: {type: Number, default: 0},
summaryLoading: Boolean,
@@ -32,8 +34,17 @@ const paymentConfirmationText = computed(() => {
return template.replaceAll('{amount}', props.summaryAmount ?? '')
})
// Zurück führt zur Zahlungsart (9), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (8).
const backTarget = computed(() => props.summaryAmountValue > 0 ? 9 : 8)
// Zurück führt zur Zahlungsart (10), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (9).
const backTarget = computed(() => props.summaryAmountValue > 0 ? 10 : 9)
// Gewählte Teilnahmeoptionen für die Zusammenfassung (label statt value anzeigen).
const selectedParticipationOptions = computed(() =>
(props.event.participationOptions ?? []).map(question => {
const value = props.formData.participationOptions[question.key]
const option = (question.options ?? []).find(o => o.value === value)
return {label: question.title || question.label, value: option?.label ?? ''}
}).filter(entry => entry.value !== '')
)
const canSubmit = computed(() =>
props.formData.summary_information_correct
@@ -115,6 +126,11 @@ function eatingHabit() {
<td>{{ participationGroup() }}</td>
</tr>
<tr v-for="option in selectedParticipationOptions" :key="option.label">
<td>{{ option.label }}:</td>
<td>{{ option.value }}</td>
</tr>
<tr>
<td>Foto-Erlaubnis:</td>
<td>
@@ -149,6 +165,22 @@ function eatingHabit() {
<tr><td>Abreise:</td><td>{{ formatDate(formData.departure) }}</td></tr>
</table>
<h4 style="margin: 0 0 8px 0;">Kostenübersicht</h4>
<table class="form-table cost-table" style="margin-bottom: 20px;">
<tr>
<td>Teilnahmebeitrag:</td>
<td>{{ summaryBaseAmount }}</td>
</tr>
<tr v-for="addon in summaryAddonLines" :key="addon.key">
<td>{{ addon.title }}:</td>
<td>{{ addon.free ? 'Kostenfrei' : addon.amount }}</td>
</tr>
<tr class="cost-total">
<td><strong>Gesamtbetrag:</strong></td>
<td><strong>{{ summaryAmount }}</strong></td>
</tr>
</table>
<div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
<label style="display: flex; gap: 10px; cursor: pointer;">
<input type="checkbox" v-model="formData.summary_information_correct" />
@@ -182,3 +214,10 @@ function eatingHabit() {
</div>
</div>
</template>
<style scoped>
.cost-table .cost-total td {
border-top: 1px solid #d1d5db;
padding-top: 8px;
}
</style>