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

feat: add unread notifications feature and enhance notification display

Browse Source
This commit is contained in:
gabdevele
2026-06-18 13:51:54 +02:00 Unverified
parent 6b74578a60
commit 2a8cbf4299
5 changed files with 196 additions and 265 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/admin/reports.vue
+29 -88
View File
@@ -94,7 +94,7 @@ const truncate = (value?: string, max = 120) => {
</script>
<template>
<div class="container my-5 admin-report-overview">
<div class="container my-5">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
<div>
<h1 class="h3 font-weight-bold mb-1">Overview Segnalazioni</h1>
@@ -110,14 +110,16 @@ const truncate = (value?: string, max = 120) => {
{ label: 'In lavorazione', value: activeReports, tone: 'warning' },
{ label: 'Chiuse/Risolte', value: closedReports, tone: 'success' }
]" :key="card.label">
<div class="overview-stat-card" :class="`tone-${card.tone}`">
<span class="overview-stat-label">{{ card.label }}</span>
<strong class="overview-stat-value">{{ card.value }}</strong>
<div class="card card-bg dashboard-stat h-100">
<div class="card-body py-3">
<div class="stat-value">{{ card.value }}</div>
<div class="small text-muted">{{ card.label }}</div>
</div>
</div>
</div>
</div>
<div class="card border-0 shadow-sm mb-4">
<div class="card card-bg border-0 shadow-sm mb-4">
<div class="card-body">
<div class="row g-3 align-items-end">
<div class="col-12 col-lg-4">
@@ -154,17 +156,31 @@ const truncate = (value?: string, max = 120) => {
</div>
<template v-else>
<div class="card border-0 shadow-sm mb-4">
<div class="card card-bg border-0 shadow-sm mb-4">
<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>
</div>
<div class="status-chip-grid">
<div v-for="item in reportsByStatus" :key="item.status" class="status-chip" :class="`tone-${item.tone}`">
<span>{{ item.label }}</span>
<strong>{{ item.total }}</strong>
</div>
<div class="table-responsive report-table-wrapper">
<table class="table table-hover report-table mb-0 align-middle">
<thead>
<tr>
<th>Stato</th>
<th class="text-end">Totale</th>
</tr>
</thead>
<tbody>
<tr v-for="item in reportsByStatus" :key="item.status">
<td>
<span class="badge" :class="`bg-${item.tone}`">
{{ item.label }}
</span>
</td>
<td class="text-end">{{ item.total }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
@@ -173,7 +189,7 @@ const truncate = (value?: string, max = 120) => {
Nessuna segnalazione trovata con filtri correnti.
</div>
<div v-else class="card border-0 shadow-sm">
<div v-else class="card card-bg border-0 shadow-sm">
<div class="card-body p-0">
<div class="table-responsive report-table-wrapper">
<table class="table table-hover report-table mb-0 align-middle">
@@ -198,7 +214,7 @@ const truncate = (value?: string, max = 120) => {
<td>{{ report.address || '-' }}</td>
<td>{{ report.area_name || 'Non assegnata' }}</td>
<td>
<span class="badge rounded-pill" :class="`text-bg-${statusMeta[report.status].tone}`">
<span class="badge" :class="`bg-${statusMeta[report.status].tone}`">
{{ statusMeta[report.status].label }}
</span>
</td>
@@ -213,78 +229,3 @@ const truncate = (value?: string, max = 120) => {
</template>
</div>
</template>
<style scoped>
.admin-report-overview {
--admin-surface: #ffffff;
--admin-border: rgba(31, 48, 78, 0.12);
--admin-text-soft: #5b6577;
}
.overview-stat-card {
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 252, 0.9)),
var(--admin-surface);
border: 1px solid var(--admin-border);
border-radius: 1rem;
padding: 1rem 1.1rem;
min-height: 118px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 14px 34px rgba(31, 48, 78, 0.08);
}
.overview-stat-card::before {
content: '';
width: 2.5rem;
height: 0.35rem;
border-radius: 999px;
display: block;
}
.overview-stat-card.tone-primary::before { background: #0d6efd; }
.overview-stat-card.tone-danger::before { background: #d9364f; }
.overview-stat-card.tone-warning::before { background: #c58100; }
.overview-stat-card.tone-success::before { background: #198754; }
.overview-stat-label {
color: var(--admin-text-soft);
font-size: 0.9rem;
}
.overview-stat-value {
font-size: clamp(1.8rem, 4vw, 2.5rem);
line-height: 1;
color: #17324d;
}
.status-chip-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.75rem;
}
.status-chip {
border-radius: 0.9rem;
padding: 0.85rem 1rem;
border: 1px solid var(--admin-border);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
background: #fff;
}
.status-chip strong {
font-size: 1.1rem;
}
.status-chip.tone-danger { background: rgba(217, 54, 79, 0.08); }
.status-chip.tone-warning { background: rgba(197, 129, 0, 0.08); }
.status-chip.tone-info { background: rgba(13, 202, 240, 0.08); }
.status-chip.tone-primary { background: rgba(13, 110, 253, 0.08); }
.status-chip.tone-success { background: rgba(25, 135, 84, 0.08); }
.status-chip.tone-secondary,
.status-chip.tone-dark { background: rgba(108, 117, 125, 0.08); }
</style>
app/pages/notifications.vue
+79 -87
View File
@@ -1,11 +1,13 @@
<script setup lang="ts">
import type { Notification } from '~/types/api'
definePageMeta({
middleware: 'auth',
})
useHead({ title: 'Notifiche - Visione' })
const { fetchNotifications, markNotificationRead } = useAuth()
const { fetchNotifications, markNotificationRead, refreshUnreadNotifications } = useAuth()
const router = useRouter()
const page = ref(1)
@@ -13,27 +15,25 @@ const perPage = ref(15)
const { data: notificationsData, refresh: refreshNotifications } = await useAsyncData(
'notifications',
() => fetchNotifications({ page: page.value, per_page: perPage.value })
() => fetchNotifications({ page: page.value, per_page: perPage.value }),
{ watch: [page] }
)
const notifications = computed(() => notificationsData.value?.notifications || [])
const notifications = computed<Notification[]>(() => notificationsData.value?.notifications || [])
const totalNotifications = computed(() => notificationsData.value?.notifications?.length || 0)
const unreadCount = computed(() => notifications.value.filter((n: any) => !n.read_at).length)
const handlePageChange = (newPage: number) => {
page.value = newPage
}
const unreadCount = computed(() => notifications.value.filter((notification) => !notification.read_at).length)
const handleMarkAsRead = async (notificationId: number) => {
try {
await markNotificationRead(notificationId)
await refreshNotifications()
await refreshUnreadNotifications()
} catch (error) {
console.error('Error marking notification as read:', error)
}
}
const handleNotificationClick = async (notification: any) => {
const handleNotificationClick = async (notification: Notification) => {
if (!notification.read_at) {
await handleMarkAsRead(notification.id)
}
@@ -111,73 +111,71 @@ const getNotificationColor = (type: string): string => {
<div class="container mb-5">
<div class="row">
<div class="col-12 col-lg-10 offset-lg-1">
<div class="d-flex gap-2 mb-4">
<button class="btn btn-sm btn-outline-primary active">Tutti</button>
<button class="btn btn-sm btn-outline-secondary">Solo non letti</button>
<div v-if="notifications.length === 0" class="card card-bg border-0 shadow-sm">
<div class="card-body py-5 text-center">
<BIIcon name="it-bell" size="lg" color="secondary" class="mb-3 d-block mx-auto" />
<h2 class="h5 mb-2">Nessuna notifica</h2>
<p class="text-muted mb-3">Quando arriveranno aggiornamenti sulle tue segnalazioni, li troverai qui.</p>
<NuxtLink to="/reports" class="btn btn-outline-primary btn-sm">
Vai alle segnalazioni
</NuxtLink>
</div>
</div>
<div v-if="notifications.length === 0" class="text-center py-5">
<BIIcon name="it-bell" size="xl" color="info" class="mb-3 d-block" />
<h6 class="text-muted">Nessuna notifica</h6>
<p class="small text-muted">Quando riceverai nuovi aggiornamenti sulle tue segnalazioni, appariranno qui.</p>
</div>
<div v-else class="list-group">
<button
v-for="notification in notifications"
:key="notification.id"
type="button"
class="list-group-item list-group-item-action border-0 p-3 mb-3 rounded-2"
:class="{
'bg-light': !notification.read_at,
'bg-white': notification.read_at,
}"
@click="handleNotificationClick(notification)"
>
<div class="d-flex align-items-start gap-3">
<div class="flex-shrink-0 mt-1">
<div class="rounded-circle p-2" :class="`bg-${getNotificationColor(notification.type)}`" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
<BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
</div>
</div>
<div class="flex-grow-1">
<div class="d-flex align-items-start justify-content-between">
<div>
<h6 class="mb-1 font-weight-bold" :class="{ 'text-dark': !notification.read_at }">
{{ notification.title }}
</h6>
<p class="mb-1 small" :class="{ 'text-muted': notification.read_at }">
{{ notification.body }}
</p>
<small class="text-muted">
{{ formatDate(notification.created_at) }}
</small>
</div>
<div v-if="!notification.read_at" class="flex-shrink-0">
<span class="badge bg-primary rounded-pill">Nuovo</span>
</div>
</div>
<div v-if="notification.report_id" class="mt-2 d-flex gap-2">
<NuxtLink :to="`/reports/${notification.report_id}`" class="btn btn-sm btn-outline-primary">
<BIIcon name="it-arrow-right" size="xs" class="me-1" />
Vedi segnalazione
</NuxtLink>
<button
v-if="!notification.read_at"
type="button"
class="btn btn-sm btn-outline-secondary"
@click.stop="handleMarkAsRead(notification.id)"
<div v-else class="card card-bg border-0 shadow-sm">
<div class="card-body p-0">
<div
v-for="notification in notifications"
:key="notification.id"
class="notification-row p-3"
:class="{ 'notification-row-unread': !notification.read_at }"
>
<div class="d-flex align-items-start gap-3">
<div class="flex-shrink-0 mt-1">
<div
class="rounded-circle d-flex align-items-center justify-content-center notification-icon"
:class="`bg-${getNotificationColor(notification.type)}`"
>
Segna come letta
</button>
<BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
</div>
</div>
<div class="flex-grow-1">
<div class="d-flex flex-wrap justify-content-between gap-2">
<div>
<h2 class="h6 mb-1">{{ notification.title }}</h2>
<p class="mb-1 text-muted">{{ notification.body }}</p>
<small class="text-muted">{{ formatDate(notification.created_at) }}</small>
</div>
<div v-if="!notification.read_at" class="flex-shrink-0">
<span class="badge bg-primary">Nuovo</span>
</div>
</div>
<div class="mt-3 d-flex flex-wrap gap-2">
<button
type="button"
class="btn btn-outline-primary btn-sm"
@click="handleNotificationClick(notification)"
>
Apri notifica
</button>
<NuxtLink v-if="notification.report_id" :to="`/reports/${notification.report_id}`" class="btn btn-outline-primary btn-sm">
Vedi segnalazione
</NuxtLink>
<button
v-if="!notification.read_at"
type="button"
class="btn btn-outline-secondary btn-sm"
@click.stop="handleMarkAsRead(notification.id)"
>
Segna come letta
</button>
</div>
</div>
</div>
</div>
</button>
</div>
</div>
<Pagination
@@ -185,7 +183,7 @@ const getNotificationColor = (type: string): string => {
:current-page="page"
:per-page="perPage"
:total-items="totalNotifications"
@page-change="handlePageChange"
@page-change="page = $event"
/>
</div>
@@ -196,23 +194,17 @@ const getNotificationColor = (type: string): string => {
</template>
<style scoped>
.list-group-item {
border: 1px solid #e9ecef;
transition: all 0.2s ease;
cursor: pointer;
&:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-1px);
}
&.bg-light {
border-left: 4px solid #006f9d;
}
.notification-row + .notification-row {
border-top: 1px solid #e9ecef;
}
.rounded-2 {
border-radius: 0.5rem;
.notification-row-unread {
border-left: 4px solid #0066cc;
background: #f8fbff;
}
.notification-icon {
width: 40px;
height: 40px;
}
</style>