Merge pull request #623 from jac-uk/feature/564-Navbar-Issues

Add logic for active page highlighting
jac-uk · Jun 26, 2020 · a491b2a · a491b2a
2 parents 67b06f8 + c1b1d4d
commit a491b2a
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 11 deletions.
diff --git a/src/components/Page/Navigation.vue b/src/components/Page/Navigation.vue
@@ -18,7 +18,7 @@
           v-for="(page, pageIndex) in pages"
           :key="pageIndex"
           class="moj-side-navigation__item"
-          :class="{'moj-side-navigation__item--active': page.on}"
+          :class="{'moj-side-navigation__item--active': isActive(page)}"
         >
           <router-link 
             class="moj-side-navigation__item"
@@ -45,8 +45,32 @@ export default {
       type: String,
     },
   },
-  computed: {
-    
+  data() {
+    return {
+      currentPage: '',
+    };
   },
+  methods: {
+    isActive(page){     
+      // if an application    
+      if(page.params){ 
+        if(page.params.status == this.$route.path.split('/')[this.$route.path.split('/').length-3]){ 
+          // check if the status param matches route path 3rd from last item (draft/applied/withdrawn)
+          return page.params.status == this.$route.path.split('/')[this.$route.path.split('/').length-3];
+        } else {
+          // else check the last word in the route path matches the page title (to lowercase)
+          return this.$route.path.split('/')[this.$route.path.split('/').length-1] == page.title.toLowerCase();
+        }
+      } 
+      // if the route is an edit, list or back page        
+      else if (this.$route.name.split('-').some(i=>['edit','list','back'].indexOf(i) !== -1)) { 
+        // check the names match
+        return page.name.split('-')[2] == this.$route.name.split('-')[2]; 
+      } else {
+        return this.$route.name == page.name;
+      }
+    },
+  },
+
 };
 </script>
diff --git a/src/router.js b/src/router.js
@@ -243,6 +243,16 @@ const router = new Router({
             requiresAuth: true,
             title: 'Exercise Details | Applications',
           },
+        },
+        // this route enables side navigation to show active state for :status
+        {
+          path: 'applications/:status/application/:applicationId',
+          component: ExerciseApplication,
+          name: 'exercise-applications-application',
+          meta: {
+            requiresAuth: true,
+            title: 'Exercise Application',
+          },
         },        
         {
           path: 'application/:applicationId',

diff --git a/src/views/Exercises/Applications/Application.vue b/src/views/Exercises/Applications/Application.vue
@@ -1729,8 +1729,8 @@ export default {
           if (this.applications[i].id === this.applicationId) {
             if (i < len) {
               this.$router.replace({ 
-                name: 'exercise-application', 
-                params: { applicationId: this.applications[i+1].id },
+                name: 'exercise-applications-application', 
+                params: { applicationId: this.applications[i+1].id, status: this.applications[i+1].status },
               });
             }
             break;
@@ -1744,8 +1744,8 @@ export default {
           if (this.applications[i].id === this.applicationId) {
             if (i > 0) {
               this.$router.replace({ 
-                name: 'exercise-application', 
-                params: { applicationId: this.applications[i-1].id },
+                name: 'exercise-applications-application', 
+                params: { applicationId: this.applications[i-1].id, status: this.applications[i+1].status },
               });
             }
             break;

diff --git a/src/views/Exercises/Show.vue b/src/views/Exercises/Show.vue
@@ -42,12 +42,12 @@
         <div class="govuk-grid-column-one-quarter print-none">
           <Navigation
             :pages="mainNavigation"
-            title="Main Navigation"
+            title="Exercise"
           />
           <Navigation
-            v-if="exercise.HasApplications || hasOpened"
+            v-if="exercise.applicationsCount || hasOpened"
             :pages="applicationStatusNavigation"
-            title="Application"
+            title="Applications"
           />
           <Navigation
             v-if="exercise.applicationsCount"

diff --git a/src/views/Exercises/Show/Applications.vue b/src/views/Exercises/Show/Applications.vue
@@ -50,7 +50,7 @@
           >
             <RouterLink
               class="govuk-link"
-              :to="{name: 'exercise-application', params: { applicationId: application.id }}"
+              :to="{name: 'exercise-applications-application', params: { applicationId: application.id, status: status }}"
             >
               {{ application.referenceNumber }}
             </RouterLink>