CoreID/app/assets/app/dash/message/MessageContainer.component.js

import { Component } from '../../../lib/vues6/vues6.js'
import { event_bus } from '../../service/EventBus.service.js'
import { message_service } from '../../service/Message.service.js'

const template = `
<span class="message-container">
    <span v-for="message of messages">
        <div class="alert alert-dismissible fade show" role="alert" v-bind:class="[message.type]">
            {{ message.message }}
            <button
                class="close"
                type="button"
                aria-label="Close"
                @click="dismiss_alert($event, message)"
            >
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </span>
    
    <span v-for="modal of modals">
        <div
            class="modal fade"
            tabindex="-1"
            role="dialog"
            aria-hidden="true" 
            ref="modal"
        >
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ modal.title }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        {{ modal.message }}
                    </div>
                    <div class="modal-footer" v-if="modal.buttons && modal.buttons.length > 0">
                        <button
                            type="button"
                            :class="button.class || ['btn', 'btn-secondary']"
                            v-for="button of modal.buttons"
                            :data-dismiss="button.type === 'close' ? 'modal' : ''"
                            @click="modal_button_click($event, modal, button)"
                        >{{ button.text }}</button>
                    </div>
                </div>
            </div>
        </div>
    </span>
</span>
`

export default class MessageContainerComponent extends Component {
    static get selector() { return 'coreid-message-container' }
    static get template() { return template }
    static get props() { return [] }

    messages = []
    modals = []

    vue_on_create() {
        this.alert_event = event_bus.event('message.alert')
        this.alert_event.subscribe(({ message, type = 'info', timeout = 0, on_dismiss = () => {} }) => {
            this.create_alert(message, type, timeout, on_dismiss)
        })

        this.modal_event = event_bus.event('message.modal')
        this.modal_event.subscribe(({ title, message, buttons = [] }) => {
            this.create_modal(title, message, buttons)
        })

        message_service.init_listener()
    }

    dismiss_alert($event, message) {
        this.messages = this.messages.filter(x => x !== message)
        message.on_dismiss($event)
    }

    create_alert(message, type, timeout, on_dismiss = () => {}) {
        const msg = {
            message,
            type: type.startsWith('alert-') ? type : `alert-${type}`,
            on_dismiss,
        }

        this.messages.push(msg)

        if ( timeout > 0 ) {
            setTimeout(() => {
                this.dismiss_alert(msg)
            }, timeout)
        }
    }

    create_modal(title, message, buttons = []) {
        const index = this.modals.length
        const modal = {
            title,
            message,
            buttons
        }

        this.modals.push(modal)
        this.$nextTick(() => {
            $(this.$refs.modal[index]).modal()
        })
    }

    modal_button_click($event, modal, button) {
        if ( typeof button.on_click === 'function' ) {
            button.on_click($event)
        }
    }
}