FE: Allow swiping slides only when values exist

pwilken · Mar 22, 2020 · 8d809a5 · 8d809a5
1 parent 9282440
commit 8d809a5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/src/app/src/app/questionnaire/questionnaire.page.html b/src/app/src/app/questionnaire/questionnaire.page.html
@@ -46,7 +46,7 @@ <h2>Hinweis</h2>
           passendes Testzentrum zu vermitteln, haben wir
           vorab ein paar Fragen.
         </p>
-        <ion-button class="nextButton" (click)="next()">
+        <ion-button class="nextButton" (click)="nextAndLock()">
           <ion-icon name="chevron-forward-outline"></ion-icon>
         </ion-button>
       </div>
@@ -55,9 +55,10 @@ <h2>Hinweis</h2>
       <div class="slide">
         <ion-item>
           <ion-label position="floating">Wie alt sind Sie?</ion-label>
-          <ion-input type="number"></ion-input>
+          <ion-input [(ngModel)]="patientModel.age" type="number" (ngModelChange)="unlockOnChange('age')"></ion-input>
         </ion-item>
-        <ion-button class="nextButton" (click)="next()">
+        Sie sind {{ patientModel.age }} Jahre alt. Wow!
+        <ion-button class="nextButton" [disabled]="!allowNext('age')" (click)="nextAndLock()">
           <ion-icon name="chevron-forward-outline"></ion-icon>
         </ion-button>
       </div>

diff --git a/src/app/src/app/questionnaire/questionnaire.page.ts b/src/app/src/app/questionnaire/questionnaire.page.ts
@@ -31,6 +31,16 @@ export class QuestionnairePage implements OnInit {
 
   ngOnInit() {}
 
+  unlockOnChange(prop: string) {
+    if (this.allowNext(prop)) {
+      this.unlock()
+    }
+  }
+
+  allowNext(prop: string) {
+    return !!this.patientModel[prop]
+  }
+
   lock() {
     this.slides.lockSwipes(true)
   }
@@ -43,7 +53,8 @@ export class QuestionnairePage implements OnInit {
     this.slides.slideNext()
   }
 
-  prev() {
-    this.slides.slidePrev()
+  nextAndLock() {
+    this.next()
+    this.lock()
   }
 }