Skip to content

T
Tia-dev
Commit ef751e91 authored by d.arizona's avatar d.arizona
Browse files
Options

update didam

parent 586128e4
Hide whitespace changes
Inline Side-by-side
Showing with 286 additions and 300 deletions
src/api/index.js
View file @ ef751e91
...@@ -95,7 +95,16 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/') ...@@ -95,7 +95,16 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
const createAM = (body) => api.post('/approval_matrix/create_approval_matrix', body) const createAM = (body) => api.post('/approval_matrix/create_approval_matrix', body)
const updateAM = (body) => api.post('/approval_matrix/update_approval_matrix', body) const updateAM = (body) => api.post('/approval_matrix/update_approval_matrix', body)
//User
const getUser = () => api.get('user/get_all_user')
const getDetailUser = (userId) => api.get(`user/get_user_by_id/${userId}`)
const searchUser = (body) => api.post('user/search_user', body)
const createUser = (body) => api.get('user/create_user', body)
const updateUser = (body) => api.get('user/update_user', body)
const deleteUser = (userId) => api.get(`user/delete_user/${userId}`)
//Template
const downloadTemplate = (fileName,fileType) => api.get(`attachment/download_file?fileName=${fileName}&&fileType=${fileType}`)
// ------ // ------
// STEP 3 // STEP 3
// ------ // ------
...@@ -132,7 +141,14 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/') ...@@ -132,7 +141,14 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
updatePerusahaan, updatePerusahaan,
getApprovedByAM, getApprovedByAM,
createAM, createAM,
updateAM updateAM,
getUser,
getDetailUser,
searchUser,
createUser,
updateUser,
deleteUser,
downloadTemplate
} }
} }
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ ef751e91
...@@ -57,6 +57,8 @@ export default class CreateApprovalMatrix extends Component { ...@@ -57,6 +57,8 @@ export default class CreateApprovalMatrix extends Component {
// operator: '', // operator: '',
startDate: '', startDate: '',
endDate: '', endDate: '',
userData: [],
value: null
} }
} }
...@@ -80,7 +82,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -80,7 +82,7 @@ export default class CreateApprovalMatrix extends Component {
options: userData, options: userData,
getOptionLabel: (option) => option.fullname, getOptionLabel: (option) => option.fullname,
}; };
this.setState({ approvedBy: defaultProps, userData: response.data.data }) this.setState({ approvedBy: defaultProps, userData: response.data.data, value: userData[0] })
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
...@@ -205,6 +207,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -205,6 +207,7 @@ export default class CreateApprovalMatrix extends Component {
onChange={(event, newInputValue) => this.setState({userId:newInputValue.user_id}, () => console.log(this.state.userId))} onChange={(event, newInputValue) => this.setState({userId:newInputValue.user_id}, () => console.log(this.state.userId))}
debug debug
renderInput={(params) => <TextField {...params} label="debug" margin="normal" />} renderInput={(params) => <TextField {...params} label="debug" margin="normal" />}
value={this.state.value}
/> />
</div> </div>
</div> </div>
......
src/container/Otorisasi/User.js
View file @ ef751e91
...@@ -4,8 +4,8 @@ import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/ ...@@ -4,8 +4,8 @@ import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@material-ui/icons/Search';
import Images from "../../assets/Images"; import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
import AddRole from './UserRole/AddRole'; import AddUser from './User/AddUser';
import EditRole from './UserRole/EditRole' import EditUser from './User/EditUser'
import api from "../../api"; import api from "../../api";
import { titleCase } from "../../library/Utils"; import { titleCase } from "../../library/Utils";
import { InputAdornment, TextField } from "@material-ui/core"; import { InputAdornment, TextField } from "@material-ui/core";
...@@ -18,7 +18,7 @@ export default class UserRole extends Component { ...@@ -18,7 +18,7 @@ export default class UserRole extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
listRole: [], listUser: [],
indexData: {}, indexData: {},
add: false, add: false,
edit: false edit: false
...@@ -26,7 +26,7 @@ export default class UserRole extends Component { ...@@ -26,7 +26,7 @@ export default class UserRole extends Component {
} }
componentDidMount() { componentDidMount() {
this.getRole() this.getUser()
} }
closeEdit() { closeEdit() {
...@@ -37,27 +37,54 @@ export default class UserRole extends Component { ...@@ -37,27 +37,54 @@ export default class UserRole extends Component {
this.setState({add: false}) this.setState({add: false})
} }
getRole() { getUser() {
api.create().getRole().then((response) => { api.create().getUser().then((response) => {
// console.log(response) // console.log(response)
if (response.data.status == 'success') { if (response.data.status == 'success') {
// console.log(response.data.data)
let data = response.data.data let data = response.data.data
let listData = data.map((item,index) => { let listData = data.map((item,index) => {
return [index, item.role_id, item.role_name, item.access, item.status] return [index, item.user_id, item.fullname, item.email, item.role_name, item.company, item.status]
}) })
console.log(listData) // console.log(listData)
this.setState({listRole: listData}) this.setState({listUser: listData})
// this.setState({listRole: response.data.data}, () => { // this.setState({listUser: response.data.data}, () => {
// console.log(this.state.listRole) // console.log(this.state.listUser)
// }) // })
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
console.log(response.data.data) // console.log(response.data.data)
}) })
} }
searchUser() {
let payload = {
"keyword": this.state.search
}
api.create().searchUser(payload).then((response) => {
if (response.data.status == 'success') {
let data = response.data.data
let listData = data.map((item,index) => {
return [index, item.user_id, item.fullname, item.email, item.role_name, item.company, item.status]
})
this.setState({listUser: listData})
} else {
alert(response.data.message)
}
})
}
_handleKeyDown(e) {
if (e.key === 'Enter') {
if (this.state.search.length > 0) {
this.searchUser()
} else {
this.getRole()
}
}
}
render() { render() {
const columns = [{ const columns = [{
name: "Action", name: "Action",
...@@ -160,9 +187,9 @@ export default class UserRole extends Component { ...@@ -160,9 +187,9 @@ export default class UserRole extends Component {
onChange={(e) => { onChange={(e) => {
this.setState({ search: e.target.value }, () => { this.setState({ search: e.target.value }, () => {
if (this.state.search.length > 0) { if (this.state.search.length > 0) {
this.searchRole() this.searchUser()
} else { } else {
this.getRole() this.getUser()
} }
}); });
}} }}
...@@ -190,7 +217,7 @@ export default class UserRole extends Component { ...@@ -190,7 +217,7 @@ export default class UserRole extends Component {
<div style={{ padding: 25 }}> <div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={data} data={this.state.listUser}
columns={columns} columns={columns}
options={options} options={options}
/> />
...@@ -198,13 +225,13 @@ export default class UserRole extends Component { ...@@ -198,13 +225,13 @@ export default class UserRole extends Component {
</div> </div>
</div> </div>
{this.state.add && ( {this.state.add && (
<AddRole <AddUser
onClickClose={this.closeAdd.bind(this)} onClickClose={this.closeAdd.bind(this)}
data={this.state.indexData} data={this.state.indexData}
/> />
)} )}
{this.state.edit && ( {this.state.edit && (
<EditRole <EditUser
onClickClose={this.closeEdit.bind(this)} onClickClose={this.closeEdit.bind(this)}
data={this.state.indexData} data={this.state.indexData}
/> />
......
src/container/Otorisasi/User/AddUser.js
View file @ ef751e91
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core'; import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
import api from '../../../api'; import api from '../../../api';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../../../library/Utils';
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
...@@ -20,8 +22,14 @@ export default class AddUser extends Component { ...@@ -20,8 +22,14 @@ export default class AddUser extends Component {
paramsId: this.props.data, paramsId: this.props.data,
tempData: null, tempData: null,
menuData: null, menuData: null,
privileges: [], checked: false,
checked: false fullname: '',
email: '',
role: null,
startDate: null,
endDate: null,
company: [],
listRole: null
} }
} }
...@@ -30,7 +38,7 @@ export default class AddUser extends Component { ...@@ -30,7 +38,7 @@ export default class AddUser extends Component {
} }
componentDidMount() { componentDidMount() {
this.getMenu() this.getRole()
} }
handleChange(e) { handleChange(e) {
...@@ -38,83 +46,42 @@ export default class AddUser extends Component { ...@@ -38,83 +46,42 @@ export default class AddUser extends Component {
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}}) this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
} }
crateUser() {
updateRole() {
let payload = { let payload = {
"role_id": 40, "role_id": this.state.role.role_id,
"role_name": "admin-tia", "email": this.state.email,
"start_date": "2020-01-01", "fullname": this.state.fullname,
"end_date": "2020-12-31", "password": this.state.fullname,
"privileges": [ "company": this.state.company,
{ "start_date": this.state.startDate,
"menu_id": 17, "end_date": this.state.endDate
"button_id": [1, 2, 3]
}
]
} }
api.create().createUser(payload).then((response) => {
console.log(response)
})
} }
getMenu() { getRole() {
api.create().getMenu().then((response) => { api.create().getRole().then((response) => {
if (response.data.status == 'success') { if(response.data.status == 'success') {
this.setState({menuData: response.data.data}) let data = response.data.data
let roleData = data.map((item) => {
return {
role_id: item.role_id,
role_name: item.role_name
}
})
let defaultProps = {
options: roleData,
getOptionLabel: (option) => titleCase(option.role_name),
};
this.setState({listRole: defaultProps})
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
}) })
} }
handleItemChecked(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
return indexID == -1? false : true
}
handleItemClick(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let privileges = this.state.privileges
if (indexID == -1) {
privileges.push({
menu_id: item.menu_id,
button_id: [1,2,3]
})
} else {
privileges.splice(indexID,1)
}
this.setState({privileges})
}
handleSubItemChecked(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let value = false
if (indexID == -1) {
value = false
} else {
let arrayButton = this.state.privileges[indexID].button_id
console.log(arrayButton)
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
// console.log(indexButtonID)
if (indexButtonID == -1) {
value = false
} else {
value = true
}
}
return indexID == -1? value : value
}
handleSubItemClick(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
let privileges = this.state.privileges
let button_id = privileges[indexID].button_id
if (indexButtonID == -1) {
button_id.push(index)
} else {
button_id.splice(indexButtonID,1)
}
privileges[indexID].button_id = button_id
this.setState({privileges})
}
render() { render() {
return ( return (
...@@ -139,7 +106,7 @@ export default class AddUser extends Component { ...@@ -139,7 +106,7 @@ export default class AddUser extends Component {
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="">
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="id" id="id"
...@@ -147,7 +114,7 @@ export default class AddUser extends Component { ...@@ -147,7 +114,7 @@ export default class AddUser extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.role_id} value={'-'}
onChange={(e) => null} onChange={(e) => null}
> >
{/* {periode.map((option) => ( {/* {periode.map((option) => (
...@@ -160,19 +127,49 @@ export default class AddUser extends Component { ...@@ -160,19 +127,49 @@ export default class AddUser extends Component {
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="">
<TextField
style={{ width: '100%' , marginTop: 7}}
id="fullname"
name="fullname"
label="Nama Lengkap"
value={this.state.tempData == null? '' : this.state.tempData.fullname}
onChange={(e) => this.handleChange(e)}
// defaultValue="Default Value"
// helperText="Some important text"
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <TextField
style={{ width: '100%' , marginTop: 7}} style={{ width: '100%' , marginTop: 7}}
id="userRole" id="email"
name="role_name" name="email"
label="User Role" label="Email"
value={this.state.tempData == null? '' : this.state.tempData.role_name} value={this.state.tempData == null? '' : this.state.tempData.email}
onChange={(e) => this.handleChange(e)} onChange={(e) => this.handleChange(e)}
// defaultValue="Default Value" // defaultValue="Default Value"
// helperText="Some important text" // helperText="Some important text"
/> />
</div> </div>
</div> </div>
<div className="column-2">
<div className="margin-bottom-20px">
<Autocomplete
{...this.state.listRole}
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}
/>
</div>
</div>
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
...@@ -217,7 +214,28 @@ export default class AddUser extends Component { ...@@ -217,7 +214,28 @@ export default class AddUser extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.status} value={'Aktif'}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="is_expired"
name="is_expired"
label="Expired"
disabled
// id="outlined-read-only-input"
variant="filled"
value={'T'}
> >
{/* {periode.map((option) => ( {/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -230,78 +248,28 @@ export default class AddUser extends Component { ...@@ -230,78 +248,28 @@ export default class AddUser extends Component {
</div> </div>
<div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}> <div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${this.state.tempData == null? '' : this.state.tempData.created}`}</Typography> <Typography style={{fontSize: 12}}>{`Dibuat : ${this.state.tempData == null? '' : this.state.tempData.created}`}</Typography>
<Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData == null? '' : this.state.tempData.updated}`}</Typography> {/* <Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData == null? '' : this.state.tempData.updated}`}</Typography> */}
</div> </div>
<Divider style={{margin: 20}}/> <Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}> <div style={{paddingLeft: 20, paddingRight: 20}}>
<h5>Hak Akses</h5> <h5>Otorisasi Perusahaan</h5>
<div className="grid grid-2x grid-mobile-none gap-15px padding-top-5px padding-bottom-5px padding-left-10px padding-right-10px " style={{backgroundColor: '#4b4b4b'}}>
<div className="column-1">
<Typography style={{fontSize: 12, color: 'white'}}>Otorisasi Modul</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1">
<Typography style={{fontSize: 12, color: 'white'}}>Lihat</Typography>
</div>
<div className="column-2">
<Typography style={{fontSize: 12, color: 'white'}}>Tambah</Typography>
</div>
<div className="column 3">
<Typography style={{fontSize: 12, color: 'white'}}>Ubah</Typography>
</div>
</div>
</div>
<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-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="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}> <div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <button onClick={() => this.props.onClickClose()}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
</div> <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
</div> </div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}> <div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <button onClick={() => this.validasi()}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
</div> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div> </div>
</div> </div>
</div> </div>
......
src/container/Otorisasi/User/EditUser.js
View file @ ef751e91
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core'; import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
import api from '../../../api'; import api from '../../../api';
import { titleCase } from '../../../library/Utils';
import Autocomplete from '@material-ui/lab/Autocomplete';
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
...@@ -20,8 +22,10 @@ export default class EditUser extends Component { ...@@ -20,8 +22,10 @@ export default class EditUser extends Component {
paramsId: this.props.data, paramsId: this.props.data,
tempData: null, tempData: null,
menuData: null, menuData: null,
privileges: [], checked: false,
checked: false listRole: null,
role: null,
company: [],
} }
} }
...@@ -30,8 +34,8 @@ export default class EditUser extends Component { ...@@ -30,8 +34,8 @@ export default class EditUser extends Component {
} }
componentDidMount() { componentDidMount() {
this.getDetailRole() this.getDetailUser()
this.getMenu() this.getRole()
} }
handleChange(e) { handleChange(e) {
...@@ -39,93 +43,60 @@ export default class EditUser extends Component { ...@@ -39,93 +43,60 @@ export default class EditUser extends Component {
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}}) this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
} }
getDetailRole() { getDetailUser() {
api.create().getDetailRole(this.state.paramsId).then((response) => { api.create().getDetailUser(this.state.paramsId).then((response) => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
this.setState({tempData: response.data.data, privileges: response.data.data.privileges}) this.setState({tempData: response.data.data})
console.log(response.data.data)
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
}) })
} }
validasi() {
this.props.onClickClose()
}
updateRole() { updateUser() {
let payload = { let payload = {
"role_id": 40, "user_id": this.state.tempData.user_id,
"role_name": "admin-tia", "role_id": this.state.role.role_id,
"start_date": "2020-01-01", "email": this.state.tempData.email,
"end_date": "2020-12-31", "fullname": this.state.tempData.fullname,
"privileges": [ "company": this.state.company,
{ "start_date": this.state.tempData.start_date,
"menu_id": 17, "end_date": this.state.tempData.end_date
"button_id": [1, 2, 3]
}
]
} }
} api.create().updateUser(payload).then((response) => {
console.log(response)
getMenu() {
api.create().getMenu().then((response) => {
if (response.data.status == 'success') {
this.setState({menuData: response.data.data})
} else {
alert(response.data.message)
}
}) })
} }
handleItemChecked(item) { getRole() {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id) api.create().getRole().then((response) => {
return indexID == -1? false : true if(response.data.status == 'success') {
} let data = response.data.data
let roleData = data.map((item) => {
return {
role_id: item.role_id,
role_name: item.role_name
}
})
let defaultProps = {
options: roleData,
getOptionLabel: (option) => titleCase(option.role_name),
};
handleItemClick(item) { let index = roleData.findIndex((val) => val.role_id == this.state.tempData.role_id)
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id) console.log(index)
let privileges = this.state.privileges this.setState({listRole: defaultProps, role: index == -1? roleData[0] : roleData[index]})
if (indexID == -1) {
privileges.push({
menu_id: item.menu_id,
button_id: [1,2,3]
})
} else {
privileges.splice(indexID,1)
}
this.setState({privileges})
}
handleSubItemChecked(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let value = false
if (indexID == -1) {
value = false
} else {
let arrayButton = this.state.privileges[indexID].button_id
console.log(arrayButton)
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
// console.log(indexButtonID)
if (indexButtonID == -1) {
value = false
} else { } else {
value = true alert(response.data.message)
} }
} })
return indexID == -1? value : value
} }
handleSubItemClick(item, index) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
let privileges = this.state.privileges
let button_id = privileges[indexID].button_id
if (indexButtonID == -1) {
button_id.push(index)
} else {
button_id.splice(indexButtonID,1)
}
privileges[indexID].button_id = button_id
this.setState({privileges})
}
render() { render() {
return ( return (
...@@ -150,7 +121,7 @@ export default class EditUser extends Component { ...@@ -150,7 +121,7 @@ export default class EditUser extends Component {
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="">
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="id" id="id"
...@@ -158,7 +129,7 @@ export default class EditUser extends Component { ...@@ -158,7 +129,7 @@ export default class EditUser extends Component {
disabled disabled
// id="outlined-read-only-input" // id="outlined-read-only-input"
variant="filled" variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.role_id} value={this.state.tempData == null? '' : this.state.tempData.user_id}
onChange={(e) => null} onChange={(e) => null}
> >
{/* {periode.map((option) => ( {/* {periode.map((option) => (
...@@ -171,19 +142,49 @@ export default class EditUser extends Component { ...@@ -171,19 +142,49 @@ export default class EditUser extends Component {
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="">
<TextField
style={{ width: '100%' , marginTop: 7}}
id="fullname"
name="fullname"
label="Nama Lengkap"
value={this.state.tempData == null? '' : this.state.tempData.fullname}
onChange={(e) => this.handleChange(e)}
// defaultValue="Default Value"
// helperText="Some important text"
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <TextField
style={{ width: '100%' , marginTop: 7}} style={{ width: '100%' , marginTop: 7}}
id="userRole" id="email"
name="role_name" name="email"
label="User Role" label="Email"
value={this.state.tempData == null? '' : this.state.tempData.role_name} value={this.state.tempData == null? '' : this.state.tempData.email}
onChange={(e) => this.handleChange(e)} onChange={(e) => this.handleChange(e)}
// defaultValue="Default Value" // defaultValue="Default Value"
// helperText="Some important text" // helperText="Some important text"
/> />
</div> </div>
</div> </div>
<div className="column-2">
<div className="margin-bottom-20px">
<Autocomplete
{...this.state.listRole}
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}
/>
</div>
</div>
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
...@@ -238,6 +239,27 @@ export default class EditUser extends Component { ...@@ -238,6 +239,27 @@ export default class EditUser extends Component {
</TextField> </TextField>
</div> </div>
</div> </div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="is_expired"
name="is_expired"
label="Expired"
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.is_expired}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div> </div>
<div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}> <div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${this.state.tempData == null? '' : this.state.tempData.created}`}</Typography> <Typography style={{fontSize: 12}}>{`Dibuat : ${this.state.tempData == null? '' : this.state.tempData.created}`}</Typography>
...@@ -245,74 +267,24 @@ export default class EditUser extends Component { ...@@ -245,74 +267,24 @@ export default class EditUser extends Component {
</div> </div>
<Divider style={{margin: 20}}/> <Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}> <div style={{paddingLeft: 20, paddingRight: 20}}>
<h5>Hak Akses</h5> <h5>Otorisasi Perusahaan</h5>
<div className="grid grid-2x grid-mobile-none gap-15px padding-top-5px padding-bottom-5px padding-left-10px padding-right-10px " style={{backgroundColor: '#4b4b4b'}}>
<div className="column-1">
<Typography style={{fontSize: 12, color: 'white'}}>Otorisasi Modul</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1">
<Typography style={{fontSize: 12, color: 'white'}}>Lihat</Typography>
</div>
<div className="column-2">
<Typography style={{fontSize: 12, color: 'white'}}>Tambah</Typography>
</div>
<div className="column 3">
<Typography style={{fontSize: 12, color: 'white'}}>Ubah</Typography>
</div>
</div>
</div>
<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-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="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}> <div className="column-1" style={{ alignSelf: 'center' }}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <button onClick={() => this.props.onClickClose()}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
</div> <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
</div> </div>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}> <div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <button onClick={() => this.validasi()}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
</div> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment