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
Hide 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/')
const createAM = (body) => api.post('/approval_matrix/create_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
// ------
......@@ -132,7 +141,14 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
updatePerusahaan,
getApprovedByAM,
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 {
// operator: '',
startDate: '',
endDate: '',
userData: [],
value: null
}
}
......@@ -80,7 +82,7 @@ export default class CreateApprovalMatrix extends Component {
options: userData,
getOptionLabel: (option) => option.fullname,
};
this.setState({ approvedBy: defaultProps, userData: response.data.data })
this.setState({ approvedBy: defaultProps, userData: response.data.data, value: userData[0] })
} else {
alert(response.data.message)
}
......@@ -205,6 +207,7 @@ export default class CreateApprovalMatrix extends Component {
onChange={(event, newInputValue) => this.setState({userId:newInputValue.user_id}, () => console.log(this.state.userId))}
debug
renderInput={(params) => <TextField {...params} label="debug" margin="normal" />}
value={this.state.value}
/>
</div>
</div>
......
src/container/Otorisasi/User.js
View file @ 9a5ff868
......@@ -4,8 +4,8 @@ import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/
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 AddUser from './User/AddUser';
import EditUser from './User/EditUser'
import api from "../../api";
import { titleCase } from "../../library/Utils";
import { InputAdornment, TextField } from "@material-ui/core";
......@@ -18,7 +18,7 @@ export default class UserRole extends Component {
constructor(props) {
super(props)
this.state = {
listRole: [],
listUser: [],
indexData: {},
add: false,
edit: false
......@@ -26,7 +26,7 @@ export default class UserRole extends Component {
}
componentDidMount() {
this.getRole()
this.getUser()
}
closeEdit() {
......@@ -37,27 +37,54 @@ export default class UserRole extends Component {
this.setState({add: false})
}
getRole() {
api.create().getRole().then((response) => {
getUser() {
api.create().getUser().then((response) => {
// console.log(response)
if (response.data.status == 'success') {
// console.log(response.data.data)
let data = response.data.data
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)
this.setState({listRole: listData})
// this.setState({listRole: response.data.data}, () => {
// console.log(this.state.listRole)
// console.log(listData)
this.setState({listUser: listData})
// this.setState({listUser: response.data.data}, () => {
// console.log(this.state.listUser)
// })
} else {
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() {
const columns = [{
name: "Action",
......@@ -160,9 +187,9 @@ export default class UserRole extends Component {
onChange={(e) => {
this.setState({ search: e.target.value }, () => {
if (this.state.search.length > 0) {
this.searchRole()
this.searchUser()
} else {
this.getRole()
this.getUser()
}
});
}}
......@@ -190,7 +217,7 @@ export default class UserRole extends Component {
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
data={this.state.listUser}
columns={columns}
options={options}
/>
......@@ -198,13 +225,13 @@ export default class UserRole extends Component {
</div>
</div>
{this.state.add && (
<AddRole
<AddUser
onClickClose={this.closeAdd.bind(this)}
data={this.state.indexData}
/>
)}
{this.state.edit && (
<EditRole
<EditUser
onClickClose={this.closeEdit.bind(this)}
data={this.state.indexData}
/>
......
src/container/Otorisasi/User/AddUser.js
View file @ 9a5ff868
import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
import api from '../../../api';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../../../library/Utils';
const CustomCheckbox = withStyles({
root: {
......@@ -20,8 +22,14 @@ export default class AddUser extends Component {
paramsId: this.props.data,
tempData: 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 {
}
componentDidMount() {
this.getMenu()
this.getRole()
}
handleChange(e) {
......@@ -38,83 +46,42 @@ export default class AddUser extends Component {
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
}
updateRole() {
crateUser() {
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]
}
]
"role_id": this.state.role.role_id,
"email": this.state.email,
"fullname": this.state.fullname,
"password": this.state.fullname,
"company": this.state.company,
"start_date": this.state.startDate,
"end_date": this.state.endDate
}
api.create().createUser(payload).then((response) => {
console.log(response)
})
}
getMenu() {
api.create().getMenu().then((response) => {
if (response.data.status == 'success') {
this.setState({menuData: response.data.data})
getRole() {
api.create().getRole().then((response) => {
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),
};
this.setState({listRole: defaultProps})
} else {
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() {
return (
......@@ -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="column-1">
<div className="margin-bottom-20px">
<div className="">
<TextField
style={{ width: '100%' }}
id="id"
......@@ -147,7 +114,7 @@ export default class AddUser extends Component {
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.role_id}
value={'-'}
onChange={(e) => null}
>
{/* {periode.map((option) => (
......@@ -160,19 +127,49 @@ export default class AddUser extends Component {
</div>
<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">
<TextField
style={{ width: '100%' , marginTop: 7}}
id="userRole"
name="role_name"
label="User Role"
value={this.state.tempData == null? '' : this.state.tempData.role_name}
id="email"
name="email"
label="Email"
value={this.state.tempData == null? '' : this.state.tempData.email}
onChange={(e) => this.handleChange(e)}
// defaultValue="Default Value"
// helperText="Some important text"
/>
</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 className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
......@@ -217,7 +214,28 @@ export default class AddUser extends Component {
disabled
// id="outlined-read-only-input"
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) => (
<MenuItem key={option.value} value={option.value}>
......@@ -230,78 +248,28 @@ export default class AddUser extends Component {
</div>
<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}}>{`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>
<Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}>
<h5>Hak Akses</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>
<h5>Otorisasi Perusahaan</h5>
<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 className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<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' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
<button onClick={() => this.props.onClickClose()}>
<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>
</div>
</button>
</div>
<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' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
<button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div>
</div>
</div>
......
src/container/Otorisasi/User/EditUser.js
View file @ 9a5ff868
import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
import api from '../../../api';
import { titleCase } from '../../../library/Utils';
import Autocomplete from '@material-ui/lab/Autocomplete';
const CustomCheckbox = withStyles({
root: {
......@@ -20,8 +22,10 @@ export default class EditUser extends Component {
paramsId: this.props.data,
tempData: null,
menuData: null,
privileges: [],
checked: false
checked: false,
listRole: null,
role: null,
company: [],
}
}
......@@ -30,8 +34,8 @@ export default class EditUser extends Component {
}
componentDidMount() {
this.getDetailRole()
this.getMenu()
this.getDetailUser()
this.getRole()
}
handleChange(e) {
......@@ -39,93 +43,60 @@ export default class EditUser extends Component {
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
}
getDetailRole() {
api.create().getDetailRole(this.state.paramsId).then((response) => {
getDetailUser() {
api.create().getDetailUser(this.state.paramsId).then((response) => {
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 {
alert(response.data.message)
}
})
}
validasi() {
this.props.onClickClose()
}
updateRole() {
updateUser() {
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]
}
]
"user_id": this.state.tempData.user_id,
"role_id": this.state.role.role_id,
"email": this.state.tempData.email,
"fullname": this.state.tempData.fullname,
"company": this.state.company,
"start_date": this.state.tempData.start_date,
"end_date": this.state.tempData.end_date
}
}
getMenu() {
api.create().getMenu().then((response) => {
if (response.data.status == 'success') {
this.setState({menuData: response.data.data})
} else {
alert(response.data.message)
}
api.create().updateUser(payload).then((response) => {
console.log(response)
})
}
handleItemChecked(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id == item.menu_id)
return indexID == -1? false : true
}
getRole() {
api.create().getRole().then((response) => {
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 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
let index = roleData.findIndex((val) => val.role_id == this.state.tempData.role_id)
console.log(index)
this.setState({listRole: defaultProps, role: index == -1? roleData[0] : roleData[index]})
} 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() {
return (
......@@ -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="column-1">
<div className="margin-bottom-20px">
<div className="">
<TextField
style={{ width: '100%' }}
id="id"
......@@ -158,7 +129,7 @@ export default class EditUser extends Component {
disabled
// id="outlined-read-only-input"
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}
>
{/* {periode.map((option) => (
......@@ -171,19 +142,49 @@ export default class EditUser extends Component {
</div>
<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">
<TextField
style={{ width: '100%' , marginTop: 7}}
id="userRole"
name="role_name"
label="User Role"
value={this.state.tempData == null? '' : this.state.tempData.role_name}
id="email"
name="email"
label="Email"
value={this.state.tempData == null? '' : this.state.tempData.email}
onChange={(e) => this.handleChange(e)}
// defaultValue="Default Value"
// helperText="Some important text"
/>
</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 className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
......@@ -238,6 +239,27 @@ export default class EditUser extends Component {
</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={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 style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
<Typography style={{fontSize: 12}}>{`Dibuat : ${this.state.tempData == null? '' : this.state.tempData.created}`}</Typography>
......@@ -245,74 +267,24 @@ export default class EditUser extends Component {
</div>
<Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}>
<h5>Hak Akses</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>
<h5>Otorisasi Perusahaan</h5>
<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 className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<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' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
<button onClick={() => this.props.onClickClose()}>
<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>
</div>
</button>
</div>
<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' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
<button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</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