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.
135 lines
4.5 KiB
135 lines
4.5 KiB
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">×</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="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 [] }
|
|
|
|
constructor() {
|
|
super()
|
|
|
|
this.messages = []
|
|
this.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 = [], inputs = [] }) => {
|
|
this.create_modal(title, message, buttons, inputs)
|
|
})
|
|
|
|
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 = [], inputs = []) {
|
|
const index = this.modals.length
|
|
const modal = {
|
|
title,
|
|
message,
|
|
buttons,
|
|
inputs,
|
|
data: {},
|
|
}
|
|
|
|
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, modal.data)
|
|
}
|
|
}
|
|
}
|