update

src/api/index.js

@@ -68,6 +68,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 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}`)
@@ -97,6 +98,7 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
     verification,
     getRole,
     getDetailRole,
+    searchRole,
     addRole,
     editRole,
     deleteRole,

src/container/Otorisasi/User.js

@@ -104,3 +104,191 @@ export default class User extends Component {
     );
   }
 }
+import React, { Component } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import SearchIcon from '@material-ui/icons/Search';
+import Images from "../../assets/Images";
+import MUIDataTable from "mui-datatables";
+import AddRole from './UserRole/AddRole';
+import EditRole from './UserRole/EditRole'
+import api from "../../api";
+import { titleCase } from "../../library/Utils";
+
+var ct = require("../../library/CustomTable");
+const getMuiTheme = () => createMuiTheme(ct.customTable());
+const options = ct.customOptions();
+
+export default class UserRole extends Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      listRole: [],
+      indexData: {},
+      add: false,
+      edit: false
+    }
+  }
+
+  componentDidMount() {
+    this.getRole()
+  }
+
+  closeEdit() {
+    this.setState({edit: false})
+  }
+
+  closeAdd() {
+    this.setState({add: false})
+  }
+
+  getRole() {
+    api.create().getRole().then((response) => {
+      // console.log(response)
+      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]
+        })
+        console.log(listData)
+        this.setState({listRole: listData})
+        // this.setState({listRole: response.data.data}, () => {
+        //   console.log(this.state.listRole)
+        // })
+        
+      } else {
+        alert(response.data.message)
+      }
+      console.log(response.data.data)
+    })
+  }
+
+  render() {
+    const columns = [{
+      name: "Action",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex' }}>
+              <button
+                style={{
+                  backgroundColor: 'transparent',
+                  cursor: 'pointer',
+                  borderColor: 'transparent',
+                }}
+                // onClick={() => console.log(tableMeta.rowData[1])}
+                onClick={() => this.setState({edit: true, indexData: tableMeta.rowData[1]})}
+              >
+                <img src={Images.editCopy} />
+              </button>
+            </div >
+          );
+        }
+      }
+    }, {
+      name: "ID",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex', width: 50 }}>
+              {val}
+            </div >
+          );
+        }
+      }
+    }, {
+      name: "Nama Lengkap",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex', width: 200 }}>
+              {titleCase(val)}
+            </div >
+          );
+        }
+      }
+    }, {
+      name: "Email",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex', width: 150 }}>
+              {titleCase(val)}
+            </div >
+          );
+        }
+      }
+    }, {
+      name: "Role",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex', width: 100 }}>
+              {titleCase(val)}
+            </div >
+          );
+        }
+      }
+    }, {
+      name: "Perusahaan",
+      options: {
+        customBodyRender: (val, tableMeta) => {
+          return (
+            <div style={{ display: 'flex'}}>
+              {val}
+            </div >
+          );
+        }
+      }
+    }, "Status"]
+    const data = [
+      ["1", "1", "Juki Kudet", "Juki@gmail.com)", "Admin", "Kepo", "Aktif"],
+      ["1", "2", "Kuji Mama", "Loro@gmail.com)", "Admin", "Kepo", "Aktif"],
+      ["1", "3", "Sutaru", "Jaka@gmail.com)", "Admin", "Kepo", "Aktif"],
+      ["1", "4", "Tatang Katro", "ikup@gmail.com)", "Admin", "Kepo", "Aktif"],
+      ["1", "5", "Firman", "Sudir@gmail.com)", "Admin", "Kepo", "Aktif"],
+    ]
+    return (
+      <div style={{ height: this.props.height }}>
+        {/* <Row> */}
+        <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>
+            <div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
+              <div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5, flexDirection: 'row', display: 'flex'}}>
+                <SearchIcon/>
+                <input type="text" placeholder={'Search Role'} style={{flexGrow: 1, marginLeft: 10}}/>
+              </div>
+            </div>
+            {/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
+            <div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
+              <img src={Images.add} onClick={() => this.setState({add: true})}/>
+            </div>
+          </div>
+          <div style={{ padding: 25 }}>
+            <MuiThemeProvider theme={getMuiTheme()}>
+              <MUIDataTable
+                data={data}
+                columns={columns}
+                options={options}
+              />
+            </MuiThemeProvider>
+          </div>
+        </div>
+        {this.state.add && (
+          <AddRole 
+            onClickClose={this.closeAdd.bind(this)}
+            data={this.state.indexData}
+          />
+        )}
+        {this.state.edit && (
+          <EditRole 
+            onClickClose={this.closeEdit.bind(this)}
+            data={this.state.indexData}
+          />
+        )}
+      </div>
+    );
+  }
+}

src/container/Otorisasi/UserRole.js

-import React, { Component } from "react";
+import React, { Component, memo } from "react";
 import { Container, Row, Col } from "react-bootstrap";
 import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
 import SearchIcon from '@material-ui/icons/Search';
@@ -8,19 +8,22 @@ import AddRole from './UserRole/AddRole';
 import EditRole from './UserRole/EditRole'
 import api from "../../api";
 import { titleCase } from "../../library/Utils";
-
+import InputAdornment from '@material-ui/core/InputAdornment';
+import TextField from '@material-ui/core/TextField';
+import AccountCircle from '@material-ui/icons/AccountCircle';
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
 
-export default class UserRole extends Component {
+class UserRole extends Component {
   constructor(props) {
     super(props)
     this.state = {
       listRole: [],
       indexData: {},
       add: false,
-      edit: false
+      edit: false,
+      search: ''
     }
   }
 
@@ -44,7 +47,7 @@ export default class UserRole extends Component {
         let listData = data.map((item,index) => {
           return [index, item.role_id, item.role_name, item.access, item.status]
         })
-        console.log(listData)
+        // console.log(listData)
         this.setState({listRole: listData})
         // this.setState({listRole: response.data.data}, () => {
         //   console.log(this.state.listRole)
@@ -53,10 +56,30 @@ export default class UserRole extends Component {
       } else {
         alert(response.data.message)
       }
-      console.log(response.data.data)
+      // console.log(response.data.data)
     })
   }
 
+  searchRole() {
+    let payload = {
+      "keyword": this.state.search
+    }
+    api.create().searchRole(payload).then((response) => {
+      // console.log(response.data.data)
+    })  
+  }
+
+  _handleKeyDown(e) {
+    if (e.key === 'Enter') {
+      // console.log('do validate');
+    }
+  }
+
+  handleChange(e) {
+    let data = this.state
+    window.requestIdleCallback((e) => this.setState({...data, [e.target.name]: e.target.value}))
+  }
+
   render() {
     const columns = [{
       name: "Action",
@@ -128,9 +151,32 @@ export default class UserRole extends Component {
           <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>
             <div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
-              <div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5, flexDirection: 'row', display: 'flex'}}>
-                <SearchIcon/>
-                <input type="text" placeholder={'Search Role'} style={{flexGrow: 1, marginLeft: 10}}/>
+              <div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5}}>
+                {/* <SearchIcon/> */}
+                <TextField
+                  // className={classes.margin}
+                  id="input-with-icon-textfield"
+                  // label="TextField"
+                  name="search" 
+                  value={this.state.search}
+                  placeholder={'Search Role'}
+                  onChange={(e) => {
+                    // let { search } = this.state;
+                    // search = [...search];
+                    // search.push(e.target.value);
+                    // search[0] = search;
+
+                    this.setState({ search: e.target.value });
+                  }}
+                  style={{width: '100%', borderBottomWidth: 0, borderBottomColor: 'red'}}
+                  InputProps={{
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <SearchIcon />
+                      </InputAdornment>
+                    ),
+                  }}
+                />
               </div>
             </div>
             {/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
@@ -164,3 +210,5 @@ export default class UserRole extends Component {
     );
   }
 }
+
+export default memo(UserRole);
\ No newline at end of file

src/container/Otorisasi/UserRole/EditRole.js

 import React, { Component } from 'react';
-import { TextField, Divider, Typography, Checkbox } from '@material-ui/core';
+import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
 import api from '../../../api';
 
+const CustomCheckbox = withStyles({
+    root: {
+      color: '#51c6ea',
+      '&$checked': {
+        color: '#51c6ea',
+      },
+    },
+    checked: {},
+  })((props) => <Checkbox color="default" {...props} />);
+
 export default class EditRole extends Component {
     
     constructor(props) {
@@ -91,7 +101,7 @@ export default class EditRole extends Component {
             value = false
         } else {
             let arrayButton = this.state.privileges[indexID].button_id
-            console.log(arrayButton)
+            // console.log(arrayButton)
             let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
             // console.log(indexButtonID)
             if (indexButtonID == -1) {
@@ -252,47 +262,46 @@ export default class EditRole extends Component {
                                 </div>
                             </div>
                         </div>
-
-                        {this.state.menuData !== null && this.state.menuData.map((item,index) => {
-                            return (
-                                <div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
-                                    <div className="column-1" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
-                                        <Checkbox
-                                            checked={this.handleItemChecked(item)}
-                                            onChange={() => this.handleItemClick(item)}
-                                            inputProps={{ 'aria-label': 'primary checkbox' }}
-                                        />
-                                        <Typography style={{fontSize: 12}}>{item.menu_name}</Typography>
-                                    </div>
-                                    <div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
-                                        <div className="column-1">
-                                            <Checkbox
-                                                // disabled={}
-                                                checked={this.handleSubItemChecked(item, 1)}
-                                                onChange={() => this.handleSubItemClick(item,1)}
-                                                inputProps={{ 'aria-label': 'primary checkbox' }}
-                                            />
-                                        </div>
-                                        <div className="column-2">
-                                            <Checkbox
-                                                // disabled
-                                                checked={this.handleSubItemChecked(item, 2)}
-                                                onChange={() => this.handleSubItemClick(item,2)}
-                                                inputProps={{ 'aria-label': 'primary checkbox' }}
+                        
+                        <div style={{height: '25vh', overflow: 'scroll'}}>
+                            {this.state.menuData !== null && this.state.menuData.map((item,index) => {
+                                return (
+                                    <div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
+                                        <div className="column-1" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
+                                            <CustomCheckbox
+                                                checked={this.handleItemChecked(item)}
+                                                onChange={() => this.handleItemClick(item)}
                                             />
+                                            <Typography style={{fontSize: 12}}>{item.menu_name}</Typography>
                                         </div>
-                                        <div className="column 3">
-                                            <Checkbox
-                                                // disabled
-                                                checked={this.handleSubItemChecked(item, 3)}
-                                                onChange={() => this.handleSubItemClick(item,3)}
-                                                inputProps={{ 'aria-label': 'primary checkbox' }}
-                                            />
+                                        <div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
+                                            <div className="column-1">
+                                                <CustomCheckbox
+                                                    // disabled={}
+                                                    checked={this.handleSubItemChecked(item, 1)}
+                                                    onChange={() => this.handleSubItemClick(item,1)}
+                                                />
+                                            </div>
+                                            <div className="column-2">
+                                                <CustomCheckbox
+                                                    // disabled
+                                                    checked={this.handleSubItemChecked(item, 2)}
+                                                    onChange={() => this.handleSubItemClick(item,2)}
+                                                />
+                                            </div>
+                                            <div className="column 3">
+                                                <CustomCheckbox
+                                                    // disabled
+                                                    checked={this.handleSubItemChecked(item, 3)}
+                                                    onChange={() => this.handleSubItemClick(item,3)}
+                                                />
+                                            </div>
                                         </div>
                                     </div>
-                                </div>
-                            )
-                        })}
+                                )
+                            })}
+                        </div>
+                        
                     </div>
                     <div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
                         <div className="column-1" style={{ alignSelf: 'center' }}>