feat: added feedback when sending feedback and saved feedback in local storage

Closes #12

app/components/Header.vue

@@ -74,7 +74,7 @@ const navLinks = [
                       <BIIcon name="it-user" color="black"/>
                       <span v-if="hasUnreadNotifications" class="notification-dot"></span>
                     </span>
-                    <span class="d-none d-lg-block">{{ user?.first_name }}</span>
+                    <span class="d-none d-lg-block username">{{ user?.first_name }}</span>
                   </NuxtLink>
 
                   <button class="btn btn-primary btn-icon btn-full border-0" @click="logout"
@@ -310,4 +310,11 @@ const navLinks = [
   background: #d9364f;
   border: 2px solid #ffffff;
 }
+
+.username {
+  max-width: 8ch;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>

app/pages/admin/reports.vue

@@ -70,11 +70,27 @@ const reportsByStatus = computed(() =>
         .filter((item) => item.total > 0)
 )
 
-const recentReports = computed(() =>
-  [...filteredReports.value]
-    .sort((a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime())
-    .slice(0, 12)
-)
+const currentPage = ref(1)
+const itemsPerPage = ref(12)
+
+watch([search, selectedStatus, selectedCategoryId, selectedAreaId], () => {
+  currentPage.value = 1
+})
+
+const totalPages = computed(() => Math.ceil(filteredReports.value.length / itemsPerPage.value))
+
+const paginatedReports = computed(() => {
+  const sorted = [...filteredReports.value].sort(
+      (a, b) => new Date(b.created_at || '').getTime() - new Date(a.created_at || '').getTime()
+  )
+  const start = (currentPage.value - 1) * itemsPerPage.value
+  const end = start + itemsPerPage.value
+  return sorted.slice(start, end)
+})
+
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+}
 
 const formatDate = (value?: string) => {
   if (!value) return '-'
@@ -160,7 +176,7 @@ const truncate = (value?: string, max = 120) => {
         <div class="card-body">
           <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
             <h2 class="h5 mb-0">Distribuzione stati</h2>
-            <span class="text-muted small">{{ filteredReports.length }} elementi visibili</span>
+            <span class="text-muted small">{{ filteredReports.length }} elementi trovati</span>
           </div>
           <div class="table-responsive report-table-wrapper">
             <table class="table table-hover report-table mb-0 align-middle">
@@ -185,11 +201,11 @@ const truncate = (value?: string, max = 120) => {
         </div>
       </div>
 
-      <div v-if="recentReports.length === 0" class="alert alert-info">
+      <div v-if="filteredReports.length === 0" class="alert alert-info">
         Nessuna segnalazione trovata con filtri correnti.
       </div>
 
-      <div v-else class="card card-bg border-0 shadow-sm">
+      <div v-else class="card card-bg border-0 shadow-sm mb-5">
         <div class="card-body p-0">
           <div class="table-responsive report-table-wrapper">
             <table class="table table-hover report-table mb-0 align-middle">
@@ -205,7 +221,7 @@ const truncate = (value?: string, max = 120) => {
               </tr>
               </thead>
               <tbody>
-                <tr v-for="report in recentReports" :key="report.id">
+              <tr v-for="report in paginatedReports" :key="report.id">
                 <td class="report-table-id">#{{ report.id }}</td>
                 <td>
                   <div class="fw-semibold">{{ report.category_name || '-' }}</div>
@@ -225,6 +241,17 @@ const truncate = (value?: string, max = 120) => {
             </table>
           </div>
         </div>
+
+        <div class="card-footer bg-transparent d-flex flex-wrap justify-content-between align-items-center py-3" v-if="totalPages > 1">
+          <span class="text-muted small mb-2 mb-sm-0">Pagina {{ currentPage }} di {{ totalPages }}</span>
+
+          <Pagination
+              :current-page="currentPage"
+              :per-page="itemsPerPage"
+              :total-items="filteredReports.length"
+              @page-change="handlePageChange"
+          />
+        </div>
       </div>
     </template>
   </div>

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 }),
-    { 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>

app/pages/reports/[id].vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+
 definePageMeta({
   middleware: 'auth',
 })
@@ -34,6 +36,19 @@ const isFeedbackOpen = ref(false)
 const feedbackRating = ref(5)
 const feedbackComment = ref('')
 const isSubmittingFeedback = ref(false)
+const submittedFeedback = ref<{ rating: number; comment?: string } | null>(null)
+
+// Carica l'eventuale feedback da local storage dopo il mount (per evitare mismatch nel SSR)
+onMounted(() => {
+  try {
+    const saved = localStorage.getItem(`feedback_${reportId}`)
+    if (saved) {
+      submittedFeedback.value = JSON.parse(saved)
+    }
+  } catch (error) {
+    console.error('Errore nel recupero del feedback da local storage:', error)
+  }
+})
 
 const handleSendMessage = async (messageText: string, files: File[]) => {
   isSubmittingMessage.value = true
@@ -51,13 +66,18 @@ const handleSendMessage = async (messageText: string, files: File[]) => {
 const handleSubmitFeedback = async () => {
   isSubmittingFeedback.value = true
   try {
-    await addFeedback(reportId, {
+    const feedbackData = {
       rating: feedbackRating.value,
       comment: feedbackComment.value || undefined,
-    })
+    }
+
+    await addFeedback(reportId, feedbackData)
+
+    // Salva in local storage in mancanza di un endpoint dal backend
+    localStorage.setItem(`feedback_${reportId}`, JSON.stringify(feedbackData))
+    submittedFeedback.value = feedbackData
+
     isFeedbackOpen.value = false
-    feedbackRating.value = 5
-    feedbackComment.value = ''
     await refreshReport()
   } catch (error) {
     console.error('Error submitting feedback:', error)
@@ -251,6 +271,30 @@ const formatDate = (dateString: string): string => {
             <div v-if="canFeedback && isOwner" class="card card-bg border-0 shadow-sm mb-4">
               <div class="card-body">
                 <h2 class="h6 mb-3">Valuta intervento</h2>
+
+                <template v-if="submittedFeedback">
+                  <div class="alert alert-success small mb-3">
+                    Grazie! Il tuo feedback è stato inviato con successo.
+                  </div>
+                  <div class="mb-3">
+                    <span class="d-block text-muted small mb-1">La tua valutazione</span>
+                    <div class="d-flex gap-1">
+                      <BIIcon
+                          v-for="n in 5"
+                          :key="n"
+                          :name="n <= submittedFeedback.rating ? 'it-star-full' : 'it-star-outline'"
+                          size="sm"
+                          :color="n <= submittedFeedback.rating ? 'warning' : 'primary'"
+                      />
+                    </div>
+                  </div>
+                  <div v-if="submittedFeedback.comment">
+                    <span class="d-block text-muted small mb-1">Il tuo commento</span>
+                    <p class="mb-0 small text-break">{{ submittedFeedback.comment }}</p>
+                  </div>
+                </template>
+
+                <template v-else>
                   <p class="text-muted small mb-3">Lascia valutazione finale quando intervento è concluso.</p>
                   <button
                       v-if="!isFeedbackOpen"
@@ -296,6 +340,7 @@ const formatDate = (dateString: string): string => {
                       </button>
                     </div>
                   </template>
+                </template>
               </div>
             </div>