Skip to content

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

Merge branch 'didam' into 'master' 

update didam

See merge request !54
parents 2ef279e1 c895b3d3
Show whitespace changes
Inline Side-by-side
Showing with 465 additions and 160 deletions
package-lock.json
View file @ 82cecfd4
...@@ -1163,6 +1163,34 @@ ...@@ -1163,6 +1163,34 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
}, },
"@date-io/core": {
"version": "1.3.13",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
"integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
},
"@date-io/date-fns": {
"version": "1.3.13",
"resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-1.3.13.tgz",
"integrity": "sha512-yXxGzcRUPcogiMj58wVgFjc9qUYrCnnU9eLcyNbsQCmae4jPuZCDoIBR21j8ZURsM7GRtU62VOw5yNd4dDHunA==",
"requires": {
"@date-io/core": "^1.3.13"
}
},
"@date-io/moment": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.8.0.tgz",
"integrity": "sha512-dJasasxlQJA63BjjBDZ9D+6rTctRKaHCFbNkMpPA2O6wWLga4oQQAwCr+UwacZ7eyWZTc+oQzvWIRkvnssA3Kg==",
"requires": {
"@date-io/core": "^2.8.0"
},
"dependencies": {
"@date-io/core": {
"version": "2.8.0",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.8.0.tgz",
"integrity": "sha512-MIL74B3O08gjjm5fcDSWME5MfdsvyQBX58zlWHIzM+m2h3+M5rP6P+T3qym3FWnpc8EKK5E8kF97nLqNiOwgkQ=="
}
}
},
"@emotion/hash": { "@emotion/hash": {
"version": "0.8.0", "version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
...@@ -1420,6 +1448,26 @@ ...@@ -1420,6 +1448,26 @@
"@babel/runtime": "^7.4.4" "@babel/runtime": "^7.4.4"
} }
}, },
"@material-ui/pickers": {
"version": "3.2.10",
"resolved": "https://registry.npmjs.org/@material-ui/pickers/-/pickers-3.2.10.tgz",
"integrity": "sha512-B8G6Obn5S3RCl7hwahkQj9sKUapwXWFjiaz/Bsw1fhYFdNMnDUolRiWQSoKPb1/oKe37Dtfszoywi1Ynbo3y8w==",
"requires": {
"@babel/runtime": "^7.6.0",
"@date-io/core": "1.x",
"@types/styled-jsx": "^2.2.8",
"clsx": "^1.0.2",
"react-transition-group": "^4.0.0",
"rifm": "^0.7.0"
},
"dependencies": {
"@date-io/core": {
"version": "1.3.13",
"resolved": "https://registry.npmjs.org/@date-io/core/-/core-1.3.13.tgz",
"integrity": "sha512-AlEKV7TxjeK+jxWVKcCFrfYAk8spX9aCyiToFIiLPtfQbsjmRGLIhb5VZgptQcJdHtLXo7+m0DuurwFgUToQuA=="
}
}
},
"@material-ui/styles": { "@material-ui/styles": {
"version": "4.10.0", "version": "4.10.0",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
...@@ -1942,6 +1990,14 @@ ...@@ -1942,6 +1990,14 @@
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
"integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==" "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw=="
}, },
"@types/styled-jsx": {
"version": "2.2.8",
"resolved": "https://registry.npmjs.org/@types/styled-jsx/-/styled-jsx-2.2.8.tgz",
"integrity": "sha512-Yjye9VwMdYeXfS71ihueWRSxrruuXTwKCbzue4+5b2rjnQ//AtyM7myZ1BEhNhBQ/nL/RE7bdToUoLln2miKvg==",
"requires": {
"@types/react": "*"
}
},
"@types/testing-library__dom": { "@types/testing-library__dom": {
"version": "6.14.0", "version": "6.14.0",
"resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz", "resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz",
...@@ -4698,6 +4754,11 @@ ...@@ -4698,6 +4754,11 @@
} }
} }
}, },
"date-fns": {
"version": "2.15.0",
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.15.0.tgz",
"integrity": "sha512-ZCPzAMJZn3rNUvvQIMlXhDr4A+Ar07eLeGsGREoWU19a3Pqf5oYa+ccd+B3F6XVtQY6HANMFdOQ8A+ipFnvJdQ=="
},
"debug": { "debug": {
"version": "4.1.1", "version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
...@@ -6542,9 +6603,9 @@ ...@@ -6542,9 +6603,9 @@
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=" "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
}, },
"fsevents": { "fsevents": {
"version": "2.1.2", "version": "2.1.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
"integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==", "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
"optional": true "optional": true
}, },
"fstream": { "fstream": {
...@@ -9304,6 +9365,11 @@ ...@@ -9304,6 +9365,11 @@
"minimist": "^1.2.5" "minimist": "^1.2.5"
} }
}, },
"moment": {
"version": "2.27.0",
"resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
"integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
},
"move-concurrently": { "move-concurrently": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz", "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
...@@ -11983,6 +12049,14 @@ ...@@ -11983,6 +12049,14 @@
"webpack-dev-server": "3.10.3", "webpack-dev-server": "3.10.3",
"webpack-manifest-plugin": "2.2.0", "webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1" "workbox-webpack-plugin": "4.3.1"
},
"dependencies": {
"fsevents": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
"integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
"optional": true
}
} }
}, },
"react-sortable-tree": { "react-sortable-tree": {
...@@ -12543,6 +12617,14 @@ ...@@ -12543,6 +12617,14 @@
"resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz", "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
"integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=" "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
}, },
"rifm": {
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/rifm/-/rifm-0.7.0.tgz",
"integrity": "sha512-DSOJTWHD67860I5ojetXdEQRIBvF6YcpNe53j0vn1vp9EUb9N80EiZTxgP+FkDKorWC8PZw052kTF4C1GOivCQ==",
"requires": {
"@babel/runtime": "^7.3.1"
}
},
"rimraf": { "rimraf": {
"version": "2.6.3", "version": "2.6.3",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
......
package.json
View file @ 82cecfd4
...@@ -4,14 +4,19 @@ ...@@ -4,14 +4,19 @@
"homepage": "http://localhost:8080/tia-web/", "homepage": "http://localhost:8080/tia-web/",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@date-io/date-fns": "^1.3.13",
"@date-io/moment": "^2.8.0",
"@material-ui/core": "^4.11.0", "@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1", "@material-ui/icons": "^4.9.1",
"@material-ui/pickers": "^3.2.10",
"@testing-library/jest-dom": "^4.2.4", "@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0", "@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1", "@testing-library/user-event": "^7.2.1",
"apisauce": "^1.1.2", "apisauce": "^1.1.2",
"bootstrap": "^4.5.2", "bootstrap": "^4.5.2",
"date-fns": "^2.15.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"moment": "^2.27.0",
"mui-datatables": "^3.3.1", "mui-datatables": "^3.3.1",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"react": "^16.13.1", "react": "^16.13.1",
......
src/api/index.js
View file @ 82cecfd4
...@@ -69,7 +69,7 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/') ...@@ -69,7 +69,7 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
//Role //Role
const getRole = () => api.get('role/get_all_role') const getRole = () => api.get('role/get_all_role')
const getDetailRole = (roleId) => api.get(`role/get_role_by_id/${roleId}`) const getDetailRole = (roleId) => api.get(`role/get_role_by_id/${roleId}`)
const searchRole = (body) => api.get('/role/search_role', body) const searchRole = (body) => api.post('/role/search_role', body)
const addRole = (body) => api.post('role/create_role', body) const addRole = (body) => api.post('role/create_role', body)
const editRole = (body) => api.post('role/update_role', body) const editRole = (body) => api.post('role/update_role', body)
const deleteRole = (roleId) => api.post(`role/delete_role/${roleId}`) const deleteRole = (roleId) => api.post(`role/delete_role/${roleId}`)
......
src/container/Home.js
View file @ 82cecfd4
...@@ -20,6 +20,9 @@ import ListItemText from '@material-ui/core/ListItemText'; ...@@ -20,6 +20,9 @@ import ListItemText from '@material-ui/core/ListItemText';
import InboxIcon from '@material-ui/icons/MoveToInbox'; import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail'; import MailIcon from '@material-ui/icons/Mail';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import DateFnsUtils from '@date-io/date-fns';
import { DateTimePicker, MuiPickersUtilsProvider } from "@material-ui/pickers";
import localeID from 'date-fns/locale/id';
import { import {
BrowserRouter as Router, BrowserRouter as Router,
...@@ -270,6 +273,7 @@ export default function MiniDrawer() { ...@@ -270,6 +273,7 @@ export default function MiniDrawer() {
<div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}> <div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div> <div>
<div className={classes.toolbar} /> <div className={classes.toolbar} />
<MuiPickersUtilsProvider locale={localeID} utils={DateFnsUtils}>
<Switch> <Switch>
{HomeRoutes.map((route, index) => ( {HomeRoutes.map((route, index) => (
// You can render a <Route> in as many places // You can render a <Route> in as many places
...@@ -287,6 +291,7 @@ export default function MiniDrawer() { ...@@ -287,6 +291,7 @@ export default function MiniDrawer() {
/> />
))} ))}
</Switch> </Switch>
</MuiPickersUtilsProvider>
<Footer> <Footer>
<Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography> <Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
</Footer> </Footer>
......
src/container/Otorisasi/UserRole.js
View file @ 82cecfd4
...@@ -65,19 +65,34 @@ class UserRole extends Component { ...@@ -65,19 +65,34 @@ class UserRole extends Component {
"keyword": this.state.search "keyword": this.state.search
} }
api.create().searchRole(payload).then((response) => { api.create().searchRole(payload).then((response) => {
// console.log(response.data.data) if (response.data.status == 'success') {
let data = response.data.data
let listData = data.map((item,index) => {
return [index, item.role_id, item.role_name, item.access, item.status]
})
this.setState({listRole: listData})
} else {
alert(response.data.message)
}
}) })
} }
_handleKeyDown(e) { _handleKeyDown(e) {
if (e.key === 'Enter') { if (e.key === 'Enter') {
// console.log('do validate'); if (this.state.search.length > 0) {
this.searchRole()
} else {
this.getRole()
}
} }
} }
handleChange(e) { handleChange(e) {
let data = this.state let data = this.state
window.requestIdleCallback((e) => this.setState({...data, [e.target.name]: e.target.value})) window.requestIdleCallback((e) => this.setState({...data, [e.target.name]: e.target.value}, () => {
alert('asdk')
}))
} }
render() { render() {
...@@ -96,7 +111,13 @@ class UserRole extends Component { ...@@ -96,7 +111,13 @@ class UserRole extends Component {
// onClick={() => console.log(tableMeta.rowData[1])} // onClick={() => console.log(tableMeta.rowData[1])}
onClick={() => this.setState({edit: true, indexData: tableMeta.rowData[1]})} onClick={() => this.setState({edit: true, indexData: tableMeta.rowData[1]})}
> >
<img src={Images.editCopy} /> <div style={{ display: 'flex' }}>
{ tableMeta.rowData[4] === "Aktif" ?
<img src={Images.editCopy}/> :
null
}
</div >
</button> </button>
</div > </div >
); );
...@@ -107,8 +128,8 @@ class UserRole extends Component { ...@@ -107,8 +128,8 @@ class UserRole extends Component {
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex', width: 50 }}> <div style={{ display: 'flex' }}>
{val} <span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -118,8 +139,8 @@ class UserRole extends Component { ...@@ -118,8 +139,8 @@ class UserRole extends Component {
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex', width: 250 }}> <div style={{ display: 'flex' }}>
{titleCase(val)} <span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
</div > </div >
); );
} }
...@@ -129,13 +150,24 @@ class UserRole extends Component { ...@@ -129,13 +150,24 @@ class UserRole extends Component {
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex'}}> <div style={{ display: 'flex' }}>
{val + ' Modul'} <span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val + ' Modul'}</span>
</div > </div >
); );
} }
} }
}, "Status"] }, {
name: "Status",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
}
}]
const data = [ const data = [
["1", "1", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"], ["1", "1", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
["2", "2", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"], ["2", "2", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
...@@ -149,7 +181,7 @@ class UserRole extends Component { ...@@ -149,7 +181,7 @@ class UserRole extends Component {
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} /> <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', alignSelf: 'center'}}>Master Data - Role & Otorisasi</label> <label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - Role & Otorisasi</label>
<div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}> <div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
<div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5}}> <div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5}}>
{/* <SearchIcon/> */} {/* <SearchIcon/> */}
...@@ -165,11 +197,18 @@ class UserRole extends Component { ...@@ -165,11 +197,18 @@ class UserRole extends Component {
// search = [...search]; // search = [...search];
// search.push(e.target.value); // search.push(e.target.value);
// search[0] = search; // search[0] = search;
this.setState({ search: e.target.value }, () => {
this.setState({ search: e.target.value }); if (this.state.search.length > 0) {
this.searchRole()
} else {
this.getRole()
}
});
}} }}
onKeyDown={(e) => this._handleKeyDown(e)}
style={{width: '100%', borderBottomWidth: 0, borderBottomColor: 'red'}} style={{width: '100%', borderBottomWidth: 0, borderBottomColor: 'red'}}
InputProps={{ InputProps={{
style: { fontFamily: 'nunito', borderBottomColor: 'white'},
startAdornment: ( startAdornment: (
<InputAdornment position="start"> <InputAdornment position="start">
<SearchIcon /> <SearchIcon />
...@@ -197,12 +236,14 @@ class UserRole extends Component { ...@@ -197,12 +236,14 @@ class UserRole extends Component {
{this.state.add && ( {this.state.add && (
<AddRole <AddRole
onClickClose={this.closeAdd.bind(this)} onClickClose={this.closeAdd.bind(this)}
refresh={this.getRole.bind(this)}
data={this.state.indexData} data={this.state.indexData}
/> />
)} )}
{this.state.edit && ( {this.state.edit && (
<EditRole <EditRole
onClickClose={this.closeEdit.bind(this)} onClickClose={this.closeEdit.bind(this)}
refresh={this.getRole.bind(this)}
data={this.state.indexData} data={this.state.indexData}
/> />
)} )}
......
src/container/Otorisasi/UserRole/AddRole.js
View file @ 82cecfd4
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, Collapse, MuiThemeProvider } from '@material-ui/core';
import api from '../../../api'; import api from '../../../api';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import { DateTimePicker, KeyboardDatePicker, DatePicker} from "@material-ui/pickers";
import format from "date-fns/format";
import localeID from "date-fns/locale/id"
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
...@@ -8,6 +13,7 @@ const CustomCheckbox = withStyles({ ...@@ -8,6 +13,7 @@ const CustomCheckbox = withStyles({
'&$checked': { '&$checked': {
color: '#51c6ea', color: '#51c6ea',
}, },
padding: 5
}, },
checked: {}, checked: {},
})((props) => <Checkbox color="default" {...props} />); })((props) => <Checkbox color="default" {...props} />);
...@@ -21,7 +27,12 @@ export default class AddRole extends Component { ...@@ -21,7 +27,12 @@ export default class AddRole extends Component {
tempData: null, tempData: null,
menuData: null, menuData: null,
privileges: [], privileges: [],
checked: false checked: false,
selectedIndex: 0,
roleName: '',
startDate: null,
endDate: null,
date: new Date()
} }
} }
...@@ -33,25 +44,38 @@ export default class AddRole extends Component { ...@@ -33,25 +44,38 @@ export default class AddRole extends Component {
this.getMenu() this.getMenu()
} }
handleChange(e) { handleChange(e, type) {
let data = this.state let data = this.state
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}}) let isDate = type !== ''? true : false
if (isDate && type == 'start_date') {
this.setState({...data, startDate : format(e, 'yyyy-MM-dd')})
} else if (isDate && type == 'end_date') {
this.setState({...data, endDate : format(e, 'yyyy-MM-dd')})
} else {
this.setState({...data, [e.target.name] : e.target.value})
} }
}
updateRole() { updateRole() {
// let startDate = format(this.state.tempData.start_date, 'yyyy-MM-dd')
// let endDate = format(this.state.tempData.end_date, 'yyyy-MM-dd')
let payload = { let payload = {
"role_id": 40, "role_name": this.state.roleName,
"role_name": "admin-tia", "start_date": this.state.startDate,
"start_date": "2020-01-01", "end_date": this.state.endDate,
"end_date": "2020-12-31", "privileges": this.state.privileges
"privileges": [
{
"menu_id": 17,
"button_id": [1, 2, 3]
} }
] // console.log(payload)
api.create().addRole(payload).then((response) => {
console.log(response)
if (response.data.status == 'success') {
this.props.refresh()
this.props.onClickClose()
} else {
alert(response.data.message)
} }
})
} }
getMenu() { getMenu() {
...@@ -113,9 +137,17 @@ export default class AddRole extends Component { ...@@ -113,9 +137,17 @@ export default class AddRole extends Component {
button_id.splice(indexButtonID,1) button_id.splice(indexButtonID,1)
} }
privileges[indexID].button_id = button_id privileges[indexID].button_id = button_id
if (button_id.length == 0) {
privileges.splice(indexID,1)
}
this.setState({privileges}) this.setState({privileges})
} }
handleDate(item) {
let value = format(item, 'dd MMMM yyyy')
return value
}
render() { render() {
return ( return (
<div className="test app-popup-show"> <div className="test app-popup-show">
...@@ -123,7 +155,7 @@ export default class AddRole extends Component { ...@@ -123,7 +155,7 @@ export default class AddRole extends Component {
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Tambah Data</span>
</div> </div>
</div> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}> <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
...@@ -147,7 +179,7 @@ export default class AddRole extends Component { ...@@ -147,7 +179,7 @@ export default class AddRole 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) => (
...@@ -164,10 +196,10 @@ export default class AddRole extends Component { ...@@ -164,10 +196,10 @@ export default class AddRole extends Component {
<TextField <TextField
style={{ width: '100%' , marginTop: 7}} style={{ width: '100%' , marginTop: 7}}
id="userRole" id="userRole"
name="role_name" name="roleName"
label="User Role" label="User Role"
value={this.state.tempData == null? '' : this.state.tempData.role_name} value={this.state.roleName}
onChange={(e) => this.handleChange(e)} onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value" // defaultValue="Default Value"
// helperText="Some important text" // helperText="Some important text"
/> />
...@@ -178,30 +210,36 @@ export default class AddRole extends Component { ...@@ -178,30 +210,36 @@ export default class AddRole extends Component {
<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 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <DatePicker
style={{ width: '100%'}} margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Berlaku Mulai"
name="start_date" format="dd MMMM yyyy"
value={this.state.tempData == null? '' : this.state.tempData.start_date} value={this.state.startDate}
defaultValue="Default Value" onChange={(e) => this.handleChange(e, 'start_date')}
onChange={(e) => this.handleChange(e)} KeyboardButtonProps={{
// helperText="Some important text" 'aria-label': 'change date',
}}
style={{padding: 0, margin: 0, width: '100%'}}
/> />
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <DatePicker
style={{ width: '100%'}} margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
name="end_date" format="dd MMMM yyyy"
value={this.state.tempData == null? '' : this.state.tempData.end_date} value={this.state.endDate}
defaultValue="Default Value" onChange={(e) => this.handleChange(e, 'end_date')}
onChange={(e) => this.handleChange(e)} KeyboardButtonProps={{
// helperText="Some important text" 'aria-label': 'change date',
}}
style={{padding: 0, margin: 0, width: '100%'}}
/> />
</div> </div>
</div> </div>
...@@ -217,7 +255,7 @@ export default class AddRole extends Component { ...@@ -217,7 +255,7 @@ export default class AddRole 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) => ( {/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -229,8 +267,8 @@ export default class AddRole extends Component { ...@@ -229,8 +267,8 @@ export default class AddRole extends Component {
</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 : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</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}}>
...@@ -255,18 +293,24 @@ export default class AddRole extends Component { ...@@ -255,18 +293,24 @@ export default class AddRole extends Component {
<div style={{height: '25vh', overflow: 'scroll'}}> <div style={{height: '25vh', overflow: 'scroll'}}>
{this.state.menuData !== null && this.state.menuData.map((item,index) => { {this.state.menuData !== null && this.state.menuData.map((item,index) => {
return ( return (
<div>
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px"> <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'}}> <div className="column-1" style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start'}}>
{item.sub_menu.length > 0 && <span onClick={() => this.setState({selectedIndex: index == this.state.selectedIndex? 0 : index})} style={{marginLeft: 7, marginRight: 2}}>
{index == this.state.selectedIndex? <RemoveIcon color={'action'} fontSize={'small'}/> : <AddIcon color={'action'} fontSize={'small'}/>}
</span>}
<span>
<CustomCheckbox <CustomCheckbox
checked={this.handleItemChecked(item)} checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)} onChange={() => this.handleItemClick(item)}
/> />
<Typography style={{fontSize: 12}}>{item.menu_name}</Typography> </span>
<Typography style={{fontSize: 12, marginLeft: 5}}>{item.menu_name}</Typography>
</div> </div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px"> <div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<CustomCheckbox <CustomCheckbox
// disabled={} disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 1)} checked={this.handleSubItemChecked(item, 1)}
onChange={() => this.handleSubItemClick(item,1)} onChange={() => this.handleSubItemClick(item,1)}
/> />
...@@ -274,6 +318,7 @@ export default class AddRole extends Component { ...@@ -274,6 +318,7 @@ export default class AddRole extends Component {
<div className="column-2"> <div className="column-2">
<CustomCheckbox <CustomCheckbox
// disabled // disabled
disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 2)} checked={this.handleSubItemChecked(item, 2)}
onChange={() => this.handleSubItemClick(item,2)} onChange={() => this.handleSubItemClick(item,2)}
/> />
...@@ -281,12 +326,52 @@ export default class AddRole extends Component { ...@@ -281,12 +326,52 @@ export default class AddRole extends Component {
<div className="column 3"> <div className="column 3">
<CustomCheckbox <CustomCheckbox
// disabled // disabled
disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 3)} checked={this.handleSubItemChecked(item, 3)}
onChange={() => this.handleSubItemClick(item,3)} onChange={() => this.handleSubItemClick(item,3)}
/> />
</div> </div>
</div> </div>
</div> </div>
{item.sub_menu.length > 0 && item.sub_menu.map((items,indexs) => {
return(
<Collapse in={index == this.state.selectedIndex} timeout="auto" unmountOnExit>
<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', paddingLeft: 50}}>
<CustomCheckbox
checked={this.handleItemChecked(items)}
onChange={() => this.handleItemClick(items)}
/>
<Typography style={{fontSize: 12, maxWidth: '100%', marginLeft: 5}}>{items.menu_name}</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1">
<CustomCheckbox
disabled={!this.handleItemChecked(items)}
checked={this.handleSubItemChecked(items, 1)}
onChange={() => this.handleSubItemClick(items,1)}
/>
</div>
<div className="column-2">
<CustomCheckbox
disabled={!this.handleItemChecked(items)}
checked={this.handleSubItemChecked(items, 2)}
onChange={() => this.handleSubItemClick(items,2)}
/>
</div>
<div className="column 3">
<CustomCheckbox
disabled={!this.handleItemChecked(items)}
checked={this.handleSubItemChecked(items, 3)}
onChange={() => this.handleSubItemClick(items,3)}
/>
</div>
</div>
</div>
</Collapse>
)
})}
</div>
) )
})} })}
</div> </div>
...@@ -294,12 +379,12 @@ export default class AddRole extends Component { ...@@ -294,12 +379,12 @@ export default class AddRole extends Component {
</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' }}> <div onClick={() => this.props.onClickClose()} 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>
</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' }}> <div onClick={() => this.updateRole()}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>
</div> </div>
......
src/container/Otorisasi/UserRole/EditRole.js
View file @ 82cecfd4
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, Collapse, MuiThemeProvider } from '@material-ui/core';
import api from '../../../api'; import api from '../../../api';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import { DateTimePicker, KeyboardDatePicker, DatePicker} from "@material-ui/pickers";
import format from "date-fns/format";
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
color: '#51c6ea', color: '#51c6ea',
'&$checked': { '&$checked': {
color: '#51c6ea', color: '#51c6ea',
}, },
padding: 5
}, },
checked: {}, checked: {},
})((props) => <Checkbox color="default" {...props} />); })((props) => <Checkbox color="default" {...props} />);
...@@ -21,7 +25,9 @@ export default class EditRole extends Component { ...@@ -21,7 +25,9 @@ export default class EditRole extends Component {
tempData: null, tempData: null,
menuData: null, menuData: null,
privileges: [], privileges: [],
checked: false checked: false,
selectedIndex: 0,
date: new Date()
} }
} }
...@@ -34,15 +40,28 @@ export default class EditRole extends Component { ...@@ -34,15 +40,28 @@ export default class EditRole extends Component {
this.getMenu() this.getMenu()
} }
handleChange(e) { handleChange(e, type) {
let data = this.state let data = this.state
let isDate = type !== ''? true : false
if (isDate && type == 'start_date') {
this.setState({...data, tempData: {...this.state.tempData, start_date : format(e, 'yyyy-MM-dd')}}, () => {
console.log(this.state.tempData)
})
} else if (isDate && type == 'end_date') {
this.setState({...data, tempData: {...this.state.tempData, end_date : format(e, 'yyyy-MM-dd')}}, () => {
console.log(this.state.tempData)
})
} else {
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() { getDetailRole() {
api.create().getDetailRole(this.state.paramsId).then((response) => { api.create().getDetailRole(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, privileges: response.data.data.privileges})
console.log(response.data.data.start_date)
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
...@@ -51,18 +70,25 @@ export default class EditRole extends Component { ...@@ -51,18 +70,25 @@ export default class EditRole extends Component {
updateRole() { updateRole() {
// let startDate = format(this.state.tempData.start_date, 'yyyy-MM-dd')
// let endDate = format(this.state.tempData.end_date, 'yyyy-MM-dd')
let payload = { let payload = {
"role_id": 40, "role_id": this.state.tempData.role_id,
"role_name": "admin-tia", "role_name": this.state.tempData.role_name,
"start_date": "2020-01-01", "start_date": this.state.tempData.start_date,
"end_date": "2020-12-31", "end_date": this.state.tempData.end_date,
"privileges": [ "privileges": this.state.privileges
{
"menu_id": 17,
"button_id": [1, 2, 3]
} }
] // console.log(payload)
api.create().editRole(payload).then((response) => {
console.log(response)
if (response.data.status == 'success') {
this.props.refresh()
this.props.onClickClose()
} else {
alert(response.data.message)
} }
})
} }
getMenu() { getMenu() {
...@@ -124,9 +150,17 @@ export default class EditRole extends Component { ...@@ -124,9 +150,17 @@ export default class EditRole extends Component {
button_id.splice(indexButtonID,1) button_id.splice(indexButtonID,1)
} }
privileges[indexID].button_id = button_id privileges[indexID].button_id = button_id
if (button_id.length == 0) {
privileges.splice(indexID,1)
}
this.setState({privileges}) this.setState({privileges})
} }
handleDate(item) {
let value = format(item, 'dd MMMM yyyy')
return value
}
render() { render() {
return ( return (
<div className="test app-popup-show"> <div className="test app-popup-show">
...@@ -178,7 +212,7 @@ export default class EditRole extends Component { ...@@ -178,7 +212,7 @@ export default class EditRole extends Component {
name="role_name" name="role_name"
label="User Role" label="User Role"
value={this.state.tempData == null? '' : this.state.tempData.role_name} value={this.state.tempData == null? '' : this.state.tempData.role_name}
onChange={(e) => this.handleChange(e)} onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value" // defaultValue="Default Value"
// helperText="Some important text" // helperText="Some important text"
/> />
...@@ -189,30 +223,36 @@ export default class EditRole extends Component { ...@@ -189,30 +223,36 @@ export default class EditRole extends Component {
<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 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <DatePicker
style={{ width: '100%'}} margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Berlaku Mulai"
name="start_date" format="dd MMMM yyyy"
value={this.state.tempData == null? '' : this.state.tempData.start_date} value={this.state.tempData == null? null : this.state.tempData.start_date}
defaultValue="Default Value" onChange={(e) => this.handleChange(e, 'start_date')}
onChange={(e) => this.handleChange(e)} KeyboardButtonProps={{
// helperText="Some important text" 'aria-label': 'change date',
}}
style={{padding: 0, margin: 0, width: '100%'}}
/> />
</div> </div>
</div> </div>
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <DatePicker
style={{ width: '100%'}} margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
name="end_date" format="dd MMMM yyyy"
value={this.state.tempData == null? '' : this.state.tempData.end_date} value={this.state.tempData == null? null : this.state.tempData.end_date}
defaultValue="Default Value" onChange={(e) => this.handleChange(e, 'end_date')}
onChange={(e) => this.handleChange(e)} KeyboardButtonProps={{
// helperText="Some important text" 'aria-label': 'change date',
}}
style={{padding: 0, margin: 0, width: '100%'}}
/> />
</div> </div>
</div> </div>
...@@ -240,8 +280,8 @@ export default class EditRole extends Component { ...@@ -240,8 +280,8 @@ export default class EditRole extends Component {
</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 == 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 == 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}}>
...@@ -266,18 +306,24 @@ export default class EditRole extends Component { ...@@ -266,18 +306,24 @@ export default class EditRole extends Component {
<div style={{height: '25vh', overflow: 'scroll'}}> <div style={{height: '25vh', overflow: 'scroll'}}>
{this.state.menuData !== null && this.state.menuData.map((item,index) => { {this.state.menuData !== null && this.state.menuData.map((item,index) => {
return ( return (
<div>
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px"> <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'}}> <div className="column-1" style={{display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start'}}>
{item.sub_menu.length > 0 && <span onClick={() => this.setState({selectedIndex: index == this.state.selectedIndex? 0 : index})} style={{marginLeft: 7, marginRight: 2}}>
{index == this.state.selectedIndex? <RemoveIcon color={'action'} fontSize={'small'}/> : <AddIcon color={'action'} fontSize={'small'}/>}
</span>}
<span>
<CustomCheckbox <CustomCheckbox
checked={this.handleItemChecked(item)} checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)} onChange={() => this.handleItemClick(item)}
/> />
<Typography style={{fontSize: 12}}>{item.menu_name}</Typography> </span>
<Typography style={{fontSize: 12, marginLeft: 5}}>{item.menu_name}</Typography>
</div> </div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px"> <div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1"> <div className="column-1">
<CustomCheckbox <CustomCheckbox
// disabled={} disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 1)} checked={this.handleSubItemChecked(item, 1)}
onChange={() => this.handleSubItemClick(item,1)} onChange={() => this.handleSubItemClick(item,1)}
/> />
...@@ -285,6 +331,7 @@ export default class EditRole extends Component { ...@@ -285,6 +331,7 @@ export default class EditRole extends Component {
<div className="column-2"> <div className="column-2">
<CustomCheckbox <CustomCheckbox
// disabled // disabled
disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 2)} checked={this.handleSubItemChecked(item, 2)}
onChange={() => this.handleSubItemClick(item,2)} onChange={() => this.handleSubItemClick(item,2)}
/> />
...@@ -292,12 +339,52 @@ export default class EditRole extends Component { ...@@ -292,12 +339,52 @@ export default class EditRole extends Component {
<div className="column 3"> <div className="column 3">
<CustomCheckbox <CustomCheckbox
// disabled // disabled
disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 3)} checked={this.handleSubItemChecked(item, 3)}
onChange={() => this.handleSubItemClick(item,3)} onChange={() => this.handleSubItemClick(item,3)}
/> />
</div> </div>
</div> </div>
</div> </div>
{item.sub_menu.length > 0 && item.sub_menu.map((items,indexs) => {
return(
<Collapse in={index == this.state.selectedIndex} timeout="auto" unmountOnExit>
<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', paddingLeft: 50}}>
<CustomCheckbox
checked={this.handleItemChecked(items)}
onChange={() => this.handleItemClick(items)}
/>
<Typography style={{fontSize: 12, maxWidth: '100%', marginLeft: 5}}>{items.menu_name}</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<div className="column-1">
<CustomCheckbox
disabled={!this.handleItemChecked(items)}
checked={this.handleSubItemChecked(items, 1)}
onChange={() => this.handleSubItemClick(items,1)}
/>
</div>
<div className="column-2">
<CustomCheckbox
disabled={!this.handleItemChecked(items)}
checked={this.handleSubItemChecked(items, 2)}
onChange={() => this.handleSubItemClick(items,2)}
/>
</div>
<div className="column 3">
<CustomCheckbox
disabled={!this.handleItemChecked(items)}
checked={this.handleSubItemChecked(items, 3)}
onChange={() => this.handleSubItemClick(items,3)}
/>
</div>
</div>
</div>
</Collapse>
)
})}
</div>
) )
})} })}
</div> </div>
...@@ -305,12 +392,12 @@ export default class EditRole extends Component { ...@@ -305,12 +392,12 @@ export default class EditRole extends Component {
</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' }}> <div onClick={() => this.props.onClickClose()} 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>
</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' }}> <div onClick={() => this.updateRole()}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>
</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