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

2 files changed, 94 insertions, 39 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 5b36cf85..7e1a1006 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -172,10 +172,9 @@ export default {
   watch: {
     isAuthorized(value) {
       if (value === false) {
-        this.errorToast(
-          this.$t('global.toast.unAuthDescription'),
-          this.$t('global.toast.unAuthTitle')
-        );
+        this.errorToast(this.$t('global.toast.unAuthDescription'), {
+          title: this.$t('global.toast.unAuthTitle'),
+        });
       }
     },
   },
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');
     },
   },
 };