83 lines
2.3 KiB
Vue
83 lines
2.3 KiB
Vue
<script setup>
|
|
import CreateDialog from "@/Components/Dialogs/CreateDialog.vue";
|
|
import CurrencyInput from "@/Components/CurrencyInput.vue";
|
|
import { Label } from "@/Components/ui/label";
|
|
import { Input } from "@/Components/ui/input";
|
|
import DatePicker from "@/Components/DatePicker.vue";
|
|
|
|
const props = defineProps({
|
|
show: { type: Boolean, default: false },
|
|
form: { type: Object, required: true },
|
|
});
|
|
|
|
const emit = defineEmits(["close", "submit"]);
|
|
|
|
const onClose = () => emit("close");
|
|
const onSubmit = () => emit("submit");
|
|
</script>
|
|
|
|
<template>
|
|
<CreateDialog
|
|
:show="show"
|
|
title="Dodaj obrok"
|
|
confirm-text="Shrani"
|
|
:processing="form.processing"
|
|
@close="onClose"
|
|
@confirm="onSubmit"
|
|
>
|
|
<div class="space-y-4">
|
|
<div class="space-y-2">
|
|
<Label for="installmentAmount">Znesek</Label>
|
|
<CurrencyInput
|
|
id="installmentAmount"
|
|
v-model="form.amount"
|
|
:precision="{ min: 0, max: 2 }"
|
|
placeholder="0,00"
|
|
class="w-full"
|
|
/>
|
|
<p v-if="form.errors?.amount" class="text-sm text-red-600">
|
|
{{ form.errors.amount }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="space-y-2">
|
|
<Label for="installmentCurrency">Valuta</Label>
|
|
<Input
|
|
id="installmentCurrency"
|
|
type="text"
|
|
v-model="form.currency"
|
|
maxlength="3"
|
|
placeholder="EUR"
|
|
/>
|
|
<p v-if="form.errors?.currency" class="text-sm text-red-600">
|
|
{{ form.errors.currency }}
|
|
</p>
|
|
</div>
|
|
<div class="space-y-2">
|
|
<Label for="installmentDate">Datum</Label>
|
|
<DatePicker
|
|
id="installmentDate"
|
|
v-model="form.installment_at"
|
|
format="dd.MM.yyyy"
|
|
:error="form.errors?.installment_at"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-2">
|
|
<Label for="installmentReference">Sklic</Label>
|
|
<Input
|
|
id="installmentReference"
|
|
type="text"
|
|
v-model="form.reference"
|
|
placeholder="Sklic"
|
|
/>
|
|
<p v-if="form.errors?.reference" class="text-sm text-red-600">
|
|
{{ form.errors.reference }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CreateDialog>
|
|
</template>
|