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

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

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

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

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

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

@ -38,22 +38,22 @@
alertClass="alert-danger"
:isDismissible="false"
/>
<sideDoorOptions
<!-- <sideDoorOptions
ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations"
/>
<replaceOptionsQuestion
/> -->
<!-- <replaceOptionsQuestion
ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
:isAvailable="isRearWindowDamageLocation && !hasRepairReplaceConflict"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required"
/>
/> -->
<funnel-footer
cmsWidgetName="FunnelFooterWidget"
:isForwardActionDisabled="!meta.valid"
@ -126,15 +126,15 @@ export default {
vm.$refs.damageLocation.initializeComponent(
resultMap.damageOptions
);
vm.$refs.sideDoorOptions.initializeComponent(
resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
);
vm.$refs.windshieldOptions.initializeComponent(
resultMap.damageOptions.windshieldOptions.availableReplacementOptions
);
vm.$refs.backGlassOptions.initializeComponent(
resultMap.damageOptions.backGlassOptions.availableReplacementOptions
);
// vm.$refs.sideDoorOptions.initializeComponent(
// resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
// );
// vm.$refs.windshieldOptions.initializeComponent(
// resultMap.damageOptions.windshieldOptions.availableReplacementOptions
// );
// vm.$refs.backGlassOptions.initializeComponent(
// resultMap.damageOptions.backGlassOptions.availableReplacementOptions
// );
});
@ -401,10 +401,10 @@ export default {
funnelFooter,
vehicleBanner,
funnelSubHeader,
sideDoorOptions,
// sideDoorOptions,
damageLocationQuestion,
windshieldOptions,
replaceOptionsQuestion,
// replaceOptionsQuestion,
Form,
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"
:groupName="groupName"
buttonType="listCard"
v-model="selectedValues"
v-model="selectedValue"
:suppressError="suppressError"
:validationRules="validationRules"
:selectOnKeypress="true"
isRequired
/>
</div>
@ -17,11 +18,13 @@
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
export default ({
name: "windshieldDamageTypeQuestion",
mixins: [buttonQuestionWrapperMixin],
props: {
modelValue: String,
// modelValue: String,
groupName: String,
isAvailable: Boolean,
suppressError: Boolean,
@ -35,17 +38,29 @@ export default ({
answersFromCms(){
return this.getCmsContent(this.cmsWidgetName, 'Answers');
},
selectedValues: {
get: function() {
return this.modelValue;
},
set: function(newValue) {
this.$emit("update:modelValue", newValue);
}
},
// selectedValues: {
// get: function() {
// return this.modelValue;
// },
// set: function(newValue) {
// this.$emit("update:modelValue", newValue);
// }
// },
},
components: {
buttonQuestion,
},
watch: {
isAvailable(isAvailable) {
if (!isAvailable) {
console.log({
isAvailable: isAvailable
})
console.log("updating")
this.selectedValue = null;
// this.$emit("update:modelValue", null);
}
}
}
})
</script>

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

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

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

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

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

@ -9,6 +9,7 @@
:value="value"
:groupName="groupName"
:validationRules="validationRules"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange"
>
@ -88,7 +89,7 @@ export default {
buttonLabel: String, //Required: Label text
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.
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
buttonLabelSubCopy: String, //Optional: sub text
value: {
@ -101,6 +102,7 @@ export default {
// selectedValues: [Array, String],
// hasError: Boolean,
valueToLogType: String,
selectOnKeypress: Boolean
},
data() {
return {