115 lines
3.7 KiB
Vue
115 lines
3.7 KiB
Vue
<script setup>
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import { Link } from "@inertiajs/vue3";
|
|
import { ref } from "vue";
|
|
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
|
|
|
const props = defineProps({
|
|
segment: Object,
|
|
contracts: Object, // LengthAwarePaginator payload from Laravel
|
|
});
|
|
|
|
// Initialize search from current URL so input reflects server filter
|
|
const search = ref(new URLSearchParams(window.location.search).get("search") || "");
|
|
|
|
// Column definitions for the server-driven table
|
|
const columns = [
|
|
{ key: "reference", label: "Pogodba", sortable: true },
|
|
{ key: "client_case", label: "Primer" },
|
|
{ key: "client", label: "Stranka" },
|
|
{ key: "type", label: "Vrsta" },
|
|
{ key: "start_date", label: "Začetek", sortable: true },
|
|
{ key: "end_date", label: "Konec", sortable: true },
|
|
{ key: "account", label: "Stanje", align: "right" },
|
|
];
|
|
|
|
function formatDate(value) {
|
|
if (!value) {
|
|
return "-";
|
|
}
|
|
const d = new Date(value);
|
|
if (isNaN(d)) return value;
|
|
return `${String(d.getDate()).padStart(2, "0")}.${String(d.getMonth() + 1).padStart(
|
|
2,
|
|
"0"
|
|
)}.${d.getFullYear()}`;
|
|
}
|
|
|
|
function formatCurrency(value) {
|
|
if (value === null || value === undefined) return "-";
|
|
const n = Number(value);
|
|
if (isNaN(n)) return String(value);
|
|
return (
|
|
n.toLocaleString("sl-SI", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +
|
|
" €"
|
|
);
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AppLayout :title="`Segment: ${segment?.name || ''}`">
|
|
<template #header> </template>
|
|
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-4">
|
|
<h2 class="text-lg">{{ segment.name }}</h2>
|
|
<div class="text-sm text-gray-600 mb-4">{{ segment?.description }}</div>
|
|
|
|
<DataTableServer
|
|
:columns="columns"
|
|
:rows="contracts?.data || []"
|
|
:meta="contracts || {}"
|
|
v-model:search="search"
|
|
route-name="segments.show"
|
|
:route-params="{ segment: segment?.id ?? segment }"
|
|
:only-props="['contracts']"
|
|
:page-size-options="[10, 25, 50]"
|
|
empty-text="Ni pogodb v tem segmentu."
|
|
row-key="uuid"
|
|
>
|
|
<!-- Primer (client_case) cell with link when available -->
|
|
<template #cell-client_case="{ row }">
|
|
<Link
|
|
v-if="row.client_case?.uuid"
|
|
:href="
|
|
route('clientCase.show', {
|
|
client_case: row.client_case.uuid,
|
|
segment: segment?.id ?? segment,
|
|
})
|
|
"
|
|
class="text-indigo-600 hover:underline"
|
|
>
|
|
{{ row.client_case?.person?.full_name || "Primer stranke" }}
|
|
</Link>
|
|
<span v-else>{{ row.client_case?.person?.full_name || "-" }}</span>
|
|
</template>
|
|
|
|
<!-- Stranka (client) name -->
|
|
<template #cell-client="{ row }">
|
|
{{ row.client?.person?.full_name || "-" }}
|
|
</template>
|
|
|
|
<!-- Vrsta (type) -->
|
|
<template #cell-type="{ row }">
|
|
{{ row.type?.name || "-" }}
|
|
</template>
|
|
|
|
<!-- Dates formatted -->
|
|
<template #cell-start_date="{ row }">
|
|
{{ formatDate(row.start_date) }}
|
|
</template>
|
|
<template #cell-end_date="{ row }">
|
|
{{ formatDate(row.end_date) }}
|
|
</template>
|
|
|
|
<!-- Account balance formatted -->
|
|
<template #cell-account="{ row }">
|
|
<div class="text-right">
|
|
{{ formatCurrency(row.account?.balance_amount) }}
|
|
</div>
|
|
</template>
|
|
</DataTableServer>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|