From 34f704c3db1cda60f6b233b36b8a36306142ac3a Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 14 Sep 2022 10:58:20 -0400 Subject: [PATCH] commit --- src/constants/endpoints.js | 0 src/constants/store-actions.js | 0 src/constants/store-mutations.js | 0 src/router/index.js | 87 ++++++++++++++++--- src/router/router-constants/issPage-values.js | 5 ++ .../router-constants/navigation-scenarios.js | 10 +++ src/router/router-constants/routing-table.js | 19 ++++ src/store/index.js | 77 +++++++++++++--- 8 files changed, 172 insertions(+), 26 deletions(-) create mode 100644 src/constants/endpoints.js create mode 100644 src/constants/store-actions.js create mode 100644 src/constants/store-mutations.js create mode 100644 src/router/router-constants/issPage-values.js diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js new file mode 100644 index 00000000..e69de29b diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js new file mode 100644 index 00000000..e69de29b diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js new file mode 100644 index 00000000..e69de29b diff --git a/src/router/index.js b/src/router/index.js index b61befb5..f23aa9e6 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,19 +1,78 @@ -import { createRouter, createWebHistory } from 'vue-router'; - +import { storeActions } from "@/constants/store-actions"; const routes = [ - { - path: '/', - name: 'root', - async beforeEnter(to, from, next) { - - } - } + { + path: '/', + name: 'root', + 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("/"), - routes -}) + history: createWebHistory("/"), + 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]; +} \ No newline at end of file diff --git a/src/router/router-constants/issPage-values.js b/src/router/router-constants/issPage-values.js new file mode 100644 index 00000000..1c1bbde6 --- /dev/null +++ b/src/router/router-constants/issPage-values.js @@ -0,0 +1,5 @@ +const issPageValues = { + VEHICLE_YEAR: "vehicle-year", + }; + + export { issPageValues }; \ No newline at end of file diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index e69de29b..a1eaba2e 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/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 }; \ No newline at end of file diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index e69de29b..51cdb516 100644 --- a/src/router/router-constants/routing-table.js +++ b/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 }; \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js index 7f5b89c7..ab277921 100644 --- a/src/store/index.js +++ b/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: { - }, - getters: { - }, - mutations: { - }, - actions: { - }, - modules: { - } -}) + plugins: [createPersistedState()], + + // IMPORTANT: Be VERY careful when modifying these fields for at least a few reasons: + // * The CMS can reference the fields by name + // * 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. + state, + mutations, + getters, + actions, +}); \ No newline at end of file