refactor code for guid

Author: iamsherlocked1891

Diff for: webapp/src/components/home/Home.vue

@@ -182,7 +182,7 @@ import DISCOllaboratives from "@/components/simple/DISCOllaboratives.vue";
 import ButtonsCard from "@/components/containers/ButtonsCard.vue";
 import { driver, type DriveStep } from "driver.js";
 import "driver.js/dist/driver.css";
-import { watch } from "vue";
+import { nextTick, watch } from "vue";
 import { useGuideStore } from "@/store/guide";
 
 const router = useRouter();
@@ -253,11 +253,13 @@ driverObj.drive();
 
 watch(
   () => guideStoreTraining.showGuide,
-  (newValue) => {
-    driverObj.destroy();
-    console.log(router.currentRoute.value.path);
-    if (router.currentRoute.value.path == "/") {
+  async (newValue) => {
+    if (driverObj.isActive()) {
+      await driverObj.destroy();
+    }
+    if (router.currentRoute.value.path === "/") {
       driverObj.setSteps(steps);
+      await nextTick();
       driverObj.drive();
     }
   },

Diff for: webapp/src/components/testing/Testing.vue

@@ -144,7 +144,7 @@
 <script lang="ts" setup>
 import createDebug from "debug";
 import { List } from "immutable";
-import { computed, ref, onActivated, watch } from "vue";
+import { computed, ref, onActivated, watch, nextTick } from "vue";
 import { RouterLink, useRouter } from "vue-router";
 import { VueSpinner } from "vue3-spinners";
 
@@ -296,7 +296,7 @@ function taskTitle(taskID: string): string | undefined {
 
   return titled.displayInformation.taskTitle;
 }
-// Define the steps for the guide when no user's models are available
+//Define the steps for the guide when no user's models are available
 const modelEmptySteps: DriveStep[] = [
   {
     popover: {
@@ -425,27 +425,23 @@ const evaluationSteps: DriveStep[] = [
 ];
 watch(
   () => guideStoreTesting.showGuide,
-  (newValue) => {
-    driverTesting.destroy();
-    if (router.currentRoute.value.path == "/evaluate") {
-      if (validationStore.step === 0) {
-        if (models.infos.isEmpty()) {
-          driverTesting.setSteps(modelEmptySteps);
-        } else {
-          driverTesting.setSteps(modelSteps);
-        }
+  async (newValue) => {
+    if (driverTesting.isActive()) {
+      await driverTesting.destroy();
+    }
+    if (router.currentRoute.value.path === "/evaluate") {
+      const stepsMap: Record<number, DriveStep[]> = {
+        0: models.infos.isEmpty() ? modelEmptySteps : modelSteps,
+        1: dataSteps,
+        2: evaluationSteps,
+      };
+
+      const steps = stepsMap[validationStore.step] || [];
+      if (steps.length) {
+        driverTesting.setSteps(steps);
+        await nextTick();
         driverTesting.drive();
       }
-      if (validationStore.step !== 0) {
-        if (validationStore.step === 1) {
-          driverTesting.setSteps(dataSteps);
-          driverTesting.drive();
-        }
-        if (validationStore.step === 2) {
-          driverTesting.setSteps(evaluationSteps);
-          driverTesting.drive();
-        }
-      }
     }
   },
 );