From b8f05801a6fc2f730710c4f059466ca184b3a86d Mon Sep 17 00:00:00 2001
From: Petr Gadorek <petr.gadorek@espressif.com>
Date: Fri, 29 Nov 2024 13:09:32 +0100
Subject: [PATCH] enabled the navigation between steps

---
 src-tauri/tauri.conf.json     |  2 +-
 src/components/WizardStep.vue | 30 +++++++++++++++++++++++++++---
 src/store.js                  |  3 +++
 3 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 2fe6c00..e592fdb 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -14,7 +14,7 @@
       {
         "title": "ESP-IDF Installation Manager(EIM)",
         "width": 1200,
-        "height": 900
+        "height": 1000
       }
     ],
     "security": {
diff --git a/src/components/WizardStep.vue b/src/components/WizardStep.vue
index 20461f3..97a99ed 100644
--- a/src/components/WizardStep.vue
+++ b/src/components/WizardStep.vue
@@ -4,8 +4,10 @@
       <div class="steps-list">
         <div v-for="(step, index) in steps" :key="index" class="step-item" :class="{
           'active': currentStep === index + 1,
-          'completed': currentStep > index + 1
-        }">
+          'completed': currentStep > index + 1,
+          'disabled': currentStep === 7 || currentStep === 8,
+          'clickable': currentStep > index + 1 && currentStep < 7
+        }" @click="handleStepClick(index + 1)">
           <div class="step-number">
             <template v-if="currentStep > index + 1">
               <svg class="checkmark" viewBox="0 0 24 24" fill="none" stroke="currentColor">
@@ -106,6 +108,15 @@ export default {
         { title: "Instalation Complete" }
       ];
     },
+    handleStepClick(stepNumber) {
+      // Only allow navigation if:
+      // 1. The step has been completed (currentStep > stepNumber)
+      // 2. We're not in the installation or completion steps (currentStep < 7)
+      // 3. We're not trying to navigate to a step after our current position
+      if (this.currentStep > stepNumber && this.currentStep < 7) {
+        this.store.setStep(stepNumber);
+      }
+    },
     nextStep() {
       if (this.store.currentStep === 1) {
         // this.store.updateData({ deviceName: deviceName.value })
@@ -156,7 +167,7 @@ export default {
   color: #666;
 }
 
-.step-item:hover {
+.step-item:hover:not(.disabled) {
   background-color: #e8e8e8;
 }
 
@@ -169,6 +180,19 @@ export default {
   color: #666;
 }
 
+.step-item.disabled {
+  cursor: not-allowed;
+  opacity: 0.7;
+}
+
+.step-item.clickable {
+  cursor: pointer;
+}
+
+.step-item.clickable:hover {
+  background-color: #e8e8e8;
+}
+
 .step-number {
   width: 24px;
   height: 24px;
diff --git a/src/store.js b/src/store.js
index 6111bf2..a020133 100644
--- a/src/store.js
+++ b/src/store.js
@@ -12,6 +12,9 @@ export const useWizardStore = defineStore("wizard", {
         this.currentStep++;
       }
     },
+    setStep(step) {
+      this.currentStep = step;
+    },
     previousStep() {
       if (this.currentStep > 1) {
         this.currentStep--;