Sometimes user click the save button multiple times and it queues and submit a lot of request and multiple data are created.
How do we prevent it on the front-end that even user click the button multiple times only one request is submitted , anyone knows a clean implementation ? what are the techniques ?
Thanks.
#html code
<ng-template #editButtons>
<div class="flex" *ngIf="isEditing">
<app-page-section-cards-btn
[btnData]="pageSectionsOptions.btnData.cancel"
(btnClickEvent)="cancelEdit()"></app-page-section-cards-btn>
<app-page-section-cards-btn
[btnData]="pageSectionsOptions.btnData.save"
(btnClickEvent)="saveDeal()">
</app-page-section-cards-btn>
</div>
</ng-template>
saveDeal(){
const payload = {
"id": 0,
"name": this.dealDispositionFormFields.dealName,
"dealType": "Idle Buyout",
"annualRentProposed": null,
"annualRentCurrent": null,
"firmTermRemaining": null,
"firmTermAdded": null,
"maxAvailableTerm": null,
"status": null,
"capitalContribution": null,
"parentCloneId": null,
"accountId": this.currentAccount.accountId,
"transactionId": this.transactionData.id,
"dealTypeValues": JSON.stringify(dealTypeValues)
}
this.createDispositionDeal(payload);
}
createDispositionDeal(payload:any) {
this._dealService.createDeal(payload)
.subscribe(
res=>{
this._notificationService.showSuccess('Deal was successfully created.');
if(res.isSuccess){
this.refreshDealDetailsPage(res.data);
}
},
err=>{
console.log('Error creating deal')
}
)
}
there is a perfect solution using rxjs exhaustMap but You can simply disable your button during the processing of your call and enable it again when the reponse comes
isLoading = false;
saveDeal() {
this.isLoading = true;
...
}
createDispositionDeal(payload:any) {
this._dealService.createDeal(payload)
.subscribe(
res=>{
this.isLoading = false; // here
...
},
err=>{
this.isLoading = false; // here
...
}
)
}
and add a new input to your component [disabled]="isLoading"
<app-page-section-cards-btn
[disabled]="isLoading"
[btnData]="pageSectionsOptions.btnData.save"
(btnClickEvent)="saveDeal()">
</app-page-section-cards-btn>