fix: button disabled while running request (#666)

* fix: button disabled while running request * Update data.component.html Co-authored-by: Allan Bowe <[email protected]>
sasjs · Sep 1, 2022 · 5984075 · 5984075
1 parent c4b0809
commit 5984075
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/app/data/data.component.html b/src/app/data/data.component.html
@@ -10,11 +10,20 @@
         {{ area['AREA'] }}
       </option>
     </select>
+
+<!--
+Here we disable the button in 2 cases:
 
+1. Value from the dropdown is not selected
+2. Request is sent, and button disabled until it is finished
+
+To only disable button when request is running:
+  [disabled]="springsLoading"
+-->
     <button
       (click)="submitData()"
       class="btn btn-primary"
-      [disabled]="!selectedArea"
+      [disabled]="!selectedArea || springsLoading"
     >
       SUBMIT
     </button>

diff --git a/src/app/data/data.component.ts b/src/app/data/data.component.ts
@@ -38,12 +38,12 @@ export class DataComponent implements OnInit {
   }
 
   public submitData() {
-    this.springsLoading = true
+    this.springsLoading = true //Request started we set variable to `true`
     let data = { areas: [{ area: this.selectedArea }] }
 
     this.sasService.request('common/getdata', data).then((res: any) => {
       this.springs = res['springs']
-      this.springsLoading = false
+      this.springsLoading = false // Request is finished, success or fail anyway we set variable to false
 
       if (!res || !res['springs'] || res['spring']?.length < 1) {
         this.noData = true