CSR-762 WIP
This commit is contained in:
Katie
parent
6e901a6918
commit
ace997bbf5
6 changed files with 235 additions and 165 deletions
|
|
@ -42,7 +42,7 @@
|
|||
v-for="answer in answers"
|
||||
:key="answer.Name ? answer.Name : answer"
|
||||
>
|
||||
<component
|
||||
<component
|
||||
:is="buttonType"
|
||||
:buttonLabel="
|
||||
answer.Text ? answer.Text : getAnswerString(answer, 'Name')
|
||||
|
|
@ -50,10 +50,11 @@
|
|||
:buttonLabelSubCopy="answer.SubText"
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:groupName="groupName"
|
||||
:value="answer.Value"
|
||||
:value="answer.Name"
|
||||
:modelValue="modelValue"
|
||||
@change="e => handleSelectionChange(e, answer.Value)"
|
||||
@change="(e) => test(e)"
|
||||
/>
|
||||
|
||||
<!-- <component
|
||||
:is="buttonType"
|
||||
@isCheckedChanged="handleCheckedChanged"
|
||||
|
|
@ -111,7 +112,7 @@ import listButtonHorizontal from "@/ux-components/list-button-horizontal/list-bu
|
|||
import listCard from "@/ux-components/list-card/list-card";
|
||||
import { ErrorMessage } from "vee-validate";
|
||||
import radio from "@/ux-components/radio/radio";
|
||||
import testButton from "@/common-components/test-button.vue";
|
||||
// import buttonWrap
|
||||
|
||||
export default {
|
||||
name: "buttonQuestion",
|
||||
|
|
@ -205,7 +206,6 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
formatString(str) {
|
||||
console.log(str);
|
||||
return str?.replace(" ", "-");
|
||||
},
|
||||
getValue(answer) {
|
||||
|
|
@ -242,28 +242,40 @@ export default {
|
|||
}
|
||||
this.$emit("isCheckedChanged", val);
|
||||
},
|
||||
handleSelectionChange(event, value) {
|
||||
console.log(value)
|
||||
console.log("BQ handleSelectionChange: ", event)
|
||||
let isChecked = event.target.checked;
|
||||
if (this.isMultiSelect && this.modelValue instanceof Array) {
|
||||
let newValue = [...this.modelValue];
|
||||
const toggledValue = event.target.value;
|
||||
console.log("A: ", this.modelValue)
|
||||
console.log("isChecked: ", isChecked)
|
||||
console.log("value: ", event.target.value)
|
||||
if (isChecked) {
|
||||
newValue.push(toggledValue);
|
||||
} else {
|
||||
newValue.splice(newValue.indexOf(toggledValue), 1);
|
||||
}
|
||||
console.log("handleCheckboxChange: ", newValue);
|
||||
this.$emit("update:modelValue", newValue);
|
||||
} else {
|
||||
console.log("handleRadioChange: ", isChecked);
|
||||
this.$emit("update:modelValue", value);
|
||||
}
|
||||
test(event) {
|
||||
console.log(event)
|
||||
this.$emit("update:modelValue", event);
|
||||
},
|
||||
// test(event, value) {
|
||||
// console.log(value)
|
||||
// console.log("BQ event: ", event)
|
||||
// let isChecked = event.target?.checked;
|
||||
// let valueToEmit;
|
||||
// if (this.isMultiSelect && this.modelValue instanceof Array) {
|
||||
// let newValue = [...this.modelValue];
|
||||
// const toggledValue = event.target?.value;
|
||||
// console.log("A: ", this.modelValue)
|
||||
// console.log("isChecked: ", isChecked)
|
||||
// console.log("value: ", toggledValue)
|
||||
// if (isChecked) {
|
||||
// newValue.push(toggledValue);
|
||||
// } else {
|
||||
// newValue.splice(newValue.indexOf(toggledValue), 1);
|
||||
// }
|
||||
// console.log("handleCheckboxChange: ", newValue);
|
||||
// // this.$emit("update:modelValue", newValue);
|
||||
// // this.$emit("update:value", newValue)
|
||||
|
||||
// valueToEmit = newValue;
|
||||
// } else {
|
||||
// console.log("handleRadioChange: ", isChecked);
|
||||
// // this.$emit("update:modelValue", value);
|
||||
// valueToEmit = value;
|
||||
// }
|
||||
|
||||
// console.log("BQ emitting: ", valueToEmit)
|
||||
// this.$emit("update:modelValue", valueToEmit);
|
||||
// },
|
||||
},
|
||||
components: {
|
||||
listButton,
|
||||
|
|
@ -271,7 +283,7 @@ export default {
|
|||
listCard,
|
||||
ErrorMessage,
|
||||
radio,
|
||||
testButton,
|
||||
// testButton,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
28
src/common-components/button-wrapper/button-wrapper.vue
Normal file
28
src/common-components/button-wrapper/button-wrapper.vue
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<template>
|
||||
<label :class="classes" :for="buttonId">
|
||||
classes: {{classes}}<br/>
|
||||
value: {{value}} <br/>
|
||||
modelValue: {{modelValue}} <br/>
|
||||
buttonId: {{buttonId}} <br/>
|
||||
<input
|
||||
:type="inputType"
|
||||
|
||||
:id="buttonId"
|
||||
:name="groupName"
|
||||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:checked="isChecked"
|
||||
@change="handleSelectionChange"
|
||||
/>
|
||||
|
||||
<slot></slot>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonMixin from "@/mixins/button-mixin";
|
||||
export default {
|
||||
name: "button-wrapper",
|
||||
mixins: [buttonMixin],
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
<template>
|
||||
<label :class="{ classNames }">
|
||||
value: {{value}} <br/>
|
||||
modelValue: {{modelValue}} <br/>
|
||||
isChecked: {{isChecked}} <br/>
|
||||
<input
|
||||
v-if="isMultiSelect"
|
||||
type="checkbox"
|
||||
:id="JSON.stringify(modelValue)"
|
||||
:name="groupName"
|
||||
:aria-required="isRequired"
|
||||
:value="value"
|
||||
:checked="isChecked"
|
||||
@change="handleSelectionChange"
|
||||
/>
|
||||
<input
|
||||
v-else
|
||||
type="radio"
|
||||
:id="JSON.stringify(modelValue)"
|
||||
:name="groupName"
|
||||
:aria-required="isRequired"
|
||||
v-model="modelValue"
|
||||
:checked="isChecked"
|
||||
@change="handleSelectionChange"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import buttonMixin from "../mixins/button-mixin";
|
||||
export default {
|
||||
name: "test-button",
|
||||
mixins: [buttonMixin],
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,7 +1,28 @@
|
|||
<template>
|
||||
<div>
|
||||
<h2>ListButton</h2>
|
||||
selectedMultiselectValues: {{ selectedMultiselectValues }}
|
||||
|
||||
<button-question
|
||||
questionText="This is a question?"
|
||||
:answers="sampleAnswers"
|
||||
:isMultiSelect="true"
|
||||
groupName="multiselect-test"
|
||||
v-model="selectedMultiselectValues"
|
||||
></button-question>
|
||||
|
||||
<br /><br /><br />
|
||||
selectedRadioValue: {{ selectedRadioValue }}
|
||||
|
||||
<button-question
|
||||
questionText="This is another question?"
|
||||
:answers="sampleAnswers"
|
||||
:isMultiSelect="false"
|
||||
groupName="radio-test"
|
||||
v-model="selectedRadioValue"
|
||||
></button-question>
|
||||
<!-- selectedMultiselectValues: {{ selectedMultiselectValues }}
|
||||
|
||||
<button-question
|
||||
buttonType="testButton"
|
||||
:answers="sampleAnswers"
|
||||
|
|
@ -19,7 +40,7 @@
|
|||
:isMultiSelect="false"
|
||||
groupName="radio-test"
|
||||
v-model="selectedRadioValue"
|
||||
></button-question>
|
||||
></button-question> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -33,15 +54,15 @@ export default {
|
|||
sampleAnswers: [
|
||||
{
|
||||
Text: "Part 1",
|
||||
Value: "PART1",
|
||||
Name: "PART1",
|
||||
},
|
||||
{
|
||||
Text: "Part 2",
|
||||
Value: "PART2",
|
||||
Name: "PART2",
|
||||
},
|
||||
{
|
||||
Text: "Part 3",
|
||||
Value: "PART3",
|
||||
Name: "PART3",
|
||||
},
|
||||
],
|
||||
selectedMultiselectValues: [],
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
export default {
|
||||
emits: ["change"],
|
||||
model: {
|
||||
prop: "modelValue",
|
||||
event: "change",
|
||||
|
|
@ -32,22 +33,36 @@ export default {
|
|||
type: String,
|
||||
required: true,
|
||||
},
|
||||
validationRules: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
classes: [String, Array, Object],
|
||||
},
|
||||
data() {},
|
||||
methods: {
|
||||
handleSelectionChange(event) {
|
||||
console.log(event);
|
||||
console.log(this.value);
|
||||
console.log(this.modelValue);
|
||||
let isChecked = event.target.checked;
|
||||
console.log("BM value: ", this.value);
|
||||
let valueToEmit;
|
||||
if (this.isMultiSelect && this.modelValue instanceof Array) {
|
||||
let newValue = [...this.modelValue];
|
||||
if (isChecked && !newValue.includes(this.value)) {
|
||||
if (isChecked && !this.modelValue.includes(this.value)) {
|
||||
newValue.push(this.value);
|
||||
} else {
|
||||
newValue.splice(newValue.indexOf(this.value), 1);
|
||||
}
|
||||
this.$emit("change", newValue);
|
||||
|
||||
valueToEmit = newValue;
|
||||
} else {
|
||||
this.$emit("change", isChecked);
|
||||
valueToEmit = isChecked;
|
||||
}
|
||||
|
||||
console.log("ButtonWrapper is emitting: ", valueToEmit);
|
||||
this.$emit("change", valueToEmit);
|
||||
// this.$emit("change", event);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -57,5 +72,11 @@ export default {
|
|||
}
|
||||
return this.modelValue === this.value;
|
||||
},
|
||||
inputType() {
|
||||
return this.isMultiSelect ? "checkbox" : "radio";
|
||||
},
|
||||
buttonId() {
|
||||
return JSON.stringify(this.value);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,14 +1,8 @@
|
|||
<template>
|
||||
<div
|
||||
<!-- <div
|
||||
class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
|
||||
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
|
||||
@keyup.space="triggerButton"
|
||||
@keyup.enter="triggerButton"
|
||||
@keyup.up="handleKeyupArrow"
|
||||
@keyup.down="handleKeyupArrow"
|
||||
@keyup.left="handleKeyupArrow"
|
||||
@keyup.right="handleKeyupArrow">
|
||||
<input
|
||||
:class="[(errors.length > 0 || hasError) ? 'has-error' : '']"> -->
|
||||
<!-- <input
|
||||
:type="isMultiSelect ? 'checkbox' : 'radio'"
|
||||
:id="buttonID"
|
||||
:name="groupName"
|
||||
|
|
@ -17,39 +11,56 @@
|
|||
v-model="checkValue"
|
||||
:checked="checkValue"
|
||||
@change="handleInputChange"
|
||||
>
|
||||
<label
|
||||
> -->
|
||||
<!-- <label
|
||||
tabindex="-1"
|
||||
:for="buttonID"
|
||||
:aria-label="buttonLabel"
|
||||
class="d-flex flex-column justify-content-center py-3 px-4"
|
||||
@mouseup="triggerButton"
|
||||
> -->
|
||||
LB value: {{ value }}<br />
|
||||
LB modelValue: {{ modelValue }}
|
||||
<!-- , {'has-error': errors.length > 0 || hasError} -->
|
||||
<!-- <buttonWrapper
|
||||
v-bind="$props"
|
||||
:classes="['list-group list-button rounded-3 d-flex flex-column w-100 mb-2', {'has-error': errors.length > 0 || hasError}]"
|
||||
@change="(e) => $emit('change', e)"
|
||||
> -->
|
||||
LB groupName: {{ groupName }}
|
||||
<buttonWrapper
|
||||
:isMultiSelect="isMultiSelect"
|
||||
:modelValue="modelValue"
|
||||
:value="value"
|
||||
:groupName="groupName"
|
||||
:classes="[
|
||||
'list-group list-button rounded-3 d-flex flex-column w-100 mb-2',
|
||||
{ 'has-error': errors.length > 0 || hasError },
|
||||
]"
|
||||
@change="lbTest"
|
||||
>
|
||||
<div
|
||||
tabindex="-1"
|
||||
:aria-label="buttonLabel"
|
||||
class="list-button-content d-flex flex-column justify-content-center py-3 px-4"
|
||||
>
|
||||
<span
|
||||
class="m-0"
|
||||
:class="textPosition"
|
||||
>
|
||||
<span class="m-0" :class="textPosition">
|
||||
{{ buttonLabel }}
|
||||
</span>
|
||||
<span
|
||||
v-if="buttonLabelSubCopy"
|
||||
class="m-0 small"
|
||||
:class="textPosition"
|
||||
>
|
||||
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
|
||||
{{ buttonLabelSubCopy }}
|
||||
</span>
|
||||
<span
|
||||
v-if="screenReaderOnlyText"
|
||||
class="sr-only"
|
||||
>
|
||||
<span v-if="screenReaderOnlyText" class="sr-only">
|
||||
{{ screenReaderOnlyText }}
|
||||
</span>
|
||||
<loader
|
||||
v-if="isLoaderDisplayed && selectingInitiatesLoad"
|
||||
:class="[this.loaderColor, this.loaderPosition]"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</buttonWrapper>
|
||||
<!-- </label> -->
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -57,91 +68,99 @@ import { useField } from "vee-validate";
|
|||
import { toRef } from "vue";
|
||||
import loader from "@/ux-components/loader/loader";
|
||||
import { queryStrings } from "@/constants/query-strings";
|
||||
import buttonMixin from "@/mixins/button-mixin";
|
||||
import buttonWrapper from "@/common-components/button-wrapper/button-wrapper";
|
||||
|
||||
export default {
|
||||
name: "listButton",
|
||||
mixins: [buttonMixin],
|
||||
props: {
|
||||
isMultiSelect: Boolean,
|
||||
groupName: String,
|
||||
// groupName: String,
|
||||
buttonLabel: [Number, String],
|
||||
buttonID: [Number, String],
|
||||
isRequired: Boolean,
|
||||
// isRequired: Boolean,
|
||||
textPosition: String,
|
||||
buttonLabelSubCopy: String,
|
||||
screenReaderOnlyText: String,
|
||||
selectingInitiatesLoad: Boolean,
|
||||
loaderColor: String,
|
||||
loaderPosition: String,
|
||||
value: {
|
||||
// Field initial value
|
||||
type: [String, Number],
|
||||
default: "",
|
||||
},
|
||||
|
||||
validationRules: String,
|
||||
selectedValues: [Array, String],
|
||||
hasError: Boolean,
|
||||
valueToLogType: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoaderDisplayed: false,
|
||||
checkValue: false,
|
||||
// checkValue: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
if (Array.isArray(this.validateValue)) {
|
||||
this.checkValue = this.isValueSelectedByArray(this.selectedValues);
|
||||
const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
|
||||
|
||||
if (this.checkValue != isSelectedByValidator) {
|
||||
this.handleChange(this.value);
|
||||
}
|
||||
}
|
||||
else {
|
||||
this.checkValue = this.selectedValues == this.value;
|
||||
}
|
||||
},
|
||||
// mounted() {
|
||||
// if (Array.isArray(this.validateValue)) {
|
||||
// this.checkValue = this.isValueSelectedByArray(this.selectedValues);
|
||||
// const isSelectedByValidator = this.isValueSelectedByArray(this.validateValue);
|
||||
|
||||
// if (this.checkValue != isSelectedByValidator) {
|
||||
// this.handleChange(this.value);
|
||||
// }
|
||||
// }
|
||||
// else {
|
||||
// this.checkValue = this.selectedValues == this.value;
|
||||
// }
|
||||
// },
|
||||
emits: ["change"],
|
||||
methods: {
|
||||
isValueSelectedByArray(arr) {
|
||||
return this.isMultiSelect
|
||||
? arr.includes(this.value)
|
||||
: arr[0];
|
||||
},
|
||||
// isValueSelectedByArray(arr) {
|
||||
// return this.isMultiSelect
|
||||
// ? arr.includes(this.value)
|
||||
// : arr[0];
|
||||
// },
|
||||
displayLoader() {
|
||||
this.isLoaderDisplayed = true;
|
||||
},
|
||||
handleInputChange() {
|
||||
if(!this.selectingInitiatesLoad) {
|
||||
this.handleCheckChange();
|
||||
}
|
||||
},
|
||||
handleKeyupArrow() {
|
||||
if (this.isMultiSelect) {
|
||||
return; // Prevent arrow keys from doing anything if element is a checkbox
|
||||
}
|
||||
},
|
||||
lbTest(e) {
|
||||
console.log("lbTest event: ", e)
|
||||
this.$emit("change", e);
|
||||
},
|
||||
// handleInputChange() {
|
||||
// if(!this.selectingInitiatesLoad) {
|
||||
// this.handleCheckChange();
|
||||
// }
|
||||
// },
|
||||
// handleKeyupArrow() {
|
||||
// if (this.isMultiSelect) {
|
||||
// return; // Prevent arrow keys from doing anything if element is a checkbox
|
||||
// }
|
||||
// },
|
||||
triggerButton() {
|
||||
if(this.selectingInitiatesLoad) {
|
||||
if (this.selectingInitiatesLoad) {
|
||||
this.displayLoader();
|
||||
this.handleCheckChange();
|
||||
// this.handleCheckChange();
|
||||
}
|
||||
this.pushEventToGA(this.$route.query[queryStrings.FMG_PAGE], this.GaActions.CLICKED, this.value.toString(), true, this.valueToLogType);
|
||||
},
|
||||
handleCheckChange() {
|
||||
const emitEvent = {
|
||||
checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
|
||||
value: this.value.toString(),
|
||||
buttonId: this.buttonID && this.buttonID.toString(),
|
||||
};
|
||||
|
||||
this.handleChange(this.value);
|
||||
this.$emit("isCheckedChanged", emitEvent);
|
||||
this.$emit("update:modelValue", emitEvent);
|
||||
// TODO KO THIS IS IMPORTANT
|
||||
this.pushEventToGA(
|
||||
this.$route.query[queryStrings.FMG_PAGE],
|
||||
this.GaActions.CLICKED,
|
||||
this.value.toString(),
|
||||
true,
|
||||
this.valueToLogType
|
||||
);
|
||||
},
|
||||
// handleCheckChange() {
|
||||
// const emitEvent = {
|
||||
// checkValue: this.checkValue, // only read on checkboxes, on handleCheckedChanged on button-question
|
||||
// value: this.value.toString(),
|
||||
// buttonId: this.buttonID && this.buttonID.toString(),
|
||||
// };
|
||||
|
||||
// this.handleChange(this.value);
|
||||
// this.$emit("isCheckedChanged", emitEvent);
|
||||
// this.$emit("update:modelValue", emitEvent);
|
||||
// },
|
||||
},
|
||||
components: {
|
||||
loader,
|
||||
buttonWrapper,
|
||||
},
|
||||
setup(props) {
|
||||
const inputType = props.isMultiSelect ? "checkbox" : "radio";
|
||||
|
|
@ -154,15 +173,19 @@ export default {
|
|||
|
||||
// Set initialValue for validation setup if pre-selected
|
||||
// NOTE: props.selectedValues could be an array of strings, or an array of integers...
|
||||
if (props.selectedValues && (props.selectedValues.includes(props.value) || props.selectedValues.includes(parseInt(props.value)))) {
|
||||
fieldOptions['initialValue'] = fieldOptions.potentialInitialValue;
|
||||
if (
|
||||
props.selectedValues &&
|
||||
(props.selectedValues.includes(props.value) ||
|
||||
props.selectedValues.includes(parseInt(props.value)))
|
||||
) {
|
||||
fieldOptions["initialValue"] = fieldOptions.potentialInitialValue;
|
||||
}
|
||||
|
||||
const {
|
||||
handleChange,
|
||||
errors,
|
||||
value
|
||||
} = useField(toRef(props, "groupName"), toRef(props, "validationRules"), fieldOptions);
|
||||
const { handleChange, errors, value } = useField(
|
||||
toRef(props, "groupName"),
|
||||
toRef(props, "validationRules"),
|
||||
fieldOptions
|
||||
);
|
||||
|
||||
const validateValue = value;
|
||||
|
||||
|
|
@ -186,32 +209,32 @@ export default {
|
|||
height: 0;
|
||||
opacity: 0;
|
||||
|
||||
&:focus-visible + label {
|
||||
&:focus-visible + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:focus + label {
|
||||
&:focus + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + label {
|
||||
&:checked + .list-button-content {
|
||||
color: $black;
|
||||
font-weight: 500;
|
||||
background: $blue-100;
|
||||
box-shadow: 0 0 0 1px $blue;
|
||||
}
|
||||
&:checked:focus + label {
|
||||
&:checked:focus + .list-button-content {
|
||||
box-shadow: 0 0 0 2.5px $blue;
|
||||
}
|
||||
&:checked + label p,
|
||||
&:checked + label span {
|
||||
&:checked + .list-button-content p,
|
||||
&:checked + .list-button-content span {
|
||||
font-weight: 500;
|
||||
}
|
||||
&:checked + label span:nth-child(2) {
|
||||
&:checked + .list-button-content span:nth-child(2) {
|
||||
font-weight: 400;
|
||||
color: $gray-600;
|
||||
}
|
||||
}
|
||||
}
|
||||
label {
|
||||
.list-button-content {
|
||||
color: $gray-600;
|
||||
position: relative;
|
||||
background: $white;
|
||||
|
|
@ -223,7 +246,7 @@ export default {
|
|||
|
||||
span {
|
||||
&.small {
|
||||
font-size: .75rem;
|
||||
font-size: 0.75rem;
|
||||
color: $gray-550;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue