Skip to content

Commit 772804d

Browse files
zhorakhzhorakh
committed
administration users table
1 parent 8711132 commit 772804d

File tree

3 files changed

+171
-15
lines changed

3 files changed

+171
-15
lines changed

‎src/Administration/Administration.js

Lines changed: 170 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,181 @@
1-
import React, { useEffect } from 'react'
2-
// import { Route } from 'react-router-dom'
1+
import React, { useEffect, useState } from 'react'
32
import PropTypes from 'prop-types'
43
import api from '../_api'
4+
import Table from '@material-ui/core/Table'
5+
import TableBody from '@material-ui/core/TableBody'
6+
import TableCell from '@material-ui/core/TableCell'
7+
import TableContainer from '@material-ui/core/TableContainer'
8+
import TableHead from '@material-ui/core/TableHead'
9+
import TableRow from '@material-ui/core/TableRow'
10+
import Paper from '@material-ui/core/Paper'
11+
import Avatar from '@material-ui/core/Avatar'
12+
import { makeStyles, useTheme } from '@material-ui/core/styles'
13+
import TableFooter from '@material-ui/core/TableFooter'
14+
import TablePagination from '@material-ui/core/TablePagination'
15+
import IconButton from '@material-ui/core/IconButton'
16+
import FirstPageIcon from '@material-ui/icons/FirstPage'
17+
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft'
18+
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight'
19+
import LastPageIcon from '@material-ui/icons/LastPage'
20+
import EditIcon from '@material-ui/icons/Edit'
21+
import DeleteIcon from '@material-ui/icons/Delete'
22+
23+
const useStyles1 = makeStyles(theme => ({
24+
root: {
25+
flexShrink: 0,
26+
marginLeft: theme.spacing(2.5),
27+
},
28+
}))
29+
30+
function TablePaginationActions(props) {
31+
const classes = useStyles1()
32+
const theme = useTheme()
33+
const { count, page, rowsPerPage, onChangePage } = props
34+
35+
const handleFirstPageButtonClick = event => {
36+
onChangePage(event, 0)
37+
}
38+
39+
const handleBackButtonClick = event => {
40+
onChangePage(event, page - 1)
41+
}
42+
43+
const handleNextButtonClick = event => {
44+
onChangePage(event, page + 1)
45+
}
46+
47+
const handleLastPageButtonClick = event => {
48+
onChangePage(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1))
49+
}
50+
51+
return (
52+
<div className={classes.root}>
53+
<IconButton
54+
onClick={handleFirstPageButtonClick}
55+
disabled={page === 0}
56+
aria-label="first page"
57+
>
58+
{theme.direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
59+
</IconButton>
60+
<IconButton
61+
onClick={handleBackButtonClick}
62+
disabled={page === 0}
63+
aria-label="previous page"
64+
>
65+
{theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
66+
</IconButton>
67+
<IconButton
68+
onClick={handleNextButtonClick}
69+
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
70+
aria-label="next page"
71+
>
72+
{theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
73+
</IconButton>
74+
<IconButton
75+
onClick={handleLastPageButtonClick}
76+
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
77+
aria-label="last page"
78+
>
79+
{theme.direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
80+
</IconButton>
81+
</div>
82+
)
83+
}
84+
85+
TablePaginationActions.propTypes = {
86+
count: PropTypes.number.isRequired,
87+
onChangePage: PropTypes.func.isRequired,
88+
page: PropTypes.number.isRequired,
89+
rowsPerPage: PropTypes.number.isRequired,
90+
}
91+
92+
const useStyles2 = makeStyles({
93+
table: {
94+
minWidth: 500,
95+
},
96+
})
597

698
const Administration = ({ match }) => {
99+
const [usersData, setUsersData] = useState({ users: [], count: 0 })
7100
useEffect(() => {
8-
api.users.getList().then(res => console.log('res', res))
101+
api.users.getList().then(res => setUsersData(res))
9102
}, [])
103+
const classes = useStyles2()
104+
const [page, setPage] = React.useState(0)
105+
const [rowsPerPage, setRowsPerPage] = React.useState(10)
106+
107+
const emptyRows =
108+
rowsPerPage - Math.min(rowsPerPage, usersData.users.length - page * rowsPerPage)
10109

110+
const handleChangePage = (event, newPage) => {
111+
setPage(newPage)
112+
}
113+
114+
const handleChangeRowsPerPage = event => {
115+
setRowsPerPage(parseInt(event.target.value, 10))
116+
setPage(0)
117+
}
118+
console.log('usersData', usersData)
11119
return (
12-
<div>
13-
{/* <Route path={`${match.path}/login`} component={Login} /> */}
14-
Hello Administration
15-
</div>
120+
<TableContainer component={Paper}>
121+
<Table className={classes.table} aria-label="custom pagination table">
122+
<TableHead>
123+
<TableRow>
124+
<TableCell>Avatar</TableCell>
125+
<TableCell>First Name</TableCell>
126+
<TableCell>Last Name</TableCell>
127+
<TableCell>Username</TableCell>
128+
<TableCell>Email</TableCell>
129+
<TableCell>Actions</TableCell>
130+
</TableRow>
131+
</TableHead>
132+
<TableBody>
133+
{(rowsPerPage > 0
134+
? usersData.users.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
135+
: usersData.users
136+
).map(row => (
137+
<TableRow key={row.id}>
138+
<TableCell>
139+
<Avatar alt={row.firstName} src={row.avatarUrl} />
140+
</TableCell>
141+
<TableCell component="th" scope="row">
142+
{row.firstName}
143+
</TableCell>
144+
<TableCell>{row.lastName}</TableCell>
145+
<TableCell>{row.username}</TableCell>
146+
<TableCell>{row.email}</TableCell>
147+
<TableCell>
148+
<EditIcon />
149+
<DeleteIcon />
150+
</TableCell>
151+
</TableRow>
152+
))}
153+
{emptyRows > 0 && (
154+
<TableRow style={{ height: 53 * emptyRows }}>
155+
<TableCell colSpan={6} />
156+
</TableRow>
157+
)}
158+
</TableBody>
159+
<TableFooter>
160+
<TableRow>
161+
<TablePagination
162+
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
163+
colSpan={12}
164+
count={usersData.users.length}
165+
rowsPerPage={rowsPerPage}
166+
page={page}
167+
SelectProps={{
168+
inputProps: { 'aria-label': 'rows per page' },
169+
native: true,
170+
}}
171+
onChangePage={handleChangePage}
172+
onChangeRowsPerPage={handleChangeRowsPerPage}
173+
ActionsComponent={TablePaginationActions}
174+
/>
175+
</TableRow>
176+
</TableFooter>
177+
</Table>
178+
</TableContainer>
16179
)
17180
}
18181

‎src/_api/_mocks/usersMocks.ts

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,7 @@ export default {
88
})
99

1010
mock.onGet('/users').reply(200, {
11-
users: {
12-
...usersData.list,
13-
},
11+
users: [...usersData.list],
1412
count: usersData.list.length,
1513
})
1614

‎src/_common/AppSidebar/SidebarNav/SidebarNav.js

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,6 @@ const SidebarNav = props => {
6969
name: 'Administration',
7070
Icon: IconAdmin,
7171
items: [
72-
{
73-
name: 'All Organizations',
74-
link: '/administration/accounts',
75-
Icon: IconAccount,
76-
},
7772
{
7873
name: 'All Users',
7974
link: '/administration/users',

0 commit comments

Comments
 (0)