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

<script setup>
import {createApp, ref} from 'vue'
import LoadingModal from "../../../../Views/Components/LoadingModal.vue";
import { useAjax } from "../../../../../resources/js/components/ajaxHandler.js";
import CostUnitDetails from "./CostUnitDetails.vue";
import {toast} from "vue3-toastify";
import Treasurers from "./Treasurers.vue";

const props = defineProps({
  data: {
    type: [Array, Object],
    default: () => []
  },

  deep_jump_id: {
    type: Number,
    default: 0
   },

  deep_jump_id_sub: {
    type: Number,
    default: 0
  }
})

const showInvoiceList = ref(false)
const invoices  = ref(null)
const current_cost_unit = ref(null)
const showLoading = ref(false)
const show_invoice = ref(false)
const invoice = ref(null)

const show_cost_unit = ref(false)
const showTreasurers = ref(false)
const costUnit = ref(null)

const { data, loading, error, request, download } = useAjax()

async function costUnitDetails(costUnitId) {
    const data = await request('/api/v1/cost-unit/' + costUnitId + '/details', {
        method: "GET",
    });

    showLoading.value = false;

    if (data.status === 'success') {
        costUnit.value = data.costUnit
        show_cost_unit.value = true
    } else {
        toast.error(data.message);
    }
}

async function editTreasurers(costUnitId) {
    const data = await request('/api/v1/cost-unit/' + costUnitId + '/treasurers', {
        method: "GET",
    });

    showLoading.value = false;

    if (data.status === 'success') {
        costUnit.value = data.costUnit
        showTreasurers.value = true
    } else {
        toast.error(data.message);
    }
}

  function loadInvoices(cost_unit_id) {
    window.location.href = '/cost-unit/' + cost_unit_id;
  }

async function denyNewRequests(costUnitId) {
    changeCostUnitState(costUnitId, 'close');
}


  async function archiveCostUnit(costUnitId) {
      changeCostUnitState(costUnitId, 'archive');
  }


  async function allowNewRequests(costUnitId) {
      changeCostUnitState(costUnitId, 'open');
  }


async function changeCostUnitState(costUnitId, endPoint) {
    showLoading.value = true;
    const data = await request('/api/v1/cost-unit/' + costUnitId + '/' + endPoint, {
        method: "POST",
    });

    showLoading.value = false;
    if (data.status === 'success') {
        toast.success(data.message);
        document.getElementById('costUnitBox_' + costUnitId).style.display = 'none';
    } else {
        toast.error(data.message);
    }
}


async function exportPayouts(costUnitId) {
    showLoading.value = true;


    const response = await fetch('/api/v1/core/retrieve-global-data');
    const data = await response.json();
    const exportUrl = '/api/v1/cost-unit/' +  costUnitId + '/export-payouts';

    try {
        if (data.tenant.download_exports) {
            const response = await fetch(exportUrl, {
                headers: { "Content-Type": "application/json" },
            });

            if (!response.ok) throw new Error('Fehler beim Export (ZIP)');

            const blob = await response.blob();
            const downloadUrl = window.URL.createObjectURL(blob);
            console.log(response.headers.get("content-type"));
            const a = document.createElement("a");
            a.style.display = "none";
            a.href = downloadUrl;
            a.download = "Abrechnungen-Sippenstunden.zip";

            document.body.appendChild(a);
            a.click();

            setTimeout(() => {
                window.URL.revokeObjectURL(downloadUrl);
                document.body.removeChild(a);
            }, 100);
        } else {
          const response = await request(exportUrl, {
            method: "GET",
          });

        toast.success(response.message);
        }
        showLoading.value = false;

      } catch (err) {
        showLoading.value = false;
          toast.error('Beim Export der Abrechnungen ist ein Fehler aufgetreten.');
      }
}

</script>

<template>
    <div v-if="props.data.cost_units && props.data.cost_units.length > 0 && !showInvoiceList">
        <h2>{{ props.data.cost_unit_title }}</h2>
        <span v-for="costUnit in props.data.cost_units" class="costunit-list" :id="'costUnitBox_' + costUnit.id">
            <table style="width: 100%">
                <thead>
                  <tr><td colspan="5">
                      {{ costUnit.name }}
                  </td></tr>
                </thead>
                <tr>
                  <th>Gesamtbeitrag</th>
                  <td>{{ costUnit.totalAmount }}</td>
                  <th>Unbearbeitet</th>
                  <td>{{ costUnit.countNewInvoices }}</td>
                  <td rowspan="4" style="vertical-align: top;">
                      <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" @click="exportPayouts(costUnit.id)" value="Genehmigte Abrechnungen exportieren" style="margin-top: 10px;" />
                  </td>
                </tr>

                <tr>
                  <th>Spenden</th>
                  <td>{{ costUnit.donatedAmount }}</td>

                  <th>Nicht exportiert</th>
                  <td>{{ costUnit.countApprovedInvoices }}</td>
                </tr>

                <tr>
                  <td colspan="2"></td>

                  <th>Ohne Auszahlung</th>
                  <td colspan="2">{{ costUnit.countDonatedInvoices }}</td>
                </tr>

                <tr>
                  <td colspan="2"></td>

                  <th>Abgelehnt</th>
                  <td colspan="2">{{ costUnit.countDeniedInvoices }}</td>
                </tr>
                <tr>
                  <td colspan="5" style="width: 100%; padding-top: 20px;">
                      <strong @click="costUnitDetails(costUnit.id)" v-if="costUnit.allow_new" class="link">Details anpassen</strong> &nbsp;
                      <strong @click="editTreasurers(costUnit.id)" v-if="!costUnit.archived" class="link">Schatzis zuweisen</strong> &nbsp;
                      <strong @click="denyNewRequests(costUnit.id)" v-if="costUnit.allow_new" class="link" style="color: #ff0000">Neue Abrechnungen verbieten</strong> &nbsp;
                      <strong @click="allowNewRequests(costUnit.id)" v-if="!costUnit.allow_new && !costUnit.archived" class="link" style="color: #529a30">Neue Abrechnungen erlauben</strong> &nbsp;
                      <strong @click="archiveCostUnit(costUnit.id)" v-if="!costUnit.allow_new && !costUnit.archived" class="link" style="color: #ff0000">Veranstaltung archivieren</strong> &nbsp;
                  </td>
                </tr>
            </table>
        </span>

        <CostUnitDetails :data="costUnit" :showCostUnit="show_cost_unit" v-if="show_cost_unit" @close="show_cost_unit = false" />
        <Treasurers :data="costUnit" :showTreasurers="showTreasurers" v-if="showTreasurers" @closeTreasurers="showTreasurers = false" />
    </div>

   <div v-else-if="showInvoiceList">
    <invoices :data="invoices" :load_invoice_id="props.deep_jump_id_sub" :cost_unit_id="current_cost_unit" />


  </div>

  <div v-else>
      <strong style="width: 100%; text-align: center; display: block; margin-top: 20px;">
        Es gibt keine Kostenstellen in dieser Kategorie, für die du verantwortlich bist.
      </strong>
  </div>

    <LoadingModal :show="showLoading" />
</template>

<style scoped>
 .costunit-list {
   width: 96% !important;
 }
</style>