119 lines
4.9 KiB
Vue
119 lines
4.9 KiB
Vue
<template>
|
|
<jet-form-section @submitted="submitForm">
|
|
<template #title>
|
|
<slot name="title"></slot>
|
|
</template>
|
|
|
|
<template #description>
|
|
<slot name="description"></slot>
|
|
</template>
|
|
|
|
<template #form>
|
|
<div class="xl:col-span-2 md:col-span-3 sm:col-span-4 col-span-6 grid grid-cols-6 gap-3">
|
|
<div class="col-span-6">
|
|
<jet-label for="date" value="Datum" />
|
|
<jet-input id="date" ref="date" type="text" class="mt-1 block w-full" v-model="form.date" />
|
|
<jet-input-error :message="form.errors.date" class="mt-2" />
|
|
</div>
|
|
<div class="col-span-6">
|
|
<jet-label for="delivery_date" value="Lieferdatum" />
|
|
<jet-input id="delivery_date" ref="delivery_date" type="text" class="mt-1 block w-full" v-model="form.delivery_date" />
|
|
<jet-input-error :message="form.errors.delivery_date" class="mt-2" />
|
|
</div>
|
|
|
|
<div v-if="data.type === '1'" class="col-span-6">
|
|
<jet-label for="insurance_type" value="Versicherung" />
|
|
<select v-model="form.insurance_type" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
|
|
<option v-for="(insurance, index) in insurance_types" :value="index" v-bind:key="index" :selected="form.insurance_type == index">{{ insurance }}</option>
|
|
</select>
|
|
<jet-input-error :message="form.errors.insurance_type" class="mt-2" />
|
|
</div>
|
|
|
|
<div class="col-span-6">
|
|
<jet-label for="price" :value="form.type === '0' ? 'Einkaufspreis' : 'Verkaufspreis'" />
|
|
<currency-input v-model="form.price" :options="currencyOptions" id="price" class="w-full mt-1 block border-gray-300 rounded-md shadow-sm" ref="price"/>
|
|
<jet-input-error :message="form.errors.price" class="mt-2" />
|
|
</div>
|
|
|
|
<div class="col-span-6">
|
|
<jet-label for="amount" value="Anzahlung" />
|
|
<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">
|
|
<jet-label for="payment_type" value="Einzahlungsart" />
|
|
<select v-model="form.payment_type" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm">
|
|
<option value="0" :selected="form.payment_type == '0'">Banküberweisung</option>
|
|
<option value="1" :selected="form.payment_type == '1'">Barzahlung</option>
|
|
</select>
|
|
<jet-input-error :message="form.errors.type" class="mt-2" />
|
|
</div>
|
|
|
|
<div class="col-span-6">
|
|
<jet-label for="notes" value="Bemerkungen" />
|
|
<textarea class="mt-1 block w-full border-gray-300 rounded-md shadow-sm" v-model="form.notes" ref="input">
|
|
</textarea>
|
|
<jet-input-error :message="form.errors.notes" class="mt-2" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #actions>
|
|
<jet-action-message :on="form.recentlySuccessful" class="mr-3">
|
|
{{ meta.on_success }}
|
|
</jet-action-message>
|
|
|
|
<jet-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing || !data.contact_id || !data.car_id">
|
|
{{ meta.button_text }}
|
|
</jet-button>
|
|
</template>
|
|
</jet-form-section>
|
|
</template>
|
|
|
|
<script>
|
|
import JetButton from '@/Jetstream/Button';
|
|
import JetLabel from '@/Jetstream/Label.vue';
|
|
import JetActionMessage from '@/Jetstream/ActionMessage';
|
|
import JetInputError from '@/Jetstream/InputError';
|
|
import JetInput from '@/Jetstream/Input';
|
|
import JetFormSection from '@/Jetstream/FormSection';
|
|
import { useForm } from '@inertiajs/inertia-vue3';
|
|
import CurrencyInput from '@/Components/CurrencyInput';
|
|
|
|
export default {
|
|
components: {
|
|
JetButton,
|
|
JetFormSection,
|
|
JetLabel,
|
|
JetInputError,
|
|
JetActionMessage,
|
|
JetInput,
|
|
CurrencyInput,
|
|
},
|
|
props: {
|
|
data: Object,
|
|
meta: Object,
|
|
insurance_types: Array,
|
|
},
|
|
data() {
|
|
return {
|
|
form: useForm(this.meta.form_name, this.data),
|
|
currencyOptions: {
|
|
currency: 'CHF',
|
|
locale: 'de-CH',
|
|
exportValueAsInteger: true,
|
|
hideGroupingSeparatorOnFocus: false,
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
submitForm() {
|
|
this.form.car_id = this.data.car_id;
|
|
this.form.contact_id = this.data.contact_id;
|
|
this.form.submit(this.meta.method, this.meta.route);
|
|
},
|
|
},
|
|
};
|
|
</script>
|