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

CSR-762 Preselects chips

Browse source
This commit is contained in:
Katie 2022-09-20 10:07:02 -04:00
parent ce46cf4ea6
commit 1a0f71f36f
7 changed files with 109 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common-components/input-button-wrapper/input-button-wrapper.vue
View file

@ -205,6 +205,7 @@ export default {
this.valueToEmit = newValue;
} else {
console.log("not multi")
this.valueToEmit = this.value;
}
@ -237,10 +238,11 @@ export default {
},
computed: {
isChecked() {
if (this.isMultiSelect && this.modelValue instanceof Array) {
if (this.isMultiSelect || this.modelValue instanceof Array) {
return this.modelValue.includes(this.value);
}
return this.modelValue === this.value;
return this.modelValue == this.value;
},
inputType() {
return this.isMultiSelect ? "checkbox" : "radio";

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

@ -17,7 +17,7 @@
alertClass="alert-warning"
:isDismissible="false"
/>
selectedDamageLocations: {{selectedDamageLocations}} <br/>
selectedWindshieldOptions: {{selectedWindshieldOptions}} <br/>
<damageLocationQuestion
ref="damageLocation"
@ -198,7 +198,7 @@ export default {
},
getWindshieldOptionsFromStore() {
var windShieldOptions = { selectedWindshieldDamageType: "", selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []};
var windShieldOptions = { selectedWindshieldDamageType: "", selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: []};
if (store.getters.damage.isRepair === undefined) return windshieldOptions;
@ -224,7 +224,7 @@ export default {
if (store.getters.damage.isRepair) {
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
windShieldOptions.selectedWindshieldChipCount.push(store.getters.damage.numberOfChips);
windShieldOptions.selectedWindshieldChipCount = store.getters.damage.numberOfChips;
}
return windShieldOptions;

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

@ -1,6 +1,7 @@
<template>
<transition name="fade" mode="out-in">
<div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
WCCQ selectedValue: {{selectedValue}}
<buttonQuestion
:questionText="questionText"
:answers="answersFromCms"
@ -23,21 +24,21 @@ export default ({
name: "windshieldOptions",
mixins: [buttonQuestionWrapperMixin],
props: {
modelValue: Array,
// modelValue: Number,
groupName: String,
isAvailable: Boolean,
validationRules: String,
cmsWidgetName: String,
},
methods: {
// TODO KO is this being used? Always three options
updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
this.selectedValues = [this.answersToDisplay[0].Name];
}
},
},
// methods: {
// // TODO KO is this being used? Always three options
// updateSelectedValues() {
// // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
// if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
// this.selectedValues = [this.answersToDisplay[0].Name];
// }
// },
// },
computed: {
questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
@ -46,12 +47,12 @@ export default ({
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
},
watch: {
isAvailable(val) {
// CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
val && this.updateSelectedValues();
}
},
// watch: {
// isAvailable(val) {
// // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
// val && this.updateSelectedValues();
// }
// },
components: {
buttonQuestion,
}

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

@ -23,7 +23,6 @@
validationRules="windshield-chip-count-required"
/>
WO selectedWindshieldReplaceOptionsValues: {{selectedWindshieldReplaceOptionsValues}}
<replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion"
:isAvailable="isReplaceOptionSelected"
isMultiSelect
@ -100,6 +99,9 @@ export default ({
},
getWindshieldOptions(selectedWindshieldDamageType, selectedWindshieldChipCount, selectedWindshieldReplaceOptions){
// ONLY UPDATE THE NEW VALUE IF IT IS TRUTHY (NOT NULL)
console.log("GETWINDSHIELDOPTIONS", {
selectedValues: this.selectedValues
})
return {
selectedWindshieldDamageType: selectedWindshieldDamageType ? selectedWindshieldDamageType : this.selectedValues.selectedWindshieldDamageType,
selectedWindshieldChipCount: selectedWindshieldChipCount ? selectedWindshieldChipCount : this.selectedValues.selectedWindshieldChipCount,

3
src/mixins/button-question-wrapper-mixin.js
View file

@ -1,7 +1,6 @@
export default {
props: {
modelValue: String,
modelValue: [String, Number]
},
data() {
return {

152
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -2,7 +2,7 @@
<inputButtonWrapper
:buttonWrapperClasses="[
'list-group list-button-horizontal d-flex flex-column w-100',
{ 'radio-fancy': isCashOrInsurance, 'has-error': errors.length > 0 }
{ 'radio-fancy': isCashOrInsurance }
]"
:isMultiSelect="isMultiSelect"
:modelValue="modelValue"
@ -16,7 +16,7 @@
:class="[(errors.length > 0 || hasError) ? 'has-error' : '', isCashOrInsurance ? 'radio-fancy' : '']"
@keyup.space="triggerButton()" @keyup.up="handleKeyupArrow()" @keyup.down="handleKeyupArrow()"
@keyup.left="handleKeyupArrow()" @keyup.right="handleKeyupArrow()"> -->
<div :aria-labelledby="buttonID" class="list-button-horizontal-content d-flex flex-column justify-content-center p-3" @mouseup="triggerButton()">
<div class="list-button-horizontal-content d-flex flex-column justify-content-center p-3">
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
@ -60,102 +60,108 @@ export default {
default: "",
},
validationRules: String,
selectedValues: [Array, String],
// selectedValues: [Array, String],
hasError: Boolean,
valueToLogType: String,
},
data() {
return {
isLoaderDisplayed: false,
checkValue: Boolean,
// checkValue: Boolean,
};
},
created() {
if (Array.isArray(this.selectedValues)) {
this.checkValue = this.isMultiSelect
? this.selectedValues.includes(this.value)
: this.selectedValues[0] == this.value;
}
else {
this.checkValue = this.selectedValues;
}
},
// created() {
// if (Array.isArray(this.selectedValues)) {
// this.checkValue = this.isMultiSelect
// ? this.selectedValues.includes(this.value)
// : this.selectedValues[0] == this.value;
// }
// else {
// this.checkValue = this.selectedValues;
// }
// },
methods: {
isValueSelectedByArray(arr) {
return this.isMultiSelect
? arr.includes(this.value)
: arr[0];
},
// isValueSelectedByArray(arr) {
// return this.isMultiSelect
// ? arr.includes(this.value)
// : arr[0];
// },
displayLoader() {
this.isLoaderDisplayed = true;
},
handleInputChange() {
if (!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
},
handleKeyupArrow() {
if (this.isMultiSelect) {
return; // Prevent arrow keys from doing anything if element is a checkbox
}
handleAnswerChange(e) {
// TODO KO all the buttons have this function
if (!this.selectingInitiatesLoad) {
this.handleCheckChange();
}
console.log(e)
this.$emit("change", e);
},
triggerButton() {
if (this.selectingInitiatesLoad) {
this.displayLoader();
this.handleCheckChange();
}
// handleInputChange() {
// if (!this.selectingInitiatesLoad) {
// this.handleCheckChange();
// }
// },
// handleKeyupArrow() {
// if (this.isMultiSelect) {
// return; // Prevent arrow keys from doing anything if element is a checkbox
// }
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
},
handleCheckChange() {
const emitEvent = {
checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
value: this.value,
buttonId: this.buttonID && this.buttonID.toString(),
};
// if (!this.selectingInitiatesLoad) {
// this.handleCheckChange();
// }
// },
// triggerButton() {
// if (this.selectingInitiatesLoad) {
// this.displayLoader();
// this.handleCheckChange();
// }
this.handleChange(this.value);
this.$emit("isCheckedChanged", emitEvent);
this.$emit("update:modelValue", emitEvent);
}
// this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
// },
// handleCheckChange() {
// const emitEvent = {
// checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
// value: this.value,
// buttonId: this.buttonID && this.buttonID.toString(),
// };
// this.handleChange(this.value);
// this.$emit("isCheckedChanged", emitEvent);
// this.$emit("update:modelValue", emitEvent);
// }
},
components: {
loader,
inputButtonWrapper
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
// setup(props) {
// const inputType = props.isMultiSelect ? "checkbox" : "radio";
const fieldOptions = {
type: inputType,
checkedValue: props.value,
potentialInitialValue: props.selectedValues,
};
// const fieldOptions = {
// type: inputType,
// checkedValue: props.value,
// potentialInitialValue: props.selectedValues,
// };
// Set initialValue for validation setup if pre-selected
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
}
// // Set initialValue for validation setup if pre-selected
// // NOTE: props.selectedValues could be an array of strings, or an array of integers...
// if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
// fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
// }
const {
handleChange,
errors,
value
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
// const {
// handleChange,
// errors,
// value
// } = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
const validateValue = value;
return {
handleChange,
errors,
validateValue,
fieldOptions, // only need to expose this for unit test purposes
};
},
// const validateValue = value;
// return {
// handleChange,
// errors,
// validateValue,
// fieldOptions, // only need to expose this for unit test purposes
// };
// },
};
</script>

4
src/ux-components/list-button/list-button.vue
View file

@ -69,10 +69,10 @@ import inputButtonWrapper from "@/common-components/input-button-wrapper/input-b
export default {
name: "listButton",
props: {
// groupName: String,
groupName: String, // TODO KO these shared props should be moved somewhere
buttonLabel: [Number, String],
// buttonID: [Number, String],
// isRequired: Boolean,
isRequired: Boolean,
textPosition: String,
buttonLabelSubCopy: String,
screenReaderOnlyText: String,