From 369864e36c2046d4a880da3ba3a608eaae0c4d5e Mon Sep 17 00:00:00 2001 From: Tom Russell Date: Fri, 19 Jun 2020 15:38:17 +0100 Subject: [PATCH 1/4] Add logic for active page highlighting --- src/components/Page/Navigation.vue | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/src/components/Page/Navigation.vue b/src/components/Page/Navigation.vue index 92b2b9350..3f71e9c6b 100644 --- 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)}" > ['edit','list'].indexOf(i) !== -1)) { + // check the names match + return page.name.split('-')[2] == this.$route.name.split('-')[2]; + } + else { + return this.$route.name == page.name; + } + }, + }, + }; From 108c44457394509836bfed472406581c230dc3cf Mon Sep 17 00:00:00 2001 From: Tom Russell Date: Tue, 23 Jun 2020 16:09:32 +0100 Subject: [PATCH 2/4] Add active page highlighting for move back pages --- src/components/Page/Navigation.vue | 4 ++-- src/views/Exercises/Show.vue | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Page/Navigation.vue b/src/components/Page/Navigation.vue index 3f71e9c6b..fb6fe2754 100644 --- a/src/components/Page/Navigation.vue +++ b/src/components/Page/Navigation.vue @@ -57,8 +57,8 @@ export default { // 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 or list page - else if (this.$route.name.split('-').some(i=>['edit','list'].indexOf(i) !== -1)) { + // 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]; } diff --git a/src/views/Exercises/Show.vue b/src/views/Exercises/Show.vue index 9b57d56a3..c2c0bb81d 100644 --- a/src/views/Exercises/Show.vue +++ b/src/views/Exercises/Show.vue @@ -42,10 +42,10 @@
From 49a856a8e6daf6ba368c8b0b659221a1033d6ea4 Mon Sep 17 00:00:00 2001 From: Warren Searle Date: Tue, 23 Jun 2020 16:46:34 +0100 Subject: [PATCH 3/4] #564 Application route including status --- src/router.js | 10 ++++++++++ src/views/Exercises/Applications/Application.vue | 8 ++++---- src/views/Exercises/Show.vue | 4 ++-- src/views/Exercises/Show/Applications.vue | 2 +- 4 files changed, 17 insertions(+), 7 deletions(-) diff --git a/src/router.js b/src/router.js index 9d77ebb41..9342e22fb 100644 --- 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 index 6e93ef58b..85453b68a 100644 --- a/src/views/Exercises/Applications/Application.vue +++ b/src/views/Exercises/Applications/Application.vue @@ -1713,8 +1713,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; @@ -1728,8 +1728,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 index c2c0bb81d..d6da13e76 100644 --- a/src/views/Exercises/Show.vue +++ b/src/views/Exercises/Show.vue @@ -45,9 +45,9 @@ title="Exercise" /> {{ application.referenceNumber }} From dd1ca1c3f4137a346d657c54561f8727f135bf59 Mon Sep 17 00:00:00 2001 From: Tom Russell Date: Wed, 24 Jun 2020 11:17:07 +0100 Subject: [PATCH 4/4] Add page highlighting for applications/application pages --- src/components/Page/Navigation.vue | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/Page/Navigation.vue b/src/components/Page/Navigation.vue index fb6fe2754..c67527411 100644 --- a/src/components/Page/Navigation.vue +++ b/src/components/Page/Navigation.vue @@ -52,17 +52,21 @@ export default { }, methods: { isActive(page){ - // if an application + // if an application if(page.params){ - // 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(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 { + } else { return this.$route.name == page.name; } },