[MNT] Reworked routing for the app

components/next-page.vue

@@ -18,9 +18,8 @@
                 class="float-right"
                 data-cy="button-nextpage"
                 :disabled="!isPageAccessible(pageData[getNextPage].pageName)"
-                :to="'/' + pageData[getNextPage].location"
                 :variant="nextPageButtonColor"
-                @click="setCurrentPage(getNextPage)">
+                @click="navigateToPage(getNextPage);">
                 {{ uiText.button[currentPage] }}
             </b-button>
         </b-col>
@@ -39,6 +38,8 @@
     // Fields listed in mapState below can be found in the store (index.js)
     import { mapState } from "vuex";
 
+    import { mapActions } from "vuex";
+
     export default {
 
         data() {
@@ -90,6 +91,9 @@
             ...mapMutations([
 
                 "setCurrentPage"
+            ]),
+            ...mapActions([
+                "navigateToPage"
             ])
         }
     };

components/tool-navbar.vue

@@ -2,6 +2,7 @@
 
     <div>
 
+
         <!-- Navbar -->
         <b-navbar toggleable="lg" type="light" variant="light">
 
@@ -31,8 +32,7 @@
                         :data-cy="'menu-item-' + navItem.pageName"
                         :disabled="!isPageAccessible(navItem.pageName)"
                         :key="navItem.pageName"
-                        :to="navItem.location"
-                        @click="setCurrentPage(navItem.pageName)">
+                        @click="navigateToPage(navItem.pageName)">
                         {{ navItem.fullName }}
                     </b-nav-item>
                     <span id="nav-separator">|</span>
@@ -71,14 +71,7 @@
 
 <script>
 
-    // Allows for reference to store data by creating simple, implicit getters
-    import { mapGetters } from "vuex";
-
-    // Allows for direct mutations of store data
-    import { mapMutations } from "vuex";
-
-    // Fields listed in mapState below can be found in the store (index.js)
-    import { mapState } from "vuex";
+    import {mapActions, mapState, mapGetters} from "vuex";
 
     export default {
 
@@ -117,10 +110,8 @@
         },
 
         methods: {
-
-            ...mapMutations([
-
-                "setCurrentPage"
+            ...mapActions([
+                "navigateToPage"
             ]),
 
             getNavItemColor(p_navItemData) {

cypress/e2e/page/my_happy_annotation-page_tests.cy.js

@@ -53,11 +53,6 @@ describe("to annotate an assessment ", () => {
             cy.get("[data-cy='assessment-column-table']").contains(desiredColumnToolMapping.column).click();
         });
 
-        // We apparently are unable to use the normal "next page" button here
-        // for some reason I don't yet understand. So we can force-route ourselves
-        // to the next page here despite the button erroneously not being enabled.
-        cy.window().its("$nuxt.$router").then(router => {
-            router.push({ path: "/annotation" });
-        });
+        cy.get("[data-cy='button-nextpage']").click();
     });
 });

store/index.js

@@ -706,6 +706,11 @@ export const getters = {
 
 export const actions = {
 
+    navigateToPage({ state, commit }, pageName) {
+        this.$router.push(state.pageData[pageName].location);
+        commit("setCurrentPage", pageName);
+    },
+
     processDataDictionary({ state, commit, getters }, { data, filename }) {
 
         // 1. Save the user-provided data dictionary