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

Merge branch 'feature/CSR-762' into feature/CSR-762-GA

Browse source
This commit is contained in:
Katie 2022-10-03 09:44:59 -04:00
commit 10fea9b8f9
9 changed files with 149 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue
View file

@ -6,7 +6,8 @@
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="selectedDamageLocations"
isRequired
v-model="selectedValues"
validationRules="damage-location-required"
/>
</div>
@ -26,12 +27,11 @@ export default ({
name: "damageLocationQuestion",
data(){
return {
damageOptions: {},
selectedDamageLocations: this.modelValue
damageOptions: Object,
}
},
props: {
modelValue: [Array, String, Number],
props: {
modelValue: Array,
groupName: String,
cmsWidgetName: String,
},
@ -47,6 +47,14 @@ export default ({
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
damageOptionsMap(){
return {
Windshield: true,
@ -69,11 +77,6 @@ export default ({
});
},
},
watch: {
selectedDamageLocations(selectedDamageLocations) {
this.$emit("update:modelValue", selectedDamageLocations);
}
},
components: {
buttonQuestion,
},

28
src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
View file

@ -8,7 +8,7 @@
:answers="answersToDisplay"
:groupName="groupName"
buttonType="listCard"
v-model="selectedReplaceOptions"
v-model="selectedValues"
:validationRules="validationRules"
:suppressError="suppressError"
:isRequired="isRequired"
@ -23,17 +23,16 @@ import store from "@/store";
export default ({
name: "replaceOptionsQuestion",
data() {
data(){
return {
replaceOptions: [],
selectedReplaceOptions: this.modelValue
}
},
props: {
modelValue: [Array, String, Number],
isAvailable: Boolean,
filterByVehicleCategory: Boolean,
groupName: String,
modelValue: [Array, String, Number],
isMultiSelect: Boolean,
validationRules: String,
suppressError: Boolean,
@ -41,15 +40,13 @@ export default ({
isRequired: Boolean,
},
methods: {
initializeComponent(replaceOptions) {
initializeComponent(replaceOptions){
this.replaceOptions = replaceOptions;
},
updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
// ex: BackGlass stationary
if (Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
const selectedAnswer = this.answersToDisplay[0].Name;
this.selectedReplaceOptions = this.isMultiSelect ? [selectedAnswer] : selectedAnswer;
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
this.selectedValues = [this.answersToDisplay[0].Name];
}
},
},
@ -60,6 +57,14 @@ export default ({
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
answersToDisplay(){
const filteredAnswers = Array.isArray(this.answersFromCms)
? this.answersFromCms.filter(ans =>
@ -86,11 +91,8 @@ export default ({
},
shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
if (!shouldDisplayReplaceOptionsQuestion) {
this.selectedReplaceOptions = [];
this.selectedValues = [];
}
},
selectedReplaceOptions(selectedReplaceOptions) {
this.$emit("update:modelValue", selectedReplaceOptions);
}
},
components: {

23
src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue
View file

@ -7,7 +7,7 @@
:groupName="groupName"
buttonType="listButtonHorizontal"
useTextForValue
v-model="numberOfChips"
v-model="selectedValue"
:validationRules="validationRules"
isRequired
/>
@ -19,12 +19,7 @@
import buttonQuestion from "@/common-components/button-question/button-question";
export default ({
name: "windshieldChipCountQuestion",
data() {
return {
numberOfChips: this.modelValue
}
},
name: "windshieldOptions",
props: {
modelValue: [String, Number],
groupName: String,
@ -39,14 +34,18 @@ export default ({
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedValue: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
const numberValue = Number(newValue);
this.$emit("update:modelValue", numberValue);
}
},
},
components: {
buttonQuestion,
},
watch: {
numberOfChips(numberOfChips) {
this.$emit("update:modelValue", numberOfChips);
}
}
})
</script>

42
src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue
View file

@ -1,18 +1,16 @@
<template>
<transition name="fade" mode="out-in">
<div
class="windshield-damage-type-question"
v-if="isAvailable"
aria-live="polite">
<div class="windshield-damage-type-question" v-if="isAvailable" aria-live="polite">
<buttonQuestion
:questionText="questionText"
:answers="answersFromCms"
:groupName="groupName"
buttonType="listCard"
v-model="selectedWindshieldDamageType"
v-model="selectedValues"
:suppressError="suppressError"
:validationRules="validationRules"
isRequired />
isRequired
/>
</div>
</transition>
</template>
@ -20,13 +18,8 @@
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
export default {
export default ({
name: "windshieldDamageTypeQuestion",
data() {
return {
selectedWindshieldDamageType: this.modelValue,
};
},
props: {
modelValue: String,
groupName: String,
@ -36,20 +29,23 @@ export default {
cmsWidgetName: String,
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
answersFromCms() {
return this.getCmsContent(this.cmsWidgetName, "Answers");
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
},
watch: {
selectedWindshieldDamageType(selectedWindshieldDamageType) {
this.$emit("update:modelValue", selectedWindshieldDamageType);
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
},
components: {
buttonQuestion,
},
};
</script>
}
})
</script>

4
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -57,8 +57,8 @@ defineRule("windshield-replace-options-required", required(errorMessages.WINSHIE
defineRule("check-for-repair-and-replace", (selectedWindshieldDamageType, selectedDamageLocations) => {
return selectedWindshieldDamageType.toString() != damageLocationsSelected.REPAIR ||
!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) ||
selectedDamageLocations.length === 1;
(!selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) && !selectedDamageLocations[0]?.includes(damageLocationsSelected.WINDSHIELD)) ||
(selectedDamageLocations.length === 1 && selectedDamageLocations[0].length === 1);
});
defineRule("repair-only", (value) => {
return value.toString() === damageLocationsSelected.REPAIR;

89
src/layouts/vehicle-make/make-question/make-question.vue
View file

@ -1,15 +1,16 @@
<template>
<buttonQuestion
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"
:answers="makes"
groupName="ChooseVehicleMake"
textPosition="text-start"
v-model="selectedMake"
:selectOnKeypress="false"
isRequired />
<buttonQuestion
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"
:answers="makes"
groupName="ChooseVehicleMake"
textPosition="text-start"
v-model="selectedValue"
:selectOnKeypress="false"
isRequired
/>
</template>
<script>
@ -20,40 +21,42 @@ import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.js";
export default {
name: "make-question",
data() {
return {
makes: [],
selectedMake: ""
};
name: "make-question",
data() {
return {
makes: [],
};
},
props: {
modelValue: String,
cmsWidgetName: String,
},
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
props: {
modelValue: String,
cmsWidgetName: String,
selectedValue: {
get: function() {
return this.modelValue
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
}
},
components: {
buttonQuestion,
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_MAKES,
{ year: store.getters.vehicle.year }
);
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
},
},
components: {
buttonQuestion,
},
methods: {
loadInitialData() {
return baseMixin.methods.dispatchStoreAction(
storeActions.GET_VEHICLE_MAKES,
{ year: store.getters.vehicle.year }
);
},
initializeComponent(initialData) {
this.makes = initialData;
},
},
watch: {
selectedMake(selectedMake) {
this.$emit("update:modelValue", selectedMake);
},
initializeComponent(initialData) {
this.makes = initialData;
},
},
};
</script>

16
src/layouts/vehicle-model/model-question/model-question.vue
View file

@ -7,7 +7,7 @@
:answers="models"
groupName="ChooseVehicleModel"
textPosition="text-start"
v-model="selectedModel"
v-model="selectedValue"
:selectOnKeypress="false"
isRequired
/>
@ -25,7 +25,6 @@ export default {
data() {
return {
models: [],
selectedModel: ""
};
},
props: {
@ -36,6 +35,14 @@ export default {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
selectedValue: {
get: function() {
return this.modelValue
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
}
},
components: {
buttonQuestion,
@ -51,10 +58,5 @@ export default {
this.models = initialData;
},
},
watch: {
selectedModel(selectedModel) {
this.$emit("update:modelValue", selectedModel);
}
}
};
</script>

17
src/layouts/vehicle-style/style-question/style-question.vue
View file

@ -7,7 +7,7 @@
:answers="styles"
groupName="ChooseVehicleStyle"
textPosition="text-start"
v-model="selectedStyle"
v-model="selectedValue"
:selectOnKeypress="false"
isRequired
/>
@ -25,16 +25,24 @@ export default {
data() {
return {
styles: [],
selectedStyle: ""
};
},
props: {
modelValue: String,
cmsWidgetName: String,
},
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
selectedValue: {
get: function() {
return this.modelValue
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
}
},
components: {
buttonQuestion,
@ -54,10 +62,5 @@ export default {
this.styles = initialData;
},
},
watch: {
selectedStyle(selectedStyle) {
this.$emit("update:modelValue", selectedStyle);
}
}
};
</script>

48
src/layouts/vehicle-year/year-question/year-question.vue
View file

@ -1,18 +1,16 @@
<template>
<div>
<buttonQuestion
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"
:answers="years"
groupName="ChooseVehicleYear"
textPosition="text-start"
v-model="selectedYear"
:selectOnKeypress="false"
isRequired
/>
</div>
<buttonQuestion
class="radioQuestion"
isOverflowScrollable
selectingInitiatesLoad
:questionText="questionText"
:answers="years"
groupName="ChooseVehicleYear"
textPosition="text-start"
v-model="selectedValue"
:selectOnKeypress="false"
isRequired
/>
</template>
<script>
@ -20,25 +18,32 @@ import buttonQuestion from "@/common-components/button-question/button-question"
// Supporting files
import { storeActions } from "@/constants/store-actions.js";
import baseMixin from "@/mixins/base-mixin.js";
export default {
name: "year-question",
data() {
return {
years: [],
selectedYear: ""
};
},
props: {
modelValue: String,
cmsWidgetName: String,
},
components: {
buttonQuestion
buttonQuestion,
},
computed: {
questionText() {
return this.getCmsContent(this.cmsWidgetName, "QuestionText");
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
},
selectedValue: {
get: function() {
return this.modelValue
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
}
},
methods: {
loadInitialData() {
@ -51,10 +56,5 @@ export default {
this.years = initialData;
},
},
watch: {
selectedYear(selectedYear) {
this.$emit("update:modelValue", selectedYear);
}
}
};
</script>