From 9636d358d8795b2eb442999ded745ce80acfbae4 Mon Sep 17 00:00:00 2001 From: FrankRua Date: Thu, 24 Feb 2022 12:33:20 -0500 Subject: [PATCH 1/9] Map API data to vehicle-parts ds --- ...eTint.svg => Glass-BlueShade-BlueTint.svg} | 0 ...Tint.svg => Glass-BlueShade-BrownTint.svg} | 0 ...yTint.svg => Glass-BlueShade-GrayTint.svg} | 0 ...Tint.svg => Glass-BlueShade-GreenTint.svg} | 0 ...-NoTint.svg => Glass-BlueShade-NoTint.svg} | 0 ...int.svg => Glass-BrownShade-BrownTint.svg} | 0 ...eTint.svg => Glass-GrayShade-BlueTint.svg} | 0 ...Tint.svg => Glass-GrayShade-BrownTint.svg} | 0 ...yTint.svg => Glass-GrayShade-GrayTint.svg} | 0 ...Tint.svg => Glass-GrayShade-GreenTint.svg} | 0 ...Tint.svg => Glass-GreenShade-BlueTint.svg} | 0 ...int.svg => Glass-GreenShade-BrownTint.svg} | 0 ...int.svg => Glass-GreenShade-GreenTint.svg} | 0 ...lueTint.svg => Glass-NoShade-BlueTint.svg} | 0 ...wnTint.svg => Glass-NoShade-BrownTint.svg} | 0 ...nt.svg => Glass-NoShade-DarkBrownTint.svg} | 0 ...int.svg => Glass-NoShade-DaryGrayTint.svg} | 0 ...rayTint.svg => Glass-NoShade-GrayTint.svg} | 0 ...enTint.svg => Glass-NoShade-GreenTint.svg} | 0 ...de-NoTint.svg => Glass-NoShade-NoTint.svg} | 0 ...-Privacy.svg => Glass-NoShade-Privacy.svg} | 0 src/constants/tint-mapper.js | 49 ++++--- src/layouts/vehicle-parts/vehicle-parts.vue | 128 ++++++++---------- 23 files changed, 87 insertions(+), 90 deletions(-) rename src/assets/img/tints/{BackGlass-BlueShade-BlueTint.svg => Glass-BlueShade-BlueTint.svg} (100%) rename src/assets/img/tints/{BackGlass-BlueShade-BrownTint.svg => Glass-BlueShade-BrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-BlueShade-GrayTint.svg => Glass-BlueShade-GrayTint.svg} (100%) rename src/assets/img/tints/{BackGlass-BlueShade-GreenTint.svg => Glass-BlueShade-GreenTint.svg} (100%) rename src/assets/img/tints/{BackGlass-BlueShade-NoTint.svg => Glass-BlueShade-NoTint.svg} (100%) rename src/assets/img/tints/{BackGlass-BrownShade-BrownTint.svg => Glass-BrownShade-BrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GrayShade-BlueTint.svg => Glass-GrayShade-BlueTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GrayShade-BrownTint.svg => Glass-GrayShade-BrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GrayShade-GrayTint.svg => Glass-GrayShade-GrayTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GrayShade-GreenTint.svg => Glass-GrayShade-GreenTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GreenShade-BlueTint.svg => Glass-GreenShade-BlueTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GreenShade-BrownTint.svg => Glass-GreenShade-BrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-GreenShade-GreenTint.svg => Glass-GreenShade-GreenTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-BlueTint.svg => Glass-NoShade-BlueTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-BrownTint.svg => Glass-NoShade-BrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-DarkBrownTint.svg => Glass-NoShade-DarkBrownTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-DaryGrayTint.svg => Glass-NoShade-DaryGrayTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-GrayTint.svg => Glass-NoShade-GrayTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-GreenTint.svg => Glass-NoShade-GreenTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-NoTint.svg => Glass-NoShade-NoTint.svg} (100%) rename src/assets/img/tints/{BackGlass-NoShade-Privacy.svg => Glass-NoShade-Privacy.svg} (100%) diff --git a/src/assets/img/tints/BackGlass-BlueShade-BlueTint.svg b/src/assets/img/tints/Glass-BlueShade-BlueTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BlueShade-BlueTint.svg rename to src/assets/img/tints/Glass-BlueShade-BlueTint.svg diff --git a/src/assets/img/tints/BackGlass-BlueShade-BrownTint.svg b/src/assets/img/tints/Glass-BlueShade-BrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BlueShade-BrownTint.svg rename to src/assets/img/tints/Glass-BlueShade-BrownTint.svg diff --git a/src/assets/img/tints/BackGlass-BlueShade-GrayTint.svg b/src/assets/img/tints/Glass-BlueShade-GrayTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BlueShade-GrayTint.svg rename to src/assets/img/tints/Glass-BlueShade-GrayTint.svg diff --git a/src/assets/img/tints/BackGlass-BlueShade-GreenTint.svg b/src/assets/img/tints/Glass-BlueShade-GreenTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BlueShade-GreenTint.svg rename to src/assets/img/tints/Glass-BlueShade-GreenTint.svg diff --git a/src/assets/img/tints/BackGlass-BlueShade-NoTint.svg b/src/assets/img/tints/Glass-BlueShade-NoTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BlueShade-NoTint.svg rename to src/assets/img/tints/Glass-BlueShade-NoTint.svg diff --git a/src/assets/img/tints/BackGlass-BrownShade-BrownTint.svg b/src/assets/img/tints/Glass-BrownShade-BrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-BrownShade-BrownTint.svg rename to src/assets/img/tints/Glass-BrownShade-BrownTint.svg diff --git a/src/assets/img/tints/BackGlass-GrayShade-BlueTint.svg b/src/assets/img/tints/Glass-GrayShade-BlueTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GrayShade-BlueTint.svg rename to src/assets/img/tints/Glass-GrayShade-BlueTint.svg diff --git a/src/assets/img/tints/BackGlass-GrayShade-BrownTint.svg b/src/assets/img/tints/Glass-GrayShade-BrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GrayShade-BrownTint.svg rename to src/assets/img/tints/Glass-GrayShade-BrownTint.svg diff --git a/src/assets/img/tints/BackGlass-GrayShade-GrayTint.svg b/src/assets/img/tints/Glass-GrayShade-GrayTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GrayShade-GrayTint.svg rename to src/assets/img/tints/Glass-GrayShade-GrayTint.svg diff --git a/src/assets/img/tints/BackGlass-GrayShade-GreenTint.svg b/src/assets/img/tints/Glass-GrayShade-GreenTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GrayShade-GreenTint.svg rename to src/assets/img/tints/Glass-GrayShade-GreenTint.svg diff --git a/src/assets/img/tints/BackGlass-GreenShade-BlueTint.svg b/src/assets/img/tints/Glass-GreenShade-BlueTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GreenShade-BlueTint.svg rename to src/assets/img/tints/Glass-GreenShade-BlueTint.svg diff --git a/src/assets/img/tints/BackGlass-GreenShade-BrownTint.svg b/src/assets/img/tints/Glass-GreenShade-BrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GreenShade-BrownTint.svg rename to src/assets/img/tints/Glass-GreenShade-BrownTint.svg diff --git a/src/assets/img/tints/BackGlass-GreenShade-GreenTint.svg b/src/assets/img/tints/Glass-GreenShade-GreenTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-GreenShade-GreenTint.svg rename to src/assets/img/tints/Glass-GreenShade-GreenTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-BlueTint.svg b/src/assets/img/tints/Glass-NoShade-BlueTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-BlueTint.svg rename to src/assets/img/tints/Glass-NoShade-BlueTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-BrownTint.svg b/src/assets/img/tints/Glass-NoShade-BrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-BrownTint.svg rename to src/assets/img/tints/Glass-NoShade-BrownTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-DarkBrownTint.svg b/src/assets/img/tints/Glass-NoShade-DarkBrownTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-DarkBrownTint.svg rename to src/assets/img/tints/Glass-NoShade-DarkBrownTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-DaryGrayTint.svg b/src/assets/img/tints/Glass-NoShade-DaryGrayTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-DaryGrayTint.svg rename to src/assets/img/tints/Glass-NoShade-DaryGrayTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-GrayTint.svg b/src/assets/img/tints/Glass-NoShade-GrayTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-GrayTint.svg rename to src/assets/img/tints/Glass-NoShade-GrayTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-GreenTint.svg b/src/assets/img/tints/Glass-NoShade-GreenTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-GreenTint.svg rename to src/assets/img/tints/Glass-NoShade-GreenTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-NoTint.svg b/src/assets/img/tints/Glass-NoShade-NoTint.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-NoTint.svg rename to src/assets/img/tints/Glass-NoShade-NoTint.svg diff --git a/src/assets/img/tints/BackGlass-NoShade-Privacy.svg b/src/assets/img/tints/Glass-NoShade-Privacy.svg similarity index 100% rename from src/assets/img/tints/BackGlass-NoShade-Privacy.svg rename to src/assets/img/tints/Glass-NoShade-Privacy.svg diff --git a/src/constants/tint-mapper.js b/src/constants/tint-mapper.js index 1291991f0..0b4d17df9 100644 --- a/src/constants/tint-mapper.js +++ b/src/constants/tint-mapper.js @@ -3,39 +3,39 @@ // Src assumes you have a @/assets/img/tints/, making the final value @/assets/img/tints/{Src} in the markup. // See vehicle-parts for implementation example. const tintMap = { - rear: [ + other: [ // Blue Shade - { name: "blue shade, blue tint", src: "BackGlass-BlueShade-BlueTint.svg" }, - { name: "blue shade, brown tint", src: "BackGlass-BlueShade-BrownTint.svg" }, - { name: "blue shade, gray tint", src: "BackGlass-BlueShade-GrayTint.svg" }, - { name: "blue shade, green tint", src: "BackGlass-BlueShade-GreenTint.svg" }, - { name: "blue shade", src: "BackGlass-BlueShade-NoTint.svg" }, + { name: "blue shade, blue tint", src: "Glass-BlueShade-BlueTint.svg" }, + { name: "blue shade, brown tint", src: "Glass-BlueShade-BrownTint.svg" }, + { name: "blue shade, gray tint", src: "Glass-BlueShade-GrayTint.svg" }, + { name: "blue shade, green tint", src: "Glass-BlueShade-GreenTint.svg" }, + { name: "blue shade", src: "Glass-BlueShade-NoTint.svg" }, // Brown Shade - { name: "brown shade, brown tint", src: "BackGlass-BrownShade-BrownTint.svg" }, + { name: "brown shade, brown tint", src: "Glass-BrownShade-BrownTint.svg" }, // Gray Shade - { name: "gray shade, blue tint", src: "BackGlass-GrayShade-BlueTint.svg" }, - { name: "gray shade, brown tint", src: "BackGlass-GrayShade-BrownTint.svg" }, - { name: "gray shade, gray tint", src: "BackGlass-GrayShade-GrayTint.svg" }, - { name: "gray shade, green tint", src: "BackGlass-GrayShade-GreenTint.svg" }, + { name: "gray shade, blue tint", src: "Glass-GrayShade-BlueTint.svg" }, + { name: "gray shade, brown tint", src: "Glass-GrayShade-BrownTint.svg" }, + { name: "gray shade, gray tint", src: "Glass-GrayShade-GrayTint.svg" }, + { name: "gray shade, green tint", src: "Glass-GrayShade-GreenTint.svg" }, // Green Shade - { name: "green shade, blue tint", src: "BackGlass-GreenShade-BlueTint.svg" }, - { name: "green shade, brown tint", src: "BackGlass-GreenShade-BrownTint.svg" }, - { name: "green shade, green tint", src: "BackGlass-GreenShade-GreenTint.svg" }, + { name: "green shade, blue tint", src: "Glass-GreenShade-BlueTint.svg" }, + { name: "green shade, brown tint", src: "Glass-GreenShade-BrownTint.svg" }, + { name: "green shade, green tint", src: "Glass-GreenShade-GreenTint.svg" }, // Tints Only - { name: "blue tint", src: "BackGlass-NoShade-BlueTint.svg" }, - { name: "brown tint", src: "BackGlass-NoShade-BrownTint.svg" }, - { name: "dark brown tint", src: "BackGlass-NoShade-DarkBrownTint.svg" }, - { name: "dark gray tint", src: "BackGlass-NoShade-DarkGrayTint.svg" }, - { name: "gray tint", src: "BackGlass-NoShade-GrayTint.svg" }, - { name: "green tint", src: "BackGlass-NoShade-GreenTint.svg" }, - { name: "gray tint privacy", src: "BackGlass-NoShade-Privacy.svg" }, + { name: "blue tint", src: "Glass-NoShade-BlueTint.svg" }, + { name: "brown tint", src: "Glass-NoShade-BrownTint.svg" }, + { name: "dark brown tint", src: "Glass-NoShade-DarkBrownTint.svg" }, + { name: "dark gray tint", src: "Glass-NoShade-DarkGrayTint.svg" }, + { name: "gray tint", src: "Glass-NoShade-GrayTint.svg" }, + { name: "green tint", src: "Glass-NoShade-GreenTint.svg" }, + { name: "gray tint privacy", src: "Glass-NoShade-Privacy.svg" }, // No shade or tint - { name: "no shade, no tint", src: "BackGlass-NoShade-NoTint.svg" }, // ??? + { name: "no shade, no tint", src: "Glass-NoShade-NoTint.svg" }, // ??? ], windshield: [ @@ -80,6 +80,11 @@ const tintMap = { // Returns undefined if no items are found. export function getTintImage(glassLocation, colorString) { + // Windshield glass has special images, all other glass uses the same though. + if(glassLocation.toLowerCase() !== 'windshield'){ + glassLocation = 'other'; + } + if (tintMap[glassLocation.toLowerCase()] === undefined) { return ''; } diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 06fa46341..72bf62d9c 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -36,7 +36,6 @@ import { settleAllPromises } from "@/helpers/layout-helper"; - export default { name: "vehicle-parts", async beforeRouteEnter(to, from, next) { @@ -102,80 +101,73 @@ export default { }, computed: { Parts() { - return [{ - glassLocation: "Rear", - glassName: "Stationary", - colorAnswers: [{ - ColorAnswerText: "Green Tint", + const partsData = { + "partsOrQuestions": [{ + "glassName": "Front", + "glassLocation": "Driver", + "parts": [{ + "partNumber": "FD27736GTYN", + "description": "solar, driver side, front", + "color": "Green Tint", + "requiresRecalibration": false, + "requiresCapabilityQuestions": false, + "childParts": null + }, + { + "partNumber": "FD27738GTYN", + "description": "solar, driver side, front, laminated, soundproofing", + "color": "Green Tint", + "requiresRecalibration": false, + "requiresCapabilityQuestions": false, + "childParts": null + } + ], + "partQuestions": null + }, + { + "glassName": "Back", + "glassLocation": "Passenger", + "parts": [{ + "partNumber": "FD27739YPYN", + "description": "solar, passenger side, rear", + "color": "Gray Tint Privacy", + "requiresRecalibration": false, + "requiresCapabilityQuestions": false, + "childParts": null + }], + "partQuestions": null + } + ] + } + + // Map API result data, to vehicle-parts data structure + const mappedData = partsData.partsOrQuestions.map(g => { + return { + glassName: g.glassName, + glassLocation: g.glassLocation, + colorAnswers: g.parts.reduce((arr, p) => { + + arr.push({ + ColorAnswerText: p.color, FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 1 hole", - PartNumber: "test-backglass-green-tint-1-hole", - }, ], - }, - { - ColorAnswerText: "Green Tint", - FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 2 hole", - PartNumber: "test-backglass-green-tint-2-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 3 hole", - PartNumber: "test-backglass-gray-tint-privacy-3-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Backglass - heated glass, solar, 4 hole", - PartNumber: "test-backglass-blue-tint-4-hole", - }, ], - }, - ], - }, - { - glassLocation: "Windshield", - glassName: "Single", - colorAnswers: [{ - ColorAnswerText: "Blue Tint", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield - heated glass, solar, 1 hole", - PartNumber: "test-windshield-blue-tint-1-hole", - }, ], - }, - { - ColorAnswerText: "Blue Tint", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield -heated glass, solar, 2 hole", - PartNumber: "test-blue-tint-windshield-2-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield -heated glass, solar, 3 hole", - PartNumber: "test-gray-tint-privacy-windshield-3-hole", - }, ], - }, - { - ColorAnswerText: "Gray Tint Privacy", - FeatureAnswers: [{ - FeatureAnswerText: "Windshield -heated glass, solar, 4 hole", - PartNumber: "test-brown-tint-windshield-4-hole", - }, ], - }, - ], - }, - ]; + FeatureAnswerText: p.description, + PartNumber: p.partNumber + }] + }); + + return arr; + }, []) + } + }); + + return mappedData; }, }, methods: { arePagePrerequisitesValid(parameters) { // store.getters.damage.isRepair !== null; // parameters.PartsByGlassName.length > 0; - + return true; } }, From 7daa6675522510717f5ab6a3594d14f1a036ebfb Mon Sep 17 00:00:00 2001 From: FrankRua Date: Thu, 24 Feb 2022 15:02:57 -0500 Subject: [PATCH 2/9] state changes --- src/constants/store-actions.js | 8 +++---- src/constants/store-mutations.js | 8 +++---- src/layouts/form-test/form-test.vue | 2 +- .../vehicle-damage/vehicle-damage.spec.js | 2 +- src/layouts/vehicle-damage/vehicle-damage.vue | 2 +- src/layouts/vehicle-make/vehicle-make.spec.js | 4 ++-- src/layouts/vehicle-make/vehicle-make.vue | 4 ++-- .../vehicle-model/vehicle-model.spec.js | 4 ++-- src/layouts/vehicle-model/vehicle-model.vue | 4 ++-- .../part-question/part-question.vue | 3 ++- src/layouts/vehicle-parts/vehicle-parts.vue | 9 ++++--- src/layouts/vehicle-style/vehicle-style.vue | 4 ++-- src/layouts/vehicle-year/vehicle-year.spec.js | 4 ++-- src/layouts/vehicle-year/vehicle-year.vue | 4 ++-- src/store/index.js | 24 +++++++++---------- src/store/store.spec.js | 16 ++++++------- src/ux-components/radio/radio.vue | 2 +- 17 files changed, 54 insertions(+), 50 deletions(-) diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index dddab1d66..0717a3498 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -14,10 +14,10 @@ const storeActions = { GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions", // DEPENDENCY MUTATIONS - RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies", - RESET_DAMAGE_AND_DEPS: "resetDamageAndDependencies", - RESET_REGISTRATION_AND_DEPS: "resetRegistrationAndDependencies", - RESET_PARTS_AND_DEPS: "resetPartsAndDependencies", + RESET_VEHICLE_STATE: "resetVehicleAndDependencies", + RESET_DAMAGE_STATE: "resetDamageAndDependencies", + RESET_REGISTRATION_STATE: "resetRegistrationAndDependencies", + RESET_PARTS_STATE: "resetPartsAndDependencies", }; export { storeActions }; diff --git a/src/constants/store-mutations.js b/src/constants/store-mutations.js index c572c4f69..9034d594f 100644 --- a/src/constants/store-mutations.js +++ b/src/constants/store-mutations.js @@ -16,10 +16,10 @@ const storeMutations = { REMOVE_EVENT_FROM_BUS: "removeEventFromBus", // DEPENDENCY MUTATIONS - RESET_VEHICLE_AND_DEPS: "resetVehicleAndDependencies", - RESET_DAMAGE_AND_DEPS: "resetDamageAndDependencies", - RESET_REGISTRATION_AND_DEPS: "resetRegistrationAndDependencies", - RESET_PARTS_AND_DEPS: "resetPartsAndDependencies", + RESET_VEHICLE_STATE: "resetVehicleState", + RESET_DAMAGE_STATE: "resetDamageState", + RESET_REGISTRATION_STATE: "resetRegistrationState", + RESET_PARTS_STATE: "resetPartsState", }; diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue index f12abb261..774d863a8 100644 --- a/src/layouts/form-test/form-test.vue +++ b/src/layouts/form-test/form-test.vue @@ -144,7 +144,7 @@ export default { }, resetDependentState() { // Invokes - store.dispatch(storeActions.RESET_PARTS_AND_DEPS); + store.dispatch(storeActions.RESET_PARTS_STATE); }, onSubmit(values) { window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2)) diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 519d33457..d01febba1 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -162,7 +162,7 @@ describe("vehicle-damage.vue", () => { wrapper.vm.resetDependentState(); //Assert - expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_AND_DEPS) + expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE) }); }); diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index aa888e14a..2188d4845 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -128,7 +128,7 @@ export default { }, resetDependentState() { // Invokes - store.dispatch(storeActions.RESET_PARTS_AND_DEPS); + store.dispatch(storeActions.RESET_PARTS_STATE); }, backButtonAction() { // route to move backwards diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index b2c4dcaf7..ab04bb1d2 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -223,8 +223,8 @@ describe("vehicle-make.vue", () => { expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null) expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null) - expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS) - expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS) + expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE) + expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE) }); }); diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index c91379318..41c19a64c 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -94,8 +94,8 @@ export default { store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null); // Invokes - store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS); - store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS); + store.dispatch(storeActions.RESET_DAMAGE_STATE); + store.dispatch(storeActions.RESET_REGISTRATION_STATE); }, }, diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js index 7f8f96eb6..4e40a89cb 100644 --- a/src/layouts/vehicle-model/vehicle-model.spec.js +++ b/src/layouts/vehicle-model/vehicle-model.spec.js @@ -208,8 +208,8 @@ describe("vehicle-model.vue", () => { expect(store.commit).toBeCalledWith(storeMutations.UPDATE_CAR_ID, null) expect(store.commit).toBeCalledWith(storeMutations.UPDATE_VEHICLE_CATEGORY, null) - expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_AND_DEPS) - expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_AND_DEPS) + expect(store.dispatch).toBeCalledWith(storeActions.RESET_DAMAGE_STATE) + expect(store.dispatch).toBeCalledWith(storeActions.RESET_REGISTRATION_STATE) }); }); diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue index 02de04c3b..f57429c8b 100644 --- a/src/layouts/vehicle-model/vehicle-model.vue +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -94,8 +94,8 @@ export default { store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, null); // Invokes - store.dispatch(storeActions.RESET_DAMAGE_AND_DEPS); - store.dispatch(storeActions.RESET_REGISTRATION_AND_DEPS); + store.dispatch(storeActions.RESET_DAMAGE_STATE); + store.dispatch(storeActions.RESET_REGISTRATION_STATE); }, }, diff --git a/src/layouts/vehicle-parts/part-question/part-question.vue b/src/layouts/vehicle-parts/part-question/part-question.vue index 9a7e63df6..7046e1b79 100644 --- a/src/layouts/vehicle-parts/part-question/part-question.vue +++ b/src/layouts/vehicle-parts/part-question/part-question.vue @@ -1,7 +1,7 @@ diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index d37ba38d7..d46841b6a 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -18,6 +18,9 @@ export default { return store.dispatch(type, payload); }, + savePageDataToStore(page, data){ + store.commit(storeMutations.UPDATE_PAGE_DATA, { page: page, data: data }); + } }, computed: { storeActions() { diff --git a/src/router/index.js b/src/router/index.js index 0195dd8d9..bd3254d02 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -1,6 +1,7 @@ // Supporting files import { createWebHistory, createRouter } from "vue-router"; import { storeActions } from "@/constants/store-actions"; +import baseMixin from "@/mixins/base-mixin"; import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"; import { routingTable } from "@/router/router-constants/routing-table.js"; import { globalEvents, globalEventTypes } from "@/constants/events"; @@ -55,7 +56,7 @@ const routes = [ .getRoutes() .filter((x) => x.name === to.query.fmgPage)[0].components; - if (!arePagePrerequisitesValid(component, to.params)) { + if (!arePagePrerequisitesValid(component)) { await GoToFunnelStartOn404(next); } @@ -80,7 +81,7 @@ const routes = [ .filter((x) => x.name === routeData[0].name)[0] .components.default(); - if (!arePagePrerequisitesValid(nextComponent, to.params)) { + if (!arePagePrerequisitesValid(nextComponent)) { await GoToFunnelStartOn404(next); } @@ -108,18 +109,18 @@ const router = createRouter({ //---------------------------------------------------------- Router Functions ---------------------------------------------------------- -router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => { - navigate(scenario, currentRoute, false, optionalQuery, optionalParams); +router.navigate = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => { + navigate(scenario, currentRoute, false, optionalQuery, optionalParams, optionalPageData); } -router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}) => { - navigate(scenario, currentRoute, true, optionalQuery, optionalParams); +router.navigateAfterSave = (scenario, currentRoute, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) => { + navigate(scenario, currentRoute, true, optionalQuery, optionalParams, optionalPageData); } // PRIVATE FUNCTIONS // Navigate to the next route, depending on the scenario. -function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {}, optionalParams = {}) { +function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {}, optionalParams = {}, optionalPageData = {}) { if (!scenario) { console.error("No scenario provided. Please review the routing table."); return; @@ -138,6 +139,9 @@ function navigate(scenario, currentRoute, invalidateOnSave, optionalQuery = {}, resetDependentState(currentComponent); } + // Append page data to the store for the NEXT page, if any. It will be an empty object if none is provided. + baseMixin.methods.savePageDataToStore(matchingScenarioMap.destinationFmgPageValue, optionalPageData); + router.push({ name: "root", query: Object.assign(optionalQuery, { @@ -217,8 +221,8 @@ async function GoToFunnelStartOn404(next) { } // Checks arePagePrerequisitesValid on the component passed in. -function arePagePrerequisitesValid(component, parameters = {}) { - return component.default.methods.arePagePrerequisitesValid(parameters); +function arePagePrerequisitesValid(component) { + return component.default.methods.arePagePrerequisitesValid(); } // Reset dependant state on route change. diff --git a/src/router/router-constants/router-parameter-keys.js b/src/router/router-constants/router-parameter-keys.js index 27f6a54b0..0c75eb738 100644 --- a/src/router/router-constants/router-parameter-keys.js +++ b/src/router/router-constants/router-parameter-keys.js @@ -1,5 +1,3 @@ -const routerParameterKeys = { - VEHICLE_PARTS_DATA: "vehiclePartsData", - }; +const routerParameterKeys = { }; export { routerParameterKeys }; \ 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 c5018716c..1e5b9833f 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -76,6 +76,19 @@ const routingTable = [ }, ], }, + { + fmgPageValue: fmgPageValues.VEHICLE_PARTS, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE, + }, + { + scenario: navigationScenarios.SELECTED_PARTS, + destinationFmgPageValue: fmgPageValues.QUOTE, + }, + ], + }, ]; export { routingTable }; diff --git a/src/store/index.js b/src/store/index.js index 24cd4ef24..619f4a950 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -27,12 +27,12 @@ export const state = { }, lineItems:{ glassParts: null, - childParts: null, otherParts: null } }, applicationUser: { eventBus: [], + pageData: {} }, } @@ -75,7 +75,12 @@ export const mutations = { updateGlassToReplace(state, glassToReplace){ state.order.damage.glassToReplace = glassToReplace; }, - + updateParts(state, partsData){ + state.order.lineItems.glassParts = partsData; + }, + updatePageData(state, pageData){ + state.applicationUser.pageData[pageData.page] = pageData.data; + }, // EVENT BUS MUTATIONS addEventToBus(state, event) { @@ -136,7 +141,10 @@ export const getters = { }, eventBus: (state) => state.applicationUser.eventBus, damage: (state) => state.order.damage, - lineItems: (state) => state.order.lineItems + lineItems: (state) => state.order.lineItems, + pageData: (state) => (page) => { + return state.applicationUser.pageData[page]; + } } // Export Actions From 0ab33965022c703df06c40059a1ecd8735260358 Mon Sep 17 00:00:00 2001 From: FrankRua Date: Fri, 25 Feb 2022 15:58:49 -0500 Subject: [PATCH 7/9] rename var --- src/layouts/vehicle-parts/vehicle-parts.vue | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 3bb3b9f41..f6d99bcf4 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -11,7 +11,7 @@ -
+
@@ -108,7 +108,7 @@ export default { alert, }, computed: { - Parts() { + PartsForQuestions() { const partsData = store.getters.pageData(this.$route.query.fmgPage); // Map API result data, to vehicle-parts data structure @@ -131,6 +131,11 @@ export default { return mappedData; }, + + PartsFromApi() { + return store.getters.pageData(fmgPageValues.VEHICLE_PARTS); + } + }, methods: { arePagePrerequisitesValid() { @@ -149,6 +154,7 @@ export default { }, forwardButtonAction() { + const p = this.PartsFromApi; const pickedParts = ''; } From 62fbdd916b73271b5162de0ad281acceba4935ef Mon Sep 17 00:00:00 2001 From: FrankRua Date: Sun, 27 Feb 2022 14:56:05 -0500 Subject: [PATCH 8/9] Match selected parts to API parts --- src/layouts/vehicle-parts/vehicle-parts.vue | 36 +++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index f6d99bcf4..86936637d 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -154,8 +154,40 @@ export default { }, forwardButtonAction() { - const p = this.PartsFromApi; - const pickedParts = ''; + + // Temporary solution to prevent the user from going forward if they have not selected anything. + // will be replaced by validation in the future. + if(Object.keys(this.glassParts).length === 0) { + throw new Error("No parts selected"); + } + + const selectedGlassPartNumbers = []; + const matchedParts = []; + + // Compile all selected parts from the page. + for (let [key, value] of Object.entries(this.glassParts)) { + for (let [glassKey, glassValue] of Object.entries(value)) { + selectedGlassPartNumbers.push(glassValue[0]); + } + } + + // Match them to the parts from the API. + for (let [key, value] of Object.entries(this.PartsFromApi.partsOrQuestions)) { + for (let [partKey, partValue] of Object.entries(value.parts)) { + const currentPart = this.PartsFromApi.partsOrQuestions[key].parts[partKey]; + const isMatched = selectedGlassPartNumbers.some(p => p === currentPart.partNumber); + + if (isMatched) { + matchedParts.push(currentPart); + } + } + } + + // If no parts could be matched, throw an error. + if(matchedParts.length === 0) { + throw new Error("Could not match any parts to the selected parts"); + } + } }, From 0402cc720f40c2769cb6714de9a28335d49f35d2 Mon Sep 17 00:00:00 2001 From: FrankRua Date: Mon, 28 Feb 2022 10:25:06 -0500 Subject: [PATCH 9/9] naibagte forward --- src/layouts/vehicle-parts/vehicle-parts.vue | 26 ++++++++------------- 1 file changed, 10 insertions(+), 16 deletions(-) diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 86936637d..dd591905a 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -33,16 +33,12 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; import alert from "@/ux-components/alert/alert"; // Supporting Files -import { - fetchCmsContentForPage -} from "@/helpers/cms-content-helper"; -import { - settleAllPromises -} from "@/helpers/layout-helper"; +import {fetchCmsContentForPage} from "@/helpers/cms-content-helper"; +import {settleAllPromises} from "@/helpers/layout-helper"; +import {fmgPageValues} from "@/router/router-constants/fmgPage-values"; +import {storeMutations} from "@/constants/store-mutations"; import store from "@/store"; -import { - fmgPageValues -} from "@/router/router-constants/fmgPage-values"; + export default { name: "vehicle-parts", @@ -154,13 +150,6 @@ export default { }, forwardButtonAction() { - - // Temporary solution to prevent the user from going forward if they have not selected anything. - // will be replaced by validation in the future. - if(Object.keys(this.glassParts).length === 0) { - throw new Error("No parts selected"); - } - const selectedGlassPartNumbers = []; const matchedParts = []; @@ -188,6 +177,11 @@ export default { throw new Error("Could not match any parts to the selected parts"); } + // Save parts to the store. + store.commit(storeMutations.UPDATE_PARTS, matchedParts); + + // Navigate to the next page. + } },