Cost units can be edited

app/Domains/CostUnit/Views/Create.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { reactive, inject } from 'vue';
+import AppLayout from '../../../../resources/js/layouts/AppLayout.vue';
+import AmountInput from "../../../Views/Components/AmountInput.vue";
+import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";
+import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
+import {toast} from "vue3-toastify";
+
+const props = defineProps({
+        activeUsers: Object,
+    }
+)
+
+const { request } = useAjax();
+
+const formData = reactive({
+    cost_unit_name: '',
+    distance_allowance: '0,25',
+
+    emailAddress: '',
+    mailOnNew: true
+});
+
+async function save() {
+    const data = await request("/api/v1/cost-unit/create-running-job", {
+        method: "POST",
+        body: {
+            cost_unit_name: formData.cost_unit_name,
+            distance_allowance: formData.distance_allowance,
+            mailOnNew: formData.mailOnNew
+        }
+    });
+
+    window.location.href = '/cost-unit/list';
+}
+
+</script>
+
+<template>
+    <AppLayout title="Laufende Tätigkeit hinzufügen">
+        <form method="POST" action="/api/v1/cost-unit/create-running-job"  @submit.prevent="save">
+            <input type="hidden" name="_token" :value="csrfToken" />
+
+            <shadowed-box style="width: 90%; margin: 20px auto; padding: 20px;">
+                <p>
+                    Über dieses Formular können laufende Tätigkeiten angelegt werden.<br />
+                    Eine Kostenstelle für eine Veranstaltung wird automatisch erstellt, sobald die Veranstaltung angelegt wurde.
+                </p>
+                <table style="margin-top: 40px; width: 100%">
+                    <tr>
+                        <th class="width-medium pr-20">Name der laufenden Tätigkeit</th>
+                        <td><input type="text" v-model="formData.cost_unit_name" class="width-half-full" /></td>
+                    </tr>
+                    <tr>
+                        <th class="pr-20">Kilometerpauschale</th>
+                        <td>
+                            <AmountInput v-model="formData.distance_allowance" class="width-small" /> Euro / Kilometer
+                        </td>
+                    </tr>
+                    <tr>
+                        <td colspan="2">
+                            <label style="display:flex;align-items:center;cursor:pointer;">
+                                <input type="checkbox" v-model="formData.mailOnNew" style="margin-right:8px;cursor:pointer;" />
+                                <span>E-Mail-Benachrichtigung bei neuen Abrechnungen</span>
+                            </label>
+                        </td>
+                    </tr>
+
+                    <tr>
+                        <td colspan="2">
+                            <input type="submit" value="Speichern" />
+                        </td>
+                    </tr>
+                </table>
+            </shadowed-box>
+        </form>
+    </AppLayout>
+</template>

app/Domains/CostUnit/Views/Edit.vue

@@ -0,0 +1,83 @@
+<script setup>
+import { reactive, inject } from 'vue';
+import AppLayout from '../../../../resources/js/layouts/AppLayout.vue';
+import AmountInput from "../../../Views/Components/AmountInput.vue";
+import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";
+import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
+
+const props = defineProps({
+        activeUsers: Object,
+    }
+)
+
+const { request } = useAjax();
+
+const formData = reactive({
+    cost_unit_name: '',
+    distance_allowance: '0,25',
+
+    emailAddress: '',
+    mailOnNew: true
+});
+
+async function save() {
+    const data = await request("/wp-json/mareike/costunits/create-new-cost-unit", {
+        method: "POST",
+        body: {
+            mareike_nonce: _mareike_nonce(),
+            cost_unit_name: formData.cost_unit_name,
+            distance_allowance: formData.distance_allowance,
+            email_address: formData.emailAddress,
+            mailOnNew: formData.mailOnNew
+        }
+    });
+
+    toast('Die laufende Tätigkeit wurde erfolgreich angelegt.', { type: 'success' });
+    window.location.href = '/cost-units';
+}
+</script>
+
+<template>
+    <AppLayout title="Laufende Tätigkeit hinzufügen">
+        <shadowed-box style="width: 90%; margin: 20px auto; padding: 20px;">
+            <p>
+                Über dieses Formular können laufende Tätigkeiten angelegt werden.<br />
+                Eine Kostenstelle für eine Veranstaltung wird automatisch erstellt, sobald die Veranstaltung angelegt wurde.
+            </p>
+            <table style="margin-top: 40px; width: 100%">
+                <tr>
+                    <th class="width-medium pr-20">Name der laufenden Tätigkeit</th>
+                    <td><input type="text" v-model="formData.cost_unit_name" class="width-half-full" /></td>
+                </tr>
+                <tr>
+                    <th class="pr-20">Kilometerpauschale</th>
+                    <td>
+                        <AmountInput v-model="formData.distance_allowance" class="width-small" /> Euro / Kilometer
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <label style="display:flex;align-items:center;cursor:pointer;">
+                            <input type="checkbox" v-model="formData.mailOnNew" style="margin-right:8px;cursor:pointer;" />
+                            <span>E-Mail-Benachrichtigung bei neuen Abrechnungen</span>
+                        </label>
+                        <hr />
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <span v-for="user in props.activeUsers">
+                            <input type="checkbox" :id="'user_' + user.id" />
+                            <label :for="'user_' + user.id">{{user.fullname}} ({{user.localGroup}})</label>
+                        </span>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <input type="button" @click="save" value="Speichern" class="mareike-button button-small button-block" />
+                    </td>
+                </tr>
+            </table>
+        </shadowed-box>
+    </AppLayout>
+</template>

app/Domains/CostUnit/Views/List.vue

@@ -0,0 +1,84 @@
+<script setup>
+import {reactive, inject, onMounted} from 'vue';
+import AppLayout from '../../../../resources/js/layouts/AppLayout.vue';
+import { useAjax } from "../../../../resources/js/components/ajaxHandler.js";
+import ShadowedBox from "../../../Views/Components/ShadowedBox.vue";
+import TabbedPage from "../../../Views/Components/TabbedPage.vue";
+import {toast} from "vue3-toastify";
+
+
+import ListCostUnits from "./Partials/ListCostUnits.vue";
+
+
+const props = defineProps({
+    message: String,
+
+    data: {
+        type: [Array, Object],
+        default: () => []
+    },
+    cost_unit_id: {
+        type: Number,
+        default: 0
+    },
+
+    invoice_id: {
+        type: Number,
+        default: 0
+    }
+
+
+})
+
+// Prüfen, ob ein ?id= Parameter in der URL übergeben wurde
+const urlParams = new URLSearchParams(window.location.search)
+const initialCostUnitId = props.cost_unit_id
+const initialInvoiceId = props.invoice_id
+
+const tabs = [
+    {
+        title: 'Aktuelle Veranstaltungen',
+        component: ListCostUnits,
+        endpoint: "/api/v1/cost-unit/open/current-events",
+        deep_jump_id: initialCostUnitId,
+        deep_jump_id_sub: initialInvoiceId,
+
+    },
+    {
+        title: 'Laufende Tätigkeiten',
+        component: ListCostUnits,
+        endpoint: "/api/v1/cost-unit/open/current-running-jobs",
+        deep_jump_id: initialCostUnitId,
+        deep_jump_id_sub: initialInvoiceId,
+    },
+    {
+        title: 'Geschlossene Kostenstellen',
+        component: ListCostUnits,
+        endpoint: "/api/v1/cost-unit/open/closed-cost-units",
+        deep_jump_id: initialCostUnitId,
+        deep_jump_id_sub: initialInvoiceId,
+    },
+    {
+        title: 'Archivierte Kostenstellen',
+        component: ListCostUnits,
+        endpoint: "/api/v1/cost-unit/open/archived-cost-units",
+        deep_jump_id: initialCostUnitId,
+        deep_jump_id_sub: initialInvoiceId,
+    },
+]
+
+onMounted(() => {
+    if (undefined !== props.message) {
+        toast.success(props.message)
+    }
+})
+</script>
+
+<template>
+    <AppLayout title="Kostenstellen">
+        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
+            <tabbed-page :tabs="tabs" :initial-tab-id="initialCostUnitId" :initial-sub-tab-id="initialInvoiceId" />
+
+        </shadowed-box>
+    </AppLayout>
+</template>

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

@@ -0,0 +1,90 @@
+<script setup>
+
+import {reactive, ref} from "vue";
+import Modal from "../../../../Views/Components/Modal.vue";
+import { useAjax } from "../../../../../resources/js/components/ajaxHandler.js";
+import AmountInput from "../../../../Views/Components/AmountInput.vue";
+import {toast} from "vue3-toastify";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }, showCostUnit: Boolean
+})
+
+const mail_on_new = ref(Boolean(Number(props.data.mail_on_new)))
+
+const emit = defineEmits(['close'])
+
+const { request } = useAjax()
+function close() {
+  emit('close')
+}
+
+
+const formData = reactive({
+    billingDeadline: props.data.billingDeadline,
+    mailOnNew: mail_on_new.value,
+    distanceAllowance: props.data.distanceAllowanceSmall,
+});
+
+async function updateCostUnit() {
+    const data = await request('/api/v1/cost-unit/' + props.data.id + '/details', {
+        method: "POST",
+        body: {
+          formData
+        }
+    });
+
+    close();
+    if (data.status === 'success') {
+        toast.success(data.message);
+    } else {
+        toast.error(data.message);
+    }
+}
+
+</script>
+
+<template>
+
+  <Modal
+      :show="showCostUnit"
+      title="Details anpassen"
+      @close="emit('close')"
+  >
+      Kilometerpauschale:
+        <amount-input v-model="formData.distanceAllowance" class="width-small" /> Euro / km
+        <br /><br />
+
+        <span v-if="props.data.type !== 'running_job'">
+            Abrechnungsschluss am:
+            <input type="date" style="margin-top: 10px;" id="autoclose_date" v-model="formData.billingDeadline" />
+            <br /><br />
+        </span>
+
+        <div style="margin-top: 10px;">
+          <label style="display: flex; align-items: center; cursor: pointer;">
+            <input
+              type="checkbox"
+              id="mail_on_new"
+              v-model="formData.mailOnNew"
+              style="margin-right: 8px; cursor: pointer;"
+            />
+            <span>E-Mail-Benachrichtigung bei neuen Abrechnungen</span>
+          </label>
+        </div>
+
+    <br />
+    <input type="button" value="Speichern" @click="updateCostUnit" />
+  </Modal>
+
+</template>
+
+<style>
+.mareike-save-button {
+  background-color: #2271b1 !important;
+  color: #ffffff !important;
+}
+</style>

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

@@ -0,0 +1,255 @@
+<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);
+    }
+}
+
+  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) {
+    }
+  }
+
+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" />
+                      <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>

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

@@ -0,0 +1,99 @@
+<script setup>
+
+import {onMounted, reactive, ref} from "vue";
+import Modal from "../../../../Views/Components/Modal.vue";
+import { useAjax } from "../../../../../resources/js/components/ajaxHandler.js";
+import AmountInput from "../../../../Views/Components/AmountInput.vue";
+import {toast} from "vue3-toastify";
+
+const selectedTreasurers = ref([])
+
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({})
+  }, showTreasurers: Boolean
+})
+
+const commonProps = reactive({
+    activeUsers: [],
+});
+
+
+
+onMounted(async () => {
+    const response = await fetch('/api/v1/retreive-global-data');
+    const data = await response.json();
+    Object.assign(commonProps, data);
+
+    selectedTreasurers.value = props.data.treasurers?.map(t => t.id) ?? []
+});
+
+
+
+const mail_on_new = ref(Boolean(Number(props.data.mail_on_new)))
+
+const emit = defineEmits(['closeTreasurers'])
+
+const { request } = useAjax()
+function closeTreasurers() {
+  emit('closeTreasurers')
+}
+
+
+const formData = reactive({
+    billingDeadline: props.data.billingDeadline,
+    mailOnNew: mail_on_new.value,
+    distanceAllowance: props.data.distanceAllowanceSmall,
+});
+
+async function updateCostUnit() {
+    const data = await request('/api/v1/cost-unit/' + props.data.id + '/treasurers', {
+        method: "POST",
+        body: {
+            selectedTreasurers: selectedTreasurers.value,
+        }
+    });
+
+    closeTreasurers();
+    if (data.status === 'success') {
+        toast.success(data.message);
+    } else {
+        toast.error(data.message);
+    }
+}
+
+console.log(props.data.treasurers)
+</script>
+
+<template>
+
+  <Modal
+      :show="showTreasurers"
+      title="Schatzis zuweisen"
+      @close="emit('closeTreasurers')"
+  >
+      Zuständige Schatzis:
+
+      <p v-for="user in commonProps.activeUsers">
+          <input
+              type="checkbox"
+              :id="'user_' + user.id"
+              :value="user.id"
+              v-model="selectedTreasurers"
+          />
+          <label :for="'user_' + user.id">{{user.fullname}}</label>
+        </p>
+
+    <input type="button" value="Speichern" @click="updateCostUnit" />
+  </Modal>
+
+</template>
+
+<style>
+.mareike-save-button {
+  background-color: #2271b1 !important;
+  color: #ffffff !important;
+}
+</style>