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

CSR-762 Only read one event per action

Browse source
This commit is contained in:
Katie 2022-09-19 14:06:04 -04:00
parent c5fb168161
commit 4ae0b4e54b
8 changed files with 147 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/common-components/button-question/button-question.vue
View file

@ -55,6 +55,7 @@
:isWide="isWide" :isWide="isWide"
:validationRules="validationRules" :validationRules="validationRules"
:textPosition="textPosition" :textPosition="textPosition"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange" @change="handleAnswerChange"
/> />
@ -151,6 +152,7 @@ export default {
suppressError: Boolean, suppressError: Boolean,
useTextForValue: Boolean, useTextForValue: Boolean,
valueToLogType: String, valueToLogType: String,
selectOnKeypress: Boolean,
}, },
computed: { computed: {
getFieldSetClasses() { getFieldSetClasses() {
@ -261,7 +263,9 @@ export default {
// this.$emit("isCheckedChanged", val); // this.$emit("isCheckedChanged", val);
// }, // },
handleAnswerChange(eventValue) { handleAnswerChange(eventValue) {
console.log(eventValue) console.log({
bqEvent: eventValue
})
this.$emit("update:modelValue", eventValue); this.$emit("update:modelValue", eventValue);
}, },
}, },

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

@ -2,7 +2,7 @@
<label <label
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]" :class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:for="buttonId" :for="buttonId"
@mouseup.left="handleClick" @mousedown.left="handleEventAction('click', $event)"
> >
<!-- classes: {{classes}}<br/> <!-- classes: {{classes}}<br/>
value: {{value}} <br/> value: {{value}} <br/>
@ -16,9 +16,9 @@
:aria-required="isRequired" :aria-required="isRequired"
:value="value" :value="value"
:checked="isChecked" :checked="isChecked"
@keypress="handleSelectionChange" @keypress.enter="handleEventAction('keypressSubmit', $event)"
@keypress.enter="handleClick" @keypress.space="handleEventAction('keypressSubmit', $event)"
@keypress.space="handleClick" @change="handleEventAction('keypress', $event)"
/> />
<slot></slot> <slot></slot>
@ -73,38 +73,99 @@ export default {
buttonWrapperClasses: [String, Array, Object], buttonWrapperClasses: [String, Array, Object],
inputClasses: [String, Array, Object], inputClasses: [String, Array, Object],
valueToLogType: String, valueToLogType: String,
selectOnKeypress: Boolean,
}, },
data() { data() {
return { return {
valueToEmit: null, valueToEmit: null,
hasFirstEventFired: false,
}; };
}, },
methods: { methods: {
handleSelectionChange(event) { handleEventAction(eventType, e) {
console.log(event); const eventTypes = {
KEYPRESS: "keypress",
KEYPRESS_SUBMIT: "keypressSubmit",
CLICK: "click",
};
if (!this.hasFirstEventFired) {
switch (eventType) {
case eventTypes.CLICK:
case eventTypes.KEYPRESS_SUBMIT:
console.log("clicking");
this.handleClick(e);
break;
case eventTypes.KEYPRESS:
console.log("selectOnKeypress: ", this.selectOnKeypress);
this.selectOnKeypress
? this.handleClick(e)
: this.handleSelectionChange(e);
break;
}
}
this.hasFirstEventFired = eventType !== eventTypes.KEYPRESS;
console.log("handleKeypress: ", eventType);
// console.log({
// selectOnKeypress: this.selectOnKeypress,
// event: e,
// eventType: eventType,
// isClick: eventType === "click",
// isKeypress: eventType === "keypress",
// });
// console.log(eventType)
// click => click, keypress
// space => keypressSubmit, keypress
// arrow left/right => keypress
// if selectOnKeypress (YMMS)
// if click => emit event
// if space/enter => emit event
// if arrow => emit event
// else (!selectOnKeypress)
// if click => emit event
// if space/enter => emit event
// if arrow => handleSelection
// if ((!this.selectOnKeypress && eventType === "click") || (this.selectOnKeypress && eventType === "keypress")) {
// this.handleClick(e);
// }
// else {
// this.handleSelectionChange(e);
// }
},
handleSelectionChange(e) {
// console.log("HSC");
// console.log(e);
// console.log(this.value); // console.log(this.value);
// console.log(this.modelValue); // console.log(this.modelValue);
// let isChecked = event.target.checked; // let isChecked = event.target.checked;
// console.log("BM value: ", this.value); // console.log("BM value: ", this.value);
// let valueToEmit; // let valueToEmit;
console.log("isMultiselect") // console.log("isMultiselect")
console.log(this.isMultiSelect) // console.log(this.isMultiSelect)
console.log({ // console.log({
modelValue: this.modelValue, // modelValue: this.modelValue,
isMultiselect: this.isMultiSelect // isMultiselect: this.isMultiSelect
}) // })
if (this.isMultiSelect && (this.modelValue instanceof Array || this.modelValue == null)) { if (
this.isMultiSelect &&
(this.modelValue instanceof Array || this.modelValue == null)
) {
let newValue = this.modelValue ? [...this.modelValue] : []; let newValue = this.modelValue ? [...this.modelValue] : [];
console.log("newValue", newValue) // console.log("newValue", newValue)
console.log({ // console.log({
newValue: newValue, // newValue: newValue,
// isChecked: isChecked // // isChecked: isChecked
}) // })
if (!newValue.includes(this.value)) { if (!newValue.includes(this.value)) {
console.log("isChecked") // console.log("isChecked")
newValue.push(this.value); newValue.push(this.value);
} else { } else {
console.log("isn't checked") // console.log("isn't checked")
newValue.splice(newValue.indexOf(this.value), 1); newValue.splice(newValue.indexOf(this.value), 1);
} }
@ -113,19 +174,21 @@ export default {
this.valueToEmit = this.value; this.valueToEmit = this.value;
} }
// console.log("ButtonWrapper is emitting: ", valueToEmit); // console.log("handlingChange", this.valueToEmit);
console.log("Not emitting");
this.handleChange(this.valueToEmit); this.handleChange(this.valueToEmit);
this.pushClickEventToGA(); this.pushClickEventToGA();
// if (this.selectOnKeypress) {
// this.handleClick(e)
// }
}, },
handleClick(e) { handleClick(e) {
console.log("emitting"); console.log("handleClick");
console.log(e);
this.handleSelectionChange(e); this.handleSelectionChange(e);
console.log("valueToEmit") // console.log("HC");
console.log(this.valueToEmit) // console.log({
// eventEmitting: e,
// valueToEmit: this.valueToEmit,
// });
this.$emit("change", this.valueToEmit); this.$emit("change", this.valueToEmit);
}, },
pushClickEventToGA() { pushClickEventToGA() {

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

@ -8,6 +8,7 @@
buttonType="listCard" buttonType="listCard"
isRequired isRequired
v-model="selectedValue" v-model="selectedValue"
:selectOnKeypress="true"
validationRules="damage-location-required" validationRules="damage-location-required"
/> />
</div> </div>

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

@ -38,22 +38,22 @@
alertClass="alert-danger" alertClass="alert-danger"
:isDismissible="false" :isDismissible="false"
/> />
<sideDoorOptions <!-- <sideDoorOptions
ref="sideDoorOptions" ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion" cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion" groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData" v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict" v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations" :selectedDamageLocations="selectedDamageLocations"
/> /> -->
<replaceOptionsQuestion <!-- <replaceOptionsQuestion
ref="backGlassOptions" ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion" cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict" :isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions" v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion" groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required" validationRules="replace-options-required"
/> /> -->
<funnel-footer <funnel-footer
cmsWidgetName="FunnelFooterWidget" cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid" :isForwardActionDisabled="!meta.valid"
@ -126,15 +126,15 @@ export default {
vm.$refs.damageLocation.initializeComponent( vm.$refs.damageLocation.initializeComponent(
resultMap.damageOptions resultMap.damageOptions
); );
vm.$refs.sideDoorOptions.initializeComponent( // vm.$refs.sideDoorOptions.initializeComponent(
resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions // resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
); // );
vm.$refs.windshieldOptions.initializeComponent( // vm.$refs.windshieldOptions.initializeComponent(
resultMap.damageOptions.windshieldOptions.availableReplacementOptions // resultMap.damageOptions.windshieldOptions.availableReplacementOptions
); // );
vm.$refs.backGlassOptions.initializeComponent( // vm.$refs.backGlassOptions.initializeComponent(
resultMap.damageOptions.backGlassOptions.availableReplacementOptions // resultMap.damageOptions.backGlassOptions.availableReplacementOptions
); // );
}); });
@ -401,10 +401,10 @@ export default {
funnelFooter, funnelFooter,
vehicleBanner, vehicleBanner,
funnelSubHeader, funnelSubHeader,
sideDoorOptions, // sideDoorOptions,
damageLocationQuestion, damageLocationQuestion,
windshieldOptions, windshieldOptions,
replaceOptionsQuestion, // replaceOptionsQuestion,
Form, Form,
alert, alert,
}, },

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

@ -6,9 +6,10 @@
:answers="answersFromCms" :answers="answersFromCms"
:groupName="groupName" :groupName="groupName"
buttonType="listCard" buttonType="listCard"
v-model="selectedValues" v-model="selectedValue"
:suppressError="suppressError" :suppressError="suppressError"
:validationRules="validationRules" :validationRules="validationRules"
:selectOnKeypress="true"
isRequired isRequired
/> />
</div> </div>
@ -17,11 +18,13 @@
<script> <script>
import buttonQuestion from "@/common-components/button-question/button-question"; import buttonQuestion from "@/common-components/button-question/button-question";
import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
export default ({ export default ({
name: "windshieldDamageTypeQuestion", name: "windshieldDamageTypeQuestion",
mixins: [buttonQuestionWrapperMixin],
props: { props: {
modelValue: String, // modelValue: String,
groupName: String, groupName: String,
isAvailable: Boolean, isAvailable: Boolean,
suppressError: Boolean, suppressError: Boolean,
@ -35,17 +38,29 @@ export default ({
answersFromCms(){ answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers'); return this.getCmsContent(this.cmsWidgetName, 'Answers');
}, },
selectedValues: { // selectedValues: {
get: function() { // get: function() {
return this.modelValue; // return this.modelValue;
}, // },
set: function(newValue) { // set: function(newValue) {
this.$emit("update:modelValue", newValue); // this.$emit("update:modelValue", newValue);
} // }
}, // },
}, },
components: { components: {
buttonQuestion, buttonQuestion,
},
watch: {
isAvailable(isAvailable) {
if (!isAvailable) {
console.log({
isAvailable: isAvailable
})
console.log("updating")
this.selectedValue = null;
// this.$emit("update:modelValue", null);
}
}
} }
}) })
</script> </script>

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

@ -1,5 +1,7 @@
<template> <template>
<div class="windshield-options"> <div class="windshield-options">
selectedDamageLocations: {{ selectedDamageLocations }}
selectedWindshieldDamageTypeValue: {{selectedWindshieldDamageTypeValue}}
<windshieldDamageTypeQuestion cmsWidgetName="WindshieldDamageTypeQuestion" <windshieldDamageTypeQuestion cmsWidgetName="WindshieldDamageTypeQuestion"
:isAvailable="isWindshieldDamageLocation" :isAvailable="isWindshieldDamageLocation"
:suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError" :suppressError="hasRepairReplaceConflict || showNoReplacementAvailableError"
@ -20,6 +22,7 @@
v-model="selectedWindshieldChipCountValues" v-model="selectedWindshieldChipCountValues"
validationRules="windshield-chip-count-required" validationRules="windshield-chip-count-required"
/> />
<!--
<replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion" <replaceOptionsQuestion ref="replaceOptionsQuestion" cmsWidgetName="WindshieldReplaceOptionsQuestion"
:isAvailable="isReplaceOptionSelected" :isAvailable="isReplaceOptionSelected"
isMultiSelect isMultiSelect
@ -28,7 +31,7 @@
validationRules="windshield-replace-options-required|prevent-split-and-single-together" validationRules="windshield-replace-options-required|prevent-split-and-single-together"
:suppressError="hasSplitSingleConflict" :suppressError="hasSplitSingleConflict"
isRequired isRequired
/> /> -->
<alert <alert
v-if="hasSplitSingleConflict" v-if="hasSplitSingleConflict"
class="mt-5" class="mt-5"
@ -114,7 +117,7 @@ export default ({
}, },
selectedWindshieldDamageTypeValue: { selectedWindshieldDamageTypeValue: {
get: function() { get: function() {
return this.selectedValues.selectedWindshieldDamageType; return this.selectedDamageLocations.includes(damageLocationsSelected.WINDSHIELD) ? this.selectedValues.selectedWindshieldDamageType : null;
}, },
set: function(newValue) { set: function(newValue) {
this.selectedValues = this.getWindshieldOptions(newValue, null, null); this.selectedValues = this.getWindshieldOptions(newValue, null, null);
@ -178,7 +181,7 @@ export default ({
components: { components: {
windshieldDamageTypeQuestion, windshieldDamageTypeQuestion,
windshieldChipCountQuestion, windshieldChipCountQuestion,
replaceOptionsQuestion, // replaceOptionsQuestion,
alert, alert,
}, },
}) })

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

@ -31,7 +31,6 @@
<inputButtonWrapper <inputButtonWrapper
:isMultiSelect="isMultiSelect" :isMultiSelect="isMultiSelect"
:modelValue="modelValue"
:value="value" :value="value"
:groupName="groupName" :groupName="groupName"
buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2" buttonWrapperClasses="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
@ -72,7 +71,7 @@ export default {
props: { props: {
// groupName: String, // groupName: String,
buttonLabel: [Number, String], buttonLabel: [Number, String],
buttonID: [Number, String], // buttonID: [Number, String],
// isRequired: Boolean, // isRequired: Boolean,
textPosition: String, textPosition: String,
buttonLabelSubCopy: String, buttonLabelSubCopy: String,

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

@ -9,6 +9,7 @@
:value="value" :value="value"
:groupName="groupName" :groupName="groupName"
:validationRules="validationRules" :validationRules="validationRules"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange" @change="handleAnswerChange"
> >
@ -88,7 +89,7 @@ export default {
buttonLabel: String, //Required: Label text buttonLabel: String, //Required: Label text
isRequired: Boolean, //Required: is aria-required required or not? isRequired: Boolean, //Required: is aria-required required or not?
altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily. altText: String, //Leave empty. Screen readers read the buttonLabel text. If alt has content, it will repeat unnecessarily.
buttonID: String, // TODO KO We don't use this //Required: Unique // buttonID: String, // TODO KO We don't use this //Required: Unique
groupName: String, //Rquired: Unique groupName: String, //Rquired: Unique
buttonLabelSubCopy: String, //Optional: sub text buttonLabelSubCopy: String, //Optional: sub text
value: { value: {
@ -101,6 +102,7 @@ export default {
// selectedValues: [Array, String], // selectedValues: [Array, String],
// hasError: Boolean, // hasError: Boolean,
valueToLogType: String, valueToLogType: String,
selectOnKeypress: Boolean
}, },
data() { data() {
return { return {