add payment option
This commit is contained in:
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/Layouts/AppLayout.vue'
|
||||
import { useForm, Link } from '@inertiajs/vue3'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
account: Object,
|
||||
bookings: Array,
|
||||
})
|
||||
|
||||
const showCreate = ref(false)
|
||||
const form = useForm({
|
||||
amount: '',
|
||||
type: 'credit',
|
||||
description: '',
|
||||
booked_at: '',
|
||||
payment_id: null,
|
||||
})
|
||||
|
||||
function openCreate() {
|
||||
form.reset()
|
||||
form.clearErrors()
|
||||
showCreate.value = true
|
||||
}
|
||||
function closeCreate() {
|
||||
showCreate.value = false
|
||||
form.clearErrors()
|
||||
}
|
||||
function submit() {
|
||||
form.post(route('accounts.bookings.store', { account: props.account.id }), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => closeCreate(),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :title="`Bookings - ${account.reference || account.id}`">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Bookings · {{ account.reference || account.id }}</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<Link :href="route('accounts.payments.index', { account: account.id })" class="text-sm underline">Payments</Link>
|
||||
<button class="px-3 py-2 bg-emerald-600 text-white rounded" @click="openCreate">New Booking</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="py-6">
|
||||
<div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white shadow sm:rounded-lg p-6">
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead class="border-b text-gray-500">
|
||||
<tr>
|
||||
<th class="py-2 pr-4">Booked at</th>
|
||||
<th class="py-2 pr-4">Type</th>
|
||||
<th class="py-2 pr-4">Amount</th>
|
||||
<th class="py-2 pr-4">Description</th>
|
||||
<th class="py-2 pr-0 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="b in bookings" :key="b.id" class="border-b last:border-0">
|
||||
<td class="py-2 pr-4">{{ b.booked_at ? new Date(b.booked_at).toLocaleString() : '-' }}</td>
|
||||
<td class="py-2 pr-4">
|
||||
<span :class="['px-2 py-0.5 rounded text-xs', b.type === 'credit' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-800']">
|
||||
{{ b.type }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="py-2 pr-4 font-medium">{{ (b.amount_cents / 100).toFixed(2) }}</td>
|
||||
<td class="py-2 pr-4">{{ b.description || '-' }}</td>
|
||||
<td class="py-2 pr-0 text-right">
|
||||
<form :action="route('accounts.bookings.destroy', { account: account.id, booking: b.id })" method="post" @submit.prevent="$inertia.delete(route('accounts.bookings.destroy', { account: account.id, booking: b.id }), { preserveScroll: true })">
|
||||
<button type="submit" class="text-red-600 hover:underline">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!bookings?.length">
|
||||
<td colspan="5" class="py-6 text-center text-gray-500">No bookings.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showCreate" class="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div class="absolute inset-0 bg-black/30" @click="closeCreate"></div>
|
||||
<div class="relative bg-white rounded shadow-lg w-[32rem] max-w-[90%] p-5">
|
||||
<div class="text-lg font-semibold mb-2">New Booking</div>
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<div class="flex gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm text-gray-700 mb-1">Type</label>
|
||||
<select v-model="form.type" class="w-full border rounded px-3 py-2">
|
||||
<option value="credit">Credit</option>
|
||||
<option value="debit">Debit</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm text-gray-700 mb-1">Amount</label>
|
||||
<input type="number" step="0.01" v-model="form.amount" class="w-full border rounded px-3 py-2" :class="form.errors.amount && 'border-red-500'" />
|
||||
<div v-if="form.errors.amount" class="text-xs text-red-600 mt-1">{{ form.errors.amount }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-700 mb-1">Booked at</label>
|
||||
<input type="datetime-local" v-model="form.booked_at" class="w-full border rounded px-3 py-2" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-700 mb-1">Description</label>
|
||||
<input type="text" v-model="form.description" class="w-full border rounded px-3 py-2" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-2 mt-5">
|
||||
<button class="px-3 py-1.5 border rounded" @click="closeCreate" :disabled="form.processing">Cancel</button>
|
||||
<button class="px-3 py-1.5 rounded text-white bg-emerald-600 disabled:opacity-60" @click="submit" :disabled="form.processing">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,115 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/Layouts/AppLayout.vue'
|
||||
import { useForm, Link } from '@inertiajs/vue3'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
account: Object,
|
||||
payments: Array,
|
||||
})
|
||||
|
||||
const showCreate = ref(false)
|
||||
const form = useForm({
|
||||
amount: '',
|
||||
currency: 'EUR',
|
||||
reference: '',
|
||||
paid_at: '',
|
||||
})
|
||||
|
||||
function openCreate() {
|
||||
form.reset()
|
||||
form.clearErrors()
|
||||
showCreate.value = true
|
||||
}
|
||||
|
||||
function closeCreate() {
|
||||
showCreate.value = false
|
||||
form.clearErrors()
|
||||
}
|
||||
|
||||
function submit() {
|
||||
form.post(route('accounts.payments.store', { account: props.account.id }), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => closeCreate(),
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :title="`Payments - ${account.reference || account.id}`">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Payments · {{ account.reference || account.id }}</h2>
|
||||
<div class="flex items-center gap-2">
|
||||
<Link :href="route('accounts.bookings.index', { account: account.id })" class="text-sm underline">Bookings</Link>
|
||||
<button class="px-3 py-2 bg-emerald-600 text-white rounded" @click="openCreate">New Payment</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="py-6">
|
||||
<div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white shadow sm:rounded-lg p-6">
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead class="border-b text-gray-500">
|
||||
<tr>
|
||||
<th class="py-2 pr-4">Paid at</th>
|
||||
<th class="py-2 pr-4">Reference</th>
|
||||
<th class="py-2 pr-4">Amount</th>
|
||||
<th class="py-2 pr-0 text-right">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="p in payments" :key="p.id" class="border-b last:border-0">
|
||||
<td class="py-2 pr-4">{{ p.paid_at ? new Date(p.paid_at).toLocaleString() : '-' }}</td>
|
||||
<td class="py-2 pr-4">{{ p.reference || '-' }}</td>
|
||||
<td class="py-2 pr-4 font-medium">{{ Number(p.amount).toFixed(2) }} {{ p.currency }}</td>
|
||||
<td class="py-2 pr-0 text-right">
|
||||
<form :action="route('accounts.payments.destroy', { account: account.id, payment: p.id })" method="post" @submit.prevent="$inertia.delete(route('accounts.payments.destroy', { account: account.id, payment: p.id }), { preserveScroll: true })">
|
||||
<button type="submit" class="text-red-600 hover:underline">Delete</button>
|
||||
</form>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!payments?.length">
|
||||
<td colspan="4" class="py-6 text-center text-gray-500">No payments.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showCreate" class="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div class="absolute inset-0 bg-black/30" @click="closeCreate"></div>
|
||||
<div class="relative bg-white rounded shadow-lg w-[32rem] max-w-[90%] p-5">
|
||||
<div class="text-lg font-semibold mb-2">New Payment</div>
|
||||
<div class="grid grid-cols-1 gap-3">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-700 mb-1">Amount</label>
|
||||
<input type="number" step="0.01" v-model="form.amount" class="w-full border rounded px-3 py-2" :class="form.errors.amount && 'border-red-500'" />
|
||||
<div v-if="form.errors.amount" class="text-xs text-red-600 mt-1">{{ form.errors.amount }}</div>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm text-gray-700 mb-1">Currency</label>
|
||||
<input type="text" maxlength="3" v-model="form.currency" class="w-full border rounded px-3 py-2 uppercase" />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm text-gray-700 mb-1">Paid at</label>
|
||||
<input type="datetime-local" v-model="form.paid_at" class="w-full border rounded px-3 py-2" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-700 mb-1">Reference</label>
|
||||
<input type="text" v-model="form.reference" class="w-full border rounded px-3 py-2" :class="form.errors.reference && 'border-red-500'" />
|
||||
<div v-if="form.errors.reference" class="text-xs text-red-600 mt-1">{{ form.errors.reference }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-2 mt-5">
|
||||
<button class="px-3 py-1.5 border rounded" @click="closeCreate" :disabled="form.processing">Cancel</button>
|
||||
<button class="px-3 py-1.5 rounded text-white bg-emerald-600 disabled:opacity-60" @click="submit" :disabled="form.processing">Create</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
import Dropdown from "@/Components/Dropdown.vue";
|
||||
import CaseObjectCreateDialog from "./CaseObjectCreateDialog.vue";
|
||||
import CaseObjectsDialog from "./CaseObjectsDialog.vue";
|
||||
import PaymentDialog from "./PaymentDialog.vue";
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import {
|
||||
faCircleInfo,
|
||||
@@ -48,7 +49,8 @@ const onAddActivity = (c) => emit("add-activity", c);
|
||||
|
||||
// CaseObject dialog state
|
||||
import { ref, computed } from "vue";
|
||||
import { router } from "@inertiajs/vue3";
|
||||
import { router, useForm } from "@inertiajs/vue3";
|
||||
import axios from "axios";
|
||||
const showObjectDialog = ref(false);
|
||||
const showObjectsList = ref(false);
|
||||
const selectedContract = ref(null);
|
||||
@@ -144,6 +146,81 @@ const doChangeSegment = () => {
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
// Add Payment modal state
|
||||
const showPaymentDialog = ref(false);
|
||||
const paymentContract = ref(null);
|
||||
const paymentForm = useForm({
|
||||
amount: null,
|
||||
currency: "EUR",
|
||||
paid_at: null,
|
||||
reference: "",
|
||||
});
|
||||
const openPaymentDialog = (c) => {
|
||||
paymentContract.value = c;
|
||||
paymentForm.reset();
|
||||
paymentForm.paid_at = todayStr.value;
|
||||
showPaymentDialog.value = true;
|
||||
};
|
||||
const closePaymentDialog = () => {
|
||||
showPaymentDialog.value = false;
|
||||
paymentContract.value = null;
|
||||
};
|
||||
const submitPayment = () => {
|
||||
if (!paymentContract.value?.account?.id) {
|
||||
return;
|
||||
}
|
||||
const accountId = paymentContract.value.account.id;
|
||||
paymentForm.post(route("accounts.payments.store", { account: accountId }), {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
closePaymentDialog();
|
||||
// Reload contracts and activities (new payment may create an activity)
|
||||
router.reload({ only: ["contracts", "activities"] });
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
// View Payments dialog state and logic
|
||||
const showPaymentsDialog = ref(false);
|
||||
const paymentsForContract = ref([]);
|
||||
const paymentsLoading = ref(false);
|
||||
const openPaymentsDialog = async (c) => {
|
||||
selectedContract.value = c;
|
||||
showPaymentsDialog.value = true;
|
||||
await loadPayments();
|
||||
};
|
||||
const closePaymentsDialog = () => {
|
||||
showPaymentsDialog.value = false;
|
||||
selectedContract.value = null;
|
||||
paymentsForContract.value = [];
|
||||
};
|
||||
const loadPayments = async () => {
|
||||
if (!selectedContract.value?.account?.id) return;
|
||||
paymentsLoading.value = true;
|
||||
try {
|
||||
const { data } = await axios.get(route("accounts.payments.list", { account: selectedContract.value.account.id }));
|
||||
paymentsForContract.value = data.payments || [];
|
||||
} finally {
|
||||
paymentsLoading.value = false;
|
||||
}
|
||||
};
|
||||
const deletePayment = (paymentId) => {
|
||||
if (!selectedContract.value?.account?.id) return;
|
||||
const accountId = selectedContract.value.account.id;
|
||||
router.delete(route("accounts.payments.destroy", { account: accountId, payment: paymentId }), {
|
||||
preserveScroll: true,
|
||||
preserveState: true,
|
||||
only: ["contracts", "activities"],
|
||||
onSuccess: async () => {
|
||||
await loadPayments();
|
||||
},
|
||||
onError: async () => {
|
||||
// Even if there is an error, try to refresh payments list
|
||||
await loadPayments();
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -399,6 +476,15 @@ const doChangeSegment = () => {
|
||||
<span>Briši</span>
|
||||
</button>
|
||||
<div class="my-1 border-t border-gray-100" />
|
||||
<button
|
||||
type="button"
|
||||
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
||||
@click="openPaymentsDialog(c)"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faCircleInfo" class="h-4 w-4 text-gray-600" />
|
||||
<span>Plačila</span>
|
||||
</button>
|
||||
<div class="my-1 border-t border-gray-100" />
|
||||
<button
|
||||
type="button"
|
||||
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
||||
@@ -407,6 +493,15 @@ const doChangeSegment = () => {
|
||||
<FontAwesomeIcon :icon="faListCheck" class="h-4 w-4 text-gray-600" />
|
||||
<span>Aktivnost</span>
|
||||
</button>
|
||||
<div class="my-1 border-t border-gray-100" />
|
||||
<button
|
||||
type="button"
|
||||
class="w-full px-3 py-2 text-left text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
||||
@click="openPaymentDialog(c)"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faPlus" class="h-4 w-4 text-gray-600" />
|
||||
<span>Dodaj plačilo</span>
|
||||
</button>
|
||||
</template>
|
||||
</Dropdown>
|
||||
</FwbTableCell>
|
||||
@@ -460,4 +555,55 @@ const doChangeSegment = () => {
|
||||
:client_case="client_case"
|
||||
:contract="selectedContract"
|
||||
/>
|
||||
|
||||
<PaymentDialog :show="showPaymentDialog" :form="paymentForm" @close="closePaymentDialog" @submit="submitPayment" />
|
||||
|
||||
<!-- View Payments Dialog -->
|
||||
<div v-if="showPaymentsDialog" class="fixed inset-0 z-50 flex items-center justify-center bg-black/30">
|
||||
<div class="bg-white rounded-lg shadow-lg p-4 w-full max-w-lg">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-base font-medium text-gray-800">
|
||||
Plačila za pogodbo
|
||||
<span class="text-gray-600">{{ selectedContract?.reference }}</span>
|
||||
</div>
|
||||
<button type="button" class="text-sm text-gray-500 hover:text-gray-700" @click="closePaymentsDialog">Zapri</button>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<div v-if="paymentsLoading" class="text-sm text-gray-500">Nalaganje…</div>
|
||||
<template v-else>
|
||||
<div v-if="paymentsForContract.length === 0" class="text-sm text-gray-500">Ni plačil.</div>
|
||||
<div v-else class="divide-y divide-gray-100 border rounded">
|
||||
<div v-for="p in paymentsForContract" :key="p.id" class="px-3 py-2 flex items-center justify-between">
|
||||
<div>
|
||||
<div class="text-sm text-gray-800">
|
||||
{{
|
||||
Intl.NumberFormat('de-DE', { style: 'currency', currency: p.currency || 'EUR' }).format(p.amount ?? 0)
|
||||
}}
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
<span>{{ formatDate(p.paid_at) }}</span>
|
||||
<span v-if="p.reference" class="ml-2">Sklic: {{ p.reference }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center gap-1 px-2 py-1 rounded text-red-700 hover:bg-red-50"
|
||||
@click="deletePayment(p.id)"
|
||||
title="Izbriši plačilo"
|
||||
>
|
||||
<FontAwesomeIcon :icon="faTrash" class="h-4 w-4 text-red-600" />
|
||||
<span class="text-sm">Briši</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="mt-4 flex justify-end gap-2">
|
||||
<button type="button" class="px-3 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="loadPayments">Osveži</button>
|
||||
<button type="button" class="px-3 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" @click="closePaymentsDialog">Zapri</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,78 @@
|
||||
<script setup>
|
||||
import DialogModal from "@/Components/DialogModal.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>
|
||||
<DialogModal :show="show" @close="onClose">
|
||||
<template #title>Dodaj plačilo</template>
|
||||
<template #content>
|
||||
<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"
|
||||
/>
|
||||
<div v-if="form.errors?.amount" class="text-sm text-red-600 mt-0.5">
|
||||
{{ form.errors.amount }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<div class="flex-1">
|
||||
<label class="block text-sm text-gray-700 mb-1">Valuta</label>
|
||||
<input
|
||||
type="text"
|
||||
v-model="form.currency"
|
||||
class="w-full rounded border-gray-300"
|
||||
maxlength="3"
|
||||
/>
|
||||
<div v-if="form.errors?.currency" class="text-sm text-red-600 mt-0.5">
|
||||
{{ form.errors.currency }}
|
||||
</div>
|
||||
</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" />
|
||||
<div v-if="form.errors?.paid_at" class="text-sm text-red-600 mt-0.5">
|
||||
{{ form.errors.paid_at }}
|
||||
</div>
|
||||
</div>
|
||||
</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" />
|
||||
<div v-if="form.errors?.reference" class="text-sm text-red-600 mt-0.5">
|
||||
{{ form.errors.reference }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
<button type="button" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="onClose">
|
||||
Prekliči
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700"
|
||||
:disabled="form.processing"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Shrani
|
||||
</button>
|
||||
</template>
|
||||
</DialogModal>
|
||||
|
||||
</template>
|
||||
@@ -14,6 +14,11 @@ import { Link } from '@inertiajs/vue3';
|
||||
<p class="text-sm text-gray-600 mb-4">Manage segments used across the app.</p>
|
||||
<Link :href="route('settings.segments')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Segments</Link>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold mb-2">Payments</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">Defaults for payments and auto-activity.</p>
|
||||
<Link :href="route('settings.payment.edit')" class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">Open Payment Settings</Link>
|
||||
</div>
|
||||
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
||||
<h3 class="text-lg font-semibold mb-2">Workflow</h3>
|
||||
<p class="text-sm text-gray-600 mb-4">Configure actions and decisions relationships.</p>
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
<script setup>
|
||||
import AppLayout from '@/Layouts/AppLayout.vue'
|
||||
import { useForm } from '@inertiajs/vue3'
|
||||
import { computed, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
setting: Object,
|
||||
decisions: Array,
|
||||
actions: Array,
|
||||
})
|
||||
|
||||
const form = useForm({
|
||||
default_currency: props.setting?.default_currency ?? 'EUR',
|
||||
create_activity_on_payment: !!props.setting?.create_activity_on_payment,
|
||||
default_action_id: props.setting?.default_action_id ?? null,
|
||||
default_decision_id: props.setting?.default_decision_id ?? null,
|
||||
activity_note_template: props.setting?.activity_note_template ?? 'Prejeto plačilo: {amount} {currency}',
|
||||
})
|
||||
|
||||
const filteredDecisions = computed(() => {
|
||||
const actionId = form.default_action_id
|
||||
if (!actionId) return []
|
||||
const action = props.actions?.find(a => a.id === actionId)
|
||||
if (!action || !action.decision_ids) return []
|
||||
const ids = new Set(action.decision_ids)
|
||||
return (props.decisions || []).filter(d => ids.has(d.id))
|
||||
})
|
||||
|
||||
watch(() => form.default_action_id, (newVal) => {
|
||||
if (!newVal) {
|
||||
form.default_decision_id = null
|
||||
} else {
|
||||
// If current decision not in filtered list, clear it
|
||||
const ids = new Set((filteredDecisions.value || []).map(d => d.id))
|
||||
if (!ids.has(form.default_decision_id)) {
|
||||
form.default_decision_id = null
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const submit = () => {
|
||||
form.put(route('settings.payment.update'), {
|
||||
preserveScroll: true,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout title="Nastavitve plačil">
|
||||
<template #header></template>
|
||||
<div class="max-w-3xl mx-auto p-6">
|
||||
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<h1 class="text-xl font-semibold text-gray-900">Nastavitve plačil</h1>
|
||||
|
||||
<div class="mt-6 grid gap-6">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-700 mb-1">Privzeta valuta</label>
|
||||
<input type="text" maxlength="3" v-model="form.default_currency" class="w-40 rounded border-gray-300" />
|
||||
<div v-if="form.errors.default_currency" class="text-sm text-red-600 mt-1">{{ form.errors.default_currency }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="inline-flex items-center gap-2">
|
||||
<input type="checkbox" v-model="form.create_activity_on_payment" />
|
||||
<span class="text-sm text-gray-700">Ustvari aktivnost ob dodanem plačilu</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label class="block text-sm text-gray-700 mb-1">Privzeto dejanje</label>
|
||||
<select v-model="form.default_action_id" class="w-full rounded border-gray-300">
|
||||
<option :value="null">— Brez —</option>
|
||||
<option v-for="a in actions" :key="a.id" :value="a.id">{{ a.name }}</option>
|
||||
</select>
|
||||
<div v-if="form.errors.default_action_id" class="text-sm text-red-600 mt-1">{{ form.errors.default_action_id }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm text-gray-700 mb-1">Privzeta odločitev</label>
|
||||
<select v-model="form.default_decision_id" class="w-full rounded border-gray-300" :disabled="!form.default_action_id">
|
||||
<option :value="null">— Najprej izberite dejanje —</option>
|
||||
<option v-for="d in filteredDecisions" :key="d.id" :value="d.id">{{ d.name }}</option>
|
||||
</select>
|
||||
<div v-if="form.errors.default_decision_id" class="text-sm text-red-600 mt-1">{{ form.errors.default_decision_id }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm text-gray-700 mb-1">Predloga opombe aktivnosti</label>
|
||||
<input type="text" v-model="form.activity_note_template" class="w-full rounded border-gray-300" />
|
||||
<p class="text-xs text-gray-500 mt-1">Podprti žetoni: {amount}, {currency}</p>
|
||||
<div v-if="form.errors.activity_note_template" class="text-sm text-red-600 mt-1">{{ form.errors.activity_note_template }}</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button type="button" class="px-4 py-2 rounded bg-gray-200 hover:bg-gray-300" @click="form.reset()">Ponastavi</button>
|
||||
<button type="button" class="px-4 py-2 rounded bg-indigo-600 text-white hover:bg-indigo-700" :disabled="form.processing" @click="submit">Shrani</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user