update didam

src/container/Home.js

@@ -144,6 +144,11 @@ export default function MiniDrawer() {
     })
   }
 
+  const logout = () => {  
+    localStorage.removeItem(Constant.TOKEN)
+    window.location.reload();
+  }
+
   const handleDrawerOpen = () => {
     setOpen(true);
   };
@@ -196,10 +201,10 @@ export default function MiniDrawer() {
       >
         <div className={classes.toolbarDrawer} style={{
           backgroundColor: '#1a2d3e',
-          height: open ? null : 78,
+          height: open ? 203 : 78,
           paddingLeft: open ? null : 55,
           display: open ? null : 'grid',
-          paddingBottom: open ? 55 : null,
+          // paddingBottom: open ? 55 : null,
           alignSelf: open? null : 'center'
         }}>
           {open === true ?
@@ -223,15 +228,15 @@ export default function MiniDrawer() {
               <MenuIcon style={{ fill: 'white' }} />
             </IconButton>}
           {open &&
-            <div style={{ width: '100%' }}>
-              <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>John Doe</Typography>
-              <Typography style={{ fontSize: 12, color: '#fff', textAlign: 'center', marginTop: 10 }}>john@tia.com</Typography>
+            <div style={{ width: '100%', marginTop: 15, marginBottom: 60 }}>
+              <Typography style={{ fontSize: 14, color: '#fff', textAlign: 'center', fontWeight: 'bold' }}>{userFullname}</Typography>
+              <Typography style={{ fontSize: 14, color: '#fff', textAlign: 'center', marginTop: 10 }}>{userEmail}</Typography>
             </div>
           }
         </div>
         <Divider />
         {open &&
-          <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -40 }}>
+          <div style={{ width: '100%', textAlign: '-webkit-center', marginTop: -45 }}>
             <div className={"sub-color"} style={{ width: 90, height: 90, borderRadius: 50, display: 'flex', justifyContent: 'center' }}>
               <div style={{ width: 72, height: 72, backgroundColor: '#838383', borderRadius: 50, alignSelf: 'center' }}>
               </div>
@@ -279,8 +284,8 @@ export default function MiniDrawer() {
                     <List component="div" disablePadding>
                       {item.subItem.map((sub, indexs) => {
                         return (
-                          <Link to={`${url}/${sub.path}`}>
-                            <div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => selectSub(sub.label)}>
+                          <Link to={sub.label === "Logout" ? `/` : `${url}/${sub.path}`}>
+                            <div style={{ paddingLeft: 5, }} className={selectedSubIndex === sub.label ? "active" : ""} onClick={() => sub.label === "Logout" ? logout() : selectSub(sub.label)}>
                               <ListItem button style={{ paddingLeft: 61 }}>
                                 <Typography style={{ fontFamily: 'nunito', color: '#525355', fontSize: 14 }}>{sub.label}</Typography>
                               </ListItem>

src/container/Otorisasi/User/EditUser.js

@@ -7,6 +7,7 @@ import { DatePicker } from '@material-ui/pickers';
 import format from "date-fns/format";
 import RemoveIcon from '@material-ui/icons/Remove';
 import AddIcon from '@material-ui/icons/Add';
+import * as R from 'ramda'
 
 const CustomCheckbox = withStyles({
     root: {
@@ -51,7 +52,6 @@ export default class EditUser extends Component {
     
     componentDidMount() {
         this.getDetailUser()
-        this.getRole()
         this.getPerusahaan()
     }
 
@@ -60,27 +60,39 @@ export default class EditUser extends Component {
         let isDate = type !== '' ? true : false
         if (isDate && type === 'start_date') {
             this.setState({ ...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null },
+                errorFullname: false,
+                errorEmail: false,    
                 errorRoleName: false,
                 errorStartDate: false,
                 errorEndDate: false,
+                msgErrorFN: '',
+                msgErrorEM: '',
                 msgErrorRN: '',
                 msgErrorSD: '',
                 msgErrorED: '',
             })
         } else if (isDate && type === 'end_date') {
             this.setState({ ...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') },
+                errorFullname: false,
+                errorEmail: false,    
                 errorRoleName: false,
                 errorStartDate: false,
                 errorEndDate: false,
+                msgErrorFN: '',
+                msgErrorEM: '',
                 msgErrorRN: '',
                 msgErrorSD: '',
                 msgErrorED: '',
             })
         } else {
             this.setState({ ...data, tempData: { ...this.state.tempData, [e.target.name]: e.target.value }, 
+                errorFullname: false,
+                errorEmail: false,    
                 errorRoleName: false,
                 errorStartDate: false,
                 errorEndDate: false,
+                msgErrorFN: '',
+                msgErrorEM: '',
                 msgErrorRN: '',
                 msgErrorSD: '',
                 msgErrorED: '',
@@ -90,6 +102,7 @@ export default class EditUser extends Component {
 
     getDetailUser() {
         api.create().getDetailUser(this.state.paramsId).then((response) => {
+            this.getRole()
             if (response.data.status === 'success') {
                 this.setState({tempData: response.data.data, company: response.data.data.company})
                 console.log(response.data.data)
@@ -100,8 +113,24 @@ export default class EditUser extends Component {
     }
 
     validasi() {
+        if (R.isEmpty(this.state.tempData.fullname)) {
+            this.setState({errorFullname: true, msgErrorFN: 'Nama Lengkap tidak boleh kosong'})
+        } else if (R.isEmpty(this.state.tempData.email)) {
+            this.setState({errorEmail: true, msgErrorEM: 'Email tidak boleh kosong'})
+        } else if (R.isEmpty(this.state.tempData.role_name)) {
+            this.setState({errorRoleName: true, msgErrorRN: 'Role Name tidak boleh kosong'})
+        } else if (R.isNil(this.state.tempData.start_date)) {
+            this.setState({errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong'})
+        } else if (R.isNil(this.state.tempData.end_date)) {
+            this.setState({errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong'})
+        }  
+        // else if (this.state.privileges.length < 1) {
+        //     alert('Hak Akses belum di pilih !!')
+        // } 
+        else {
             this.updateUser()
         }
+    }
 
     updateUser() {
         let payload = {
@@ -225,7 +254,8 @@ export default class EditUser extends Component {
                                 value={this.state.tempData === null? '' : this.state.tempData.fullname}
                                 onChange={(e) => this.handleChange(e, '')}
                                 // defaultValue="Default Value"
-                                // helperText="Some important text"
+                                error={this.state.errorFullname}
+                                helperText={this.state.msgErrorFN}
                                 />
                             </div>
                         </div>
@@ -241,8 +271,8 @@ export default class EditUser extends Component {
                                 label="Email"
                                 value={this.state.tempData === null? '' : this.state.tempData.email}
                                 onChange={(e) => this.handleChange(e, '')}
-                                // defaultValue="Default Value"
-                                // helperText="Some important text"
+                                error={this.state.errorEmail}
+                                helperText={this.state.msgErrorEM}
                                 />
                             </div>
                         </div>
@@ -254,6 +284,7 @@ export default class EditUser extends Component {
                                     id="role"
                                     onChange={(event, newInputValue) => this.setState({role: newInputValue})}
                                     debug
+                                    
                                     renderInput={(params) => <TextField {...params} label="Role" margin="normal" style={{marginTop: 7}}/>}
                                     value={this.state.role}
                                 />
@@ -276,7 +307,6 @@ export default class EditUser extends Component {
                                     KeyboardButtonProps={{
                                         'aria-label': 'change date',
                                     }}
-
                                     style={{ padding: 0, margin: 0, width: '100%' }}
                                 />
                             </div>