app/components/Layout/Header/Notification.vue

<template>
  <v-btn
      ref="btn"
      icon
      size="small"
      class="ml-2"
  >
    <v-badge
        color="warning"
        offset-x="-4"
        offset-y="17"
        :model-value="unreadNotification.length > 0"
        :content="unreadNotification.length">
      <v-icon class="on-primary">
        fa fa-bell
      </v-icon>
    </v-badge>
  </v-btn>

  <v-tooltip :activator="btn" location="bottom">
    <span>{{ $t('notification') }}</span>
  </v-tooltip>

  <v-menu
      :activator="btn"
      v-model="isOpen"
      location="bottom left"
  >
    <v-card max-width="400">
      <v-card-title class="bg-neutral text-body-2 font-weight-bold">
        {{ $t('notification') }}
      </v-card-title>

      <v-card-text class="ma-0 pa-0 header-menu">
        <v-list density="compact" :subheader="true" class="pa-0">
          <v-list-item
              v-for="(notification, index) in notifications"
              :key="index"
              :class="'list_item py-3' + `${notification.notificationUsers.length === 0 ? ' unread' : ''}`"
          >
            <span class="">{{ getMessage(notification) }}</span>

            <template #append>
              <v-icon
                  v-if="notification.link"
                  icon="mdi:mdi-download"
                  @click="download(notification.link)"
                  class="pt-4"
              />
            </template>

          </v-list-item>

          <v-divider></v-divider>

          <!--suppress VueUnrecognizedDirective -->
          <span v-intersect="onLastNotificationIntersect" />

          <v-row
              v-if="pending"
              class="fill-height mt-3 mb-3"
              align="center"
              justify="center"
          >
            <v-progress-circular
                indeterminate
                color="neutral"
            />
          </v-row>

        </v-list>

      </v-card-text>

      <v-card-actions class="ma-0 pa-0">
        <v-list-item
          :key="$t('all_notification')"
          :href="notificationUrl"
          router
          class="theme-primary"
          style="width: 100%; height: 52px;"
        >
          <v-list-item-title
              class="text-body-2"
              v-text="$t('all_notification')"
          />
        </v-list-item>
      </v-card-actions>
    </v-card>
  </v-menu>
</template>

<script setup lang="ts">
import {NOTIFICATION_TYPE} from "~/types/enum/enums";
import Notification from "~/models/Core/Notification";
import NotificationUsers from "~/models/Core/NotificationUsers";
import {useAccessProfileStore} from "~/stores/accessProfile";
import {computed, ComputedRef, Ref, ref} from "@vue/reactivity";
import {useEntityFetch} from "~/composables/data/useEntityFetch";
import {AnyJson, Pagination} from "~/types/data";
import {useEntityManager} from "~/composables/data/useEntityManager";
import UrlUtils from "~/services/utils/urlUtils";
import {useRepo} from "pinia-orm";
import NotificationRepository from "~/stores/repositories/NotificationRepository";

const accessProfileStore = useAccessProfileStore()

const loading: Ref<Boolean> = ref(true)
const isOpen: Ref<Boolean> = ref(false)
const page: Ref<number> = ref(1)

const i18n = useI18n()
const runtimeConfig = useRuntimeConfig()

const btn = ref(null)

const { em } = useEntityManager()
const { fetchCollection } = useEntityFetch()
const notificationRepo = useRepo(NotificationRepository)

const query: ComputedRef<AnyJson> = computed(() => {
  return { 'page': page.value }
})


let { data: collection, pending, refresh } = await fetchCollection(Notification, null, query)

/**
 * On récupère les Notifications via le store (sans ça, les mises à jour SSE ne seront pas prises en compte)
 */
const notifications: ComputedRef<Array<Notification>> = computed(() => {
  return notificationRepo.getNotifications()
})

/**
 * Retourne les notifications non lues
 */
const unreadNotification: ComputedRef<Array<Notification>> = computed(() => {
  return notificationRepo.getUnreadNotifications()
})

/**
 * Les metadata dépendront de la dernière valeur du GET lancé
 */
const pagination: ComputedRef<Pagination> = computed(() => {
  return collection.value !== null ? collection.value.pagination : {}
})

const notificationUrl = UrlUtils.join(runtimeConfig.baseUrlAdminLegacy, 'notifications/list/')

/**
 * L'utilisateur a fait défiler le menu jusqu'à la dernière notification affichée
 * @param isIntersecting
 */
const onLastNotificationIntersect = (isIntersecting: boolean) => {
  if (isIntersecting) {
    update()
  }
}

/**
 * Lorsque l'utilisateur scroll on regarde la nextPage à charger et on le fait que si le pending du fetch est false
 * (si on a fini de télécharger les éléments précédents)
 */
const update = async () => {
  if (
      !pending.value &&
      pagination.value &&
      pagination.value.next &&
      pagination.value.next > 0
  ) {
    pending.value = true
    page.value = pagination.value.next

    await refresh()

    // Si des notifications n'avaient pas été marquées comme lues, on le fait immédiatement.
    markNotificationsAsRead()
  }
}

/**
 * On construit le message qui va devoir s'afficher pour une notification
 * @param notification
 */
const getMessage = (notification: Notification) => {
  switch (notification.type){
    case NOTIFICATION_TYPE.FILE :
      return `${i18n.t('your_file')} ${notification.message?.fileName} ${i18n.t('is_ready_to_be_downloaded')}`

    case NOTIFICATION_TYPE.MESSAGE:
      if (notification.message?.action)
        return `${i18n.t('your_message')} ${notification.message?.fileName} ${i18n.t('is_ready_to_be')} ${notification.message.action}`

      return `${i18n.t('your_message')} ${notification.message?.about ?? ''} ${i18n.t('has_been_sent')} `

    case NOTIFICATION_TYPE.SYSTEM :
      if (notification.message?.about)
        return `${i18n.t(notification.message.about)}`
      break;

    default:
      return i18n.t(notification.name)
  }
}

/**
 * Dès la fermeture du menu, on indique que les notifications non lues, le sont.
 */
const unwatch = watch(isOpen, (newValue, oldValue) => {
  if (!newValue){
    markNotificationsAsRead()
  }
})
onUnmounted(() => {
  unwatch()
})

/**
 * Marque une notification comme lue
 */
const markNotificationAsRead = (notification: Notification) => {
  if (accessProfileStore.id === null) {
    throw new Error('Current access id is null')
  }
  const notificationUsers = em.newInstance(NotificationUsers, {
    access:`/api/accesses/${accessProfileStore.id}`,
    notification:`/api/notifications/${notification.id}`,
    isRead: true
  })

  em.persist(NotificationUsers, notificationUsers)
  notification.notificationUsers = ['read']
  em.save(Notification, notification)
}

/**
 * Marque toutes les notifications non lues comme lues
 */
const markNotificationsAsRead = () => {
  unreadNotification.value.map((notification: Notification) => {
    markNotificationAsRead(notification)
  })
}

/**
 * Download la cible du lien
 * @param link
 */
const download = (link: string) => {
  if (accessProfileStore.id === null) {
    throw new Error('Current access id is null')
  }
  const url_parts: Array<string> = link.split('/api');

  if(accessProfileStore.originalAccess)
    url_parts[0] = UrlUtils.join('api', String(accessProfileStore.originalAccess.id), String(accessProfileStore.id))
  else
    url_parts[0] = UrlUtils.join('api', String(accessProfileStore.id))

  window.open(UrlUtils.join(runtimeConfig.baseUrlLegacy, url_parts.join('')));
}


</script>

<style scoped lang="scss">
  .list_item{
    white-space: normal;
  }
  .unread{
    background: rgb(var(--v-theme-neutral-soft, white));
  }
</style>