Invoices can be uploaded

app/Domains/Invoice/Views/Partials/newInvoice/travel-expense-accounting.vue

@@ -0,0 +1,158 @@
+<script setup>
+import { ref, onMounted, reactive } from 'vue'
+import {checkFilesize} from "../../../../../../resources/js/components/InvoiceUploadChecks.js";
+import RefundData from "./refund-data.vue";
+import NumericInput from "../../../../../Views/Components/NumericInput.vue";
+import AmountInput from "../../../../../Views/Components/AmountInput.vue";
+import {useAjax} from "../../../../../../resources/js/components/ajaxHandler.js";
+
+const data = defineProps({
+  eventId: Number,
+  userName: String,
+  userEmail: String,
+  userTelephone: String,
+  userIban: String,
+  userAccountOwner: String,
+})
+
+const { request } = useAjax();
+const distanceAllowance = ref(null);
+const travelDirection = ref(null);
+const have_receipt = ref('')
+const havePassengers = ref(false);
+const materialTransportation = ref(false);
+const amount = ref(0.00);
+const invoiceType = ref(null);
+const otherText = ref('');
+const receipt = ref(null)
+const finalStep = ref(false)
+
+async function getDistanceAllowance() {
+    const tempData = await request('/api/v1/cost-unit/get-distance-allowance/' + data.eventId, {
+        method: "GET",
+    });
+
+    distanceAllowance.value = tempData.distanceAllowance;
+    have_receipt.value = 'no';
+}
+
+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;">Gib deine Reisesetrecke an</span></legend>
+    <input
+        type="text"
+        name="travel-direction"
+        v-model="travelDirection"
+    />
+  </fieldset><br /><br />
+
+  <fieldset v-if="travelDirection !== null">
+    <legend><span style="font-weight: bolder;">Bist du mit dem ÖPNV gefahren oder besitzt du einen Beleg</span></legend>
+    <input type="button" style="border-radius: 0; width: 100px;" @click="have_receipt='yes'" value="Ja" />
+    <input type="button" style="border-radius: 0; width: 100px;" @click="getDistanceAllowance" value="Nein" />
+  </fieldset>
+
+  <br /><br />
+
+  <fieldset v-if="have_receipt === 'yes'">
+    <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
+
+    <br /><br />
+    <input type="button"
+      v-if="amount !== null && have_receipt === 'yes' && amount != '0'"
+      value="Beleg auswählen und fortfahren"
+      onclick="document.getElementById('receipt').click();"
+       />
+    <input accept="application/pdf" type="file" id="receipt" name="receipt"     @change="handleFileChange"
+         style="display: none"/>
+
+    <RefundData
+      v-if="finalStep && have_receipt === 'yes'"
+      :eventId="data.eventId"
+      invoice-type="travelling"
+      :amount="amount"
+      :other-text="travelDirection"
+      :materialTransportation="materialTransportation"
+      :havePassengers="havePassengers"
+      :userName="data.userName"
+      :userEmail="data.userEmail"
+      :userTelephone="data.userTelephone"
+      :userIban="data.userIban"
+      :userAccountOwner="data.userAccountOwner"
+      :receipt="receipt"
+      @close="finalStep = false"
+    />
+  </fieldset>
+
+  <fieldset v-else-if="distanceAllowance != null">
+    <legend><span style="font-weight: bolder;">Reiseinformationen</span></legend>
+    Gesamtlänge des Reisewegs:
+    <NumericInput
+        class="width-small"
+        name="total_distance"
+        v-model="amount"
+     /> km<br />
+      <span style="font-weight: normal">({{ amount }} km x {{distanceAllowance.toFixed(2).replace('.', ',')}} Euro / km = <strong>{{ (amount * distanceAllowance).toFixed(2).replace('.', ',') }} Euro</strong>)</span>
+    <br /><br />
+
+      <input
+          type="checkbox"
+          name="havePassengers"
+          v-model="havePassengers"
+          id="havePassengers"
+      /> <label style="margin-bottom: 20px;" for="havePassengers">Ich habe Personen mitgenommen</label>
+      <br />
+
+      <input
+          type="checkbox"
+          name="materialTransportation"
+          v-model="materialTransportation"
+          id="materialTransportation"
+      /> <label style="margin-bottom: 20px;" for="materialTransportation">Ich habe Material transportiert</label>
+      <br /><br />
+
+    <input
+        v-if="amount !== null && have_receipt === 'no' && amount != '0'"
+        @click="finalStep = true;"
+        type="button"
+        value="Pauschalbetrag abrechnen" />
+
+    <RefundData
+        v-if="finalStep && have_receipt === 'no'"
+        :eventId="data.eventId"
+        invoice-type="travelling"
+        :amount="amount"
+        :other-text="travelDirection"
+        :materialTransportation="materialTransportation"
+        :havePassengers="havePassengers"
+        :userName="data.userName"
+        :userEmail="data.userEmail"
+        :userTelephone="data.userTelephone"
+        :userIban="data.userIban"
+        :userAccountOwner="data.userAccountOwner"
+        @close="finalStep = false"
+    />
+
+  </fieldset>
+
+</template>
+
+<style scoped>
+
+</style>
+
+
+
+