Skip to content

Commit b0205e6

Browse files
modularcodermodularcoder
committed
Setup BasePageContainer
Setup BasePageToolbar
1 parent dda6669 commit b0205e6

File tree

13 files changed

+215
-2
lines changed

13 files changed

+215
-2
lines changed

‎public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Modular Material Admin | ReactJS version</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/AppRouter.js

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import config from './_config'
55

66
import DashboardLayout from '_layouts/DashboardLayout'
77
import { Auth } from './Auth'
8+
import { Dashboard } from './Dashboard'
89

910
// Use different router type depending on configuration
1011
const AppRouterComponent =
@@ -13,11 +14,30 @@ const AppRouterComponent =
1314
const AppRouter = () => (
1415
<AppRouterComponent>
1516
<Switch>
17+
{/* <Route exact path="/" render={() => <Redirect to="/sales/dashboard" />} /> */}
1618
<Route path="/auth" component={Auth} />
17-
<Route path="/" component={DashboardLayout} />
19+
<RouteWithLayout path={`/`} component={Dashboard} layout={DashboardLayout} />
20+
{/* <Route path="/" component={DashboardLayout} /> */}
1821
{/* <RoutePrivate path="/" component={LoggedInRouter} /> */}
1922
</Switch>
2023
</AppRouterComponent>
2124
)
2225

26+
const RouteWithLayout = ({ component: Component, layout: Layout, ...rest }) => (
27+
<Route
28+
{...rest}
29+
render={props => {
30+
if (Layout) {
31+
return (
32+
<Layout>
33+
<Component {...props} />
34+
</Layout>
35+
)
36+
} else {
37+
return <Component {...props} />
38+
}
39+
}}
40+
/>
41+
)
42+
2343
export default AppRouter

‎src/Dashboard/Dashboard.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react'
2+
3+
import BasePageContainer from '../_common/BasePageContainer'
4+
import BasePageToolbar from '../_common/BasePageToolbar'
5+
6+
import DashboardActions from './DashboardActions'
7+
8+
const Dashboard = () => {
9+
return (
10+
<BasePageContainer>
11+
<BasePageToolbar
12+
title={'Dashboard'}
13+
actionsComponent={DashboardActions}
14+
></BasePageToolbar>
15+
</BasePageContainer>
16+
)
17+
}
18+
19+
export default Dashboard

‎src/Dashboard/Dashboard.stories.mdx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<Meta title="Dashboard/Intro" />
2+
3+
# General Dashboard module
4+
5+
General dashboard template

‎src/Dashboard/DashboardActions.tsx

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React, { useContext } from 'react'
2+
3+
import { makeStyles } from '@material-ui/core/styles'
4+
import Button from '@material-ui/core/Button'
5+
import Tooltip from '@material-ui/core/Tooltip'
6+
import IconMore from '@material-ui/icons/MoreVert'
7+
import IconFilter from '@material-ui/icons/Tune'
8+
import IconDropDown from '@material-ui/icons/ArrowDropDown'
9+
import IconNew from '@material-ui/icons/Add'
10+
11+
import dashboardContext from './dashboardContext'
12+
13+
const DashboardActions = () => {
14+
const classes = useStyles()
15+
const { filter } = useContext(dashboardContext)
16+
17+
const dateFilterLabel = filter
18+
? `${filter.dateFrom.format('ll')} - ${filter.dateTo.format('ll')}`
19+
: 'Date Filter'
20+
21+
return (
22+
<div>
23+
<Tooltip title="Date Range">
24+
<Button>
25+
{dateFilterLabel} <IconDropDown />
26+
</Button>
27+
</Tooltip>
28+
<Tooltip title="Create new">
29+
<Button color="secondary">
30+
<IconNew className={classes.iconNew} />
31+
New
32+
</Button>
33+
</Tooltip>
34+
<Tooltip title="Filter">
35+
<Button color="secondary">
36+
<IconFilter />
37+
</Button>
38+
</Tooltip>
39+
<Tooltip title="More actions">
40+
<Button color="secondary">
41+
<IconMore />
42+
</Button>
43+
</Tooltip>
44+
</div>
45+
)
46+
}
47+
48+
const useStyles = makeStyles(theme => ({
49+
iconNew: {
50+
marginRight: 5,
51+
},
52+
}))
53+
54+
export default DashboardActions

‎src/Dashboard/dashboardContext.ts

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 dashboardContextDefault = {
7+
filter: {
8+
dateFrom: moment()
9+
.subtract(14, 'day')
10+
.startOf('day'),
11+
dateTo: moment().startOf('day'),
12+
},
13+
}
14+
15+
export const dashboardContext = React.createContext(dashboardContextDefault)
16+
17+
export const dashboardProvider = dashboardContext.Provider
18+
export const dashboardConsumer = dashboardContext.Consumer
19+
20+
export default dashboardContext

‎src/Dashboard/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import Dashboard from './Dashboard'
2+
3+
const DashboardModule = {}
4+
5+
export { Dashboard }
6+
7+
export default DashboardModule

‎src/_common/BasePageContainer/BasePageContainer.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
3+
import { makeStyles } from '@material-ui/core/styles'
4+
5+
const PageContainer = ({ children }) => {
6+
const classes = useStyles()
7+
8+
return <article className={classes.container}>{children}</article>
9+
}
10+
11+
const useStyles = makeStyles(theme => ({
12+
container: {
13+
flex: 1,
14+
paddingTop: theme.spacing(4),
15+
paddingLeft: theme.spacing(4),
16+
paddingRight: theme.spacing(4),
17+
paddingBottom: theme.spacing(4),
18+
},
19+
}))
20+
21+
export default PageContainer

‎src/_common/BasePageContainer/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { default } from './BasePageContainer'

‎src/_common/BasePageToolbar/BasePageToolbar.js

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import React from 'react'
2+
import clsx from 'clsx'
3+
4+
import { makeStyles, createStyles } from '@material-ui/core/styles'
5+
import Grid from '@material-ui/core/Grid'
6+
import Typography from '@material-ui/core/Typography'
7+
8+
const BasePageToolbar = props => {
9+
const classes = useStyles()
10+
const externalClasses = props.classes || {}
11+
12+
const Title = props.title ? (
13+
<Typography variant="h4" component="h1">
14+
{props.title}
15+
</Typography>
16+
) : null
17+
const TitleComponent = props.titleComponent
18+
19+
const Actions = props.actions
20+
const ActionsComponent = props.actionsComponent
21+
22+
return (
23+
<Grid
24+
container
25+
spacing={3}
26+
className={clsx(classes.container, externalClasses.container)}
27+
>
28+
<Grid
29+
item
30+
xs
31+
alignItems="center"
32+
container
33+
className={clsx(classes.titleContainer, externalClasses.titleContainer)}
34+
>
35+
{Title && Title}
36+
{TitleComponent && <TitleComponent />}
37+
</Grid>
38+
<Grid
39+
item
40+
xs
41+
alignItems="center"
42+
container
43+
className={clsx(classes.actionsContainer, externalClasses.titleContainer)}
44+
>
45+
{Actions && Actions}
46+
{ActionsComponent && <ActionsComponent />}
47+
</Grid>
48+
</Grid>
49+
)
50+
}
51+
52+
const useStyles = makeStyles(theme =>
53+
createStyles({
54+
container: {
55+
marginBottom: '1.5rem',
56+
},
57+
titleContainer: {},
58+
actionsContainer: {
59+
display: 'flex',
60+
justifyContent: 'flex-end',
61+
},
62+
}),
63+
)
64+
65+
export default BasePageToolbar

0 commit comments

Comments
 (0)