lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add error message display to operator contact info

Browse source
This commit is contained in:
Sérgio Salgado 2021-09-09 19:02:28 +01:00 • committed by Josh Harvey
parent 94672423eb
commit ff474ee507
2 changed files with 67 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

116
new-lamassu-admin/src/pages/OperatorInfo/ContactInfo.js
View file

@ -128,7 +128,7 @@ const ContactInfo = ({ wizard }) => {
phone: Yup.string(), phone: Yup.string(),
email: Yup.string() email: Yup.string()
.email('Please enter a valid email address') .email('Please enter a valid email address')
.required(), .required('An email is required'),
website: Yup.string(), website: Yup.string(),
companyNumber: Yup.string() companyNumber: Yup.string()
}) })
@ -182,6 +182,9 @@ const ContactInfo = ({ wizard }) => {
} }
} }
const getErrorMsg = formikErrors =>
!R.isNil(formikErrors.email) ? formikErrors.email : null
return ( return (
<> <>
<div className={classes.header}> <div className={classes.header}>
@ -223,58 +226,67 @@ const ContactInfo = ({ wizard }) => {
setEditing(false) setEditing(false)
setError(null) setError(null)
}}> }}>
<Form> {({ errors }) => (
<PromptWhenDirty /> <Form>
<div className={classes.row}> <PromptWhenDirty />
<Field <div className={classes.row}>
field={findField('name')} <Field
editing={editing} field={findField('name')}
displayValue={displayTextValue} editing={editing}
onFocus={() => setError(null)} displayValue={displayTextValue}
/> onFocus={() => setError(null)}
<Field />
field={findField('phone')} <Field
editing={editing} field={findField('phone')}
displayValue={displayTextValue} editing={editing}
onFocus={() => setError(null)} displayValue={displayTextValue}
/> onFocus={() => setError(null)}
</div> />
<div className={classes.row}> </div>
<Field <div className={classes.row}>
field={findField('email')} <Field
editing={editing} field={findField('email')}
displayValue={displayTextValue} editing={editing}
onFocus={() => setError(null)} displayValue={displayTextValue}
/> onFocus={() => setError(null)}
<Field />
field={findField('website')} <Field
editing={editing} field={findField('website')}
displayValue={displayTextValue} editing={editing}
onFocus={() => setError(null)} displayValue={displayTextValue}
/> onFocus={() => setError(null)}
</div> />
<div className={classes.row}> </div>
<Field <div className={classes.row}>
field={findField('companyNumber')} <Field
editing={editing} field={findField('companyNumber')}
displayValue={displayTextValue} editing={editing}
onFocus={() => setError(null)} displayValue={displayTextValue}
/> onFocus={() => setError(null)}
</div> />
<div className={classnames(classes.row, classes.submit)}> </div>
{editing && ( {editing && !!getErrorMsg(errors) && (
<> <ErrorMessage className={classes.formErrorMsg}>
<Link color="primary" type="submit"> {getErrorMsg(errors)}
Save </ErrorMessage>
</Link>
<Link color="secondary" type="reset">
Cancel
</Link>
{error && <ErrorMessage>Failed to save changes</ErrorMessage>}
</>
)} )}
</div> <div className={classnames(classes.row, classes.submit)}>
</Form> {editing && (
<>
<Link color="primary" type="submit">
Save
</Link>
<Link color="secondary" type="reset">
Cancel
</Link>
{error && (
<ErrorMessage>Failed to save changes</ErrorMessage>
)}
</>
)}
</div>
</Form>
)}
</Formik> </Formik>
</div> </div>
{!wizard && ( {!wizard && (

3
new-lamassu-admin/src/pages/OperatorInfo/OperatorInfo.styles.js
View file

@ -62,6 +62,9 @@ const global = {
marginTop: 4, marginTop: 4,
marginLeft: 16 marginLeft: 16
} }
},
formErrorMsg: {
margin: [[0, 0, 20, 0]]
} }
} }