commit

src/router/index.js

@@ -1,19 +1,78 @@
-import { createRouter, createWebHistory } from 'vue-router';
+import { storeActions } from "@/constants/store-actions";
-
 const routes = [
-  {
+    {
-    path: '/',
+        path: '/',
-    name: 'root',
+        name: 'root',
-    async beforeEnter(to, from, next) {
+        async beforeEnter(to, from, next) {
-    
+            try {
-    }
+                if (router.hasRoute(to.query.issPage)) {
-  }
+                    return next({ name: to.query.issPage, query: to.query, params: to.params });
+                }
+                const routeData = await GetRouteInfoFromPageName(to.query.issPage);
 
-]
+                // Add our dynamic route.
+                router.addRoute({
+                    path: routeData[0].path, // Always the same path, because we control it with query strings.
+                    name: routeData[0].name,
+                    component: routeData[0].component,
+                });
+
+
+                // Assign current query string parameters, as well as our fmgPage one.
+                next({
+                    name: routeData[0].name,
+                    query: Object.assign(to.query, { issPage: routeData[0].name }),
+                    params: to.params
+                });
+
+            } catch (error) {
+                console.log(error);
+                await GoToStartOn404(next);
+            }
+        }
+    }];
 
 const router = createRouter({
-  history: createWebHistory("/"),
+    history: createWebHistory("/"),
-  routes
+    routes,
-})
+});
 
-export default router
+// Navigate to the next route, depending on the scenario.
+async function navigate(scenario, currentRoute, optionalQuery = {}, optionalParams = {}) {
+    if (!scenario) {
+        console.error("No scenario provided. Please review the routing table.");
+        return;
+    }
+
+    // Match our maps up and navigate if we have a destination.
+    const matchingScenarioMap = getNavigationMap(scenario, currentRoute);
+    const destinationIssPageValue = matchingScenarioMap.destinationIssPageValue;
+
+    if (destinationIssPageValue !== undefined) {
+        // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our issPage one.
+        router.push({
+            name: "root",
+            query: Object.assign(optionalQuery, {
+                fmgPage: destinationIssPageValue,
+            }),
+            params: optionalParams
+        });
+    } else if (matchingScenarioMap.destinationUrl !== undefined) {
+        navigateToUrl(matchingScenarioMap.destinationUrl, optionalQuery);
+    }
+}
+
+// Get navigation map depending on the scenario and the current 'page' you're on.
+function getNavigationMap(scenario, currentRoute) {
+    const issPageValue = currentRoute.query.issPage;
+    const matchedQueryValue = routingTable(store)
+        .filter(
+            (item) =>
+                item.issPageValue === issPageValue &&
+                item.maps.filter((map) => map.scenario === scenario).length > 0
+        )
+        .map((m) => m.maps.filter((map) => map.scenario === scenario))[0]
+        .filter(x => x.filter === true || x.filter === undefined);
+
+    return matchedQueryValue[0];
+}

src/router/router-constants/issPage-values.js

@@ -0,0 +1,5 @@
+const issPageValues = {
+    VEHICLE_YEAR: "vehicle-year",
+  };
+  
+  export { issPageValues };

src/router/router-constants/navigation-scenarios.js

@@ -0,0 +1,10 @@
+const navigationScenarios = {
+    // General
+    CLICKED_BACK: "CLICKED_BACK",
+    CLICKED_FORWARD: "CLICKED_FORWARD",
+  
+    // YMMS
+    SELECTED_YEAR: "SELECTED_YEAR",
+  };
+  
+  export { navigationScenarios };

src/router/router-constants/routing-table.js

@@ -0,0 +1,19 @@
+import { issPageValues } from "@/router/router-constants/issPage-values";
+import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
+
+// Get store from router/index.js instead of importing it here to get updated values
+const routingTable = function(store) {
+  return [
+    {
+      issPageValue: issPageValues.VEHICLE_YEAR,
+      maps: [
+        {
+          scenario: navigationScenarios.SELECTED_YEAR,
+          issPageValue: "PageOne"
+        },
+      ],
+    },
+  ];
+}
+
+export { routingTable };

src/store/index.js

@@ -1,14 +1,67 @@
-import { createStore } from 'vuex'
+import { createStore } from "vuex";
+import { endpoints } from "@/constants/endpoints.js";
+import createPersistedState from "vuex-persistedstate";
+import globalMethods from "@/global-methods";
+
+// Export State
+const getDefaultState = () => {
+  return {
+    // State ...
+  },
+};
+
+export const state = getDefaultState();
+
+// Export Mutations
+export const mutations = {
+ // Mutations...
+}
+
+// Export Getters
+export const getters = {
+  // Getters...
+}
+
+function getAllValuesOfPropertyInArrayOfObjects(array, propertyName) {
+  return (array ?? []).map(x => x[propertyName]).filter(x => x);
+}
+
+// Export Actions
+export const actions = {
+  // Content API Actions
+  getRouteInfo(context, { pageName }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetRouteInfo.method,
+      endpoint: endpoints.GetRouteInfo.url,
+      payload: {
+        pageName: pageName,
+      },
+    });
+  },
+  getHomepageName(context) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetHomepageInfo.method,
+      endpoint: endpoints.GetHomepageInfo.url,
+    });
+  },
+  getPageData(context, { pageName }) {
+    return globalMethods.callHttpClient({
+      method: endpoints.GetPageData.method,
+      endpoint: `${endpoints.GetPageData.url}/${pageName}`,
+      payload: {},
+    });
+  },
+}
 
 export default createStore({
-  state: {
+  plugins: [createPersistedState()],
-  },
+
-  getters: {
+  // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons:
-  },
+  //    * The CMS can reference the fields by name
-  mutations: {
+  //    * Return users may have a previous "version" of the model, and we don't want
-  },
+  //      them to have a breaking experience, because the model might have changed.
-  actions: {
+  state,
-  },
+  mutations,
-  modules: {
+  getters,
-  }
+  actions,
-})
+});