148 lines
4.7 KiB
Vue
148 lines
4.7 KiB
Vue
<script setup>
|
|
|
|
import { ref, computed, onMounted, reactive } from 'vue'
|
|
import {checkFilesize} from "../../../../../../resources/js/components/InvoiceUploadChecks.js";
|
|
import RefundData from "./refund-data.vue";
|
|
import AmountInput from "../../../../../Views/Components/AmountInput.vue";
|
|
import {useAjax} from "../../../../../../resources/js/components/ajaxHandler.js";
|
|
import InfoIcon from '../../../../../Views/Components/InfoIcon.vue'
|
|
import {toast} from "vue3-toastify";
|
|
|
|
|
|
|
|
const data = defineProps({
|
|
eventId: Number,
|
|
userName: String,
|
|
userEmail: String,
|
|
userTelephone: String,
|
|
userAccountIban: String,
|
|
userAccountOwner: String,
|
|
})
|
|
|
|
|
|
const { request } = useAjax();
|
|
const amount = ref(0.00);
|
|
const invoiceType = ref(null);
|
|
const otherText = ref('');
|
|
const receipt = ref(null)
|
|
const finalStep = ref(false)
|
|
|
|
const invoiceTypeCollection = reactive({
|
|
invoiceTypes: {}
|
|
});
|
|
|
|
onMounted(async () => {
|
|
const response = await fetch('/api/v1/core/retrieve-invoice-types');
|
|
const data = await response.json();
|
|
Object.assign(invoiceTypeCollection, data);
|
|
});
|
|
|
|
/**
|
|
* Das Beispiel im Feld "Was wurde eingekauft" kommt aus `invoice_types.purchase_example` und ist damit
|
|
* ohne Deployment pflegbar. Ein allgemeines "z. B. Material" hilft beim Ausfüllen nicht weiter, und von
|
|
* genau diesem Text lebt später die Zweck-Spalte der EüR-Belegliste.
|
|
*
|
|
* Ist am Typ nichts gepflegt, greift der allgemeine Text -- ein Feld ohne jede Hilfestellung wäre
|
|
* schlechter als ein unscharfes Beispiel.
|
|
*/
|
|
const purchasePlaceholder = computed(() => {
|
|
const selected = Object.values(invoiceTypeCollection.invoiceTypes)
|
|
.find((type) => type.slug === invoiceType.value)
|
|
|
|
return selected?.purchaseExample || 'z. B. Material für die Veranstaltung'
|
|
})
|
|
|
|
function handleFileChange(event) {
|
|
if (checkFilesize('receipt')) {
|
|
receipt.value = event.target.files[0]
|
|
finalStep.value = true
|
|
} else {
|
|
event.target.value = null
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<fieldset>
|
|
<legend><span style="font-weight: bolder;">Wofür hast du den Betrag ausgegeben</span></legend>
|
|
|
|
<p v-for="availableInvoiceType in invoiceTypeCollection.invoiceTypes">
|
|
<input
|
|
name="invpice_type"
|
|
type="radio"
|
|
:value="availableInvoiceType.slug"
|
|
:id="'invoice_type_' + availableInvoiceType.slug"
|
|
v-model="invoiceType"
|
|
>
|
|
<label :for="'invoice_type_' + availableInvoiceType.slug">{{ availableInvoiceType.name }}</label>
|
|
<InfoIcon :text="'INFO_INVOICE_TYPE_' + availableInvoiceType.slug" /><br />
|
|
</p>
|
|
|
|
</fieldset><br /><br />
|
|
|
|
<!--
|
|
Pflichtangabe zu jeder Abrechnung, nicht nur zu "Sonstige Kosten": Erst dieser Text sagt, wofür
|
|
das Geld ausgegeben wurde, und füllt damit die Zweck-Spalte der EüR-Belegliste.
|
|
|
|
Die Schritte bauen aufeinander auf -- ohne Ausgabenart gäbe es kein passendes Beispiel für den
|
|
Einkauf, und ein Betrag ohne Zweck ließe sich später nicht mehr zuordnen.
|
|
-->
|
|
<template v-if="invoiceType !== null">
|
|
<fieldset>
|
|
<legend><span style="font-weight: bolder;">Was wurde eingekauft</span></legend>
|
|
<input
|
|
type="text"
|
|
class="width-full"
|
|
id="purchase_description"
|
|
name="purchase_description"
|
|
:placeholder="purchasePlaceholder"
|
|
v-model="otherText"
|
|
/>
|
|
</fieldset><br /><br />
|
|
</template>
|
|
|
|
<fieldset v-if="invoiceType !== null && otherText.trim() !== ''">
|
|
<legend><span style="font-weight: bolder;">Wie hoch ist der Betrag</span></legend>
|
|
<AmountInput v-model="amount" class="width-small" id="amount" name="amount" /> Euro
|
|
<info-icon></info-icon><br /><br />
|
|
|
|
<input
|
|
v-if="amount != ''"
|
|
class="mareike-button"
|
|
onclick="document.getElementById('receipt').click();"
|
|
type="button"
|
|
value="Beleg auswählen und fortfahren" />
|
|
<input accept="application/pdf" type="file" id="receipt" name="receipt" @change="handleFileChange"
|
|
style="display: none"/>
|
|
</fieldset><br />
|
|
|
|
|
|
|
|
<RefundData
|
|
v-if="finalStep"
|
|
:eventId="data.eventId"
|
|
:invoice-type="invoiceType"
|
|
:amount="amount"
|
|
:other-text="otherText"
|
|
:userName="data.userName"
|
|
:userEmail="data.userEmail"
|
|
:userTelephone="data.userTelephone"
|
|
:userAccountIban="data.userAccountIban"
|
|
:userAccountOwner="data.userAccountOwner"
|
|
:receipt="receipt"
|
|
travelReason=""
|
|
@close="finalStep = false"
|
|
/>
|
|
|
|
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|