84 lines
3.2 KiB
Vue
84 lines
3.2 KiB
Vue
<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>
|