SnitchItaly/frontend
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: added pagination to /admin/reports

Browse Source 
Closes #13
This commit is contained in:
reloia
2026-06-18 22:18:00 +02:00 Unverified
parent 99aa76f56e
commit ef92cd91b2
1 changed files with 78 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/admin/reports.vue
+40 -9
View File
@@ -70,11 +70,30 @@ 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)
)
// --- INIZIO LOGICA PAGINAZIONE ---
const currentPage = ref(1)
const itemsPerPage = ref(12)
// Reset alla pagina 1 quando cambiano i filtri
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
}
// --- FINE LOGICA PAGINAZIONE ---
const formatDate = (value?: string) => {
if (!value) return '-'
@@ -160,7 +179,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 +204,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 +224,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 +244,18 @@ const truncate = (value?: string, max = 120) => {
</table>
</div>
</div>
<!-- Paginazione Component -->
<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>