fix: grey out button on submit MauroDataMapper#443

shikhavani · Feb 2, 2022 · 90b1be4 · 90b1be4
1 parent 094037c
commit 90b1be4
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/app/wizards/dataModel/data-model-main/data-model-main.component.html b/src/app/wizards/dataModel/data-model-main/data-model-main.component.html
@@ -31,7 +31,7 @@ <h4 class="marginless">New Data Model</h4>
                 </button>
             </div>
             <div fxFlex fxLayout="row-reverse" fxLayout.md="column" fxLayout.sm="column" fxLayout.xs="column" fxFlex="50" fxFlex.md="100" fxFlex.sm="100" fxFlex.xs="100">
-                <button mat-flat-button type="button" color="primary" class="custom" *ngIf="(i+1) === steps.length" [disabled]="step.invalid" (click)="save()">Submit Data Model</button>
+                <button mat-flat-button type="button" color="primary" class="custom" *ngIf="(i+1) === steps.length" [disabled]="step.invalid || disabledSave" (click)="save()">Submit Data Model</button>
                 <button mat-stroked-button type="button" color="primary" class="custom" *ngIf="(i+1) !== steps.length" [disabled]="step.invalid" matStepperNext>
                     Next step
                     <i class="fas fa-chevron-right"></i>

diff --git a/src/app/wizards/dataModel/data-model-main/data-model-main.component.ts b/src/app/wizards/dataModel/data-model-main/data-model-main.component.ts
@@ -51,6 +51,7 @@ export class DataModelMainComponent implements OnInit {
     private folders: FolderService,
     private title: Title) { }
 
+  disabledSave = false;
   ngOnInit() {
     this.title.setTitle('New Data Model');
 
@@ -90,6 +91,7 @@ export class DataModelMainComponent implements OnInit {
   };
 
   save() {
+    this.disabledSave =  true;
     const details = this.steps[0].compRef.instance as DataModelStep1Component;
     const types = this.steps[1].compRef.instance as DataModelStep2Component;
 
@@ -114,12 +116,16 @@ export class DataModelMainComponent implements OnInit {
       .addToFolder(this.parentFolderId, resource, queryStringParams)
       .pipe(
         catchError(error => {
+          this.disabledSave =  false;
           this.messageHandler.showError('There was a problem saving the Data Model.', error);
           return EMPTY;
         }))
       .subscribe((response: DataModelDetailResponse) => {
         this.messageHandler.showSuccess('Data Model saved successfully.');
+        this.disabledSave =  false;
         this.stateHandler.Go('datamodel', { id: response.body.id }, { reload: true, location: true });
+      }, error => {
+        this.disabledSave =  false;
       });
   }
 }