Dev branch
This commit is contained in:
Simon Pocrnjič
@@ -1,15 +1,22 @@
|
||||
<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 CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
|
||||
import UpdateDialog from "@/Components/Dialogs/UpdateDialog.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 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,
|
||||
@@ -20,8 +27,6 @@ const props = defineProps({
|
||||
contract: { type: Object, default: null },
|
||||
});
|
||||
|
||||
console.log(props.types);
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
const close = () => {
|
||||
@@ -155,11 +160,128 @@ const storeOrUpdate = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal :show="show" @close="close">
|
||||
<template #title>{{
|
||||
formContract.uuid ? "Uredi pogodbo" : "Dodaj pogodbo"
|
||||
}}</template>
|
||||
<template #content>
|
||||
<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"
|
||||
@@ -170,90 +292,98 @@ const storeOrUpdate = () => {
|
||||
<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 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>
|
||||
<InputLabel for="balanceAmount" value="Odprti znesek" />
|
||||
<CurrencyInput id="balanceAmount" v-model="formContract.balance_amount" />
|
||||
|
||||
<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>
|
||||
<div class="flex justify-end mt-4">
|
||||
<ActionMessage :on="formContract.recentlySuccessful" class="me-3">
|
||||
|
||||
<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>
|
||||
|
||||
<PrimaryButton
|
||||
:class="{ 'opacity-25': formContract.processing }"
|
||||
:disabled="formContract.processing"
|
||||
>
|
||||
{{ formContract.uuid ? "Posodobi" : "Shrani" }}
|
||||
</PrimaryButton>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</DialogModal>
|
||||
</UpdateDialog>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user