feat: add radio group for active status

Author: elfiyang16

client/src/components/Users.js

@@ -20,9 +20,12 @@ import TableHead from '@material-ui/core/TableHead'
 import TableRow from '@material-ui/core/TableRow'
 import IconButton from '@material-ui/core/IconButton'
 import TextField from '@material-ui/core/TextField'
-import FormHelperText from "@material-ui/core/FormHelperText"
-import FormControl from "@material-ui/core/FormControl"
-import FormLabel from "@material-ui/core/FormLabel"
+import FormHelperText from '@material-ui/core/FormHelperText'
+import FormControl from '@material-ui/core/FormControl'
+import FormLabel from '@material-ui/core/FormLabel'
+import RadioGroup from '@material-ui/core/RadioGroup'
+import FormControlLabel from '@material-ui/core/FormControlLabel'
+import Radio from '@material-ui/core/Radio'
 import Dialog from '@material-ui/core/Dialog'
 import DialogActions from '@material-ui/core/DialogActions'
 import DialogContent from '@material-ui/core/DialogContent'
@@ -37,7 +40,7 @@ import FileCopyIcon from '@material-ui/icons/FileCopy'
 import axios from 'axios'
 import { AppContext } from './MainFrame'
 import pwdGenerator from 'generate-password'
-import dateformat		from 'dateformat';
+import dateformat from 'dateformat'
 
 const style = (theme) => ({
   box: {
@@ -96,6 +99,15 @@ const style = (theme) => ({
     position: 'relative',
     bottom: 5,
   },
+  radioButton: {
+    '&$radioChecked': { color: theme.palette.primary.main },
+  },
+  radioChecked: {},
+  radioGroup: {
+    position: 'relative',
+    bottom: 12,
+    left: 10,
+  },
 })
 
 function not(a, b) {
@@ -254,7 +266,7 @@ function Users(props) {
   )
 
   async function handleSave() {
-    if(userEditing.userName === '' || right === undefined || right.length === 0){
+    if (userEditing.userName === '' || right === undefined || right.length === 0) {
       setErrorMessage('Missing Field')
       return
     }
@@ -280,12 +292,10 @@ function Users(props) {
           setErrorMessage('An error occured while creating user. Please contact the system admin.')
           return
         }
-      }
-      catch (e) {
+      } catch (e) {
         console.error(e)
         setErrorMessage('An error occured while creating user. Please contact the system admin.')
       }
-      
     } else {
       try {
         let res = await axios.patch(
@@ -306,8 +316,7 @@ function Users(props) {
           setErrorMessage('An error occured while updating user. Please contact the system admin.')
           return
         }
-      }
-      catch (e) {
+      } catch (e) {
         console.error(e)
         setErrorMessage('An error occured while updating user. Please contact the system admin.')
       }
@@ -364,6 +373,12 @@ function Users(props) {
     setUserEditing({ ...userEditing, email: e.target.value })
   }
 
+  function handleActiveChange(e) {
+    //convert to boolean
+    let isTrueSet = e.target.value === 'true'
+    setUserEditing({ ...userEditing, active: isTrueSet })
+  }
+
   function handleAddUser() {
     setUserEditing({})
     setLeft(permissions)
@@ -495,12 +510,6 @@ function Users(props) {
       >
         <DialogTitle id="form-dialog-title">User Detail</DialogTitle>
         <DialogContent>
-          {/*
-        <DialogContentText>
-          To subscribe to this website, please enter your email address here. We will send updates
-          occasionally.
-        </DialogContentText>
-        */}
           <TextField
             required
             error={userEditing && userEditing.userName === ''}
@@ -509,7 +518,7 @@ function Users(props) {
             label="Username"
             type="text"
             variant="outlined"
-            helperText = {userEditing && userEditing.userName === '' ? "Field is Required" : ""}
+            helperText={userEditing && userEditing.userName === '' ? 'Field is Required' : ''}
             fullWidth
             InputLabelProps={{
               shrink: true,
@@ -567,19 +576,67 @@ function Users(props) {
             className={classes.input}
             onChange={handleEmailChange}
           />
-          {userEditing && userEditing.createdAt && (
-          <Grid container spacing={2}>
-            <Grid item>
-              <Typography variant="outline">Created</Typography>
+          <FormControl component="fieldset" className={classes.formControl}>
+            <Grid container>
+              <Grid item>
+                <FormLabel component="legend">Active:</FormLabel>
+              </Grid>
+              <Grid item>
+                <RadioGroup
+                  aria-label="active-state"
+                  name="active-state"
+                  className={classes.radioGroup}
+                  value={(userEditing && userEditing.active) || ''}
+                  onChange={handleActiveChange}
+                >
+                  <Grid container>
+                    <Grid item>
+                      <FormControlLabel
+                        value="true"
+                        control={
+                          <Radio
+                            classes={{ root: classes.radioButton, checked: classes.radioChecked }}
+                          />
+                        }
+                        label="Active"
+                      />
+                    </Grid>
+                    <Grid item>
+                      <FormControlLabel
+                        value="false"
+                        control={
+                          <Radio
+                            classes={{ root: classes.radioButton, checked: classes.radioChecked }}
+                          />
+                        }
+                        label="Inactive"
+                      />
+                    </Grid>
+                  </Grid>
+                </RadioGroup>
+              </Grid>
             </Grid>
-            <Grid item>
-              <Typography variant="outline"> 
-                {userEditing && dateformat(userEditing.createdAt, 'm/d/yyyy h:MMtt')}
-              </Typography>
+          </FormControl>
+          {userEditing && userEditing.createdAt && (
+            <Grid container spacing={2}>
+              <Grid item>
+                <Typography variant="outline">Created</Typography>
+              </Grid>
+              <Grid item>
+                <Typography variant="outline">
+                  {userEditing && dateformat(userEditing.createdAt, 'm/d/yyyy h:MMtt')}
+                </Typography>
+              </Grid>
             </Grid>
-          </Grid>)}
+          )}
           <FormControl error={right.length === 0}>
-            <Grid container spacing={2} justify="center" alignItems="center" className={classes.root}>
+            <Grid
+              container
+              spacing={2}
+              justify="center"
+              alignItems="center"
+              className={classes.root}
+            >
               <Grid item role="list">
                 <FormLabel variant="outline">Roles</FormLabel>
                 {/* <Typography variant="outline">Roles</Typography> */}
@@ -635,10 +692,9 @@ function Users(props) {
                 {customList(right)}
               </Grid>
             </Grid>
-            {right.length === 0 && 
-            <FormHelperText>
-              At Least One Role Must be Selected
-            </FormHelperText>}
+            {right.length === 0 && (
+              <FormHelperText>At Least One Role Must be Selected</FormHelperText>
+            )}
           </FormControl>
         </DialogContent>
         <DialogActions>