Invoices can be uploaded

2026-02-11 15:40:06 +01:00
parent bccfc11687
commit ee7fc637f1
47 changed files with 1751 additions and 67 deletions
--- a/app/Domains/Invoice/Views/Partials/newInvoice/expense-accounting.vue
+++ b/app/Domains/Invoice/Views/Partials/newInvoice/expense-accounting.vue
@@ -0,0 +1,124 @@
+<script setup>
+
+import { ref, 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,
+    userIban: 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);
+});
+
+
+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>
+
+
+        <label for="invoice_type_other">
+            <input
+                type="text"
+                class="width-full"
+                name="kostengruppe_sonstiges"
+                placeholder="Sonstige"
+                for="invoice_type_other"
+                v-model="otherText"
+                @focus="invoiceType = 'other'"
+            />
+        </label>
+
+    </fieldset><br /><br />
+
+    <fieldset>
+        <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 != '' && invoiceType !== null"
+            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"
+        :userIban="data.userIban"
+        :userAccountOwner="data.userAccountOwner"
+        :receipt="receipt"
+        @close="finalStep = false"
+    />
+
+
+</template>
+
+<style scoped>
+
+</style>
+
+
+
+