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

CSR-762 list-card with aggressive validation

Browse source
This commit is contained in:
Katie 2022-09-19 16:17:52 -04:00
parent 4a2e21fe25
commit 95e972a02f
10 changed files with 125 additions and 74 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

@ -263,9 +263,9 @@ export default {
// this.$emit("isCheckedChanged", val);
// },
handleAnswerChange(eventValue) {
console.log({
bqEvent: eventValue
})
// console.log({
// bqEvent: eventValue
// })
this.$emit("update:modelValue", eventValue);
},
},

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

@ -2,7 +2,6 @@
<label
:class="[buttonWrapperClasses, { 'has-error': errors.length > 0 }]"
:for="buttonId"
@mousedown.left="handleEventAction('click', $event)"
>
<!-- classes: {{classes}}<br/>
value: {{value}} <br/>
@ -17,7 +16,6 @@
:value="value"
:checked="isChecked"
@keypress.enter="handleEventAction('keypressSubmit', $event)"
@keypress.space="handleEventAction('keypressSubmit', $event)"
@change="handleEventAction('change', $event)"
/>
@ -81,6 +79,14 @@ export default {
hasFirstEventFired: false,
};
},
mounted() {
console.log({
isChecked: this.isChecked,
modelValue: this.modelValue
})
this.handleChange(this.modelValue)
},
methods: {
handleEventAction(eventType, e) {
const eventTypes = {
@ -89,25 +95,52 @@ export default {
CLICK: "click",
};
if (!this.hasFirstEventFired) {
switch (eventType) {
case eventTypes.CLICK:
case eventTypes.KEYPRESS_SUBMIT:
console.log("clicking");
this.handleClick(e);
break;
case eventTypes.CHANGE:
console.log("selectOnKeypress: ", this.selectOnKeypress);
this.selectOnKeypress
? this.handleClick(e)
: this.handleSelectionChange(e);
break;
}
console.log({
handleKeypress: eventType,
hasFirstEventFired: this.hasFirstEventFired,
});
if (this.isMultiSelect) {
// if (true) {
switch (eventType) {
case eventTypes.CLICK:
case eventTypes.KEYPRESS_SUBMIT:
console.log("clicking");
this.hasFirstEventFired = true;
this.handleClick(e);
break;
case eventTypes.CHANGE:
console.log("selectOnKeypress: ", this.selectOnKeypress);
this.hasFirstEventFired = false;
this.selectOnKeypress
? this.handleClick(e)
: this.handleSelectionChange(e);
break;
}
// if (this.hasFirstEventFired) {
// this.hasFirstEventFired = eventType === eventTypes.CHANGE;
// }
// }
} else {
this.handleClick(e);
}
this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
// if (!this.hasFirstEventFired) {
console.log("handleKeypress: ", eventType);
// else {
// this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
// }
// else {
// this.hasFirstEventFired = true;
// this.selectOnKeypress
// ? this.handleClick(e)
// : this.handleSelectionChange(e);
// }
// this.hasFirstEventFired = eventType !== eventTypes.CHANGE;
// this.handleClick(e);
// console.log({
// selectOnKeypress: this.selectOnKeypress,
// event: e,

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

@ -78,7 +78,7 @@ export default ({
},
watch: {
selectedValue(selectedValue) {
console.log("DLQ: ", selectedValue)
// console.log("DLQ: ", selectedValue)
this.$emit("update:modelValue", selectedValue)
}
}

21
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="selectedValues"
v-model="selectedValue"
:validationRules="validationRules"
:suppressError="suppressError"
:isRequired=isRequired
@ -20,9 +20,11 @@
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import store from "@/store";
import buttonQuestionWrapperMixin from "@/mixins/button-question-wrapper-mixin";
export default ({
name: "replaceOptionsQuestion",
mixins: [buttonQuestionWrapperMixin],
data(){
return {
replaceOptions: [],
@ -32,7 +34,7 @@ export default ({
isAvailable: Boolean,
filterByVehicleCategory: Boolean,
groupName: String,
modelValue: Array,
// modelValue: Array,
isMultiSelect: Boolean,
validationRules: String,
suppressError: Boolean,
@ -43,12 +45,13 @@ export default ({
initializeComponent(replaceOptions){
this.replaceOptions = replaceOptions;
},
// updateSelectedValues() {
// // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
// if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
// this.selectedValues = [this.answersToDisplay[0].Name];
// }
// },
updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
// ex: BackGlass stationary
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
this.selectedValue = [this.answersToDisplay[0].Name];
}
},
},
computed: {
questionText(){
@ -91,7 +94,7 @@ export default ({
},
shouldDisplayReplaceOptionsQuestion(shouldDisplayReplaceOptionsQuestion) {
if (!shouldDisplayReplaceOptionsQuestion) {
this.selectedValues = [];
this.selectedValue = [];
}
}
},

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

@ -38,14 +38,14 @@
alertClass="alert-danger"
:isDismissible="false"
/>
<!-- <sideDoorOptions
<sideDoorOptions
ref="sideDoorOptions"
cmsWidgetName="SideDoorSideQuestion"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
v-show="!hasRepairReplaceConflict"
:selectedDamageLocations="selectedDamageLocations"
/> -->
/>
<!-- <replaceOptionsQuestion
ref="backGlassOptions"
cmsWidgetName="RearReplaceOptionsQuestion"
@ -401,7 +401,7 @@ export default {
funnelFooter,
vehicleBanner,
funnelSubHeader,
// sideDoorOptions,
sideDoorOptions,
damageLocationQuestion,
windshieldOptions,
// replaceOptionsQuestion,

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

@ -30,6 +30,7 @@ export default ({
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) {

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

@ -50,17 +50,17 @@ export default ({
components: {
buttonQuestion,
},
watch: {
isAvailable(isAvailable) {
if (!isAvailable) {
console.log({
isAvailable: isAvailable
})
console.log("updating")
this.selectedValue = null;
// this.$emit("update:modelValue", null);
}
}
}
// watch: {
// isAvailable(isAvailable) {
// if (!isAvailable) {
// // console.log({
// // isAvailable: isAvailable
// // })
// // console.log("updating")
// this.selectedValue = null;
// // this.$emit("update:modelValue", null);
// }
// }
// }
})
</script>

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

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

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

@ -1,12 +1,22 @@
<template>
<div class="list-group list-button-horizontal d-flex flex-column w-100"
<inputButtonWrapper
:buttonWrapperClasses="[
'list-group list-button-horizontal d-flex flex-column w-100',
{ 'radio-fancy': isCashOrInsurance, 'has-error': errors.length > 0 }
]"
:isMultiSelect="isMultiSelect"
:modelValue="modelValue"
:value="value"
:groupName="groupName"
:validationRules="validationRules"
:selectOnKeypress="selectOnKeypress"
@change="handleAnswerChange"
>
<!-- <div class="list-group list-button-horizontal d-flex flex-column w-100"
: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()">
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="value"
:aria-required="isRequired" v-model="checkValue" @change="handleInputChange()" />
<label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID"
class="d-flex flex-column justify-content-center p-3" @mouseup="triggerButton()">
@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()">
<span class="m-0" :class="textPosition">
{{ buttonLabel }}
</span>
@ -17,8 +27,9 @@
{{ screenReaderOnlyText }}
</span>
<loader v-if="isLoaderDisplayed && selectingInitiatesLoad" :class="[loaderColor, loaderPosition]" />
</label>
</div>
</div>
<!-- </div> -->
</inputButtonWrapper>
</template>
<script>
@ -26,6 +37,7 @@ import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader";
import { toRef } from "vue";
import { queryStrings } from "@/constants/query-strings";
import inputButtonWrapper from "@/common-components/input-button-wrapper/input-button-wrapper";
export default {
name: "listButtonHorizontal",
@ -116,6 +128,7 @@ export default {
},
components: {
loader,
inputButtonWrapper
},
setup(props) {
const inputType = props.isMultiSelect ? "checkbox" : "radio";
@ -159,33 +172,33 @@ export default {
opacity: 0;
width: 0;
&:focus-visible+label {
&:focus-visible+.list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
z-index: 2;
}
&:focus+label {
&:focus+.list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
z-index: 3;
}
&:checked+label {
&:checked+.list-button-horizontal-content {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
outline: none;
z-index: 2;
}
&:checked:focus+label {
&:checked:focus+.list-button-horizontal-content {
box-shadow: 0 0 0 2.5px $blue;
}
&:checked+label p:first-child {
&:checked+.list-button-horizontal-content p:first-child {
font-weight: 500;
}
}
label {
.list-button-horizontal-content {
outline: none;
position: relative;
background: $white;
@ -214,7 +227,7 @@ export default {
// Cash/Insurance option radio button styling
&.radio-fancy {
label {
.list-button-horizontal-content {
border: 1px solid $blue-700;
z-index: 2;
color: $blue;
@ -225,7 +238,7 @@ export default {
}
}
label:hover {
.list-button-horizontal-content:hover {
background-color: $blue-700;
color: $white;
box-shadow: none;
@ -238,16 +251,16 @@ export default {
opacity: 0;
width: 0;
&:focus-visible+label {
&:focus-visible+.list-button-horizontal-content {
border-radius: 0.5rem;
z-index: 2;
}
&:focus+label {
&:focus+.list-button-horizontal-content {
z-index: 3;
}
&:checked+label {
&:checked+.list-button-horizontal-content {
outline: none;
box-shadow: none;
color: $white;
@ -256,11 +269,11 @@ export default {
z-index: 5;
}
&:checked:focus+label {
&:checked:focus+.list-button-horizontal-content {
box-shadow: 0 0 0 3px, 0 0 0 5.5px $blue-700;
}
&:checked+label p:first-child {
&:checked+.list-button-horizontal-content p:first-child {
font-weight: 500;
}
}
@ -270,7 +283,7 @@ export default {
.col {
&:first-of-type {
.list-button-horizontal {
label {
.list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
@ -279,7 +292,7 @@ export default {
&:last-of-type {
.list-button-horizontal {
label {
.list-button-horizontal-content {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
@ -290,12 +303,12 @@ export default {
&:first-of-type {
.list-button-horizontal.radio-fancy {
input[type="radio"] {
&:checked+label {
&:checked+.list-button-horizontal-content {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
&:checked:focus+label {
&:checked:focus+.list-button-horizontal-content {
border-bottom-right-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
@ -306,12 +319,12 @@ export default {
&:last-of-type {
.list-button-horizontal.radio-fancy {
input[type="radio"] {
&:checked+label {
&:checked+.list-button-horizontal-content {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
&:checked:focus+label {
&:checked:focus+.list-button-horizontal-content {
border-bottom-left-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}

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

@ -179,7 +179,7 @@ export default {
// this.$emit("isCheckedChanged", emitEvent);
// },
handleAnswerChange(e) {
console.log(e)
// console.log(e)
this.$emit("change", e);
},
},