feat: pagination in open-data page

closes #15

app/pages/open-data.vue

@@ -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 }),
+    () => getOpenDataReports({ page: 1, per_page: 200 })
-    { watch: [currentPage] }
 )
 
-const visibleReports = computed(() =>
+const allVisibleReports = computed(() =>
     (openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
 )
 
-const isLastPage = computed(() => {
+const visibleReports = computed(() => {
-  if (!openDataResponse.value?.reports) return true
+  const start = (currentPage.value - 1) * perPage.value
-  return openDataResponse.value.reports.length < perPage.value
+  const end = start + perPage.value
+  return allVisibleReports.value.slice(start, end)
 })
 
-const nextPage = () => {
+const handlePageChange = (page: number) => {
-  if (!isLastPage.value) currentPage.value++
+  currentPage.value = page
-}
-const prevPage = () => {
-  if (currentPage.value > 1) currentPage.value--
 }
 
-const { data: mapOpenDataResponse, pending: mapPending } = useAsyncData(
+const mapVisibleReports = computed(() => allVisibleReports.value)
-    '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 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">
+        <Pagination
-          <ul class="pagination">
+            v-if="allVisibleReports.length > 0"
-            <li class="page-item" :class="{ disabled: currentPage === 1 }">
+            :current-page="currentPage"
-              <a class="page-link" href="#" tabindex="-1" aria-disabled="true" @click.prevent="prevPage">
+            :per-page="perPage"
-                <BIIcon name="it-chevron-left" size="sm"/>
+            :total-items="allVisibleReports.length"
-                <span class="visually-hidden">Pagina precedente</span>
+            @page-change="handlePageChange"
-              </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>
       </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>