diff options
author | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2021-02-09 23:41:53 +0300 |
---|---|---|
committer | Yoshie Muranaka <yoshiemuranaka@gmail.com> | 2021-02-16 20:31:36 +0300 |
commit | f92e29696d0f01c7fa1941829cb131a708f88393 (patch) | |
tree | 3347cb1a5c22cd1686744481fb2e2e15c61a560a /src/components/Mixins | |
parent | 6f71284973ee2f0b35fb22fa36a1afa883a0cc7a (diff) | |
download | webui-vue-f92e29696d0f01c7fa1941829cb131a708f88393.tar.xz |
Add enhancements to BVToastMixin
Adds ability to create toasts with multi-lined body content and
options to include a timestamp and application refresh action.
Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I30b1da04a0e0b5f29a419950462d1ca35e207552
Diffstat (limited to 'src/components/Mixins')
-rw-r--r-- | src/components/Mixins/BVToastMixin.js | 126 |
1 files changed, 91 insertions, 35 deletions
diff --git a/src/components/Mixins/BVToastMixin.js b/src/components/Mixins/BVToastMixin.js index 5e8ec006..a04ef438 100644 --- a/src/components/Mixins/BVToastMixin.js +++ b/src/components/Mixins/BVToastMixin.js @@ -1,57 +1,113 @@ -import i18n from '@/i18n'; import StatusIcon from '../Global/StatusIcon'; + const BVToastMixin = { components: { StatusIcon, }, methods: { - toastTitle(title, status) { - // Create title with icon + $_BVToastMixin_createTitle(title, status) { + const statusIcon = this.$createElement('StatusIcon', { + props: { status }, + }); const titleWithIcon = this.$createElement( 'strong', { class: 'toast-icon' }, - [ - this.$createElement('StatusIcon', { props: { status: status } }), - title, - ] + [statusIcon, title] ); return titleWithIcon; }, - successToast(message, title = i18n.t('global.status.success')) { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'success'), - variant: 'success', + $_BVToastMixin_createBody(messageBody) { + if (Array.isArray(messageBody)) { + return messageBody.map((message) => + this.$createElement('p', { class: 'mb-0' }, message) + ); + } else { + return [this.$createElement('p', { class: 'mb-0' }, messageBody)]; + } + }, + $_BVToastMixin_createTimestamp() { + const timestamp = this.$options.filters.formatTime(new Date()); + return this.$createElement('p', { class: 'mt-3 mb-0' }, timestamp); + }, + $_BVToastMixin_createRefreshAction() { + return this.$createElement( + 'BLink', + { + class: 'd-inline-block mt-3', + on: { + click: () => { + this.$root.$emit('refresh-application'); + }, + }, + }, + this.$t('global.action.refresh') + ); + }, + $_BVToastMixin_initToast(body, title, variant) { + this.$root.$bvToast.toast(body, { + title, + variant, autoHideDelay: 10000, //auto hide in milliseconds + noAutoHide: variant !== 'success', isStatus: true, solid: true, }); }, - errorToast(message, title = i18n.t('global.status.error')) { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'danger'), - variant: 'danger', - noAutoHide: true, - isStatus: true, - solid: true, - }); + successToast( + message, + { + title: t = this.$t('global.status.success'), + timestamp, + refreshAction, + } = {} + ) { + const body = this.$_BVToastMixin_createBody(message); + const title = this.$_BVToastMixin_createTitle(t, 'success'); + if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction()); + if (timestamp) body.push(this.$_BVToastMixin_createTimestamp()); + this.$_BVToastMixin_initToast(body, title, 'success'); }, - warningToast(message, title = i18n.t('global.status.warning')) { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'warning'), - variant: 'warning', - noAutoHide: true, - isStatus: true, - solid: true, - }); + errorToast( + message, + { + title: t = this.$t('global.status.error'), + timestamp, + refreshAction, + } = {} + ) { + const body = this.$_BVToastMixin_createBody(message); + const title = this.$_BVToastMixin_createTitle(t, 'danger'); + if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction()); + if (timestamp) body.push(this.$_BVToastMixin_createTimestamp()); + this.$_BVToastMixin_initToast(body, title, 'danger'); }, - infoToast(message, title = i18n.t('global.status.informational')) { - this.$root.$bvToast.toast(message, { - title: this.toastTitle(title, 'info'), - variant: 'info', - noAutoHide: true, - isStatus: true, - solid: true, - }); + warningToast( + message, + { + title: t = this.$t('global.status.warning'), + timestamp, + refreshAction, + } = {} + ) { + const body = this.$_BVToastMixin_createBody(message); + const title = this.$_BVToastMixin_createTitle(t, 'warning'); + if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction()); + if (timestamp) body.push(this.$_BVToastMixin_createTimestamp()); + this.$_BVToastMixin_initToast(body, title, 'warning'); + }, + infoToast( + message, + { + title: t = this.$t('global.status.informational'), + timestamp, + refreshAction, + } = {} + ) { + const body = this.$_BVToastMixin_createBody(message); + const title = this.$_BVToastMixin_createTitle(t, 'info'); + if (refreshAction) body.push(this.$_BVToastMixin_createRefreshAction()); + if (timestamp) body.push(this.$_BVToastMixin_createTimestamp()); + this.$_BVToastMixin_initToast(body, title, 'info'); }, }, }; |