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

CSR-319: implement full validation on form-test

Browse source
This commit is contained in:
Adam Caouette 2022-03-01 09:16:18 -05:00
parent 52cc306860
commit e6e9c92f2f
12 changed files with 297 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -122,6 +122,7 @@ export default {
},
methods: {
handleCheckedChanged(val) {
console.log('BQ handleCheckedChanged, val: ', val)
if(this.isMultiSelect && this.selectedValues) {
// Add or remove item to array of data to emit
if(Array.isArray(this.selectedValues)) {
@ -132,6 +133,7 @@ export default {
} else {
this.selectedValues = [val.value];
}
console.log('BQ handleCheckedChanged, this.selectedValues is now: ', this.selectedValues)
},
},
components: {

68
src/layouts/form-test/form-test.vue
View file

@ -15,23 +15,31 @@
groupName="DamageLocationQuestion"
/>
<windshieldOptions
ref="windshieldOptions"
:showWindshieldDamageTypeQuestion="values.DamageLocationQuestion && values.DamageLocationQuestion.toString().includes('-Windshield')"
:suppressError="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
ref="windshieldOptions"
v-model="selectedWindshieldOptions"
:suppressError="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
:selectedDamageLocations="selectedDamageLocations"
/>
<alert
class="my-3"
v-if="errors.windshieldDamageTypeQuestion && errors.windshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
v-if="errors.WindshieldDamageTypeQuestion && errors.WindshieldDamageTypeQuestion.startsWith('checkForRepairAndReplace')"
alertClass="alert-danger"
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."
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."
:isDismissible="false"
/>
<sideDoorOptions
ref="sideDoorOptions"
groupName="SideDoorSideQuestion"
v-model="sideDoorOptionsData"
:selectedDamageLocations="selectedDamageLocations"
/>
<replaceOptionsQuestion
ref="driverSideOptions"
isAvailable
v-model="driverSideOptionsData"
groupName="DriverSideReplaceOptionsQuestion"
ref="backGlassOptions"
:isAvailable="isRearWindowDamageLocation"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required"
/>
<funnel-footer
ref="funnelFooter"
@ -60,19 +68,25 @@ 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 sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options";
import windshieldOptions from "@/layouts/vehicle-damage/windshield-options/windshield-options";
import alert from "@/ux-components/alert/alert";
import { Form } from 'vee-validate';
// Supporting files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
import { Form, defineRule } from "vee-validate";
// DEFINE VALIDATION RULES
defineRule("replace-options-required", (value) => {
if (!value || value.length < 1) {
return "Please select rear window type";
}
return true;
});
export default {
name: "form-test",
@ -110,12 +124,19 @@ export default {
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.driverSideOptions.initializeComponent(
resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
);
vm.$refs.damageLocation.initializeComponent(
resultMap.cmsContent.DamageLocationQuestion, resultMap.damageOptions
);
vm.$refs.sideDoorOptions.initializeComponent(
resultMap.cmsContent.SideDoorSideQuestion, resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.cmsContent.PassengerSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, resultMap.damageOptions.passengerSideOptions.availableReplacementOptions
);
vm.$refs.windshieldOptions.initializeComponent(
resultMap.cmsContent.WindshieldDamageTypeQuestion, resultMap.cmsContent.WindshieldChipCountQuestion,
resultMap.cmsContent.WindshieldReplaceOptionsQuestion, resultMap.damageOptions.windshieldOptions.availableReplacementOptions
);
vm.$refs.backGlassOptions.initializeComponent(
resultMap.cmsContent.RearReplaceOptionsQuestion, resultMap.damageOptions.backGlassOptions.availableReplacementOptions
);
vm.$refs.funnelFooter.initializeComponent(
resultMap.cmsContent.FunnelFooterWidget
);
@ -124,14 +145,29 @@ export default {
data(){
return {
selectedDamageLocations: [],
driverSideOptionsData: [],
sideDoorOptionsData: {
selectedDoorSides: [],
selectedDriverSideReplacOptions: [],
selectedPassengerSideReplaceOptions: []
},
selectedWindshieldOptions: [],
selectedRearReplaceOptions: [],
}
},
computed: {
isRearWindowDamageLocation() {
return this.selectedDamageLocations.some(selectedDamages =>
{
return selectedDamages.toUpperCase() === "REARWINDOW";
});
},
},
components: {
Form,
funnelHeader,
vehicleBanner,
funnelSubHeader,
sideDoorOptions,
damageLocationQuestion,
replaceOptionsQuestion,
funnelFooter,

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

@ -9,7 +9,6 @@
v-model="selectedValues"
validationRules="damage-location-required"
/>
</div>
</template>

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

@ -1,6 +1,6 @@
<template>
<transition name="fade" mode="out-in">
<div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-none' : ''" aria-live="polite">
<div v-if="isAvailable && this.answersToDisplay.length > 0" class="replace-options-question" :class="this.answersToDisplay.length < 2 ? 'd-noneXXXXXXXXXXXXXXXXX' : ''" aria-live="polite">
<buttonQuestion
isWide
:questionText="questionText"
@ -9,7 +9,7 @@
:groupName="groupName"
buttonType="listCard"
v-model="selectedValues"
validationRules="replace-options-required"
:validationRules="validationRules"
/>
</div>
</transition>
@ -18,15 +18,6 @@
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
import store from "@/store";
import { defineRule } from "vee-validate";
// DEFINE VALIDATION RULES
defineRule("replace-options-required", (value) => {
if (!value || value.length < 1) {
return "Please select window";
}
return true;
});
export default ({
name: "replaceOptionsQuestion",
@ -43,6 +34,7 @@ export default ({
groupName: String,
modelValue: Array,
isMultiSelect: Boolean,
validationRules: String,
},
methods: {
initializeComponent(cmsContent, replaceOptions){
@ -50,12 +42,26 @@ export default ({
this.answersFromCms = cmsContent.Answers;
this.replaceOptions = replaceOptions;
},
updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
// updateSelectedValues() {
// // UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
// console.log(' ROQ updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
// console.log(' ROQ updateSelectedValues, this.selectedValues: ', this.selectedValues);
// 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!')
this.selectedValues = [this.answersToDisplay[0].Name];
}
},
},
computed: {
selectedValues: {
@ -82,12 +88,13 @@ export default ({
});
},
},
watch: {
isAvailable(val) {
// CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
val && this.updateSelectedValues();
}
},
// watch: {
// isAvailable(val) {
// console.log('ROQ ^^^ isAvailable changed.')
// // CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
// val && this.updateSelectedValues();
// }
// },
components: {
buttonQuestion,
}

46
src/layouts/vehicle-damage/side-door-options/side-door-options.vue
View file

@ -9,13 +9,28 @@
:groupName="groupName"
buttonType="listCard"
v-model="selectedDoorSidesValues"
validationRules="damage-side-required"
/>
</div>
</transition>
<replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
<replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
<replaceOptionsQuestion
ref="driverSideOptions"
:isAvailable="isDriverSideReplaceOptionsQuestionAvailable"
groupName="driverSideOptions"
isMultiSelect
filterByVehicleCategory
v-model="selectedDriverSideReplacOptionsValues"
validationRules="driver-side-options-required"
/>
<replaceOptionsQuestion
ref="passengerSideOptions"
:isAvailable="isPassengerSideReplaceOptionsQuestionAvailable"
groupName="passengerSideOptions"
isMultiSelect
filterByVehicleCategory
v-model="selectedPassengerSideReplaceOptionsValues"
validationRules="passenger-side-options-required"
/>
</div>
</template>
@ -23,6 +38,29 @@
import buttonQuestion from "@/common-components/button-question/button-question";
import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import store from "@/store";
import { defineRule } from "vee-validate";
// DEFINE VALIDATION RULES
defineRule("damage-side-required", (value) => {
if (!value || value.length < 1) {
return "Please select vehicle side";
}
return true;
});
defineRule("driver-side-options-required", (value) => {
if (!value || value.length < 1) {
return "Please select window";
}
return true;
});
defineRule("passenger-side-options-required", (value) => {
if (!value || value.length < 1) {
return "Please select window";
}
return true;
});
export default ({
name: "sideDoorOptions",

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

@ -24,6 +24,7 @@
:isAvailable="isRearWindowDamageLocation"
v-model="selectedRearReplaceOptions"
groupName="BackGlassReplaceOptionsQuestion"
validationRules="replace-options-required"
/>
<funnelFooter ref="funnelFooter" @back-clicked="backButtonAction" />
</div>
@ -46,6 +47,15 @@ import { settleAllPromises } from "@/helpers/layout-helper";
import { storeActions } from "@/constants/store-actions";
import store from "@/store";
import baseMixin from "@/mixins/base-mixin";
import { defineRule } from "vee-validate";
// DEFINE VALIDATION RULES
defineRule("replace-options-required", (value) => {
if (!value || value.length < 1) {
return "Please select rear window type";
}
return true;
});
export default {

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

@ -7,6 +7,7 @@
:groupName="groupName"
buttonType="listButtonHorizontal"
v-model="selectedChipCountValues"
:validationRules="validationRules"
/>
</div>
</transition>
@ -27,12 +28,23 @@ export default ({
modelValue: Array,
groupName: String,
isAvailable: Boolean,
validationRules: String,
},
methods: {
initializeComponent(cmsContent){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
}
},
updateSelectedValues() {
// UPDATE SELECTEDVALUES IF ONLY ONE ANSWER
console.log(' updateSelectedValues, this.answersToDisplay: ', this.answersToDisplay);
console.log(' updateSelectedValues, this.selectedValues: ', this.selectedValues);
if(Array.isArray(this.answersToDisplay) && this.answersToDisplay.length === 1 && this.selectedValues) {
console.log(' ONLY ONE ANSWER!')
this.selectedValues = [this.answersToDisplay[0].Name];
}
},
},
computed: {
selectedChipCountValues: {
@ -44,6 +56,13 @@ export default ({
}
},
},
watch: {
isAvailable(val) {
console.log('*** isAvailable changed.')
// CHECK TO UPDATE SELECTED VALUES WHEN ISAVAILABLE IS TRUE
val && this.updateSelectedValues();
}
},
components: {
buttonQuestion,
}

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

@ -7,6 +7,8 @@
:groupName="groupName"
buttonType="listCard"
v-model="selectedValues"
:suppressError="suppressError"
:validationRules="validationRules"
/>
</div>
</transition>
@ -14,22 +16,30 @@
<script>
import buttonQuestion from "@/common-components/button-question/button-question";
//import { defineRule } from "vee-validate";
//DEFINE VALIDATION RULES
// add these to the button component above:
// validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
// :suppressError="suppressError"
import store from "@/store";
// import { defineRule } from "vee-validate";
//
// //DEFINE VALIDATION RULES
// // add these to the button component above:
// // validationRules="windshield-damage-required|checkForRepairAndReplace:@DamageLocationQuestion"
// // :suppressError="suppressError"
// defineRule("windshield-damage-required", (value) => {
// // console.log('validation rule - windshield-damage-required, value: ', value);
// if (!value || value.length < 1) {
// // console.log('validation rule - windshield-damage-required, RETURN ERROR');
// return "Please select windshield damage";
// }
// // console.log('validation rule - windshield-damage-required, return true');
// return true;
// });
// defineRule("checkForRepairAndReplace", (value, [other]) => {
// if (value === "Windshield-Chip" && other.toString().includes("Windshield") && other.length > 1) {
// // console.log('validation rule - checkForRepairAndReplace, value: ', value);
// // console.log('validation rule - checkForRepairAndReplace, other: ', other);
// if (value.toUpperCase() === "REPAIR" && other.toString().includes("Windshield") && other.length > 1) {
// console.log('validation rule - checkForRepairAndReplace, RETURN ERROR');
// return "checkForRepairAndReplace error"
// }
// // console.log('validation rule - checkForRepairAndReplace, return true');
// return true;
// });
@ -46,12 +56,13 @@ export default ({
groupName: String,
isAvailable: Boolean,
suppressError: Boolean,
validationRules: String,
},
methods: {
initializeComponent(cmsContent){
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
}
},
},
computed: {
selectedValues: {
@ -62,6 +73,21 @@ export default ({
this.$emit("update:modelValue", newValue);
}
},
answersToDisplay(){
const filteredAnswers = Array.isArray(this.answersFromCms)
? this.answersFromCms.filter(ans =>
{
const name = ans.Name.split('-');
return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category && this.replaceOptions.includes(name[1]) : this.replaceOptions.includes(ans.Name);
})
: [];
return filteredAnswers.map(ans => {
const newName = ans.Name.includes('-') ? ans.Name.split('-')[1] : ans.Name;
ans.Name = newName;
return ans;
});
},
},
components: {
buttonQuestion,

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

@ -4,17 +4,20 @@
:isAvailable=isWindshieldDamageLocation
:suppressError="suppressError"
groupName="WindshieldDamageTypeQuestion"
v-model="selectedWindshieldDamageTypeValues"
v-model="selectedWindshieldDamageTypeValues"
validationRules="windshield-damage-type-required|checkForRepairAndReplace:@DamageLocationQuestion"
/>
<windshieldChipCountQuestion ref="windshieldChipCountQuestion"
:isAvailable=isRepairOptionSelected
groupName="WindshieldChipCountQuestion"
v-model="selectedWindshieldChipCountValues"
v-model="selectedWindshieldChipCountValues"
validationRules="windshield-chip-count-required"
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
validationRules="windshield-replace-options-required"
/>
</div>
</template>
@ -23,6 +26,36 @@
import windshieldDamageTypeQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question";
import windshieldChipCountQuestion from"@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question";
import replaceOptionsQuestion from"@/layouts/vehicle-damage/replace-options-question/replace-options-question";
import { defineRule } from "vee-validate";
// DEFINE VALIDATION RULES
defineRule("windshield-damage-type-required", (value) => {
console.log('windshield-damage-type-required, value: ', value);
if (!value || value.length < 1) {
return "Please select windshield damage";
}
return true;
});
defineRule("checkForRepairAndReplace", (value, [other]) => {
console.log('checkForRepairAndReplace, value: ', value, ' / other: ', other);
if (value.toString().toUpperCase().includes("REPAIR") && other.toString().toUpperCase().includes("WINDSHIELD") && other.length > 1) {
return "checkForRepairAndReplace error"
}
return true;
});
defineRule("windshield-chip-count-required", (value) => {
if (!value || value.length < 1) {
return "Please select chip(s)";
}
return true;
});
defineRule("windshield-replace-options-required", (value) => {
if (!value || value.length < 1) {
return "Please select windshield part";
}
return true;
});
export default ({
name: "windshieldOptions",

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

@ -1,9 +1,7 @@
<template>
<div
class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
:class="hasError ? 'has-error' : ''"
@mouseup="handleClick(value)"
@keyup.space="handleClick(value)"
:class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
>
<input
:type="isMultiSelect ? 'checkbox' : 'radio'"
@ -12,6 +10,7 @@
:value="value"
:aria-required="isRequired"
:data-focus-target="groupName"
@click="handleChange(value)"
v-model="checkValue"
@change="!selectingInitiatesLoad ? handleCheckChange() : ''"
/>
@ -46,7 +45,6 @@
</template>
<script>
import { toRefs } from "vue";
import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader";
@ -69,6 +67,7 @@ export default {
type: String,
default: "",
},
validationRules: String,
selectedValues: [Array, String],
hasError: Boolean,
},
@ -105,20 +104,26 @@ export default {
loader,
},
setup(props) {
const { groupName, value } = toRefs(props);
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const { checked, handleChange, errorMessage } = useField(
groupName,
undefined,
{
type: inputType,
checkedValue: value,
}
);
const fieldOptions = {
type: inputType,
checkedValue: props.value,
};
if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
fieldOptions['initialValue'] = fieldOptions.checkedValue;
}
const {
checked,
handleChange,
errors,
} = useField(props.groupName, props.validationRules, fieldOptions);
return {
checked,
handleChange,
errorMessage,
errors,
};
},
};

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

@ -1,9 +1,7 @@
<template>
<div
class="list-group list-button d-flex flex-column w-100 mb-2"
:class="hasError ? 'has-error' : ''"
@mouseup="handleClick(value)"
@keyup.space="handleClick(value)"
:class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
>
<input
:type="isMultiSelect ? 'checkbox' : 'radio'"
@ -12,6 +10,7 @@
:value="value"
:aria-required="isRequired"
:data-focus-target="groupName"
@click="handleChange(value)"
v-model="checkValue"
@change="!selectingInitiatesLoad ? handleCheckChange() : ''"
>
@ -49,9 +48,9 @@
</template>
<script>
import { toRefs } from "vue";
import { useField } from "vee-validate";
import loader from "@/ux-components/loader/loader";
export default {
name: "listButton",
props: {
@ -71,6 +70,7 @@ export default {
type: [String, Number],
default: "",
},
validationRules: String,
selectedValues: [Array, String],
hasError: Boolean,
},
@ -107,20 +107,26 @@ export default {
loader,
},
setup(props) {
const { groupName, value } = toRefs(props);
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const { checked, handleChange, errorMessage } = useField(
groupName,
undefined,
{
type: inputType,
checkedValue: value,
}
);
const fieldOptions = {
type: inputType,
checkedValue: props.value,
};
if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
fieldOptions['initialValue'] = fieldOptions.checkedValue;
}
const {
checked,
handleChange,
errors,
} = useField(props.groupName, props.validationRules, fieldOptions);
return {
checked,
handleChange,
errorMessage,
errors,
};
},
};

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

@ -13,8 +13,10 @@
:data-focus-target="groupName"
@click="handleChange(value)"
v-model="checkValue"
@change="handleCheckChange()"
@change="handleCheckChange(value)"
/>
value: {{ value }}
checkValue: {{ checkValue }}
<label
:for="buttonID"
class="d-flex w-100 align-items-center px-2 h-100"
@ -75,12 +77,13 @@ export default {
},
data(){
return {
checkValue: Boolean,
checkValue: [Boolean, String],
}
},
created(){
if(Array.isArray(this.selectedValues)){
this.checkValue = this.isMultiSelect ? this.selectedValues.includes(this.value) : this.selectedValues[0];
console.log('=================== this.checkValue: ', this.checkValue)
}
},
computed: {
@ -98,6 +101,9 @@ export default {
},
methods: {
handleCheckChange(newValue, oldValue){
// console.log('LC handleCheckChange... oldValue: ', oldValue);
// console.log('LC handleCheckChange... newValue: ', newValue);
const isInitialization = typeof(oldValue) === 'function';
if (!isInitialization) {
this.$emit('isCheckedChanged', { checkValue: this.checkValue, value: this.value.toString() });
@ -105,22 +111,42 @@ export default {
}
},
setup(props) {
console.log('RUNNING setup... ... ... props.validationRules: ', props.validationRules)
console.log('RUNNING setup... ... ... props.value: ', props.value)
console.log('RUNNING setup... ... ... props.selectedValues: ', props.selectedValues)
const inputType = props.isMultiSelect ? "checkbox" : "radio";
const {
value: inputValue,
handleChange,
errors,
} = useField(props.groupName, props.validationRules,
{
// const { selectedValues, value } = toRefs(props);
// console.log('XXXXXXX selectedValues: ', selectedValues)
// console.log('XXXXXXX value: ', value)
const fieldOptions = {
type: inputType,
checkedValue: props.value,
});
};
if (Array.isArray(props.selectedValues) && props.selectedValues.length == 1) {
console.log('p r o p s . s el ectedV al ues, props.selectedValues: ', props.selectedValues)
fieldOptions['initialValue'] = fieldOptions.checkedValue;
}
const {
handleChange,
errors,
} = useField(props.groupName, props.validationRules, fieldOptions);
return {
handleChange,
errors,
};
},
// watch: {
// checkValue(val) {
// console.log('LC > CHANGE in checkValue, val: ', val)
// // this.handleChange()
// }
// },
};
</script>