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

91 lines
2.2 KiB
Vue

<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>