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

CSR-319: move validation into vehicle-damage page

Browse source
This commit is contained in:
Adam Caouette 2022-03-01 14:12:05 -05:00
parent cd5fcfb7e2
commit ca0b266efa
6 changed files with 107 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
View file

@ -1,6 +1,7 @@
<template> <template>
<transition name="fade" mode="out-in"> <transition name="fade" mode="out-in">
<div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXXXXXXXXXXXXXX' : ''" aria-live="polite"> <div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXconsole.logXXXXXXXXXXXXX' : ''" aria-live="polite">
answersToDisplay.length: {{answersToDisplay.length}}
<buttonQuestion <buttonQuestion
isWide isWide
:questionText="questionText" :questionText="questionText"
@ -42,27 +43,27 @@ export default ({
this.answersFromCms = cmsContent.Answers; this.answersFromCms = cmsContent.Answers;
this.replaceOptions = replaceOptions; this.replaceOptions = replaceOptions;
}, },
// updateSelectedValues() { updateSelectedValues() {
// // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
// console.log(' ROQ updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay); console.log(' ROQ updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
// console.log(' ROQ updateSelectedValues, this.selectedValues: ', this.selectedValues); console.log(' ROQ updateSelectedValues, this.selectedValues: ', this.selectedValues);
// if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) { if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
// console.log(' ROQ ONLY ONE ANSWER!')
// this.selectedValues = [this.answersToDisplay[0].Name];
// }
// },
},
mounted() {
console.log('**** MOUJNTED *****. ')
console.log(' ROQ **** MOUJNTED *****, this.answersToDisplay: ', this.answersToDisplay);
console.log(' ROQ **** MOUJNTED *****, this.selectedValues: ', this.selectedValues);
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
console.log(' ROQ ONLY ONE ANSWER!') console.log(' ROQ ONLY ONE ANSWER!')
this.selectedValues = [this.answersToDisplay[0].Name]; this.selectedValues = [this.answersToDisplay[0].Name];
} }
},
}, },
// mounted() {
// console.log('**** MOUJNTED *****. this.groupName: ', this.groupName)
// console.log(' ROQ **** MOUJNTED *****, this.answersToDisplay: ', this.answersToDisplay);
// console.log(' ROQ **** MOUJNTED *****, this.selectedValues: ', this.selectedValues);
// if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1) {
// console.log(' ROQ ONLY ONE ANSWER! this.groupName: ', this.groupName)
// this.selectedValues = [this.answersToDisplay[0].Name];
// }
// },
computed: { computed: {
selectedValues: { selectedValues: {
get: function() { get: function() {
@ -88,13 +89,13 @@ export default ({
}); });
}, },
}, },
// watch: { watch: {
// isAvailable(val) { isAvailable(val) {
// console.log('ROQ ^^^ isAvailable changed.') console.log('ROQ ^^^ isAvailable changed.')
// // 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,
} }

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

@ -3,30 +3,61 @@
<funnelHeader ref="funnelHeader" /> <funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false /> <vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
<funnelSubHeader ref="funnelSubHeader" /> <funnelSubHeader ref="funnelSubHeader" />
<damageLocationQuestion <Form
ref="damageLocation" @submit="onSubmit"
v-model="selectedDamageLocations" @invalid-submit="onInvalidSubmit"
groupName="DamageLocationQuestion" ref="theForm"
/> v-slot="{ values, meta, errors }"
<windshieldOptions >
ref="windshieldOptions" <damageLocationQuestion
v-model="selectedWindshieldOptions" ref="damageLocation"
:selectedDamageLocations="selectedDamageLocations" v-model="selectedDamageLocations"
/> groupName="DamageLocationQuestion"
<sideDoorOptions />
ref="sideDoorOptions" <windshieldOptions
groupName="SideDoorSideQuestion" ref="windshieldOptions"
v-model="sideDoorOptionsData" v-model="selectedWindshieldOptions"
:selectedDamageLocations="selectedDamageLocations" :suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
/> :selectedDamageLocations="selectedDamageLocations"
<replaceOptionsQuestion />
ref="backGlassOptions" <alert
:isAvailable="isRearWindowDamageLocation" class="my-3"
v-model="selectedRearReplaceOptions" v-if="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
groupName="BackGlassReplaceOptionsQuestion" alertClass="alert-danger"
validationRules="replace-options-required" alertHeadline="You'll need to schedule separate appointments"
/> alertCopy="Vehicle service requiring both glass repair and replacement must be scheduled separately, as they're performed by different technicians. Continue scheduling your first service now, and then come back to schedule the second service."
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" /> :isDismissible="false"
/>
<sideDoorOptions
ref="sideDoorOptions"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
:selectedDamageLocations="selectedDamageLocations"
/>
<replaceOptionsQuestion
ref="backGlassOptions"
:isAvailable="isRearWindowDamageLocation"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required"
/>
<funnel-footer
ref="funnelFooter"
:isDisabled="!meta.valid"
@back-clicked="backButtonAction"
/>
<!-- KEEP TEMPORARILY FOR TROUBLESHOOTING VALIDATION -->
<div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
<p>Current Form, values:</p>
<pre>{{ values }}</pre>
<p>Errors:</p>
<pre>{{ errors }}</pre>
<p>Is Form Valid? (Meta.valid):</p>
<pre>{{ meta.valid }}</pre>
</div>
</Form>
</div> </div>
</template> </template>
@ -40,6 +71,7 @@ import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-doo
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question"; import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options"; import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question"; import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import alert from "@/ux-components/alert/alert";
// Supporting files // Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@ -47,7 +79,7 @@ import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions"; import { storeActions } from "@/constants/store-actions";
import store from "@/store"; import store from "@/store";
import baseMixin from "@/mixins/base-mixin"; import baseMixin from "@/mixins/base-mixin";
import { defineRule } from "vee-validate"; import { Form, defineRule } from "vee-validate";
// DEFINE VALIDATION RULES // DEFINE VALIDATION RULES
defineRule("replace-options-required", (value) => { defineRule("replace-options-required", (value) => {
@ -147,6 +179,24 @@ export default {
this.$route this.$route
); );
}, },
onSubmit(values) {
window.alert('Success! Submitted values: ' + JSON.stringify(values, null ,2))
console.log('submitted: ', JSON.stringify(values, null ,2));
},
onInvalidSubmit({ values, errors, results }) {
// identify the first error field and put focus on it
console.log("values: ", values);
console.log("errors: ", errors);
console.log("results: ", results);
// get error names array
const errorNames = errors ? Object.keys(errors) : [];
const firstErrorEl = errorNames[0];
if (firstErrorEl) {
console.log('firstErrorEl: ', firstErrorEl);
const qsString = "[data-focus-target='" + firstErrorEl + "']";
document.querySelector(qsString).focus();
}
},
}, },
components: { components: {
funnelHeader, funnelHeader,
@ -157,6 +207,8 @@ export default {
damageLocationQuestion, damageLocationQuestion,
windshieldOptions, windshieldOptions,
replaceOptionsQuestion, replaceOptionsQuestion,
Form,
alert,
}, },
}; };
</script> </script>

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

@ -1,5 +1,6 @@
<template> <template>
<div class="windshield-options"> <div class="windshield-options">
selectedDamageLocations: {{selectedDamageLocations}}
<windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion" <windshieldDamageTypeQuestion ref="windshieldDamageTypeQuestion"
:isAvailable=isWindshieldDamageLocation :isAvailable=isWindshieldDamageLocation
:suppressError="suppressError" :suppressError="suppressError"
@ -63,8 +64,6 @@ export default ({
props: { props: {
modelValue: Array, modelValue: Array,
selectedDamageLocations: Array, selectedDamageLocations: Array,
selectedChipCount: Array,
selectedReplaceOptions: Array,
suppressError: Boolean suppressError: Boolean
}, },

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

@ -10,7 +10,7 @@
:value="value" :value="value"
:aria-required="isRequired" :aria-required="isRequired"
:data-focus-target="groupName" :data-focus-target="groupName"
@click="handleChange(value)" @click="handleClick(value)"
v-model="checkValue" v-model="checkValue"
@change="!selectingInitiatesLoad ? handleCheckChange() : ''" @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
/> />

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

@ -10,7 +10,7 @@
:value="value" :value="value"
:aria-required="isRequired" :aria-required="isRequired"
:data-focus-target="groupName" :data-focus-target="groupName"
@click="handleChange(value)" @click="handleClick(value)"
v-model="checkValue" v-model="checkValue"
@change="!selectingInitiatesLoad ? handleCheckChange() : ''" @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
> >

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

@ -111,8 +111,8 @@ export default {
} }
}, },
setup(props) { setup(props) {
console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules) // console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules)
console.log('RUNNING setup... ... ... props.value: ', props.value) // console.log('RUNNING setup... ... ... props.value: ', props.value)
console.log('RUNNING setup... ... ... props.selectedValues: ', props.selectedValues) console.log('RUNNING setup... ... ... props.selectedValues: ', props.selectedValues)
const inputType = props.isMultiSelect ? "checkbox" : "radio"; const inputType = props.isMultiSelect ? "checkbox" : "radio";