SSR-237
This commit is contained in:
Johan Gunawan
parent
b8ae069b49
commit
abc5889b0c
1 changed files with 241 additions and 240 deletions
|
|
@ -1,76 +1,79 @@
|
||||||
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
|
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
:class="
|
:class="
|
||||||
isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
|
isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'
|
||||||
">
|
">
|
||||||
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
|
<div v-if="questionText && answers && answers.length > 0" class="question-text d-flex">
|
||||||
<span class="fw-bold w-100">{{ questionText }}</span>
|
<span class="fw-bold w-100">{{ questionText }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="w-100 d-flex justify-content-center">
|
<div class="w-100 d-flex justify-content-center">
|
||||||
<fieldset
|
<fieldset
|
||||||
class="w-100"
|
class="w-100"
|
||||||
:aria-required="isRequired"
|
:aria-required="isRequired"
|
||||||
:class="getFieldSetClasses"
|
:class="getFieldSetClasses"
|
||||||
:role="isMultiSelect ? 'group' : 'radiogroup'"
|
:role="isMultiSelect ? 'group' : 'radiogroup'"
|
||||||
:aria-labelledby="formatString(groupName)">
|
:aria-labelledby="formatString(groupName)">
|
||||||
<legend
|
<legend
|
||||||
class="sr-only"
|
class="sr-only"
|
||||||
:data-focus-target="formatString(groupName)"
|
:data-focus-target="formatString(groupName)"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
:id="formatString(groupName)">
|
:id="formatString(groupName)">
|
||||||
{{ questionText }}
|
{{ questionText }}
|
||||||
{{
|
{{
|
||||||
isMultiSelect && answers && answers.length > 1
|
isMultiSelect && answers && answers.length > 1
|
||||||
? "Select one or more options below."
|
? "Select one or more options below."
|
||||||
: "Select an option below."
|
: "Select an option below."
|
||||||
}}
|
}}
|
||||||
</legend>
|
</legend>
|
||||||
<div :class="getComponentLoopWrapperClasses">
|
<div :class="getComponentLoopWrapperClasses">
|
||||||
<div
|
<div
|
||||||
:class="getComponentWrapperClasses"
|
:class="getComponentWrapperClasses"
|
||||||
v-for="answer in buttonsInfo"
|
v-for="answer in buttonsInfo"
|
||||||
:key="answer.value ? answer.value : answer">
|
:key="answer.value ? answer.value : answer">
|
||||||
<component
|
<component
|
||||||
:is="buttonTypeString"
|
:is="buttonTypeString"
|
||||||
:buttonLabel="answer.buttonLabel"
|
:buttonLabel="answer.buttonLabel"
|
||||||
:buttonLabelSubCopy="answer.buttonLabelSubCopy"
|
:buttonLabelSubCopy="answer.buttonLabelSubCopy"
|
||||||
:buttonBodyCopy="answer.buttonBodyCopy"
|
:buttonBodyCopy="answer.buttonBodyCopy"
|
||||||
:buttonAuxillaryCopy="answer.buttonAuxillaryCopy"
|
:buttonAuxillaryCopy="answer.buttonAuxillaryCopy"
|
||||||
:buttonFooterCopy="answer.buttonFooterCopy"
|
:buttonFooterCopy="answer.buttonFooterCopy"
|
||||||
:buttonImage="answer.buttonImage"
|
:buttonImage="answer.buttonImage"
|
||||||
:buttonImageId="answer.buttonImageId"
|
:buttonImageId="answer.buttonImageId"
|
||||||
:groupName="answer.groupName"
|
:groupName="answer.groupName"
|
||||||
:isMultiSelect="isMultiSelect"
|
:isMultiSelect="isMultiSelect"
|
||||||
:value="answer.value"
|
:value="answer.value"
|
||||||
:selectingInitiatesLoad="selectingInitiatesLoad"
|
:selectingInitiatesLoad="selectingInitiatesLoad"
|
||||||
:isWide="isWide"
|
:isWide="isWide"
|
||||||
:validationRules="validationRules"
|
:validationRules="validationRules"
|
||||||
:textPosition="textPosition"
|
:textPosition="textPosition"
|
||||||
:additionalButtonStyling="additionalButtonStyling"
|
:additionalButtonStyling="additionalButtonStyling"
|
||||||
:lastValuePushedToGa="lastValuePushedToGa"
|
:lastValuePushedToGa="lastValuePushedToGa"
|
||||||
:setLastValuePushedToGa="setLastValuePushedToGa"
|
:setLastValuePushedToGa="setLastValuePushedToGa"
|
||||||
:suppressError="suppressError"
|
:suppressError="suppressError"
|
||||||
v-model="selectedValues" />
|
v-model="selectedValues" />
|
||||||
<!-- For nested questions -->
|
<!-- For nested questions -->
|
||||||
<transition name="fade" mode="out-in">
|
<transition name="fade" mode="out-in">
|
||||||
<div
|
<div
|
||||||
v-if="
|
v-if="
|
||||||
typeof selectedValues == 'string' &&
|
typeof selectedValues == 'string' &&
|
||||||
selectedValues == answer.value
|
selectedValues == answer.value
|
||||||
">
|
">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
</div>
|
</div>
|
||||||
<div class="row form-test-error mt-1">
|
<div class="row form-test-error mt-1">
|
||||||
<error-message :name="formatString(groupName)" v-if="!suppressError"></error-message>
|
<error-message
|
||||||
</div>
|
class="small"
|
||||||
</div>
|
:name="formatString(groupName)"
|
||||||
|
v-if="!suppressError"></error-message>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
@ -81,195 +84,193 @@ import radio from "@/ux-components/radio/radio";
|
||||||
import { ErrorMessage } from "vee-validate";
|
import { ErrorMessage } from "vee-validate";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "buttonQuestion",
|
name: "buttonQuestion",
|
||||||
props: {
|
props: {
|
||||||
buttonTypeString: {
|
buttonTypeString: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "listButton",
|
default: "listButton",
|
||||||
},
|
},
|
||||||
buttonTypeObject: {
|
buttonTypeObject: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
isMultiSelect: Boolean,
|
isMultiSelect: Boolean,
|
||||||
groupName: String,
|
groupName: String,
|
||||||
questionText: String,
|
questionText: String,
|
||||||
answers: Array,
|
answers: Array,
|
||||||
textPosition: {
|
textPosition: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "text-center",
|
default: "text-center",
|
||||||
},
|
},
|
||||||
selectingInitiatesLoad: Boolean,
|
selectingInitiatesLoad: Boolean,
|
||||||
loaderColor: {
|
loaderColor: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "blue",
|
default: "blue",
|
||||||
},
|
},
|
||||||
loaderPosition: {
|
loaderPosition: {
|
||||||
type: String,
|
type: String,
|
||||||
default: "right",
|
default: "right",
|
||||||
},
|
},
|
||||||
isRequired: Boolean,
|
isRequired: Boolean,
|
||||||
isOverflowScrollable: Boolean,
|
isOverflowScrollable: Boolean,
|
||||||
isWide: Boolean,
|
isWide: Boolean,
|
||||||
isCashOrInsurance: Boolean,
|
isCashOrInsurance: Boolean,
|
||||||
modelValue: [Array, Number, String],
|
modelValue: [Array, Number, String],
|
||||||
value: [Number, String],
|
value: [Number, String],
|
||||||
validationRules: String,
|
validationRules: String,
|
||||||
suppressError: Boolean,
|
suppressError: Boolean,
|
||||||
useTextForValue: Boolean,
|
useTextForValue: Boolean,
|
||||||
valueToLogType: String,
|
valueToLogType: String,
|
||||||
additionalButtonStyling: String,
|
additionalButtonStyling: String,
|
||||||
},
|
},
|
||||||
beforeMount() {
|
beforeMount() {
|
||||||
if (this.buttonTypeObject) {
|
if (this.buttonTypeObject) {
|
||||||
this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
|
this.$options.components[this.buttonTypeString] = this.buttonTypeObject;
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
lastValuePushedToGa: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
getFieldSetClasses() {
|
|
||||||
if (this.isOverflowScrollable) {
|
|
||||||
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
|
|
||||||
}
|
}
|
||||||
else if (this.buttonTypeString === "listCard") {
|
},
|
||||||
return "w-100";
|
data() {
|
||||||
}
|
return {
|
||||||
else {
|
lastValuePushedToGa: null,
|
||||||
return "";
|
};
|
||||||
}
|
},
|
||||||
},
|
computed: {
|
||||||
getComponentLoopWrapperClasses() {
|
getFieldSetClasses() {
|
||||||
let classes;
|
if (this.isOverflowScrollable) {
|
||||||
switch (this.buttonTypeString) {
|
return "container-fluid overflow-scroll position-absolute px-5 pt-1 py-0";
|
||||||
case "listButton":
|
} else if (this.buttonTypeString == "listCard") {
|
||||||
classes = "w-100";
|
return "w-100";
|
||||||
break;
|
} else {
|
||||||
case "listButtonHorizontal":
|
return "";
|
||||||
classes = "d-flex flex-row p-0";
|
}
|
||||||
break;
|
},
|
||||||
case "listCard":
|
getComponentLoopWrapperClasses() {
|
||||||
classes = "row g-2 justify-content-center";
|
let classes;
|
||||||
if (this.isWide) {
|
switch (this.buttonTypeString) {
|
||||||
classes += " flex-column";
|
case "listButton":
|
||||||
}
|
classes = "w-100";
|
||||||
break;
|
break;
|
||||||
case "radio":
|
case "listButtonHorizontal":
|
||||||
classes = "ui-radio d-flex";
|
classes = "d-flex flex-row p-0";
|
||||||
break;
|
break;
|
||||||
case "servicePackageRadio":
|
case "listCard":
|
||||||
classes = "package-main";
|
classes = "row g-2 justify-content-center";
|
||||||
break;
|
if (this.isWide) {
|
||||||
}
|
classes += " flex-column";
|
||||||
return classes;
|
}
|
||||||
},
|
break;
|
||||||
getComponentWrapperClasses() {
|
case "radio":
|
||||||
let classes = "";
|
classes = "ui-radio d-flex";
|
||||||
|
break;
|
||||||
|
case "servicePackageRadio":
|
||||||
|
classes = "package-main";
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return classes;
|
||||||
|
},
|
||||||
|
getComponentWrapperClasses() {
|
||||||
|
let classes = "";
|
||||||
|
|
||||||
classes += this.isWide ? "col-12" : "col";
|
classes += this.isWide ? "col-12" : "col";
|
||||||
|
|
||||||
if (this.buttonTypeString == "radio") {
|
if (this.buttonTypeString == "radio") {
|
||||||
classes += " radio-button-container";
|
classes += " radio-button-container";
|
||||||
} else if (this.buttonTypeString == "servicePackageRadio") {
|
} else if (this.buttonTypeString == "servicePackageRadio") {
|
||||||
classes = "package-wrapper";
|
classes = "package-wrapper";
|
||||||
}
|
}
|
||||||
|
|
||||||
return classes;
|
return classes;
|
||||||
},
|
},
|
||||||
buttonsInfo() {
|
buttonsInfo() {
|
||||||
return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
|
return (Array.isArray(this.answers) ? this.answers : [])?.map((answer) => ({
|
||||||
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
|
buttonLabel: answer.buttonLabel ?? answer.Text ?? answer,
|
||||||
altText: answer.altText ?? (answer.Name ? answer.Name : answer),
|
altText: answer.altText ?? (answer.Name ? answer.Name : answer),
|
||||||
buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText,
|
buttonLabelSubCopy: answer.buttonLabelSubCopy ?? answer.SubText,
|
||||||
buttonBodyCopy: answer.buttonBodyCopy ?? answer.buttonBodyCopy,
|
buttonBodyCopy: answer.buttonBodyCopy ?? answer.buttonBodyCopy,
|
||||||
buttonAuxillaryCopy: answer.buttonAuxillaryCopy ?? answer.buttonAuxillaryCopy,
|
buttonAuxillaryCopy: answer.buttonAuxillaryCopy ?? answer.buttonAuxillaryCopy,
|
||||||
buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
|
buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
|
||||||
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
|
buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
|
||||||
buttonImageId: answer.buttonImageId ?? answer.ImageId,
|
buttonImageId: answer.buttonImageId ?? answer.ImageId,
|
||||||
groupName: this.formatString(this.groupName),
|
groupName: this.formatString(this.groupName),
|
||||||
value:
|
value:
|
||||||
answer.value ??
|
answer.value ??
|
||||||
(this.useTextForValue && answer.Text ? answer.Text : answer.Name) ??
|
(this.useTextForValue && answer.Text ? answer.Text : answer.Name) ??
|
||||||
(typeof answer !== "object" ? answer : null),
|
(typeof answer !== "object" ? answer : null),
|
||||||
}));
|
}));
|
||||||
},
|
},
|
||||||
selectedValues: {
|
selectedValues: {
|
||||||
get() {
|
get() {
|
||||||
return this.modelValue;
|
return this.modelValue;
|
||||||
},
|
},
|
||||||
set(selectedAnswers) {
|
set(selectedAnswers) {
|
||||||
this.$emit("update:modelValue", selectedAnswers);
|
this.$emit("update:modelValue", selectedAnswers);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
formatString(str) {
|
formatString(str) {
|
||||||
return String(str).replaceAll(" ", "-");
|
return str?.replaceAll(" ", "-");
|
||||||
},
|
},
|
||||||
setLastValuePushedToGa(lastValuePushedToGa) {
|
setLastValuePushedToGa(lastValuePushedToGa) {
|
||||||
this.lastValuePushedToGa = lastValuePushedToGa;
|
this.lastValuePushedToGa = lastValuePushedToGa;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
listButton,
|
listButton,
|
||||||
listButtonHorizontal,
|
listButtonHorizontal,
|
||||||
listCard,
|
listCard,
|
||||||
ErrorMessage,
|
ErrorMessage,
|
||||||
radio,
|
radio,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.button-question-overflow {
|
.button-question-overflow {
|
||||||
height: calc(100vh - 274px);
|
height: calc(100vh - 274px);
|
||||||
|
|
||||||
.overflow-scroll {
|
.overflow-scroll {
|
||||||
// Height will be determined by overall height of content above list
|
// Height will be determined by overall height of content above list
|
||||||
height: calc(100% - 314px);
|
height: calc(100% - 314px);
|
||||||
overflow-x: hidden !important;
|
overflow-x: hidden !important;
|
||||||
-webkit-overflow-scrolling: touch;
|
-webkit-overflow-scrolling: touch;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.button-question {
|
.button-question {
|
||||||
color: $black;
|
color: $black;
|
||||||
|
|
||||||
.radio-button-container {
|
.radio-button-container {
|
||||||
&:not(:last-child) {
|
&:not(:last-child) {
|
||||||
padding-bottom: map-get($spacers, 2);
|
padding-bottom: map-get($spacers, 2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.question-text {
|
.question-text {
|
||||||
margin-top: 1.5rem;
|
margin-top: 1.5rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
|
|
||||||
& > span {
|
& > span {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.vehicle-parts {
|
.vehicle-parts {
|
||||||
.question-text {
|
.question-text {
|
||||||
span {
|
span {
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin: 0 0 0.5rem 0;
|
margin: 0 0 0.5rem 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.question-text {
|
.question-text {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
fieldset {
|
fieldset {
|
||||||
.ui-radio {
|
.ui-radio {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.welcome {
|
.welcome {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue