Prevent calibration navigation during actions

webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue

@@ -28,17 +28,24 @@ gets very confusing.
       v-if="currentStep"
       :key="stepIndex"
       @awaiting-user="handleAwaitingUser"
+      @prevent-navigation="handlePreventNavigation"
     />
     <p class="uk-text-right">
       <button
         v-if="showBackButton"
         class="uk-button uk-button-default"
+        :class="{ 'uk-button-disabled': preventNavigation, 'disabled-cursor': preventNavigation }"
         type="button"
         @click="previousStep"
       >
         Back
       </button>
-      <button class="uk-button uk-button-primary uk-margin-left" type="button" @click="nextStep">
+      <button
+        class="uk-button uk-button-primary uk-margin-left"
+        :class="{ 'uk-button-disabled': preventNavigation, 'disabled-cursor': preventNavigation }"
+        type="button"
+        @click="nextStep"
+      >
         {{ nextButtonText }}
       </button>
     </p>
@@ -72,6 +79,7 @@ export default {
     return {
       stepIndex: this.startOnLast ? this.steps.length - 1 : 0,
       stepAwaitingUser: false,
+      preventNavigation: false,
     };
   },
 
@@ -96,6 +104,7 @@ export default {
      * Move to the previous step in this task, or the previous task if first step.
      */
     previousStep: function () {
+      if (this.preventNavigation) return;
       this.stepAwaitingUser = false;
       if (this.stepIndex > 0) {
         this.stepIndex = this.stepIndex - 1;
@@ -108,6 +117,7 @@ export default {
      * Move to the next step in this task, or the next task if final step.
      */
     nextStep: function () {
+      if (this.preventNavigation) return;
       this.stepAwaitingUser = false;
       if (this.stepIndex < this.steps.length - 1) {
         this.stepIndex = this.stepIndex + 1;
@@ -119,6 +129,14 @@ export default {
     handleAwaitingUser(isAwaiting) {
       this.stepAwaitingUser = isAwaiting;
     },
+    handlePreventNavigation(blocked) {
+      this.preventNavigation = blocked;
+    },
   },
 };
 </script>
+<style lang="less" scoped>
+.disabled-cursor {
+  cursor: not-allowed !important ;
+}
+</style>