215 lines
8.7 KiB
Vue
215 lines
8.7 KiB
Vue
<script setup>
|
|
import ActionMessage from '@/Components/ActionMessage.vue';
|
|
import DialogModal from '@/Components/DialogModal.vue';
|
|
import InputLabel from '@/Components/InputLabel.vue';
|
|
import InputError from '@/Components/InputError.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, nextTick, ref as vRef } from 'vue';
|
|
|
|
const props = defineProps({
|
|
client_case: Object,
|
|
show: { type: Boolean, default: false },
|
|
types: Array,
|
|
account_types: { type: Array, default: () => [] },
|
|
// Optional: when provided, drawer acts as edit mode
|
|
contract: { type: Object, default: null },
|
|
});
|
|
|
|
console.log(props.types);
|
|
|
|
const emit = defineEmits(['close']);
|
|
|
|
const close = () => {
|
|
// Clear any previous validation warnings when closing
|
|
formContract.clearErrors()
|
|
formContract.recentlySuccessful = false
|
|
emit('close')
|
|
}
|
|
|
|
// form state for create or edit
|
|
const formContract = useForm({
|
|
client_case_uuid: props.client_case.uuid,
|
|
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,
|
|
account_type_id: props.contract?.account?.type_id ?? null,
|
|
});
|
|
|
|
// 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
|
|
formContract.account_type_id = c?.account?.type_id ?? null
|
|
}
|
|
|
|
watch(() => props.contract, (c) => {
|
|
applyContract(c)
|
|
})
|
|
|
|
watch(() => props.show, (open) => {
|
|
if (open && !props.contract) {
|
|
// reset for create
|
|
applyContract(null)
|
|
}
|
|
if (!open) {
|
|
// Ensure warnings are cleared when dialog hides
|
|
formContract.clearErrors()
|
|
formContract.recentlySuccessful = false
|
|
}
|
|
})
|
|
|
|
// optional: focus the reference input when a reference validation error appears
|
|
const contractRefInput = vRef(null)
|
|
watch(() => formContract.errors.reference, async (err) => {
|
|
if (err && props.show) {
|
|
await nextTick()
|
|
try { contractRefInput.value?.focus?.() } catch (e) {}
|
|
}
|
|
})
|
|
|
|
const storeOrUpdate = () => {
|
|
const isEdit = !!formContract.uuid
|
|
const options = {
|
|
onBefore: () => {
|
|
formContract.start_date = formContract.start_date
|
|
},
|
|
onSuccess: () => {
|
|
close()
|
|
// keep state clean; reset to initial
|
|
if (!isEdit) formContract.reset()
|
|
},
|
|
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>
|
|
|
|
<template>
|
|
<DialogModal
|
|
:show="show"
|
|
@close="close"
|
|
>
|
|
<template #title>{{ formContract.uuid ? 'Uredi pogodbo' : 'Dodaj pogodbo' }}</template>
|
|
<template #content>
|
|
<form @submit.prevent="storeOrUpdate">
|
|
<div v-if="formContract.errors.reference" class="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
|
|
{{ formContract.errors.reference }}
|
|
</div>
|
|
<SectionTitle class="mt-4 border-b mb-4">
|
|
<template #title>
|
|
Pogodba
|
|
</template>
|
|
</SectionTitle>
|
|
<div class="col-span-6 sm:col-span-4">
|
|
<InputLabel for="contractRef" value="Referenca"/>
|
|
<TextInput
|
|
id="contractRef"
|
|
ref="contractRefInput"
|
|
v-model="formContract.reference"
|
|
type="text"
|
|
:class="['mt-1 block w-full', formContract.errors.reference ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : '']"
|
|
autocomplete="contract-reference"
|
|
/>
|
|
<InputError :message="formContract.errors.reference" />
|
|
</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
|
|
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="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="col-span-6 sm:col-span-4">
|
|
<InputLabel for="accountTypeSelect" value="Tip računa"/>
|
|
<select
|
|
id="accountTypeSelect"
|
|
v-model="formContract.account_type_id"
|
|
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
|
|
>
|
|
<option :value="null">—</option>
|
|
<option v-for="at in account_types" :key="at.id" :value="at.id">{{ at.name ?? ('#' + at.id) }}</option>
|
|
</select>
|
|
<InputError :message="formContract.errors.account_type_id" />
|
|
</div>
|
|
<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">
|
|
{{ formContract.uuid ? 'Posodobi' : 'Shrani' }}
|
|
</PrimaryButton>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
</DialogModal>
|
|
|
|
</template> |