Invoices can be uploaded

app/Domains/Invoice/Views/NewInvoice.vue

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