nuxt-frontend/components/RightMenu/Notifications.vue

<template>
  <div>
    <div class="mx-10 my-4">
      <div class="d-flex">
        <chip-user-logged v-if="$auth.loggedIn" displayName />
        <v-spacer />
        <v-btn
          fab
          text
          @click="$store.commit('navigation/SWITCH_RIGHT_DRAWER', false)"
        >
          <v-icon x-small>icon-close</v-icon>
        </v-btn>
      </div>
      <v-divider class="lines" />

      <h3 v-if="hasNotifications" class="my-6">
        {{ $t('rightMenu.notes') }}
        <span class="font-weight-light">({{ notifications.length }})</span>
      </h3>
    </div>

    <v-list two-line v-if="hasNotifications">
      <v-list-item-group v-model="selected" multiple active-class="secondary">
        <template v-for="(notification, index) in notifications">
          <v-divider
            v-if="!index && hasNotifications"
            :key="index + notification.title"
            class="lines"
          />
          <v-list-item
            :key="`user-notification-${notification.id}`"
            @click="markAsRead(notification.id)"
          >
            <template v-slot:default="{ active, toggle }">
              <v-list-item-avatar>
                <!-- <v-icon x-small v-if="active" color="accent">mdi-circle</v-icon>
                <v-icon x-small v-else>mdi-circle-outline</v-icon> -->
                <v-icon x-small v-if="!notification.read_at" color="accent"
                  >mdi-circle</v-icon
                >
                <v-icon x-small v-else>mdi-circle-outline</v-icon>
              </v-list-item-avatar>

              <v-list-item-content class="font-weight-bold">
                <v-list-item-subtitle
                  v-text="notification.data.subject"
                ></v-list-item-subtitle>
                <v-list-item-subtitle
                  class="terziary--text"
                  v-text="notification.data.message"
                ></v-list-item-subtitle>
              </v-list-item-content>

              <v-list-item-action>
                <v-list-item-action-text>{{
                  formatDate(notification.created_at)
                }}</v-list-item-action-text>
              </v-list-item-action>
            </template>
          </v-list-item>

          <v-divider
            v-if="index + 1 < notifications.length"
            :key="index"
            class="lines"
          />
        </template>
      </v-list-item-group>
    </v-list>
    <v-card v-else flat>
      <v-card-text> No notifications </v-card-text>
    </v-card>

    <!-- <v-container class="text-center d-flex flex-column">
      <v-btn
        color="success"
        @click="testNotification"
        class="my-2"
        v-if="$store.getters.isAdmin || $store.getters.isOperator"
        >Test Notification</v-btn
      >
      <v-btn
        color="red"
        @click="testMailNotifications"
        class="my-2"
        v-if="$store.getters.isAdmin || $store.getters.isOperator"
        >Test Email Notifications
      </v-btn>
    </v-container> -->
  </div>
</template>

<script>
import dayjs from 'dayjs'
import PageHeader from '~/components/UI/PageHeader/PageHeader'
import chipUserLogged from '~/components/UI/ChipUserLogged/ChipUserLogged'

export default {
  components: {
    PageHeader,
    chipUserLogged,
  },
  data() {
    return {
      selected: [2],
    }
  },
  computed: {
    notifications() {
      return this.$store.getters.notifications
    },
    hasNotifications() {
      return this.$store.getters.hasNotifications
    },
  },
  methods: {
    formatDate(date) {
      return dayjs(date).format('D MMM').toLowerCase()
    },
    async markAsRead(notificationId) {
      if (!this.$store.getters.isReadNotification(notificationId)) return

      try {
        const response = await this.$axios.post('notifications/mark-as-read', {
          id: notificationId,
        })
        await this.$auth.setUser(response.data)
      } catch (error) {
        console.log('markAsRead -> error', error)
      }
    },
    async delete(notificationId) {
      if (!this.$store.getters.isReadNotification(notificationId)) return

      try {
        const response = await this.$axios.post('notifications/delete', {
          id: notificationId,
        })
        await this.$auth.setUser(response.data)
      } catch (error) {
        console.log('markAsRead -> error', error)
      }
    },

    async testNotification() {
      if (!this.$auth.loggedIn) return
      try {
        await this.$axios.post('notifications/test')
      } catch (error) {
        console.log('testNotification -> error', error)
      }
    },

    async testMailNotifications() {
      if (!this.$auth.loggedIn) return
      try {
        await this.$axios.get('notifications/test-mail-notifications')
      } catch (error) {
        console.log('testNotification -> error', error)
      }
    },
  },
}
</script>