New assets, fixed list box scrolling, header text, etc..

This commit is contained in:
John Lyon-Smith
2018-03-05 15:18:08 -08:00
parent eaf26343b8
commit 535fffaf41
33 changed files with 354 additions and 231 deletions

View File

@@ -12,7 +12,7 @@ export class UserForm extends React.Component {
user: PropTypes.object,
onSave: PropTypes.func,
onRemove: PropTypes.func,
onAnyModified: PropTypes.func,
onModifiedChanged: PropTypes.func,
onChangeEmail: PropTypes.func,
onResendEmail: PropTypes.func
}
@@ -20,18 +20,18 @@ export class UserForm extends React.Component {
static bindings = {
email: {
isValid: (r, v) => (regExpPattern.email.test(v)),
isDisabled: (r) => (!!r._id)
isDisabled: (r) => (r._id)
},
emailValidated: {
isDisabled: (r) => (!!r._id === false)
isDisabled: (r) => (!r._id)
},
changeEmail: {
nonValue: true,
isDisabled: (r) => (!!r._id === false)
isDisabled: (r) => (!r._id)
},
resendEmail: {
nonValue: true,
isDisabled: (r) => (!!r._id === false)
isDisabled: (r) => (!r._id || !!r.getFieldValue('emailValidated'))
},
firstName: {
isValid: (r, v) => (v !== '')
@@ -40,15 +40,13 @@ export class UserForm extends React.Component {
isValid: (r, v) => (v !== '')
},
administrator: {
isValid: (r, v) => (v !== ''),
isDisabled: (r) => (api.loggedInUser._id === r._id) // Adding a new user
},
project: {
isValid: (r, v) => (v !== '' || v === '')
isValid: (r, v) => true,
isDisabled: (r) => (api.loggedInUser._id === r._id), // Adding a new user
alwaysGet: true,
},
remove: {
nonValue: true,
isVisible: (r) => (!!r._id),
isVisible: (r) => (r._id),
isDisabled: (r) => (api.loggedInUser._id === r._id)
},
reset: {
@@ -57,7 +55,7 @@ export class UserForm extends React.Component {
},
submit: {
nonValue: true,
isDisabled: (r) => (!r.anyModified && !r.allValid)
isDisabled: (r) => (!r.anyModified || !r.allValid),
},
}
@@ -65,33 +63,35 @@ export class UserForm extends React.Component {
super(props)
reactAutoBind(this)
this.state = {
binder: new FormBinder(this.props.user, UserForm.bindings, this.props.onAnyModified)
binder: new FormBinder(this.props.user, UserForm.bindings, this.props.onModifiedChanged)
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.user !== this.props.user) {
this.setState({
binder: new FormBinder(nextProps.user, UserForm.bindings, nextProps.onAnyModified)
binder: new FormBinder(nextProps.user, UserForm.bindings, nextProps.onModifiedChanged)
})
}
}
handleSubmit(e) {
e.preventDefault()
let obj = this.state.binder.getValues()
let obj = this.state.binder.getModifiedFieldValues()
if (obj) {
this.props.onSave(obj)
}
}
handleReset() {
const { user, onAnyModified } = this.props
const { user, onModifiedChanged } = this.props
this.setState({ binder: new FormBinder(user, UserForm.bindings, onAnyModified) })
this.setState({ binder: new FormBinder(user, UserForm.bindings, onModifiedChanged) })
if (onAnyModified) {
onAnyModified(false)
if (onModifiedChanged) {
onModifiedChanged(false)
}
}
@@ -107,7 +107,7 @@ export class UserForm extends React.Component {
const { binder } = this.state
return (
<form id='userForm' onSubmit={this.handleSubmit}>
<form style={{ width: '100%', height: '100%', overflow: 'scroll' }} id='userForm' onSubmit={this.handleSubmit}>
<Column>
<Column.Item height={20} />
<Row>
@@ -118,18 +118,17 @@ export class UserForm extends React.Component {
<Column.Item>
<Row>
<Row.Item grow>
<BoundInput label='First Name' name='firstName' binder={binder} />
<BoundInput label='First Name' name='firstName' message='Must not be empty' binder={binder} />
</Row.Item>
<Row.Item width={20} />
<Row.Item grow>
<BoundInput label='Last Name' name='lastName' binder={binder} />
</Row.Item>
<Row.Item width={20} />
</Row>
</Column.Item>
<Column.Item>
<Row>
<Row.Item>
<Row.Item grow>
<BoundInput label='Email' name='email' message='Must be a valid email address. Required.' binder={binder} />
</Row.Item>
<Row.Item width={10} />
@@ -138,17 +137,21 @@ export class UserForm extends React.Component {
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={20} />
<Column.Item minHeight={sizeInfo.buttonHeight}>
<Row>
<Row.Item>
<BoundButton text='Change Email' name='changeEmail' binder={binder} onClick={this.handleChangeEmail} />
<BoundButton text='Change Email' name='changeEmail' binder={binder}
width={220} onClick={this.handleChangeEmail} />
</Row.Item>
<Row.Item grow />
<Row.Item>
<BoundButton text='Resend Confirmation Email' name='resendEmail' binder={binder} onClick={this.handleResendEmail} />
<BoundButton text='Resend Confirmation Email' name='resendEmail' binder={binder}
width={220} onClick={this.handleResendEmail} />
</Row.Item>
</Row>
</Column.Item>
<Column.Item height={20} />
<Column.Item>
<Row>
<Row.Item>
@@ -157,6 +160,7 @@ export class UserForm extends React.Component {
<Row.Item grow />
</Row>
</Column.Item>
<Column.Item height={20} />
<Column.Item minHeight={sizeInfo.buttonHeight}>
<Row>
<Row.Item>
@@ -166,6 +170,7 @@ export class UserForm extends React.Component {
<Row.Item>
<BoundButton text='Remove' name='remove' binder={binder} onClick={this.props.onRemove} />
</Row.Item>
<Row.Item width={20} />
<Row.Item>
<BoundButton submit='userForm' text={binder._id ? 'Save' : 'Add'} name='submit' binder={binder} />
</Row.Item>