102 lines
3.4 KiB
Vue
102 lines
3.4 KiB
Vue
<script setup>
|
|
import ActionMessage from '@/Components/ActionMessage.vue';
|
|
import Drawer from '@/Components/Drawer.vue';
|
|
import InputLabel from '@/Components/InputLabel.vue';
|
|
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
|
import SectionTitle from '@/Components/SectionTitle.vue';
|
|
import TextInput from '@/Components/TextInput.vue';
|
|
import { useForm } from '@inertiajs/vue3';
|
|
|
|
const props = defineProps({
|
|
client_case: Object,
|
|
show: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
types: Array
|
|
});
|
|
|
|
console.log(props.types);
|
|
|
|
const emit = defineEmits(['close']);
|
|
|
|
const close = () => {
|
|
emit('close');
|
|
}
|
|
|
|
//store contract
|
|
const formContract = useForm({
|
|
client_case_uuid: props.client_case.uuid,
|
|
reference: '',
|
|
start_date: new Date().toISOString(),
|
|
type_id: props.types[0].id
|
|
});
|
|
|
|
const storeContract = () => {
|
|
formContract.post(route('clientCase.contract.store', props.client_case), {
|
|
onBefore: () => {
|
|
formContract.start_date = formContract.start_date;
|
|
},
|
|
onSuccess: () => {
|
|
close();
|
|
formContract.reset();
|
|
},
|
|
preserveScroll: true
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Drawer
|
|
:show="show"
|
|
@close="close"
|
|
>
|
|
<template #title>Add contract</template>
|
|
<template #content>
|
|
<form @submit.prevent="storeContract">
|
|
<SectionTitle class="mt-4 border-b mb-4">
|
|
<template #title>
|
|
Contract
|
|
</template>
|
|
</SectionTitle>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="contractRef" value="Reference"/>
|
|
<TextInput
|
|
id="contractRef"
|
|
ref="contractRefInput"
|
|
v-model="formContract.reference"
|
|
type="text"
|
|
class="mt-1 block w-full"
|
|
autocomplete="contract-reference"
|
|
/>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="contractStartDate" value="Start date"/>
|
|
<vue-date-picker id="contractStartDate" :enable-time-picker="false" format="dd.MM.yyyy" class="mt-1 block w-full" v-model="formContract.start_date"></vue-date-picker>
|
|
</div>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="contractTypeSelect" value="Contract type"/>
|
|
<select
|
|
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
|
id="contractTypeSelect"
|
|
v-model="formContract.type_id"
|
|
>
|
|
<option v-for="t in types" :value="t.id">{{ t.name }}</option>
|
|
<!-- ... -->
|
|
</select>
|
|
</div>
|
|
<div class="flex justify-end mt-4">
|
|
<ActionMessage :on="formContract.recentlySuccessful" class="me-3">
|
|
Saved.
|
|
</ActionMessage>
|
|
|
|
<PrimaryButton :class="{ 'opacity-25': formContract.processing }" :disabled="formContract.processing">
|
|
Save
|
|
</PrimaryButton>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
</Drawer>
|
|
|
|
</template> |