CSR-254: set up damage-location-question
This commit is contained in:
Adam Caouette
parent
7cd8d359a8
commit
215232663d
5 changed files with 303 additions and 8 deletions
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div :class="isOverflowScrollable ? 'button_question' : ''">
|
||||
I AM THE BUTTON QUESTION, groupName is: {{groupName}}
|
||||
<div v-if="questionText" class="mt-6 mb-4 d-flex">
|
||||
<span class="text-center fs-6 fw-bold w-100">{{
|
||||
questionText
|
||||
|
|
@ -28,11 +29,14 @@
|
|||
:buttonImageId="answer.ImageId"
|
||||
:altText="answer.Name ? answer.Name : answer"
|
||||
screenReaderOnlyText="(opens new window)"
|
||||
:value="modelValue"
|
||||
:value="answer.Name ? answer.Name : answer"
|
||||
data-test="button"
|
||||
/>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div v-show="errorMessage" class="row px-3 form-test-error">
|
||||
{{ errorMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -41,6 +45,7 @@
|
|||
import listButton from "@/ux-components/list-button/list-button";
|
||||
import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-button-horizontal";
|
||||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import { useField } from 'vee-validate';
|
||||
|
||||
export default {
|
||||
name: "buttonQuestion",
|
||||
|
|
@ -74,6 +79,9 @@ export default {
|
|||
isOverflowScrollable: Boolean,
|
||||
isWide: Boolean,
|
||||
modelValue: String,
|
||||
validationRules: Array,
|
||||
name: String,
|
||||
value: String,
|
||||
},
|
||||
computed: {
|
||||
getFieldSetClasses(){
|
||||
|
|
@ -97,6 +105,7 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
chooseAnswer(answer) {
|
||||
console.log('method: chooseAnswer, answer: ', answer);
|
||||
this.$emit("update:modelValue", answer);
|
||||
},
|
||||
},
|
||||
|
|
@ -105,6 +114,49 @@ export default {
|
|||
listButtonHorizontal,
|
||||
listCard
|
||||
},
|
||||
setup(props) {
|
||||
console.log('button-question running setup');
|
||||
const {
|
||||
value: inputValue,
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
meta,
|
||||
} = useField(props.groupName, value => {
|
||||
if (props.validationRules) {
|
||||
// console.log('props.validationRules is: ', props.validationRules);
|
||||
|
||||
// console.log("value is: ", value)
|
||||
// console.log("inputValue is: ", inputValue);
|
||||
|
||||
let validationResults = [];
|
||||
|
||||
props.validationRules.forEach((rule) => {
|
||||
console.log("BQ 2value is: ", value)
|
||||
// console.log("2inputValue is: ", inputValue);
|
||||
if (!rule.test(value)) {
|
||||
// console.log('uh oh, returning error!', rule.error)
|
||||
validationResults.push(rule.error);
|
||||
}
|
||||
});
|
||||
|
||||
return (validationResults.length > 0) ? validationResults[0] : true;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}, {
|
||||
type: 'checkbox',
|
||||
checkedValue: props.value,
|
||||
});
|
||||
|
||||
return {
|
||||
// handleChange,
|
||||
// handleBlur,
|
||||
errorMessage,
|
||||
// inputValue,
|
||||
meta,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
|
|||
22
src/common-components/funnel-footer/funnel-footer.vue
Normal file
22
src/common-components/funnel-footer/funnel-footer.vue
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!-- Simple implementation of an input field -->
|
||||
<template>
|
||||
<div class="d-block w-50 mb-2">
|
||||
<h3>I AM FUNNEL FOOTER</h3>
|
||||
<button
|
||||
class="mb-6"
|
||||
:class="isDisabled && 'form-test-invalid'"
|
||||
:aria-disabled="isDisabled"
|
||||
>
|
||||
Get your estimate
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "funnelFooter",
|
||||
props: {
|
||||
isDisabled: Boolean,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<div class="damage-location-question">
|
||||
I AM DAMAGE LOCATION QUESTION
|
||||
groupName is: {{groupName}}
|
||||
<buttonQuestion
|
||||
v-if="isAvailable && answersToDisplayTemp.length > 1"
|
||||
:questionText="questionText"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:answers="answersToDisplayTemp"
|
||||
groupName="damageLocation"
|
||||
buttonType="listCard"
|
||||
:modelValue="modelValue"
|
||||
:validationRules="setValidationRules()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonQuestion from "@/common-components/button-question/button-question";
|
||||
import store from "@/store";
|
||||
import { rules } from '@/helpers/validation-rules';
|
||||
|
||||
export default ({
|
||||
name: "damageLocationQuestion",
|
||||
data(){
|
||||
return {
|
||||
questionText: String,
|
||||
answersFromCms: Array,
|
||||
answersToDisplay: Array,
|
||||
answersToDisplayTemp: [
|
||||
{
|
||||
Name: 'windshield-damage',
|
||||
Text: 'Windshield',
|
||||
AnswerImageUrl: 'windshield-damage.svg',
|
||||
ImageId: 'windshield-damage',
|
||||
},
|
||||
{
|
||||
Name: 'side-window-damage-left-all',
|
||||
Text: 'Side Door',
|
||||
AnswerImageUrl: 'side-window-damage-left-all.svg',
|
||||
ImageId: 'side-window-damage-left-all',
|
||||
},
|
||||
{
|
||||
Name: 'back-glass-damage',
|
||||
Text: 'Rear Window',
|
||||
AnswerImageUrl: 'back-glass-damage.svg',
|
||||
ImageId: 'back-glass-damage',
|
||||
}
|
||||
],
|
||||
damageOptions: Array,
|
||||
groupName: String,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
isMultiSelect: Boolean,
|
||||
isAvailable: Boolean,
|
||||
filterByVehicleCategory: Boolean,
|
||||
modelValue: String,
|
||||
validationRules: Array,
|
||||
name: String,
|
||||
},
|
||||
methods: {
|
||||
initializeComponent(cmsContent, damageOptions){
|
||||
console.log('cmsContent: ', cmsContent)
|
||||
console.log('damageOptions: ', damageOptions)
|
||||
|
||||
this.groupName = cmsContent.Name;
|
||||
this.questionText = cmsContent.QuestionText;
|
||||
this.answersFromCms = cmsContent.Answers;
|
||||
this.damageOptions = damageOptions;
|
||||
},
|
||||
setValidationRules() {
|
||||
const rulesArray = [
|
||||
{
|
||||
name: "required",
|
||||
test: (value) => {
|
||||
// console.log('required value is... ', value);
|
||||
if (!value || value.length < 1) {
|
||||
// console.log('return false')
|
||||
return false;
|
||||
}
|
||||
// console.log('no if, return true')
|
||||
return true;
|
||||
},
|
||||
error: 'Please select damage location'
|
||||
}
|
||||
]
|
||||
|
||||
return rulesArray;
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
// console.log('this.answersFromCms: ', this.answersFromCms)
|
||||
// this.answersToDisplay = this.answersFromCms.filter(ans => {
|
||||
// const name = ans.Name.split('-');
|
||||
// return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptions.includes(name[1]);
|
||||
// });
|
||||
// console.log('this.answersToDisplay: ', this.answersToDisplay)
|
||||
},
|
||||
watch: {
|
||||
modelValue(val) {
|
||||
this.$emit("update:modelValue", val);
|
||||
}
|
||||
},
|
||||
components: {
|
||||
buttonQuestion,
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
@ -1,10 +1,35 @@
|
|||
<template>
|
||||
<div class="container-fluid shadow rounded-3 p-0 position-relative">
|
||||
I AM VEHICLE DAMAGE
|
||||
<funnelHeader ref="funnelHeader" />
|
||||
<vehicleBanner ref="vehicleBanner" />
|
||||
<funnelSubHeader
|
||||
ref="funnelSubHeader"
|
||||
/>
|
||||
<Form
|
||||
@submit="onSubmit"
|
||||
@invalid-submit="onInvalidSubmit"
|
||||
v-slot="{ values, meta }"
|
||||
>
|
||||
<damageLocationQuestion
|
||||
ref="damageLocationQuestion"
|
||||
name="test"
|
||||
isAvailable
|
||||
isMultiSelect
|
||||
/>
|
||||
<replaceOptionsQuestion ref="replaceOptionsQuestion" isAvailable />
|
||||
<funnel-footer
|
||||
:isDisabled="!meta.valid"
|
||||
/>
|
||||
|
||||
<div class="g-2 mt-6 mx-4 w-25 position-fixed fixed-top">
|
||||
<p>Current Form Values:</p>
|
||||
<pre>{{ values }}</pre>
|
||||
<p>Is Form Valid? (Meta.valid):</p>
|
||||
<pre>{{ meta.valid }}</pre>
|
||||
</div>
|
||||
|
||||
</Form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,6 +38,15 @@
|
|||
import funnelHeader from "@/common-components/funnel-header/funnel-header";
|
||||
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
|
||||
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
|
||||
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
|
||||
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
|
||||
import textInput from "@/common-components/text-input/text-input";
|
||||
|
||||
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
|
||||
|
||||
import { Form, ErrorMessage } from 'vee-validate';
|
||||
|
||||
|
||||
// Supporting files
|
||||
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
|
||||
import { settleAllPromises } from "@/helpers/layout-helper";
|
||||
|
|
@ -37,7 +71,7 @@ export default ({
|
|||
resultKey: "damageOptions",
|
||||
promise: damageOptionsPromise
|
||||
},
|
||||
];
|
||||
];
|
||||
|
||||
const resultMap = await settleAllPromises(promiseResultMap);
|
||||
|
||||
|
|
@ -52,14 +86,45 @@ export default ({
|
|||
vm.$refs.funnelSubHeader.initializeComponent(
|
||||
resultMap.cmsContent.FunnelSubHeaderWidget
|
||||
);
|
||||
// use resultMap.damageOptions for damage options
|
||||
vm.$refs.damageLocationQuestion.initializeComponent(
|
||||
resultMap.cmsContent.DamageLocationQuestion
|
||||
);
|
||||
// vm.$refs.replaceOptionsQuestion.initializeComponent(
|
||||
// resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
|
||||
// );
|
||||
console.log(resultMap)
|
||||
});
|
||||
|
||||
},
|
||||
components: {
|
||||
Form,
|
||||
funnelHeader,
|
||||
vehicleBanner,
|
||||
funnelSubHeader,
|
||||
damageLocationQuestion,
|
||||
// replaceOptionsQuestion,
|
||||
funnelFooter,
|
||||
// textInput,
|
||||
},
|
||||
methods: {
|
||||
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 errorEls and order by alpha
|
||||
const errorEls = Object.keys(errors).sort();
|
||||
const firstErrorEl = errorEls[0];
|
||||
console.log('firstErrorEl: ', firstErrorEl);
|
||||
if (firstErrorEl) {
|
||||
const qsString = "[data-focus-target='" + firstErrorEl + "']";
|
||||
document.querySelector(qsString).focus();
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,18 @@
|
|||
<template>
|
||||
<!-- Heavily documented below -->
|
||||
<div class="col">
|
||||
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleClick(value)" @keyup.space="handleClick(value)">
|
||||
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
|
||||
I AM LIST CARD,
|
||||
buttonID is: {{buttonID}}
|
||||
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''">
|
||||
<input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
:value="buttonID"
|
||||
:aria-required="isRequired"
|
||||
:data-focus-target="groupName"
|
||||
@click="handleChange(value)"
|
||||
/>
|
||||
<label :for="buttonID" class="d-flex w-100 align-items-center px-2 h-100" :class="getLabelClasses" tabindex="-1">
|
||||
<img :id="buttonImageId" :class="!isWide ? 'order-1' : 'ms-auto order-3'" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" :alt="altText" />
|
||||
<p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
|
||||
|
|
@ -38,7 +48,8 @@ export default {
|
|||
value: { // Field initial value
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
validationRules: Array,
|
||||
},
|
||||
computed: {
|
||||
getLabelClasses(){
|
||||
|
|
@ -53,16 +64,52 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
// methods: {
|
||||
// handleClick(value) {
|
||||
// console.log('run handleChange, value is: ', value);
|
||||
// this.handleChange(value);
|
||||
// }
|
||||
// },
|
||||
setup(props) {
|
||||
const { groupName, value } = toRefs(props);
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
const { checked, handleChange } = useField(groupName, undefined, {
|
||||
|
||||
console.log('LC value.value is: ', value.value)
|
||||
|
||||
const {
|
||||
value: inputValue,
|
||||
errorMessage,
|
||||
handleBlur,
|
||||
handleChange,
|
||||
meta,
|
||||
} = useField(groupName, value => {
|
||||
if (props.validationRules) {
|
||||
let validationResults = [];
|
||||
|
||||
props.validationRules.forEach((rule) => {
|
||||
console.log("LC 2value is: ", value)
|
||||
// console.log("2inputValue is: ", inputValue);
|
||||
if (!rule.test(value)) {
|
||||
// console.log('uh oh, returning error!', rule.error)
|
||||
validationResults.push(rule.error);
|
||||
}
|
||||
});
|
||||
|
||||
return (validationResults.length > 0) ? validationResults[0] : true;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
{
|
||||
type: inputType,
|
||||
checkedValue: value,
|
||||
});
|
||||
return {
|
||||
checked,
|
||||
handleChange,
|
||||
// handleBlur,
|
||||
// errorMessage,
|
||||
// inputValue,
|
||||
// meta,
|
||||
};
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue