330 lines
9.2 KiB
Vue
330 lines
9.2 KiB
Vue
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
|
|
<template>
|
|
<div
|
|
:class="
|
|
isOverflowScrollable
|
|
? 'button-question button-question-overflow'
|
|
: 'button-question'
|
|
"
|
|
>
|
|
<div
|
|
v-if="questionText && answers && answers.length > 0"
|
|
class="question-text d-flex"
|
|
>
|
|
<span class="fw-bold w-100">{{ questionText }}</span>
|
|
</div>
|
|
|
|
<div class="w-100 d-flex justify-content-center">
|
|
<fieldset
|
|
class="w-100"
|
|
:aria-required="isRequired"
|
|
:class="getFieldSetClasses"
|
|
:role="isMultiSelect ? 'group' : 'radiogroup'"
|
|
:aria-labelledby="formatString(groupName)"
|
|
>
|
|
<legend
|
|
class="sr-only"
|
|
:data-focus-target="formatString(groupName)"
|
|
:id="formatString(groupName)"
|
|
tabindex="-1"
|
|
>
|
|
{{ questionText }}
|
|
{{
|
|
isMultiSelect && answers && answers.length > 1
|
|
? "Select one or more options below."
|
|
: "Select an option below."
|
|
}}
|
|
</legend>
|
|
<div :class="getComponentLoopWrapperClasses">
|
|
<div
|
|
:class="getComponentWrapperClasses"
|
|
v-for="answer in buttonsInfo"
|
|
:key="answer.Name ? answer.Name : answer"
|
|
>
|
|
<component
|
|
:is="buttonType"
|
|
:buttonLabel="answer.buttonLabel"
|
|
:buttonLabelSubCopy="answer.buttonLabelSubCopy"
|
|
:buttonImage="answer.buttonImage"
|
|
:buttonImageId="answer.buttonImageId"
|
|
:isMultiSelect="isMultiSelect"
|
|
:groupName="groupName"
|
|
:value="answer.value"
|
|
:modelValue="modelValue"
|
|
selectingInitiatesLoad
|
|
:isWide="isWide"
|
|
:validationRules="validationRules"
|
|
:textPosition="textPosition"
|
|
:selectOnKeypress="selectOnKeypress"
|
|
@change="handleAnswerChange"
|
|
/>
|
|
|
|
<!-- <component
|
|
:is="buttonType"
|
|
@isCheckedChanged="handleCheckedChanged"
|
|
:buttonID="answer.Name ? formatString(groupName) + '-' + answer.Name : formatString(groupName) + '-' + getAnswerString(answer, 'Text')"
|
|
:value="getValue(answer)"
|
|
:buttonLabel="answer.Text ? answer.Text : getAnswerString(answer, 'Name')"
|
|
:buttonLabelSubCopy="answer.SubText"
|
|
:textPosition="textPosition"
|
|
:isMultiSelect="isMultiSelect"
|
|
:groupName="formatString(groupName)"
|
|
:selectingInitiatesLoad="selectingInitiatesLoad"
|
|
:loaderColor="loaderColor"
|
|
:loaderPosition="loaderPosition"
|
|
:isWide=isWide
|
|
:isCashOrInsurance=isCashOrInsurance
|
|
:isRequired=isRequired
|
|
:buttonImage="answer.AnswerImageUrl"
|
|
:buttonImageId="answer.ImageId"
|
|
:altText="answer.Name ? answer.Name : answer"
|
|
screenReaderOnlyText="(opens new window)"
|
|
:colLength="getColLength"
|
|
:selectedValues="selectedValues"
|
|
data-test="button"
|
|
:validationRules="validationRules"
|
|
:class="[suppressError ? 'alertError' : '' , isCashOrInsurance ? 'radio-fancy' : '']"
|
|
:valueToLogType="valueToLogType"
|
|
/> -->
|
|
<!-- For nested questions -->
|
|
<transition name="fade" mode="out-in">
|
|
<div
|
|
v-if="
|
|
typeof selectedValues == 'string' &&
|
|
selectedValues == answer.Name
|
|
"
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</div>
|
|
<div class="row form-test-error mt-1">
|
|
<error-message
|
|
:name="formatString(groupName)"
|
|
v-if="!suppressError"
|
|
></error-message>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
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 { ErrorMessage } from "vee-validate";
|
|
import radio from "@/ux-components/radio/radio";
|
|
// import buttonWrap
|
|
|
|
export default {
|
|
name: "buttonQuestion",
|
|
props: {
|
|
buttonType: {
|
|
type: String,
|
|
default: "listButton",
|
|
},
|
|
isMultiSelect: Boolean,
|
|
groupName: String,
|
|
questionText: String,
|
|
answers: Array,
|
|
textPosition: {
|
|
type: String,
|
|
default: "text-center",
|
|
},
|
|
selectingInitiatesLoad: Boolean,
|
|
loaderColor: {
|
|
type: String,
|
|
default: "blue",
|
|
},
|
|
loaderPosition: {
|
|
type: String,
|
|
default: "right",
|
|
},
|
|
isRequired: Boolean,
|
|
isOverflowScrollable: Boolean,
|
|
isWide: Boolean,
|
|
isCashOrInsurance: Boolean,
|
|
modelValue: [Array, Number, String],
|
|
value: [Number, String],
|
|
validationRules: String,
|
|
suppressError: Boolean,
|
|
useTextForValue: Boolean,
|
|
valueToLogType: String,
|
|
selectOnKeypress: Boolean,
|
|
},
|
|
computed: {
|
|
getFieldSetClasses() {
|
|
if (this.isOverflowScrollable) {
|
|
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
|
|
} else if (this.buttonType == "listCard") {
|
|
return "w-100";
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
getComponentLoopWrapperClasses() {
|
|
let classes;
|
|
switch (this.buttonType) {
|
|
case "listButton":
|
|
classes = "w-100";
|
|
break;
|
|
case "listButtonHorizontal":
|
|
classes = "d-flex flex-row p-0";
|
|
break;
|
|
case "listCard":
|
|
classes = "row g-2 justify-content-center";
|
|
if (this.isWide) {
|
|
classes += " flex-column";
|
|
}
|
|
break;
|
|
case "radio":
|
|
classes = "ui-radio d-flex";
|
|
break;
|
|
}
|
|
return classes;
|
|
},
|
|
getComponentWrapperClasses() {
|
|
let classes = "";
|
|
|
|
classes += this.isWid ? "col-12" : "col";
|
|
|
|
if (this.buttonType == "radio") {
|
|
classes += " radio-button-container";
|
|
}
|
|
|
|
return classes;
|
|
},
|
|
getColLength() {
|
|
if (this.isWide) {
|
|
return "12";
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
// selectedValues: {
|
|
// get: function () {
|
|
// return this.modelValue;
|
|
// },
|
|
// set: function (newValue) {
|
|
// // this.$emit("update:modelValue", newValue);
|
|
// },
|
|
// },
|
|
buttonsInfo() {
|
|
// TODO KO temporary. It should always just be an array
|
|
return (Array.isArray(this.answers) ? this.answers : [])?.map(answer => ({
|
|
buttonLabel: answer.Text ?? answer,
|
|
altText: answer.Name ? answer.Name : answer,
|
|
buttonLabelSubCopy: answer.SubText,
|
|
buttonImage: answer.AnswerImageUrl,
|
|
buttonImageId: answer.ImageId,
|
|
groupName: this.formatString(this.groupName),
|
|
value: this.useTextForValue ? answer.Text : (answer.Name ?? answer)
|
|
}))
|
|
}
|
|
},
|
|
methods: {
|
|
formatString(str) {
|
|
return str?.replace(" ", "-");
|
|
},
|
|
getValue(answer) {
|
|
if (this.useTextForValue) {
|
|
return answer.Text;
|
|
}
|
|
return answer.Name ? answer.Name : answer;
|
|
},
|
|
getAnswerString(answer, prop = "Name") {
|
|
switch (typeof answer) {
|
|
case "string":
|
|
case "number":
|
|
case "boolean":
|
|
return this.formatString(answer.toString());
|
|
default:
|
|
return answer[prop]
|
|
? this.formatString(answer[prop])
|
|
: this.formatString(answer.toString());
|
|
}
|
|
},
|
|
// handleCheckedChanged(val) {
|
|
// if (this.selectingInitiatesLoad) {
|
|
// this.selectedValues = val.value;
|
|
// } else {
|
|
// if (Array.isArray(this.selectedValues)) {
|
|
// const newSelectedValues = this.selectedValues;
|
|
// val.checkValue
|
|
// ? newSelectedValues.push(val.value)
|
|
// : newSelectedValues.splice(newSelectedValues.indexOf(val.value), 1);
|
|
// this.selectedValues = newSelectedValues;
|
|
// } else {
|
|
// this.selectedValues = val.value;
|
|
// }
|
|
// }
|
|
// this.$emit("isCheckedChanged", val);
|
|
// },
|
|
handleAnswerChange(eventValue) {
|
|
console.log({
|
|
bqEvent: eventValue
|
|
})
|
|
this.$emit("update:modelValue", eventValue);
|
|
},
|
|
},
|
|
components: {
|
|
listButton,
|
|
listButtonHorizontal,
|
|
listCard,
|
|
ErrorMessage,
|
|
radio,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.button-question-overflow {
|
|
height: calc(100vh - 274px);
|
|
|
|
.overflow-scroll {
|
|
// Height will be determined by overall height of content above list
|
|
height: calc(100% - 314px);
|
|
overflow-x: hidden !important;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
}
|
|
.button-question {
|
|
color: $black;
|
|
|
|
.radio-button-container {
|
|
&:not(:last-child) {
|
|
padding-bottom: map-get($spacers, 2);
|
|
}
|
|
}
|
|
}
|
|
.question-text {
|
|
margin-top: 1.5rem;
|
|
margin-bottom: 1rem;
|
|
font-size: 1rem;
|
|
line-height: 1.625rem;
|
|
|
|
& > span {
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.vehicle-parts {
|
|
.question-text {
|
|
span {
|
|
font-size: 0.875rem;
|
|
text-align: left;
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
}
|
|
.question-text {
|
|
margin: 0;
|
|
}
|
|
fieldset {
|
|
.ui-radio {
|
|
margin: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|