390 lines
13 KiB
Vue
390 lines
13 KiB
Vue
<script setup>
|
|
import ActionMessage from "@/Components/ActionMessage.vue";
|
|
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
|
|
import UpdateDialog from "@/Components/Dialogs/UpdateDialog.vue";
|
|
import SectionTitle from "@/Components/SectionTitle.vue";
|
|
import CurrencyInput from "@/Components/CurrencyInput.vue";
|
|
import DatePicker from "@/Components/DatePicker.vue";
|
|
import { useForm, router } from "@inertiajs/vue3";
|
|
import { watch, nextTick, ref as vRef } from "vue";
|
|
import { Label } from "@/Components/ui/label";
|
|
import { Input } from "@/Components/ui/input";
|
|
import { Textarea } from "@/Components/ui/textarea";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/Components/ui/select";
|
|
|
|
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 },
|
|
});
|
|
|
|
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>
|
|
<CreateDialog
|
|
v-if="!formContract.uuid"
|
|
:show="show"
|
|
title="Dodaj pogodbo"
|
|
confirm-text="Shrani"
|
|
:processing="formContract.processing"
|
|
@close="close"
|
|
@confirm="storeOrUpdate"
|
|
>
|
|
<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="space-y-4">
|
|
<div class="space-y-2">
|
|
<Label for="contractRef">Referenca</Label>
|
|
<Input
|
|
id="contractRef"
|
|
ref="contractRefInput"
|
|
v-model="formContract.reference"
|
|
type="text"
|
|
:class="[
|
|
formContract.errors.reference
|
|
? 'border-red-500 focus:border-red-500 focus:ring-red-500'
|
|
: '',
|
|
]"
|
|
autocomplete="contract-reference"
|
|
/>
|
|
<p v-if="formContract.errors.reference" class="text-sm text-red-600">
|
|
{{ formContract.errors.reference }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="contractStartDate">Datum pričetka</Label>
|
|
<DatePicker
|
|
id="contractStartDate"
|
|
v-model="formContract.start_date"
|
|
format="dd.MM.yyyy"
|
|
:error="formContract.errors.start_date"
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="contractTypeSelect">Tip</Label>
|
|
<Select v-model="formContract.type_id">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Izberi tip" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem v-for="t in types" :key="t.id" :value="t.id">
|
|
{{ t.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="contractDescription">Opis</Label>
|
|
<Textarea
|
|
id="contractDescription"
|
|
v-model="formContract.description"
|
|
rows="3"
|
|
placeholder="Opis"
|
|
/>
|
|
</div>
|
|
|
|
<SectionTitle class="mt-6 border-b mb-4">
|
|
<template #title> Račun </template>
|
|
</SectionTitle>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="accountTypeSelect">Tip računa</Label>
|
|
<Select v-model="formContract.account_type_id">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Izberi tip računa" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">—</SelectItem>
|
|
<SelectItem v-for="at in account_types" :key="at.id" :value="at.id">
|
|
{{ at.name ?? "#" + at.id }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p v-if="formContract.errors.account_type_id" class="text-sm text-red-600">
|
|
{{ formContract.errors.account_type_id }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div class="space-y-2">
|
|
<Label for="initialAmount">Predani znesek</Label>
|
|
<CurrencyInput id="initialAmount" v-model="formContract.initial_amount" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="balanceAmount">Odprti znesek</Label>
|
|
<CurrencyInput id="balanceAmount" v-model="formContract.balance_amount" />
|
|
</div>
|
|
</div>
|
|
|
|
<ActionMessage :on="formContract.recentlySuccessful" class="text-sm text-green-600">
|
|
Shranjuje.
|
|
</ActionMessage>
|
|
</div>
|
|
</form>
|
|
</CreateDialog>
|
|
<UpdateDialog
|
|
v-else
|
|
:show="show"
|
|
title="Uredi pogodbo"
|
|
confirm-text="Posodobi"
|
|
:processing="formContract.processing"
|
|
@close="close"
|
|
@confirm="storeOrUpdate"
|
|
>
|
|
<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="space-y-4">
|
|
<div class="space-y-2">
|
|
<Label for="contractRef">Referenca</Label>
|
|
<Input
|
|
id="contractRef"
|
|
ref="contractRefInput"
|
|
v-model="formContract.reference"
|
|
type="text"
|
|
:class="[
|
|
formContract.errors.reference
|
|
? 'border-red-500 focus:border-red-500 focus:ring-red-500'
|
|
: '',
|
|
]"
|
|
autocomplete="contract-reference"
|
|
/>
|
|
<p v-if="formContract.errors.reference" class="text-sm text-red-600">
|
|
{{ formContract.errors.reference }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="contractStartDate">Datum pričetka</Label>
|
|
<DatePicker
|
|
id="contractStartDate"
|
|
v-model="formContract.start_date"
|
|
format="dd.MM.yyyy"
|
|
:error="formContract.errors.start_date"
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="contractTypeSelect">Tip</Label>
|
|
<Select v-model="formContract.type_id">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Izberi tip" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem v-for="t in types" :key="t.id" :value="t.id">
|
|
{{ t.name }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="contractDescription">Opis</Label>
|
|
<Textarea
|
|
id="contractDescription"
|
|
v-model="formContract.description"
|
|
rows="3"
|
|
placeholder="Opis"
|
|
/>
|
|
</div>
|
|
|
|
<SectionTitle class="mt-6 border-b mb-4">
|
|
<template #title> Račun </template>
|
|
</SectionTitle>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="accountTypeSelect">Tip računa</Label>
|
|
<Select v-model="formContract.account_type_id">
|
|
<SelectTrigger>
|
|
<SelectValue placeholder="Izberi tip računa" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem :value="null">—</SelectItem>
|
|
<SelectItem v-for="at in account_types" :key="at.id" :value="at.id">
|
|
{{ at.name ?? "#" + at.id }}
|
|
</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<p v-if="formContract.errors.account_type_id" class="text-sm text-red-600">
|
|
{{ formContract.errors.account_type_id }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div class="space-y-2">
|
|
<Label for="initialAmount">Predani znesek</Label>
|
|
<CurrencyInput id="initialAmount" v-model="formContract.initial_amount" />
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="balanceAmount">Odprti znesek</Label>
|
|
<CurrencyInput id="balanceAmount" v-model="formContract.balance_amount" />
|
|
</div>
|
|
</div>
|
|
|
|
<ActionMessage :on="formContract.recentlySuccessful" class="text-sm text-green-600">
|
|
Shranjuje.
|
|
</ActionMessage>
|
|
</div>
|
|
</form>
|
|
</UpdateDialog>
|
|
</template>
|