DigitalConsumer.FixMyGlass/src/App.vue
2022-01-14 12:43:17 -05:00

58 lines
1.4 KiB
Vue

<template>
<div class="container-fluid" style="max-width: 576px">
<div class="row">
<div class="col-sm-12">
<alert
v-if="displayGlobalAlert"
:alertClass="globalAlertMessage.type"
:alertHeadline="globalAlertMessage.messageCopy"
:alertCopy="globalAlertMessage.messageHeadline"
v-bind:isDismissible="globalAlertMessage.isDismissible"
/>
</div>
</div>
</div>
<router-view></router-view>
</template>
<script>
import alert from "@/ux-components/alert/alert";
import { emitter } from "@/helpers/event-bus/event-bus";
import { globalEvents } from "@/constants/events";
export default {
data: function () {
return {
globalAlertMessage: {
isDismissible: false,
messageCopy: "",
messageHeadline: "",
type: "",
},
displayGlobalAlert: false,
};
},
mounted() {
// Global alert message event
emitter.on(globalEvents.GLOBAL_ALERT, (alert) => {
this.globalAlertMessage = alert.globalAlertMessage;
this.displayGlobalAlert = true;
});
},
watch: {
$route(to, from) {
// If our route changes, remove the alert
if (
this.displayGlobalAlert &&
from.query.fmgPage !== undefined
) {
this.displayGlobalAlert = false;
}
},
},
components: {
alert,
},
};
</script>