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

247 lines
7.8 KiB
Vue

<script setup>
import {createApp, ref} from 'vue'
/*import {
_mareike_download_as_zip,
_mareike_use_webdav
} from "../../../assets/javascripts/library";*/
//import LoadingModal from "../../../assets/components/LoadingModal.vue";
//import Invoices from '../invoices/index.vue'
import { useAjax } from "../../../../../resources/js/components/ajaxHandler.js";
import CostUnitDetails from "./CostUnitDetails.vue";
import {toast} from "vue3-toastify";
import Treasurers from "./Treasurers.vue";
//import CostUnitDetails from "./CostUnitDetails.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()
if (props.deep_jump_id > 0) {
// open_invoice_list(props.deep_jump_id, 'new', props.deep_jump_id_sub)
}
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 export_payouts(cost_unit_id) {
showLoading.value = true;
try {
if (_mareike_download_as_zip()) {
const response = await fetch("/wp-json/mareike/costunits/export-payouts", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
mareike_nonce: _mareike_nonce(),
costunit: cost_unit_id,
}),
});
if (!response.ok) throw new Error('Fehler beim Export (ZIP)');
const blob = await response.blob();
const downloadUrl = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = downloadUrl;
a.download = `payouts-${cost_unit_id}.zip`;
document.body.appendChild(a);
a.click();
a.remove();
window.URL.revokeObjectURL(downloadUrl);
} else {
await request("/wp-json/mareike/costunits/export-payouts", {
method: "POST",
body: {
mareike_nonce: _mareike_nonce(),
costunit: cost_unit_id,
}
});
}
showLoading.value = false;
toast.success('Die Abrechnungen wurden exportiert.');
} 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" 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" />
<LoadingModal :show="showLoading" v-if="_mareike_use_webdav()" message="Die PDF-Dateien werden asynchron erzeugt, diese sollten in 10 Minuten auf dem Webdav-Server liegen', 'mareike')" />
<LoadingModal :show="showLoading" v-else message='Die Abrechnungen werden exportiert, bitte warten.' />
</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>
</template>
<style scoped>
.costunit-list {
width: 96% !important;
}
</style>