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

Adding emit functionality

Browse source
This commit is contained in:
Max 2022-01-26 22:45:39 -05:00
parent 1521ad14c9
commit 46cca70d3a
4 changed files with 42 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,9 +9,10 @@
<fieldset class="w-100" :class="getFieldSetClasses" role="radiogroup" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
<legend class="sr-only">{{groupName}}</legend>
<div :class="getComponentWrapperClasses">
<component :is="buttonType" v-for="answer in answers" :key="answer"
<component :is="buttonType" v-for="answer in answers" :key="answer.Name ? answer.Name : answer"
@mouseup="chooseAnswer(answer.Name ? answer.Name : answer)"
@keyup.space="chooseAnswer(answer.Name ? answer.Name : answer)"
v-model="isChecked"
:buttonID="answer.Name ? answer.Name : answer"
:buttonLabel="answer.Text ? answer.Text : answer"
:buttonLabelSubCopy="answer.SubText"
@ -28,8 +29,8 @@
:buttonImageId="answer.ImageId"
:altText="answer.Name ? answer.Name : answer"
screenReaderOnlyText="(opens new window)"
:value="modelValue"
:colLength="this.answers.length < 3 ? '' : '-4'"
:modelValue="modelValue.includes(answer.Name)"
data-test="button"
/>
</div>
@ -74,7 +75,8 @@ export default {
isRequired: Boolean,
isOverflowScrollable: Boolean,
isWide: Boolean,
modelValue: String,
isChecked: Boolean,
modelValue: Array,
},
computed: {
getFieldSetClasses(){
@ -96,10 +98,17 @@ export default {
return classes;
}
},
data(){
return {
modelValueAnswers: [],
isItemChecked: Boolean
}
},
methods: {
chooseAnswer(answer) {
this.$emit("update:modelValue", answer);
},
this.modelValueAnswers.includes(answer) ? this.modelValueAnswers.pop(answer) : this.modelValueAnswers.push(answer);
this.$emit("update:modelValue", this.modelValueAnswers);
}
},
components: {
listButton,

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

@ -22,7 +22,6 @@ export default ({
return {
questionText: String,
answersFromCms: Array,
answersToDisplay: Array,
replaceOptions: Array,
groupName: String,
}
@ -31,21 +30,26 @@ export default ({
isMultiSelect: Boolean,
isAvailable: Boolean,
filterByVehicleCategory: Boolean,
modelValue: String,
modelValue: Array,
},
methods: {
initializeComponent(cmsContent, replaceOptions){
this.groupName = cmsContent.Name;
initializeComponent(cmsContent, replaceOptions, groupName){
this.groupName = groupName;
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
this.replaceOptions = replaceOptions;
}
},
mounted(){
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.replaceOptions.includes(name[1]);
});
computed: {
answersToDisplay(){
return Array.isArray(this.answersFromCms)
? 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.replaceOptions.includes(name[1])
})
: [];
}
},
watch: {
modelValue(val) {

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

@ -5,7 +5,7 @@
<funnelSubHeader
ref="funnelSubHeader"
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion" isAvailable />
<replaceOptionsQuestion ref="driverSideOptions" isAvailable isMultiSelect />
</div>
</template>
@ -54,8 +54,8 @@ export default ({
vm.$refs.funnelSubHeader.initializeComponent(
resultMap.cmsContent.FunnelSubHeaderWidget
);
vm.$refs.replaceOptionsQuestion.initializeComponent(
resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions
vm.$refs.driverSideOptions.initializeComponent(
resultMap.cmsContent.DriverSideReplaceOptionsQuestion, resultMap.damageOptions.driverSideOptions.availableReplacementOptions, 'DriverSideReplaceOptionsQuestion'
);
console.log(resultMap)

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

@ -1,8 +1,8 @@
<template>
<!-- Heavily documented below -->
<div :class="'col' + colLength">
<div class="list-card w-100 rounded-3 d-flex align-items-center h-100" :class="isWide ? 'horizontal' : ''" @mouseup="handleChange(value)" @keyup.space="handleChange(value)">
<input :type="isMultiSelect ? 'checkbox' : 'radio'" :id="buttonID" :name="groupName" :value="buttonID" :aria-required="isRequired" :data-focus-target="groupName" />
<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" v-model="isChecked" />
<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'" :src="buttonImage" :alt="altText" />
<p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">{{buttonLabel}}</p>
@ -40,7 +40,10 @@ export default {
default: ""
},
colLength: String,
modelValue: String,
isChecked: Boolean
},
emits: ['update:modelValue', 'update:isChecked'],
computed: {
getLabelClasses(){
if(this.isWide) {
@ -54,6 +57,13 @@ export default {
}
}
},
methods: {
handleClick(value){
this.handleChange(value);
this.$emit("update:modelValue", value);
this.$emit("update:isChecked");
}
},
setup(props) {
const { groupName, value } = toRefs(props);
const inputType = props.isMultiSelect ? "checkbox" : "radio";