116 lines
3.1 KiB
Vue
116 lines
3.1 KiB
Vue
<template>
|
|
<div class="text-center">
|
|
<v-dialog
|
|
persistent
|
|
v-model="isVisible"
|
|
:max-width="maxWidth"
|
|
:width="width"
|
|
@keydown.esc="cancel"
|
|
data-cy="gzconfirm"
|
|
>
|
|
<v-card elevation="24">
|
|
<v-card-title class="text-h6 text-sm-h5 grey lighten-4">
|
|
<template v-if="options.type == 'success'">
|
|
<v-icon large color="success">$ayiCheckCircle</v-icon>
|
|
</template>
|
|
<template v-if="options.type == 'info'">
|
|
<v-icon large color="info">$ayiInfoCircle</v-icon>
|
|
</template>
|
|
<template v-if="options.type == 'warning'">
|
|
<v-icon large color="warning">$ayiExclamationCircle</v-icon>
|
|
</template>
|
|
<template v-if="options.type == 'error'">
|
|
<v-icon large color="error">$ayiExclamationTriangle</v-icon>
|
|
</template>
|
|
<span v-if="options.title" class="ml-5"> {{ options.title }} </span>
|
|
</v-card-title>
|
|
|
|
<v-card-text
|
|
class="text-body-1 text-sm-h6 my-5"
|
|
v-html="options.message"
|
|
>
|
|
</v-card-text>
|
|
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn
|
|
data-cy="gzconfirm:morebutton"
|
|
text
|
|
v-if="options.helpUrl"
|
|
@click="helpClick()"
|
|
>
|
|
{{ this.$root.$gz.translation.get("More") }}
|
|
</v-btn>
|
|
<v-btn
|
|
v-if="options.noButtonText"
|
|
color="primary"
|
|
text
|
|
@click.native="cancel"
|
|
data-cy="gzconfirm:nobutton"
|
|
>{{ options.noButtonText }}</v-btn
|
|
>
|
|
<v-btn
|
|
color="primary"
|
|
text
|
|
@click.native="agree"
|
|
data-cy="gzconfirm:yesbutton"
|
|
>{{ options.yesButtonText }}</v-btn
|
|
>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data: () => ({
|
|
width: 290,
|
|
maxWidth: 290,
|
|
isVisible: false,
|
|
resolve: null,
|
|
reject: null,
|
|
options: {
|
|
title: null,
|
|
message: null,
|
|
yesButtonText: null,
|
|
noButtonText: null,
|
|
type: "info" //one of success, info, warning, and error, see v-alert docs for more info
|
|
}
|
|
}),
|
|
methods: {
|
|
open(options) {
|
|
if (options.message.includes("\n")) {
|
|
options.message = options.message.replace(/\n/g, "<br />");
|
|
}
|
|
this.options = Object.assign(this.options, options);
|
|
this.maxWidth = Math.floor(window.innerWidth * 0.9);
|
|
let calculatedWidth = Math.floor(window.innerWidth * 0.5);
|
|
if (calculatedWidth < 290) {
|
|
this.width = 290;
|
|
} else if (calculatedWidth > 800) {
|
|
this.width = 800;
|
|
} else {
|
|
this.width = calculatedWidth;
|
|
}
|
|
|
|
this.isVisible = true;
|
|
return new Promise((resolve, reject) => {
|
|
this.resolve = resolve;
|
|
this.reject = reject;
|
|
});
|
|
},
|
|
agree() {
|
|
this.resolve(true);
|
|
this.isVisible = false;
|
|
},
|
|
cancel() {
|
|
this.resolve(false);
|
|
this.isVisible = false;
|
|
},
|
|
helpClick() {
|
|
window.open(this.options.helpUrl, "_blank");
|
|
}
|
|
}
|
|
};
|
|
</script>
|