Feature/2429 test navigation improvements

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.21",
+    "@jac-uk/jac-kit": "4.1.25",
     "@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",

src/App.vue

@@ -155,37 +155,48 @@
         </button>
       </div>
     </Modal>
+
+    <Modal ref="archiveModal">
+      <ModalInner
+        :title="archiveTitle"
+        :message="archiveMessage"
+        :button-text="archiveButtonText"
+        @close="closeArchiveModal"
+        @confirmed="archive"
+      />
+    </Modal>
   </div>
 </template>
 
 <script>
 import Modal from '@jac-uk/jac-kit/components/Modal/Modal.vue';
-import { auth } from '@/firebase';
+import ModalInner from '@jac-uk/jac-kit/components/Modal/ModalInner.vue';import { auth } from '@/firebase';
 import permissionMixin from '@/permissionMixin';
 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/TabMenu.vue';
+import { isApproved, isArchived } from '@/helpers/exerciseHelper';
+import { logEvent } from '@/helpers/logEvent';
+import TabMenu from '@/components/Navigation/TabMenu1.vue';
 export default {
   name: 'App',
   components: {
     Messages,
     UserFeedbackModal,
     UserFeedbackLink,
     Modal,
+    ModalInner,
     TabMenu,
   },
   mixins: [permissionMixin],
   data() {
     return {
       authorisedToPerformAction: false,
       rect: null,
-      //buttonElement: null,
       linkBottom: '',
       isMounted: false,
       observer: null,
-      tabs: [],
     };
   },
   computed: {
@@ -217,13 +228,150 @@ export default {
     canReadMessages() {
       return this.hasPermissions([this.PERMISSIONS.messages.permissions.canReadMessages.value]);
     },
+    canUpdateExercises() {
+      return this.hasPermissions([this.PERMISSIONS.exercises.permissions.canUpdateExercises.value]);
+    },
+    canArchiveExercises() {
+      return this.hasPermissions([this.PERMISSIONS.exercises.permissions.canAmendAfterLaunch.value]);
+    },
     currentUser() {
       return this.$store.state.auth.currentUser;
     },
     showFeedbackLink() {
       // Enable when the environment and app are defined (these are used when creating the bug request number)
       return this.isSignedIn && this.isMounted && this.environment && (import.meta.env.PACKAGE_NAME !== undefined && import.meta.env.PACKAGE_NAME !== null);
     },
+    exercise() {
+      return this.$store.state.exerciseDocument.record;
+    },
+    exerciseId() {
+      return this.$store.state.exerciseDocument.record ? this.$store.state.exerciseDocument.record.id : null;
+    },
+    isApproved() {
+      return isApproved(this.exercise);
+    },
+    isArchived() {
+      return isArchived(this.exercise);
+    },
+    isPublished() {
+      return this.exercise.published;
+    },
+    archiveTitle() {
+      if (this.isArchived) {
+        return 'Unarchive exercise';
+      } else {
+        return 'Archive exercise';
+      }
+    },
+    archiveMessage() {
+      if (this.isArchived) {
+        return 'By clicking accept you authorise the exercise to be unarchived';
+      } else if (this.isPublished) {
+        return 'This exercise is Live on Apply; by clicking accept, you authorise the exercise to be removed from Apply and archived';
+      } else {
+        return 'By clicking accept you authorise the exercise to be archived';
+      }
+    },
+    archiveButtonText() {
+      if (this.isArchived) {
+        return 'Accept - unarchive this exercise';
+      } else {
+        return 'Accept - archive this exercise';
+      }
+    },
+    tabs() {
+      const tabs = [];
+      if (this.hasPermissions([this.PERMISSIONS.logs.permissions.canReadLogs.value])) {
+        tabs.push({
+          title: 'Events',
+          link: { name: 'events' },
+        });
+      }
+      if (this.hasPermissions([this.PERMISSIONS.notifications.permissions.canReadNotifications.value])) {
+        tabs.push({
+          title: 'Notifications',
+          link: { name: 'notifications' },
+        });
+      }
+      if (this.hasPermissions([this.PERMISSIONS.exercises.permissions.canReadExercises.value])) {
+        const exerciseContent = [];
+        exerciseContent.push(
+          {
+            title: 'Live exercises',
+            link: () => {
+              this.$store.dispatch('exerciseCollection/showAll');
+              this.$router.push({ name: 'exercises' });
+            },
+          },
+          {
+            title: 'Archived exercises',
+            link: () => {
+              this.$store.dispatch('exerciseCollection/showArchived');
+              this.$router.push({ name: 'exercises' });
+            },
+          },
+          { title: 'Create exercise', link: { name: 'create-exercise' } }
+        );
+        if (this.canUpdateExercises && this.isApproved) {
+          exerciseContent.push(
+            {
+              title: 'Copy exercise to clipboard',
+              link: () => {
+                this.copyToClipboard();
+              },
+            }
+          );
+        }
+        if (this.canArchiveExercises) {
+          exerciseContent.push(
+            {
+              title: this.archiveTitle,
+              link: () => {
+                this.openArchiveModal();
+              },
+            }
+          );
+        }
+        exerciseContent.push(
+          {
+            title: 'My favourites',
+            link: () => {
+              this.$store.dispatch('exerciseCollection/showFavourites');
+              this.$router.push({ name: 'exercises' });
+            },
+          }
+        );
+        tabs.push({
+          title: 'Exercises',
+          content: exerciseContent,
+        });
+      }
+      if (this.hasPermissions([this.PERMISSIONS.candidates.permissions.canReadCandidates.value])) {
+        tabs.push({
+          title: 'Candidates',
+          link: { name: 'candidates-list' },
+        });
+      }
+      if (this.hasPermissions([this.PERMISSIONS.panellists.permissions.canManagePanellists.value])) {
+        tabs.push({
+          title: 'Panellists',
+          link: { name: 'panellists-list' },
+        });
+      }
+      if (this.hasPermissions([this.PERMISSIONS.users.permissions.canReadUsers.value])) {
+        tabs.push({
+          title: 'Users',
+          link: { name: 'users' },
+        });
+      }
+      tabs.push({
+        title: this.userName,
+        content: [
+          { title: 'Sign out', link: () => { this.signOut(); } },
+        ],
+      });
+      return tabs;
+    },
   },
   watch: {
     async isSignedIn() {
@@ -294,8 +442,6 @@ export default {
 
     },
     async load() {
-      this.buildTabs();
-
       // Leave async calls til the end so dont block the instant calls
       await this.$store.dispatch('services/bind');
       if (this.canReadMessages) {
@@ -340,79 +486,42 @@ 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: 'Programme view',
-              link: () => {
-                this.$store.dispatch('exerciseCollection/showAll');
-                this.$router.push({ name: 'exercises-programme-view' });
-              },
-            },
-            {
-              title: 'My favourites',
-              link: () => {
-                this.$store.dispatch('exerciseCollection/showFavourites');
-                this.$router.push({ name: 'exercises' });
-              },
-            },
-          ],
+    async copyToClipboard() {
+      try {
+        const exercise = await this.$store.dispatch('exerciseDocument/getDocumentData', this.exerciseId);
+        await this.$store.dispatch('clipboard/write', {
+          environment: this.$store.getters.appEnvironment,
+          type: 'exercise',
+          title: `${exercise.referenceNumber} ${exercise.name}`,
+          content: exercise,
         });
+        return true;
+      } catch (error) {
+        return;
       }
-      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' },
+    },
+    openArchiveModal() {
+      this.$refs.archiveModal.openModal();
+    },
+    closeArchiveModal() {
+      this.$refs.archiveModal.closeModal();
+    },
+    archive() {
+      if (this.isArchived) {
+        this.$store.dispatch('exerciseDocument/unarchive');
+        logEvent('info', 'Exercise unarchived', {
+          exerciseId: this.exerciseId,
+          exerciseRef: this.exercise.referenceNumber,
         });
       }
-      if (this.hasPermissions([this.PERMISSIONS.users.permissions.canReadUsers.value])) {
-        this.tabs.push({
-          title: 'Users',
-          link: { name: 'users' },
+      else {
+        this.$store.dispatch('exerciseDocument/archive');
+        logEvent('info', 'Exercise archived', {
+          exerciseId: this.exerciseId,
+          exerciseRef: this.exercise.referenceNumber,
         });
       }
-      this.tabs.push({
-        title: this.userName,
-        content: [
-          { title: 'Sign out', link: () => { this.signOut(); } },
-        ],
-      });
+      this.$refs.archiveModal.closeModal();
     },
   },
 };