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

Conflict fixes and update to logic for taking in multiple modelvalue items

Browse source
This commit is contained in:
Max 2022-01-31 16:21:02 -05:00
parent 02470efdb5
commit db8be5e8c9
6 changed files with 122 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/common-components/button-question/button-question.spec.js
View file

@ -62,20 +62,7 @@ describe("buttonQuestion.vue", () => {
});
describe("buttonQuestion.vue", () => {
it("Should trigger event modelValue change with one string value on select if checked is true and only one option is selected", async () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setData({
chosenAnswer: "Windshield"
});
wrapper.vm.isItemChecked(true);
// Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual(["Windshield"]);
});
});
describe("buttonQuestion.vue", () => {
it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple optiopns are chosen", async () => {
it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple options are chosen", async () => {
// Act
const wrapper = shallowMount(buttonQuestion);
await wrapper.setData({

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

@ -7,7 +7,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.Name ? answer.Name : 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)"
@isChecked="isItemChecked"
@ -116,20 +119,8 @@ export default {
isItemChecked(val) {
// Add or remove item to array of data to emit
val ? this.modelValueAnswers.push(this.chosenAnswer) : this.modelValueAnswers.splice(this.modelValueAnswers.indexOf(this.chosenAnswer), 1);
// Determine what data to emit
let dataToEmit;
switch(this.modelValueAnswers.length){
case 0:
dataToEmit = undefined
break;
case 1:
dataToEmit = this.chosenAnswer
break;
default:
dataToEmit = this.modelValueAnswers
break;
}
this.$emit("update:modelValue", dataToEmit);
this.$emit("update:modelValue", this.modelValueAnswers.length ? this.modelValueAnswers : undefined);
},
},
components: {

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

@ -1,5 +1,5 @@
<template>
<div class="container-fluid shadow rounded-3 p-0 position-relative">
<div class="container-fluid shadow rounded-3 p-2 position-relative">
<funnelHeader ref="funnelHeader" />
<vehicleBanner ref="vehicleBanner" />
<funnelSubHeader

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

@ -1,11 +1,45 @@
<template>
<div class="list-group list-button-horizontal d-flex flex-column w-100 mb-2" @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="modelValue" />
<label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0" :class="textPosition">{{buttonLabel}}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{buttonLabelSubCopy}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{screenReaderOnlyText}}</span>
<loader v-if="isLoaderDisplayed && !isMultiSelect" :style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}" :class="[loaderColor, loaderPosition]" />
<div
class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
@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="modelValue"
/>
<label
tabindex="-1"
:for="buttonID"
:aria-labelledby="buttonID"
class="d-flex flex-column justify-content-center py-3 px-4"
>
<span
class="m-0"
:class="textPosition"
>
{{buttonLabel}}
</span>
<span
v-if="buttonLabelSubCopy"
class="m-0 small"
:class="textPosition"
>
{{buttonLabelSubCopy}}
</span>
<span v-if="screenReaderOnlyText" class="sr-only">
{{screenReaderOnlyText}}
</span>
<loader
v-if="isLoaderDisplayed && !isMultiSelect"
:style="{width: `${sizeInRem}rem`, height: `${sizeInRem}rem`}"
:class="[loaderColor, loaderPosition]"
/>
</label>
</div>
</template>

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

@ -1,14 +1,43 @@
<template>
<div class="list-group list-button d-flex flex-column w-100 mb-2" @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="modelValue">
<label tabindex="-1" :for="buttonID" :aria-labelledby="buttonID" class="d-flex flex-column justify-content-center py-3 px-4">
<span class="m-0" :class="textPosition">{{ buttonLabel }}</span>
<span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">{{
buttonLabelSubCopy
}}</span>
<span v-if="screenReaderOnlyText" class="sr-only">{{
screenReaderOnlyText
}}</span>
<div
class="list-group list-button d-flex flex-column w-100 mb-2"
@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="modelValue"
>
<label
tabindex="-1"
:for="buttonID"
:aria-labelledby="buttonID"
class="d-flex flex-column justify-content-center py-3 px-4"
>
<span
class="m-0"
:class="textPosition"
>
{{ buttonLabel }}
</span>
<span
v-if="buttonLabelSubCopy"
class="m-0 small"
:class="textPosition"
>
{{ buttonLabelSubCopy }}
</span>
<span
v-if="screenReaderOnlyText"
class="sr-only"
>
{{ screenReaderOnlyText }}
</span>
<loader
v-if="isLoaderDisplayed && !isMultiSelect"
:style="{ width: `${sizeInRem}rem`, height: `${sizeInRem}rem` }"

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

@ -1,12 +1,40 @@
<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" v-model="modelValue" />
<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>
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">{{buttonLabelSubCopy}}</p>
<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"
v-model="modelValue"
/>
<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>
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4">
{{buttonLabelSubCopy}}
</p>
<div v-if="isWide" class="order-2">
<p class="m-0 small">{{ buttonLabel }}</p>
<p v-if="buttonLabelSubCopy" class="m-0 fs-7">