There is an issue where users click the save button multiple times, causing a queue of requests to be submitted and resulting in the creation of duplicate data. How can we prevent this on the front-end so that only one request is submitted even if the button is clicked multiple times? Does anyone have a clean implementation or know the techniques to achieve this?
Thank you.
#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>
ts code
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')
}
)
}