Skip to content

Commit 6cd5e56

Browse files
zhorakhzhorakh
committed
Merge branch 'dev-administration-users' of https://github.com/modularcode/modular-admin-react into dev-administration-users
� Conflicts: � src/Administration/Users/UsersList/UsersListTableItems.js
2 parents 57da681 + 92a2698 commit 6cd5e56

File tree

8 files changed

+214
-68
lines changed

8 files changed

+214
-68
lines changed

‎README.md‎

Lines changed: 2 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -49,42 +49,8 @@ Your app is ready to be deployed!
4949

5050
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
5151

52-
### `yarn eject`
5352

54-
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
5553

56-
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
54+
### ToDo:
5755

58-
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
59-
60-
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
61-
62-
## Learn More
63-
64-
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
65-
66-
To learn React, check out the [React documentation](https://reactjs.org/).
67-
68-
### Code Splitting
69-
70-
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
71-
72-
### Analyzing the Bundle Size
73-
74-
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
75-
76-
### Making a Progressive Web App
77-
78-
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
79-
80-
### Advanced Configuration
81-
82-
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
83-
84-
### Deployment
85-
86-
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
87-
88-
### `yarn build` fails to minify
89-
90-
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify
56+
- Migrate mocks to https://github.com/mswjs/msw

‎src/Administration/Users/UsersList/UsersList.js‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import BasePageContainer from '@/_common/BasePageContainer'
2323
import BasePageToolbar from '@/_common/BasePageToolbar'
2424
import { BaseTablePagination } from '@/_common/BaseTable'
2525

26+
import UsersListAction from './UsersListActions'
2627
import UsersListTableItems from './UsersListTableItems'
2728

2829
const UsersList = ({ match }) => {
@@ -39,7 +40,7 @@ const UsersList = ({ match }) => {
3940
})
4041

4142
const { users, count } = usersData
42-
const rowsExpected = count ? Math.max(count - rowsPerPage * page, 0) : rowsPerPage
43+
// const rowsExpected = count ? Math.max(count - rowsPerPage * page, 0) : rowsPerPage
4344

4445
const tableColumns = [
4546
{
@@ -123,7 +124,10 @@ const UsersList = ({ match }) => {
123124

124125
return (
125126
<BasePageContainer>
126-
<BasePageToolbar title={'Users Adminstration'}></BasePageToolbar>
127+
<BasePageToolbar
128+
title={'Users Adminstration'}
129+
actionsComponent={UsersListAction}
130+
></BasePageToolbar>
127131
<Grid container spacing={3}>
128132
<Grid item xs={12}>
129133
{status === 'error' && (
@@ -161,7 +165,6 @@ const UsersList = ({ match }) => {
161165
<UsersListTableItems
162166
users={status === 'loading' ? [] : users}
163167
rowsPerPage={rowsPerPage}
164-
rowsExpected={rowsExpected}
165168
/>
166169
</TableBody>
167170
<TableFooter>

‎src/Administration/Users/UsersList/UsersListActions.js‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import clsx from 'clsx'
2+
import React, { useContext, useState } from 'react'
3+
4+
import { fade, makeStyles, Button, Tooltip, InputBase } from '@material-ui/core'
5+
6+
import {
7+
MoreVert as IconMore,
8+
Tune as IconFilter,
9+
// ArrowDropDown as IconDropDown,
10+
Add as IconNew,
11+
Search as IconSearch,
12+
Clear as IconClear,
13+
} from '@material-ui/icons'
14+
15+
// import usersListContext from './usersListContext'
16+
17+
const DashboardActions = () => {
18+
const classes = useStyles()
19+
const [search, setSearch] = useState('')
20+
// const { filter } = useContext(usersListContext)
21+
22+
const handleChangeSearchInput = event => {
23+
setSearch(event.target.value)
24+
}
25+
26+
const handelClickSearchClearButton = () => {
27+
setSearch('')
28+
}
29+
30+
return (
31+
<div className={classes.root}>
32+
<div className={classes.search}>
33+
<div className={classes.searchIcon}>
34+
<IconSearch />
35+
</div>
36+
<InputBase
37+
placeholder="Search users…"
38+
classes={{
39+
root: classes.searchInputRoot,
40+
input: clsx(classes.searchInputInput, search && '-active'),
41+
}}
42+
inputProps={{ 'aria-label': 'search' }}
43+
value={search}
44+
onChange={handleChangeSearchInput}
45+
/>
46+
{search && (
47+
<div className={classes.searchButtonClear}>
48+
<Tooltip title="Clear search">
49+
<Button color="secondary" onClick={handelClickSearchClearButton}>
50+
<IconClear />
51+
</Button>
52+
</Tooltip>
53+
</div>
54+
)}
55+
</div>
56+
<Tooltip title="Create new user">
57+
<Button color="secondary">
58+
<IconNew className={classes.iconNew} />
59+
New
60+
</Button>
61+
</Tooltip>
62+
<Tooltip title="Filter users">
63+
<Button color="secondary">
64+
<IconFilter />
65+
</Button>
66+
</Tooltip>
67+
<Tooltip title="More actions">
68+
<Button color="secondary">
69+
<IconMore />
70+
</Button>
71+
</Tooltip>
72+
</div>
73+
)
74+
}
75+
76+
const useStyles = makeStyles(theme => ({
77+
root: {
78+
// color: theme.palette.secondary.main,
79+
color: theme.palette.grey[600],
80+
},
81+
iconNew: {
82+
marginRight: 5,
83+
},
84+
search: {
85+
position: 'relative',
86+
display: 'inline-block',
87+
borderRadius: theme.shape.borderRadius,
88+
backgroundColor: fade(theme.palette.common.white, 0),
89+
'&:hover': {
90+
// backgroundColor: fade(theme.palette.common.white, 0.5),
91+
backgroundColor: 'rgba(140, 209, 54, 0.04)',
92+
},
93+
marginLeft: 0,
94+
width: '100%',
95+
[theme.breakpoints.up('sm')]: {
96+
marginLeft: theme.spacing(1),
97+
width: 'auto',
98+
},
99+
},
100+
searchIcon: {
101+
padding: theme.spacing(0, 2),
102+
height: '100%',
103+
position: 'absolute',
104+
pointerEvents: 'none',
105+
display: 'flex',
106+
alignItems: 'center',
107+
justifyContent: 'center',
108+
},
109+
searchButtonClear: {
110+
position: 'absolute',
111+
height: '100%',
112+
top: 0,
113+
right: 0,
114+
display: 'flex',
115+
alignItems: 'center',
116+
justifyContent: 'center',
117+
},
118+
searchInputRoot: {
119+
color: 'inherit',
120+
},
121+
searchInputInput: {
122+
padding: theme.spacing(1, 1, 1, 0),
123+
// vertical padding + font size from searchIcon
124+
paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
125+
paddingRight: '2.2em',
126+
transition: theme.transitions.create('width'),
127+
width: '100%',
128+
[theme.breakpoints.up('sm')]: {
129+
width: '12ch',
130+
'&:focus, &.-active': {
131+
width: '20ch',
132+
},
133+
},
134+
},
135+
}))
136+
137+
export default DashboardActions

‎src/Administration/Users/UsersList/UsersListTableItems.js‎

Lines changed: 27 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,38 +9,37 @@ import { Edit as EditIcon, Delete as DeleteIcon } from '@material-ui/icons/'
99

1010
const UsersListTableItems = ({ users, rowsPerPage = 10, rowsExpected = 10 }) => {
1111
const classes = useStyles()
12+
const UsersListTableItems = ({ users, rowsPerPage = 10 }) => {
1213
// Count how many empty rows needs to be filled
13-
const usersVisible = users.length || rowsExpected
14-
const usersArrayExpected = Array.from({ length: usersVisible }).map(
15-
(item, index) => index,
16-
)
17-
const emptyRows = rowsPerPage - usersVisible
14+
const usersLoading = users.length
15+
? []
16+
: Array.from({ length: rowsPerPage }).map((item, index) => index)
17+
const emptyRows = users.length ? rowsPerPage - users.length : []
1818

1919
return (
2020
<>
21-
{!users.length &&
22-
usersArrayExpected.map(item => (
23-
<TableRow key={item}>
24-
<TableCell>
25-
<Skeleton variant="circle" width={40} height={40} />
26-
</TableCell>
27-
<TableCell>
28-
<Skeleton variant="text" />
29-
</TableCell>
30-
<TableCell>
31-
<Skeleton variant="text" />
32-
</TableCell>
33-
<TableCell>
34-
<Skeleton variant="text" />
35-
</TableCell>
36-
<TableCell>
37-
<Skeleton variant="text" />
38-
</TableCell>
39-
<TableCell>
40-
<Skeleton variant="text" />
41-
</TableCell>
42-
</TableRow>
43-
))}
21+
{usersLoading.map(item => (
22+
<TableRow key={item}>
23+
<TableCell>
24+
<Skeleton variant="circle" width={40} height={40} />
25+
</TableCell>
26+
<TableCell>
27+
<Skeleton variant="text" />
28+
</TableCell>
29+
<TableCell>
30+
<Skeleton variant="text" />
31+
</TableCell>
32+
<TableCell>
33+
<Skeleton variant="text" />
34+
</TableCell>
35+
<TableCell>
36+
<Skeleton variant="text" />
37+
</TableCell>
38+
<TableCell>
39+
<Skeleton variant="text" />
40+
</TableCell>
41+
</TableRow>
42+
))}
4443
{users.map(row => (
4544
<TableRow key={row.id}>
4645
<TableCell>

‎src/Administration/Users/UsersList/usersListContext.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import moment, { Moment } from 'moment'
3+
4+
// The default context, which is used when there is no provider
5+
// (might be used for components testing)
6+
export const usersListContextDefault = {
7+
filter: {
8+
dateFrom: moment()
9+
.subtract(14, 'day')
10+
.startOf('day'),
11+
dateTo: moment().startOf('day'),
12+
},
13+
}
14+
15+
export const usersListContext = React.createContext(usersListContextDefault)
16+
17+
export const dashboardProvider = usersListContext.Provider
18+
export const dashboardConsumer = usersListContext.Consumer
19+
20+
export default usersListContext

‎src/_common/BasePageToolbar/BasePageToolbar.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
import PropTypes from 'prop-types'
23
import clsx from 'clsx'
34

45
import { makeStyles, createStyles } from '@material-ui/core/styles'
@@ -58,10 +59,19 @@ const useStyles = makeStyles(theme =>
5859
},
5960
titleContainer: {},
6061
actionsContainer: {
62+
color: theme.palette.grey[600],
6163
display: 'flex',
6264
justifyContent: 'flex-end',
6365
},
6466
}),
6567
)
6668

69+
BasePageToolbar.propTypes = {
70+
classes: PropTypes.object,
71+
title: PropTypes.elementType,
72+
titleComponent: PropTypes.elementType,
73+
actions: PropTypes.element,
74+
actionsComponent: PropTypes.elementType,
75+
}
76+
6777
export default BasePageToolbar

‎tsconfig.custom.json‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"compilerOptions": {
3+
"paths": {
4+
"@/*": ["./*"],
5+
"$/*": [
6+
"./src/*"
7+
],
8+
}
9+
}
10+
}

‎tsconfig.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,5 +30,6 @@
3030
],
3131
"exclude": [
3232
"node_modules/@nivo/line/index.d.ts"
33-
]
33+
],
34+
"extends": "./tsconfig.custom.json"
3435
}

0 commit comments

Comments
 (0)