391 lines
13 KiB
Vue
391 lines
13 KiB
Vue
<script setup>
|
||
import { ref, watch, computed } from "vue";
|
||
import { router } from "@inertiajs/vue3";
|
||
import {
|
||
FwbTable,
|
||
FwbTableHead,
|
||
FwbTableHeadCell,
|
||
FwbTableBody,
|
||
FwbTableRow,
|
||
FwbTableCell,
|
||
} from "flowbite-vue";
|
||
|
||
const props = defineProps({
|
||
columns: { type: Array, required: true }, // [{ key, label, sortable?, align?, class? }]
|
||
rows: { type: Array, default: () => [] },
|
||
meta: { type: Object, required: true }, // { current_page, per_page, total, last_page }
|
||
sort: { type: Object, default: () => ({ key: null, direction: null }) },
|
||
search: { type: String, default: "" },
|
||
page: { type: Number, default: 1 },
|
||
pageSize: { type: Number, default: 10 },
|
||
pageSizeOptions: { type: Array, default: () => [10, 25, 50] },
|
||
routeName: { type: String, required: true },
|
||
routeParams: { type: Object, default: () => ({}) },
|
||
query: { type: Object, default: () => ({}) },
|
||
preserveState: { type: Boolean, default: true },
|
||
preserveScroll: { type: Boolean, default: true },
|
||
loading: { type: Boolean, default: false },
|
||
emptyText: { type: String, default: "Ni podatkov." },
|
||
rowKey: { type: [String, Function], default: "id" },
|
||
showToolbar: { type: Boolean, default: true },
|
||
onlyProps: { type: Array, default: () => [] }, // e.g., ['contracts']
|
||
// Pagination UX options
|
||
showPageStats: { type: Boolean, default: true },
|
||
showGoto: { type: Boolean, default: true },
|
||
maxPageLinks: { type: Number, default: 5 }, // odd number preferred
|
||
// Optional custom page parameter name (Laravel custom paginator key, e.g. 'client-cases-page')
|
||
pageParamName: { type: String, default: "page" },
|
||
});
|
||
|
||
const emit = defineEmits([
|
||
"update:sort",
|
||
"update:search",
|
||
"update:page",
|
||
"update:pageSize",
|
||
"row:click",
|
||
]);
|
||
|
||
const internalSearch = ref(props.search);
|
||
watch(
|
||
() => props.search,
|
||
(v) => {
|
||
internalSearch.value = v ?? "";
|
||
}
|
||
);
|
||
|
||
let searchTimer;
|
||
watch(internalSearch, (v) => {
|
||
emit("update:search", v);
|
||
// Debounced request, reset page to 1
|
||
clearTimeout(searchTimer);
|
||
searchTimer = setTimeout(() => doRequest({ page: 1, search: v }), 300);
|
||
});
|
||
|
||
function keyOf(row) {
|
||
if (typeof props.rowKey === "function") return props.rowKey(row);
|
||
if (typeof props.rowKey === "string" && row && row[props.rowKey] != null)
|
||
return row[props.rowKey];
|
||
return row?.uuid ?? row?.id ?? Math.random().toString(36).slice(2);
|
||
}
|
||
|
||
function toggleSort(col) {
|
||
if (!col?.sortable) return;
|
||
const { key } = col;
|
||
const current = props.sort || { key: null, direction: null };
|
||
let direction = "asc";
|
||
if (current.key === key) {
|
||
direction =
|
||
current.direction === "asc" ? "desc" : current.direction === "desc" ? null : "asc";
|
||
}
|
||
emit("update:sort", { key: direction ? key : null, direction });
|
||
doRequest({ sort: direction ? key : null, direction, page: 1 });
|
||
}
|
||
|
||
function setPage(p) {
|
||
emit("update:page", p);
|
||
doRequest({ page: p });
|
||
}
|
||
function setPageSize(ps) {
|
||
const perPage = Number(ps);
|
||
emit("update:pageSize", perPage);
|
||
doRequest({ page: 1, perPage });
|
||
}
|
||
|
||
function doRequest(overrides = {}) {
|
||
const q = {
|
||
...props.query,
|
||
perPage: overrides.perPage ?? props.meta?.per_page ?? props.pageSize ?? 10,
|
||
sort: overrides.sort ?? props.sort?.key ?? null,
|
||
direction: overrides.direction ?? props.sort?.direction ?? null,
|
||
search: overrides.search ?? props.search ?? "",
|
||
};
|
||
const pageParam = props.pageParamName || "page";
|
||
q[pageParam] = overrides.page ?? props.meta?.current_page ?? props.page ?? 1;
|
||
if (pageParam !== "page") {
|
||
delete q.page;
|
||
}
|
||
// Clean nulls
|
||
Object.keys(q).forEach((k) => {
|
||
if (q[k] === null || q[k] === undefined || q[k] === "") delete q[k];
|
||
});
|
||
const url = route(props.routeName, props.routeParams || {});
|
||
router.get(url, q, {
|
||
preserveScroll: props.preserveScroll,
|
||
preserveState: props.preserveState,
|
||
replace: true,
|
||
only: props.onlyProps.length ? props.onlyProps : undefined,
|
||
});
|
||
}
|
||
|
||
const total = computed(() => props.meta?.total ?? 0);
|
||
const currentPage = computed(() => props.meta?.current_page ?? 1);
|
||
const lastPage = computed(() => props.meta?.last_page ?? 1);
|
||
const perPage = computed(() => props.meta?.per_page ?? props.pageSize ?? 10);
|
||
|
||
// Ensure the page-size selector always contains the current server value
|
||
const pageSizeOptionsResolved = computed(() => {
|
||
const base = Array.isArray(props.pageSizeOptions)
|
||
? [...props.pageSizeOptions]
|
||
: [10, 25, 50];
|
||
const current = perPage.value;
|
||
if (current && !base.includes(current)) {
|
||
base.push(current);
|
||
}
|
||
return base.sort((a, b) => a - b);
|
||
});
|
||
|
||
const showingFrom = computed(() => {
|
||
if (total.value === 0) return 0;
|
||
return (currentPage.value - 1) * perPage.value + 1;
|
||
});
|
||
const showingTo = computed(() => {
|
||
if (total.value === 0) return 0;
|
||
return Math.min(currentPage.value * perPage.value, total.value);
|
||
});
|
||
|
||
const gotoInput = ref("");
|
||
|
||
const visiblePages = computed(() => {
|
||
const pages = [];
|
||
const count = lastPage.value;
|
||
if (count <= 1) return [1];
|
||
const windowSize = Math.max(3, props.maxPageLinks);
|
||
const half = Math.floor(windowSize / 2);
|
||
let start = Math.max(1, currentPage.value - half);
|
||
let end = Math.min(count, start + windowSize - 1);
|
||
// Adjust start if at the end
|
||
start = Math.max(1, Math.min(start, end - windowSize + 1));
|
||
for (let p = start; p <= end; p++) pages.push(p);
|
||
return pages;
|
||
});
|
||
|
||
function goToPageInput() {
|
||
const raw = String(gotoInput.value || "").trim();
|
||
const n = Number(raw);
|
||
if (!Number.isFinite(n)) return;
|
||
const target = Math.max(1, Math.min(lastPage.value, Math.floor(n)));
|
||
if (target !== currentPage.value) setPage(target);
|
||
gotoInput.value = "";
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="w-full">
|
||
<div v-if="showToolbar" class="mb-3 flex items-center justify-between gap-3">
|
||
<div class="flex items-center gap-2">
|
||
<input
|
||
type="text"
|
||
class="w-64 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
|
||
placeholder="Iskanje..."
|
||
v-model="internalSearch"
|
||
/>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<label class="text-sm text-gray-600">Na stran</label>
|
||
<select
|
||
class="rounded border-gray-300 text-sm"
|
||
:value="meta?.per_page || pageSize"
|
||
@change="setPageSize($event.target.value)"
|
||
>
|
||
<option v-for="opt in pageSizeOptionsResolved" :key="opt" :value="opt">
|
||
{{ opt }}
|
||
</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
class="relative overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm"
|
||
>
|
||
<FwbTable hoverable striped class="text-sm">
|
||
<FwbTableHead
|
||
class="sticky top-0 z-10 bg-gray-50/90 backdrop-blur border-b border-gray-200 shadow-sm"
|
||
>
|
||
<FwbTableHeadCell v-for="col in columns" :key="col.key" :class="col.class">
|
||
<button
|
||
v-if="col.sortable"
|
||
type="button"
|
||
class="inline-flex items-center gap-1 hover:text-indigo-600"
|
||
@click="toggleSort(col)"
|
||
:aria-sort="sort?.key === col.key ? sort.direction || 'none' : 'none'"
|
||
>
|
||
<span>{{ col.label }}</span>
|
||
<span v-if="sort?.key === col.key && sort.direction === 'asc'">▲</span>
|
||
<span v-else-if="sort?.key === col.key && sort.direction === 'desc'"
|
||
>▼</span
|
||
>
|
||
</button>
|
||
<span v-else>{{ col.label }}</span>
|
||
</FwbTableHeadCell>
|
||
<FwbTableHeadCell v-if="$slots.actions" class="w-px"> </FwbTableHeadCell>
|
||
</FwbTableHead>
|
||
|
||
<FwbTableBody>
|
||
<template v-if="!loading && rows.length">
|
||
<FwbTableRow
|
||
v-for="(row, idx) in rows"
|
||
:key="keyOf(row)"
|
||
@click="$emit('row:click', row)"
|
||
class="cursor-default"
|
||
>
|
||
<FwbTableCell
|
||
v-for="col in columns"
|
||
:key="col.key"
|
||
:class="col.class"
|
||
:align="col.align || 'left'"
|
||
>
|
||
<template v-if="$slots['cell-' + col.key]">
|
||
<slot
|
||
:name="'cell-' + col.key"
|
||
:row="row"
|
||
:column="col"
|
||
:value="row?.[col.key]"
|
||
:index="idx"
|
||
/>
|
||
</template>
|
||
<template v-else-if="$slots.cell">
|
||
<slot
|
||
name="cell"
|
||
:row="row"
|
||
:column="col"
|
||
:value="row?.[col.key]"
|
||
:index="idx"
|
||
/>
|
||
</template>
|
||
<template v-else>
|
||
{{ row?.[col.key] ?? "" }}
|
||
</template>
|
||
</FwbTableCell>
|
||
<FwbTableCell v-if="$slots.actions" class="w-px text-right">
|
||
<slot name="actions" :row="row" :index="idx" />
|
||
</FwbTableCell>
|
||
</FwbTableRow>
|
||
</template>
|
||
<template v-else-if="loading">
|
||
<FwbTableRow>
|
||
<FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
|
||
<div class="p-6 text-center text-gray-500">Nalagam...</div>
|
||
</FwbTableCell>
|
||
</FwbTableRow>
|
||
</template>
|
||
<template v-else>
|
||
<FwbTableRow>
|
||
<FwbTableCell :colspan="columns.length + ($slots.actions ? 1 : 0)">
|
||
<slot name="empty">
|
||
<div class="p-6 text-center text-gray-500">{{ emptyText }}</div>
|
||
</slot>
|
||
</FwbTableCell>
|
||
</FwbTableRow>
|
||
</template>
|
||
</FwbTableBody>
|
||
</FwbTable>
|
||
</div>
|
||
|
||
<nav
|
||
class="mt-3 flex flex-wrap items-center justify-between gap-3 text-sm text-gray-700"
|
||
aria-label="Pagination"
|
||
>
|
||
<div v-if="showPageStats">
|
||
<span v-if="total > 0"
|
||
>Prikazano: {{ showingFrom }}–{{ showingTo }} od {{ total }}</span
|
||
>
|
||
<span v-else>Ni zadetkov</span>
|
||
</div>
|
||
<div class="flex items-center gap-1">
|
||
<!-- First -->
|
||
<button
|
||
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
|
||
:disabled="currentPage <= 1"
|
||
@click="setPage(1)"
|
||
aria-label="Prva stran"
|
||
>
|
||
««
|
||
</button>
|
||
<!-- Prev -->
|
||
<button
|
||
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
|
||
:disabled="currentPage <= 1"
|
||
@click="setPage(currentPage - 1)"
|
||
aria-label="Prejšnja stran"
|
||
>
|
||
«
|
||
</button>
|
||
|
||
<!-- Leading ellipsis / first page when window doesn't include 1 -->
|
||
<button
|
||
v-if="visiblePages[0] > 1"
|
||
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
|
||
@click="setPage(1)"
|
||
>
|
||
1
|
||
</button>
|
||
<span v-if="visiblePages[0] > 2" class="px-1">…</span>
|
||
|
||
<!-- Page numbers -->
|
||
<button
|
||
v-for="p in visiblePages"
|
||
:key="p"
|
||
class="px-3 py-1 rounded border transition-colors"
|
||
:class="
|
||
p === currentPage
|
||
? 'border-indigo-600 bg-indigo-600 text-white'
|
||
: 'border-gray-300 hover:bg-gray-50'
|
||
"
|
||
:aria-current="p === currentPage ? 'page' : undefined"
|
||
@click="setPage(p)"
|
||
>
|
||
{{ p }}
|
||
</button>
|
||
|
||
<!-- Trailing ellipsis / last page when window doesn't include last -->
|
||
<span v-if="visiblePages[visiblePages.length - 1] < lastPage - 1" class="px-1"
|
||
>…</span
|
||
>
|
||
<button
|
||
v-if="visiblePages[visiblePages.length - 1] < lastPage"
|
||
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50"
|
||
@click="setPage(lastPage)"
|
||
>
|
||
{{ lastPage }}
|
||
</button>
|
||
|
||
<!-- Next -->
|
||
<button
|
||
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
|
||
:disabled="currentPage >= lastPage"
|
||
@click="setPage(currentPage + 1)"
|
||
aria-label="Naslednja stran"
|
||
>
|
||
»
|
||
</button>
|
||
<!-- Last -->
|
||
<button
|
||
class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 disabled:opacity-50"
|
||
:disabled="currentPage >= lastPage"
|
||
@click="setPage(lastPage)"
|
||
aria-label="Zadnja stran"
|
||
>
|
||
»»
|
||
</button>
|
||
|
||
<!-- Goto page -->
|
||
<div v-if="showGoto" class="ms-2 flex items-center gap-1">
|
||
<input
|
||
v-model="gotoInput"
|
||
type="number"
|
||
min="1"
|
||
:max="lastPage"
|
||
inputmode="numeric"
|
||
class="w-16 rounded border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 text-sm"
|
||
:placeholder="String(currentPage)"
|
||
aria-label="Pojdi na stran"
|
||
@keyup.enter="goToPageInput"
|
||
@blur="goToPageInput"
|
||
/>
|
||
<span class="text-gray-500">/ {{ lastPage }}</span>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</template>
|