Skip to content

T
Tia-dev
Commit 9a5ff868 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'didam' into 'master' 

update didam

See merge request !66
parents dfe9e7ff ef751e91
Show whitespace changes
Inline Side-by-side
Showing with 286 additions and 300 deletions
src/api/index.js
View file @ 9a5ff868
...@@ -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 @ 9a5ff868
...@@ -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 @ 9a5ff868
...@@ -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 {
alert(response.data.message)
}
// 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 { } else {
alert(response.data.message) alert(response.data.message)
} }
console.log(response.data.data)
}) })
} }
_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 @ 9a5ff868
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]
}
]
}
}
getMenu() {
api.create().getMenu().then((response) => {
if (response.data.status == 'success') {
this.setState({menuData: response.data.data})
} else {
alert(response.data.message)
} }
api.create().createUser(payload).then((response) => {
console.log(response)
}) })
} }
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
} }
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]
}) })
let defaultProps = {
options: roleData,
getOptionLabel: (option) => titleCase(option.role_name),
};
this.setState({listRole: defaultProps})
} else { } else {
privileges.splice(indexID,1) alert(response.data.message)
}
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' }}>
<button onClick={() => this.props.onClickClose()}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div> </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'}}>
<button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div> </div>
</button>
</div> </div>
</div> </div>
</div> </div>
......
src/container/Otorisasi/User/EditUser.js
View file @ 9a5ff868
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() {
updateRole() { this.props.onClickClose()
let payload = {
"role_id": 40,
"role_name": "admin-tia",
"start_date": "2020-01-01",
"end_date": "2020-12-31",
"privileges": [
{
"menu_id": 17,
"button_id": [1, 2, 3]
}
]
}
} }
getMenu() { updateUser() {
api.create().getMenu().then((response) => { let payload = {
if (response.data.status == 'success') { "user_id": this.state.tempData.user_id,
this.setState({menuData: response.data.data}) "role_id": this.state.role.role_id,
} else { "email": this.state.tempData.email,
alert(response.data.message) "fullname": this.state.tempData.fullname,
"company": this.state.company,
"start_date": this.state.tempData.start_date,
"end_date": this.state.tempData.end_date
} }
api.create().updateUser(payload).then((response) => {
console.log(response)
}) })
} }
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
} }
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 { let defaultProps = {
privileges.splice(indexID,1) options: roleData,
} getOptionLabel: (option) => titleCase(option.role_name),
this.setState({privileges}) };
}
handleSubItemChecked(item, index) { 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 value = false this.setState({listRole: defaultProps, role: index == -1? roleData[0] : roleData[index]})
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' }}>
<button onClick={() => this.props.onClickClose()}>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div> </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'}}>
<button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div> </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