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

Icons for payment methods

Browse Source
This commit is contained in:
th.guenther
2026-08-05 17:41:35 +02:00
parent daff70b4fe
commit f8dba18854
16 changed files with 473 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/Domains/Admin/Views/Partials/TenantPaymentMethods.vue
+5 -1
View File
@@ -2,6 +2,8 @@
import {computed, ref} from 'vue';
import FullScreenModal from "../../../../Views/Components/FullScreenModal.vue";
import TextEditor from "../../../../Views/Components/TextEditor.vue";
import RichSelectBox from "../../../../Views/Components/RichSelectBox.vue";
import {PAYMENT_METHOD_ICONS} from "../../../../../resources/js/constants/paymentMethodIcons.js";
import {useAjax} from "../../../../../resources/js/components/ajaxHandler.js";
import {toast} from "vue3-toastify";
@@ -97,7 +99,9 @@ async function save() {
<tr v-for="option in editing.optionsSchema ?? []" :key="option.name">
<th>{{ option.label }}<span v-if="option.required" class="required-marker">*</span></th>
<td>
<TextEditor v-if="option.type === 'richtext'" v-model="form.configuration[option.name]"/>
<RichSelectBox v-if="option.type === 'icon'" v-model="form.configuration[option.name]"
:options="PAYMENT_METHOD_ICONS" placeholder="Symbol wählen…"/>
<TextEditor v-else-if="option.type === 'richtext'" v-model="form.configuration[option.name]"/>
<input v-else type="text" v-model="form.configuration[option.name]" class="form-input"/>
</td>
</tr>
app/Domains/Event/Actions/SetPaymentMethods/SetPaymentMethodsCommand.php
+82
View File
@@ -0,0 +1,82 @@
<?php
namespace App\Domains\Event\Actions\SetPaymentMethods;
use App\Models\AvailablePaymentMethod;
use App\Models\PaymentMethod;
use App\RelationModels\EventPaymentMethods;
class SetPaymentMethodsCommand
{
public SetPaymentMethodsRequest $request;
public function __construct(SetPaymentMethodsRequest $request)
{
$this->request = $request;
}
public function execute(): SetPaymentMethodsResponse
{
$response = new SetPaymentMethodsResponse();
if (count($this->request->paymentMethods) === 0) {
$response->success = false;
$response->message = 'Mindestens eine Zahlungsmöglichkeit muss ausgewählt sein.';
return $response;
}
$this->syncPaymentMethods();
$this->request->event->save();
$response->success = true;
return $response;
}
/**
* Differenzieller Sync der Zahlungsmethoden mit Snapshot-Copy-Semantik:
* - entfernte Methoden werden gelöscht,
* - neue Methoden erhalten einen Snapshot der Tenant-Config (oder eines expliziten Overrides),
* - bestehende Methoden behalten ihre pro-Event-Config, sofern kein Override übergeben wird.
*/
private function syncPaymentMethods(): void
{
$event = $this->request->event;
$desiredSlugs = $this->request->paymentMethods;
$overrides = $this->request->paymentMethodConfigurations;
$existing = EventPaymentMethods::where('event_id', $event->id)->get()->keyBy('slug');
// Nicht mehr gewünschte Methoden entfernen.
foreach ($existing as $slug => $row) {
if (!in_array($slug, $desiredSlugs, true)) {
$row->delete();
}
}
// Tenant-Instanzen (für Snapshot-Kopie neuer Methoden) laden.
$tenantMethods = AvailablePaymentMethod::whereIn('slug', $desiredSlugs)->get()->keyBy('slug');
foreach ($desiredSlugs as $slug) {
$override = $overrides[$slug] ?? null;
if (isset($existing[$slug])) {
// Bestehende Zuweisung: Config nur bei explizitem Override anpassen, sonst unverändert lassen.
if ($override !== null) {
$row = $existing[$slug];
$row->configuration = PaymentMethod::sanitizeConfiguration($slug, $override);
$row->save();
}
continue;
}
// Neue Zuweisung: expliziter Override oder Snapshot der Tenant-Config.
$snapshot = $override ?? ($tenantMethods[$slug]->configuration ?? []);
EventPaymentMethods::create([
'event_id' => $event->id,
'slug' => $slug,
'configuration' => PaymentMethod::sanitizeConfiguration($slug, $snapshot ?? []),
]);
}
}
}
app/Domains/Event/Actions/SetPaymentMethods/SetPaymentMethodsRequest.php
+33
View File
@@ -0,0 +1,33 @@
<?php
namespace App\Domains\Event\Actions\SetPaymentMethods;
use App\Models\Event;
class SetPaymentMethodsRequest
{
public Event $event;
/**
* Gewünschte Zahlungsmethoden-Slugs für das Event.
*
* @var array<int, string>
*/
public array $paymentMethods;
/**
* Optionale pro-Event-Config-Overrides je Zahlungsmethode: [slug => [option => value]].
* Fehlt ein Slug, bleibt die bestehende Config erhalten bzw. wird beim ersten Zuweisen
* aus der Tenant-Config als Snapshot kopiert.
*
* @var array<string, array<string, mixed>>
*/
public array $paymentMethodConfigurations;
public function __construct(Event $event, array $paymentMethods, array $paymentMethodConfigurations = [])
{
$this->event = $event;
$this->paymentMethods = $paymentMethods;
$this->paymentMethodConfigurations = $paymentMethodConfigurations;
}
}
app/Domains/Event/Actions/SetPaymentMethods/SetPaymentMethodsResponse.php
+9
View File
@@ -0,0 +1,9 @@
<?php
namespace App\Domains\Event\Actions\SetPaymentMethods;
class SetPaymentMethodsResponse
{
public bool $success = false;
public string $message = '';
}
app/Domains/Event/Actions/UpdateEvent/UpdateEventCommand.php
-59
View File
@@ -2,10 +2,6 @@
namespace App\Domains\Event\Actions\UpdateEvent;
use App\Models\AvailablePaymentMethod;
use App\Models\PaymentMethod;
use App\RelationModels\EventPaymentMethods;
class UpdateEventCommand {
public UpdateEventRequest $request;
public function __construct(UpdateEventRequest $request) {
@@ -15,12 +11,6 @@ class UpdateEventCommand {
public function execute() : UpdateEventResponse {
$response = new UpdateEventResponse();
if (count($this->request->paymentMethods) === 0) {
$response->success = false;
$response->message = 'Mindestens eine Zahlungsmöglichkeit muss ausgewählt sein.';
return $response;
}
$this->request->event->name = $this->request->eventName;
$this->request->event->location = $this->request->eventLocation;
$this->request->event->postal_code = $this->request->postalCode;
@@ -45,58 +35,9 @@ class UpdateEventCommand {
$this->request->event->localGroups()->attach($contributingLocalGroup);
}
$this->syncPaymentMethods();
$this->request->event->save();
$response->success = true;
return $response;
}
/**
* Differenzieller Sync der Zahlungsmethoden mit Snapshot-Copy-Semantik:
* - entfernte Methoden werden gelöscht,
* - neue Methoden erhalten einen Snapshot der Tenant-Config (oder eines expliziten Overrides),
* - bestehende Methoden behalten ihre pro-Event-Config, sofern kein Override übergeben wird.
*/
private function syncPaymentMethods(): void
{
$event = $this->request->event;
$desiredSlugs = $this->request->paymentMethods;
$overrides = $this->request->paymentMethodConfigurations;
$existing = EventPaymentMethods::where('event_id', $event->id)->get()->keyBy('slug');
// Nicht mehr gewünschte Methoden entfernen.
foreach ($existing as $slug => $row) {
if (!in_array($slug, $desiredSlugs, true)) {
$row->delete();
}
}
// Tenant-Instanzen (für Snapshot-Kopie neuer Methoden) laden.
$tenantMethods = AvailablePaymentMethod::whereIn('slug', $desiredSlugs)->get()->keyBy('slug');
foreach ($desiredSlugs as $slug) {
$override = $overrides[$slug] ?? null;
if (isset($existing[$slug])) {
// Bestehende Zuweisung: Config nur bei explizitem Override anpassen, sonst unverändert lassen.
if ($override !== null) {
$row = $existing[$slug];
$row->configuration = PaymentMethod::sanitizeConfiguration($slug, $override);
$row->save();
}
continue;
}
// Neue Zuweisung: expliziter Override oder Snapshot der Tenant-Config.
$snapshot = $override ?? ($tenantMethods[$slug]->configuration ?? []);
EventPaymentMethods::create([
'event_id' => $event->id,
'slug' => $slug,
'configuration' => PaymentMethod::sanitizeConfiguration($slug, $snapshot ?? []),
]);
}
}
}
app/Domains/Event/Actions/UpdateEvent/UpdateEventRequest.php
+2 -13
View File
@@ -21,18 +21,9 @@ class UpdateEventRequest {
public Amount $supportPerPerson;
public array $contributingLocalGroups;
public array $eatingHabits;
public array $paymentMethods;
/**
* Optionale pro-Event-Config-Overrides je Zahlungsmethode: [slug => [option => value]].
* Fehlt ein Slug, bleibt die bestehende Config erhalten bzw. wird beim ersten Zuweisen
* aus der Tenant-Config als Snapshot kopiert.
*
* @var array<string, array<string, mixed>>
*/
public array $paymentMethodConfigurations;
public function __construct(Event $event, string $eventName, string $eventLocation, string $postalCode, string $email, DateTime $earlyBirdEnd, DateTime $registrationFinalEnd, int $alcoholicsAge, bool $sendWeeklyReports, bool $registrationAllowed, Amount $flatSupport, Amount $supportPerPerson, array $contributingLocalGroups, array $eatingHabits, array $paymentMethods, array $paymentMethodConfigurations = []) {
public function __construct(Event $event, string $eventName, string $eventLocation, string $postalCode, string $email, DateTime $earlyBirdEnd, DateTime $registrationFinalEnd, int $alcoholicsAge, bool $sendWeeklyReports, bool $registrationAllowed, Amount $flatSupport, Amount $supportPerPerson, array $contributingLocalGroups, array $eatingHabits)
{
$this->event = $event;
$this->eventName = $eventName;
$this->eventLocation = $eventLocation;
@@ -47,7 +38,5 @@ class UpdateEventRequest {
$this->supportPerPerson = $supportPerPerson;
$this->contributingLocalGroups = $contributingLocalGroups;
$this->eatingHabits = $eatingHabits;
$this->paymentMethods = $paymentMethods;
$this->paymentMethodConfigurations = $paymentMethodConfigurations;
}
}
app/Domains/Event/Controllers/DetailsController.php
+17 -8
View File
@@ -4,22 +4,21 @@ namespace App\Domains\Event\Controllers;
use App\Domains\Event\Actions\SetParticipationFees\SetParticipationFeesCommand;
use App\Domains\Event\Actions\SetParticipationFees\SetParticipationFeesRequest;
use App\Domains\Event\Actions\SetPaymentMethods\SetPaymentMethodsCommand;
use App\Domains\Event\Actions\SetPaymentMethods\SetPaymentMethodsRequest;
use App\Domains\Event\Actions\UpdateEvent\UpdateEventCommand;
use App\Domains\Event\Actions\UpdateEvent\UpdateEventRequest;
use App\Domains\Event\Actions\UpdateManagers\UpdateManagersCommand;
use App\Domains\Event\Actions\UpdateManagers\UpdateManagersRequest;
use App\Enumerations\ParticipationFeeType;
use App\Enumerations\ParticipationType;
use App\Models\EventParticipant;
use App\Providers\InertiaProvider;
use App\Providers\PdfGenerateAndDownloadProvider;
use App\Resources\EventResource;
use App\Scopes\CommonController;
use App\ValueObjects\Amount;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use function Symfony\Component\String\b;
class DetailsController extends CommonController {
public function __invoke(string $eventId) {
@@ -42,8 +41,6 @@ class DetailsController extends CommonController {
$contributinLocalGroups = $request->input('contributingLocalGroups');
$eatingHabits = $request->input('eatingHabits');
$paymentMethods = $request->input('paymentMethods');
$paymentMethodConfigurations = (array) $request->input('paymentMethodConfigurations', []);
$eventUpdateRequest = new UpdateEventRequest(
$event,
@@ -59,9 +56,7 @@ class DetailsController extends CommonController {
$flatSupport,
$supportPerPerson,
$contributinLocalGroups,
$eatingHabits,
$paymentMethods,
$paymentMethodConfigurations
$eatingHabits
);
$eventUpdateCommand = new UpdateEventCommand($eventUpdateRequest);
@@ -70,6 +65,20 @@ class DetailsController extends CommonController {
return response()->json(['status' => $response->success ? 'success' : 'error', 'message' => $response->message]);
}
public function updatePaymentMethods(int $eventId, Request $request): JsonResponse
{
$event = $this->events->getById($eventId);
$paymentMethods = $request->input('paymentMethods', []);
$paymentMethodConfigurations = (array)$request->input('paymentMethodConfigurations', []);
$setPaymentMethodsRequest = new SetPaymentMethodsRequest($event, $paymentMethods, $paymentMethodConfigurations);
$setPaymentMethodsCommand = new SetPaymentMethodsCommand($setPaymentMethodsRequest);
$response = $setPaymentMethodsCommand->execute();
return response()->json(['status' => $response->success ? 'success' : 'error', 'message' => $response->message]);
}
public function updateEventManagers(int $eventId, Request $request) : JsonResponse {
$event = $this->events->getById($eventId);
app/Domains/Event/Routes/api.php
+1
View File
@@ -45,6 +45,7 @@ Route::prefix('api/v1')
Route::post('/event-managers', [DetailsController::class, 'updateEventManagers']);
Route::post('/participation-fees', [DetailsController::class, 'updateParticipationFees']);
Route::post('/common-settings', [DetailsController::class, 'updateCommonSettings']);
Route::post('/payment-methods', [DetailsController::class, 'updatePaymentMethods']);
});
app/Domains/Event/Views/Partials/CommonSettings.vue
-75
View File
@@ -2,7 +2,6 @@
import {onMounted, reactive, ref} from "vue";
import ErrorText from "../../../../Views/Components/ErrorText.vue";
import AmountInput from "../../../../Views/Components/AmountInput.vue";
import TextEditor from "../../../../Views/Components/TextEditor.vue";
import {request} from "../../../../../resources/js/components/HttpClient.js";
import {toast} from "vue3-toastify";
@@ -17,14 +16,10 @@ const emit = defineEmits(['close'])
const dynmicProps = reactive({
localGroups: [],
eatingHabits:[],
paymentMethods: []
});
const contributingLocalGroups = ref([])
const eatingHabits = ref([]);
const paymentMethods = ref([]);
// pro-Event-Config je Zahlungsmethode: { slug: { option: value } }
const paymentMethodConfigurations = reactive({});
const errors = reactive({})
@@ -51,30 +46,9 @@ const emit = defineEmits(['close'])
contributingLocalGroups.value = props.event.contributingLocalGroups?.map(t => t.id) ?? []
eatingHabits.value = props.event.eatingHabits?.map(t => t.id) ?? []
paymentMethods.value = props.event.paymentMethods?.map(t => t.slug) ?? []
// Pro-Event-Config vorbelegen: bereits gespeicherte Pivot-Config des Events hat Vorrang,
// sonst der Tenant-Standard (Snapshot-Quelle für neu zugewiesene Methoden).
const eventConfigBySlug = {}
for (const pm of props.event.paymentMethods ?? []) {
eventConfigBySlug[pm.slug] = pm.configuration ?? {}
}
for (const method of dynmicProps.paymentMethods ?? []) {
const source = eventConfigBySlug[method.slug] ?? method.configuration ?? {}
const config = {}
for (const option of method.optionsSchema ?? []) {
config[option.name] = source[option.name] ?? ''
}
paymentMethodConfigurations[method.slug] = config
}
});
async function save() {
if (paymentMethods.value.length === 0) {
toast.error('Mindestens eine Zahlungsmöglichkeit muss ausgewählt sein.')
return
}
const response = await request('/api/v1/event/details/' + props.event.id + '/common-settings', {
method: 'POST',
headers: {
@@ -94,8 +68,6 @@ const emit = defineEmits(['close'])
supportPerson: formData.supportPerson,
contributingLocalGroups: contributingLocalGroups.value,
eatingHabits: eatingHabits.value,
paymentMethods: paymentMethods.value,
paymentMethodConfigurations: paymentMethodConfigurations,
}
})
@@ -227,31 +199,6 @@ const emit = defineEmits(['close'])
<label style="padding-left: 5px;" :for="'eatinghabit' + eatingHabit.id">{{eatingHabit.name}}</label>
</td>
</tr>
<tr>
<th style="padding-top: 40px !important;">Zahlungsmöglichkeiten</th>
</tr>
<tr v-for="paymentMethod in dynmicProps.paymentMethods">
<td>
<input type="checkbox" :id="'paymentmethod' + paymentMethod.id" :value="paymentMethod.slug" v-model="paymentMethods" />
<label style="padding-left: 5px;" :for="'paymentmethod' + paymentMethod.id">{{paymentMethod.name}}</label>
<div
v-if="paymentMethods.includes(paymentMethod.slug) && (paymentMethod.optionsSchema?.length ?? 0) > 0"
class="payment-method-config"
>
<div v-for="option in paymentMethod.optionsSchema" :key="option.name" class="payment-method-config-row">
<label>{{ option.label }}<span v-if="option.required" class="required-marker">*</span></label>
<TextEditor v-if="option.type === 'richtext'"
v-model="paymentMethodConfigurations[paymentMethod.slug][option.name]"/>
<input v-else type="text"
v-model="paymentMethodConfigurations[paymentMethod.slug][option.name]"
class="width-full"/>
</div>
</div>
</td>
</tr>
</table>
@@ -308,26 +255,4 @@ const emit = defineEmits(['close'])
width: 250px;
}
.payment-method-config {
margin: 6px 0 12px 24px;
padding-left: 10px;
border-left: 2px solid #d1d5db;
}
.payment-method-config-row {
margin-bottom: 6px;
}
.payment-method-config-row label {
display: block;
font-size: 0.85rem;
color: #374151;
margin-bottom: 2px;
}
.required-marker {
color: #ef4444;
margin-left: 2px;
}
</style>
app/Domains/Event/Views/Partials/ParticipationFees.vue
+130 -6
View File
@@ -1,16 +1,59 @@
<script setup>
import {reactive, watch} from "vue";
import AmountInput from "../../../../Views/Components/AmountInput.vue";
import ErrorText from "../../../../Views/Components/ErrorText.vue";
import {toast} from "vue3-toastify";
import {request} from "../../../../../resources/js/components/HttpClient.js";
import {onMounted, reactive, ref} from "vue";
import AmountInput from "../../../../Views/Components/AmountInput.vue";
import ErrorText from "../../../../Views/Components/ErrorText.vue";
import TextEditor from "../../../../Views/Components/TextEditor.vue";
import Modal from "../../../../Views/Components/Modal.vue";
import RichSelectBox from "../../../../Views/Components/RichSelectBox.vue";
import {PAYMENT_METHOD_ICONS} from "../../../../../resources/js/constants/paymentMethodIcons.js";
import {toast} from "vue3-toastify";
import {request} from "../../../../../resources/js/components/HttpClient.js";
const emit = defineEmits(['close'])
const emit = defineEmits(['close'])
const props = defineProps({
event: Object,
})
// Verfügbare (aktive) Zahlungsarten des Tenants inkl. optionsSchema + Default-Config.
const availablePaymentMethods = ref([])
// Auswahl der Zahlungsart-Slugs für dieses Event (Default: leer bei neuen Events).
const paymentMethods = ref([])
// pro-Event-Config je Zahlungsmethode: { slug: { option: value } }
const paymentMethodConfigurations = reactive({})
// Optionen-Modal
const showOptionsModal = ref(false)
const optionsMethod = ref(null)
function openOptions(method) {
optionsMethod.value = method
showOptionsModal.value = true
}
onMounted(async () => {
const response = await fetch('/api/v1/core/retrieve-event-setting-data');
const data = await response.json();
availablePaymentMethods.value = data.paymentMethods ?? []
paymentMethods.value = props.event.paymentMethods?.map(t => t.slug) ?? []
// Pro-Event-Config vorbelegen: bereits gespeicherte Pivot-Config des Events hat Vorrang,
// sonst der Tenant-Standard (Snapshot-Quelle für neu zugewiesene Methoden).
const eventConfigBySlug = {}
for (const pm of props.event.paymentMethods ?? []) {
eventConfigBySlug[pm.slug] = pm.configuration ?? {}
}
for (const method of availablePaymentMethods.value) {
const source = eventConfigBySlug[method.slug] ?? method.configuration ?? {}
const config = {}
for (const option of method.optionsSchema ?? []) {
config[option.name] = source[option.name] ?? ''
}
paymentMethodConfigurations[method.slug] = config
}
})
const errors = reactive({})
const formData = reactive({
"pft_1_active": true,
@@ -75,6 +118,24 @@
return;
}
if (paymentMethods.value.length === 0) {
toast.error('Mindestens eine Zahlungsmöglichkeit muss ausgewählt sein.')
return;
}
const paymentResponse = await request('/api/v1/event/details/' + props.event.id + '/payment-methods', {
method: "POST",
body: {
paymentMethods: paymentMethods.value,
paymentMethodConfigurations: paymentMethodConfigurations,
}
})
if (paymentResponse.status !== 'success') {
toast.error(paymentResponse.message ?? 'Die Zahlungsmöglichkeiten konnten nicht gespeichert werden.')
return;
}
const data = await request('/api/v1/event/details/' + props.event.id + '/participation-fees', {
method: "POST",
body: {
@@ -286,10 +347,73 @@
</td>
</tr>
<tr>
<td colspan="4" style="padding-top: 30px;">
<h4>Zahlungsmöglichkeiten</h4>
<div v-for="paymentMethod in availablePaymentMethods" :key="paymentMethod.slug"
class="payment-method-row">
<input type="checkbox" :id="'paymentmethod' + paymentMethod.id" :value="paymentMethod.slug"
v-model="paymentMethods"/>
<label style="padding-left: 5px;" :for="'paymentmethod' + paymentMethod.id">{{
paymentMethod.name
}}</label>
<label
v-if="paymentMethods.includes(paymentMethod.slug) && (paymentMethod.optionsSchema?.length ?? 0) > 0"
class="link"
style="padding-left: 15px; font-size: 10pt;"
@click="openOptions(paymentMethod)"
>Optionen</label>
</div>
</td>
</tr>
<tr>
<td colspan="4" style="padding-top: 20px;">
<input type="button" value="Speichern" @click="saveParticipationFees" />
</td>
</tr>
</table>
<Modal
v-if="showOptionsModal"
:show="showOptionsModal"
:title="'Optionen: ' + (optionsMethod?.name ?? '')"
width="700px"
@close="showOptionsModal = false"
>
<div v-for="option in optionsMethod?.optionsSchema ?? []" :key="option.name" class="payment-method-config-row">
<label>{{ option.label }}<span v-if="option.required" class="required-marker">*</span></label>
<RichSelectBox v-if="option.type === 'icon'"
v-model="paymentMethodConfigurations[optionsMethod.slug][option.name]"
:options="PAYMENT_METHOD_ICONS"
placeholder="Symbol wählen…"/>
<TextEditor v-else-if="option.type === 'richtext'"
v-model="paymentMethodConfigurations[optionsMethod.slug][option.name]"/>
<input v-else type="text"
v-model="paymentMethodConfigurations[optionsMethod.slug][option.name]"
class="width-full"/>
</div>
</Modal>
</template>
<style scoped>
.payment-method-row {
margin-bottom: 6px;
}
.payment-method-config-row {
margin-bottom: 12px;
}
.payment-method-config-row label {
display: block;
font-size: 0.85rem;
color: #374151;
margin-bottom: 2px;
}
.required-marker {
color: #ef4444;
margin-left: 2px;
}
</style>
app/Domains/Event/Views/Partials/SignUpForm/steps/StepPaymentMethod.vue
+8 -5
View File
@@ -15,10 +15,13 @@ const selectedMethod = computed(() =>
const participantSchema = computed(() => selectedMethod.value?.participantOptionsSchema ?? [])
// Font-Awesome-Icon je Zahlungsart (Fallback: generische Karte).
function iconFor(slug) {
if (slug === 'PAYMENT_ACCOUNT_TRANSACTION') return 'building-columns'
if (slug === 'PAYMENT_NOT_DEFINED') return 'money-bill-wave'
// Font-Awesome-Icon je Zahlungsart: konfiguriertes Symbol hat Vorrang, sonst Slug-Default
// (Fallback: generische Karte).
function iconFor(method) {
const configured = method.configuration?.icon
if (configured) return configured
if (method.slug === 'PAYMENT_ACCOUNT_TRANSACTION') return 'building-columns'
if (method.slug === 'PAYMENT_NOT_DEFINED') return 'money-bill-wave'
return 'credit-card'
}
@@ -60,7 +63,7 @@ const canProceed = computed(() => {
@keydown.space.prevent="selectMethod(method.slug)"
>
<div class="pay-card__badge">
<Icon :name="iconFor(method.slug)"/>
<Icon :name="iconFor(method)"/>
</div>
<div class="pay-card__body">
<h4 class="pay-card__title">{{ method.name }}</h4>
app/EventPaymentModules/Modules/AccountTransferPaymentModule.php
+2 -1
View File
@@ -33,7 +33,8 @@ class AccountTransferPaymentModule extends AbstractEventPaymentModule implements
['name' => 'account_owner', 'label' => 'Kontoinhaber', 'type' => 'string', 'required' => true],
['name' => 'iban', 'label' => 'IBAN', 'type' => 'string', 'required' => true],
['name' => 'bic', 'label' => 'BIC', 'type' => 'string', 'required' => false],
['name' => 'summary_confirmation_text', 'label' => 'Bestätigungstext (Zusammenfassung, {amount} als Platzhalter)', 'type' => 'string', 'required' => false],
['name' => 'summary_confirmation_text', 'label' => 'Bestätigung durch Teilnehmende (Zusammenfassung, {amount} als Platzhalter)', 'type' => 'string', 'required' => false],
['name' => 'icon', 'label' => 'Symbol', 'type' => 'icon', 'required' => false],
];
}
app/EventPaymentModules/Modules/UndefinedPaymentModule.php
+1
View File
@@ -29,6 +29,7 @@ class UndefinedPaymentModule extends AbstractEventPaymentModule
{
return [
['name' => 'payment_information', 'label' => 'Zahlungsinformationen', 'type' => 'richtext', 'required' => true],
['name' => 'icon', 'label' => 'Symbol', 'type' => 'icon', 'required' => false],
];
}
app/Views/Components/RichSelectBox.vue
+162
View File
@@ -0,0 +1,162 @@
<script setup>
import {computed, onBeforeUnmount, onMounted, ref} from 'vue'
import Icon from './Icon.vue'
// Generisches Custom-Dropdown, das je Option ein Icon + Label anzeigt (ein natives <select> kann
// keine SVG-Icons rendern). Wiederverwendbar für Icon-/Rich-Selects.
const props = defineProps({
// Ausgewählter Wert (value einer Option).
modelValue: {type: String, default: ''},
// [{ value, label, icon? }]
options: {type: Array, default: () => []},
placeholder: {type: String, default: 'Auswählen…'},
})
const emit = defineEmits(['update:modelValue'])
const open = ref(false)
const root = ref(null)
const selected = computed(() => props.options.find(o => o.value === props.modelValue) ?? null)
function toggle() {
open.value = !open.value
}
function select(option) {
emit('update:modelValue', option.value)
open.value = false
}
function onClickOutside(event) {
if (root.value && !root.value.contains(event.target)) {
open.value = false
}
}
function onKeydown(event) {
if (event.key === 'Escape' || event.key === 'Esc') {
open.value = false
}
}
onMounted(() => {
document.addEventListener('click', onClickOutside)
document.addEventListener('keydown', onKeydown)
})
onBeforeUnmount(() => {
document.removeEventListener('click', onClickOutside)
document.removeEventListener('keydown', onKeydown)
})
</script>
<template>
<div ref="root" class="rich-select">
<button
type="button"
class="rich-select__trigger"
:aria-expanded="open"
@click="toggle"
>
<span class="rich-select__value">
<template v-if="selected">
<Icon v-if="selected.icon" :key="selected.value" :name="selected.icon"/>
<span>{{ selected.label }}</span>
</template>
<span v-else class="rich-select__placeholder">{{ placeholder }}</span>
</span>
<span class="rich-select__caret" aria-hidden="true">▾</span>
</button>
<ul v-if="open" class="rich-select__list" role="listbox">
<li
v-for="option in options"
:key="option.value"
class="rich-select__option"
:class="{ 'rich-select__option--active': option.value === modelValue }"
role="option"
:aria-selected="option.value === modelValue"
@click="select(option)"
>
<Icon v-if="option.icon" :name="option.icon"/>
<span>{{ option.label }}</span>
</li>
</ul>
</div>
</template>
<style scoped>
.rich-select {
position: relative;
width: 100%;
}
.rich-select__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 10px;
padding: 6px 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
background: #fff;
cursor: pointer;
font-size: 0.95rem;
box-sizing: border-box;
}
.rich-select__trigger:hover {
border-color: #2563eb;
}
.rich-select__value {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.rich-select__placeholder {
color: #9ca3af;
}
.rich-select__caret {
color: #6b7280;
font-size: 0.8rem;
}
.rich-select__list {
position: absolute;
z-index: 50;
top: calc(100% + 4px);
left: 0;
right: 0;
margin: 0;
padding: 4px;
list-style: none;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
max-height: 260px;
overflow: auto;
}
.rich-select__option {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
}
.rich-select__option:hover {
background: #eff6ff;
}
.rich-select__option--active {
background: #dbeafe;
font-weight: 600;
}
</style>
resources/js/constants/paymentMethodIcons.js
+17
View File
@@ -0,0 +1,17 @@
// Kuratierte Liste zahlungsrelevanter Font-Awesome-Solid-Icons für die Symbol-Auswahl einer
// Zahlungsart. Die Namen sind über app/Views/Components/Icon.vue (free-solid) gedeckt und werden
// beim Build gebündelt (kein Netzwerk-Load). value === icon (FA-Solid-Name im kebab-case).
export const PAYMENT_METHOD_ICONS = [
{value: 'building-columns', label: 'Bank / Überweisung', icon: 'building-columns'},
{value: 'money-bill-wave', label: 'Bargeld', icon: 'money-bill-wave'},
{value: 'credit-card', label: 'Kreditkarte', icon: 'credit-card'},
{value: 'wallet', label: 'Geldbörse', icon: 'wallet'},
{value: 'coins', label: 'Münzen', icon: 'coins'},
{value: 'euro-sign', label: 'Euro', icon: 'euro-sign'},
{value: 'hand-holding-dollar', label: 'Spende', icon: 'hand-holding-dollar'},
{value: 'sack-dollar', label: 'Geldsack', icon: 'sack-dollar'},
{value: 'money-check-dollar', label: 'Scheck', icon: 'money-check-dollar'},
{value: 'receipt', label: 'Beleg', icon: 'receipt'},
{value: 'piggy-bank', label: 'Sparschwein', icon: 'piggy-bank'},
{value: 'mobile-screen', label: 'Mobil / App', icon: 'mobile-screen'},
]
tests/Feature/PaymentMethodConfigurationTest.php
+4 -22
View File
@@ -4,13 +4,12 @@ namespace Tests\Feature;
use App\Domains\Admin\Actions\UpdateAvailablePaymentMethod\UpdateAvailablePaymentMethodAction;
use App\Domains\Admin\Actions\UpdateAvailablePaymentMethod\UpdateAvailablePaymentMethodRequest;
use App\Domains\Event\Actions\UpdateEvent\UpdateEventCommand;
use App\Domains\Event\Actions\UpdateEvent\UpdateEventRequest;
use App\Domains\Event\Actions\SetPaymentMethods\SetPaymentMethodsCommand;
use App\Domains\Event\Actions\SetPaymentMethods\SetPaymentMethodsRequest;
use App\Models\AvailablePaymentMethod;
use App\Models\Event;
use App\Models\PaymentMethod;
use App\Models\Tenant;
use App\ValueObjects\Amount;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Illuminate\Support\Facades\DB;
use Tests\TestCase;
@@ -156,26 +155,9 @@ class PaymentMethodConfigurationTest extends TestCase
*/
private function runUpdateEvent(Event $event, array $slugs, array $configs = []): void
{
$request = new UpdateEventRequest(
$event,
$event->name,
$event->location,
$event->postal_code,
$event->email,
new \DateTime('2026-07-01'),
new \DateTime('2026-07-20'),
16,
false,
false,
Amount::fromString('0'),
Amount::fromString('0'),
[],
[],
$slugs,
$configs,
);
$request = new SetPaymentMethodsRequest($event, $slugs, $configs);
$response = new UpdateEventCommand($request)->execute();
$response = new SetPaymentMethodsCommand($request)->execute();
$this->assertTrue($response->success, $response->message);
}
}