Cost units can be edited

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>