CSR-946 fix button state and disable loader for modal buttons.

This commit is contained in:
Bryan Mauger 2022-11-15 15:50:05 -05:00
parent f80ad8770a
commit 66e4184bca
2 changed files with 16 additions and 3 deletions

View file

@ -25,7 +25,7 @@
<buttonMain <buttonMain
class="w-100" class="w-100"
ref="buttonMain" ref="buttonMain"
isPrimary suppressLoader
:buttonText="ModalCloseButtonText" :buttonText="ModalCloseButtonText"
@click-event="buttonClick" @click-event="buttonClick"
data-bs-dismiss="modal" /> data-bs-dismiss="modal" />
@ -60,6 +60,12 @@ export default {
return this.getCmsContent(this.cmsWidgetName, "FooterText"); return this.getCmsContent(this.cmsWidgetName, "FooterText");
}, },
}, },
mounted() {
const modal = document.querySelector("#" + this.cmsWidgetName);
modal.addEventListener("hidden.bs.modal", (event) => {
this.$refs.buttonMain.resetButtonStyle();
});
},
components: { components: {
buttonMain, buttonMain,
}, },

View file

@ -1,7 +1,7 @@
<template> <template>
<button <button
:aria-disabled="isDisabled" :aria-disabled="isDisabled"
class="btn d-flex align-items-center py-3 px-4 delay" class="btn d-flex align-items-center justify-content-center py-3 px-4 delay"
:class="[ :class="[
isPrimary ? 'btn-primary' : 'btn-secondary', isPrimary ? 'btn-primary' : 'btn-secondary',
isFloat ? 'float-end' : '', isFloat ? 'float-end' : '',
@ -11,7 +11,7 @@
<span class="m-0">{{ this.buttonText }}</span> <span class="m-0">{{ this.buttonText }}</span>
<loader <loader
class="ms-2" class="ms-2"
v-if="isLoaderDisplayed" v-if="isLoaderDisplayed && !suppressLoader"
v-bind:class="[this.loaderColor, this.loaderPosition]" /> v-bind:class="[this.loaderColor, this.loaderPosition]" />
</button> </button>
</template> </template>
@ -28,6 +28,7 @@ export default {
loaderColor: String, loaderColor: String,
loaderPosition: String, loaderPosition: String,
isFloat: Boolean, isFloat: Boolean,
suppressLoader: Boolean,
}, },
data() { data() {
return { return {
@ -50,6 +51,12 @@ export default {
this.$emit("click-event"); this.$emit("click-event");
} }
}, },
resetButtonStyle() {
this.isLoaderDisplayed = false;
},
},
mounted() {
this.isLoaderDisplayed = false;
}, },
components: { components: {
loader, loader,