jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

unmatched vehicle and validation

Browse source 
unmatched vehicle and validation
This commit is contained in:
hiteshkumar87 2023-08-30 13:18:02 +05:30
parent a462d768c0
commit 27fc4162b4
3 changed files with 29 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/digital-components/dropdown-question/dropdown-question.vue
View file

@ -26,7 +26,7 @@
{{ value }}
</option>
</select>
<div v-show="errorMessage" class="row mt-2 form-test-error">
<div v-show="errorMessage && this.disableValidation" class="row mt-2 form-test-error">
<span aria-atomic="true" aria-live="polite">{{ errorMessage }}</span>
</div>
</div>
@ -56,6 +56,11 @@ export default {
required: false,
default: false,
},
disableValidationIfElementDisabled: {
type: Boolean,
required: false,
default: false,
},
},
setup(props) {
const uuid = uuidv4();
@ -110,6 +115,9 @@ export default {
this.$emit("update:modelValue", newValue);
},
},
disableValidation() {
return this.disableValidationIfElementDisabled ? !this.isDisabled : true;
},
},
watch: {
selectedOption(newValue) {

6
src/layouts/vehicle/vehicle-question/vehicle-question.vue
View file

@ -1,5 +1,9 @@
<template>
<dropdownQuestion disableAutoFill v-model="selectedValue" :valueAsKey="true" />
<dropdownQuestion
disableAutoFill
v-model="selectedValue"
:valueAsKey="true"
:disableValidationIfElementDisabled="true" />
</template>
<script>

53
src/layouts/vehicle/vehicle.vue
View file

@ -29,7 +29,6 @@
:isDisabled="!makeOptions.length"
:options="makeOptions"
cmsWidgetName="VehicleMakeQuestion"
v-validate="{ rules: 'required', disabled: !makeOptions.length }"
validationRules="make-required"
placeHolderText="Select make"
inputId="makeQuestionField" />
@ -41,7 +40,6 @@
cmsWidgetName="VehicleModelQuestion"
:isDisabled="!modelOptions.length"
:options="modelOptions"
v-validate="{ rules: 'required', disabled: !modelOptions.length }"
validationRules="model-required"
placeHolderText="Select model"
inputId="modelQuestionField" />
@ -53,7 +51,6 @@
cmsWidgetName="VehicleStyleQuestion"
:isDisabled="!styleOptions.length"
:options="styleOptions"
v-validate="{ rules: 'required', disabled: !styleOptions.length }"
validationRules="style-required"
placeHolderText="Select style"
inputId="styleQuestionField" />
@ -102,34 +99,10 @@ import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.js";
//define validation rules
defineRule("year-required", (value) => {
if (!value || !value.length ) {
return errorMessages.YEAR_REQUIRED;
}
return true;
});
defineRule("make-required", (value) => {
if (!value || !value.length) {
return errorMessages.MAKE_REQUIRED;
}
return true;
});
defineRule("model-required", (value) => {
if (!value || !value.length) {
return errorMessages.MODEL_REQUIRED;
}
return true;
});
defineRule("style-required", (value) => {
if (!value || !value.length) {
return errorMessages.STYLE_REQUIRED;
}
return true;
});
// defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
// defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
// defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
// defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
defineRule("year-required", required(errorMessages.YEAR_REQUIRED));
defineRule("make-required", required(errorMessages.MAKE_REQUIRED));
defineRule("model-required", required(errorMessages.MODEL_REQUIRED));
defineRule("style-required", required(errorMessages.STYLE_REQUIRED));
export default {
name: "vehicle",
@ -141,7 +114,7 @@ export default {
selectedStyle: this.selectedStylefromStore(),
carId: null,
category: null,
imageUrl: null,
imageUrl: this.getImagefromStore(),
imageVifNumber: null,
imageVifColor: null,
yearOptions: [],
@ -149,7 +122,6 @@ export default {
modelOptions: [],
styleOptions: [],
displayGeneric: this.displayGenericFromStore(),
unmatchedVehicleIcon: false,
};
},
@ -319,17 +291,19 @@ export default {
this.imageUrl = result?.data.imageUrl;
this.imageVifNumber = result?.data.imageVifNumber;
this.imageVifColor = result?.data.imageVifColor;
if (this.imageUrl == null) {
this.displayGeneric = false;
this.unmatchedVehicleIcon = true;
} else this.unmatchedVehicleIcon = false;
if (this.imageUrl == null) this.displayGeneric = false;
} else {
this.imageUrl = null;
this.displayGeneric = true;
}
},
},
computed: {
unmatchedVehicleIcon() {
if (this.imageUrl == null) return true;
else return false;
},
},
methods: {
getVehicle(year, make, model, style) {
return this.dispatchStoreAction(this.storeActions.GET_VEHICLE, {
@ -410,6 +384,9 @@ export default {
model: model,
});
},
getImagefromStore() {
return store.getters.vehicle.imageUrl;
},
},
components: {