diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 80f9c1a4a..fe58bd29e 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -9,8 +9,8 @@ {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }} -
-
+
+
-
-
- -
+
+
+
+
@@ -58,7 +57,8 @@ import { errorMessages } from "@/constants/error-messages"; // import { ErrorMessage } from "vee-validate"; defineRule("replace-options-required", required(errorMessages.OPTION_REQUIRED)); -defineRule("part-required", required(errorMessages.OPTION_REQUIRED)); +// defineRule("part-required", required(errorMessages.OPTION_REQUIRED)); +defineRule(`${this.glassLocation}-${this.glassName}-part-required`, required(errorMessages.OPTION_REQUIRED)); export default { name: "glass-part-question", @@ -78,6 +78,7 @@ export default { // validationRules: String, }, mounted() { + // this.setAllValidationRules(); this.LoadPreselectedValues(); }, components: { @@ -108,15 +109,26 @@ export default { return tintOptions; }, - selectedPart: { - get: function () { - return this.modelValue; + selectedPartNumber: { + get() { + console.log(this.modelValue) + return this.modelValue?.partNumber; }, - set: function (newValue) { - this.$emit("update:modelValue", newValue); + set(newValue) { + console.log("setting") + console.log(newValue) + + this.$emit("update:modelValue", this.partsForSelectedTint.filter(part => part.partNumber == newValue)[0]); }, }, + partsForSelectedTint() { + return this.PartDataFromApi.partsOrQuestions.filter(dataForGlassLocationAndName => + dataForGlassLocationAndName.glassName == this.glassName && + dataForGlassLocationAndName.glassLocation == this.glassLocation)[0] + .parts.filter(part => part.color == this.selectedTint); + }, + // Creates a map of the feature list data in the correct Name/Value // format for the button-question component. featureListData() { @@ -176,34 +188,47 @@ export default { // Reset selections when tint changes for the same glass to ensure proper selection. // Also checks if only a single part is present for the tint. ResetTintAndPartSelections() { - this.selectedTint = ""; - this.selectedPart = {}; + console.log("Resetting!") + // this.selectedTint = ""; + this.selectedPartNumber = null; this.AutoSelectIfSinglePart(); }, // Check if only a single part is present for the tint and set the v-model if it is. AutoSelectIfSinglePart() { - // Check if the selected tint only has a single feature - Object.keys(this.PartDataFromApi.partsOrQuestions ?? {}).forEach( - (key) => { - const currentGlassSelection = - this.PartDataFromApi.partsOrQuestions[key]; + console.log("Autoselecting, my dear") + console.log(this.PartDataFromApi.partsOrQuestions) + console.log(this.glassName) + console.log(this.glassLocation) + console.log(this.selectedTint) + console.log(this.partsForSelectedTint) - if ( - currentGlassSelection.glassName === this.glassName && - currentGlassSelection.glassLocation === - this.glassLocation - ) { - if (currentGlassSelection.parts.length === 1) { - this.selectedPart = { - [currentGlassSelection.glassLocation]: [ - currentGlassSelection.parts[0].partNumber, - ], - }; - } - } - } - ); + if (this.partsForSelectedTint?.length == 1) { + console.log("One!") + this.selectedPartNumber = this.partsForSelectedTint[0].partNumber; + console.log(this.selectedPartNumber) + } + + // this.$nextTick() + console.log(this.selectedPartNumber) + + // Check if the selected tint only has a single feature + // Object.keys(this.PartDataFromApi.partsOrQuestions ?? {}).forEach( + // (key) => { + // const currentGlassSelection = + // this.PartDataFromApi.partsOrQuestions[key]; + + // if ( + // currentGlassSelection.glassName === this.glassName && + // currentGlassSelection.glassLocation === + // this.glassLocation + // ) { + // if (currentGlassSelection.parts.length === 1) { + // this.selectedPartNumber = currentGlassSelection.parts[0].partNumber + // } + // } + // } + // ); }, // Loads the preselected values from the store. @@ -211,12 +236,10 @@ export default { this.$nextTick(() => { if (this.modelValue !== undefined) { // Populate button-question model-value if parts data already exists in VueX - const alreadyPopulatedPartsData = - this.$store.getters.lineItems.glassParts; + const alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts; Object.keys(alreadyPopulatedPartsData).forEach((key) => { - const partNumber = - alreadyPopulatedPartsData[key].partNumber; + const partNumber = alreadyPopulatedPartsData[key].partNumber; const tintColor = alreadyPopulatedPartsData[key].color; Object.keys(this.modelValue).forEach((key) => { @@ -233,10 +256,20 @@ export default { } }); }, + // setAllValidationRules() { + // console.log("SETTING VALIDATION RULES") + // console.log(this.PartDataFromApi.partsOrQuestions) + // this.PartDataFromApi.partsOrQuestions.forEach(part => { + // console.log(`${this.glassLocation}-${this.glassName}-${this.selectedTint}-part-required`) + // defineRule(`${this.glassLocation}-${this.glassName}-part-required`, required(errorMessages.OPTION_REQUIRED)); + // }) + // } }, watch: { - selectedTint(newTint, previousTint) { - this.selectedPart = null; + selectedTint() { + console.log("watch me") + this.selectedPartNumber = null; + this.AutoSelectIfSinglePart() } } }; diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue index 77d57d0d7..79c96c345 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.vue +++ b/src/layouts/vehicle-parts/vehicle-parts.vue @@ -21,12 +21,10 @@
- -
+{{ glassParts }} +
-
-
-
+
value).length === 0; }, - PartsForQuestions() { + PartsOrQuestions() { const partsData = this.PartsFromApi; // Map API result data, to vehicle-parts data structure @@ -164,26 +162,35 @@ methods: { // Match them to the parts from the API. this.PartsFromApi.partsOrQuestions.forEach(part => { - const selectedPartNumberForGlassLocationAndName = this.glassParts[`${part.glassLocation}-${part.glassName}`]; - const selectedPartData = part.parts.filter(part => part.partNumber == selectedPartNumberForGlassLocationAndName); + const selectedPartForGlassLocationAndName = this.glassParts[`${part.glassLocation}-${part.glassName}`]; + console.log(part) + console.log(this.glassParts) + console.log(`${part.glassLocation}-${part.glassName}`) + console.log(selectedPartForGlassLocationAndName) + const selectedPartData = part.parts.filter(part => selectedPartForGlassLocationAndName && part.partNumber == selectedPartForGlassLocationAndName?.partNumber)[0]; - matchedParts.push(selectedPartData[0]); + if (selectedPartData) + matchedParts.push(selectedPartData); }) + console.log(matchedParts) + // If no parts could be matched, throw an error. - if (matchedParts.length === 0) { + if (matchedParts.length !== this.PartsFromApi.length) { this.$refs.funnelFooter.removeLoader(); throw new Error("Could not match any parts to the selected parts"); } + this.$refs.funnelFooter.removeLoader(); + // Save parts to the store. store.commit(storeMutations.UPDATE_GLASS_PARTS, matchedParts); - // // Navigate to the next page. - // this.$router.navigateAfterSave( - // this.navigationScenarios.SELECTED_PARTS, - // this.$route - // ); + // Navigate to the next page. + this.$router.navigateAfterSave( + this.navigationScenarios.SELECTED_PARTS, + this.$route + ); }, resetDependentState() { @@ -193,7 +200,7 @@ methods: { LoadInitialPartsData() { const partsData = this.PartsFromApi; const alreadyPopulatedPartsData = this.$store.getters.lineItems.glassParts === null ? {} : this.$store.getters.lineItems.glassParts; - + partsData.partsOrQuestions.map((g) => { // If the part is already populated, use the value from the store and populate the v-model. Object.keys(alreadyPopulatedPartsData).forEach((key) => { @@ -206,7 +213,7 @@ methods: { } }); }); - }); + }); }, }, mounted() { diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 316977db1..120194e34 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -1,7 +1,7 @@