You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
132 lines
4.3 KiB
132 lines
4.3 KiB
import {Component} from '../../vues6.js'
|
|
import {EventBus} from '../service/EventBus.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="dismissAlert($event, message)"
|
|
>
|
|
<span aria-hidden="true">×</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 modal-dialog-centered" 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">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<span v-html="modal.message"></span>
|
|
<div v-if="Array.isArray(modal.inputs)" class="mt-4 mb-3">
|
|
<span v-for="input of modal.inputs">
|
|
<input
|
|
type="input.type"
|
|
v-model="modal.data[input.name]"
|
|
:placeholder="input.placeholder"
|
|
class="form-control"
|
|
>
|
|
</span>
|
|
</div>
|
|
</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="modalButtonClick($event, modal, button)"
|
|
>{{ button.text }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</span>
|
|
</span>
|
|
`
|
|
export class MessageContainerComponent extends Component {
|
|
static get selector() { return 'cobalt-messages' }
|
|
static get template() { return template }
|
|
static get props() { return [] }
|
|
|
|
constructor() {
|
|
super()
|
|
this.messages = []
|
|
this.modals = []
|
|
}
|
|
|
|
vue_on_create() {
|
|
EventBus.get()
|
|
.event('message.alert')
|
|
.subscribe(({ message, type = 'info', timeout = 0, onDismiss = () => {} }) => {
|
|
this.createAlert(message, type, timeout, onDismiss)
|
|
})
|
|
|
|
EventBus.get()
|
|
.event('message.modal')
|
|
.subscribe(({ title, message, buttons = [], inputs = [] }) => {
|
|
this.createModal(title, message, buttons, inputs)
|
|
})
|
|
}
|
|
|
|
createAlert(message, type, timeout, onDismiss = () => {}) {
|
|
const msg = {
|
|
message,
|
|
onDismiss,
|
|
type: type.startsWith('alert-') ? 'type' : `alert-${type}`,
|
|
}
|
|
|
|
this.messages.push(msg)
|
|
|
|
if ( timeout > 0 ) {
|
|
setTimeout(() => {
|
|
this.dismissAlert(undefined, msg)
|
|
}, timeout)
|
|
}
|
|
}
|
|
|
|
dismissAlert($event, message) {
|
|
this.messages = this.messages.filter(x => x !== message)
|
|
message.onDismiss($event)
|
|
}
|
|
|
|
createModal(title, message, buttons = [], inputs = []) {
|
|
const index = this.modals.length
|
|
const modal = {
|
|
title,
|
|
message,
|
|
buttons,
|
|
inputs,
|
|
data: {},
|
|
}
|
|
|
|
this.modals.push(modal)
|
|
this.$nextTick(() => {
|
|
$(this.$refs.modal[index]).modal()
|
|
})
|
|
}
|
|
|
|
modalButtonClick($event, modal, button) {
|
|
if ( typeof button.onClick === 'function' ) {
|
|
button.onClick($event, modal.data)
|
|
}
|
|
}
|
|
}
|