260 lines
8.6 KiB
Vue
260 lines
8.6 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 CurrencyInput from "@/Components/CurrencyInput.vue";
|
|
import DatePickerField from "@/Components/DatePickerField.vue";
|
|
import { useForm, router } 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;
|
|
// Debug: log payload being sent to verify balance_amount presence
|
|
try {
|
|
console.debug('Submitting contract form', JSON.parse(JSON.stringify(formContract)));
|
|
} catch (e) {}
|
|
const options = {
|
|
onBefore: () => {
|
|
formContract.start_date = formContract.start_date;
|
|
},
|
|
onSuccess: () => {
|
|
close();
|
|
// keep state clean; reset to initial
|
|
if (!isEdit) formContract.reset();
|
|
// After edit ensure contracts list reflects updated balance
|
|
if (isEdit) {
|
|
try {
|
|
const params = {};
|
|
try {
|
|
const url = new URL(window.location.href);
|
|
const seg = url.searchParams.get('segment');
|
|
if (seg) params.segment = seg;
|
|
} catch (e) {}
|
|
router.visit(route('clientCase.show', { client_case: props.client_case.uuid, ...params }), {
|
|
preserveScroll: true,
|
|
replace: true,
|
|
});
|
|
} catch (e) {}
|
|
}
|
|
},
|
|
preserveScroll: true,
|
|
};
|
|
const params = {};
|
|
try {
|
|
const url = new URL(window.location.href);
|
|
const seg = url.searchParams.get("segment");
|
|
if (seg) params.segment = seg;
|
|
} catch (e) {}
|
|
if (isEdit) {
|
|
formContract.put(
|
|
route("clientCase.contract.update", {
|
|
client_case: props.client_case.uuid,
|
|
uuid: formContract.uuid,
|
|
...params,
|
|
}),
|
|
options
|
|
);
|
|
} else {
|
|
// route helper merges params for GET; for POST we can append query manually if needed
|
|
let postUrl = route("clientCase.contract.store", props.client_case);
|
|
if (params.segment) {
|
|
postUrl +=
|
|
(postUrl.includes("?") ? "&" : "?") +
|
|
"segment=" +
|
|
encodeURIComponent(params.segment);
|
|
}
|
|
formContract.post(postUrl, 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" />
|
|
<CurrencyInput id="initialAmount" v-model="formContract.initial_amount" />
|
|
</div>
|
|
<div>
|
|
<InputLabel for="balanceAmount" value="Odprti znesek" />
|
|
<CurrencyInput id="balanceAmount" v-model="formContract.balance_amount" />
|
|
</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>
|