Notification.vue

<template>
  <el-dropdown class="notification">
    <el-row>
      <el-button type="info" :icon="Message" circle>
        <div class="text-length">{{ length1 + length2 }}</div>
        <!--        notification-->
        <!--      <font-awesome-icon icon="fa-solid fa-envelope" />-->
        <!--      Notification<el-icon class="el-icon--right"><arrow-down /></el-icon>-->
      </el-button>
    </el-row>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="offer in offers" :key="offer.offerId">
          <a>
            <router-link
              :to="
                '/matched-result/' + offer.offerId + '/' + offer.wishlistItemId
              "
              style="color: blue"
            >
              <div class="offer-match">
                <div class="offer-text"></div>
                <font-awesome-icon icon="fa-solid fa-circle-info" />
                Offer Matched
              </div>
            </router-link>
          </a>
        </el-dropdown-item>
        <el-dropdown-item
          type="primary"
          v-for="offer in offers2"
          :key="offer.offerId"
        >
          <a
            ><router-link
              :to="
                '/matched-result/' + offer.offerId + '/' + offer.wishlistItemId
              "
              style="color: blue"
            >
              <div class="offer-match">
                <font-awesome-icon icon="fa-solid fa-circle-info" />
                WishList Matched
              </div>
            </router-link>
          </a>
        </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";
import { onMounted } from "vue";
import { Message } from "@element-plus/icons-vue";

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[]);
const offers2 = ref([] as OfferNotification[]);

const length1 = ref(-1);
const length2 = ref(-1);
async function fetchNotification(userId: number) {
  const response = await NotificationService.getNotificationFromServerWithID(
    userId
  );
  // const response2 =
  //   await NotificationService.getNotificationwishFromServerWithID(userId);
  // console.log(response2);
  offers.value = response.data;
  length1.value = response.data.length;
  // offers2.value = response2.data;
}

async function fetchNotificationwish(userId: number) {
  const response2 =
    await NotificationService.getNotificationwishFromServerWithID(userId);
  offers2.value = response2.data;
  length2.value = response2.data.length;
}

watch(
  () => route.name,
  (values) => {
    const userIdString: string = getCookie("userId");
    let userIdNumber = +userIdString;
    fetchNotification(userIdNumber);
    fetchNotificationwish(userIdNumber);
  },
  { immediate: true }
);
</script>

<style scoped>
.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;
}

.offer-match {
  display: flex;
  margin-right: 2px;
}

.offer-text {
  font-size: 25px;
  font-family: "Apple Symbols";
  color: #1e5be6;
  margin-left: 2px;
}

.text-length {
  font-size: 20px;
  color: white;
  height: 20px;
  width: 20px;
  background-color: #cc0000;
  border-radius: 50%;
  display: inline-block;
}

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}
</style>