mareike/app/Domains/Invoice/Views/Partials/newInvoice/travel-expense-accounting.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 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,
  userAccountIban: String,
  userAccountOwner: String,
})

const { request } = useAjax();
const distanceAllowance = ref(null);
const travelDirection = ref(null);
const travelReason = ref(null);
const travelReasonNote = ref('');

const travelReasonCollection = reactive({
    travelReasons: []
});

const selectedTravelReason = computed(() =>
    travelReasonCollection.travelReasons.find((reason) => reason.value === travelReason.value)
);

/**
 * Ein Grund ist erst vollständig, wenn die Erläuterung steht, die er verlangt: "Anderer Grund" allein
 * sagt nichts aus. Die drei anderen Gründe bremsen den Ablauf dadurch nicht.
 */
const travelReasonComplete = computed(() =>
    selectedTravelReason.value !== undefined
    && (!selectedTravelReason.value.requiresNote || travelReasonNote.value.trim() !== '')
);

/**
 * Wer gereist ist, steht später als Zahlungsgrund in der Belegliste, auf der EüR und auf dem Beleg. Wer
 * den Beleg einreicht, war meist selbst dabei -- deshalb der eigene Name als Vorschlag. Ohne Login
 * bleibt das Feld leer, und es hält den Ablauf auch dann nicht auf: Ein Name ist eine Hilfe, keine
 * Bedingung.
 */
const travellers = ref(data.userName || '');
const have_receipt = ref('')
const amount = ref(0.00);
const invoiceType = ref(null);
const otherText = ref('');
const receipt = ref(null)
const finalStep = ref(false)

onMounted(async () => {
    const response = await fetch('/api/v1/core/retrieve-travel-reasons');
    travelReasonCollection.travelReasons = await response.json();
});

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;">Was war der Grund für deine Reise?</span></legend>

        <p v-for="availableReason in travelReasonCollection.travelReasons">
            <input
                name="travel-reason"
                type="radio"
                :value="availableReason.value"
                :id="'travel_reason_' + availableReason.value"
                v-model="travelReason"
            >
            <label :for="'travel_reason_' + availableReason.value">{{ availableReason.label }}</label><br />
        </p>

        <template v-if="selectedTravelReason?.requiresNote">
            <input
                type="text"
                class="width-full"
                name="travel-reason-note"
                placeholder="z. B. Abholung der Ausrüstung aus dem Lager"
                v-model="travelReasonNote"
            />
        </template>
    </fieldset><br /><br />

    <fieldset v-if="travelReasonComplete">
        <legend><span style="font-weight: bolder;">Welche Personen sind gereist?</span></legend>
        <input
            type="text"
            name="travellers"
            placeholder="z. B. Mika, Kim und Alex"
            v-model="travellers"
        />
    </fieldset><br /><br />

  <fieldset v-if="travelReasonComplete">
    <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"
      :userName="data.userName"
      :userEmail="data.userEmail"
      :userTelephone="data.userTelephone"
      :userAccountIban="data.userAccountIban"
      :userAccountOwner="data.userAccountOwner"
      :receipt="receipt"
      :travelReason="travelReason"
      :travelReasonNote="travelReasonNote"
      :travellers="travellers"
      @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
        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"
        :userName="data.userName"
        :userEmail="data.userEmail"
        :userTelephone="data.userTelephone"
        :userAccountIban="data.userAccountIban"
        :userAccountOwner="data.userAccountOwner"
        :travelReason="travelReason"
        :travelReasonNote="travelReasonNote"
        :travellers="travellers"
        @close="finalStep = false"
    />

  </fieldset>

</template>

<style scoped>

</style>