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

<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>