Invoices can be uploaded
This commit is contained in:
@@ -1,29 +0,0 @@
|
||||
<script setup>
|
||||
import AppLayout from '../../../../resources/js/layouts/AppLayout.vue'
|
||||
|
||||
const props = defineProps({
|
||||
navbar: Object,
|
||||
tenant: String,
|
||||
user: Object,
|
||||
currentPath: String,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title='Neue Abrechnung' :user="props.user" :navbar="props.navbar" :tenant="props.tenant" :currentPath="props.currentPath">
|
||||
<!-- Alles hier wird in den Slot von AppLayout eingefügt -->
|
||||
<h2>Dashboard Content</h2>
|
||||
<p>Test 1!
|
||||
Hier wird mal eine Rechnung erstellt.
|
||||
Wenn es geht oder auch nicht</p>
|
||||
{{props.tenant}}
|
||||
|
||||
<button @click="$toast.success('Hallo vom Dashboard!')">Test Toaster</button>
|
||||
<button @click="$toast.error('Soe sieht ein Fehler aus')">Error Toaster</button>
|
||||
</AppLayout>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
79
app/Domains/Invoice/Views/NewInvoice.vue
Normal file
79
app/Domains/Invoice/Views/NewInvoice.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<script setup>
|
||||
import AppLayout from '../../../../resources/js/layouts/AppLayout.vue'
|
||||
import TextResource from "../../../Views/Components/TextResource.vue";
|
||||
import Modal from "../../../Views/Components/Modal.vue";
|
||||
import {onMounted, reactive, ref} from "vue";
|
||||
import ExpenseAccounting from "./Partials/newInvoice/expense-accounting.vue";
|
||||
import TravelExpenseAccounting from "./Partials/newInvoice/travel-expense-accounting.vue";
|
||||
|
||||
const props = defineProps({
|
||||
currentEvents: Object,
|
||||
runningJobs: Object,
|
||||
userId: Number,
|
||||
userName: String,
|
||||
userEmail: String,
|
||||
userTelephone: String,
|
||||
userIban: String,
|
||||
userAccountOwner: String,
|
||||
})
|
||||
|
||||
const isOpen = ref(false)
|
||||
const eventId = ref(0);
|
||||
const invoiceType = ref('');
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title='Neue Abrechnung'>
|
||||
<div class="invoice-main-flexbox" v-if="eventId === 0">
|
||||
<div
|
||||
class="invoice-type-layer"
|
||||
@click="isOpen = true;invoiceType='expense-accounting'"
|
||||
>
|
||||
<TextResource textName="NEW_COMMON_COST_EXPENSE_DESCRIPTION" />
|
||||
</div>
|
||||
|
||||
|
||||
<div
|
||||
class="invoice-type-layer"
|
||||
@click="isOpen = true;invoiceType='travel-expense-accounting'"
|
||||
>
|
||||
<TextResource textName="NEW_TRAVEL_COST_EXPENSE_DESCRIPTION" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ExpenseAccounting v-if="invoiceType === 'expense-accounting' && eventId !== 0"
|
||||
:eventId="eventId"
|
||||
:userName="props.userName"
|
||||
:userEmail="props.userEmail"
|
||||
:userTelephone="props.userTelephone"
|
||||
:userIban="props.userIban"
|
||||
:userAccountOwner="props.userAccountOwner"
|
||||
:userId="props.userId"
|
||||
/>
|
||||
|
||||
<TravelExpenseAccounting v-else-if="invoiceType === 'travel-expense-accounting' && eventId !== 0"
|
||||
:eventId="eventId"
|
||||
:userName="props.userName"
|
||||
:userEmail="props.userEmail"
|
||||
:userTelephone="props.userTelephone"
|
||||
:userIban="props.userIban"
|
||||
:userAccountOwner="props.userAccountOwner"
|
||||
:userId="props.userId"
|
||||
/>
|
||||
|
||||
<Modal :show="isOpen" title="Veranstaltung auswählen" @close="isOpen = false">
|
||||
<select v-model="eventId" @change="isOpen=false" style="width: 100%">
|
||||
<option value="0" disabled>Bitte auswählen</option>
|
||||
<optgroup label="Laufende Tätigkeiten">
|
||||
<option :value="event.id" v-for="event in props.runningJobs">{{ event.name }}</option>
|
||||
</optgroup>
|
||||
|
||||
<optgroup label="Veranstaltungen">
|
||||
<option :value="event.id" v-for="event in props.currentEvents">{{ event.name }}</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</Modal>
|
||||
</AppLayout>
|
||||
|
||||
</template>
|
||||
@@ -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>
|
||||
|
||||
|
||||
|
||||
|
||||
157
app/Domains/Invoice/Views/Partials/newInvoice/refund-data.vue
Normal file
157
app/Domains/Invoice/Views/Partials/newInvoice/refund-data.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import Modal from "../../../../../Views/Components/Modal.vue";
|
||||
import IbanInput from "../../../../../Views/Components/IbanInput.vue";
|
||||
import {useAjax} from "../../../../../../resources/js/components/ajaxHandler.js";
|
||||
import TextResource from "../../../../../Views/Components/TextResource.vue";
|
||||
import {invoiceCheckContactName} from "../../../../../../resources/js/components/InvoiceUploadChecks.js";
|
||||
import {toast} from "vue3-toastify";
|
||||
|
||||
const { request } = useAjax();
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
eventId: Number,
|
||||
invoiceType: String,
|
||||
amount: [String, Number],
|
||||
otherText: String,
|
||||
receipt: File,
|
||||
userName: String,
|
||||
userEmail: String,
|
||||
userTelephone: String,
|
||||
userAccountOwner: String,
|
||||
userIban: String,
|
||||
havePassengers: Number,
|
||||
materialTransportation: Boolean,
|
||||
})
|
||||
|
||||
console.log(props.receipt)
|
||||
|
||||
const finalStep = ref(true)
|
||||
const userName = ref(props.userName)
|
||||
const userEmail = ref(props.userEmail)
|
||||
const userTelephone = ref(props.userTelephone)
|
||||
const userIban = ref(props.userIban)
|
||||
const userAccountOwner = ref(props.userAccountOwner)
|
||||
const sending = ref(false)
|
||||
const success = ref(false)
|
||||
const decision = ref('')
|
||||
const errorMsg = ref('')
|
||||
const confirmation = ref(null)
|
||||
|
||||
|
||||
async function sendData() {
|
||||
if (!userName.value) return
|
||||
|
||||
sending.value = true
|
||||
errorMsg.value = ''
|
||||
success.value = false
|
||||
|
||||
const formData = new FormData()
|
||||
|
||||
formData.append('name', userName.value)
|
||||
formData.append('email', userEmail.value)
|
||||
formData.append('telephone', userTelephone.value)
|
||||
formData.append('amount', props.amount)
|
||||
formData.append('otherText', props.otherText)
|
||||
formData.append('decision', decision.value)
|
||||
formData.append('accountOwner', userAccountOwner.value)
|
||||
formData.append('accountIban', userIban.value)
|
||||
formData.append('havePassengers', props.havePassengers ? 1 : 0)
|
||||
formData.append('materialTransportation', props.materialTransportation ? 1 : 0)
|
||||
|
||||
if (props.receipt) {
|
||||
formData.append('receipt', props.receipt)
|
||||
}
|
||||
|
||||
|
||||
try {
|
||||
const response = await request('/api/v1/invoice/new/' + props.eventId + '/' + props.invoiceType, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
|
||||
if (response.status === 'success') {
|
||||
window.location.href = '/';
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error(result.message);
|
||||
} finally {
|
||||
sending.value = false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :show="finalStep" title='Bitte gib deine Daten ein' @close="emit('close')">
|
||||
<label>
|
||||
<strong>Dein Name Name (kein Pfadiname):</strong>
|
||||
</label><br />
|
||||
<input
|
||||
type="text"
|
||||
@keyup="invoiceCheckContactName();"
|
||||
id="contact_name"
|
||||
name="contact_name" v-model="userName"
|
||||
style="font-size: 14pt; width: 550px;" /><br /><br />
|
||||
|
||||
<label>
|
||||
<strong>E-Mail-Adresse (Für Rückfragen):</strong>
|
||||
</label><br />
|
||||
<input
|
||||
type="email"
|
||||
name="contact_email"
|
||||
v-model="userEmail"
|
||||
style="font-size: 14pt; width: 550px;" /><br /><br />
|
||||
|
||||
<label>
|
||||
<strong>Telefonnummer (für Rückfragen):</strong>
|
||||
</label><br />
|
||||
<input
|
||||
type="text"
|
||||
id="contact_telephone"
|
||||
name="contact_telephone" v-model="userTelephone"
|
||||
style="font-size: 14pt; width: 550px;" /><br /><br />
|
||||
|
||||
<span id="decision" v-if="userName !== '' && decision === ''">
|
||||
<label><br />
|
||||
<strong>Möchtest du den Betrag spenden?</strong>
|
||||
</label><br />
|
||||
|
||||
<input type="button" style="border-radius: 0; width: 100px;" @click="decision='donation'" value="Ja" />
|
||||
<input type="button" style="border-radius: 0; width: 100px;" @click="decision='payout'" value="Nein" />
|
||||
</span>
|
||||
|
||||
<span id="confirm_donation" v-if="decision === 'donation'">
|
||||
<input type="radio" name="confirmation_radio" value="donation" id="confirmation_radio_donation" v-model="confirmation">
|
||||
<TextResource belongsTo="confirmation_radio_donation" textName="CONFIRMATION_DONATE" />
|
||||
<br /><br />
|
||||
<input type="button" class="mareike-button" v-if="confirmation !== null && !sending" @click="sendData" value="Beleg einreichen" />
|
||||
</span>
|
||||
|
||||
<span id="confirm_payment" v-if="decision === 'payout'">
|
||||
<label>
|
||||
<strong>Konto-Inhaber*in:</strong></label><br />
|
||||
<input type="text" name="account_owner" id="account_owner" v-model="userAccountOwner" style="font-size: 14pt; width: 550px;" /><br /><br />
|
||||
|
||||
<label>
|
||||
<strong>IBAN:</strong>
|
||||
</label><br />
|
||||
<IbanInput id="account_iban" name="account_iban" v-model="userIban" style="font-size: 14pt; width: 550px;" /><br /><br />
|
||||
|
||||
<span v-if="userAccountOwner != '' && userIban && userIban.length === 27"><br />
|
||||
<input type="radio" name="confirmation_radio" value="payment" id="confirmation_radio_payment" v-model="confirmation">
|
||||
<TextResource belongsTo="confirmation_radio_payment" textName="CONFIRMATION_PAYMENT" /><br /><br />
|
||||
<input type="button" v-if="confirmation !== null && !sending" @click="sendData" value="Beleg einreichen" />
|
||||
</span>
|
||||
</span>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* optional styling */
|
||||
</style>
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user