135 lines
4.8 KiB
TypeScript
135 lines
4.8 KiB
TypeScript
import Grid from '@material-ui/core/Grid';
|
|
import IconButton from '@material-ui/core/IconButton';
|
|
import Paper from '@material-ui/core/Paper';
|
|
import {withStyles, WithStyles} from '@material-ui/core/styles';
|
|
import Table from '@material-ui/core/Table';
|
|
import TableBody from '@material-ui/core/TableBody';
|
|
import TableCell from '@material-ui/core/TableCell';
|
|
import TableHead from '@material-ui/core/TableHead';
|
|
import TableRow from '@material-ui/core/TableRow';
|
|
import Delete from '@material-ui/icons/Delete';
|
|
import Edit from '@material-ui/icons/Edit';
|
|
import React, {Component, SFC} from 'react';
|
|
import ConfirmDialog from '../common/ConfirmDialog';
|
|
import DefaultPage from '../common/DefaultPage';
|
|
import Button from '@material-ui/core/Button';
|
|
import AddEditDialog from './AddEditUserDialog';
|
|
import {observer} from 'mobx-react';
|
|
import {observable} from 'mobx';
|
|
import {inject, Stores} from '../inject';
|
|
import {IUser} from '../types';
|
|
|
|
const styles = () => ({
|
|
wrapper: {
|
|
margin: '0 auto',
|
|
maxWidth: 700,
|
|
},
|
|
});
|
|
|
|
interface IRowProps {
|
|
name: string;
|
|
admin: boolean;
|
|
fDelete: VoidFunction;
|
|
fEdit: VoidFunction;
|
|
}
|
|
|
|
const UserRow: SFC<IRowProps> = ({name, admin, fDelete, fEdit}) => (
|
|
<TableRow>
|
|
<TableCell>{name}</TableCell>
|
|
<TableCell>{admin ? 'Yes' : 'No'}</TableCell>
|
|
<TableCell align="right" padding="none">
|
|
<IconButton onClick={fEdit} className="edit">
|
|
<Edit />
|
|
</IconButton>
|
|
<IconButton onClick={fDelete} className="delete">
|
|
<Delete />
|
|
</IconButton>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
|
|
@observer
|
|
class Users extends Component<WithStyles<'wrapper'> & Stores<'userStore'>> {
|
|
@observable
|
|
private createDialog = false;
|
|
@observable
|
|
private deleteId: number | false = false;
|
|
@observable
|
|
private editId: number | false = false;
|
|
|
|
public componentDidMount = () => this.props.userStore.refresh();
|
|
|
|
public render() {
|
|
const {
|
|
deleteId,
|
|
editId,
|
|
createDialog,
|
|
props: {userStore},
|
|
} = this;
|
|
const users = userStore.getItems();
|
|
return (
|
|
<DefaultPage
|
|
title="Users"
|
|
rightControl={
|
|
<Button
|
|
id="create-user"
|
|
variant="contained"
|
|
color="primary"
|
|
onClick={() => (this.createDialog = true)}>
|
|
Create User
|
|
</Button>
|
|
}>
|
|
<Grid item xs={12}>
|
|
<Paper elevation={6}>
|
|
<Table id="user-table">
|
|
<TableHead>
|
|
<TableRow style={{textAlign: 'center'}}>
|
|
<TableCell>Name</TableCell>
|
|
<TableCell>Admin</TableCell>
|
|
<TableCell />
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{users.map((user: IUser) => (
|
|
<UserRow
|
|
key={user.id}
|
|
name={user.name}
|
|
admin={user.admin}
|
|
fDelete={() => (this.deleteId = user.id)}
|
|
fEdit={() => (this.editId = user.id)}
|
|
/>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</Paper>
|
|
</Grid>
|
|
{createDialog && (
|
|
<AddEditDialog
|
|
fClose={() => (this.createDialog = false)}
|
|
fOnSubmit={userStore.create}
|
|
/>
|
|
)}
|
|
{editId !== false && (
|
|
<AddEditDialog
|
|
fClose={() => (this.editId = false)}
|
|
fOnSubmit={userStore.update.bind(this, editId)}
|
|
name={userStore.getByID(editId).name}
|
|
admin={userStore.getByID(editId).admin}
|
|
isEdit={true}
|
|
/>
|
|
)}
|
|
{deleteId !== false && (
|
|
<ConfirmDialog
|
|
title="Confirm Delete"
|
|
text={'Delete ' + userStore.getByID(deleteId).name + '?'}
|
|
fClose={() => (this.deleteId = false)}
|
|
fOnSubmit={() => userStore.remove(deleteId)}
|
|
/>
|
|
)}
|
|
</DefaultPage>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(inject('userStore')(Users));
|