From 43ea5a1d97896bb9461ca34741d16ba8e15a9c91 Mon Sep 17 00:00:00 2001
From: ReLoia <zrennyz@gmail.com>
Date: Wed, 17 Jun 2026 00:11:12 +0200
Subject: [PATCH] fix: map disappearing in open data page

---
 app/pages/open-data.vue | 55 ++++++++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 22 deletions(-)

diff --git a/app/pages/open-data.vue b/app/pages/open-data.vue
index d26fcda..5edc62a 100644
--- a/app/pages/open-data.vue
+++ b/app/pages/open-data.vue
@@ -14,7 +14,7 @@ const { data: openDataResponse, pending } = await useAsyncData(
 )
 
 const visibleReports = computed(() =>
-  (openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
+    (openDataResponse.value?.reports || []).filter((report) => isWithinBariBounds(report.latitude, report.longitude))
 )
 
 const isLastPage = computed(() => {
@@ -37,9 +37,12 @@ let markers: CircleMarker[] = []
 
 const getStatusBadge = (status: string) => {
   switch (status) {
-    case 'RESOLVED': return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
-    case 'CLOSED': return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
-    default: return { class: 'bg-info', text: status, icon: 'it-info-circle' }
+    case 'RESOLVED':
+      return { class: 'bg-success', text: 'Risolto', icon: 'it-check-circle' }
+    case 'CLOSED':
+      return { class: 'bg-secondary', text: 'Chiuso', icon: 'it-lock' }
+    default:
+      return { class: 'bg-info', text: status, icon: 'it-info-circle' }
   }
 }
 
@@ -99,8 +102,8 @@ const initMap = async () => {
 
   const L = await loadLeaflet()
   const bariBounds = L.latLngBounds(
-    [BARI_BOUNDS.south, BARI_BOUNDS.west],
-    [BARI_BOUNDS.north, BARI_BOUNDS.east]
+      [BARI_BOUNDS.south, BARI_BOUNDS.west],
+      [BARI_BOUNDS.north, BARI_BOUNDS.east]
   )
 
   map = L.map(mapContainer.value, {
@@ -119,9 +122,13 @@ const initMap = async () => {
 watch(currentView, async (view) => {
   if (view !== 'map') return
   await nextTick()
-  await initMap()
-  map?.invalidateSize()
-  await renderMapMarkers()
+  // Inizializza la mappa se non esiste, altrimenti aggiornane solo dimensioni e dati
+  if (!map) {
+    await initMap()
+  } else {
+    map.invalidateSize()
+    await renderMapMarkers()
+  }
 })
 
 watch(visibleReports, async () => {
@@ -162,7 +169,7 @@ onBeforeUnmount(() => {
               :class="currentView === 'grid' ? 'btn-primary' : 'btn-outline-primary'"
               @click="currentView = 'grid'"
           >
-            <BIIcon name="it-grid" size="sm" class="me-1" :color="currentView === 'grid' ? 'white' : 'primary'" />
+            <BIIcon :color="currentView === 'grid' ? 'white' : 'primary'" class="me-1" name="it-grid" size="sm"/>
             Griglia Dati
           </button>
           <button
@@ -170,25 +177,26 @@ onBeforeUnmount(() => {
               :class="currentView === 'map' ? 'btn-primary' : 'btn-outline-primary'"
               @click="currentView = 'map'"
           >
-            <BIIcon name="it-map-marker" size="sm" class="me-1" :color="currentView === 'map' ? 'white' : 'primary'" />
+            <BIIcon :color="currentView === 'map' ? 'white' : 'primary'" class="me-1" name="it-map-marker" size="sm"/>
             Mappa
           </button>
         </div>
         <div class="col-12 col-md-6 text-md-end">
           <button class="btn btn-sm btn-outline-secondary" title="Scarica dataset in formato JSON">
-            <BIIcon name="it-download" size="sm" class="me-1" />
+            <BIIcon class="me-1" name="it-download" size="sm"/>
             Scarica JSON
           </button>
         </div>
       </div>
 
+      <!-- Sostituito v-else-if con v-show -->
       <div v-if="pending" class="d-flex justify-content-center my-5 py-5">
         <div class="progress-spinner progress-spinner-active" role="status">
           <span class="visually-hidden">Caricamento in corso...</span>
         </div>
       </div>
 
-      <div v-else-if="currentView === 'grid'">
+      <div v-show="!pending && currentView === 'grid'">
         <div class="row" v-if="openDataResponse?.reports && openDataResponse.reports.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">
@@ -197,8 +205,9 @@ onBeforeUnmount(() => {
 
                   <div class="d-flex justify-content-between align-items-start mb-3">
                     <div class="category-top m-0">
-                      <span class="badge rounded-pill text-white px-3 py-1" :class="getStatusBadge(report.status).class">
-                        <BIIcon :name="getStatusBadge(report.status).icon" size="xs" color="white" class="me-1" />
+                      <span :class="getStatusBadge(report.status).class"
+                            class="badge rounded-pill text-white px-3 py-1">
+                        <BIIcon :name="getStatusBadge(report.status).icon" class="me-1" color="white" size="xs"/>
                         {{ getStatusBadge(report.status).text }}
                       </span>
                     </div>
@@ -208,7 +217,7 @@ onBeforeUnmount(() => {
                   <h3 class="card-title h5 font-weight-bold">{{ report.category_name }}</h3>
 
                   <p class="card-text text-muted mb-4">
-                    <BIIcon name="it-map-marker-circle" size="sm" class="me-1" />
+                    <BIIcon class="me-1" name="it-map-marker-circle" size="sm"/>
                     {{ report.area_name || 'Area comunale non specificata' }}
                   </p>
 
@@ -239,7 +248,7 @@ onBeforeUnmount(() => {
           <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" />
+                <BIIcon name="it-chevron-left" size="sm"/>
                 <span class="visually-hidden">Pagina precedente</span>
               </a>
             </li>
@@ -249,14 +258,14 @@ onBeforeUnmount(() => {
             <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" />
+                <BIIcon name="it-chevron-right" size="sm"/>
               </a>
             </li>
           </ul>
         </nav>
       </div>
 
-      <div v-else-if="currentView === 'map'" class="map-view-wrapper">
+      <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">{{ visibleReports.length }} punti</span>
@@ -274,13 +283,15 @@ onBeforeUnmount(() => {
 .card-wrapper {
   height: 100%;
 }
+
 .card-bg {
-  border: 1px solid rgba(0,0,0,0.05);
+  border: 1px solid rgba(0, 0, 0, 0.05);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
+
 .card-bg:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
 }
 
 .open-data-map {
@@ -296,4 +307,4 @@ onBeforeUnmount(() => {
   line-height: 1.4;
   min-width: 12rem;
 }
-</style>
+</style>
\ No newline at end of file