Operation processes on invoices

app/Domains/CostUnit/Views/Partials/ListCostUnits.vue

@@ -46,7 +46,7 @@ const costUnit = ref(null)
 const { data, loading, error, request, download } = useAjax()
 
 if (props.deep_jump_id > 0) {
-  open_invoice_list(props.deep_jump_id, 'new', props.deep_jump_id_sub)
+//  open_invoice_list(props.deep_jump_id, 'new', props.deep_jump_id_sub)
 }
 
 async function costUnitDetails(costUnitId) {
@@ -79,17 +79,8 @@ async function editTreasurers(costUnitId) {
     }
 }
 
-  async function open_invoice_list(cost_unit_id, endpoint, invoice_id) {
-    const url = '' // `/wp-json/mareike/invoices/list-${endpoint}?invoice_id=${invoice_id}&cost_unit_id=${cost_unit_id}
-    try {
-      const response = await fetch(url, { method: 'GET' })
-      if (!response.ok) throw new Error('Fehler beim Laden')
-      invoices.value = await response.json()
-      current_cost_unit.value = cost_unit_id
-      invoice_id = invoice_id
-      showInvoiceList.value = true
-    } catch (err) {
-    }
+  function loadInvoices(cost_unit_id) {
+    window.location.href = '/cost-unit/' + cost_unit_id;
   }
 
 async function denyNewRequests(costUnitId) {
@@ -182,7 +173,7 @@ async function export_payouts(cost_unit_id) {
                   <th>Unbearbeitet</th>
                   <td>{{ costUnit.countNewInvoices }}</td>
                   <td rowspan="4" style="vertical-align: top;">
-                      <input v-if="!costUnit.archived" type="button" value="Abrechnungen bearbeiten" />
+                      <input v-if="!costUnit.archived" type="button" value="Abrechnungen bearbeiten" @click="loadInvoices(costUnit.id)" />
                       <input v-else type="button" value="Abrechnungen einsehen" />
                       <br />
                       <input v-if="!costUnit.archived" type="button" value="Genehmigte Abrechnungen exportieren" style="margin-top: 10px;" />

app/Domains/CostUnit/Views/Partials/ListInvoices.vue

@@ -0,0 +1,80 @@
+<script setup>
+    import Icon from "../../../../Views/Components/Icon.vue";
+    import InvoiceDetails from "../../../Invoice/Views/Partials/invoiceDetails/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/cost-unit/" + props.data.costUnit.id + "/invoice-list/" + 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.costUnit.name}}</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>