Typescriptify Clients-Component
This commit is contained in:
Jannis Mattheis
Jannis Mattheis
parent
3e5706486f
commit
73ba29efe5
|
|
@ -1,146 +0,0 @@
|
|||
import React, {Component} from 'react';
|
||||
import Grid from 'material-ui/Grid';
|
||||
import Table, {TableBody, TableCell, TableHead, TableRow} from 'material-ui/Table';
|
||||
import Paper from 'material-ui/Paper';
|
||||
import Button from 'material-ui/Button';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import Dialog, {DialogActions, DialogContent, DialogTitle} from 'material-ui/Dialog';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import Tooltip from 'material-ui/Tooltip';
|
||||
import ClientStore from '../stores/ClientStore';
|
||||
import ToggleVisibility from '../component/ToggleVisibility';
|
||||
import * as ClientAction from '../actions/ClientAction';
|
||||
import DefaultPage from '../component/DefaultPage';
|
||||
import ConfirmDialog from '../component/ConfirmDialog';
|
||||
import PropTypes from 'prop-types';
|
||||
import Delete from 'material-ui-icons/Delete';
|
||||
|
||||
class Clients extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {clients: [], showDialog: false, deleteId: -1};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
ClientStore.on('change', this.updateClients);
|
||||
this.updateClients();
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
ClientStore.removeListener('change', this.updateClients);
|
||||
}
|
||||
|
||||
updateClients = () => this.setState({...this.state, clients: ClientStore.get()});
|
||||
|
||||
showCreateDialog = () => this.setState({...this.state, showDialog: true});
|
||||
hideCreateDialog = () => this.setState({...this.state, showDialog: false});
|
||||
|
||||
showDeleteDialog = (deleteId) => this.setState({...this.state, deleteId});
|
||||
hideDeleteDelete = () => this.setState({...this.state, deleteId: -1});
|
||||
|
||||
render() {
|
||||
const {clients, deleteId, showDialog} = this.state;
|
||||
return (
|
||||
<DefaultPage title="Clients" buttonTitle="Create Client" fButton={this.showCreateDialog}>
|
||||
<Grid item xs={12}>
|
||||
<Paper elevation={6}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow style={{textAlign: 'center'}}>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell style={{width: 200}}>token</TableCell>
|
||||
<TableCell/>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{clients.map((client) => {
|
||||
return (
|
||||
<Row key={client.id} name={client.name}
|
||||
value={client.token} fDelete={() => this.showDeleteDialog(client.id)}/>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</Grid>
|
||||
{showDialog && <AddDialog fClose={this.hideCreateDialog} fOnSubmit={ClientAction.createClient}/>}
|
||||
{deleteId !== -1 && <ConfirmDialog title="Confirm Delete"
|
||||
text={'Delete ' + ClientStore.getById(this.state.deleteId).name + '?'}
|
||||
fClose={this.hideDeleteDelete}
|
||||
fOnSubmit={() => ClientAction.deleteClient(deleteId)}/>}
|
||||
</DefaultPage>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Row extends Component {
|
||||
static propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
value: PropTypes.string.isRequired,
|
||||
fDelete: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
render() {
|
||||
const {name, value, fDelete} = this.props;
|
||||
return (
|
||||
<TableRow>
|
||||
<TableCell>{name}</TableCell>
|
||||
<TableCell>
|
||||
<ToggleVisibility value={value} style={{display: 'flex', alignItems: 'center', width: 200}}/>
|
||||
</TableCell>
|
||||
<TableCell numeric padding="none">
|
||||
<IconButton onClick={fDelete}><Delete/></IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class AddDialog extends Component {
|
||||
static propTypes = {
|
||||
fClose: PropTypes.func.isRequired,
|
||||
fOnSubmit: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {name: ''};
|
||||
}
|
||||
|
||||
handleChange(propertyName, event) {
|
||||
const state = this.state;
|
||||
state[propertyName] = event.target.value;
|
||||
this.setState(state);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {fClose, fOnSubmit} = this.props;
|
||||
const {name} = this.state;
|
||||
const submitEnabled = this.state.name.length !== 0;
|
||||
const submitAndClose = () => {
|
||||
fOnSubmit(name);
|
||||
fClose();
|
||||
};
|
||||
return (
|
||||
<Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
|
||||
<DialogTitle id="form-dialog-title">Create a client</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField autoFocus margin="dense" id="name" label="Name *" type="email" value={name}
|
||||
onChange={this.handleChange.bind(this, 'name')} fullWidth/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={fClose}>Cancel</Button>
|
||||
<Tooltip placement={'bottom-start'} title={submitEnabled ? '' : 'name is required'}>
|
||||
<div>
|
||||
<Button disabled={!submitEnabled} onClick={submitAndClose} color="primary" variant="raised">
|
||||
Create
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Clients;
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
import Delete from 'material-ui-icons/Delete';
|
||||
import Grid from 'material-ui/Grid';
|
||||
import IconButton from 'material-ui/IconButton';
|
||||
import Paper from 'material-ui/Paper';
|
||||
import Table, {TableBody, TableCell, TableHead, TableRow} from 'material-ui/Table';
|
||||
import React, {Component, SFC} from 'react';
|
||||
import * as ClientAction from '../actions/ClientAction';
|
||||
import ConfirmDialog from '../component/ConfirmDialog';
|
||||
import DefaultPage from '../component/DefaultPage';
|
||||
import ToggleVisibility from '../component/ToggleVisibility';
|
||||
import ClientStore from '../stores/ClientStore';
|
||||
import AddClientDialog from './dialog/AddClientDialog';
|
||||
|
||||
interface IState {
|
||||
clients: IClient[]
|
||||
showDialog: boolean
|
||||
deleteId: number
|
||||
}
|
||||
|
||||
class Clients extends Component<{}, IState> {
|
||||
public state = {clients: [], showDialog: false, deleteId: -1};
|
||||
|
||||
public componentWillMount() {
|
||||
ClientStore.on('change', this.updateClients);
|
||||
this.updateClients();
|
||||
}
|
||||
|
||||
public componentWillUnmount() {
|
||||
ClientStore.removeListener('change', this.updateClients);
|
||||
}
|
||||
|
||||
public render() {
|
||||
const {clients, deleteId, showDialog} = this.state;
|
||||
return (
|
||||
<DefaultPage title="Clients" buttonTitle="Create Client" fButton={this.showCreateDialog}>
|
||||
<Grid item xs={12}>
|
||||
<Paper elevation={6}>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow style={{textAlign: 'center'}}>
|
||||
<TableCell>Name</TableCell>
|
||||
<TableCell style={{width: 200}}>token</TableCell>
|
||||
<TableCell/>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{clients.map((client: IClient) => {
|
||||
return (
|
||||
<Row key={client.id} name={client.name}
|
||||
value={client.token} fDelete={() => this.showDeleteDialog(client.id)}/>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Paper>
|
||||
</Grid>
|
||||
{showDialog && <AddClientDialog fClose={this.hideCreateDialog} fOnSubmit={ClientAction.createClient}/>}
|
||||
{deleteId !== -1 && <ConfirmDialog title="Confirm Delete"
|
||||
text={'Delete ' + ClientStore.getById(this.state.deleteId).name + '?'}
|
||||
fClose={this.hideDeleteDelete}
|
||||
fOnSubmit={this.deleteClient}/>}
|
||||
</DefaultPage>
|
||||
);
|
||||
}
|
||||
|
||||
private deleteClient = () => ClientAction.deleteClient(this.state.deleteId);
|
||||
|
||||
private updateClients = () => this.setState({...this.state, clients: ClientStore.get()});
|
||||
private showCreateDialog = () => this.setState({...this.state, showDialog: true});
|
||||
|
||||
private hideCreateDialog = () => this.setState({...this.state, showDialog: false});
|
||||
private showDeleteDialog = (deleteId: number) => this.setState({...this.state, deleteId});
|
||||
|
||||
private hideDeleteDelete = () => this.setState({...this.state, deleteId: -1});
|
||||
}
|
||||
|
||||
interface IRowProps {
|
||||
name: string
|
||||
value: string
|
||||
fDelete: VoidFunction
|
||||
}
|
||||
|
||||
const Row: SFC<IRowProps> = ({name, value, fDelete}) => (
|
||||
<TableRow>
|
||||
<TableCell>{name}</TableCell>
|
||||
<TableCell>
|
||||
<ToggleVisibility value={value} style={{display: 'flex', alignItems: 'center', width: 200}}/>
|
||||
</TableCell>
|
||||
<TableCell numeric padding="none">
|
||||
<IconButton onClick={fDelete}><Delete/></IconButton>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
|
||||
|
||||
export default Clients;
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
import Button from 'material-ui/Button';
|
||||
import Dialog, {DialogActions, DialogContent, DialogTitle} from 'material-ui/Dialog';
|
||||
import TextField from 'material-ui/TextField';
|
||||
import Tooltip from 'material-ui/Tooltip';
|
||||
import React, {Component} from 'react';
|
||||
|
||||
interface IProps {
|
||||
fClose: VoidFunction
|
||||
fOnSubmit: (name: string) => void
|
||||
}
|
||||
|
||||
export default class AddDialog extends Component<IProps, { name: string }> {
|
||||
public state = {name: ''};
|
||||
|
||||
public render() {
|
||||
const {fClose, fOnSubmit} = this.props;
|
||||
const {name} = this.state;
|
||||
const submitEnabled = this.state.name.length !== 0;
|
||||
const submitAndClose = () => {
|
||||
fOnSubmit(name);
|
||||
fClose();
|
||||
};
|
||||
return (
|
||||
<Dialog open={true} onClose={fClose} aria-labelledby="form-dialog-title">
|
||||
<DialogTitle id="form-dialog-title">Create a client</DialogTitle>
|
||||
<DialogContent>
|
||||
<TextField autoFocus margin="dense" id="name" label="Name *" type="email" value={name}
|
||||
onChange={this.handleChange.bind(this, 'name')} fullWidth/>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={fClose}>Cancel</Button>
|
||||
<Tooltip placement={'bottom-start'} title={submitEnabled ? '' : 'name is required'}>
|
||||
<div>
|
||||
<Button disabled={!submitEnabled} onClick={submitAndClose} color="primary" variant="raised">
|
||||
Create
|
||||
</Button>
|
||||
</div>
|
||||
</Tooltip>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
private handleChange(propertyName: string, event: React.ChangeEvent<HTMLInputElement>) {
|
||||
const state = this.state;
|
||||
state[propertyName] = event.target.value;
|
||||
this.setState(state);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue