disable sendButton, show Spinner and prevent closeModal while sending Message

This commit is contained in:
ma0068
2026-05-15 14:14:22 +02:00
parent cb7a0f7669
commit 0326a01585
2 changed files with 27 additions and 3 deletions
@@ -56,6 +56,7 @@ export default {
previewText: null,
previewBody: "",
replyData: null,
isSending: false
}
},
methods: {
@@ -113,6 +114,9 @@ export default {
data.append('data', JSON.stringify(this.formData));
data.append('ids', JSON.stringify(this.id));
//for disabling sendButton and show Spinner
this.isSending = true;
return this.$refs.formMessage
.call(ApiMessages.sendMessage(this.typeId, data))
.then(response => {
@@ -121,6 +125,7 @@ export default {
this.resetForm();
}).catch(this.$fhcAlert.handleSystemError)
.finally(() => {
this.isSending = false;
//just emit if no multitasking
if(this.id.length == 1){
@@ -288,6 +293,9 @@ export default {
dialog-class=" modal-dialog-scrollable modal-xl modal-msg"
header-class="flex-wrap pb-0"
body-class="px-3 py-2"
:backdrop="isSending ? 'static' : true"
:keyboard="!isSending"
:noCloseBtn="isSending"
@hidden.bs.modal="resetForm"
>
@@ -476,7 +484,12 @@ export default {
<button class="btn btn-secondary" @click="resetForm">{{$p.t('ui', 'reset')}}</button>
<button v-if="statusNew" type="button" class="btn btn-primary" @click="sendMessage()">{{$p.t('ui', 'nachrichtSenden')}}</button>
<button v-if="statusNew" type="button" class="btn btn-primary" :disabled="isSending" @click="sendMessage()">
<span
v-if="isSending"
class="spinner-border spinner-border-sm me-2"
></span>
{{$p.t('ui', 'nachrichtSenden')}}</button>
<button v-else type="button" class="btn btn-primary" @click="replyMessage(formData.message_id)">{{$p.t('global', 'reply')}}</button>
</div>
</template>
@@ -55,6 +55,7 @@ export default {
previewBody: "",
replyData: null,
messageSent: false,
isSending: false
}
},
methods: {
@@ -104,16 +105,21 @@ export default {
data.append('data', JSON.stringify(this.formData));
data.append('ids', JSON.stringify(this.id));
//for disabling sendButton and show Spinner
this.isSending = true;
return this.$api
.call(ApiMessages.sendMessage(this.typeId, data))
.then(response => {
if(this.openMode == "inSamePage")
if(this.openMode == "inSamePage") {
this.$fhcAlert.alertSuccess(this.$p.t('ui', 'successSent'));
}
this.hideTemplate();
this.resetForm();
this.messageSent = true;
}).catch(this.$fhcAlert.handleSystemError)
.finally(() => {
this.isSending = false;
if(this.openMode == "inSamePage" && this.id.length == 1 ){
this.$emit('reloadTable');
}
@@ -413,7 +419,12 @@ export default {
<button class="btn btn-secondary" @click="resetForm">{{$p.t('ui', 'reset')}}</button>
<button v-if="statusNew" type="button" class="btn btn-primary" @click="sendMessage()">{{$p.t('ui', 'nachrichtSenden')}}</button>
<button v-if="statusNew" type="button" class="btn btn-primary" :disabled="isSending" @click="sendMessage()">
<span
v-if="isSending"
class="spinner-border spinner-border-sm me-2"
></span>
{{$p.t('ui', 'nachrichtSenden')}}</button>
<button v-else type="button" class="btn btn-primary" @click="replyMessage(formData.message_id)">{{$p.t('global', 'reply')}}</button>
</div>