236 lines
8.2 KiB
Vue
236 lines
8.2 KiB
Vue
<script setup lang="ts">
|
|
import type { Report } from '~/types/api'
|
|
|
|
const { user } = useAuth()
|
|
const { getReports } = useReports()
|
|
|
|
const page = ref(1)
|
|
const perPage = ref(10)
|
|
const filterStatus = ref<string>('') // Stringa vuota = "Tutte"
|
|
|
|
// Carichiamo TUTTE le segnalazioni per avere statistiche globali e filtri veloci
|
|
const { data: reportsRes, pending } = useAsyncData('citizen-reports-all', () =>
|
|
getReports({}) // Non passiamo filtri alla chiamata API
|
|
)
|
|
|
|
// Dati grezzi dal server
|
|
const rawReports = computed<Report[]>(() => reportsRes.value?.reports || [])
|
|
|
|
// 1. STATISTICHE GLOBALI (Sempre basate su tutti i dati, ignorano i filtri)
|
|
const statsGlobal = computed(() => {
|
|
const stats = { total: 0, OPEN: 0, IN_PROGRESS: 0, RESOLVED: 0 }
|
|
rawReports.value.forEach((report: Report) => {
|
|
stats.total++
|
|
if (report.status === 'OPEN') stats.OPEN++
|
|
if (report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED') stats.IN_PROGRESS++
|
|
if (report.status === 'RESOLVED') stats.RESOLVED++
|
|
})
|
|
return stats
|
|
})
|
|
|
|
// 2. FILTRO LATO CLIENT (Rende il cambio filtro istantaneo)
|
|
const filteredReports = computed(() => {
|
|
if (!filterStatus.value) return rawReports.value
|
|
|
|
return rawReports.value.filter((report: Report) => {
|
|
// Raggruppiamo IN_PROGRESS e ASSIGNED sotto la stessa voce per l'utente
|
|
if (filterStatus.value === 'IN_PROGRESS') {
|
|
return report.status === 'IN_PROGRESS' || report.status === 'ASSIGNED'
|
|
}
|
|
return report.status === filterStatus.value
|
|
})
|
|
})
|
|
|
|
// 3. PAGINAZIONE LATO CLIENT
|
|
const paginatedReports = computed(() => {
|
|
const start = (page.value - 1) * perPage.value
|
|
const end = start + perPage.value
|
|
return filteredReports.value.slice(start, end)
|
|
})
|
|
|
|
const totalFiltered = computed(() => filteredReports.value.length)
|
|
|
|
// GESTIONE FILTRI (Evita reload se clicchi il filtro attivo)
|
|
const handleStatusFilter = (status: string) => {
|
|
const targetStatus = status === 'all' ? '' : status
|
|
|
|
// Se clicco sullo stesso filtro, non fare nulla
|
|
if (filterStatus.value === targetStatus) return
|
|
|
|
filterStatus.value = targetStatus
|
|
page.value = 1 // Reset alla prima pagina
|
|
}
|
|
|
|
const handlePageChange = (newPage: number) => {
|
|
page.value = newPage
|
|
}
|
|
|
|
// Helpers grafici
|
|
const formatDate = (dateString?: string): string => {
|
|
if (!dateString) return ''
|
|
return new Date(dateString).toLocaleDateString('it-IT', {
|
|
day: '2-digit', month: '2-digit', year: '2-digit',
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- Callout Gamification -->
|
|
<div class="callout callout-highlight callout-success mb-4">
|
|
<div class="callout-title d-flex align-items-center">
|
|
<BIIcon name="it-star-full" size="sm" color="success" class="me-2" />
|
|
I tuoi Punti Cittadino
|
|
</div>
|
|
<p>
|
|
Hai accumulato <strong>{{ user?.points || 0 }} punti</strong>! Continua ad aiutare la comunità segnalando i problemi urbani.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- STATISTICHE RAPIDE (Basate su statsGlobal, non cambiano filtrando) -->
|
|
<div class="row mb-5">
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<div class="card card-bg text-center">
|
|
<div class="card-body">
|
|
<div class="display-6 text-primary font-weight-bold">{{ statsGlobal.total }}</div>
|
|
<small class="text-muted">Totali</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<div class="card card-bg text-center">
|
|
<div class="card-body">
|
|
<div class="display-6 text-warning font-weight-bold">{{ statsGlobal.OPEN }}</div>
|
|
<small class="text-muted">Aperte</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<div class="card card-bg text-center">
|
|
<div class="card-body">
|
|
<div class="display-6 text-info font-weight-bold">{{ statsGlobal.IN_PROGRESS }}</div>
|
|
<small class="text-muted">In corso</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 col-md-3 mb-3">
|
|
<div class="card card-bg text-center">
|
|
<div class="card-body">
|
|
<div class="display-6 text-success font-weight-bold">{{ statsGlobal.RESOLVED }}</div>
|
|
<small class="text-muted">Risolte</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AZIONI RAPIDE E FILTRI -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="d-flex gap-2 flex-wrap align-items-center">
|
|
<NuxtLink to="/reports/create" class="btn btn-primary me-md-3">
|
|
<BIIcon name="it-plus-circle" size="sm" color="white" class="me-2" />
|
|
Nuova segnalazione
|
|
</NuxtLink>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<div v-if="pending" class="progress-spinner progress-spinner-active my-5 mx-auto">
|
|
<span class="visually-hidden">Caricamento...</span>
|
|
</div>
|
|
|
|
<!-- TABELLA SEGNALAZIONI -->
|
|
<div class="row" v-else>
|
|
<div class="col-12">
|
|
<div v-if="filteredReports.length === 0" class="alert alert-info text-center" role="alert">
|
|
<h6>Nessuna segnalazione trovata</h6>
|
|
<p class="small text-muted mb-0">Non ci sono segnalazioni con lo stato "{{ filterStatus || 'Tutte' }}".</p>
|
|
</div>
|
|
|
|
<div v-else class="table-responsive">
|
|
<table class="table table-hover border-bottom">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th scope="col" class="small">#ID</th>
|
|
<th scope="col" class="small">Categoria</th>
|
|
<th scope="col" class="small">Indirizzo</th>
|
|
<th scope="col" class="small">Stato</th>
|
|
<th scope="col" class="small">Creazione</th>
|
|
<th scope="col" class="text-center small">Azioni</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="report in paginatedReports" :key="report.id" class="align-middle">
|
|
<td class="small font-weight-semibold">#{{ report.id }}</td>
|
|
<td class="small">{{ report.category_name }}</td>
|
|
<td class="small">
|
|
<span class="text-muted text-truncate" style="max-width: 200px; display: inline-block;">
|
|
{{ report.address }}
|
|
</span>
|
|
</td>
|
|
<td class="small">
|
|
<StatusBadge :status="report.status" />
|
|
</td>
|
|
<td class="small text-muted">{{ formatDate(report.created_at) }}</td>
|
|
<td class="text-center">
|
|
<NuxtLink :to="`/reports/${report.id}`" class="btn btn-sm btn-outline-primary p-1">
|
|
<BIIcon name="it-arrow-right" size="xs" />
|
|
</NuxtLink>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<Pagination
|
|
v-if="totalFiltered > perPage"
|
|
:current-page="page"
|
|
:per-page="perPage"
|
|
:total-items="totalFiltered"
|
|
@page-change="handlePageChange"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.table-hover tbody tr:hover { background-color: rgba(0, 111, 157, 0.03); }
|
|
.btn-group .btn { min-width: 80px; }
|
|
</style>
|