Merge pull request #935 from bcgov/feature/edx-1148

EDX-1148: SDC progress stepper styling.
bcgov · Jul 31, 2023 · 4b98743 · 4b98743
2 parents fb89715 + f8a2038
commit 4b98743
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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
@@ -10,33 +10,38 @@ export const SDC_STEPS = Object.freeze(
       route: 'step-1',
       next: 'step-2',
       index: 0,
+      isStarted: false,
       isComplete: false
     }, {
       label: 'STEP-2',
       name: 'Verify School Contacts (1601)',
       route: 'step-2',
       next: 'step-3',
       index: 1,
+      isStarted: false,
       isComplete: false
     }, {
       label: 'STEP-3',
       name: 'Upload Data',
       route: 'step-3',
       next: 'step-4',
       index: 2,
+      isStarted: false,
       isComplete: false
     }, {
       label: 'STEP-4',
       name: 'Review & Fix Data Issues',
       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
     }
   ]