200 lines
6.1 KiB
Vue
200 lines
6.1 KiB
Vue
|
<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>
|