Implement Users List Acionts

Author: modularcoder

src/Administration/Users/UsersList/UsersList.js

@@ -23,6 +23,7 @@ import BasePageContainer from '@/_common/BasePageContainer'
 import BasePageToolbar from '@/_common/BasePageToolbar'
 import { BaseTablePagination } from '@/_common/BaseTable'
 
+import UsersListAction from './UsersListActions'
 import UsersListTableItems from './UsersListTableItems'
 
 const UsersList = ({ match }) => {
@@ -123,7 +124,10 @@ const UsersList = ({ match }) => {
 
   return (
     <BasePageContainer>
-      <BasePageToolbar title={'Users Adminstration'}></BasePageToolbar>
+      <BasePageToolbar
+        title={'Users Adminstration'}
+        actionsComponent={UsersListAction}
+      ></BasePageToolbar>
       <Grid container spacing={3}>
         <Grid item xs={12}>
           {status === 'error' && (

src/Administration/Users/UsersList/UsersListActions.js

@@ -0,0 +1,114 @@
+import clsx from 'clsx'
+import React, { useContext, useState } from 'react'
+
+import { fade, makeStyles, Button, Tooltip, InputBase } from '@material-ui/core'
+
+import {
+  MoreVert as IconMore,
+  Tune as IconFilter,
+  // ArrowDropDown as IconDropDown,
+  Add as IconNew,
+  Search as IconSearch,
+} from '@material-ui/icons'
+
+// import usersListContext from './usersListContext'
+
+const DashboardActions = () => {
+  const classes = useStyles()
+  const [search, setSearch] = useState('')
+  // const { filter } = useContext(usersListContext)
+
+  const handleChangeSearchInput = event => {
+    setSearch(event.target.value)
+  }
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.search}>
+        <div className={classes.searchIcon}>
+          <IconSearch />
+        </div>
+        <InputBase
+          placeholder="Search…"
+          classes={{
+            root: classes.searchInputRoot,
+            input: clsx(
+              classes.searchInputInput,
+              search && classes.searchInputInputActive,
+            ),
+          }}
+          inputProps={{ 'aria-label': 'search' }}
+          onChange={handleChangeSearchInput}
+        />
+      </div>
+      <Tooltip title="Create new">
+        <Button color="secondary">
+          <IconNew className={classes.iconNew} />
+          New
+        </Button>
+      </Tooltip>
+      <Tooltip title="Filter">
+        <Button color="secondary">
+          <IconFilter />
+        </Button>
+      </Tooltip>
+      <Tooltip title="More actions">
+        <Button color="secondary">
+          <IconMore />
+        </Button>
+      </Tooltip>
+    </div>
+  )
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    color: theme.palette.secondary.main,
+  },
+  iconNew: {
+    marginRight: 5,
+  },
+  search: {
+    position: 'relative',
+    display: 'inline-block',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0),
+    '&:hover': {
+      // backgroundColor: fade(theme.palette.common.white, 0.5),
+      backgroundColor: 'rgba(140, 209, 54, 0.04)',
+    },
+    marginLeft: 0,
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      marginLeft: theme.spacing(1),
+      width: 'auto',
+    },
+  },
+  searchIcon: {
+    padding: theme.spacing(0, 2),
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  searchInputRoot: {
+    color: 'inherit',
+  },
+  searchInputInput: {
+    padding: theme.spacing(1, 1, 1, 0),
+    // vertical padding + font size from searchIcon
+    paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
+    transition: theme.transitions.create('width'),
+    width: '100%',
+    [theme.breakpoints.up('sm')]: {
+      width: '12ch',
+      '&:focus, &.active': {
+        width: '20ch',
+      },
+    },
+  },
+}))
+
+export default DashboardActions

src/Administration/Users/UsersList/usersListContext.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import moment, { Moment } from 'moment'
+
+// The default context, which is used when there is no provider
+// (might be used for components testing)
+export const usersListContextDefault = {
+  filter: {
+    dateFrom: moment()
+      .subtract(14, 'day')
+      .startOf('day'),
+    dateTo: moment().startOf('day'),
+  },
+}
+
+export const usersListContext = React.createContext(usersListContextDefault)
+
+export const dashboardProvider = usersListContext.Provider
+export const dashboardConsumer = usersListContext.Consumer
+
+export default usersListContext

src/_common/BasePageToolbar/BasePageToolbar.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import clsx from 'clsx'
 
 import { makeStyles, createStyles } from '@material-ui/core/styles'
@@ -64,4 +65,12 @@ const useStyles = makeStyles(theme =>
   }),
 )
 
+BasePageToolbar.propTypes = {
+  classes: PropTypes.object,
+  title: PropTypes.elementType,
+  titleComponent: PropTypes.elementType,
+  actions: PropTypes.element,
+  actionsComponent: PropTypes.elementType,
+}
+
 export default BasePageToolbar