SnitchItaly/frontend
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: pagination in open-data page

Browse Source 
closes #15
This commit is contained in:
reloia
2026-06-19 00:33:01 +02:00 Unverified
parent 6e4f40fce4
commit 1908e7ad27
1 changed files with 20 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/open-data.vue
+20 -42
View File
@@ -7,37 +7,27 @@ const { getOpenDataReports } = usePublic()
const currentPage = ref(1)
const perPage = ref(9)
const { data: openDataResponse, pending } = await useAsyncData(
'open-data-reports',
() => getOpenDataReports({ page: currentPage.value, per_page: perPage.value }),
{ watch: [currentPage] }
() => getOpenDataReports({ page: 1, per_page: 200 })
)
const visibleReports = computed(() =>
const allVisibleReports = computed(() =>
(openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
)
const isLastPage = computed(() => {
if (!openDataResponse.value?.reports) return true
return openDataResponse.value.reports.length < perPage.value
const visibleReports = computed(() => {
const start = (currentPage.value - 1) * perPage.value
const end = start + perPage.value
return allVisibleReports.value.slice(start, end)
})
const nextPage = () => {
if (!isLastPage.value) currentPage.value++
}
const prevPage = () => {
if (currentPage.value > 1) currentPage.value--
const handlePageChange = (page: number) => {
currentPage.value = page
}
const { data: mapOpenDataResponse, pending: mapPending } = useAsyncData(
'open-data-map-reports',
() => getOpenDataReports({ page: 1, per_page: 200 }),
{ lazy: true }
)
const mapVisibleReports = computed(() =>
(mapOpenDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
)
const mapVisibleReports = computed(() => allVisibleReports.value)
const currentView = ref<'grid' | 'map'>('grid')
const mapContainer = ref<HTMLElement | null>(null)
@@ -170,7 +160,7 @@ onBeforeUnmount(() => {
</div>
</div>
<div class="container my-5">
<div class="container my-5" id="grid-start">
<div class="row align-items-center mb-5 pb-3 border-bottom">
<div class="col-12 col-md-6 mb-3 mb-md-0 d-flex gap-2">
<button
@@ -205,7 +195,7 @@ onBeforeUnmount(() => {
</div>
<div v-show="!pending && currentView === 'grid'">
<div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.length > 0">
<div class="row" v-if="allVisibleReports.length > 0">
<div class="col-12 col-md-6 col-lg-4 mb-4" v-for="report in visibleReports" :key="report.id">
<div class="card-wrapper card-space h-100">
<div class="card card-bg h-100 shadow-sm">
@@ -251,32 +241,20 @@ onBeforeUnmount(() => {
Nessun dato pubblico disponibile al momento.
</div>
<nav class="pagination-wrapper justify-content-center mt-5" aria-label="Navigazione pagine open data">
<ul class="pagination">
<li class="page-item" :class="{ disabled: currentPage === 1 }">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true" @click.prevent="prevPage">
<BIIcon name="it-chevron-left" size="sm"/>
<span class="visually-hidden">Pagina precedente</span>
</a>
</li>
<li class="page-item">
<span class="page-link font-weight-semibold">Pagina {{ currentPage }}</span>
</li>
<li class="page-item" :class="{ disabled: isLastPage }">
<a class="page-link" href="#" @click.prevent="nextPage">
<span class="visually-hidden">Pagina successiva</span>
<BIIcon name="it-chevron-right" size="sm"/>
</a>
</li>
</ul>
</nav>
<Pagination
v-if="allVisibleReports.length > 0"
:current-page="currentPage"
:per-page="perPage"
:total-items="allVisibleReports.length"
@page-change="handlePageChange"
/>
</div>
<div v-show="!pending && currentView === 'map'" class="map-view-wrapper">
<div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
<p class="text-muted mb-0">Mappa pubblica delle segnalazioni nell'area di Bari.</p>
<span class="badge bg-light text-dark border">
<template v-if="mapPending">Caricamento...</template>
<template v-if="pending">Caricamento...</template>
<template v-else>{{ mapVisibleReports.length }} punti</template>
</span>
</div>