94 lines
3.4 KiB
Vue
94 lines
3.4 KiB
Vue
<template>
|
|
<dialog-modal :show="showModal" @close="$emit('close')">
|
|
<template #title>
|
|
Neue Einzahlung
|
|
</template>
|
|
<template #content>
|
|
<form @submitted="submitForm">
|
|
<div class="grid grid-cols-6 gap-6">
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<jet-label for="date" value="Datum" />
|
|
<datepicker id="date" ref="date" v-model="form.date" inputFormat="dd.MM.yyyy" class="border-gray-300 rounded-md shadow-sm mt-1 block w-full" />
|
|
<jet-input-error :message="form.errors.date" class="mt-2" />
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<jet-label for="amount" value="Betrag" />
|
|
<currency-input v-model="form.amount" :options="currencyOptions" id="price" class="w-full mt-1 block border-gray-300 rounded-md shadow-sm" ref="amount"/>
|
|
<jet-input-error :message="form.errors.amount" class="mt-2" />
|
|
</div>
|
|
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<jet-label for="type" value="Einzahlungsart" />
|
|
<select v-model="form.type" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
|
|
<option value="0" :selected="form.type == '0'">Banküberweisung</option>
|
|
<option value="1" :selected="form.type == '1'">Barzahlung</option>
|
|
</select>
|
|
<jet-input-error :message="form.errors.type" class="mt-2" />
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
<template #footer>
|
|
<jet-button @click="submitForm" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
|
|
Einzahlung speichern
|
|
</jet-button>
|
|
</template>
|
|
</dialog-modal>
|
|
</template>
|
|
|
|
<script>
|
|
import JetButton from '@/Jetstream/Button'
|
|
import JetLabel from '@/Jetstream/Label.vue'
|
|
import JetInput from '@/Jetstream/Input.vue'
|
|
import JetInputError from '@/Jetstream/InputError'
|
|
import Datepicker from 'vue3-datepicker'
|
|
import { useForm } from '@inertiajs/inertia-vue3'
|
|
import { ref } from 'vue'
|
|
import DialogModal from '@/Jetstream/DialogModal.vue'
|
|
import CurrencyInput from '@/Components/CurrencyInput'
|
|
|
|
export default {
|
|
components: {
|
|
JetButton,
|
|
JetLabel,
|
|
JetInput,
|
|
JetInputError,
|
|
DialogModal,
|
|
Datepicker,
|
|
CurrencyInput,
|
|
},
|
|
props: {
|
|
id: Number,
|
|
showModal: Boolean,
|
|
},
|
|
data() {
|
|
return {
|
|
form: useForm('CreatePayment', {
|
|
id: null,
|
|
date: ref(new Date()),
|
|
amount: null,
|
|
type: '1',
|
|
contract_id: this.id,
|
|
}),
|
|
currencyOptions: {
|
|
currency: 'CHF',
|
|
locale: 'de-CH',
|
|
exportValueAsInteger: true,
|
|
hideGroupingSeparatorOnFocus: false,
|
|
},
|
|
}
|
|
},
|
|
methods: {
|
|
submitForm() {
|
|
this.form.post(this.route('payments.store', this.id), {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
this.$emit('close');
|
|
form.reset();
|
|
},
|
|
});
|
|
},
|
|
},
|
|
}
|
|
</script> |