sipo/Teren-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixes to client case show

Browse Source
This commit is contained in:
Simon Pocrnjič 2025-10-07 19:47:54 +02:00
parent f976b4d6ef
commit 175111bed4
8 changed files with 369 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
app/Http/Controllers/ClientCaseContoller.php
View File

@ -198,8 +198,10 @@ public function updateContract(ClientCase $clientCase, string $uuid, UpdateContr
// After update/create, if balance_amount changed (and not through a payment), log an activity with before/after // After update/create, if balance_amount changed (and not through a payment), log an activity with before/after
if (array_key_exists('balance_amount', $accountData)) { if (array_key_exists('balance_amount', $accountData)) {
$newBalance = (float) optional($contract->account)->fresh()->balance_amount; // Guard against null account (e.g., if creation failed silently earlier)
if ($newBalance !== $oldBalance) { $newAccount = $contract->account; // single relationship access
$newBalance = $newAccount ? (float) optional($newAccount->fresh())->balance_amount : $oldBalance;
if ($newAccount && $newBalance !== $oldBalance) {
try { try {
$currency = optional(\App\Models\PaymentSetting::query()->first())->default_currency ?? 'EUR'; $currency = optional(\App\Models\PaymentSetting::query()->first())->default_currency ?? 'EUR';
$beforeStr = number_format($oldBalance, 2, ',', '.').' '.$currency; $beforeStr = number_format($oldBalance, 2, ',', '.').' '.$currency;
@ -244,12 +246,9 @@ public function storeActivity(ClientCase $clientCase, Request $request)
// Map contract_uuid to contract_id within the same client case, if provided // Map contract_uuid to contract_id within the same client case, if provided
$contractId = null; $contractId = null;
if (! empty($attributes['contract_uuid'])) { if (! empty($attributes['contract_uuid'])) {
$contract = $clientCase->contracts()->where('uuid', $attributes['contract_uuid'])->firstOrFail('id'); $contract = $clientCase->contracts()->where('uuid', $attributes['contract_uuid'])->firstOrFail(['id']);
if ($contract) { if ($contract) {
// Prevent attaching a new activity specifically to an archived contract // Archived contracts are now allowed: link activity regardless of active flag
if (! $contract->active) {
return back()->with('warning', __('contracts.activity_not_allowed_archived'));
}
$contractId = $contract->id; $contractId = $contract->id;
} }
} }
@ -1049,7 +1048,22 @@ public function show(ClientCase $clientCase)
// Prepare contracts and a reference map. // Prepare contracts and a reference map.
// Only apply active/inactive filtering IF a segment filter is provided. // Only apply active/inactive filtering IF a segment filter is provided.
$contractsQuery = $case->contracts() $contractsQuery = $case->contracts()
->with(['type', 'account', 'objects', 'segments:id,name']); // Only select lean columns to avoid oversize JSON / headers
->select(['id', 'uuid', 'reference', 'start_date', 'end_date', 'active', 'type_id', 'client_case_id', 'created_at'])
->with([
'type:id,name',
// Use closure for account to avoid ambiguous column names with latestOfMany join
'account' => function ($q) {
$q->select([
'accounts.id',
'accounts.contract_id',
'accounts.type_id',
'accounts.initial_amount',
'accounts.balance_amount',
]);
},
'segments:id,name',
]);
$contractsQuery->orderByDesc('created_at'); $contractsQuery->orderByDesc('created_at');
@ -1070,7 +1084,10 @@ public function show(ClientCase $clientCase)
}); });
} }
$contracts = $contractsQuery->get(); // NOTE: If a case has an extremely large number of contracts this can still be heavy.
// Consider pagination or deferred (Inertia lazy) loading. For now, hard-cap to 500 to prevent
// pathological memory / header growth. Frontend can request more via future endpoint.
$contracts = $contractsQuery->limit(500)->get();
$contractRefMap = []; $contractRefMap = [];
foreach ($contracts as $c) { foreach ($contracts as $c) {
@ -1080,26 +1097,31 @@ public function show(ClientCase $clientCase)
// Merge client case and contract documents into a single array and include contract reference when applicable // Merge client case and contract documents into a single array and include contract reference when applicable
$contractIds = $contracts->pluck('id'); $contractIds = $contracts->pluck('id');
$contractDocs = Document::query() $contractDocs = Document::query()
->select(['id', 'documentable_id', 'documentable_type', 'name', 'file_name', 'original_name', 'extension', 'mime_type', 'size', 'created_at'])
->where('documentable_type', Contract::class) ->where('documentable_type', Contract::class)
->when($contractIds->isNotEmpty(), fn ($q) => $q->whereIn('documentable_id', $contractIds)) ->when($contractIds->isNotEmpty(), fn ($q) => $q->whereIn('documentable_id', $contractIds))
->orderByDesc('created_at') ->orderByDesc('created_at')
->limit(300) // cap to prevent excessive payload; add pagination later if needed
->get() ->get()
->map(function ($d) use ($contractRefMap) { ->map(function ($d) use ($contractRefMap) {
$arr = method_exists($d, 'toArray') ? $d->toArray() : (array) $d; $arr = method_exists($d, 'toArray') ? $d->toArray() : (array) $d;
$arr['contract_reference'] = $contractRefMap[$d->documentable_id] ?? null; $arr['contract_reference'] = $contractRefMap[$d->documentable_id] ?? null;
$arr['documentable_type'] = Contract::class;
$arr['contract_uuid'] = optional(Contract::withTrashed()->find($d->documentable_id))->uuid; $arr['contract_uuid'] = optional(Contract::withTrashed()->find($d->documentable_id))->uuid;
return $arr; return $arr;
}); });
$caseDocs = $case->documents()->orderByDesc('created_at')->get()->map(function ($d) use ($case) { $caseDocs = $case->documents()
$arr = method_exists($d, 'toArray') ? $d->toArray() : (array) $d; ->select(['id', 'documentable_id', 'documentable_type', 'name', 'file_name', 'original_name', 'extension', 'mime_type', 'size', 'created_at'])
$arr['documentable_type'] = ClientCase::class; ->orderByDesc('created_at')
$arr['client_case_uuid'] = $case->uuid; ->limit(200)
->get()
->map(function ($d) use ($case) {
$arr = method_exists($d, 'toArray') ? $d->toArray() : (array) $d;
$arr['client_case_uuid'] = $case->uuid;
return $arr; return $arr;
}); });
$mergedDocs = $caseDocs $mergedDocs = $caseDocs
->concat($contractDocs) ->concat($contractDocs)
->sortByDesc('created_at') ->sortByDesc('created_at')

11
package-lock.json generated
View File

@ -4,7 +4,6 @@
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "Teren-app",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.6.0", "@fortawesome/fontawesome-svg-core": "^6.6.0",
"@fortawesome/free-brands-svg-icons": "^6.6.0", "@fortawesome/free-brands-svg-icons": "^6.6.0",
@ -24,6 +23,7 @@
"reka-ui": "^2.5.1", "reka-ui": "^2.5.1",
"tailwindcss-inner-border": "^0.2.0", "tailwindcss-inner-border": "^0.2.0",
"v-calendar": "^3.1.2", "v-calendar": "^3.1.2",
"vue-currency-input": "^3.2.1",
"vue-multiselect": "^3.1.0", "vue-multiselect": "^3.1.0",
"vue-search-input": "^1.1.16", "vue-search-input": "^1.1.16",
"vue3-apexcharts": "^1.7.0", "vue3-apexcharts": "^1.7.0",
@ -3931,6 +3931,15 @@
} }
} }
}, },
"node_modules/vue-currency-input": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/vue-currency-input/-/vue-currency-input-3.2.1.tgz",
"integrity": "sha512-Osfxzdu5cdZSCS4Cm0vuk7LwNeSdHWGIWK8gtDBC1kU0UtAKz7iU/8dyJ0KDJKxbAYiKeovoQTRfYxCH82I0EA==",
"license": "MIT",
"peerDependencies": {
"vue": "^2.7 || ^3.0.0"
}
},
"node_modules/vue-multiselect": { "node_modules/vue-multiselect": {
"version": "3.3.1", "version": "3.3.1",
"resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.3.1.tgz", "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-3.3.1.tgz",

3
package.json
View File

@ -41,6 +41,7 @@
"vue-multiselect": "^3.1.0", "vue-multiselect": "^3.1.0",
"vue-search-input": "^1.1.16", "vue-search-input": "^1.1.16",
"vue3-apexcharts": "^1.7.0", "vue3-apexcharts": "^1.7.0",
"vuedraggable": "^4.1.0" "vuedraggable": "^4.1.0",
"vue-currency-input": "^3.2.1"
} }
} }

71
resources/js/Components/CurrencyInput.vue Normal file
View File

@ -0,0 +1,71 @@
<script setup>
import { watch, onMounted } from 'vue'
import { useCurrencyInput } from 'vue-currency-input'
const props = defineProps({
modelValue: { type: [Number, String, null], default: null },
id: String,
name: String,
placeholder: { type: String, default: '0,00' },
disabled: Boolean,
required: Boolean,
currency: { type: String, default: 'EUR' },
locale: { type: String, default: 'sl-SI' },
precision: { type: [Number, Object], default: 2 },
allowNegative: { type: Boolean, default: false },
useGrouping: { type: Boolean, default: true },
})
const emit = defineEmits(['update:modelValue'])
const { inputRef, numberValue, setValue, setOptions } = useCurrencyInput({
currency: props.currency,
locale: props.locale,
precision: props.precision,
useGrouping: props.useGrouping,
valueRange: props.allowNegative ? {} : { min: 0 },
})
watch(() => props.modelValue, (val) => {
const numeric = typeof val === 'string' ? parseFloat(val) : val
if (numeric !== numberValue.value) {
setValue(isNaN(numeric) ? null : numeric)
}
}, { immediate: true })
watch(numberValue, (val) => {
emit('update:modelValue', val)
})
watch(() => [props.currency, props.locale, props.precision, props.useGrouping, props.allowNegative], () => {
setOptions({
currency: props.currency,
locale: props.locale,
precision: props.precision,
useGrouping: props.useGrouping,
valueRange: props.allowNegative ? {} : { min: 0 },
})
})
onMounted(() => {
if (props.modelValue != null) {
const numeric = typeof props.modelValue === 'string' ? parseFloat(props.modelValue) : props.modelValue
setValue(isNaN(numeric) ? null : numeric)
}
})
</script>
<template>
<input
ref="inputRef"
:id="id"
:name="name"
type="text"
inputmode="decimal"
:placeholder="placeholder"
:disabled="disabled"
:required="required"
class="mt-1 block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-800 dark:border-gray-600"
autocomplete="off"
/>
</template>

27
resources/js/Components/TextInput.vue
View File

@ -1,28 +1,31 @@
<script setup> <script setup>
import { onMounted, ref } from 'vue'; import { onMounted, ref } from "vue";
defineProps({ defineProps({
modelValue: String, modelValue: {
type: [String, Number],
default: "",
},
}); });
defineEmits(['update:modelValue']); defineEmits(["update:modelValue"]);
const input = ref(null); const input = ref(null);
onMounted(() => { onMounted(() => {
if (input.value.hasAttribute('autofocus')) { if (input.value.hasAttribute("autofocus")) {
input.value.focus(); input.value.focus();
} }
}); });
defineExpose({ focus: () => input.value.focus() }); defineExpose({ focus: () => input.value.focus() });
</script> </script>
<template> <template>
<input <input
ref="input" ref="input"
class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" class="border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
:value="modelValue" :value="modelValue"
@input="$emit('update:modelValue', $event.target.value)" @input="$emit('update:modelValue', $event.target.value)"
> />
</template> </template>

8
resources/js/Pages/Cases/Partials/ActivityDrawer.vue
View File

@ -5,6 +5,7 @@ import DialogModal from "@/Components/DialogModal.vue";
import InputLabel from "@/Components/InputLabel.vue"; import InputLabel from "@/Components/InputLabel.vue";
import DatePickerField from "@/Components/DatePickerField.vue"; import DatePickerField from "@/Components/DatePickerField.vue";
import TextInput from "@/Components/TextInput.vue"; import TextInput from "@/Components/TextInput.vue";
import CurrencyInput from "@/Components/CurrencyInput.vue";
import { useForm } from "@inertiajs/vue3"; import { useForm } from "@inertiajs/vue3";
import { FwbTextarea } from "flowbite-vue"; import { FwbTextarea } from "flowbite-vue";
import { ref, watch } from "vue"; import { ref, watch } from "vue";
@ -170,13 +171,12 @@ watch(
/> />
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="activityAmount" value="Znesek" /> <InputLabel for="activityAmount" value="Znesek" />
<TextInput <CurrencyInput
id="activityAmount" id="activityAmount"
ref="activityAmountinput" ref="activityAmountinput"
v-model="form.amount" v-model="form.amount"
type="number" :precision="{ min: 0, max: 4 }"
class="mt-1 block w-full" placeholder="0,00"
autocomplete="0.00"
/> />
</div> </div>
<div class="flex justify-end mt-4"> <div class="flex justify-end mt-4">

400
resources/js/Pages/Cases/Partials/ContractDrawer.vue
View File

@ -1,226 +1,240 @@
<script setup> <script setup>
import ActionMessage from '@/Components/ActionMessage.vue'; import ActionMessage from "@/Components/ActionMessage.vue";
import DialogModal from '@/Components/DialogModal.vue'; import DialogModal from "@/Components/DialogModal.vue";
import InputLabel from '@/Components/InputLabel.vue'; import InputLabel from "@/Components/InputLabel.vue";
import InputError from '@/Components/InputError.vue'; import InputError from "@/Components/InputError.vue";
import PrimaryButton from '@/Components/PrimaryButton.vue'; import PrimaryButton from "@/Components/PrimaryButton.vue";
import SectionTitle from '@/Components/SectionTitle.vue'; import SectionTitle from "@/Components/SectionTitle.vue";
import TextInput from '@/Components/TextInput.vue'; import TextInput from "@/Components/TextInput.vue";
import DatePickerField from '@/Components/DatePickerField.vue'; import CurrencyInput from "@/Components/CurrencyInput.vue";
import { useForm } from '@inertiajs/vue3'; import DatePickerField from "@/Components/DatePickerField.vue";
import { watch, nextTick, ref as vRef } from 'vue'; import { useForm } from "@inertiajs/vue3";
import { watch, nextTick, ref as vRef } from "vue";
const props = defineProps({ const props = defineProps({
client_case: Object, client_case: Object,
show: { type: Boolean, default: false }, show: { type: Boolean, default: false },
types: Array, types: Array,
account_types: { type: Array, default: () => [] }, account_types: { type: Array, default: () => [] },
// Optional: when provided, drawer acts as edit mode // Optional: when provided, drawer acts as edit mode
contract: { type: Object, default: null }, contract: { type: Object, default: null },
}); });
console.log(props.types); console.log(props.types);
const emit = defineEmits(['close']); const emit = defineEmits(["close"]);
const close = () => { const close = () => {
// Clear any previous validation warnings when closing // Clear any previous validation warnings when closing
formContract.clearErrors() formContract.clearErrors();
formContract.recentlySuccessful = false formContract.recentlySuccessful = false;
emit('close') emit("close");
} };
// form state for create or edit // form state for create or edit
const formContract = useForm({ const formContract = useForm({
client_case_uuid: props.client_case.uuid, client_case_uuid: props.client_case.uuid,
uuid: props.contract?.uuid ?? null, uuid: props.contract?.uuid ?? null,
reference: props.contract?.reference ?? '', reference: props.contract?.reference ?? "",
start_date: props.contract?.start_date ?? new Date().toISOString(), start_date: props.contract?.start_date ?? new Date().toISOString(),
type_id: (props.contract?.type_id ?? props.contract?.type?.id) ?? props.types[0].id, type_id: props.contract?.type_id ?? props.contract?.type?.id ?? props.types[0].id,
description: props.contract?.description ?? '', description: props.contract?.description ?? "",
// nested account fields, if exists // nested account fields, if exists
initial_amount: props.contract?.account?.initial_amount ?? null, initial_amount: props.contract?.account?.initial_amount ?? null,
balance_amount: props.contract?.account?.balance_amount ?? null, balance_amount: props.contract?.account?.balance_amount ?? null,
account_type_id: props.contract?.account?.type_id ?? null, account_type_id: props.contract?.account?.type_id ?? null,
}); });
// keep form in sync when switching between create and edit // keep form in sync when switching between create and edit
const applyContract = (c) => { const applyContract = (c) => {
formContract.uuid = c?.uuid ?? null formContract.uuid = c?.uuid ?? null;
formContract.reference = c?.reference ?? '' formContract.reference = c?.reference ?? "";
formContract.start_date = c?.start_date ?? new Date().toISOString() formContract.start_date = c?.start_date ?? new Date().toISOString();
formContract.type_id = (c?.type_id ?? c?.type?.id) ?? props.types[0].id formContract.type_id = c?.type_id ?? c?.type?.id ?? props.types[0].id;
formContract.description = c?.description ?? '' formContract.description = c?.description ?? "";
formContract.initial_amount = c?.account?.initial_amount ?? null formContract.initial_amount = c?.account?.initial_amount ?? null;
formContract.balance_amount = c?.account?.balance_amount ?? null formContract.balance_amount = c?.account?.balance_amount ?? null;
formContract.account_type_id = c?.account?.type_id ?? null formContract.account_type_id = c?.account?.type_id ?? null;
} };
watch(() => props.contract, (c) => { watch(
applyContract(c) () => props.contract,
}) (c) => {
applyContract(c);
}
);
watch(() => props.show, (open) => { watch(
() => props.show,
(open) => {
if (open && !props.contract) { if (open && !props.contract) {
// reset for create // reset for create
applyContract(null) applyContract(null);
} }
if (!open) { if (!open) {
// Ensure warnings are cleared when dialog hides // Ensure warnings are cleared when dialog hides
formContract.clearErrors() formContract.clearErrors();
formContract.recentlySuccessful = false formContract.recentlySuccessful = false;
} }
}) }
);
// optional: focus the reference input when a reference validation error appears // optional: focus the reference input when a reference validation error appears
const contractRefInput = vRef(null) const contractRefInput = vRef(null);
watch(() => formContract.errors.reference, async (err) => { watch(
() => formContract.errors.reference,
async (err) => {
if (err && props.show) { if (err && props.show) {
await nextTick() await nextTick();
try { contractRefInput.value?.focus?.() } catch (e) {} try {
contractRefInput.value?.focus?.();
} catch (e) {}
} }
}) }
);
const storeOrUpdate = () => { const storeOrUpdate = () => {
const isEdit = !!formContract.uuid const isEdit = !!formContract.uuid;
const options = { const options = {
onBefore: () => { onBefore: () => {
formContract.start_date = formContract.start_date formContract.start_date = formContract.start_date;
}, },
onSuccess: () => { onSuccess: () => {
close() close();
// keep state clean; reset to initial // keep state clean; reset to initial
if (!isEdit) formContract.reset() if (!isEdit) formContract.reset();
}, },
preserveScroll: true, 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 = {} formContract.post(postUrl, options);
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> </script>
<template> <template>
<DialogModal <DialogModal :show="show" @close="close">
:show="show" <template #title>{{
@close="close" formContract.uuid ? "Uredi pogodbo" : "Dodaj pogodbo"
> }}</template>
<template #title>{{ formContract.uuid ? 'Uredi pogodbo' : 'Dodaj pogodbo' }}</template> <template #content>
<template #content> <form @submit.prevent="storeOrUpdate">
<form @submit.prevent="storeOrUpdate"> <div
<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"> v-if="formContract.errors.reference"
{{ formContract.errors.reference }} class="mb-4 rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
</div> >
<SectionTitle class="mt-4 border-b mb-4"> {{ formContract.errors.reference }}
<template #title> </div>
Pogodba <SectionTitle class="mt-4 border-b mb-4">
</template> <template #title> Pogodba </template>
</SectionTitle> </SectionTitle>
<div class="col-span-6 sm:col-span-4"> <div class="col-span-6 sm:col-span-4">
<InputLabel for="contractRef" value="Referenca"/> <InputLabel for="contractRef" value="Referenca" />
<TextInput <TextInput
id="contractRef" id="contractRef"
ref="contractRefInput" ref="contractRefInput"
v-model="formContract.reference" v-model="formContract.reference"
type="text" type="text"
:class="['mt-1 block w-full', formContract.errors.reference ? 'border-red-500 focus:border-red-500 focus:ring-red-500' : '']" :class="[
autocomplete="contract-reference" 'mt-1 block w-full',
/> formContract.errors.reference
<InputError :message="formContract.errors.reference" /> ? 'border-red-500 focus:border-red-500 focus:ring-red-500'
</div> : '',
<DatePickerField ]"
id="contractStartDate" autocomplete="contract-reference"
label="Datum pričetka" />
v-model="formContract.start_date" <InputError :message="formContract.errors.reference" />
format="dd.MM.yyyy" </div>
:enable-time-picker="false" <DatePickerField
/> id="contractStartDate"
<div class="col-span-6 sm:col-span-4"> label="Datum pričetka"
<InputLabel for="contractTypeSelect" value="Tip"/> v-model="formContract.start_date"
<select format="dd.MM.yyyy"
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" :enable-time-picker="false"
id="contractTypeSelect" />
v-model="formContract.type_id" <div class="col-span-6 sm:col-span-4">
> <InputLabel for="contractTypeSelect" value="Tip" />
<option v-for="t in types" :value="t.id">{{ t.name }}</option> <select
<!-- ... --> class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
</select> id="contractTypeSelect"
</div> v-model="formContract.type_id"
<div class="col-span-6 sm:col-span-4 mt-4"> >
<InputLabel for="contractDescription" value="Opis"/> <option v-for="t in types" :value="t.id">{{ t.name }}</option>
<textarea <!-- ... -->
id="contractDescription" </select>
v-model="formContract.description" </div>
class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" <div class="col-span-6 sm:col-span-4 mt-4">
rows="3" <InputLabel for="contractDescription" value="Opis" />
/> <textarea
</div> id="contractDescription"
<SectionTitle class="mt-6 border-b mb-4"> v-model="formContract.description"
<template #title> class="mt-1 block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
Račun rows="3"
</template> />
</SectionTitle> </div>
<div class="col-span-6 sm:col-span-4"> <SectionTitle class="mt-6 border-b mb-4">
<InputLabel for="accountTypeSelect" value="Tip računa"/> <template #title> Račun </template>
<select </SectionTitle>
id="accountTypeSelect" <div class="col-span-6 sm:col-span-4">
v-model="formContract.account_type_id" <InputLabel for="accountTypeSelect" value="Tip računa" />
class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm" <select
> id="accountTypeSelect"
<option :value="null">—</option> v-model="formContract.account_type_id"
<option v-for="at in account_types" :key="at.id" :value="at.id">{{ at.name ?? ('#' + at.id) }}</option> class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
</select> >
<InputError :message="formContract.errors.account_type_id" /> <option :value="null">—</option>
</div> <option v-for="at in account_types" :key="at.id" :value="at.id">
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> {{ at.name ?? "#" + at.id }}
<div> </option>
<InputLabel for="initialAmount" value="Predani znesek"/> </select>
<TextInput <InputError :message="formContract.errors.account_type_id" />
id="initialAmount" </div>
v-model.number="formContract.initial_amount" <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
type="number" <div>
step="0.01" <InputLabel for="initialAmount" value="Predani znesek" />
class="mt-1 block w-full" <CurrencyInput id="initialAmount" v-model="formContract.initial_amount" />
autocomplete="off" </div>
/> <div>
</div> <InputLabel for="balanceAmount" value="Odprti znesek" />
<div> <CurrencyInput id="balanceAmount" v-model="formContract.balance_amount" />
<InputLabel for="balanceAmount" value="Odprti znesek"/> </div>
<TextInput </div>
id="balanceAmount" <div class="flex justify-end mt-4">
v-model.number="formContract.balance_amount" <ActionMessage :on="formContract.recentlySuccessful" class="me-3">
type="number" Shranjuje.
step="0.01" </ActionMessage>
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"> <PrimaryButton
{{ formContract.uuid ? 'Posodobi' : 'Shrani' }} :class="{ 'opacity-25': formContract.processing }"
</PrimaryButton> :disabled="formContract.processing"
</div> >
</form> {{ formContract.uuid ? "Posodobi" : "Shrani" }}
</template> </PrimaryButton>
</DialogModal> </div>
</form>
</template> </template>
</DialogModal>
</template>

32
resources/js/Pages/Cases/Partials/PaymentDialog.vue
View File

@ -1,5 +1,6 @@
<script setup> <script setup>
import DialogModal from "@/Components/DialogModal.vue"; import DialogModal from "@/Components/DialogModal.vue";
import CurrencyInput from "@/Components/CurrencyInput.vue";
const props = defineProps({ const props = defineProps({
show: { type: Boolean, default: false }, show: { type: Boolean, default: false },
@ -19,12 +20,12 @@ const onSubmit = () => emit("submit");
<div class="space-y-3"> <div class="space-y-3">
<div> <div>
<label class="block text-sm text-gray-700 mb-1">Znesek</label> <label class="block text-sm text-gray-700 mb-1">Znesek</label>
<input <CurrencyInput
type="number" id="paymentAmount"
step="0.01" v-model="form.amount"
min="0" :precision="{ min: 0, max: 2 }"
v-model.number="form.amount" placeholder="0,00"
class="w-full rounded border-gray-300" class="w-full"
/> />
<div v-if="form.errors?.amount" class="text-sm text-red-600 mt-0.5"> <div v-if="form.errors?.amount" class="text-sm text-red-600 mt-0.5">
{{ form.errors.amount }} {{ form.errors.amount }}
@ -45,7 +46,11 @@ const onSubmit = () => emit("submit");
</div> </div>
<div class="flex-1"> <div class="flex-1">
<label class="block text-sm text-gray-700 mb-1">Datum</label> <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"> <div v-if="form.errors?.paid_at" class="text-sm text-red-600 mt-0.5">
{{ form.errors.paid_at }} {{ form.errors.paid_at }}
</div> </div>
@ -53,7 +58,11 @@ const onSubmit = () => emit("submit");
</div> </div>
<div> <div>
<label class="block text-sm text-gray-700 mb-1">Sklic</label> <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"> <div v-if="form.errors?.reference" class="text-sm text-red-600 mt-0.5">
{{ form.errors.reference }} {{ form.errors.reference }}
</div> </div>
@ -61,7 +70,11 @@ const onSubmit = () => emit("submit");
</div> </div>
</template> </template>
<template #footer> <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 Prekliči
</button> </button>
<button <button
@ -74,5 +87,4 @@ const onSubmit = () => emit("submit");
</button> </button>
</template> </template>
</DialogModal> </DialogModal>
</template> </template>