From 3b501ac0454e9085dbcc118948e7df322d874396 Mon Sep 17 00:00:00 2001 From: drieJac Date: Mon, 8 Jul 2024 09:06:05 +0100 Subject: [PATCH 01/13] Use latest jac-kit for full width menu below exercise tabs. Added composable for navigation. Removed unnecessary buttons. --- package-lock.json | 10 ++--- package.json | 4 +- src/App.vue | 69 +++++++++++++++++++++++++++++++++- src/composables/useExercise.js | 26 +++++++++++++ src/views/Exercise.vue | 61 ++++++++++++++++++++++++------ src/views/Exercises.vue | 38 ------------------- 6 files changed, 150 insertions(+), 58 deletions(-) create mode 100644 src/composables/useExercise.js diff --git a/package-lock.json b/package-lock.json index 627c69b30..dc848c7f4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,7 +8,7 @@ "name": "admin", "version": "1.50.0", "dependencies": { - "@jac-uk/jac-kit": "4.1.14", + "@jac-uk/jac-kit": "4.1.23", "@ministryofjustice/frontend": "0.2.4", "@sentry/tracing": "^7.61.1", "@sentry/vue": "^7.61.1", @@ -22,7 +22,7 @@ "govuk-frontend": "^3.12.0", "html2canvas": "^1.4.1", "lodash": "^4.17.21", - "mitt": "^3.0.0", + "mitt": "^3.0.1", "patternomaly": "^1.3.2", "save-file": "^2.3.1", "stream-browserify": "^3.0.0", @@ -1648,9 +1648,9 @@ } }, "node_modules/@jac-uk/jac-kit": { - "version": "4.1.14", - "resolved": "https://npm.pkg.github.com/download/@jac-uk/jac-kit/4.1.14/6e73cb7626216ec08c0760cf56b6f68cb62ed34c", - "integrity": "sha512-09fwWjalARamkME2yhaFGiz37JpZ5UKKZ2zS3WMEsRiB/ESGoTwawU/r0TcnUG6BcXP9qkO3nOsU3BECAYzZwg==", + "version": "4.1.23", + "resolved": "https://npm.pkg.github.com/download/@jac-uk/jac-kit/4.1.23/d00dbe3be1e1bd37a4e4aa33d2c0f71095053baf", + "integrity": "sha512-Q8vCFgEB+qWHjZokBFdFFvSMrHw2ZWeRbUtUIC6DxNXMdvxqzGRKP9d8QQa3oSFxt7x/gwsQoemLpx4uYzc/Wg==", "dependencies": { "@ckeditor/ckeditor5-build-classic": "^38.1.0", "@ckeditor/ckeditor5-vue": "^5.1.0", diff --git a/package.json b/package.json index 9e71cbdef..c478ec142 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "lint-ci": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --no-fix --ignore-path .gitignore" }, "dependencies": { - "@jac-uk/jac-kit": "4.1.14", + "@jac-uk/jac-kit": "4.1.23", "@ministryofjustice/frontend": "0.2.4", "@sentry/tracing": "^7.61.1", "@sentry/vue": "^7.61.1", @@ -40,7 +40,7 @@ "govuk-frontend": "^3.12.0", "html2canvas": "^1.4.1", "lodash": "^4.17.21", - "mitt": "^3.0.0", + "mitt": "^3.0.1", "patternomaly": "^1.3.2", "save-file": "^2.3.1", "stream-browserify": "^3.0.0", diff --git a/src/App.vue b/src/App.vue index 77e9d40c3..614fa6ccb 100644 --- a/src/App.vue +++ b/src/App.vue @@ -266,7 +266,7 @@ import Messages from '@/components/Messages.vue'; import UserFeedbackModal from '@/components/ModalViews/UserFeedbackModal.vue'; import _debounce from 'lodash/debounce'; import UserFeedbackLink from '@/components/Feedback/UserFeedbackLink.vue'; - +import TabMenu from '@jac-uk/jac-kit/draftComponents/Navigation/TabMenu.vue'; export default { name: 'App', components: { @@ -434,6 +434,73 @@ export default { async openFeedbackModal() { this.$refs.feedbackModal.openModal(); }, + buildTabs() { + if (this.hasPermissions([this.PERMISSIONS.logs.permissions.canReadLogs.value])) { + this.tabs.push({ + title: 'Events', + link: { name: 'events' }, + }); + } + if (this.hasPermissions([this.PERMISSIONS.notifications.permissions.canReadNotifications.value])) { + this.tabs.push({ + title: 'Notifications', + link: { name: 'notifications' }, + }); + } + if (this.hasPermissions([this.PERMISSIONS.exercises.permissions.canReadExercises.value])) { + this.tabs.push({ + title: 'Exercises', + content: [ + { + title: 'Live exercises', + link: () => { + this.$store.dispatch('exerciseCollection/showAll'); + this.$router.push({ name: 'exercises' }); + }, + }, + { title: 'Create exercise', link: { name: 'create-exercise' } }, + { + title: 'Archived exercises', + link: () => { + this.$store.dispatch('exerciseCollection/showArchived'); + this.$router.push({ name: 'exercises' }); + }, + }, + { + title: 'My favourites', + link: () => { + this.$store.dispatch('exerciseCollection/showFavourites'); + this.$router.push({ name: 'exercises' }); + }, + }, + ], + }); + } + if (this.hasPermissions([this.PERMISSIONS.candidates.permissions.canReadCandidates.value])) { + this.tabs.push({ + title: 'Candidates', + link: { name: 'candidates-list' }, + }); + } + if (this.hasPermissions([this.PERMISSIONS.panellists.permissions.canManagePanellists.value])) { + this.tabs.push({ + title: 'Panellists', + link: { name: 'panellists-list' }, + }); + } + if (this.hasPermissions([this.PERMISSIONS.users.permissions.canReadUsers.value])) { + this.tabs.push({ + title: 'Users', + link: { name: 'users' }, + }); + } + this.tabs.push({ + title: this.userName, + content: [ + { title: 'Sign out', link: () => { this.signOut(); } }, + ], + }); + }, }, }; diff --git a/src/composables/useExercise.js b/src/composables/useExercise.js new file mode 100644 index 000000000..ee5378d0a --- /dev/null +++ b/src/composables/useExercise.js @@ -0,0 +1,26 @@ +import { computed } from 'vue'; +import { useStore } from 'vuex'; + +export const useExercise = () => { + const store = useStore(); + + const exercise = computed(() => { + return store.state.exerciseDocument.record; + }); + + const getExerciseProgress = () => { + return computed(() => { + const exerciseValue = exercise.value; + if (exerciseValue && exerciseValue.progress) { + return exerciseValue.progress; + } else { + return {}; + } + }); + }; + + return { + exercise, + getExerciseProgress, + }; +}; diff --git a/src/views/Exercise.vue b/src/views/Exercise.vue index 0cd4b0460..f7367cec1 100644 --- a/src/views/Exercise.vue +++ b/src/views/Exercise.vue @@ -106,9 +106,11 @@
-
@@ -135,9 +137,9 @@ + + diff --git a/src/components/Navigation/TabMenu1.vue b/src/components/Navigation/TabMenu1.vue new file mode 100644 index 000000000..bfbd3d701 --- /dev/null +++ b/src/components/Navigation/TabMenu1.vue @@ -0,0 +1,245 @@ + + + + + diff --git a/src/components/Navigation/TabMenu2.vue b/src/components/Navigation/TabMenu2.vue new file mode 100644 index 000000000..feb841c0d --- /dev/null +++ b/src/components/Navigation/TabMenu2.vue @@ -0,0 +1,191 @@ + + + + diff --git a/src/views/Exercise.vue b/src/views/Exercise.vue index f7367cec1..3c11e5c04 100644 --- a/src/views/Exercise.vue +++ b/src/views/Exercise.vue @@ -56,9 +56,9 @@
- +

{{ exerciseName }}

@@ -106,11 +106,10 @@
+ {{ exercise.referenceNumber }}
@@ -149,9 +148,9 @@ import { isEditable, hasQualifyingTests, isProcessing, applicationCounts, isAppr import permissionMixin from '@/permissionMixin'; import { logEvent } from '@/helpers/logEvent'; import { functions } from '@/firebase'; -import { ADVERT_TYPES } from '../helpers/constants'; -import TabMenu from '@jac-uk/jac-kit/draftComponents/Navigation/TabMenu.vue'; +import { STATUS, ADVERT_TYPES, EXERCISE_STAGE } from '../helpers/constants'; import { useExercise } from '@/composables/useExercise'; +import TabMenu from '@/components/Navigation/TabMenu2.vue'; export default { name: 'ExerciseView', @@ -273,10 +272,10 @@ export default { const path = `/exercise/${this.exercise.id}`; const subNavigation = []; if (this.applicationCounts._total) { - subNavigation.push({ link: `${path}/dashboard`, title: 'Dashboard' }); + subNavigation.push({ link: { path: `${path}/dashboard`, name: 'exercise-dashboard' }, title: 'Dashboard' }); } const content = []; - content.push({ title: 'Overview', link: { path: `${path}/details` } }); + content.push({ title: 'Overview', link: { name: 'exercise-overview' } }); //if (!this.exercise.state || this.exercise.state === 'draft' || this.exercise.state === 'ready') { // if (this.exerciseProgress) { content.push( @@ -294,20 +293,22 @@ export default { ); // } //} + if (content.length) { subNavigation.push({ title: 'Exercise', + link: { name: 'exercise-overview' }, content: content, }); } if ((this.exercise.applications || this.hasOpened) && this.hasPermissions([this.PERMISSIONS.applications.permissions.canReadApplications.value])) { - subNavigation.push({ link: `${path}/applications`, title: 'Applications' }); + subNavigation.push({ link: { name: `exercise-applications-${STATUS.APPLIED}` }, title: 'Applications' }); } if (this.isProcessing) { - subNavigation.push({ link: `${path}/tasks/all`, title: 'Tasks' }); - subNavigation.push({ link: `${path}/stages`, title: 'Stages' }); - subNavigation.push({ link: `${path}/reports`, title: 'Reports' }); + subNavigation.push({ link: { name: 'exercise-tasks', params: { stage: 'all' } }, title: 'Tasks' }); + subNavigation.push({ link: { name: 'exercise-stage-list', params: { stage: EXERCISE_STAGE.REVIEW } }, title: 'Stages' }); + subNavigation.push({ link: { name: 'exercise-reports-diversity' }, title: 'Reports' }); } return subNavigation; }, From 50218d61aeb6fac32861b28955d9ae54e60d8f40 Mon Sep 17 00:00:00 2001 From: drieJac Date: Wed, 24 Jul 2024 14:41:16 +0100 Subject: [PATCH 06/13] Ensure submenu closes when click on a different tab. --- src/components/Navigation/TabMenu2.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Navigation/TabMenu2.vue b/src/components/Navigation/TabMenu2.vue index feb841c0d..b05b2e870 100644 --- a/src/components/Navigation/TabMenu2.vue +++ b/src/components/Navigation/TabMenu2.vue @@ -116,6 +116,7 @@ export default { } else { this.submenu = []; + this.showSubmenu = false; } // Selecting the same item again if (this.arrowOpenIndex === index) { From f487ae0c79d7f0cfa5ab5153b0ead82b0ec6890e Mon Sep 17 00:00:00 2001 From: drieJac Date: Wed, 24 Jul 2024 15:07:32 +0100 Subject: [PATCH 07/13] Ensure there is no link when click on the tab with a submenu. --- src/components/Navigation/TabMenu2.vue | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/components/Navigation/TabMenu2.vue b/src/components/Navigation/TabMenu2.vue index b05b2e870..08dc865e0 100644 --- a/src/components/Navigation/TabMenu2.vue +++ b/src/components/Navigation/TabMenu2.vue @@ -11,20 +11,17 @@ @click.stop="onTabClick(tab, index)" > @@ -44,6 +41,23 @@ {{ tab.title }} + + + + {{ tab.title }} + + Date: Wed, 24 Jul 2024 15:50:41 +0100 Subject: [PATCH 08/13] Removed side menu. Ensure submenu closes when a link in the submenu is clicked. --- src/components/Navigation/TabMenu2.vue | 12 +- src/views/Exercise/Details.vue | 167 +++++++++++++------------ 2 files changed, 92 insertions(+), 87 deletions(-) diff --git a/src/components/Navigation/TabMenu2.vue b/src/components/Navigation/TabMenu2.vue index 08dc865e0..36c7867d2 100644 --- a/src/components/Navigation/TabMenu2.vue +++ b/src/components/Navigation/TabMenu2.vue @@ -66,6 +66,7 @@ :full-width-menu="true" :items="submenu" aria-label="Sub navigation" + @close="closeSubmenu" >