mhankins
2 years ago
45
3
Vue

Modal Subcomponent in List

Posted 2 years ago by mhankins

Today I'm working on my notification component in Vue. Everything is working just fine, but I want a popup Modal (subcomponent) with some other details that I store for each notification.

The details are always from the first notification in the list.

<template>
    <div class="navbar-item notifications dropdown is-right is-hoverable">
        <a href="javascript:;" class="dropdown-trigger has-text-centered" aria-haspopup="true"
           aria-controls="notification-menu">
            <span class="icon has-text-centered">
            <i class="fa fa-bell-o">
                <span v-if="count > 0" class="badge is-badge-danger is-badge-medium" :data-badge="count"
                      id="notificationcount"></span>
            </i>
            </span>
        </a>
        <div class="dropdown-menu notify-drop" v-if="messages.length > 0" id="notification-menu" role="menu">
            <div class="notify-drop-title">Notifications</div>
            <ul class="drop-content">
                <li v-for="message in messages">
                    <a>
                    <span v-bind:class="isType(message)">
                        <i class="fa fa-check-circle"></i>
                    </span>
                        {{ message.notification.title }}
                    </a>
                    <a @click="showModal = true">
                    <span class="icon menu">
                        <i class="fa fa-ellipsis-h">
                        </i>
                    </span>
                    </a>
                    <modal v-show="showModal" @close="showModal = false" :details="message.notification.details"></modal>
                </li>
            </ul>
            <div class="notify-drop-footer">
                <a @click="clearAll">Clear All</a>
                <a @click="markAllRead">Mark All as Read</a>
            </div>
        </div>
    </div>
</template>

<script>
    import modal from './modal.vue'

    export default {
        components: {
            'modal': modal,
        },

        props: {
            'notificationCount': {
                type: Number,
                required: true,
                default: 0,
            },

            'notifications': {
                type: Array,
                required: true,
                default: [],
            }
        },

        data() {
            return {
                count: this.notificationCount,
                messages: this.notifications,
                showModal: false,
            }
        },

        methods: {
            isType: function (message) {
                if (message.notification.type == 'success') {
                    return 'icon has-text-success';
                }

                return 'icon has-text-danger';

            },

            markAllRead: function () {
                axios.get('/user/notifications/markallread').then(
                    this.count = 0,
                )
            },

            clearAll: function () {
                axios.get('/user/notifications/destroyall').then(
                    response => this.messages = response.data,
                    this.count = 0,
                )
            }
        },

        mounted() {
            Echo.private("Eradmin.User.User." + userId)
                .listen(".Illuminate\\Notifications\\Events\\BroadcastNotificationCreated", (data) => {
                    this.count = data.notification.count;
                    this.messages.unshift({notification: data.notification});
                });
        }
    }
</script>
<template>
    <div class="modal is-active">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <span class="modal-card-title">Details</span>
            </header>
            <section class="modal-card-body">
                <pre>
                    <code>
                        {{ details }}
                    </code>
                </pre>
            </section>
            <footer class="modal-card-foot">
            </footer>
        </div>
        <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
    </div>
</template>

<script>
    export default {
        props: ['details'],
    }
</script>

Please sign in or create an account to participate in this conversation.