Changes to import and notifications
This commit is contained in:
Simon Pocrnjič
@@ -2,7 +2,7 @@
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { ref } from "vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import Pagination from "@/Components/Pagination.vue";
|
||||
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
||||
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
|
||||
import SectionTitle from "@/Components/SectionTitle.vue";
|
||||
|
||||
@@ -43,33 +43,14 @@ function applyDateFilter() {
|
||||
});
|
||||
}
|
||||
|
||||
function applySearch() {
|
||||
const params = Object.fromEntries(
|
||||
new URLSearchParams(window.location.search).entries()
|
||||
);
|
||||
if (fromDate.value) {
|
||||
params.from = fromDate.value;
|
||||
} else {
|
||||
delete params.from;
|
||||
}
|
||||
if (toDate.value) {
|
||||
params.to = toDate.value;
|
||||
} else {
|
||||
delete params.to;
|
||||
}
|
||||
if (search.value && search.value.trim() !== "") {
|
||||
params.search = search.value.trim();
|
||||
} else {
|
||||
delete params.search;
|
||||
}
|
||||
delete params.page;
|
||||
router.get(route("client.contracts", { uuid: props.client.uuid }), params, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
preserveScroll: true,
|
||||
});
|
||||
function clearDateFilter() {
|
||||
fromDate.value = "";
|
||||
toDate.value = "";
|
||||
applyDateFilter();
|
||||
}
|
||||
|
||||
// Search handled by DataTableServer toolbar; keep date filter applying
|
||||
|
||||
// Build params for navigating to client case show, including active segment if available
|
||||
function caseShowParams(contract) {
|
||||
const params = { client_case: contract?.client_case?.uuid };
|
||||
@@ -112,19 +93,36 @@ function formatDate(value) {
|
||||
</template>
|
||||
</SectionTitle>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center gap-3 text-sm">
|
||||
<Link
|
||||
:href="route('client.show', { uuid: client.uuid })"
|
||||
class="px-2 py-1 rounded hover:underline"
|
||||
>Primeri</Link
|
||||
>
|
||||
<span class="text-gray-300">|</span>
|
||||
<Link
|
||||
:href="route('client.contracts', { uuid: client.uuid })"
|
||||
class="px-2 py-1 rounded text-indigo-600 hover:underline"
|
||||
>Pogodbe</Link
|
||||
>
|
||||
</div>
|
||||
<nav class="mt-2 border-b border-gray-200">
|
||||
<ul class="flex gap-6 -mb-px">
|
||||
<li>
|
||||
<Link
|
||||
:href="route('client.show', { uuid: client.uuid })"
|
||||
:class="[
|
||||
'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
|
||||
route().current('client.show')
|
||||
? 'text-indigo-600 border-indigo-600'
|
||||
: 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
|
||||
]"
|
||||
>
|
||||
Primeri
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
:href="route('client.contracts', { uuid: client.uuid })"
|
||||
:class="[
|
||||
'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
|
||||
route().current('client.contracts')
|
||||
? 'text-indigo-600 border-indigo-600'
|
||||
: 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
|
||||
]"
|
||||
>
|
||||
Pogodbe
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,78 +169,61 @@ function formatDate(value) {
|
||||
class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
v-model="search"
|
||||
@keyup.enter="applySearch"
|
||||
placeholder="Išči po referenci ali imenu"
|
||||
class="rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm w-64"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="applySearch"
|
||||
class="inline-flex items-center px-3 py-2 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 rounded"
|
||||
class="inline-flex items-center px-3 py-2 text-sm font-medium rounded border border-gray-300 text-gray-700 hover:bg-gray-50 disabled:opacity-50"
|
||||
:disabled="!fromDate && !toDate"
|
||||
@click="clearDateFilter"
|
||||
title="Počisti datum"
|
||||
>
|
||||
Išči
|
||||
Počisti
|
||||
</button>
|
||||
</div>
|
||||
<!-- Search lives in DataTable toolbar -->
|
||||
</div>
|
||||
<div class="overflow-x-auto mt-3">
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 pr-4">Referenca</th>
|
||||
<th class="py-2 pr-4">Stranka</th>
|
||||
<th class="py-2 pr-4">Začetek</th>
|
||||
<th class="py-2 pr-4">Segment</th>
|
||||
<th class="py-2 pr-4 text-right">Stanje</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="contract in contracts.data"
|
||||
:key="contract.uuid"
|
||||
class="border-b last:border-0"
|
||||
>
|
||||
<td class="py-2 pr-4">
|
||||
<Link
|
||||
:href="route('clientCase.show', caseShowParams(contract))"
|
||||
class="text-indigo-600 hover:underline"
|
||||
>
|
||||
{{ contract.reference }}
|
||||
</Link>
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
{{ contract.client_case?.person?.full_name || "-" }}
|
||||
</td>
|
||||
<td class="py-2 pr-4">
|
||||
{{ formatDate(contract.start_date) }}
|
||||
</td>
|
||||
<td class="py-2 pr-4">{{ contract.segments?.[0]?.name || "-" }}</td>
|
||||
<td class="py-2 pr-4 text-right">
|
||||
{{
|
||||
new Intl.NumberFormat("sl-SI", {
|
||||
style: "currency",
|
||||
currency: "EUR",
|
||||
}).format(Number(contract.account?.balance_amount ?? 0))
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!contracts.data || contracts.data.length === 0">
|
||||
<td colspan="5" class="py-4 text-gray-500">Ni zadetkov.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<DataTableServer
|
||||
class="mt-3"
|
||||
:columns="[
|
||||
{ key: 'reference', label: 'Referenca', sortable: false },
|
||||
{ key: 'customer', label: 'Stranka', sortable: false },
|
||||
{ key: 'start', label: 'Začetek', sortable: false },
|
||||
{ key: 'segment', label: 'Segment', sortable: false },
|
||||
{ key: 'balance', label: 'Stanje', sortable: false, align: 'right' },
|
||||
]"
|
||||
:rows="contracts.data || []"
|
||||
:meta="{ current_page: contracts.current_page, per_page: contracts.per_page, total: contracts.total, last_page: contracts.last_page }"
|
||||
route-name="client.contracts"
|
||||
:route-params="{ uuid: client.uuid }"
|
||||
:query="{ from: fromDate || undefined, to: toDate || undefined }"
|
||||
:search="search"
|
||||
row-key="uuid"
|
||||
:only-props="['contracts']"
|
||||
>
|
||||
<template #cell-reference="{ row }">
|
||||
<Link :href="route('clientCase.show', caseShowParams(row))" class="text-indigo-600 hover:underline">
|
||||
{{ row.reference }}
|
||||
</Link>
|
||||
</template>
|
||||
<template #cell-customer="{ row }">
|
||||
{{ row.client_case?.person?.full_name || '-' }}
|
||||
</template>
|
||||
<template #cell-start="{ row }">
|
||||
{{ formatDate(row.start_date) }}
|
||||
</template>
|
||||
<template #cell-segment="{ row }">
|
||||
{{ row.segments?.[0]?.name || '-' }}
|
||||
</template>
|
||||
<template #cell-balance="{ row }">
|
||||
<div class="text-right">
|
||||
{{ new Intl.NumberFormat('sl-SI', { style: 'currency', currency: 'EUR' }).format(Number(row.account?.balance_amount ?? 0)) }}
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
|
||||
</template>
|
||||
</DataTableServer>
|
||||
</div>
|
||||
<Pagination
|
||||
:links="contracts.links"
|
||||
:from="contracts.from"
|
||||
:to="contracts.to"
|
||||
:total="contracts.total"
|
||||
/>
|
||||
<!-- Pagination handled by DataTableServer -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, watch } from "vue";
|
||||
import { ref } from "vue";
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import PrimaryButton from "@/Components/PrimaryButton.vue";
|
||||
import InputLabel from "@/Components/InputLabel.vue";
|
||||
@@ -7,8 +7,7 @@ import TextInput from "@/Components/TextInput.vue";
|
||||
import { Link, useForm, router } from "@inertiajs/vue3";
|
||||
import ActionMessage from "@/Components/ActionMessage.vue";
|
||||
import DialogModal from "@/Components/DialogModal.vue";
|
||||
import Pagination from "@/Components/Pagination.vue";
|
||||
import { debounce } from "lodash";
|
||||
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
||||
|
||||
const props = defineProps({
|
||||
clients: Object,
|
||||
@@ -41,25 +40,8 @@ const formClient = useForm({
|
||||
//Create client drawer
|
||||
const drawerCreateClient = ref(false);
|
||||
|
||||
// Search state (table-friendly, SPA)
|
||||
const search = ref(props.filters?.search || "");
|
||||
const applySearch = debounce((term) => {
|
||||
const params = Object.fromEntries(
|
||||
new URLSearchParams(window.location.search).entries()
|
||||
);
|
||||
if (term) {
|
||||
params.search = term;
|
||||
} else {
|
||||
delete params.search;
|
||||
}
|
||||
delete params.page; // reset pagination
|
||||
router.get(route("client"), params, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
preserveScroll: true,
|
||||
});
|
||||
}, 300);
|
||||
watch(search, (v) => applySearch(v));
|
||||
// Initial search (passed to DataTable toolbar)
|
||||
const initialSearch = ref(props.filters?.search || "");
|
||||
|
||||
//Open drawer create client
|
||||
const openDrawerCreateClient = () => {
|
||||
@@ -105,74 +87,86 @@ const fmtCurrency = (v) => {
|
||||
<div class="py-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="px-3 bg-white overflow-hidden shadow-xl sm:rounded-lg">
|
||||
<div class="mx-auto max-w-4x1 py-3">
|
||||
<div class="mx-auto max-w-4x1 py-3 space-y-3">
|
||||
<!-- Top actions -->
|
||||
<div class="flex items-center justify-between gap-3">
|
||||
<PrimaryButton @click="openDrawerCreateClient" class="bg-blue-400"
|
||||
<PrimaryButton
|
||||
@click="openDrawerCreateClient"
|
||||
class="bg-blue-600 hover:bg-blue-700"
|
||||
>Dodaj</PrimaryButton
|
||||
>
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
placeholder="Iskanje po imenu"
|
||||
class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="overflow-x-auto mt-3">
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 pr-4">Št.</th>
|
||||
<th class="py-2 pr-4">Naročnik</th>
|
||||
<th class="py-2 pr-4 text-right">Primeri z aktivnimi pogodbami</th>
|
||||
<th class="py-2 pr-4 text-right">Skupaj stanje</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="client in clients.data"
|
||||
:key="client.uuid"
|
||||
class="border-b last:border-0"
|
||||
|
||||
<!-- DataTable (server-side) -->
|
||||
<DataTableServer
|
||||
:columns="[
|
||||
{ key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
|
||||
{ key: 'name', label: 'Naročnik', sortable: false },
|
||||
{
|
||||
key: 'cases',
|
||||
label: 'Primeri z aktivnimi pogodbami',
|
||||
sortable: false,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
key: 'balance',
|
||||
label: 'Skupaj stanje',
|
||||
sortable: false,
|
||||
align: 'right',
|
||||
},
|
||||
]"
|
||||
:rows="clients.data || []"
|
||||
:meta="{
|
||||
current_page: clients.current_page,
|
||||
per_page: clients.per_page,
|
||||
total: clients.total,
|
||||
last_page: clients.last_page,
|
||||
}"
|
||||
:sort="{
|
||||
key: props.filters?.sort || null,
|
||||
direction: props.filters?.direction || null,
|
||||
}"
|
||||
:search="initialSearch"
|
||||
route-name="client"
|
||||
row-key="uuid"
|
||||
:page-size-options="[clients.per_page]"
|
||||
:only-props="['clients']"
|
||||
>
|
||||
<template #cell-nu="{ row }">
|
||||
{{ row.person?.nu || "-" }}
|
||||
</template>
|
||||
<template #cell-name="{ row }">
|
||||
<Link
|
||||
:href="route('client.show', { uuid: row.uuid })"
|
||||
class="text-indigo-600 hover:underline"
|
||||
>
|
||||
{{ row.person?.full_name || "-" }}
|
||||
</Link>
|
||||
<div v-if="!row.person" class="mt-1">
|
||||
<PrimaryButton
|
||||
class="!py-0.5 !px-2 bg-red-500 hover:bg-red-600 text-xs"
|
||||
@click.prevent="
|
||||
router.post(route('client.emergencyPerson', { uuid: row.uuid }))
|
||||
"
|
||||
>Add Person</PrimaryButton
|
||||
>
|
||||
<td class="py-2 pr-4">{{ client.person?.nu || "-" }}</td>
|
||||
<td class="py-2 pr-4">
|
||||
<Link
|
||||
:href="route('client.show', { uuid: client.uuid })"
|
||||
class="text-indigo-600 hover:underline"
|
||||
>
|
||||
{{ client.person?.full_name || "-" }}
|
||||
</Link>
|
||||
<div v-if="!client.person" class="mt-1">
|
||||
<PrimaryButton
|
||||
class="!py-0.5 !px-2 bg-red-500 hover:bg-red-600 text-xs"
|
||||
@click.prevent="
|
||||
router.post(
|
||||
route('client.emergencyPerson', { uuid: client.uuid })
|
||||
)
|
||||
"
|
||||
>Add Person</PrimaryButton
|
||||
>
|
||||
</div>
|
||||
</td>
|
||||
<td class="py-2 pr-4 text-right">
|
||||
{{ client.cases_with_active_contracts_count ?? 0 }}
|
||||
</td>
|
||||
<td class="py-2 pr-4 text-right">
|
||||
{{ fmtCurrency(client.active_contracts_balance_sum) }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!clients.data || clients.data.length === 0">
|
||||
<td colspan="4" class="py-4 text-gray-500">Ni zadetkov.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #cell-cases="{ row }">
|
||||
<div class="text-right">
|
||||
{{ row.cases_with_active_contracts_count ?? 0 }}
|
||||
</div>
|
||||
</template>
|
||||
<template #cell-balance="{ row }">
|
||||
<div class="text-right">
|
||||
{{ fmtCurrency(row.active_contracts_balance_sum) }}
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
|
||||
</template>
|
||||
</DataTableServer>
|
||||
</div>
|
||||
<Pagination
|
||||
:links="clients.links"
|
||||
:from="clients.from"
|
||||
:to="clients.to"
|
||||
:total="clients.total"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
<script setup>
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import PrimaryButton from "@/Components/PrimaryButton.vue";
|
||||
import { ref, watch } from "vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import { ref } from "vue";
|
||||
import { Link } from "@inertiajs/vue3";
|
||||
import SectionTitle from "@/Components/SectionTitle.vue";
|
||||
import PersonInfoGrid from "@/Components/PersonInfoGrid.vue";
|
||||
import Pagination from "@/Components/Pagination.vue";
|
||||
import FormCreateCase from "./Partials/FormCreateCase.vue";
|
||||
import { debounce } from "lodash";
|
||||
import DataTableServer from "@/Components/DataTable/DataTableServer.vue";
|
||||
|
||||
const props = defineProps({
|
||||
client: Object,
|
||||
@@ -17,25 +16,9 @@ const props = defineProps({
|
||||
types: Object,
|
||||
});
|
||||
|
||||
// Table-friendly search for client cases
|
||||
// Removed page-level search; DataTable or server can handle filtering elsewhere if needed
|
||||
// DataTable search state
|
||||
const search = ref(props.filters?.search || "");
|
||||
const applySearch = debounce((term) => {
|
||||
const params = Object.fromEntries(
|
||||
new URLSearchParams(window.location.search).entries()
|
||||
);
|
||||
if (term) {
|
||||
params.search = term;
|
||||
} else {
|
||||
delete params.search;
|
||||
}
|
||||
delete params.page;
|
||||
router.get(route("client.show", { uuid: props.client.uuid }), params, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
preserveScroll: true,
|
||||
});
|
||||
}, 300);
|
||||
watch(search, (v) => applySearch(v));
|
||||
|
||||
const drawerCreateCase = ref(false);
|
||||
|
||||
@@ -60,19 +43,36 @@ const openDrawerCreateCase = () => {
|
||||
</template>
|
||||
</SectionTitle>
|
||||
</div>
|
||||
<div class="mt-2 flex items-center gap-3 text-sm">
|
||||
<Link
|
||||
:href="route('client.show', { uuid: client.uuid })"
|
||||
class="px-2 py-1 rounded hover:underline"
|
||||
>Primeri</Link
|
||||
>
|
||||
<span class="text-gray-300">|</span>
|
||||
<Link
|
||||
:href="route('client.contracts', { uuid: client.uuid })"
|
||||
class="px-2 py-1 rounded text-indigo-600 hover:underline"
|
||||
>Pogodbe</Link
|
||||
>
|
||||
</div>
|
||||
<nav class="mt-2 border-b border-gray-200">
|
||||
<ul class="flex gap-6 -mb-px">
|
||||
<li>
|
||||
<Link
|
||||
:href="route('client.show', { uuid: client.uuid })"
|
||||
:class="[
|
||||
'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
|
||||
route().current('client.show')
|
||||
? 'text-indigo-600 border-indigo-600'
|
||||
: 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
|
||||
]"
|
||||
>
|
||||
Primeri
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link
|
||||
:href="route('client.contracts', { uuid: client.uuid })"
|
||||
:class="[
|
||||
'inline-flex items-center px-3 py-2 text-sm font-medium border-b-2',
|
||||
route().current('client.contracts')
|
||||
? 'text-indigo-600 border-indigo-600'
|
||||
: 'text-gray-600 border-transparent hover:text-gray-800 hover:border-gray-300'
|
||||
]"
|
||||
>
|
||||
Pogodbe
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -97,65 +97,72 @@ const openDrawerCreateCase = () => {
|
||||
<PrimaryButton @click="openDrawerCreateCase" class="bg-blue-400"
|
||||
>Dodaj</PrimaryButton
|
||||
>
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
placeholder="Iskanje po imenu"
|
||||
class="w-full sm:w-80 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 px-3 py-2 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="overflow-x-auto mt-3">
|
||||
<table class="min-w-full text-left text-sm">
|
||||
<thead>
|
||||
<tr class="border-b">
|
||||
<th class="py-2 pr-4">Št.</th>
|
||||
<th class="py-2 pr-4">Primer</th>
|
||||
<th class="py-2 pr-4">Davčna</th>
|
||||
<th class="py-2 pr-4 text-right">Aktivne pogodbe</th>
|
||||
<th class="py-2 pr-4 text-right">Skupaj stanje</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="c in client_cases.data"
|
||||
:key="c.uuid"
|
||||
class="border-b last:border-0"
|
||||
>
|
||||
<td class="py-2 pr-4">{{ c.person?.nu || "-" }}</td>
|
||||
<td class="py-2 pr-4">
|
||||
<Link
|
||||
:href="route('clientCase.show', { client_case: c.uuid })"
|
||||
class="text-indigo-600 hover:underline"
|
||||
>
|
||||
{{ c.person?.full_name || "-" }}
|
||||
</Link>
|
||||
</td>
|
||||
<td class="py-2 pr-4">{{ c.person?.tax_number || "-" }}</td>
|
||||
<td class="py-2 pr-4 text-right">
|
||||
{{ c.active_contracts_count ?? 0 }}
|
||||
</td>
|
||||
<td class="py-2 pr-4 text-right">
|
||||
{{
|
||||
new Intl.NumberFormat("sl-SI", {
|
||||
style: "currency",
|
||||
currency: "EUR",
|
||||
}).format(Number(c.active_contracts_balance_sum ?? 0))
|
||||
}}
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!client_cases.data || client_cases.data.length === 0">
|
||||
<td colspan="5" class="py-4 text-gray-500">Ni zadetkov.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<DataTableServer
|
||||
class="mt-3"
|
||||
:columns="[
|
||||
{ key: 'nu', label: 'Št.', sortable: false, class: 'w-40' },
|
||||
{ key: 'case', label: 'Primer', sortable: false },
|
||||
{ key: 'tax', label: 'Davčna', sortable: false },
|
||||
{
|
||||
key: 'active_contracts',
|
||||
label: 'Aktivne pogodbe',
|
||||
sortable: false,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
key: 'balance',
|
||||
label: 'Skupaj stanje',
|
||||
sortable: false,
|
||||
align: 'right',
|
||||
},
|
||||
]"
|
||||
:rows="client_cases.data || []"
|
||||
:meta="{
|
||||
current_page: client_cases.current_page,
|
||||
per_page: client_cases.per_page,
|
||||
total: client_cases.total,
|
||||
last_page: client_cases.last_page,
|
||||
}"
|
||||
route-name="client.show"
|
||||
:route-params="{ uuid: client.uuid }"
|
||||
row-key="uuid"
|
||||
:search="search"
|
||||
:only-props="['client_cases']"
|
||||
>
|
||||
<template #cell-nu="{ row }">
|
||||
{{ row.person?.nu || "-" }}
|
||||
</template>
|
||||
<template #cell-case="{ row }">
|
||||
<Link
|
||||
:href="route('clientCase.show', { client_case: row.uuid })"
|
||||
class="text-indigo-600 hover:underline"
|
||||
>
|
||||
{{ row.person?.full_name || "-" }}
|
||||
</Link>
|
||||
</template>
|
||||
<template #cell-tax="{ row }">
|
||||
{{ row.person?.tax_number || "-" }}
|
||||
</template>
|
||||
<template #cell-active_contracts="{ row }">
|
||||
<div class="text-right">{{ row.active_contracts_count ?? 0 }}</div>
|
||||
</template>
|
||||
<template #cell-balance="{ row }">
|
||||
<div class="text-right">
|
||||
{{
|
||||
new Intl.NumberFormat("sl-SI", {
|
||||
style: "currency",
|
||||
currency: "EUR",
|
||||
}).format(Number(row.active_contracts_balance_sum ?? 0))
|
||||
}}
|
||||
</div>
|
||||
</template>
|
||||
<template #empty>
|
||||
<div class="p-6 text-center text-gray-500">Ni zadetkov.</div>
|
||||
</template>
|
||||
</DataTableServer>
|
||||
</div>
|
||||
<Pagination
|
||||
:links="client_cases.links"
|
||||
:from="client_cases.from"
|
||||
:to="client_cases.to"
|
||||
:total="client_cases.total"
|
||||
/>
|
||||
<!-- Pagination handled by DataTableServer -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user