Operation processes on invoices

app/Domains/Invoice/Views/Partials/invoiceDetails/EditInvoice.vue

@@ -0,0 +1,116 @@
+<script setup>
+import PdfViewer from "../../../../../Views/Components/PdfViewer.vue";
+import DistanceAllowance from "./DistanceAllowance.vue";
+import {onMounted, reactive} from 'vue';
+
+const props = defineProps({
+    newInvoice: {
+        type: Object,
+        required: true
+    },
+    costUnits: {
+        type: Object,
+        required: true
+    }
+})
+
+const emit = defineEmits(['submit', 'cancel'])
+
+const formData = reactive({
+    type_internal: props.newInvoice.internalType || '',
+    cost_unit: props.newInvoice.costUnitId || '',
+    amount: props.newInvoice.amountPlain || '',
+    reason_of_correction: '',
+})
+
+const submitForm = () => {
+    emit('submit', formData)
+}
+
+
+const invoiceTypeCollection = reactive({
+    invoiceTypes: {}
+});
+
+
+onMounted(async () => {
+    const response = await fetch('/api/v1/core/retrieve-invoice-types-all');
+    const data = await response.json();
+    Object.assign(invoiceTypeCollection, data);
+});
+
+
+</script>
+
+<template>
+    <form @submit.prevent="submitForm">
+        <table style="width: 100%; font-family: sans-serif;">
+            <tr>
+                <td style="width: 150px;">Rechnungstyp:</td>
+                <td style="width: 450px;">
+                    <select v-model="formData.type_internal" class="width-half-full">
+                        <option v-for="invoiceType in invoiceTypeCollection.invoiceTypes" :value="invoiceType.slug">{{invoiceType.name}}</option>
+                    </select>
+                </td>
+            </tr>
+
+            <tr>
+                <td>Kostenstelle:</td>
+                <td>
+                    <select v-model="formData.cost_unit" class="width-half-full">
+                        <option v-for="costUnit in props.costUnits" :value="costUnit.id">{{costUnit.name}}</option>
+                    </select>
+                </td>
+            </tr>
+
+            <tr>
+                <td>Gesamtbetrag:</td>
+                <td>
+                    <input type="text" v-model="formData.amount" class="width-small" /> Euro
+                </td>
+            </tr>
+
+            <tr>
+                <td>Grund der Korrektur:</td>
+                <td>
+                    <input type="text" v-model="formData.reason_of_correction" class="width-half-full" />
+                </td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <input type="checkbox" v-model="formData.duplicate" id="mareike_correct_invoice_duplicate" />
+                    <label for="mareike_correct_invoice_duplicate">Kopie zur Weiterbearbeitung erstellen</label>
+                </td>
+            </tr>
+
+            <tr>
+                <td colspan="2">
+                    <input type="submit" value="Speichern und freigeben" class="button mareike-accept-button" />
+                </td>
+            </tr>
+        </table>
+    </form>
+    <br /><br />
+
+    <PdfViewer :url="'/api/v1/invoice/showReceipt/' + props.newInvoice.id" v-if="props.newInvoice.documentFilename !== null" />
+    <DistanceAllowance v-else :invoice="props.newInvoice" />
+</template>
+
+<style>
+.width-full {
+    width: 100%;
+}
+
+.width-almost-full {
+    width: calc(100% - 75px);
+}
+
+.width-half-full {
+    width: 50%;
+}
+
+.width-small {
+    width: 100px;
+}
+</style>