101 lines
3.0 KiB
Vue
101 lines
3.0 KiB
Vue
<script setup>
|
|
import AppLayout from "@/Layouts/AppLayout.vue";
|
|
import { Link } from "@inertiajs/vue3";
|
|
import { computed, ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
segments: Array,
|
|
});
|
|
|
|
const search = ref("");
|
|
|
|
const filtered = computed(() => {
|
|
const q = (search.value || "").toLowerCase();
|
|
if (!q) {
|
|
return props.segments || [];
|
|
}
|
|
return (props.segments || []).filter((s) => {
|
|
return (
|
|
String(s.name || "")
|
|
.toLowerCase()
|
|
.includes(q) ||
|
|
String(s.description || "")
|
|
.toLowerCase()
|
|
.includes(q)
|
|
);
|
|
});
|
|
});
|
|
|
|
function formatCurrencyEUR(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="Segmenti">
|
|
<template #header></template>
|
|
<div class="pt-12">
|
|
<div class="max-w-5xl mx-auto sm:px-6 lg:px-8">
|
|
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg p-4 mb-6">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1"
|
|
>Iskanje (segment ali opis)</label
|
|
>
|
|
<input
|
|
v-model="search"
|
|
type="text"
|
|
class="border rounded px-3 py-2 w-full max-w-xl"
|
|
placeholder="Išči po nazivu segmenta ali opisu"
|
|
/>
|
|
</div>
|
|
|
|
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg p-6">
|
|
<h2 class="text-xl font-semibold mb-4">Aktivni segmenti</h2>
|
|
<div
|
|
v-if="filtered.length"
|
|
class="grid gap-4 sm:gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
|
|
>
|
|
<div
|
|
v-for="s in filtered"
|
|
:key="s.id"
|
|
class="border rounded-lg p-4 shadow-sm hover:shadow transition bg-white"
|
|
>
|
|
<div class="flex items-start justify-between mb-2">
|
|
<h3 class="text-base font-semibold text-gray-900">
|
|
<Link :href="route('segments.show', s.id)" class="hover:underline">{{
|
|
s.name
|
|
}}</Link>
|
|
</h3>
|
|
<span
|
|
class="inline-flex items-center text-xs px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-100"
|
|
>
|
|
{{ s.contracts_count ?? 0 }} pogodb
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-gray-600 min-h-[1.25rem]">
|
|
{{ s.description || "" }}
|
|
</p>
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<div class="text-sm text-gray-500">Vsota stanj</div>
|
|
<div class="text-sm font-medium text-gray-900">
|
|
{{ formatCurrencyEUR(s.total_balance) }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="text-gray-500">Ni aktivnih segmentov.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
</template>
|