232 lines
8.9 KiB
Vue
232 lines
8.9 KiB
Vue
<script setup>
|
|
import AppLayout from "../../../../../resources/js/layouts/AppLayout.vue";
|
|
import ShadowedBox from "../../../../Views/Components/ShadowedBox.vue";
|
|
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";
|
|
|
|
const emit = defineEmits(['close'])
|
|
|
|
const props = defineProps({
|
|
event: Object,
|
|
})
|
|
|
|
const errors = reactive({})
|
|
const formData = reactive({
|
|
"pft_1_active": true,
|
|
"pft_1_amount": props.event.participationFee_1.amount,
|
|
"pft_1_description": props.event.participationFee_1.description,
|
|
|
|
"pft_2_active": props.event.participationFee_2.active,
|
|
"pft_2_amount": props.event.participationFee_2.amount,
|
|
"pft_2_description": props.event.participationFee_2.description,
|
|
|
|
"pft_3_active": props.event.participationFee_3.active,
|
|
"pft_3_amount": props.event.participationFee_3.amount,
|
|
"pft_3_description": props.event.participationFee_3.description,
|
|
|
|
"pft_4_active": props.event.participationFee_4.active,
|
|
"pft_4_amount": props.event.participationFee_4.amount,
|
|
"pft_4_description": props.event.participationFee_4.description,
|
|
|
|
'maxAmount': props.event.maxAmount,
|
|
|
|
})
|
|
|
|
function validateInput() {
|
|
var noErrors = true;
|
|
|
|
if (formData.pft_1_description === '' && !props.event.solidarityPayment) {
|
|
errors.pft_1_description = 'Eine Beschreibung für diese Gruppe ist erforderlich';
|
|
noErrors = false;
|
|
}
|
|
|
|
if (formData.pft_2_description === '' && formData.pft_2_active && !props.event.solidarityPayment) {
|
|
errors.pft_2_description = 'Eine Beschreibung für diese Gruppe ist erforderlich';
|
|
noErrors = false;
|
|
}
|
|
|
|
if (formData.pft_3_description === '' && formData.pft_3_active && !props.event.solidarityPayment) {
|
|
errors.pft_3_description = 'Eine Beschreibung für diese Gruppe ist erforderlich';
|
|
noErrors = false;
|
|
}
|
|
|
|
if (formData.pft_4_description === '' && formData.pft_4_active) {
|
|
errors.pft_4_description = 'Eine Beschreibung für diese Gruppe ist erforderlich';
|
|
noErrors = false;
|
|
}
|
|
|
|
return noErrors;
|
|
|
|
}
|
|
|
|
async function saveParticipationFees() {
|
|
if (!validateInput()) {
|
|
toast.error('Bitte prüfe alle Eingaben auf Fehler')
|
|
return;
|
|
}
|
|
|
|
const data = await request('/api/v1/event/details/' + props.event.id + '/participation-fees', {
|
|
method: "POST",
|
|
body: {
|
|
event_id: props.event.id,
|
|
pft_1_active: formData.pft_1_active,
|
|
pft_1_amount: formData.pft_1_amount,
|
|
pft_1_description: formData.pft_1_description,
|
|
|
|
pft_2_active: formData.pft_2_active,
|
|
pft_2_amount: formData.pft_2_amount,
|
|
pft_2_description: formData.pft_2_description,
|
|
|
|
pft_3_active: formData.pft_3_active,
|
|
pft_3_amount: formData.pft_3_amount,
|
|
pft_3_description: formData.pft_3_description,
|
|
|
|
pft_4_active: formData.pft_4_active,
|
|
pft_4_amount: formData.pft_4_amount,
|
|
pft_4_description: formData.pft_4_description,
|
|
|
|
maxAmount: formData.maxAmount,
|
|
}
|
|
})
|
|
|
|
emit('close')
|
|
}
|
|
|
|
function recalculateMaxAmount(newValue) {
|
|
if (formData.maxAmount === 0) return;
|
|
|
|
var newAmount = parseFloat(newValue.replace(',', '.'));
|
|
if (props.event.payPerDay) {
|
|
newAmount = newAmount * props.event.duration;
|
|
}
|
|
|
|
var currentMaxAmount = formData.maxAmount.replace(',', '.');
|
|
|
|
if (newAmount > currentMaxAmount) {
|
|
formData.maxAmount = newAmount.toFixed(2).replace('.', ',');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<table style="width: 100%;">
|
|
<tr>
|
|
<td>Aktiv</td>
|
|
<td>Preisgruppe</td>
|
|
<td>Betrag</td>
|
|
<td>Beschreibung</td>
|
|
</tr>
|
|
<tr style="height: 65px; vertical-align: top">
|
|
<td>
|
|
<input type="checkbox" v-model="formData.participationFeeType_1" checked disabled/>
|
|
</td>
|
|
<td v-if="props.event.solidarityPayment">
|
|
Regulärer Beitrag
|
|
</td>
|
|
<td v-else>
|
|
Teilnehmende
|
|
</td>
|
|
<td>
|
|
<AmountInput v-model="formData.pft_1_amount" class="width-small" @blur="recalculateMaxAmount(formData.pft_1_amount)" />
|
|
<label v-if="props.event.payPerDay"> Euro / Tag</label>
|
|
<label v-else> Euro Gesamt</label>
|
|
</td>
|
|
<td>
|
|
<input v-if="!props.event.solidarityPayment" type="text" v-model="formData.pft_1_description" style="width: 300px;" />
|
|
<label v-else></label>
|
|
<ErrorText :message="errors.pft_1_description" />
|
|
</td>
|
|
</tr>
|
|
|
|
<tr style="height: 65px; vertical-align: top;">
|
|
<td>
|
|
<input id="use_pft_2" type="checkbox" v-model="formData.pft_2_active" :checked="formData.pft_2_active" />
|
|
</td>
|
|
<td v-if="props.event.solidarityPayment">
|
|
<label for="use_pft_2" style="cursor: default">
|
|
Solidaritätsbeitrag
|
|
</label>
|
|
</td>
|
|
<td v-else>
|
|
<label for="use_pft_2" style="cursor: default">
|
|
Kernteam
|
|
</label>
|
|
</td>
|
|
<td v-if="formData.pft_2_active">
|
|
<AmountInput v-model="formData.pft_2_amount" class="width-small" @blur="recalculateMaxAmount(formData.pft_2_amount)" />
|
|
<label v-if="props.event.payPerDay"> Euro / Tag</label>
|
|
<label v-else> Euro Gesamt</label>
|
|
</td>
|
|
<td v-if="formData.pft_2_active">
|
|
<input v-if="!props.event.solidarityPayment" type="text" v-model="formData.pft_2_description" style="width: 300px;" />
|
|
<label v-else></label>
|
|
<ErrorText :message="errors.pft_2_description" />
|
|
</td>
|
|
</tr>
|
|
|
|
<tr style="height: 65px; vertical-align: top;">
|
|
<td>
|
|
<input id="use_pft_3" type="checkbox" v-model="formData.pft_3_active" :checked="formData.pft_3_active" />
|
|
</td>
|
|
<td v-if="props.event.solidarityPayment">
|
|
<label for="use_pft_3" style="cursor: default">
|
|
Reduzierter Beitrag
|
|
</label>
|
|
</td>
|
|
<td v-else>
|
|
<label for="use_pft_3" style="cursor: default">
|
|
Unterstützende
|
|
</label>
|
|
</td>
|
|
<td v-if="formData.pft_3_active">
|
|
<AmountInput v-model="formData.pft_3_amount" class="width-small" @blur="recalculateMaxAmount(formData.pft_3_amount)" />
|
|
<label v-if="props.event.payPerDay"> Euro / Tag</label>
|
|
<label v-else> Euro Gesamt</label>
|
|
</td>
|
|
<td v-if="formData.pft_3_active">
|
|
<input v-if="!props.event.solidarityPayment" type="text" v-model="formData.pft_3_description" style="width: 300px;" />
|
|
<label v-else>Nach Verfügbarkeit</label>
|
|
<ErrorText :message="errors.pft_3_description" />
|
|
</td>
|
|
</tr>
|
|
|
|
<tr style="height: 65px; vertical-align: top;" v-if="!props.event.solidarityPayment">
|
|
<td>
|
|
<input id="use_pft_4" type="checkbox" v-model="formData.pft_4_active" :checked="formData.pft_4_active" />
|
|
</td>
|
|
<td>
|
|
<label for="use_pft_4" style="cursor: default">
|
|
Sonstige
|
|
</label>
|
|
</td>
|
|
<td v-if="formData.pft_4_active">
|
|
<AmountInput v-model="formData.pft_4_amount" class="width-small" @blur="recalculateMaxAmount(formData.pft_4_amount)" />
|
|
<label v-if="props.event.payPerDay"> Euro / Tag</label>
|
|
<label v-else> Euro Gesamt</label>
|
|
</td>
|
|
<td v-if="formData.pft_4_active">
|
|
<input type="text" v-model="formData.pft_4_description" style="width: 300px;" />
|
|
<ErrorText :message="errors.pft_4_description" />
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="2">
|
|
Maximaler Beitrag für Veranstaltung:
|
|
</td>
|
|
<td colspan="2">
|
|
<AmountInput v-model="formData.maxAmount" class="width-small" /> Euro Gesamt
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td colspan="4">
|
|
<input type="button" value="Speichern" @click="saveParticipationFees" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</template>
|