- Select a year to get started -
-What year is your vehichle?
-This is default body copy font size/weight
+This is small body copy using .small class
This is also small using <small> tag
Not found
-Not Found .... :(
+ \ No newline at end of file diff --git a/src/router/dynamic-routing/component-loader.js b/src/router/dynamic-routing/component-loader.js index f2df9e1d6..fc8a02427 100644 --- a/src/router/dynamic-routing/component-loader.js +++ b/src/router/dynamic-routing/component-loader.js @@ -1,3 +1,3 @@ export function lazyLoadComponent(componentName) { - return () => import(`@/layouts/${componentName}.vue`); // /selectModel/SelectModel + return () => import(`@/layouts/${componentName}/${componentName}.vue`); // /src/layouts/folder/component.vue } diff --git a/src/router/index.js b/src/router/index.js index 367b6e2aa..0d4279df8 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,8 +1,8 @@ import { createWebHistory, createRouter } from "vue-router"; import { storeActions } from "@/constants/storeActions.js"; import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"; +import ComponentTest from "@/layouts/componentTest/componentTest.vue"; import NotFound from "@/layouts/notFound/notFound.vue"; -import Home from "@/layouts/home/home.vue"; import store from "@/store"; import selectYear from "@/layouts/selectYear/selectYear.vue"; import selectMake from "@/layouts/selectMake/selectMake.vue"; @@ -12,14 +12,59 @@ import selectDamage from "@/layouts/selectDamage/selectDamage.vue"; const routes = [ { - path: "/not-found", - name: "NotFound", + path: '/:pathMatch(.*)*', component: NotFound, + name: "NotFound" + }, + { + path: "/component-test", // This is a temporary route for testing. + name: "ComponentTest", + component: ComponentTest, }, { path: "/", - Name: "Home", - component: Home, + beforeEnter(to, from, next) { + + // If we have no query string, or we don't have the FmgPage query string. + if (to.query.fmgPage === undefined) { + RetainStructureAndGoTo404(to, next); + } else { + + // If we already have our route, go to it. + if (router.hasRoute(to.query.fmgPage)) { + return next({ + name: to.query.fmgPage, + query: to.query, + }); + } + + // Get route info for the given url. Names will have a 1:1 relationship with names in the Cms. + GetRouteInfoFromPageName(to.query.fmgPage).then((routeData) => { + + // Add our dynamic route. + router.addRoute({ + 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, { fmgPage: routeData[0].name }) + }); + + }) + .catch((error) => { + + // If we can't find the route, go to the 404 page. + RetainStructureAndGoTo404(to, next); + + console.log("error:"); + console.log(error); + }); + } + }, }, { path: "/select-year", @@ -53,45 +98,12 @@ const router = createRouter({ routes, }); -router.beforeEach(async (to, from, next) => { - console.log(to); - console.log(from); - next(); -}); - -// Go to route if page exists in the CMS. -// If not, go to 404 page. -function NavigateToDynamicCmsRoute(to, next) { - let doesRouteResolve = router.resolve(to.path).matched.length > 0; - - if (!doesRouteResolve) { - GetRouteInfoForUrl(to.path) - .then((routeData) => { - // Add our dynamic route. - router.addRoute({ - path: routeData[0].path, - name: routeData[0].name, - component: routeData[0].component, - }); - - next(to.fullPath); - }) - .catch((error) => { - // Check status code, go to 404 page if 404. - console.log(error); - }); - } else { - next(); // Home (/) and NotFound (/not-found) will always resolve. - } -} - -// Get the route info for the given url. -// This will hit the content service and eventually the Cms. -// If the route is not found, reject Promise. -function GetRouteInfoForUrl(url) { +// Get route information by page name. +// This will reach out to the Cms and there is a 1:1 relationship between page names and route names. +function GetRouteInfoFromPageName(pageName) { return new Promise((resolve, reject) => { store - .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { relativeUrl: url }) + .dispatch(storeActions.GET_ROUTE_INFO_ACTION, { pageName: pageName }) .then((response) => { // Add our route data and return our array. let jsonFromResponse = JSON.parse(response.data.Result); @@ -106,6 +118,7 @@ function GetRouteInfoForUrl(url) { }); resolve(routeData); + }) .catch((error) => { reject(error); @@ -113,4 +126,14 @@ function GetRouteInfoForUrl(url) { }); } +// Go to our 404 page but retain our structure when we go there (path, queryString, hash). +function RetainStructureAndGoTo404(to, next) { + next({ + name: 'NotFound', + params: { pathMatch: to.path.split('/').slice(1) }, + query: to.query, + hash: to.hash + }); +} + export default router; diff --git a/src/styles/commonStyles.scss b/src/styles/commonStyles.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/styles/uxStyles.scss b/src/styles/uxStyles.scss new file mode 100644 index 000000000..e69de29bb diff --git a/vue.config.js b/vue.config.js index 1a6ac825d..f26ca4dab 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,3 +1,5 @@ +process.env.VUE_APP_CONSUMER_API_GATEWAY = "https://consumerapidev.safelite.com"; + module.exports = { outputDir: "dist/fmg", publicPath: "/fmg", diff --git a/vue.release.config.js b/vue.release.config.js index 5232721e5..d0be4bb59 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -1,3 +1,5 @@ +process.env.VUE_APP_CONSUMER_API_GATEWAY = "__VUE_APP_CONSUMER_API_GATEWAY__"; + module.exports = { outputDir: "dist/fmg", publicPath: "/fmg",