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:
@@ -1,6 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { router, usePage } from '@inertiajs/vue3';
|
||||
import { Bell } from 'lucide-vue-next';
|
||||
import {
|
||||
AlertTriangle,
|
||||
Bell,
|
||||
FileUp,
|
||||
Mail,
|
||||
RefreshCw,
|
||||
Send,
|
||||
} from 'lucide-vue-next';
|
||||
import { computed } from 'vue';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
@@ -11,15 +18,16 @@ import {
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import type { NotificationType } from '@/types/notification';
|
||||
|
||||
type NotificationItem = {
|
||||
id: string;
|
||||
type: string;
|
||||
data: {
|
||||
notification_type?: NotificationType;
|
||||
declaration_id?: number;
|
||||
declaration_title?: string;
|
||||
mentioned_by_name?: string;
|
||||
message?: string;
|
||||
sender_name?: string;
|
||||
url?: string;
|
||||
};
|
||||
read_at: string | null;
|
||||
@@ -30,9 +38,18 @@ type UserNotifications = {
|
||||
unread_count: number;
|
||||
readUrl: string | null;
|
||||
readAllUrl: string | null;
|
||||
notificationsUrl: string | null;
|
||||
items: NotificationItem[] | undefined;
|
||||
};
|
||||
|
||||
const iconMap: Record<NotificationType, typeof Send> = {
|
||||
nudge: Send,
|
||||
declaration_overdue: AlertTriangle,
|
||||
document_uploaded: FileUp,
|
||||
bulk_notification: Mail,
|
||||
status_changed: RefreshCw,
|
||||
};
|
||||
|
||||
const page = usePage();
|
||||
|
||||
const userNotifications = computed<UserNotifications>(() => {
|
||||
@@ -44,32 +61,64 @@ const unreadCount = computed(() => userNotifications.value?.unread_count ?? 0);
|
||||
const items = computed(() => userNotifications.value?.items ?? []);
|
||||
const isLoading = computed(() => userNotifications.value?.items === undefined);
|
||||
|
||||
function getIcon(notificationType?: NotificationType) {
|
||||
if (!notificationType) return Bell;
|
||||
return iconMap[notificationType] ?? Bell;
|
||||
}
|
||||
|
||||
function getDescription(notification: NotificationItem): 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 markAsRead(notification: NotificationItem) {
|
||||
const readUrl = userNotifications.value?.readUrl;
|
||||
if (!readUrl) return;
|
||||
|
||||
// Replace __ID__ placeholder with actual notification ID
|
||||
// This is a convention: the server provides a URL template with __ID__ as placeholder
|
||||
const url = readUrl.replace('__ID__', notification.id);
|
||||
router.post(url, {}, { preserveScroll: true });
|
||||
}
|
||||
|
||||
function navigateToNotification(notification: NotificationItem) {
|
||||
const targetUrl = notification.data?.url;
|
||||
if (!targetUrl) return;
|
||||
|
||||
if (!notification.read_at) {
|
||||
markAsRead(notification);
|
||||
const readUrl = userNotifications.value?.readUrl;
|
||||
if (readUrl) {
|
||||
const url = readUrl.replace('__ID__', notification.id);
|
||||
router.post(url, {}, {
|
||||
preserveScroll: true,
|
||||
onSuccess: () => {
|
||||
if (targetUrl) {
|
||||
router.visit(targetUrl);
|
||||
}
|
||||
},
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
router.visit(targetUrl, {
|
||||
onError: () => {
|
||||
// Declaration may have been deleted — mark as read anyway
|
||||
if (!notification.read_at) {
|
||||
markAsRead(notification);
|
||||
}
|
||||
},
|
||||
});
|
||||
if (targetUrl) {
|
||||
router.visit(targetUrl);
|
||||
}
|
||||
}
|
||||
|
||||
function markAllAsRead() {
|
||||
@@ -78,6 +127,13 @@ function markAllAsRead() {
|
||||
|
||||
router.post(readAllUrl, {}, { preserveScroll: true });
|
||||
}
|
||||
|
||||
function navigateToAll() {
|
||||
const url = userNotifications.value?.notificationsUrl;
|
||||
if (url) {
|
||||
router.visit(url);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -94,7 +150,18 @@ function markAllAsRead() {
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" class="w-80">
|
||||
<DropdownMenuLabel>Notifications</DropdownMenuLabel>
|
||||
<div class="flex items-center justify-between px-2 py-1.5">
|
||||
<DropdownMenuLabel class="p-0">
|
||||
Notifications
|
||||
</DropdownMenuLabel>
|
||||
<button
|
||||
v-if="unreadCount > 0"
|
||||
class="text-xs text-muted-foreground hover:text-foreground"
|
||||
@click.stop="markAllAsRead"
|
||||
>
|
||||
Tout marquer comme lu
|
||||
</button>
|
||||
</div>
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
<div
|
||||
@@ -106,57 +173,50 @@ function markAllAsRead() {
|
||||
|
||||
<div
|
||||
v-else-if="!items.length"
|
||||
class="px-2 py-4 text-center text-sm text-muted-foreground"
|
||||
class="flex flex-col items-center gap-2 px-2 py-6 text-center text-sm text-muted-foreground"
|
||||
>
|
||||
Aucune notification.
|
||||
<Bell class="size-8 text-muted-foreground/50" />
|
||||
Aucune notification
|
||||
</div>
|
||||
|
||||
<template v-else>
|
||||
<DropdownMenuItem
|
||||
v-for="notification in items"
|
||||
:key="notification.id"
|
||||
class="flex cursor-pointer flex-col items-start gap-1 p-3"
|
||||
:class="{ 'opacity-50': notification.read_at }"
|
||||
class="flex cursor-pointer items-start gap-3 p-3"
|
||||
:class="{
|
||||
'bg-muted/50': !notification.read_at,
|
||||
'opacity-60': notification.read_at,
|
||||
}"
|
||||
@click="navigateToNotification(notification)"
|
||||
>
|
||||
<div class="flex w-full items-center justify-between gap-2">
|
||||
<span class="text-xs font-medium">
|
||||
{{
|
||||
notification.data?.mentioned_by_name ??
|
||||
'Système'
|
||||
}}
|
||||
</span>
|
||||
<span class="text-xs text-muted-foreground">
|
||||
<component
|
||||
:is="getIcon(notification.data?.notification_type)"
|
||||
class="mt-0.5 size-4 shrink-0 text-muted-foreground"
|
||||
/>
|
||||
<div class="flex-1 space-y-1">
|
||||
<p class="text-xs leading-snug">
|
||||
{{ getDescription(notification) }}
|
||||
</p>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
{{ notification.created_at }}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-xs text-muted-foreground">
|
||||
<span
|
||||
v-if="notification.data?.declaration_title"
|
||||
class="font-medium text-foreground"
|
||||
>
|
||||
{{ notification.data.declaration_title }}
|
||||
</span>
|
||||
{{
|
||||
notification.data?.message
|
||||
? ` — ${notification.data.message}`
|
||||
: ''
|
||||
}}
|
||||
</p>
|
||||
<span
|
||||
v-if="!notification.read_at"
|
||||
class="size-1.5 rounded-full bg-primary"
|
||||
class="mt-1 size-2 shrink-0 rounded-full bg-primary"
|
||||
/>
|
||||
</DropdownMenuItem>
|
||||
|
||||
</template>
|
||||
|
||||
<DropdownMenuSeparator v-if="items.length > 0" />
|
||||
<DropdownMenuSeparator v-if="!isLoading" />
|
||||
<DropdownMenuItem
|
||||
v-if="unreadCount > 0"
|
||||
v-if="!isLoading"
|
||||
class="justify-center text-xs text-muted-foreground"
|
||||
@click="markAllAsRead"
|
||||
@click="navigateToAll"
|
||||
>
|
||||
Marquer tout comme lu
|
||||
Voir toutes les notifications
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
Reference in New Issue
Block a user