Merge branch 'didam' into 'master'

update didam

See merge request !54

package-lock.json

@@ -1163,6 +1163,34 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@date-io/core": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+      "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+    },
+    "@date-io/date-fns": {
+      "version": "1.3.13",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
+      "integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
+      "requires": {
+        "@date-io/core": "^1.3.13"
+      }
+    },
+    "@date-io/moment": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.8.0.tgz",
+      "integrity": "sha512-dJasasxlQJA63BjjBDZ9D+6rTctRKaHCFbNkMpPA2O6wWLga4oQQAwCr+UwacZ7eyWZTc+oQzvWIRkvnssA3Kg==",
+      "requires": {
+        "@date-io/core": "^2.8.0"
+      },
+      "dependencies": {
+        "@date-io/core": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.8.0.tgz",
+          "integrity": "sha512-MIL74B3O08gjjm5fcDSWME5MfdsvyQBX58zlWHIzM+m2h3+M5rP6P+T3qym3FWnpc8EKK5E8kF97nLqNiOwgkQ=="
+        }
+      }
+    },
     "@emotion/hash": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
@@ -1420,6 +1448,26 @@
         "@babel/runtime": "^7.4.4"
       }
     },
+    "@material-ui/pickers": {
+      "version": "3.2.10",
+      "resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.2.10.tgz",
+      "integrity": "sha512-B8G6Obn5S3RCl7hwahkQj9sKUapwXWFjiaz/Bsw1fhYFdNMnDUolRiWQSoKPb1/oKe37Dtfszoywi1Ynbo3y8w==",
+      "requires": {
+        "@babel/runtime": "^7.6.0",
+        "@date-io/core": "1.x",
+        "@types/styled-jsx": "^2.2.8",
+        "clsx": "^1.0.2",
+        "react-transition-group": "^4.0.0",
+        "rifm": "^0.7.0"
+      },
+      "dependencies": {
+        "@date-io/core": {
+          "version": "1.3.13",
+          "resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
+          "integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
+        }
+      }
+    },
     "@material-ui/styles": {
       "version": "4.10.0",
       "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
@@ -1942,6 +1990,14 @@
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
       "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
     },
+    "@types/styled-jsx": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.8.tgz",
+      "integrity": "sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@types/testing-library__dom": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz",
@@ -4698,6 +4754,11 @@
         }
       }
     },
+    "date-fns": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.15.0.tgz",
+      "integrity": "sha512-ZCPzAMJZn3rNUvvQIMlXhDr4A+Ar07eLeGsGREoWU19a3Pqf5oYa+ccd+B3F6XVtQY6HANMFdOQ8A+ipFnvJdQ=="
+    },
     "debug": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
@@ -6542,9 +6603,9 @@
       "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
     },
     "fsevents": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
-      "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
+      "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
       "optional": true
     },
     "fstream": {
@@ -9304,6 +9365,11 @@
         "minimist": "^1.2.5"
       }
     },
+    "moment": {
+      "version": "2.27.0",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+      "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -11983,6 +12049,14 @@
         "webpack-dev-server": "3.10.3",
         "webpack-manifest-plugin": "2.2.0",
         "workbox-webpack-plugin": "4.3.1"
+      },
+      "dependencies": {
+        "fsevents": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
+          "integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
+          "optional": true
+        }
       }
     },
     "react-sortable-tree": {
@@ -12543,6 +12617,14 @@
       "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
       "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
     },
+    "rifm": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
+      "integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1"
+      }
+    },
     "rimraf": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",

package.json

@@ -4,14 +4,19 @@
   "homepage": "http://localhost:8080/tia-web/",
   "private": true,
   "dependencies": {
+    "@date-io/date-fns": "^1.3.13",
+    "@date-io/moment": "^2.8.0",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/pickers": "^3.2.10",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "apisauce": "^1.1.2",
     "bootstrap": "^4.5.2",
+    "date-fns": "^2.15.0",
     "font-awesome": "^4.7.0",
+    "moment": "^2.27.0",
     "mui-datatables": "^3.3.1",
     "node-sass": "^4.14.1",
     "react": "^16.13.1",

src/api/index.js

@@ -69,7 +69,7 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
   //Role
   const getRole = () => api.get('role/get_all_role')
   const getDetailRole = (roleId) => api.get(`role/get_role_by_id/${roleId}`)
-  const searchRole = (body) => api.get('/role/search_role', body)
+  const searchRole = (body) => api.post('/role/search_role', body)
   const addRole = (body) => api.post('role/create_role', body)
   const editRole = (body) => api.post('role/update_role', body)
   const deleteRole = (roleId) => api.post(`role/delete_role/${roleId}`)

src/container/Home.js

@@ -20,6 +20,9 @@ import ListItemText from '@material-ui/core/ListItemText';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
 import MailIcon from '@material-ui/icons/Mail';
 import Collapse from '@material-ui/core/Collapse';
+import DateFnsUtils from '@date-io/date-fns';
+import { DateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
+import localeID from 'date-fns/locale/id';
 
 import {
   BrowserRouter as Router,
@@ -270,6 +273,7 @@ export default function MiniDrawer() {
       <div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
         <div>
           <div className={classes.toolbar} />
+          <MuiPickersUtilsProvider locale={localeID} utils={DateFnsUtils}>
             <Switch>
               {HomeRoutes.map((route, index) => (
                 // You can render a <Route> in as many places
@@ -287,6 +291,7 @@ export default function MiniDrawer() {
                 />
               ))}
             </Switch>
+          </MuiPickersUtilsProvider>
           <Footer>
             <Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
           </Footer>

src/container/Otorisasi/UserRole.js

@@ -65,19 +65,34 @@ class UserRole extends Component {
       "keyword": this.state.search
     }
     api.create().searchRole(payload).then((response) => {
-      // console.log(response.data.data)
+      if (response.data.status == 'success') {
+        let data = response.data.data
+        let listData = data.map((item,index) => {
+          return [index, item.role_id, item.role_name, item.access, item.status]
+        })
+        this.setState({listRole: listData})
+      } else {
+        alert(response.data.message)
+      }
     })  
   }
 
   _handleKeyDown(e) {
     if (e.key === 'Enter') {
-      // console.log('do validate');
+      if (this.state.search.length > 0) {
+        this.searchRole()
+      } else {
+        this.getRole()
+      }
     }
   }
 
   handleChange(e) {
     let data = this.state
-    window.requestIdleCallback((e) => this.setState({...data, [e.target.name]: e.target.value}))
+    window.requestIdleCallback((e) => this.setState({...data, [e.target.name]: e.target.value}, () => {
+      alert('asdk')
+      
+    }))
   }
 
   render() {
@@ -96,7 +111,13 @@ class UserRole extends Component {
                 // onClick={() => console.log(tableMeta.rowData[1])}
                 onClick={() => this.setState({edit: true, indexData: tableMeta.rowData[1]})}
               >
-                <img src={Images.editCopy} />
+                <div style={{ display: 'flex' }}>
+                  { tableMeta.rowData[4] === "Aktif" ?
+                    <img src={Images.editCopy}/> :
+                    null
+                  }
+                </div >
+                
               </button>
             </div >
           );
@@ -107,8 +128,8 @@ class UserRole extends Component {
       options: {
         customBodyRender: (val, tableMeta) => {
           return (
-            <div style={{ display: 'flex', width: 50 }}>
-              {val}
+            <div style={{ display: 'flex' }}>
+              <span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
             </div >
           );
         }
@@ -118,8 +139,8 @@ class UserRole extends Component {
       options: {
         customBodyRender: (val, tableMeta) => {
           return (
-            <div style={{ display: 'flex', width: 250 }}>
-              {titleCase(val)}
+            <div style={{ display: 'flex' }}>
+              <span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
             </div >
           );
         }
@@ -129,13 +150,24 @@ class UserRole extends Component {
       options: {
         customBodyRender: (val, tableMeta) => {
           return (
-            <div style={{ display: 'flex'}}>
-              {val + ' Modul'}
+            <div style={{ display: 'flex' }}>
+              <span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val + ' Modul'}</span>
             </div >
           );
         }
       }
-    }, "Status"]
+    }, {
+      name: "Status",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex' }}>
+              <span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
+            </div >
+          );
+        }
+      }
+    }]
     const data = [
       ["1", "1", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
       ["2", "2", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
@@ -149,7 +181,7 @@ class UserRole extends Component {
         <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
         <div>
           <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
-            <label style={{ color: 'white', width: '20%', alignSelf: 'center'}}>Master Data - Role & Otorisasi</label>
+            <label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - Role & Otorisasi</label>
             <div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
               <div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5}}>
                 {/* <SearchIcon/> */}
@@ -165,11 +197,18 @@ class UserRole extends Component {
                     // search = [...search];
                     // search.push(e.target.value);
                     // search[0] = search;
-
-                    this.setState({ search: e.target.value });
+                    this.setState({ search: e.target.value }, () => {
+                      if (this.state.search.length > 0) {
+                        this.searchRole()
+                      } else {
+                        this.getRole()
+                      }
+                    });
                   }}
+                  onKeyDown={(e) => this._handleKeyDown(e)}
                   style={{width: '100%', borderBottomWidth: 0, borderBottomColor: 'red'}}
                   InputProps={{
+                    style: { fontFamily: 'nunito', borderBottomColor: 'white'},
                     startAdornment: (
                       <InputAdornment position="start">
                         <SearchIcon />
@@ -197,12 +236,14 @@ class UserRole extends Component {
         {this.state.add && (
           <AddRole 
             onClickClose={this.closeAdd.bind(this)}
+            refresh={this.getRole.bind(this)}
             data={this.state.indexData}
           />
         )}
         {this.state.edit && (
           <EditRole 
             onClickClose={this.closeEdit.bind(this)}
+            refresh={this.getRole.bind(this)}
             data={this.state.indexData}
           />
         )}