153 lines
4.1 KiB
Vue
153 lines
4.1 KiB
Vue
<script setup>
|
|
import DialogModal from "@/Components/DialogModal.vue";
|
|
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
|
import { faTrash } from "@fortawesome/free-solid-svg-icons";
|
|
import { ref, watch, computed } from "vue";
|
|
import axios from "axios";
|
|
import { router } from "@inertiajs/vue3";
|
|
|
|
const props = defineProps({
|
|
show: { type: Boolean, default: false },
|
|
contract: { type: Object, default: null },
|
|
});
|
|
|
|
const emit = defineEmits(["close"]);
|
|
|
|
const payments = ref([]);
|
|
const loading = ref(false);
|
|
|
|
const accountId = computed(() => props.contract?.account?.id ?? null);
|
|
const contractRef = computed(() => props.contract?.reference || "—");
|
|
|
|
async function loadPayments() {
|
|
if (!accountId.value) {
|
|
payments.value = [];
|
|
return;
|
|
}
|
|
loading.value = true;
|
|
try {
|
|
const { data } = await axios.get(
|
|
route("accounts.payments.list", { account: accountId.value })
|
|
);
|
|
payments.value = data.payments || [];
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
}
|
|
|
|
function close() {
|
|
emit("close");
|
|
}
|
|
|
|
function formatDate(d) {
|
|
if (!d) return "—";
|
|
const dt = new Date(d);
|
|
return isNaN(dt.getTime()) ? "—" : dt.toLocaleDateString("de");
|
|
}
|
|
|
|
function fmtMoney(amount, currency = "EUR") {
|
|
const num = typeof amount === "string" ? Number(amount) : amount;
|
|
return new Intl.NumberFormat("de-DE", { style: "currency", currency }).format(num ?? 0);
|
|
}
|
|
|
|
async function deletePayment(paymentId) {
|
|
if (!accountId.value) return;
|
|
await router.delete(
|
|
route("accounts.payments.destroy", { account: accountId.value, payment: paymentId }),
|
|
{
|
|
preserveScroll: true,
|
|
preserveState: true,
|
|
only: ["contracts", "activities"],
|
|
onSuccess: async () => {
|
|
await loadPayments();
|
|
},
|
|
onError: async () => {
|
|
await loadPayments();
|
|
},
|
|
}
|
|
);
|
|
}
|
|
|
|
watch(
|
|
() => props.show,
|
|
async (visible) => {
|
|
if (visible) {
|
|
await loadPayments();
|
|
} else {
|
|
payments.value = [];
|
|
}
|
|
}
|
|
);
|
|
|
|
watch(
|
|
() => props.contract?.account?.id,
|
|
async () => {
|
|
if (props.show) {
|
|
await loadPayments();
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<DialogModal :show="show" @close="close">
|
|
<template #title>
|
|
Plačila za pogodbo <span class="text-gray-600">{{ contractRef }}</span>
|
|
</template>
|
|
<template #content>
|
|
<div>
|
|
<div v-if="loading" class="text-sm text-gray-500">Nalaganje…</div>
|
|
<template v-else>
|
|
<div v-if="payments.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 payments"
|
|
:key="p.id"
|
|
class="px-3 py-2 flex items-center justify-between"
|
|
>
|
|
<div>
|
|
<div class="text-sm text-gray-800">
|
|
{{ fmtMoney(p.amount, p.currency || "EUR") }}
|
|
</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>
|
|
</template>
|
|
<template #footer>
|
|
<div class="mt-2 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="close"
|
|
>
|
|
Zapri
|
|
</button>
|
|
</div>
|
|
</template>
|
|
</DialogModal>
|
|
</template>
|