Changes
This commit is contained in:
Simon Pocrnjič
@@ -5,15 +5,16 @@ 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 DatePickerField from '@/Components/DatePickerField.vue';
|
||||
import { useForm } from '@inertiajs/vue3';
|
||||
import { watch } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
client_case: Object,
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
types: Array
|
||||
show: { type: Boolean, default: false },
|
||||
types: Array,
|
||||
// Optional: when provided, drawer acts as edit mode
|
||||
contract: { type: Object, default: null },
|
||||
});
|
||||
|
||||
console.log(props.types);
|
||||
@@ -24,25 +25,59 @@ const close = () => {
|
||||
emit('close');
|
||||
}
|
||||
|
||||
//store contract
|
||||
// form state for create or edit
|
||||
const formContract = useForm({
|
||||
client_case_uuid: props.client_case.uuid,
|
||||
reference: '',
|
||||
start_date: new Date().toISOString(),
|
||||
type_id: props.types[0].id
|
||||
uuid: props.contract?.uuid ?? null,
|
||||
reference: props.contract?.reference ?? '',
|
||||
start_date: props.contract?.start_date ?? new Date().toISOString(),
|
||||
type_id: (props.contract?.type_id ?? props.contract?.type?.id) ?? props.types[0].id,
|
||||
description: props.contract?.description ?? '',
|
||||
// nested account fields, if exists
|
||||
initial_amount: props.contract?.account?.initial_amount ?? null,
|
||||
balance_amount: props.contract?.account?.balance_amount ?? null,
|
||||
});
|
||||
|
||||
const storeContract = () => {
|
||||
formContract.post(route('clientCase.contract.store', props.client_case), {
|
||||
// keep form in sync when switching between create and edit
|
||||
const applyContract = (c) => {
|
||||
formContract.uuid = c?.uuid ?? null
|
||||
formContract.reference = c?.reference ?? ''
|
||||
formContract.start_date = c?.start_date ?? new Date().toISOString()
|
||||
formContract.type_id = (c?.type_id ?? c?.type?.id) ?? props.types[0].id
|
||||
formContract.description = c?.description ?? ''
|
||||
formContract.initial_amount = c?.account?.initial_amount ?? null
|
||||
formContract.balance_amount = c?.account?.balance_amount ?? null
|
||||
}
|
||||
|
||||
watch(() => props.contract, (c) => {
|
||||
applyContract(c)
|
||||
})
|
||||
|
||||
watch(() => props.show, (open) => {
|
||||
if (open && !props.contract) {
|
||||
// reset for create
|
||||
applyContract(null)
|
||||
}
|
||||
})
|
||||
|
||||
const storeOrUpdate = () => {
|
||||
const isEdit = !!formContract.uuid
|
||||
const options = {
|
||||
onBefore: () => {
|
||||
formContract.start_date = formContract.start_date;
|
||||
formContract.start_date = formContract.start_date
|
||||
},
|
||||
onSuccess: () => {
|
||||
close();
|
||||
formContract.reset();
|
||||
close()
|
||||
// keep state clean; reset to initial
|
||||
if (!isEdit) formContract.reset()
|
||||
},
|
||||
preserveScroll: true
|
||||
});
|
||||
preserveScroll: true,
|
||||
}
|
||||
if (isEdit) {
|
||||
formContract.put(route('clientCase.contract.update', { client_case: props.client_case.uuid, uuid: formContract.uuid }), options)
|
||||
} else {
|
||||
formContract.post(route('clientCase.contract.store', props.client_case), options)
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -52,9 +87,9 @@ const storeContract = () => {
|
||||
:show="show"
|
||||
@close="close"
|
||||
>
|
||||
<template #title>Dodaj pogodbo</template>
|
||||
<template #title>{{ formContract.uuid ? 'Uredi pogodbo' : 'Dodaj pogodbo' }}</template>
|
||||
<template #content>
|
||||
<form @submit.prevent="storeContract">
|
||||
<form @submit.prevent="storeOrUpdate">
|
||||
<SectionTitle class="mt-4 border-b mb-4">
|
||||
<template #title>
|
||||
Pogodba
|
||||
@@ -71,10 +106,13 @@ const storeContract = () => {
|
||||
autocomplete="contract-reference"
|
||||
/>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="contractStartDate" value="Datum pričetka"/>
|
||||
<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>
|
||||
<DatePickerField
|
||||
id="contractStartDate"
|
||||
label="Datum pričetka"
|
||||
v-model="formContract.start_date"
|
||||
format="dd.MM.yyyy"
|
||||
:enable-time-picker="false"
|
||||
/>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="contractTypeSelect" value="Tip"/>
|
||||
<select
|
||||
@@ -86,13 +124,51 @@ const storeContract = () => {
|
||||
<!-- ... -->
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-span-6 sm:col-span-4 mt-4">
|
||||
<InputLabel for="contractDescription" value="Opis"/>
|
||||
<textarea
|
||||
id="contractDescription"
|
||||
v-model="formContract.description"
|
||||
class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
||||
rows="3"
|
||||
/>
|
||||
</div>
|
||||
<SectionTitle class="mt-6 border-b mb-4">
|
||||
<template #title>
|
||||
Račun
|
||||
</template>
|
||||
</SectionTitle>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<InputLabel for="initialAmount" value="Predani znesek"/>
|
||||
<TextInput
|
||||
id="initialAmount"
|
||||
v-model.number="formContract.initial_amount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<InputLabel for="balanceAmount" value="Odprti znesek"/>
|
||||
<TextInput
|
||||
id="balanceAmount"
|
||||
v-model.number="formContract.balance_amount"
|
||||
type="number"
|
||||
step="0.01"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="formContract.recentlySuccessful" class="me-3">
|
||||
Shranjuje.
|
||||
</ActionMessage>
|
||||
|
||||
<PrimaryButton :class="{ 'opacity-25': formContract.processing }" :disabled="formContract.processing">
|
||||
Shrani
|
||||
{{ formContract.uuid ? 'Posodobi' : 'Shrani' }}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user