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

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

@ -17,7 +17,7 @@
alertClass="alert-warning" alertClass="alert-warning"
:isDismissible="false" :isDismissible="false"
/> />
selectedDamageLocations: {{selectedDamageLocations}} <br/> selectedWindshieldOptions: {{selectedWindshieldOptions}} <br/>
<damageLocationQuestion <damageLocationQuestion
ref="damageLocation" ref="damageLocation"
@ -198,7 +198,7 @@ export default {
}, },
getWindshieldOptionsFromStore() { getWindshieldOptionsFromStore() {
var windShieldOptions = { selectedWindshieldDamageType: "", selectedWindshieldChipCount: [], selectedWindshieldReplaceOptions: []}; var windShieldOptions = { selectedWindshieldDamageType: "", selectedWindshieldChipCount: null, selectedWindshieldReplaceOptions: []};
if (store.getters.damage.isRepair === undefined) return windshieldOptions; if (store.getters.damage.isRepair === undefined) return windshieldOptions;
@ -224,7 +224,7 @@ export default {
if (store.getters.damage.isRepair) { if (store.getters.damage.isRepair) {
windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR; windShieldOptions.selectedWindshieldDamageType = damageLocationsSelected.REPAIR;
windShieldOptions.selectedWindshieldChipCount.push(store.getters.damage.numberOfChips); windShieldOptions.selectedWindshieldChipCount = store.getters.damage.numberOfChips;
} }
return windShieldOptions; 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> <template>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite"> <div class="windshield-chip-count-question" v-if="isAvailable" aria-live="polite">
WCCQ selectedValue: {{selectedValue}}
<buttonQuestion <buttonQuestion
:questionText="questionText" :questionText="questionText"
:answers="answersFromCms" :answers="answersFromCms"
@ -23,21 +24,21 @@ export default ({
name: "windshieldOptions", name: "windshieldOptions",
mixins: [buttonQuestionWrapperMixin], mixins: [buttonQuestionWrapperMixin],
props: { props: {
modelValue: Array, // modelValue: Number,
groupName: String, groupName: String,
isAvailable: Boolean, isAvailable: Boolean,
validationRules: String, validationRules: String,
cmsWidgetName: String, cmsWidgetName: String,
}, },
methods: { // methods: {
// TODO KO is this being used? Always three options // // TODO KO is this being used? Always three options
updateSelectedValues() { // updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER // // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) { // if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
this.selectedValues = [this.answersToDisplay[0].Name]; // this.selectedValues = [this.answersToDisplay[0].Name];
} // }
}, // },
}, // },
computed: { computed: {
questionText(){ questionText(){
return this.getCmsContent(this.cmsWidgetName, 'QuestionText'); return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
@ -46,12 +47,12 @@ export default ({
return this.getCmsContent(this.cmsWidgetName, 'Answers'); return this.getCmsContent(this.cmsWidgetName, 'Answers');
}, },
}, },
watch: { // watch: {
isAvailable(val) { // isAvailable(val) {
// CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE // // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
val && this.updateSelectedValues(); // val && this.updateSelectedValues();
} // }
}, // },
components: { components: {
buttonQuestion, buttonQuestion,
} }

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

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

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

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

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

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