From 200b4bb141cfb497c8e358f725a87be675a18018 Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Tue, 20 Sep 2022 10:26:30 -0400 Subject: [PATCH 01/16] started nav-button --- .../nav-button/nav-button.vue | 29 +++++++++++++++++++ src/global-methods.spec.js | 22 ++++++++++++++ src/layouts/welcome-page/welcome-page.vue | 9 ++++-- src/router/index.js | 2 +- src/router/router-constants/routing-table.js | 4 +-- 5 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 src/common-components/nav-button/nav-button.vue create mode 100644 src/global-methods.spec.js diff --git a/src/common-components/nav-button/nav-button.vue b/src/common-components/nav-button/nav-button.vue new file mode 100644 index 00000000..6abf0d87 --- /dev/null +++ b/src/common-components/nav-button/nav-button.vue @@ -0,0 +1,29 @@ + + + + + \ No newline at end of file diff --git a/src/global-methods.spec.js b/src/global-methods.spec.js new file mode 100644 index 00000000..26546be1 --- /dev/null +++ b/src/global-methods.spec.js @@ -0,0 +1,22 @@ +import axios from 'axios'; +import './global-methods.js'; + + +/* +jest.mock('axios'); + +test('should fetch users', () => { + const users = [{name: 'Bob'}]; + const resp = {data: users}; + axios.get.mockResolvedValue(resp); + + // or you could use the following depending on your use case: + // axios.get.mockImplementation(() => Promise.resolve(resp)) + + return Users.all().then(data => expect(data).toEqual(users)); +}); +*/ + +test('adds 1 + 2 to equal 3', () => { + expect(1 + 2).toBe(3); + }); \ No newline at end of file diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue index 63060130..1b543e5b 100644 --- a/src/layouts/welcome-page/welcome-page.vue +++ b/src/layouts/welcome-page/welcome-page.vue @@ -1,11 +1,16 @@ \ No newline at end of file diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 166c8f50..7056f85b 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -1,5 +1,5 @@ diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue index fa0c88dd..43d7bbc0 100644 --- a/src/layouts/welcome-page/welcome-page.vue +++ b/src/layouts/welcome-page/welcome-page.vue @@ -1,7 +1,8 @@ \ No newline at end of file diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue index 43d7bbc0..014cdb12 100644 --- a/src/layouts/welcome-page/welcome-page.vue +++ b/src/layouts/welcome-page/welcome-page.vue @@ -12,7 +12,7 @@ export default { name: "welcome-page", components: { navButton }, - data: () => { + data() { return { navigationScenarios, } diff --git a/src/router/index.js b/src/router/index.js index 5fb60cad..2055226c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,9 +1,10 @@ import { createWebHistory, createRouter } from "vue-router"; -import { lazyLoadComponent } from "./dynamic-routing/component-loader"; -import { endpoints } from "../constants/mock-endpoints"; +import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader"; +import { endpoints } from "@/constants/mock-endpoints"; import globalMethods from "@/global-methods"; import {issPageValues} from '@/router/router-constants/issPage-values'; import { routingTable } from "@/router/router-constants/routing-table"; +import { useMainStore } from '@/store'; const routes = [ { @@ -79,15 +80,21 @@ async function GetRouteInfoFromPageName(pageName) { return routeData; }; +router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => { + + navigate(scenario, currentRoute, false, optionalQuery, optionalParams); + + } + // Navigate to the next route, depending on the scenario. -router.navigate = async function (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) { +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 = router.getNavigationMap(scenario, currentRoute); + const matchingScenarioMap = getNavigationMap(scenario, currentRoute); if (!matchingScenarioMap){ console.error("No matching scenario found. Please review the routing table."); @@ -124,10 +131,10 @@ function navigateToUrl(url, optionalQuery = {}) { }; // Get navigation map depending on the scenario and the current 'page' you're on. -router.getNavigationMap = function (scenario, currentRoute) { +function getNavigationMap (scenario, currentRoute) { const issPageValue = currentRoute.query.issPage; try { - const matchedQueryValue = routingTable() + const matchedQueryValue = routingTable(useMainStore()) .filter( (item) => item.issPageValue === issPageValue && diff --git a/src/router/index.spec.js b/src/router/index.spec.js deleted file mode 100644 index e0a63e21..00000000 --- a/src/router/index.spec.js +++ /dev/null @@ -1,23 +0,0 @@ -import router from "@/router" - - -describe("router getNavigationMap", () => { - test("should return correct destinationUrl for welcome-page and CLICKED_TEST scenario", function() { - const currentRoute = { query: {issPage: "welcome-page"}}; - expect(router.getNavigationMap("CLICKED_TEST", currentRoute)).toEqual({"destinationUrl": "https://www.google.com", "scenario": "CLICKED_TEST"}); - }); - - test("should return undefined with bad issPage", function() { - const currentRoute = { query: {issPage: "badRoute"}}; - expect(router.getNavigationMap("CLICKED_TEST", currentRoute)).toBeUndefined; - }); - - test("should return undefined with missing scenario", function() { - const currentRoute = { query: {issPage: "welcome-page"}}; - expect(router.getNavigationMap("MISSING_SCENARIO", currentRoute)).toBeUndefined; - }); -}); - - - - diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 8b00f783..f951deaa 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -2,7 +2,7 @@ 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() { +const routingTable = function(store) { return [ { issPageValue: issPageValues.VEHICLE_YEAR, From bf72d0f0cc237530e8af034228c5b45aecad1774 Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Fri, 23 Sep 2022 17:23:40 -0400 Subject: [PATCH 12/16] fixed transition --- src/App.vue | 9 ++++----- src/common-components/nav-button/nav-button.vue | 2 ++ src/layouts/error-404/error-404.vue | 2 ++ src/layouts/vehicle-year/vehicle-year.vue | 4 +++- src/layouts/welcome-page/welcome-page.vue | 4 +++- 5 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/App.vue b/src/App.vue index e9f95ce8..2284217c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,15 +1,14 @@ + \ No newline at end of file diff --git a/src/common-components/nav-button/nav-button.vue b/src/common-components/nav-button/nav-button.vue index 000a3432..209d62b5 100644 --- a/src/common-components/nav-button/nav-button.vue +++ b/src/common-components/nav-button/nav-button.vue @@ -26,6 +26,8 @@ padding: 2.5px; border-radius: 5px; min-width: 70px; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + font-size: 14px; } .nav-text { diff --git a/src/layouts/error-404/error-404.vue b/src/layouts/error-404/error-404.vue index 15393cd8..7b5f6c52 100644 --- a/src/layouts/error-404/error-404.vue +++ b/src/layouts/error-404/error-404.vue @@ -1,5 +1,7 @@ \ No newline at end of file diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue index 9c056bf0..c205b19a 100644 --- a/src/layouts/welcome-page/welcome-page.vue +++ b/src/layouts/welcome-page/welcome-page.vue @@ -2,23 +2,17 @@

Welcome Page Placeholder


- - + +
diff --git a/src/main.js b/src/main.js index 74f6b847..550d42a5 100644 --- a/src/main.js +++ b/src/main.js @@ -5,12 +5,14 @@ import router from './router'; import "../node_modules/bootstrap/dist/js/bootstrap.js"; import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'; import { useMainStore } from './store'; +import baseMixin from "@/mixins/base-mixin.js"; const vueApp = createApp(App); const pinia = createPinia(); pinia.use(piniaPluginPersistedstate); vueApp.use(pinia); vueApp.config.globalProperties.$store = useMainStore(); +vueApp.mixin(baseMixin); vueApp.use(router); vueApp.mount("#app"); From 98b872a81a1b00e65faa6911d45ffa9e7d958434 Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Mon, 26 Sep 2022 09:46:55 -0400 Subject: [PATCH 14/16] refactored error handling around getNavigationMap --- src/router/index.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/src/router/index.js b/src/router/index.js index 2055226c..ab5cae25 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -99,10 +99,7 @@ function navigate (scenario, currentRoute, optionalQuery = {}, optionalParams = if (!matchingScenarioMap){ console.error("No matching scenario found. Please review the routing table."); return; - } else if (matchingScenarioMap && matchingScenarioMap.error ) { - console.error(matchingScenarioMap.error); - return; - } + } if (matchingScenarioMap.destinationIssPageValue) { // We're always pushing the same path, just changing query strings. Make sure our optional query strings get combined with our issPage one. @@ -146,7 +143,8 @@ function getNavigationMap (scenario, currentRoute) { return maps ? maps.filter(x => x.filter === true || x.filter === undefined)[0] : undefined; } catch (e) { - return { error: e }; + console.error(e); + return undefined; } }; From fada12ae814979c5bb91d3cd72fb3177177fb6cb Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Mon, 26 Sep 2022 09:52:20 -0400 Subject: [PATCH 15/16] removed commented notes to myself and updated to @ notation --- src/global-methods.spec.js | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/src/global-methods.spec.js b/src/global-methods.spec.js index 980ed1ab..a4c46989 100644 --- a/src/global-methods.spec.js +++ b/src/global-methods.spec.js @@ -1,20 +1,4 @@ import axios from 'axios'; -import './global-methods.js'; - - -/* -jest.mock('axios'); - -test('should fetch users', () => { - const users = [{name: 'Bob'}]; - const resp = {data: users}; - axios.get.mockResolvedValue(resp); - - // or you could use the following depending on your use case: - // axios.get.mockImplementation(() => Promise.resolve(resp)) - - return Users.all().then(data => expect(data).toEqual(users)); -}); -*/ +import '@/global-methods.js'; test.todo("Need to add some tests here"); \ No newline at end of file From 888022240bffcbe44a10257c47a082806a969dea Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Mon, 26 Sep 2022 10:29:38 -0400 Subject: [PATCH 16/16] moved fade-on-route-transition class to a parent div --- src/layouts/vehicle-year/vehicle-year.vue | 6 ++++-- src/layouts/welcome-page/welcome-page.vue | 10 ++++++---- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 25b259d9..29d5a40b 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -1,7 +1,9 @@ diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue index c205b19a..b97c58bc 100644 --- a/src/layouts/welcome-page/welcome-page.vue +++ b/src/layouts/welcome-page/welcome-page.vue @@ -1,9 +1,11 @@