feat: update authentication flow and user navigation

2026-06-13 17:15:59 +02:00
parent ab6455345e
commit a66339a7fc
18 changed files with 662 additions and 759 deletions
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import type { Report } from '~/types/api'
+
+definePageMeta({
+  middleware: 'auth',
+})
+
+useHead({ title: 'Le mie segnalazioni - Visione' })
+
+const { getReports } = useReports()
+
+const page = ref(1)
+const perPage = ref(10)
+const filterStatus = ref('')
+
+const { data: reportsRes, pending } = useAsyncData('citizen-reports-list', () => getReports({}))
+
+const reports = computed<Report[]>(() => reportsRes.value?.reports || [])
+const filteredReports = computed(() => {
+  if (!filterStatus.value) return reports.value
+  if (filterStatus.value === 'IN_PROGRESS') {
+    return reports.value.filter((report) => report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED')
+  }
+  return reports.value.filter((report) => report.status === filterStatus.value)
+})
+
+const paginatedReports = computed(() => {
+  const start = (page.value - 1) * perPage.value
+  return filteredReports.value.slice(start, start + perPage.value)
+})
+
+const handleStatusFilter = (status: string) => {
+  filterStatus.value = status === 'all' ? '' : status
+  page.value = 1
+}
+</script>
+
+<template>
+  <div>
+    <div class="bg-light border-bottom py-4 mb-4">
+      <div class="container">
+        <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3">
+          <div>
+            <h1 class="h3 font-weight-bold mb-1">Le mie segnalazioni</h1>
+            <p class="text-muted mb-0">Consulta stato, cronologia e conversazioni con gli operatori.</p>
+          </div>
+          <NuxtLink to="/reports/new" class="btn btn-primary">
+            <BIIcon name="it-plus-circle" size="sm" color="white" class="me-2" />
+            Nuova segnalazione
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+
+    <div class="container mb-5">
+      <div class="d-flex flex-wrap gap-2 align-items-center mb-3">
+        <div class="btn-group" role="group" aria-label="Filtri segnalazioni">
+          <button
+            type="button"
+            class="btn btn-sm"
+            :class="filterStatus === '' ? 'btn-primary' : 'btn-outline-primary'"
+            @click="handleStatusFilter('all')"
+          >
+            Tutte
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm"
+            :class="filterStatus === 'OPEN' ? 'btn-primary' : 'btn-outline-primary'"
+            @click="handleStatusFilter('OPEN')"
+          >
+            Aperte
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm"
+            :class="filterStatus === 'IN_PROGRESS' ? 'btn-primary' : 'btn-outline-primary'"
+            @click="handleStatusFilter('IN_PROGRESS')"
+          >
+            In corso
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm"
+            :class="filterStatus === 'RESOLVED' ? 'btn-primary' : 'btn-outline-primary'"
+            @click="handleStatusFilter('RESOLVED')"
+          >
+            Risolte
+          </button>
+        </div>
+      </div>
+
+      <div v-if="pending" class="text-center py-5">
+        <div class="spinner-border text-primary" role="status">
+          <span class="visually-hidden">Caricamento...</span>
+        </div>
+      </div>
+
+      <div v-else-if="filteredReports.length === 0" class="alert alert-info" role="alert">
+        Nessuna segnalazione trovata.
+      </div>
+
+      <template v-else>
+        <ReportTable :reports="paginatedReports" action-label="Apri segnalazione" />
+        <Pagination
+          v-if="filteredReports.length > perPage"
+          :current-page="page"
+          :per-page="perPage"
+          :total-items="filteredReports.length"
+          @page-change="page = $event"
+        />
+      </template>
+    </div>
+  </div>
+</template>