Notification.vue

<template>
    <li class="dropdown notification-list topbar-dropdown">
        <a class="nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
            <i class="fe-bell noti-icon"></i>
            <span :class="labelNumberNotification" class="badge rounded-circle noti-icon-badge" v-cloak>{{ unreadNotifCount }}</span>
        </a>
        <div class="dropdown-menu dropdown-menu-right dropdown-lg">
            <template v-if="unreadNotifCount > 0">
                <!-- item-->
                <div class="dropdown-item noti-title">
                    <h5 class="m-0">
                        <span class="float-right">
                            <a href="javascript:void(0)" @click="marksAllAsRead()" class="text-dark">
                                <small>Limpar</small>
                            </a>
                        </span>Notificações
                    </h5>
                </div>

                <div class="noti-scroll" data-simplebar>
                    <a :class="[index === 0 ? 'active' : '']"
                       :href="notification.url" @click="markAsRead(notification.id)"
                       class="dropdown-item notify-item" v-for="(notification, index) in unreadNotifications">
                        <div class="notify-icon">
                            <img :alt="notification.senderName" :src="notification.imageSender" class="img-fluid rounded-circle" v-on:error="imgUrlAlt"/>
                        </div>
                        <p class="notify-details">{{ notification.senderName }}</p>
                        <p class="text-muted mb-0 user-msg">
                            <small>{{ notification.message }}</small>
                            <br>
                            <small class="text-muted"><i class="mdi mdi-clock"/>{{ notification.previewCreated }}</small>
                        </p>
                    </a>
                </div>

                <!-- All-->
                <a href="javascript:void(0);" @click="marksAllAsRead()" class="dropdown-item text-center text-primary notify-item notify-all">
                    Limpar todas
                    <i class="fe-check"></i>
                </a>

            </template>
            <template v-else>
                <div class="dropdown-item noti-title">
                    <h5 class="m-0">
                        Sem notificações no momento
                    </h5>
                </div>
            </template>
        </div>
    </li>
</template>

<script>
    export default {
        name: "Notification",
        data() {
            return {
                unreadNotifCount: 0,
                unreadNotifications: [],
                showModal: false,
                showPreviewNotification: [],
            }
        },
        mounted() {
            this.notifyCount();
        },
        methods: {
            markAsRead: function(value){
                // console.log(value)
                this.$axios.get(route('api.notification.markAsRead', value))
                    .then(() => {
                    this.unreadNotifCount = 0;
                    this.unreadNotifications = [];
                    this.notifyCount();
                    this.notifications();
                    this.showModal = true;
                    this.openDrop();
                })
                    .catch(error => {
                    console.error(error)
                });
            },
            notifyCount: function(){
                this.$axios.get(route('api.notification.countUnread')).then((response) => {
                    this.unreadNotifCount = response.data;

                    if (this.unreadNotifCount > 0) {
                        this.notifications();
                    }

                }).catch(error => {
                    console.error(error)
                });
            },
            notifications: function(){
                axios.get(route('api.notification.unread')).then(response => (
                    this.unreadNotifications = response.data
                )).catch(error => {
                    console.error(error)
                });
            },

            preview: function(id){
                this.$axios.get(route('api.notification.show', id)).then(response => {
                    this.showPreviewNotification = response.data;
                }).catch(error => {
                    console.log(error)
                });
            },
            marksAllAsRead(){
                this.$axios.post(route('api.notification.markAllRead')).then(() => {
                    this.unreadNotifCount = 0;
                    this.unreadNotifications = [];
                    // this.notifyCount();
                    // this.notifications();
                    this.showModal = true;
                    this.openDrop();
                }).catch(error => {
                    console.log(error)
                });
            },
            openDrop(){
                this.showModal = !this.showModal;

                if(this.showModal){
                    $('.messages-menu').addClass('open');
                } else {
                    $('.messages-menu').removeClass('open');
                }
            }
        },
        computed: {
            labelNumberNotification(){
                if(this.unreadNotifCount > 0){
                    return 'badge-danger'
                } else {
                    return 'badge-success'
                }
            }
        }
    }
</script>

<style scoped>
    .slimScrollDiv {
        max-height: 300px;
        overflow-y: scroll;
    }
</style>