user edit styles in progress

Author: zhorakh

src/Administration/Users/UsersEditor/UsersEditor.js

@@ -5,12 +5,32 @@ import api from '@/_api'
 
 import BasePageContainer from '@/_common/BasePageContainer'
 import BasePageToolbar from '@/_common/BasePageToolbar'
-import Grid from "@material-ui/core/Grid";
+import { Save as SaveIcon } from '@material-ui/icons/'
+import {
+  Input,
+  Select,
+  MenuItem,
+  Paper,
+  Button,
+  FormControl,
+  InputLabel,
+  makeStyles,
+  Grid
+} from '@material-ui/core'
 
 const UserEditor = (props) => {
+  const classes = useStyles()
 
   const { userId } = props
-  const [user, setUser] = useState({})
+  const [user, setUser] = useState({
+    avatarUrl: '',
+    email: '',
+    firstName: '',
+    globalRole: '',
+    lastName: '',
+    userToOrganizations: [{}],
+    username: ''
+  })
 
   useEffect(() => {
     if(!userId) {
@@ -27,11 +47,78 @@ const UserEditor = (props) => {
     fetchUser()
   }, [userId])
 
+  const onChangeHandler = (e) => setUser({
+    ...user,
+    [e.target.name]: e.target.value
+  })
+
+  const setGlobalRole = (e) => setUser({
+    ...user,
+    globalRole: e.target.value
+  })
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      if(userId) {
+        await api.users.update(userId, user)
+      } else {
+        await api.users.create(user)
+      }
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
   return (
     <BasePageContainer>
       <BasePageToolbar title={'Edit user'}></BasePageToolbar>
-      <Grid container spacing={3}>
-        UserEditor
+      <Grid container xs={12}>
+        <Grid item xs={6}>
+          <Paper>
+            <form onSubmit={handleSubmit}>
+              <FormControl className={classes.control}>
+                <InputLabel>First Name</InputLabel>
+                <Input value={user.firstName} name="firstName" className={classes.width} onChange={e => onChangeHandler(e)}/>
+              </FormControl>
+              <FormControl className={classes.control}>
+                <InputLabel>Last Name</InputLabel>
+                <Input value={user.lastName} name="lastName" className={classes.width} onChange={e => onChangeHandler(e)}/>
+              </FormControl>
+              <FormControl className={classes.control}>
+                <InputLabel>User Name</InputLabel>
+                <Input value={user.username} name="username" className={classes.width} onChange={e => onChangeHandler(e)}/>
+              </FormControl>
+              <FormControl className={classes.control}>
+                <InputLabel>Email</InputLabel>
+                <Input value={user.email} name="email" className={classes.width} onChange={e => onChangeHandler(e)}/>
+              </FormControl>
+              <FormControl className={classes.control}>
+                <InputLabel>Global Role</InputLabel>
+                <Select
+                  labelId="Set Global Role"
+                  id="globalRole"
+                  value={user.globalRole}
+                  onChange={setGlobalRole}
+                  className={classes.width}
+                >
+                  <MenuItem value={user.globalRole}>{user.globalRole}</MenuItem>
+                  <MenuItem value='user'>user</MenuItem>
+                  <MenuItem value='support'>support</MenuItem>
+                </Select>
+              </FormControl>
+              <Button
+                variant="contained"
+                color="primary"
+                type="submit"
+                className={`${classes.margin} ${classes.width}`}
+                startIcon={<SaveIcon />}
+              >
+                Edit User
+              </Button>
+            </form>
+          </Paper>
+        </Grid>
       </Grid>
     </BasePageContainer>
   )
@@ -41,4 +128,16 @@ UserEditor.propTypes = {
   userId: PropTypes.number
 }
 
+const useStyles = makeStyles(theme => ({
+  control: {
+    display: 'block'
+  },
+  margin: {
+    marginTop: 16
+  },
+  width: {
+    minWidth: 200
+  }
+}))
+
 export default UserEditor

src/Administration/Users/UsersList/UsersListTableItems.js

@@ -8,6 +8,7 @@ import { Skeleton } from '@material-ui/lab'
 import { Edit as EditIcon, Delete as DeleteIcon } from '@material-ui/icons/'
 
 const UsersListTableItems = ({ users, rowsPerPage = 10, rowsExpected = 10 }) => {
+  const classes = useStyles()
   // Count how many empty rows needs to be filled
   const usersVisible = users.length || rowsExpected
   const usersArrayExpected = Array.from({ length: usersVisible }).map(
@@ -60,7 +61,7 @@ const UsersListTableItems = ({ users, rowsPerPage = 10, rowsExpected = 10 }) =>
             />
           </TableCell>
           <TableCell>
-            <Link to={{ pathname: `users/${row.id}/edit` }}>
+            <Link to={{ pathname: `users/${row.id}/edit` }} className={classes.link}>
               <EditIcon />
             </Link>
             <DeleteIcon />
@@ -83,6 +84,9 @@ const useStyles = makeStyles(theme => ({
     flexShrink: 0,
     marginLeft: theme.spacing(2.5),
   },
+  link: {
+    color: 'inherit'
+  }
 }))
 
 export default UsersListTableItems