changes to UI mostly
This commit is contained in:
Simon Pocrnjič
@@ -0,0 +1,107 @@
|
||||
<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>Segmenti</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 class="mt-3">
|
||||
<Link
|
||||
:href="route('segments.show', s.id)"
|
||||
class="text-sm text-indigo-600 hover:underline"
|
||||
>Odpri</Link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-gray-500">Ni aktivnih segmentov.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
@@ -0,0 +1,156 @@
|
||||
<script setup>
|
||||
import AppLayout from "@/Layouts/AppLayout.vue";
|
||||
import { Link, router } from "@inertiajs/vue3";
|
||||
import { debounce } from "lodash";
|
||||
import { ref, watch, onUnmounted } from "vue";
|
||||
|
||||
const props = defineProps({
|
||||
segment: Object,
|
||||
contracts: Object, // LengthAwarePaginator payload from Laravel
|
||||
});
|
||||
|
||||
const search = ref("");
|
||||
const applySearch = debounce((v) => {
|
||||
const params = Object.fromEntries(
|
||||
new URLSearchParams(window.location.search).entries()
|
||||
);
|
||||
if (v) {
|
||||
params.search = v;
|
||||
} else {
|
||||
delete params.search;
|
||||
}
|
||||
// reset pagination when typing
|
||||
delete params.page;
|
||||
router.get(
|
||||
route("segments.show", { segment: props.segment?.id ?? props.segment }),
|
||||
params,
|
||||
{ preserveState: true, replace: true, preserveScroll: true }
|
||||
);
|
||||
}, 300);
|
||||
|
||||
watch(search, (v) => applySearch(v));
|
||||
onUnmounted(() => applySearch.cancel && applySearch.cancel());
|
||||
|
||||
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>
|
||||
<div class="flex items-center justify-between">
|
||||
<h1 class="text-xl font-semibold">Segment: {{ segment?.name }}</h1>
|
||||
<Link
|
||||
:href="route('segments.index')"
|
||||
class="text-sm text-indigo-600 hover:underline"
|
||||
>Nazaj na segmente</Link
|
||||
>
|
||||
</div>
|
||||
</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-6">
|
||||
<div class="text-sm text-gray-600 mb-4">{{ segment?.description }}</div>
|
||||
<div class="flex items-center justify-between mb-4 gap-3">
|
||||
<input
|
||||
v-model="search"
|
||||
type="text"
|
||||
placeholder="Iskanje po referenci ali 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">Pogodba</th>
|
||||
<th class="py-2 pr-4">Primer</th>
|
||||
<th class="py-2 pr-4">Stranka</th>
|
||||
<th class="py-2 pr-4">Vrsta</th>
|
||||
<th class="py-2 pr-4">Začetek</th>
|
||||
<th class="py-2 pr-4">Konec</th>
|
||||
<th class="py-2 pr-4">Stanje</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="c in contracts.data"
|
||||
:key="c.uuid"
|
||||
class="border-b last:border-0"
|
||||
>
|
||||
<td class="py-2 pr-4">{{ c.reference }}</td>
|
||||
<td class="py-2 pr-4">
|
||||
<Link
|
||||
v-if="c.client_case?.uuid"
|
||||
:href="
|
||||
route('clientCase.show', {
|
||||
client_case: c.client_case.uuid,
|
||||
segment: segment.id,
|
||||
})
|
||||
"
|
||||
class="text-indigo-600 hover:underline"
|
||||
>
|
||||
{{ c.client_case?.person?.full_name || "Primer stranke" }}
|
||||
</Link>
|
||||
<span v-else>{{ c.client_case?.person?.full_name || "-" }}</span>
|
||||
</td>
|
||||
<td class="py-2 pr-4">{{ c.client?.person?.full_name || "-" }}</td>
|
||||
<td class="py-2 pr-4">{{ c.type?.name }}</td>
|
||||
<td class="py-2 pr-4">{{ formatDate(c.start_date) }}</td>
|
||||
<td class="py-2 pr-4">{{ formatDate(c.end_date) }}</td>
|
||||
<td class="py-2 pr-4">{{ formatCurrency(c.account?.balance_amount) }}</td>
|
||||
</tr>
|
||||
<tr v-if="!contracts.data || contracts.data.length === 0">
|
||||
<td colspan="7" class="py-4 text-gray-500">Ni pogodb v tem segmentu.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div
|
||||
class="flex items-center justify-between mt-4 text-sm text-gray-700"
|
||||
v-if="contracts.total > 0"
|
||||
>
|
||||
<div>
|
||||
Prikazano {{ contracts.from || 0 }}–{{ contracts.to || 0 }} od
|
||||
{{ contracts.total }}
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<Link
|
||||
v-if="contracts.prev_page_url"
|
||||
:href="contracts.prev_page_url"
|
||||
class="px-2 py-1 border rounded hover:bg-gray-50"
|
||||
>Prejšnja</Link
|
||||
>
|
||||
<span>Stran {{ contracts.current_page }} / {{ contracts.last_page }}</span>
|
||||
<Link
|
||||
v-if="contracts.next_page_url"
|
||||
:href="contracts.next_page_url"
|
||||
class="px-2 py-1 border rounded hover:bg-gray-50"
|
||||
>Naslednja</Link
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user