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

Merge remote-tracking branch 'origin/feature/CSR-270-refactor' into feature/CSR-335

Browse source
This commit is contained in:
FrankRua 2022-02-24 09:59:08 -05:00
commit 3742c72890
10 changed files with 60 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -124,8 +124,8 @@ export default {
handleCheckedChanged(val) {
if(this.isMultiSelect && this.selectedValues) {
// Add or remove item to array of data to emit
const newSelectedValues = this.selectedValues;
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;
}

10
src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js
View file

@ -30,9 +30,9 @@ describe("replace-options-question.vue", () => {
//Act
wrapper.vm.selectedDoorSidesValues = ["DriverSide"]
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:selectedDoorSides"][0]).toEqual([["DriverSide"]]);
expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
});
});
@ -43,11 +43,11 @@ describe("replace-options-question.vue", () => {
const { wrapper } = setupMocks({});
//Act
wrapper.vm.selectedDriverSideReplacOptionsValues = ["FrontDoor"]
wrapper.vm.selectedDriverSideReplaceOptionsValues = ["FrontDoor"]
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:selectedDriverSideReplacOptions"][0]).toEqual([["FrontDoor"]]);
expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
});
});
@ -62,7 +62,7 @@ describe("replace-options-question.vue", () => {
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:selectedPassengerSideReplaceOptions"][0]).toEqual([["BacktDoor"]]);
expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled;
});
});

40
src/layouts/vehicle-damage/side-door-options/side-door-options.vue
View file

@ -13,9 +13,9 @@
</div>
</transition>
<replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory v-model="selectedDriverSideReplacOptionsValues" />
<replaceOptionsQuestion ref="driverSideOptions" :isAvailable="isDriverSideReplaceOptionsQuestionAvailable" groupName="driverSideOptions" filterByVehicleCategory isMultiSelect v-model="selectedDriverSideReplaceOptionsValues" />
<replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory v-model="selectedPassengerSideReplaceOptionsValues" />
<replaceOptionsQuestion ref="passengerSideOptions" :isAvailable="isPassengerSideReplaceOptionsQuestionAvailable" groupName="passengerSideOptions" filterByVehicleCategory isMultiSelect v-model="selectedPassengerSideReplaceOptionsValues" />
</div>
</template>
@ -30,10 +30,6 @@ export default ({
return {
questionText: String,
answersFromCms: Array,
selectedDoorSides: [],
// Child component data
selectedDriverSideReplacOptions: [],
selectedPassengerSideReplaceOptions: [],
}
},
props: {
@ -49,11 +45,11 @@ export default ({
this.$refs.driverSideOptions.initializeComponent(driverSideReplaceOptions, driverSideOptions);
this.$refs.passengerSideOptions.initializeComponent(passengerSideReplaceOptions, passengerSideOptions);
},
getSideDoorReplacementOptions(){
getSideDoorReplacementOptions(selectedDoorSides, selectedDriverSideReplaceOptions, selectedPassengerSideReplaceOptions){
return {
selectedDoorSides: this.selectedDoorSides,
selectedDriverSideReplacOptions: this.selectedDriverSideReplacOptions,
selectedPassengerSideReplaceOptions: this.selectedPassengerSideReplaceOptions
selectedDoorSides: selectedDoorSides,
selectedDriverSideReplaceOptions: selectedDriverSideReplaceOptions,
selectedPassengerSideReplaceOptions: selectedPassengerSideReplaceOptions
}
},
},
@ -68,29 +64,26 @@ export default ({
},
selectedDoorSidesValues: {
get: function() {
return this.selectedDoorSides;
return this.selectedValues.selectedDoorSides;
},
set: function(newValue) {
this.$emit("update:selectedDoorSides", newValue);
this.selectedValues = this.getSideDoorReplacementOptions();
this.selectedValues = this.getSideDoorReplacementOptions(newValue, this.selectedValues.selectedDriverSideReplaceOptions, this.selectedValues.selectedPassengerSideReplaceOptions);
}
},
selectedDriverSideReplacOptionsValues: {
selectedDriverSideReplaceOptionsValues: {
get: function() {
return this.selectedDriverSideReplacOptions;
return this.selectedValues.selectedDriverSideReplaceOptions;
},
set: function(newValue) {
this.$emit("update:selectedDriverSideReplacOptions", newValue);
this.selectedValues = this.getSideDoorReplacementOptions();
this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, newValue, this.selectedValues.selectedPassengerSideReplaceOptions);
}
},
selectedPassengerSideReplaceOptionsValues: {
get: function() {
return this.selectedPassengerSideReplaceOptions;
return this.selectedValues.selectedPassengerSideReplaceOptions;
},
set: function(newValue) {
this.$emit("update:selectedPassengerSideReplaceOptions", newValue);
this.selectedValues = this.getSideDoorReplacementOptions();
this.selectedValues = this.getSideDoorReplacementOptions(this.selectedValues.selectedDoorSides, this.selectedValues.selectedDriverSideReplaceOptions, newValue);
}
},
answersToDisplay(){
@ -115,13 +108,6 @@ export default ({
return Array.isArray(this.selectedDoorSidesValues) && this.selectedDoorSidesValues.includes("PassengerSide");
},
},
mounted() {
if(typeof(this.selectedValues) === "object"){
this.selectedDoorSides = this.selectedValues.selectedDoorSides;
this.selectedDriverSideReplacOptions = this.selectedValues.selectedDriverSideReplacOptions;
this.selectedPassengerSideReplaceOptions = this.selectedValues.selectedPassengerSideReplaceOptions;
}
},
components: {
buttonQuestion,
replaceOptionsQuestion,

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

@ -115,7 +115,7 @@ export default {
selectedDamageLocations: [],
sideDoorOptionsData: {
selectedDoorSides: [],
selectedDriverSideReplacOptions: [],
selectedDriverSideReplaceOptions: [],
selectedPassengerSideReplaceOptions: []
},
selectedWindshieldOptions: [],

1
src/layouts/vehicle-damage/windshield-options/windshield-options.vue
View file

@ -13,6 +13,7 @@
/>
<replaceOptionsQuestion ref="replaceOptionsQuestion"
:isAvailable=isReplaceOptionSelected
isMultiSelect
groupName="WindshieldReplaceOptions"
v-model="selectedWindshieldReplaceOptionsValues"
/>

2
src/styles/common-error-styles.scss
View file

@ -1,7 +1,7 @@
.has-error {
&.list-button,
&.list-card {
border: 1px solid $red;
border: 1px solid $gray-500;
color: $red;
label {
box-shadow: 0 0 1px $red;

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

@ -164,6 +164,9 @@ export default {
+ p {
display: none;
}
span {
font-size: .875rem;
}
}
&:first-of-type {
label {

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

@ -126,7 +126,7 @@ export default {
};
</script>
<style lang="scss">
<style lang="scss" scoped>
.list-group {
&.list-button {
input[type="radio"],
@ -147,9 +147,14 @@ export default {
background: $blue-100;
box-shadow: 0 0 0 1px $blue;
}
&:checked + label p:first-child {
&:checked + label p,
&:checked + label span {
font-weight: 500;
}
&:checked + label span:nth-child(2) {
font-weight: 400;
color: $gray-600;
}
}
}
label {
@ -161,6 +166,13 @@ export default {
border: 1px solid $gray-500;
width: 100%;
span {
&.small {
font-size: .75rem;
color: $gray-550;
}
}
&:hover {
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;

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

@ -177,6 +177,7 @@ export default {
}
.sub-copy {
color: $gray-600;
font-weight: 400;
}
}
+ label::before {
@ -247,6 +248,16 @@ export default {
margin: -0.25rem 0 0 0;
left: 0.875rem;
}
&:checked + label {
p {
color: $black;
font-weight: 500;
}
.sub-copy {
color: $gray-600;
font-weight: 400;
}
}
+ label {
min-height: 48px;
color: $gray-600;
@ -254,6 +265,7 @@ export default {
margin-bottom: 0;
}
p {
color: $gray-600;
text-align: left;
&.sub-copy {
color: $gray-550;

18
src/ux-components/radio/radio.vue
View file

@ -2,15 +2,15 @@
<!-- Checkbox groups MUST be wrapped in a <fieldset> and <legend> tag and must contain tabindex -->
<div class="ui-radio form-check" :class="[hasError ? 'has-error' : '']">
<input
type="radio"
class="form-check-input"
aria-checked="false"
:name="groupName"
:id="buttonID"
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
@change="handleCheckChanged()"
type="radio"
class="form-check-input"
aria-checked="false"
:name="groupName"
:id="buttonID"
:aria-required="isRequired"
:value="value"
:v-model="checkValue"
@change="handleCheckChange()"
/>
<label class="d-flex align-items-start form-check-label" :for="buttonID">
<p v-if="buttonLabel" class="m-0">{{ buttonLabel }}</p>