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

CSR-254: fix error styling

Browse source
This commit is contained in:
Adam Caouette 2022-02-10 15:30:45 -05:00
parent a99d43d964
commit d47cd77c5e
3 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -154,9 +154,9 @@ export default {
console.log("values: ", values); console.log("values: ", values);
console.log("errors: ", errors); console.log("errors: ", errors);
console.log("results: ", results); console.log("results: ", results);
// get errorEls and order by alpha // get error names array
const errorEls = errors ? Object.keys(errors) : []; const errorNames = errors ? Object.keys(errors) : [];
const firstErrorEl = errorEls[0]; const firstErrorEl = errorNames[0];
if (firstErrorEl) { if (firstErrorEl) {
console.log('firstErrorEl: ', firstErrorEl); console.log('firstErrorEl: ', firstErrorEl);
const qsString = "[data-focus-target='" + firstErrorEl + "']"; const qsString = "[data-focus-target='" + firstErrorEl + "']";

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

@ -1,7 +1,7 @@
.has-error { .has-error {
.list-button, &.list-button,
.list-card, &.list-card,
.list-button-horizontal { &.list-button-horizontal {
color: $red; color: $red;
label { label {
border: 1px solid $red; border: 1px solid $red;

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

@ -2,7 +2,7 @@
<div :class="'col' + colLength"> <div :class="'col' + colLength">
<div <div
class="list-card w-100 rounded-3 d-flex align-items-center h-100" class="list-card w-100 rounded-3 d-flex align-items-center h-100"
:class="isWide ? 'horizontal' : ''" :class="[isWide ? 'horizontal' : '', errors.length > 0 ? 'has-error' : '']"
> >
<input <input
:type="isMultiSelect ? 'checkbox' : 'radio'" :type="isMultiSelect ? 'checkbox' : 'radio'"
@ -31,7 +31,7 @@
class="small order-3" class="small order-3"
:class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'"
> >
{{buttonLabel}} {{buttonLabel}} - {{errors.length}}
</p> </p>
<p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy"> <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
{{buttonLabelSubCopy}} {{buttonLabelSubCopy}}
@ -113,6 +113,7 @@ export default {
const { const {
value: inputValue, value: inputValue,
handleChange, handleChange,
errors,
} = useField(groupName, props.validationRules, } = useField(groupName, props.validationRules,
{ {
type: inputType, type: inputType,
@ -120,8 +121,14 @@ export default {
}); });
return { return {
handleChange, handleChange,
errors,
}; };
}, },
watch: {
errors() {
console.log('HEADS UP; ERRORS CHANGED, errors.length: ', this.errors.length)
},
},
}; };
</script> </script>