90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
<template>
|
|
<!-- <v-scale-transition> -->
|
|
<v-snackbar
|
|
data-cy="gznotify"
|
|
:value="isVisible"
|
|
:color="currentNotification.type"
|
|
multi-line
|
|
>
|
|
<v-alert :type="currentNotification.type" mode="out-in">
|
|
{{ currentNotification.message }}
|
|
</v-alert>
|
|
|
|
<v-btn
|
|
data-cy="gznotify:morebutton"
|
|
text
|
|
v-if="currentNotification.helpUrl"
|
|
@click="helpClick()"
|
|
>
|
|
{{ this.$root.$gz.translation.get("More") }}
|
|
</v-btn>
|
|
</v-snackbar>
|
|
<!-- </v-scale-transition> -->
|
|
</template>
|
|
|
|
<script>
|
|
/* XXXeslint-disable */
|
|
const DEFAULT_NOTIFY_OPTIONS = { type: "info", timeout: 3000 };
|
|
|
|
export default {
|
|
data: () => ({
|
|
isVisible: false,
|
|
processing: false,
|
|
notificationQueue: [],
|
|
currentNotification: {
|
|
type: "info", //one of success, info, warning, and error, see v-alert docs for more info
|
|
timeout: 3000,
|
|
message: null,
|
|
helpUrl: null
|
|
}
|
|
}),
|
|
methods: {
|
|
addNotification(options) {
|
|
if (!options.message) {
|
|
return;
|
|
}
|
|
|
|
if (!options.type) {
|
|
options.type = DEFAULT_NOTIFY_OPTIONS.type;
|
|
}
|
|
if (!options.timeout) {
|
|
options.timeout = DEFAULT_NOTIFY_OPTIONS.timeout;
|
|
}
|
|
//add it to the queue
|
|
this.notificationQueue.push(options);
|
|
|
|
//trigger the notification queue handler if it isn't already in action
|
|
if (!this.processing) {
|
|
this.handleNotifications();
|
|
}
|
|
},
|
|
handleNotifications() {
|
|
this.processing = true;
|
|
//Process the queue
|
|
if (this.notificationQueue.length > 0) {
|
|
//Move the next item into the current slot
|
|
this.currentNotification = this.notificationQueue.shift();
|
|
|
|
//If don't use nextTick then don't get all visible when multiple in sequence
|
|
this.$nextTick(() => {
|
|
this.isVisible = true;
|
|
});
|
|
|
|
//Show it for the designated time before moving on to the next
|
|
setTimeout(() => {
|
|
this.isVisible = false;
|
|
//recurse
|
|
this.handleNotifications();
|
|
}, this.currentNotification.timeout);
|
|
} else {
|
|
this.processing = false;
|
|
return;
|
|
}
|
|
},
|
|
helpClick() {
|
|
window.open(this.currentNotification.helpUrl, "_blank");
|
|
}
|
|
}
|
|
};
|
|
</script>
|