From 531718abdac0d3ff679888c0f9f2bcb4222a14c1 Mon Sep 17 00:00:00 2001
From: Jens Christian Aanestad <jenscaa@stud.ntnu.no>
Date: Thu, 2 May 2024 14:46:16 +0200
Subject: [PATCH] refactor/Added notification integration in navbar
---
src/components/BaseComponents/NavBar.vue | 68 +++++++++++-------------
1 file changed, 30 insertions(+), 38 deletions(-)
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index a97684e..ea340cd 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -34,24 +34,18 @@
<a data-mdb-dropdown-init class=" nav-link dropdown-toggle hidden-arrow notification" href="#" id="navbarDropdownMenuLink"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="/src/assets/icons/bell-white.svg">
- <span v-if="counter > 0" class="badge rounded-pill badge-notification bg-danger">{{counter}}</span>
+ <span v-if="notificationListRef.length > 0" class="badge rounded-pill badge-notification bg-danger">{{ notificationListRef.length }}</span>
</a>
- <ul v-if="counter > 0" class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
- <li v-for="(array,key) in notifMap" :key="key" >
- <div class="d-flex align-items-center">
- <div v-if="array[1][0] === '1'" class="flex-shrink-0">
- <img src="/src/assets/icons/medal.png" alt="Varslingsikon" class="notification-icon">
- </div>
- <div v-if="array[1][0] === '2'" class="flex-shrink-0">
- <img src="/src/assets/userprofile.png" alt="Varslingsikon" class="notification-icon">
- </div>
- <div v-if="array[1][0] === '3'" class="flex-shrink-0">
- <img src="/src/assets/icons/piggybank.svg" alt="Varslingsikon" class="notification-icon">
+ <ul v-if="notificationListRef.length > 0" class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+ <li v-for="(item, index) in notificationListRef" :key="index" >
+ <router-link :to="notificationPathMapper(item.notificationType)" class="d-flex align-items-center">
+ <div class="flex-shrink-0">
+ <img :src="notificationImageMapper(item.notificationType)" alt="Varslingsikon" class="notification-icon">
</div>
<div class="flex-grow-1 ms-3">
- <router-link class="not-item dropdown-item" :to="getPath(array[1][0])">{{array[1][1]}}</router-link>
+ <div class="not-item dropdown-item">{{item.message}}</div>
</div>
- </div>
+ </router-link>
</li>
</ul>
<ul v-else class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
@@ -101,6 +95,8 @@
import { useRouter } from "vue-router";
import { useUserInfoStore } from '@/stores/UserStore';
import {onMounted, ref} from "vue";
+import { type NotificationDTO, NotificationService } from '@/api'
+import { afterWrite } from '@popperjs/core'
@@ -118,35 +114,31 @@ if (useUserInfoStore().profileImage !== 0) {
//Hashmap that contains the path to the Badges, The Friend, The dashboard etc.
//The key value pair is the message of the notification and the path of the route
-let notifMap = ref (new Map<number, any[]>);
-
-let notifId = ref(0);
-
-let path = ref('#');
-
-let counter = ref(0)
+/*
-
-/* id: 0 -> /roadmap
- id: 1 -> /profile
- id: 2 -> /friend
*/
+let path = ref('#');
+let notificationListRef = ref<NotificationDTO[]>([]);
-function getNotification(){
- //axios call
- let response: any = ref( ['1', 'You have recived a award for getting 200 points'])
- let response2: any = ref( ['2', 'You have recived a friend request from Jens Aanestad'])
- let response3: any = ref( ['3', 'You have lost your streak. Come back to try again'])
- notifMap.value.set(notifId.value,response.value)
- notifId.value++
- notifMap.value.set(notifId.value,response2.value)
- notifId.value++
- notifMap.value.set(notifId.value,response3.value)
- notifId.value++
+const notificationImageMapper: any = {
+ "FRIEND_REQUEST": "/src/assets/userprofile.png",
+ "BADGE": "/src/assets/icons/medal.png",
+ "COMPLETED_GOAL": "/src/assets/icons/piggybank.svg"
+}
- counter.value = notifMap.value.size
+const notificationPathMapper: any = {
+ "FRIEND_REQUEST": "/profile",
+ "BADGE": "/friends",
+ "COMPLETED_GOAL": "/roadmap"
+}
+const getNotifications = async () => {
+ try {
+ notificationListRef.value = await NotificationService.getUnreadNotificationByUser()
+ } catch (error) {
+ notificationListRef.value = []
+ }
}
function toBadges(){
@@ -220,7 +212,7 @@ function toLogout() {
router.push('login')
}
onMounted(() => {
- getNotification()
+ getNotifications()
})
</script>
--
GitLab