feat: add notification center with bell dropdown, full page, and workspace scoping (Story 3.3)
Enhance NotificationDropdown with type-specific icons, French description builder, click-to-navigate with mark-as-read, and "Voir toutes les notifications" link. Add full notifications page at /notifications with pagination (25/page), individual mark-as-read, and empty state. Includes code review fixes: workspace-scoped unread count and dropdown items, race condition fix (mark-as-read before navigate), efficient markAllAsRead via direct update, deleted declaration URL handling, and per-workspace cache keys. 7 new feature tests. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
199
resources/js/pages/notifications/Index.vue
Normal file
199
resources/js/pages/notifications/Index.vue
Normal file
@@ -0,0 +1,199 @@
|
||||
<script setup lang="ts">
|
||||
import { Head, router } from '@inertiajs/vue3';
|
||||
import { computed } from 'vue';
|
||||
import {
|
||||
AlertTriangle,
|
||||
Bell,
|
||||
CheckCheck,
|
||||
FileUp,
|
||||
Mail,
|
||||
RefreshCw,
|
||||
Send,
|
||||
} from 'lucide-vue-next';
|
||||
import Heading from '@/components/Heading.vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import AppLayout from '@/layouts/AppLayout.vue';
|
||||
import type { AppNotification, NotificationType } from '@/types/notification';
|
||||
|
||||
type Props = {
|
||||
notifications: {
|
||||
data: AppNotification[];
|
||||
links: { url: string | null; label: string; active: boolean }[];
|
||||
current_page: number;
|
||||
last_page: number;
|
||||
};
|
||||
markAllReadUrl: string;
|
||||
readUrl: string;
|
||||
};
|
||||
|
||||
const props = defineProps<Props>();
|
||||
|
||||
const hasUnread = computed(() =>
|
||||
props.notifications.data.some((n) => !n.read_at),
|
||||
);
|
||||
|
||||
const iconMap: Record<NotificationType, typeof Send> = {
|
||||
nudge: Send,
|
||||
declaration_overdue: AlertTriangle,
|
||||
document_uploaded: FileUp,
|
||||
bulk_notification: Mail,
|
||||
status_changed: RefreshCw,
|
||||
};
|
||||
|
||||
function getIcon(notificationType?: NotificationType) {
|
||||
if (!notificationType) return Bell;
|
||||
return iconMap[notificationType] ?? Bell;
|
||||
}
|
||||
|
||||
function getDescription(notification: AppNotification): string {
|
||||
const type = notification.data?.notification_type;
|
||||
const title = notification.data?.declaration_title ?? 'Déclaration';
|
||||
const sender = notification.data?.sender_name;
|
||||
|
||||
switch (type) {
|
||||
case 'nudge':
|
||||
return sender
|
||||
? `Relance de ${sender} sur ${title}`
|
||||
: `Relance sur ${title}`;
|
||||
case 'declaration_overdue':
|
||||
return `Déclaration en retard : ${title}`;
|
||||
case 'document_uploaded':
|
||||
return `Document téléversé pour ${title}`;
|
||||
case 'status_changed':
|
||||
return `Statut modifié : ${title}`;
|
||||
case 'bulk_notification':
|
||||
return `Notification groupée : ${title}`;
|
||||
default:
|
||||
return title;
|
||||
}
|
||||
}
|
||||
|
||||
function markAllRead() {
|
||||
router.post(props.markAllReadUrl);
|
||||
}
|
||||
|
||||
function markAsRead(notification: AppNotification) {
|
||||
if (notification.read_at) return;
|
||||
|
||||
const url = props.readUrl.replace('__ID__', notification.id);
|
||||
router.post(url, {}, { preserveScroll: true });
|
||||
}
|
||||
|
||||
function navigateToNotification(notification: AppNotification) {
|
||||
const targetUrl = notification.data?.url;
|
||||
|
||||
if (!notification.read_at) {
|
||||
const url = props.readUrl.replace('__ID__', notification.id);
|
||||
router.post(url, {}, {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
if (targetUrl) {
|
||||
router.visit(targetUrl);
|
||||
}
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (targetUrl) {
|
||||
router.visit(targetUrl);
|
||||
}
|
||||
}
|
||||
|
||||
function goToPage(url: string | null) {
|
||||
if (url) {
|
||||
router.visit(url);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppLayout :breadcrumbs="[{ title: 'Notifications', href: '#' }]">
|
||||
<Head title="Notifications" />
|
||||
|
||||
<div class="flex items-center justify-between">
|
||||
<Heading
|
||||
title="Notifications"
|
||||
description="Consultez vos notifications."
|
||||
/>
|
||||
<Button
|
||||
v-if="hasUnread"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
@click="markAllRead"
|
||||
>
|
||||
<CheckCheck class="mr-1.5 size-4" />
|
||||
Tout marquer comme lu
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="notifications.data.length === 0"
|
||||
class="mt-8 flex flex-col items-center justify-center py-12 text-center"
|
||||
>
|
||||
<Bell class="mb-4 h-12 w-12 text-muted-foreground" />
|
||||
<p class="text-muted-foreground">
|
||||
Aucune notification
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="mt-6 space-y-2">
|
||||
<div
|
||||
v-for="notification in notifications.data"
|
||||
:key="notification.id"
|
||||
class="flex cursor-pointer items-start gap-4 rounded-lg border p-4 transition-colors hover:bg-muted/30"
|
||||
:class="{
|
||||
'border-primary/20 bg-muted/50': !notification.read_at,
|
||||
'opacity-70': notification.read_at,
|
||||
}"
|
||||
@click="navigateToNotification(notification)"
|
||||
>
|
||||
<component
|
||||
:is="getIcon(notification.data?.notification_type)"
|
||||
class="mt-0.5 size-5 shrink-0 text-muted-foreground"
|
||||
/>
|
||||
<div class="flex-1 space-y-1">
|
||||
<p class="text-sm font-medium">
|
||||
{{ getDescription(notification) }}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ notification.created_at }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex shrink-0 items-center gap-2">
|
||||
<button
|
||||
v-if="!notification.read_at"
|
||||
class="text-xs text-muted-foreground hover:text-foreground"
|
||||
@click.stop="markAsRead(notification)"
|
||||
>
|
||||
Marquer lu
|
||||
</button>
|
||||
<span
|
||||
v-if="!notification.read_at"
|
||||
class="size-2 rounded-full bg-primary"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div
|
||||
v-if="notifications.last_page > 1"
|
||||
class="flex items-center justify-center gap-2 pt-4"
|
||||
>
|
||||
<template
|
||||
v-for="(link, index) in notifications.links"
|
||||
:key="index"
|
||||
>
|
||||
<Button
|
||||
v-if="link.url || link.active"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
:disabled="!link.url || link.active"
|
||||
@click="goToPage(link.url)"
|
||||
v-html="link.label"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
Reference in New Issue
Block a user