app/components/Layout/Header/Notification.vue

<template>
  <v-btn
      ref="btn"
      icon
      width="48px"
      size="small"
  >
    <v-badge
        color="orange"
        offset-x="-4"
        offset-y="17"
        :model-value="unreadNotification.length > 0"
        :content="unreadNotification.length">
      <v-icon class="text-ot-white">
        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"
  >
    <v-card max-width="400">
      <v-card-title class="ot-header-menu 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">
          <v-list-item
              v-for="(notification, index) in notifications"
              :key="index"
              :class="`${notification.notificationUsers.length === 0 ? 'unread' : ''}`"
          >

            <v-list-item-title
                class="list_item mt-2 mb-2"
                v-text="getMessage(notification)"
                style="font-size: 13px; line-height: 16px;"
            />

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

<!--            <v-divider v-if="index < (notifications.length - 1)"/>-->
          </v-list-item>
        </v-list>

        <!--suppress VueUnrecognizedDirective -->
        <v-card v-intersect="update"></v-card>

        <v-row
          v-if="pending"
          class="fill-height mt-3 mb-3"
          align="center"
          justify="center"
        >
          <v-progress-circular
            indeterminate
            color="grey lighten-1"
          />
        </v-row>
      </v-card-text>

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

<script setup lang="ts">
import {NOTIFICATION_TYPE, QUERY_TYPE} from "~/types/enum/enums";
import {Notification} from "~/models/Core/Notification";
import {NotificationUsers} from "~/models/Core/NotificationUsers";
import {useAccessProfileStore} from "~/stores/accessProfile";
import {ComputedRef, Ref, ref} from "@vue/reactivity";
import {useEntityFetch} from "~/composables/data/useEntityFetch";
import {Pagination} from "~/types/data";
import {useEntityManager} from "~/composables/data/useEntityManager";
import Url from "~/services/utils/url";

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()

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

/**
 * On récupère les Notifications via le store
 */
const notifications: ComputedRef = computed(() => {
  const items = collection.value !== null ? collection.value.items : []
  items.sort((a, b) => b.id - a.id ) // reverse sort by id
  return items
})

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

/**
 * On calcule le nombre de notifications non lues
 */
const unreadNotification: ComputedRef<Array<Notification>> = computed(() => {
  return notifications.value.filter((notification: Notification) => {
    return notification.notificationUsers.length === 0
  })
})

/**
 * Lorsque l'utilisateur scroll on regarde la nextPage a 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 &&
      pagination.value &&
      pagination.value.next &&
      pagination.value.next > 0
  ) {
    loading.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 l'ouverture du menu, on indique que les notifications non lues, le sont.
 */
const unwatch = watch(isOpen, (newValue, oldValue) => {
  if (newValue){
    markNotificationsAsRead()
  }
})
onUnmounted(() => {
  unwatch()
})

/**
 * Créer une nouvelle notification users coté back.
 * @param notification
 * @param accessId
 */
const createNewNotificationUsers = (notification: Notification, accessId: number) => {
  const notificationUsers = em.newInstance(NotificationUsers, {
    access:`/api/accesses/${accessId}`,
    notification:`/api/notifications/${notification.id}`,
    isRead: true
  })

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

/**
 * Marque les notifications non lues comme lues
 */
const markNotificationsAsRead = () => {
  unreadNotification.value.map((notification: Notification) => {
    if (accessProfileStore.id === null) {
      throw new Error('Current access id is null')
    }
    createNewNotificationUsers(notification, accessProfileStore.id)
  })
}

/**
 * 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] = Url.join('api', String(accessProfileStore.originalAccess.id), String(accessProfileStore.id))
  else
    url_parts[0] = Url.join('api', String(accessProfileStore.id))

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

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

</script>

<style scoped lang="scss">
  #all_notifications{
    background: rgb(var(--v-theme-ot-green, white));
    color: white;
  }
  .list_item{
    white-space: normal;
  }
  .unread{
    background: #ecf0f5;
  }
</style>