NavBarNotifications.vue
2.14 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<script setup>
import avatar4 from '@images/avatars/avatar-4.png'
import avatar5 from '@images/avatars/avatar-5.png'
const notifications = ref([
{
id: 1,
img: avatar4,
title: 'Congratulation Flora! 🎉',
subtitle: 'Won the monthly best seller badge',
time: 'Today',
isSeen: true,
},
{
id: 2,
text: 'Cecilia Becker',
title: 'Cecilia Becker',
subtitle: 'Accepted your connection',
time: '12h ago',
isSeen: false,
color: 'primary',
},
{
id: 3,
img: avatar5,
title: 'New message received 👋🏻',
subtitle: 'You have 10 unread messages',
time: '11 Aug',
isSeen: true,
},
{
id: 4,
icon: 'ri-bar-chart-line',
title: 'Monthly report generated',
subtitle: 'July month financial report is generated',
time: 'Apr 24, 10:30 AM',
isSeen: false,
color: 'info',
},
{
id: 5,
text: 'Meta Gadgets',
title: 'Application has been approved 🚀',
subtitle: 'Your Meta Gadgets project application has been approved.',
time: 'Feb 17, 12:17 PM',
isSeen: false,
color: 'success',
},
{
id: 6,
icon: 'ri-mail-line',
title: 'New message from Harry',
subtitle: 'You have new message from Harry',
time: 'Jan 6, 1:48 PM',
isSeen: true,
color: 'error',
},
])
const removeNotification = notificationId => {
notifications.value.forEach((item, index) => {
if (notificationId === item.id)
notifications.value.splice(index, 1)
})
}
const markRead = notificationId => {
notifications.value.forEach(item => {
notificationId.forEach(id => {
if (id === item.id)
item.isSeen = true
})
})
}
const markUnRead = notificationId => {
notifications.value.forEach(item => {
notificationId.forEach(id => {
if (id === item.id)
item.isSeen = false
})
})
}
const handleNotificationClick = notification => {
if (!notification.isSeen)
markRead([notification.id])
}
</script>
<template>
<Notifications
:notifications="notifications"
@remove="removeNotification"
@read="markRead"
@unread="markUnRead"
@click:notification="handleNotificationClick"
/>
</template>