feat: add links to progress indicator bar

bcgov · Jun 20, 2023 · 63b5f11 · 63b5f11
1 parent 9b66845
commit 63b5f11
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/frontend/src/components/wizard/WizardProgressIndicatorComponent.vue b/frontend/src/components/wizard/WizardProgressIndicatorComponent.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wizard-wrap-indicator">
     <div
-      v-for="step in modelValue"
+      v-for="(step, index) in modelValue"
       :class="{
         'wizard-wrap-item': true,
         [`wizard-wrap-item-${step.kind}`]: true,
@@ -16,7 +16,15 @@
         }"
       />
       <div class="wizard-wrap-item-text">
-        <p>{{ step.title }}</p>
+        <p>
+          <a
+            v-if="canShowLink(step)"
+            :href="'#' + index"
+            @click.prevent="emit('go-to', index)"
+            >{{ step.title }}</a
+          >
+          <span v-else>{{ step.title }}</span>
+        </p>
         <span class="inner-text">{{ step.subtitle }}</span>
       </div>
     </div>
@@ -28,6 +36,8 @@ import type { ProgressData } from "@/core/CommonTypes";
 
 defineProps<{ modelValue: Array<ProgressData> }>();
 
+const emit = defineEmits<{ (e: "go-to", value: number): void }>();
+
 import Checkmark16 from "@carbon/icons-vue/es/checkmark--outline/16";
 import Error16 from "@carbon/icons-vue/es/error--outline/16";
 import Circle16 from "@carbon/icons-vue/es/circle-dash/16";
@@ -39,6 +49,10 @@ const iconsForKinds: Record<string, any> = {
   ["queued"]: Circle16,
   ["error"]: Error16,
 };
+
+const canShowLink = (step: ProgressData) => {
+  return step.kind === "current" || step.kind === "complete";
+};
 </script>
 
 <style scoped>
@@ -64,6 +78,14 @@ const iconsForKinds: Record<string, any> = {
 .wizard-wrap-item-text p {
   font-size: 14px;
 }
+.wizard-wrap-item-text p a {
+  text-decoration: none;
+  color: inherit;
+}
+.wizard-wrap-item-text p a:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
 .wizard-wrap-item-text span {
   font-size: 12px;
 }

diff --git a/frontend/src/components/wizard/WizardWrapperComponent.vue b/frontend/src/components/wizard/WizardWrapperComponent.vue
@@ -22,7 +22,10 @@
       >
       </bx-toast-notification>
     </div>
-    <wizard-progress-indicator-component :model-value="progressData" />
+    <wizard-progress-indicator-component
+      :model-value="progressData"
+      @go-to="goToStep"
+    />
   </div>
 
   <slot :processValidity="processValidity" :goToStep="goToStep" />