Changes to import and notifications
This commit is contained in:
Simon Pocrnjič
@@ -0,0 +1,375 @@
|
||||
<script setup>
|
||||
import { computed, ref, watch } from "vue";
|
||||
import {
|
||||
FwbTable,
|
||||
FwbTableHead,
|
||||
FwbTableHeadCell,
|
||||
FwbTableBody,
|
||||
FwbTableRow,
|
||||
FwbTableCell,
|
||||
} from "flowbite-vue";
|
||||
|
||||
const props = defineProps({
|
||||
columns: { type: Array, required: true }, // [{ key, label, sortable?, align?, class?, formatter? }]
|
||||
rows: { type: Array, default: () => [] },
|
||||
// Sorting
|
||||
sort: { type: Object, default: () => ({ key: null, direction: null }) },
|
||||
// Searching
|
||||
search: { type: String, default: "" },
|
||||
searchKeys: { type: [Array, Function], default: () => [] },
|
||||
// Pagination
|
||||
page: { type: Number, default: 1 },
|
||||
pageSize: { type: Number, default: 10 },
|
||||
pageSizeOptions: { type: Array, default: () => [10, 25, 50] },
|
||||
// UI
|
||||
loading: { type: Boolean, default: false },
|
||||
emptyText: { type: String, default: "Ni podatkov." },
|
||||
rowKey: { type: [String, Function], default: "id" },
|
||||
showToolbar: { type: Boolean, default: true },
|
||||
// Pagination UX options
|
||||
showPageStats: { type: Boolean, default: true },
|
||||
showGoto: { type: Boolean, default: true },
|
||||
maxPageLinks: { type: Number, default: 5 }, // odd number preferred
|
||||
});
|
||||
|
||||
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 ?? "";
|
||||
}
|
||||
);
|
||||
watch(internalSearch, (v, ov) => {
|
||||
if (v !== props.search) {
|
||||
emit("update:search", v);
|
||||
// reset page when search changes
|
||||
if (props.page !== 1) emit("update:page", 1);
|
||||
}
|
||||
});
|
||||
|
||||
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 });
|
||||
// reset to page 1 when sort changes
|
||||
if (props.page !== 1) emit("update:page", 1);
|
||||
}
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
const s = (props.search ?? "").toString().trim().toLowerCase();
|
||||
if (!s) return props.rows || [];
|
||||
const keys = props.searchKeys;
|
||||
if (typeof keys === "function") {
|
||||
return (props.rows || []).filter((r) => {
|
||||
try {
|
||||
return String(keys(r) ?? "")
|
||||
.toLowerCase()
|
||||
.includes(s);
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}
|
||||
const arr =
|
||||
Array.isArray(keys) && keys.length ? keys : Object.keys(props.rows?.[0] || {});
|
||||
return (props.rows || []).filter((r) => {
|
||||
return arr.some((k) =>
|
||||
String(r?.[k] ?? "")
|
||||
.toLowerCase()
|
||||
.includes(s)
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
const sortedRows = computed(() => {
|
||||
const { key, direction } = props.sort || { key: null, direction: null };
|
||||
if (!key || !direction) return filteredRows.value;
|
||||
const arr = [...filteredRows.value];
|
||||
arr.sort((a, b) => {
|
||||
const av = a?.[key];
|
||||
const bv = b?.[key];
|
||||
if (av == null && bv == null) return 0;
|
||||
if (av == null) return direction === "asc" ? -1 : 1;
|
||||
if (bv == null) return direction === "asc" ? 1 : -1;
|
||||
if (typeof av === "number" && typeof bv === "number")
|
||||
return direction === "asc" ? av - bv : bv - av;
|
||||
return direction === "asc"
|
||||
? String(av).localeCompare(String(bv))
|
||||
: String(bv).localeCompare(String(av));
|
||||
});
|
||||
return arr;
|
||||
});
|
||||
|
||||
const total = computed(() => sortedRows.value.length);
|
||||
const lastPage = computed(() =>
|
||||
Math.max(1, Math.ceil(total.value / (props.pageSize || 10)))
|
||||
);
|
||||
const currentPage = computed(() =>
|
||||
Math.min(Math.max(1, props.page || 1), lastPage.value)
|
||||
);
|
||||
const startIndex = computed(() => (currentPage.value - 1) * (props.pageSize || 10));
|
||||
const endIndex = computed(() =>
|
||||
Math.min(startIndex.value + (props.pageSize || 10), total.value)
|
||||
);
|
||||
const pageRows = computed(() => sortedRows.value.slice(startIndex.value, endIndex.value));
|
||||
|
||||
const showingFrom = computed(() => (total.value === 0 ? 0 : startIndex.value + 1));
|
||||
const showingTo = computed(() => (total.value === 0 ? 0 : endIndex.value));
|
||||
|
||||
const gotoInput = ref("");
|
||||
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 = "";
|
||||
}
|
||||
|
||||
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);
|
||||
start = Math.max(1, Math.min(start, end - windowSize + 1));
|
||||
for (let p = start; p <= end; p++) pages.push(p);
|
||||
return pages;
|
||||
});
|
||||
|
||||
function setPage(p) {
|
||||
emit("update:page", Math.min(Math.max(1, p), lastPage.value));
|
||||
}
|
||||
function setPageSize(ps) {
|
||||
emit("update:pageSize", Number(ps));
|
||||
emit("update:page", 1);
|
||||
}
|
||||
</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="pageSize"
|
||||
@change="setPageSize($event.target.value)"
|
||||
>
|
||||
<option v-for="opt in pageSizeOptions" :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 && pageRows.length">
|
||||
<FwbTableRow
|
||||
v-for="(row, idx) in pageRows"
|
||||
: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>
|
||||
{{ col.formatter ? col.formatter(row) : 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>
|
||||
Reference in New Issue
Block a user