From f8a20380030d6d11f1a478fa2827ddf73eaa4eda Mon Sep 17 00:00:00 2001
From: keeganbcgov <Keegan.Laur@gov.bc.ca>
Date: Mon, 31 Jul 2023 14:52:37 -0700
Subject: [PATCH] EDX-1148: SDC progress stepper styling.

---
 .../components/common/StepperComponent.vue    | 49 +++++++++++++------
 .../sdcCollection/SDCCollectionView.vue       |  1 -
 frontend/src/store/modules/sdcCollection.js   |  9 ++--
 frontend/src/utils/institute/SdcSteps.js      |  5 ++
 4 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/common/StepperComponent.vue b/frontend/src/components/common/StepperComponent.vue
index 8aeee70da..9abececfe 100644
--- a/frontend/src/components/common/StepperComponent.vue
+++ b/frontend/src/components/common/StepperComponent.vue
@@ -4,15 +4,15 @@
       <v-row
         v-for="(step, index) in steps"
         :key="index"
+        :class="{'step': true, 'step-previous': step.index < currentStepInCollectionProcess.index, 'step-current': step.index === currentStepInCollectionProcess.index, 'step-future': step.isStarted && step.index > currentStepInCollectionProcess.index, 'step-disabled': !step.isStarted && step.index > currentStepInCollectionProcess.index}"
+        @click="onStepClick(step)"
       >
         <v-col
           class="step-base"
           cols="9"
         >
           <div
-            :class="{'complete' : step.isComplete, 'not-started': !step.isComplete && step.index > currentStepInCollectionProcess.index, 'in-progress': step.index === currentStepInCollectionProcess.index}"
             class="pb-7"
-            @click="onStepClick(step)"
           >
             {{ step.name }}
           </div>
@@ -21,7 +21,7 @@
           class="wrapper"
           cols="3"
         >
-          <div :class="{'circle circle-inactive': !step.isComplete && step.index > currentStepInCollectionProcess.index, 'circle circle-active': step.isComplete || step.index === currentStepInCollectionProcess.index}">
+          <div class="circle">
             <v-icon v-if="step.isComplete">
               mdi-check
             </v-icon>
@@ -80,16 +80,19 @@ export default {
   methods: {
     ...mapActions(useSdcCollectionStore, ['setCurrentStepInCollectionProcess']),
     onStepClick(step) {
+      if (step.index >= this.currentStepInCollectionProcess.index) {
+        return;
+      }
       this.setCurrentStepInCollectionProcess(step);
       this.$router.push({name: step.route});
     },
     moveToNextStep() {
       const currentIndex = this.currentStepInCollectionProcess.index;
-      if(!this.steps[currentIndex].isComplete) {
+      if (!this.steps[currentIndex].isComplete) {
         this.markStepComplete(currentIndex);
       }
       this.$emit('on-navigation-complete');
-      if(currentIndex < (this.steps.length - 1)) {
+      if (currentIndex < (this.steps.length - 1)) {
         this.setNextStepInProgressAndNavigate(currentIndex);       
       }
     },
@@ -99,6 +102,7 @@ export default {
     },
     setNextStepInProgressAndNavigate(currentIndex) {
       let nextStep = this.steps[currentIndex + 1];
+      nextStep.isStarted = true;
       this.setCurrentStepInCollectionProcess(nextStep);
       this.$router.push({name: nextStep.route});
     },
@@ -113,18 +117,26 @@ export default {
 <style scoped>
 
 .step-base {
-    margin: 20px auto 0 auto;
+  margin: 20px auto 0 auto;
 }
 
-.in-progress, .complete {
-  color: rgb(56, 89, 138);
+.step {
   font-weight: bold;
 }
 
-.not-started {
+.step.step-previous, .step.step-current {
+  color: rgb(56, 89, 138);
+  cursor: pointer;
+}
+
+.step.step-future {
+  color: #9dc3e6;
   cursor: not-allowed;
-  pointer-events: none;
+}
+
+.step.step-disabled {
   color: grey;
+  cursor: not-allowed;
 }
 
 .circle {
@@ -139,14 +151,19 @@ export default {
     position: relative;
 }
 
-.circle-active {
-    background: rgb(56, 89, 138);
-    border: 3px solid rgb(56, 89, 138);
+.step.step-previous .circle, .step.step-current .circle {
+  background: rgb(56, 89, 138);
+  border: 3px solid rgb(56, 89, 138);
+}
+
+.step.step-future .circle {
+  background: #9dc3e6;
+  border: 3px solid #9dc3e6;
 }
 
-.circle-inactive {
-    background: grey;
-    border: 3px solid grey;
+.step.step-disabled .circle {
+  background: grey;
+  border: 3px solid grey;
 }
 
 .vertical{
diff --git a/frontend/src/components/sdcCollection/SDCCollectionView.vue b/frontend/src/components/sdcCollection/SDCCollectionView.vue
index cd3ec584e..9352c8650 100644
--- a/frontend/src/components/sdcCollection/SDCCollectionView.vue
+++ b/frontend/src/components/sdcCollection/SDCCollectionView.vue
@@ -58,7 +58,6 @@
     <v-row v-else>
       <v-col cols="2">
         <StepperComponent
-          style="cursor: pointer"
           :steps="steps"
           :next-event="registerNextEvent"
           @on-navigation-complete="navigationCompleted()"
diff --git a/frontend/src/store/modules/sdcCollection.js b/frontend/src/store/modules/sdcCollection.js
index 9ee79cd9f..c0f2c79a5 100644
--- a/frontend/src/store/modules/sdcCollection.js
+++ b/frontend/src/store/modules/sdcCollection.js
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import {SDC_STEPS} from '../../utils/institute/SdcSteps';
 import ApiService from '../../common/apiService';
 import { ApiRoutes } from '../../utils/constants';
-import {capitalize} from "lodash";
+import {capitalize} from 'lodash';
 
 export const useSdcCollectionStore = defineStore('sdcCollection', {
   id: 'sdcCollection',
@@ -156,10 +156,13 @@ export const useSdcCollectionStore = defineStore('sdcCollection', {
         this.setCurrentStepInCollectionProcess(this.stepsInCollectionProcess.find(step => step.label === 'STEP-1'));
         break;
       }
-      this.markStepsComplete();
+      this.setStepsProgressState();
     },
-    markStepsComplete() {   
+    setStepsProgressState() {
       this.stepsInCollectionProcess.forEach(step => {
+        if (step.index <= this.currentStepInCollectionProcess.index) {
+          step.isStarted = true;
+        }
         if(step.index < this.currentStepInCollectionProcess.index) {
           step.isComplete = true;
         }
diff --git a/frontend/src/utils/institute/SdcSteps.js b/frontend/src/utils/institute/SdcSteps.js
index d1ada5b7b..5180981e6 100644
--- a/frontend/src/utils/institute/SdcSteps.js
+++ b/frontend/src/utils/institute/SdcSteps.js
@@ -10,6 +10,7 @@ export const SDC_STEPS = Object.freeze(
       route: 'step-1',
       next: 'step-2',
       index: 0,
+      isStarted: false,
       isComplete: false
     }, {
       label: 'STEP-2',
@@ -17,6 +18,7 @@ export const SDC_STEPS = Object.freeze(
       route: 'step-2',
       next: 'step-3',
       index: 1,
+      isStarted: false,
       isComplete: false
     }, {
       label: 'STEP-3',
@@ -24,6 +26,7 @@ export const SDC_STEPS = Object.freeze(
       route: 'step-3',
       next: 'step-4',
       index: 2,
+      isStarted: false,
       isComplete: false
     }, {
       label: 'STEP-4',
@@ -31,12 +34,14 @@ export const SDC_STEPS = Object.freeze(
       route: 'step-4',
       next: 'step-5',
       index: 3,
+      isStarted: false,
       isComplete: false
     }, {
       label: 'STEP-5',
       name: 'Edit/Verify Data & Submit',
       index: 4,
       route: 'step-5',
+      isStarted: false,
       isComplete: false
     }
   ]