john/deighton-ar
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Removed Semantic UI React

Browse Source
This commit is contained in:
John Lyon-Smith
2018-02-25 17:51:52 -08:00
parent c60bfcedf8
commit 0571196a7f
68 changed files with 981 additions and 1343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
website/src/Users/UserForm.js
View File

@@ -2,11 +2,10 @@ 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'
import { Validator, ValidatedInput, ValidatedButton, ValidatedCheckbox } from '../Validated'
import { StackLayout } from '../ui'
export class UserForm extends React.Component {
static propTypes = {
@@ -144,87 +143,43 @@ export class UserForm extends React.Component {
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='&nbsp;' name='changeEmail'
validator={this.state.validator} onClick={this.handleChangeEmail} />
</Form.Group>
<form onSubmit={this.handleSubmit}>
<StackLayout>
<StackLayout.Item>
<ValidatedCheckbox 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} />
</StackLayout.Item>
<StackLayout.Item>
<ValidatedInput label='First Name' name='firstName'
width={8} validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
<ValidatedInput label='Last Name' name='lastName'
width={8} validator={this.state.validator} />
</StackLayout.Item>
<StackLayout.Item>
<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} />
</StackLayout.Item>
<StackLayout.Item>
<ValidatedButton width={4} size='medium' content='Change Email' label='&nbsp;' name='changeEmail'
validator={this.state.validator} onClick={this.handleChangeEmail} />
</StackLayout.Item>
<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='&nbsp;' name='remove'
validator={this.state.validator} onClick={this.props.onRemove} />
<ValidatedButton width={4} size='medium' content='Reset' label='&nbsp;' 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='&nbsp;' name='submit'
validator={this.state.validator} />
</Form.Group>
</Grid.Column>
</Grid>
</Form>
<StackLayout.Item>
<ValidatedButton color='red' width={4} size='medium' content='Remove' label='&nbsp;' name='remove'
validator={this.state.validator} onClick={this.props.onRemove} />
<ValidatedButton width={4} size='medium' content='Reset' label='&nbsp;' name='reset'
validator={this.state.validator} onClick={this.handleReset} />
<ValidatedButton primary submit width={4} size='medium'
content={this.state.validator._id ? 'Save' : 'Add'} label='&nbsp;' name='submit'
validator={this.state.validator} />
</StackLayout.Item>
</StackLayout>
</form>
)
}
}

2
website/src/Users/UserList.js
View File

@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Dropdown, List, Icon, Button, Image } from 'semantic-ui-react'
import { Dropdown, List, Icon, Button, Image } from '../ui'
import { Constants, api } from '../helpers'
import './UserList.scss'

18
website/src/Users/Users.js
View File

@@ -1,10 +1,10 @@
import React from 'react'
import { Container, Grid } from 'semantic-ui-react'
import { autoBind } from 'auto-bind2'
import { UserList } from './UserList'
import { UserForm } from './UserForm'
import { UserFormPlaceholder } from './UserFormPlaceholder'
import { api } from '../helpers'
import { RowLayout } from '../ui'
import { YesNoMessageDialog, MessageDialog, ChangeEmailDialog, WaitDialog } from '../Dialog'
export class Users extends React.Component {
@@ -237,19 +237,19 @@ export class Users extends React.Component {
render() {
return (
<Container>
<div>
<div>Users</div>
<Grid stackable>
<RowLayout>
{/* User List - Displayed on left hand side. */}
<Grid.Column width={5}>
<RowLayout.Item width={5}>
<UserList users={this.state.users} selectedUser={this.state.selectedUser}
selectionModified={this.state.modified} onUserListClick={this.handleUserListClick}
onAddNewUser={this.handleAddNewUser} />
</Grid.Column>
</RowLayout.Item>
{/* User Info - Displayed on right hand side. */}
<Grid.Column width={11}>
<RowLayout.Item>
{
this.state.selectedUser
? <UserForm user={this.state.selectedUser} onSave={this.handleSave}
@@ -257,8 +257,8 @@ export class Users extends React.Component {
onChangeEmail={this.handleChangeEmail} onResendEmail={this.handleResendEmail} />
: <UserFormPlaceholder />
}
</Grid.Column>
</Grid>
</RowLayout.Item>
</RowLayout>
<ChangeEmailDialog open={!!this.state.changeEmailDialog} onDismiss={this.handleChangeEmailDismiss} />
@@ -275,7 +275,7 @@ export class Users extends React.Component {
onDismiss={this.handleMessageDialogDismiss} />
<WaitDialog active={!!this.state.waitDialog} message={this.state.waitDialog ? this.state.waitDialog.message : ''} />
</Container>
</div>
)
}
}

17
website/src/Users/ValidatedEmailIcon.js
View File

@@ -1,6 +1,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Form, Icon, Popup, Button } from 'semantic-ui-react'
import { Label, Button, Icon } from '../ui'
import './ValidatedEmailIcon.scss'
// This is a validated component with a value that cannot change itself and is specialized
@@ -27,20 +27,19 @@ export class ValidatedEmailIcon extends React.Component {
render() {
if (this.state.value) {
return (
<Form.Field width={this.props.width}>
<label>&nbsp;</label>
<Popup content='Email Validated' position='bottom center' hoverable trigger={
<div width={this.props.width}>
<Label>&nbsp;
<Icon name='mail' color='green' size='big' className='mail-validated-icon' />
} />
</Form.Field>
</Label>
</div>
)
} else {
return (
<Form.Field width={this.props.width}>
<label>&nbsp;</label>
<div width={this.props.width}>
<Label>&nbsp;</Label>
<Button fluid icon='mail outline' color='red' labelPosition='left'
content='Resend Email' onClick={this.props.onClick} disabled={this.state.disabled} />
</Form.Field>
</div>
)
}
}