Newer
Older
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
<template>
<el-dropdown class="notification">
<el-button type="primary">
<font-awesome-icon icon="fa-solid fa-envelope" />
Notification<el-icon class="el-icon--right"><arrow-down /></el-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item v-for="offer in offers" :key="offer.offerId">
<router-link
:to="
'/matched-result/' + offer.offerId + '/' + offer.wishlistItemId
"
>
You have a offer matched (click to check details)
</router-link>
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import { OfferNotification } from "@/models/OfferNotification";
import * as NotificationService from "@/services/NotificationService";
import { useRoute } from "vue-router";
const route = useRoute();
function getCookie(userId: string) {
const value = `; ${document.cookie}`;
const parts: string[] = value.split(`; ${userId}=`);
if (parts.length === 2) return parts?.pop()?.split(";").shift();
}
const offers = ref([] as OfferNotification[]);
async function fetchNotification(userId: number) {
const response = await NotificationService.getNotificationFromServerWithID(
userId
);
console.log(response);
offers.value = response.data;
}
watch(
() => route.name,
(values) => {
const userIdString: string = getCookie("userId");
let userIdNumber = +userIdString;
console.log(userIdNumber);
fetchNotification(userIdNumber);
},
{ immediate: true }
);
</script>
<style scoped>
.notification {
margin: auto;
justify-content: space-between;
}
.example-showcase .el-dropdown + .el-dropdown {
margin-left: 15px;
}
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>