134 lines
4.8 KiB
Vue
134 lines
4.8 KiB
Vue
<script setup>
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import Pagination from "@/Components/Pagination.vue";
|
|
import SectionTitle from "@/Components/SectionTitle.vue";
|
|
import { Link, router } from "@inertiajs/vue3";
|
|
import { debounce } from "lodash";
|
|
import { ref, watch, onUnmounted } from "vue";
|
|
|
|
const props = defineProps({
|
|
client_cases: Object,
|
|
filters: Object,
|
|
});
|
|
|
|
// Search state (initialize from server-provided filters)
|
|
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;
|
|
}
|
|
// Reset paginator key used by backend: 'client-cases-page'
|
|
delete params["client-cases-page"];
|
|
delete params.page;
|
|
router.get(route("clientCase"), params, {
|
|
preserveState: true,
|
|
replace: true,
|
|
preserveScroll: true,
|
|
});
|
|
}, 300);
|
|
watch(search, (v) => applySearch(v));
|
|
onUnmounted(() => applySearch.cancel && applySearch.cancel());
|
|
|
|
// Format helpers
|
|
const fmtCurrency = (v) => {
|
|
const n = Number(v ?? 0);
|
|
try {
|
|
return new Intl.NumberFormat("sl-SI", { style: "currency", currency: "EUR" }).format(
|
|
n
|
|
);
|
|
} catch (e) {
|
|
return `${n.toFixed(2)} €`;
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
<AppLayout title="Client cases">
|
|
<template #header> </template>
|
|
<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="flex items-center justify-between gap-3 pb-3">
|
|
<SectionTitle>
|
|
<template #title>Primeri</template>
|
|
</SectionTitle>
|
|
<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">
|
|
<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">Stranka</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>
|
|
<button
|
|
v-if="!c.person"
|
|
@click.prevent="
|
|
router.post(
|
|
route('clientCase.emergencyPerson', { client_case: c.uuid })
|
|
)
|
|
"
|
|
class="ml-2 inline-flex items-center rounded bg-red-50 px-2 py-0.5 text-xs font-semibold text-red-600 hover:bg-red-100 border border-red-200"
|
|
title="Emergency: recreate missing person"
|
|
>
|
|
Add Person
|
|
</button>
|
|
</td>
|
|
<td class="py-2 pr-4">{{ c.client?.person?.full_name || "-" }}</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">
|
|
{{ fmtCurrency(c.active_contracts_balance_sum) }}
|
|
</td>
|
|
</tr>
|
|
<tr v-if="!client_cases.data || client_cases.data.length === 0">
|
|
<td colspan="6" class="py-4 text-gray-500">Ni zadetkov.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<Pagination
|
|
:links="client_cases.links"
|
|
:from="client_cases.from"
|
|
:to="client_cases.to"
|
|
:total="client_cases.total"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|