Fixes to client case show
This commit is contained in:
Simon Pocrnjič
@@ -5,6 +5,7 @@ import DialogModal from "@/Components/DialogModal.vue";
|
||||
import InputLabel from "@/Components/InputLabel.vue";
|
||||
import DatePickerField from "@/Components/DatePickerField.vue";
|
||||
import TextInput from "@/Components/TextInput.vue";
|
||||
import CurrencyInput from "@/Components/CurrencyInput.vue";
|
||||
import { useForm } from "@inertiajs/vue3";
|
||||
import { FwbTextarea } from "flowbite-vue";
|
||||
import { ref, watch } from "vue";
|
||||
@@ -170,13 +171,12 @@ watch(
|
||||
/>
|
||||
<div class="col-span-6 sm:col-span-4">
|
||||
<InputLabel for="activityAmount" value="Znesek" />
|
||||
<TextInput
|
||||
<CurrencyInput
|
||||
id="activityAmount"
|
||||
ref="activityAmountinput"
|
||||
v-model="form.amount"
|
||||
type="number"
|
||||
class="mt-1 block w-full"
|
||||
autocomplete="0.00"
|
||||
:precision="{ min: 0, max: 4 }"
|
||||
placeholder="0,00"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end mt-4">
|
||||
|
||||
@@ -1,226 +1,240 @@
|
||||
<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';
|
||||
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 } 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 },
|
||||
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 emit = defineEmits(["close"]);
|
||||
|
||||
const close = () => {
|
||||
// Clear any previous validation warnings when closing
|
||||
formContract.clearErrors()
|
||||
formContract.recentlySuccessful = false
|
||||
emit('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,
|
||||
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
|
||||
}
|
||||
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.contract,
|
||||
(c) => {
|
||||
applyContract(c);
|
||||
}
|
||||
);
|
||||
|
||||
watch(() => props.show, (open) => {
|
||||
watch(
|
||||
() => props.show,
|
||||
(open) => {
|
||||
if (open && !props.contract) {
|
||||
// reset for create
|
||||
applyContract(null)
|
||||
// reset for create
|
||||
applyContract(null);
|
||||
}
|
||||
if (!open) {
|
||||
// Ensure warnings are cleared when dialog hides
|
||||
formContract.clearErrors()
|
||||
formContract.recentlySuccessful = false
|
||||
// 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) => {
|
||||
const contractRefInput = vRef(null);
|
||||
watch(
|
||||
() => formContract.errors.reference,
|
||||
async (err) => {
|
||||
if (err && props.show) {
|
||||
await nextTick()
|
||||
try { contractRefInput.value?.focus?.() } catch (e) {}
|
||||
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,
|
||||
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,
|
||||
};
|
||||
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);
|
||||
}
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
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"/>
|
||||
<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>
|
||||
<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>
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': formContract.processing }"
|
||||
:disabled="formContract.processing"
|
||||
>
|
||||
{{ formContract.uuid ? "Posodobi" : "Shrani" }}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup>
|
||||
import DialogModal from "@/Components/DialogModal.vue";
|
||||
import CurrencyInput from "@/Components/CurrencyInput.vue";
|
||||
|
||||
const props = defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
@@ -19,12 +20,12 @@ const onSubmit = () => emit("submit");
|
||||
<div class="space-y-3">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-700 mb-1">Znesek</label>
|
||||
<input
|
||||
type="number"
|
||||
step="0.01"
|
||||
min="0"
|
||||
v-model.number="form.amount"
|
||||
class="w-full rounded border-gray-300"
|
||||
<CurrencyInput
|
||||
id="paymentAmount"
|
||||
v-model="form.amount"
|
||||
:precision="{ min: 0, max: 2 }"
|
||||
placeholder="0,00"
|
||||
class="w-full"
|
||||
/>
|
||||
<div v-if="form.errors?.amount" class="text-sm text-red-600 mt-0.5">
|
||||
{{ form.errors.amount }}
|
||||
@@ -45,7 +46,11 @@ const onSubmit = () => emit("submit");
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm text-gray-700 mb-1">Datum</label>
|
||||
<input type="date" v-model="form.paid_at" class="w-full rounded border-gray-300" />
|
||||
<input
|
||||
type="date"
|
||||
v-model="form.paid_at"
|
||||
class="w-full rounded border-gray-300"
|
||||
/>
|
||||
<div v-if="form.errors?.paid_at" class="text-sm text-red-600 mt-0.5">
|
||||
{{ form.errors.paid_at }}
|
||||
</div>
|
||||
@@ -53,7 +58,11 @@ const onSubmit = () => emit("submit");
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-700 mb-1">Sklic</label>
|
||||
<input type="text" v-model="form.reference" class="w-full rounded border-gray-300" />
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.reference"
|
||||
class="w-full rounded border-gray-300"
|
||||
/>
|
||||
<div v-if="form.errors?.reference" class="text-sm text-red-600 mt-0.5">
|
||||
{{ form.errors.reference }}
|
||||
</div>
|
||||
@@ -61,7 +70,11 @@ const onSubmit = () => emit("submit");
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button type="button" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="onClose">
|
||||
<button
|
||||
type="button"
|
||||
class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300"
|
||||
@click="onClose"
|
||||
>
|
||||
Prekliči
|
||||
</button>
|
||||
<button
|
||||
@@ -74,5 +87,4 @@ const onSubmit = () => emit("submit");
|
||||
</button>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user