Managing own invoices

app/Domains/Invoice/Views/Partials/myInvoiceDetails/ListInvoices.vue

@@ -0,0 +1,80 @@
+<script setup>
+    import Icon from "../../../../../Views/Components/Icon.vue";
+    import InvoiceDetails from "./InvoiceDetails.vue";
+    import { useAjax } from "../../../../../../resources/js/components/ajaxHandler.js";
+    import {ref} from "vue";
+
+    const props = defineProps({
+        data: Object
+    })
+
+    const { request } = useAjax()
+    const invoice = ref(null)
+    const show_invoice = ref(false)
+    const localData = ref(props.data)
+
+    async function openInvoiceDetails(invoiceId) {
+        const url = '/api/v1/invoice/details/' + invoiceId
+
+        try {
+            const response = await fetch(url, { method: 'GET' })
+
+            const result = await response.json()
+            invoice.value = result.invoice
+            show_invoice.value = true
+        } catch (err) {
+            console.error('Error fetching invoices:', err)
+        }
+    }
+
+    async function reload() {
+        const url = "/api/v1/invoice/my-invoices/" + props.data.endpoint
+        try {
+            const response = await fetch(url, { method: 'GET' })
+            if (!response.ok) throw new Error('Fehler beim Laden')
+
+            const result = await response.json()
+            localData.value = result
+        } catch (err) {
+            console.error('Error fetching invoices:', err)
+        }
+    }
+
+</script>
+
+<template>
+    <table v-if="localData.invoices.length > 0" class="invoice-list-table">
+        <tr>
+            <td colspan="6">{{props.data.title}}</td>
+        </tr>
+
+        <tr v-for="invoice in localData.invoices" :id="'invoice_' + invoice.id">
+            <td>{{invoice.invoiceNumber}}</td>
+            <td>{{invoice.invoiceType}}</td>
+            <td>
+                {{invoice.amount}}
+            </td>
+            <td style="width: 150px;">
+                <Icon v-if="invoice.donation" name="hand-holding-dollar" style="color: #ffffff; background-color: green" />
+                <Icon v-if="invoice.alreadyPaid" name="comments-dollar" style="color: #ffffff; background-color: green" />
+            </td>
+            <td>
+                {{invoice.contactName}}<br />
+                <label v-if="invoice.contactEmail !== '--'">{{invoice.contactEmail}}<br /></label>
+                <label v-if="invoice.contactPhone !== '--'">{{invoice.contactPhone}}<br /></label>
+            </td>
+
+            <td>
+                <input type="button" value="Abrechnung Anzeigen" @click="openInvoiceDetails(invoice.id)" />
+            </td>
+        </tr>
+    </table>
+    <p v-else>Es sind keine Abrechnungen in dieser Kategorie vorhanden.</p>
+
+    <InvoiceDetails :data="invoice" :show-invoice="show_invoice" v-if="show_invoice" @close="show_invoice = false; reload()" />
+
+</template>
+
+<style scoped>
+
+</style>