Initial commit
This commit is contained in:
John Lyon-Smith
230
website/src/Users/UserForm.js
Normal file
230
website/src/Users/UserForm.js
Normal file
@@ -0,0 +1,230 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { autoBind } from 'auto-bind2'
|
||||
import { regExpPattern } from 'regexp-pattern'
|
||||
import { Grid, Form } from 'semantic-ui-react'
|
||||
import './UserForm.scss'
|
||||
import { ValidatedEmailIcon } from './ValidatedEmailIcon'
|
||||
import { Constants, api } from '../helpers'
|
||||
import { Validator, ValidatedInput, ValidatedButton, ValidatedDropdown, ValidatedDatePicker, ValidatedContainer } from '../Validated'
|
||||
|
||||
export class UserForm extends React.Component {
|
||||
static propTypes = {
|
||||
user: PropTypes.object,
|
||||
onSave: PropTypes.func,
|
||||
onRemove: PropTypes.func,
|
||||
onModifiedChanged: PropTypes.func,
|
||||
onChangeEmail: PropTypes.func,
|
||||
onResendEmail: PropTypes.func
|
||||
}
|
||||
|
||||
static validations = {
|
||||
email: {
|
||||
isValid: (r, v) => (regExpPattern.email.test(v)),
|
||||
isDisabled: (r) => (!!r._id)
|
||||
},
|
||||
emailValidated: {
|
||||
isDisabled: (r) => (!!r._id === false)
|
||||
},
|
||||
changeEmail: {
|
||||
nonValue: true,
|
||||
isDisabled: (r) => (!!r._id === false)
|
||||
},
|
||||
firstName: {
|
||||
isValid: (r, v) => (v !== '')
|
||||
},
|
||||
lastName: {
|
||||
isValid: (r, v) => (v !== '')
|
||||
},
|
||||
zip: {
|
||||
isValid: (r, v) => (v === '' || regExpPattern.zip.test(v))
|
||||
},
|
||||
state: {
|
||||
isValid: (r, v) => (v === '' || regExpPattern.state.test(v))
|
||||
},
|
||||
city: {
|
||||
isValid: true
|
||||
},
|
||||
address1: {
|
||||
isValid: true
|
||||
},
|
||||
address2: {
|
||||
isValid: true
|
||||
},
|
||||
homePhone: {
|
||||
isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
|
||||
},
|
||||
cellPhone: {
|
||||
isValid: (r, v) => (v === '' || regExpPattern.phone.test(v))
|
||||
},
|
||||
dateOfBirth: {
|
||||
isValid: true
|
||||
},
|
||||
dateOfHire: {
|
||||
isValid: true
|
||||
},
|
||||
ssn: {
|
||||
isValid: (r, v) => (v === '' || regExpPattern.ssn.test(v))
|
||||
},
|
||||
numHouseholds: {
|
||||
isValid: true
|
||||
},
|
||||
t12: {
|
||||
isValid: true
|
||||
},
|
||||
aum: {
|
||||
isValid: true
|
||||
},
|
||||
role: {
|
||||
isValid: (r, v) => (v !== ''),
|
||||
isDisabled: (r) => (api.loggedInUser._id === r._id)
|
||||
},
|
||||
project: {
|
||||
isValid: (r, v) => (v !== '' || v === '')
|
||||
},
|
||||
remove: {
|
||||
nonValue: true,
|
||||
isVisible: (r) => (!!r._id),
|
||||
isDisabled: (r) => (api.loggedInUser._id === r._id)
|
||||
},
|
||||
reset: {
|
||||
nonValue: true,
|
||||
isDisabled: (r) => (!r.anyModified)
|
||||
},
|
||||
submit: {
|
||||
nonValue: true,
|
||||
isDisabled: (r) => (!r.anyModified && !r.allValid)
|
||||
},
|
||||
'broker-fields': {
|
||||
nonValue: true,
|
||||
isVisible: (r, v) => (r.getField('role').value === 'broker')
|
||||
},
|
||||
'standard-fields': {
|
||||
nonValue: true,
|
||||
isVisible: (r, v) => (r.getField('role').value !== 'broker')
|
||||
}
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props)
|
||||
autoBind(this, (name) => (name.startsWith('handle')))
|
||||
this.state = {
|
||||
validator: new Validator(this.props.user, UserForm.validations, this.props.onModifiedChanged)
|
||||
}
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.user !== this.props.user) {
|
||||
this.setState({
|
||||
validator: new Validator(nextProps.user, UserForm.validations, nextProps.onModifiedChanged)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
handleSubmit(e) {
|
||||
e.preventDefault()
|
||||
let obj = this.state.validator.getValues()
|
||||
if (obj) {
|
||||
this.props.onSave(obj)
|
||||
}
|
||||
}
|
||||
|
||||
handleReset() {
|
||||
this.setState({ validator: new Validator(this.props.user, UserForm.validations, this.props.onModifiedChanged) })
|
||||
this.props.onModifiedChanged(false)
|
||||
}
|
||||
|
||||
handleChangeEmail() {
|
||||
this.props.onChangeEmail()
|
||||
}
|
||||
|
||||
handleResendEmail() {
|
||||
this.props.onResendEmail()
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Form className='user-form' onSubmit={this.handleSubmit}>
|
||||
<Grid stackable>
|
||||
<Grid.Column width={16}>
|
||||
<Form.Group>
|
||||
<ValidatedDropdown label={'Deighton Access & Security Level'} width={6} selection
|
||||
options={Constants.accessLevels} name='role' message='The user role and security level'
|
||||
placeholder='' validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
<Form.Group>
|
||||
<ValidatedInput label='First Name' name='firstName'
|
||||
width={8} validator={this.state.validator} />
|
||||
<ValidatedInput label='Last Name' name='lastName'
|
||||
width={8} validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Email' name='email' width={8} message='Must be a valid email address. Required.'
|
||||
validator={this.state.validator} />
|
||||
<ValidatedEmailIcon name='emailValidated' validator={this.state.validator} width={4}
|
||||
onClick={this.handleResendEmail} />
|
||||
<ValidatedButton width={4} size='medium' content='Change Email' label=' ' name='changeEmail'
|
||||
validator={this.state.validator} onClick={this.handleChangeEmail} />
|
||||
</Form.Group>
|
||||
|
||||
<ValidatedContainer name='standard-fields' validator={this.state.validator}>
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Zip' width={4} name='zip' message='5 Character U.S. Zip Code. Optional.'
|
||||
position='bottom center' validator={this.state.validator} />
|
||||
<ValidatedDropdown label='State' name='state' width={4}
|
||||
placeholder='Select State' options={Constants.stateOptions} validator={this.state.validator} searchable />
|
||||
<ValidatedInput label='City' width={8} type='text' name='city' message='U.S. City. Optional.'
|
||||
validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Address' width={12} name='address1'
|
||||
validator={this.state.validator} message='Primary Street Address. Optional.' />
|
||||
<ValidatedInput label='Apt. #' width={4} name='address2'
|
||||
validator={this.state.validator} message='Apartment/Unit number. Optional.' />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedInput label='Home Phone' width={8} name='homePhone'
|
||||
validator={this.state.validator} message='A valid U.S. phone number. IE: (555)123-4567. Optional.' />
|
||||
<ValidatedInput label='Cell Phone' width={8} name='cellPhone'
|
||||
validator={this.state.validator} message='A valid U.S. phone number. IE: (555)123-4567. Optional.' />
|
||||
</Form.Group>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedDatePicker label='Date of Birth' width={5} name='dateOfBirth'
|
||||
validator={this.state.validator} />
|
||||
<ValidatedInput label='SSN' width={6} name='ssn'
|
||||
validator={this.state.validator} message='U.S. Social Security Number. IE: 123-45-6789' />
|
||||
<ValidatedDatePicker label='Hire Date' width={5} name='dateOfHire'
|
||||
validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
</ValidatedContainer>
|
||||
|
||||
<ValidatedContainer name='broker-fields' validator={this.state.validator}>
|
||||
<Form.Group>
|
||||
<ValidatedInput label='# Households' width={5} name='numHouseholds'
|
||||
message='Number of households in this brokers account' validator={this.state.validator} />
|
||||
<ValidatedInput label='T-12' width={6} name='t12' message='This brokers T-12 info.'
|
||||
validator={this.state.validator} />
|
||||
<ValidatedInput label='AUM' width={5} name='aum'
|
||||
message='This brokers AUM information.' validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
</ValidatedContainer>
|
||||
|
||||
<Form.Group>
|
||||
<ValidatedButton color='red' width={4} size='medium' content='Remove' label=' ' name='remove'
|
||||
validator={this.state.validator} onClick={this.props.onRemove} />
|
||||
<ValidatedButton width={4} size='medium' content='Reset' label=' ' name='reset'
|
||||
validator={this.state.validator} onClick={this.handleReset} />
|
||||
<Form.Field width={this.state.validator._id ? 8 : 12} />
|
||||
<ValidatedButton primary submit width={4} size='medium'
|
||||
content={this.state.validator._id ? 'Save' : 'Add'} label=' ' name='submit'
|
||||
validator={this.state.validator} />
|
||||
</Form.Group>
|
||||
</Grid.Column>
|
||||
</Grid>
|
||||
</Form>
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user