admin-erahn/resources/js/components/util/Notify.vue

<template>
<div class="container">
    <div id="notification" ref="notification" class="notification cursor-pointer" v-on:click="toggleDropdown()"></div>
        <div v-if="this.showloader === true" ref="popoverDropdownRef" v-bind:class="{'hidden': !dropdownShow, 'block': dropdownShow}" class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
            <div class="py-1 px-2" role="none">
                <template v-if="showkelulusan.data.length > 0">
                <!-- <template v-if="showkelulusan.data.length > 0"> -->
                    <div v-for="(kelulusan,index) in showkelulusan.data" :key="index" class="text-gray-700 block px-2 py-5 text-sm hover:bg-yellow-500 cursor-pointer">
                        <div class="justify-between flex">
                            <div class="w-4/6">
                                <p class="font-bold -mt-4">Ar-Rahn {{ kelulusan.cawangan }}</p>
                                <p class="font-bold text-sm text-red-500">{{ kelulusan.status }}</p>
                                <!-- <p class="-mb-4 text-sm">4 hours ago</p> -->
                            </div>
                            <div class="w-3/6">
                                <p class="font-bold -mt-4 justify-end flex">{{ kelulusan.norujukan }}</p>
                            </div>
                        </div>
                    </div>
                <hr>
                </template>
                
                <!-- <a class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500 cursor-pointer" role="menuitem" tabindex="-1" id="menu-item-0">a<br><b>a</b></a> -->
                <!-- <template v-else> -->
                    <template v-else>
                    <div class="flex place-content-center w-full">
                        <div class="grid mx-auto mb-4">
                            <img src="/img/notify.jpg" class="h-20 w-20 mx-auto" alt="Windster Logo">
                            <i class="text-center text-sm">Anda tidak mempunyai <br>sebarang pemberitahuan masa sekarang..</i>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    <!-- <button @click="Clicked">Increment Notifications</button> -->
</div>
</template>
<style scoped>
/* Page Styles */


button {
    display: block;
    padding: 1em 2em;
    outline: none;
    font-weight: 600;
    border: none;
    color: #fff;
    background-color: #3498db;
    border: 1px solid #1f74ac;
    border-radius: 0.3em;
    margin-top: 4em;
    cursor: pointer;
}

button:hover {
    background-color: #2487c9;
}
/* Notifications */
.notification {
    display: inline-block;
    position: relative;
    padding: 0.6em;
    /* background: #3498db; */
    border-radius: 25px;
    /* color: #3498db; */
    border-radius: 1em;
    font-size: 1.3em;
    /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
}

.notification::before, 
.notification::after {
    color: #3498db;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.notification::before {
    display: block;
    content: "\f0f3";
    font-family: "FontAwesome";
    transform-origin: top center;
}

.notification::after {
    font-family: Arial;
    font-size: 0.6em;
    font-weight: 700;
    position: absolute;
    top: -8px;
    right: -13px;
    padding: 5px 8px;
    line-height: 100%;
    border: 2px #fff solid;
    border-radius: 60px;
    background: #3498db;
    color:#fff;
    opacity: 0;
    content: attr(data-count);
    opacity: 0;
    transform: scale(0.5);
    transition: transform, opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
}

.notification.notify::before {
    animation: ring 1.5s ease;
}

.notification.show-count::after {
    transform: scale(1);
    opacity: 1;
}

@keyframes ring {
    0% {
        transform: rotate(35deg);
    }
    12.5% {
        transform: rotate(-30deg);
    }
    25% {
        transform: rotate(25deg);
    }
    37.5% {
        transform: rotate(-20deg);
    }
    50% {
        transform: rotate(15deg);
    }
    62.5% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
</style>
<script>
import { createPopper } from "@popperjs/core";

export default {
    data(){
        return {
        dropdownShow: false,
        currentPage: 1,
        showkelulusan:[],
        paginate:{},
        showloader:false
        }
    },
    created() {
    this.getKelulusanList(this.currentPage)
	},
    mounted(){
    document.addEventListener('click', this.onClick);

        var el = this.$refs.notification;

        if (Number(localStorage.getItem("data-count")) > 0){
            var count = Number(localStorage.getItem("data-count")) || 0;
            // console.log(localStorage.getItem("books"))
            el.setAttribute('data-count', count);
            el.classList.add('show-count');
        }else{
            el.classList.remove('show-count');
        }

        var channel = this.$pusher.subscribe('operasi-notify');

        channel.bind('operasi-event', ({ cawangan,khazanah }) => {
            var el = this.$refs.notification;
            var count = Number(localStorage.getItem("data-count")) || 0;
            localStorage.setItem('data-count',count + 1);
            el.setAttribute('data-count', count+1);
            el.classList.remove('notify');
            (function(){  
            return el.offsetWidth;
            })();
            el.classList.add('notify');
            // if(count > 0){
            el.classList.add('show-count');
            // }
        });
    },
    beforeDestroy() {
    document.removeEventListener('click', this.onClick);
    },
    methods:{
        async toggleDropdown() {
            this.dropdownShow = true;
            createPopper(this.$refs.notification, this.$refs.popoverDropdownRef, {
                placement: "bottom-end",
                modifiers: [{
                name: "preventOverflow",
                }]
            }); 
        },
        Clicked:function(data){
            var el = this.$refs.notification;
            var count = Number(localStorage.getItem("data-count")) || 0;
                localStorage.setItem('data-count',count + 1);
                el.setAttribute('data-count', count+1);
                el.classList.remove('notify');
                (function(){  
                return el.offsetWidth;
                })();
                el.classList.add('notify');
                // if(count > 0){
                    el.classList.add('show-count');
                // }
        },
        DropdownShow:function(){
        },
        onClick: function(){
            var el = this.$refs.notification;
         
            let isClickInside = this.$refs.popoverDropdownRef.contains(event.target);
            let searchInside = this.$refs.notification.contains(event.target);
            let buttonSearch = document.getElementById('notification');

                if (isClickInside || searchInside || buttonSearch.contains(event.target)) {
                    localStorage.setItem('data-count',0);
                    el.setAttribute('data-count', 0);
                    el.classList.remove('show-count');
                    this.dropdownShow = true
                }
                else{
                    this.dropdownShow = false
                }

        },
         getKelulusanList(pageNumber){
            this.axios.get(this.$hostname + '/admin/ListOperasi/Paginate',{
                params: {
                page: pageNumber
            }
            }).then(response => {
                this.showkelulusan = response.data
                this.paginate = response.data
                this.currentPage = pageNumber
                this.showloader = true
            });
        },
    }
}
</script>