Skip to content

T
Tia-dev
Commit 84d3c8e0 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

role

parent 9e4540ec
Hide whitespace changes
Inline Side-by-side
Showing with 384 additions and 125 deletions
src/assets/sass/app.css
View file @ 84d3c8e0
...@@ -132,6 +132,10 @@ ...@@ -132,6 +132,10 @@
/* display: ''; */ /* display: ''; */
justify-content: 'center'; justify-content: 'center';
align-items: 'center' } align-items: 'center' }
.popup-content-middle {
position: relative;
margin: auto;
width: 800px; }
.popup-content { .popup-content {
position: relative; position: relative;
margin: auto; margin: auto;
src/container/Otorisasi/UserRole/AddRole.js
View file @ 84d3c8e0
...@@ -3,7 +3,7 @@ import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from ' ...@@ -3,7 +3,7 @@ import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from '
import api from '../../../api'; import api from '../../../api';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove'; import RemoveIcon from '@material-ui/icons/Remove';
import {DatePicker} from "@material-ui/pickers"; import { DatePicker } from "@material-ui/pickers";
import format from "date-fns/format"; import format from "date-fns/format";
import localeID from "date-fns/locale/id" import localeID from "date-fns/locale/id"
import * as R from 'ramda' import * as R from 'ramda'
...@@ -11,17 +11,17 @@ import Images from '../../../assets/Images'; ...@@ -11,17 +11,17 @@ import Images from '../../../assets/Images';
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
color: '#51c6ea',
'&$checked': {
color: '#51c6ea', color: '#51c6ea',
}, '&$checked': {
padding: 5 color: '#51c6ea',
},
padding: 5
}, },
checked: {}, checked: {},
})((props) => <Checkbox color="default" {...props} />); })((props) => <Checkbox color="default" {...props} />);
export default class AddRole extends Component { export default class AddRole extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
...@@ -41,22 +41,25 @@ export default class AddRole extends Component { ...@@ -41,22 +41,25 @@ export default class AddRole extends Component {
msgErrorRN: '', msgErrorRN: '',
msgErrorSD: '', msgErrorSD: '',
msgErrorED: '', msgErrorED: '',
application: [],
setting: [],
} }
} }
handleChecked() { handleChecked() {
this.setState({checked: !this.state.checked}) this.setState({ checked: !this.state.checked })
} }
componentDidMount() { componentDidMount() {
this.getMenu() this.getMenu()
} }
handleChange(e, type) { handleChange(e, type) {
let data = this.state let data = this.state
let isDate = type !== ''? true : false let isDate = type !== '' ? true : false
if (isDate && type === 'start_date') { if (isDate && type === 'start_date') {
this.setState({...data, startDate: format(e, 'yyyy-MM-dd'), endDate: null, this.setState({
...data, startDate: format(e, 'yyyy-MM-dd'), endDate: null,
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
errorEndDate: false, errorEndDate: false,
...@@ -65,7 +68,8 @@ export default class AddRole extends Component { ...@@ -65,7 +68,8 @@ export default class AddRole extends Component {
msgErrorED: '', msgErrorED: '',
}) })
} else if (isDate && type === 'end_date') { } else if (isDate && type === 'end_date') {
this.setState({...data, endDate : format(e, 'yyyy-MM-dd'), this.setState({
...data, endDate: format(e, 'yyyy-MM-dd'),
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
errorEndDate: false, errorEndDate: false,
...@@ -74,7 +78,8 @@ export default class AddRole extends Component { ...@@ -74,7 +78,8 @@ export default class AddRole extends Component {
msgErrorED: '', msgErrorED: '',
}) })
} else { } else {
this.setState({...data, [e.target.name]: e.target.value, this.setState({
...data, [e.target.name]: e.target.value,
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
errorEndDate: false, errorEndDate: false,
...@@ -83,17 +88,17 @@ export default class AddRole extends Component { ...@@ -83,17 +88,17 @@ export default class AddRole extends Component {
msgErrorED: '', msgErrorED: '',
}) })
} }
} }
validasi() { validasi() {
if (R.isEmpty(this.state.roleName)) { if (R.isEmpty(this.state.roleName)) {
this.setState({errorRoleName: true, msgErrorRN: 'Role Name tidak boleh kosong'}) this.setState({ errorRoleName: true, msgErrorRN: 'Role Name tidak boleh kosong' })
} else if (R.isNil(this.state.startDate)) { } else if (R.isNil(this.state.startDate)) {
this.setState({errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong'}) this.setState({ errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong' })
} else if (R.isNil(this.state.endDate)) { } else if (R.isNil(this.state.endDate)) {
this.setState({errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong'}) this.setState({ errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong' })
} else if (this.state.privileges.length < 1) { } else if (this.state.privileges.length < 1) {
alert('Hak Akses belum di pilih !!') alert('Hak Akses belum di pilih !!')
} else { } else {
this.addRole() this.addRole()
...@@ -121,10 +126,36 @@ export default class AddRole extends Component { ...@@ -121,10 +126,36 @@ export default class AddRole extends Component {
}) })
} }
parseChildren(val) {
let data = Object.assign([], val)
data = data.sort((a, b) => a.menu_id - b.menu_id).map((i) => {
return {
menu_id: i.menu_id,
label: i.menu_name,
sub_menu: this.parseChildren(i.sub_menu),
collapse: false
}
})
return data
}
getMenu() { getMenu() {
api.create().getMenu().then((response) => { api.create().getMenu().then((response) => {
if (response.data.status === 'success') { if (response.data.status === 'success') {
this.setState({menuData: response.data.data}) let app = null
let set = null
response.data.data.map((item) => {
if (item.menu_name === "Application") {
app = this.parseChildren(item.sub_menu)
return app
} else {
set = this.parseChildren(item.sub_menu)
return set
}
})
console.log(app)
this.setState({ application: app, setting: set, isLoad: true }, () => console.log(this.state.application))
// this.setState({ menuData: response.data.data })
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
...@@ -133,7 +164,7 @@ export default class AddRole extends Component { ...@@ -133,7 +164,7 @@ export default class AddRole extends Component {
handleItemChecked(item) { handleItemChecked(item) {
let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id) let indexID = this.state.privileges.findIndex((val) => val.menu_id === item.menu_id)
return indexID === -1? false : true return indexID === -1 ? false : true
} }
handleItemClick(item) { handleItemClick(item) {
...@@ -142,12 +173,12 @@ export default class AddRole extends Component { ...@@ -142,12 +173,12 @@ export default class AddRole extends Component {
if (indexID === -1) { if (indexID === -1) {
privileges.push({ privileges.push({
menu_id: item.menu_id, menu_id: item.menu_id,
button_id: [1,2,3] button_id: [1, 2, 3]
}) })
} else { } else {
privileges.splice(indexID,1) privileges.splice(indexID, 1)
} }
this.setState({privileges}) this.setState({ privileges })
} }
handleSubItemChecked(item, index) { handleSubItemChecked(item, index) {
...@@ -163,7 +194,7 @@ export default class AddRole extends Component { ...@@ -163,7 +194,7 @@ export default class AddRole extends Component {
value = true value = true
} }
} }
return indexID === -1? value : value return indexID === -1 ? value : value
} }
handleSubItemClick(item, index) { handleSubItemClick(item, index) {
...@@ -174,13 +205,13 @@ export default class AddRole extends Component { ...@@ -174,13 +205,13 @@ export default class AddRole extends Component {
if (indexButtonID === -1) { if (indexButtonID === -1) {
button_id.push(index) button_id.push(index)
} else { } else {
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) { if (button_id.length === 0) {
privileges.splice(indexID,1) privileges.splice(indexID, 1)
} }
this.setState({privileges}) this.setState({ privileges })
} }
handleDate(item) { handleDate(item) {
...@@ -188,11 +219,25 @@ export default class AddRole extends Component { ...@@ -188,11 +219,25 @@ export default class AddRole extends Component {
return value return value
} }
handleCollapse(item) {
let arr = this.state.application
let index = arr.findIndex((val) => val.label === item.label)
arr[index].collapse = !arr[index].collapse
this.setState({ ...this.state.application, application: arr })
}
handleCollapseSetting(item) {
let arr = this.state.setting
let index = arr.findIndex((val) => val.label === item.label)
arr[index].collapse = !arr[index].collapse
this.setState({ ...this.state.setting, setting: arr })
}
render() { render() {
return ( return (
<div className="test app-popup-show"> <div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content-middle background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x main-color" style={{ 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' }}>Tambah Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Tambah Data</span>
...@@ -204,7 +249,7 @@ export default class AddRole extends Component { ...@@ -204,7 +249,7 @@ export default class AddRole extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<img src={Images.close}/> <img src={Images.close} />
</button> </button>
</div> </div>
</div> </div>
...@@ -234,14 +279,14 @@ export default class AddRole extends Component { ...@@ -234,14 +279,14 @@ export default class AddRole extends Component {
<div className="column-2"> <div className="column-2">
<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="userRole"
name="roleName" name="roleName"
label="User Role" label="User Role"
value={this.state.roleName} value={this.state.roleName}
error={this.state.errorRoleName} error={this.state.errorRoleName}
helperText={this.state.msgErrorRN} helperText={this.state.msgErrorRN}
onChange={(e) => this.handleChange(e, '')} onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value" // defaultValue="Default Value"
// helperText="Some important text" // helperText="Some important text"
/> />
...@@ -253,19 +298,19 @@ export default class AddRole extends Component { ...@@ -253,19 +298,19 @@ export default class AddRole extends Component {
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Berlaku Mulai"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.startDate} value={this.state.startDate}
error={this.state.errorStartDate} error={this.state.errorStartDate}
helperText={this.state.msgErrorSD} helperText={this.state.msgErrorSD}
onChange={(e) => this.handleChange(e, 'start_date')} onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
}} }}
style={{padding: 0, margin: 0, width: '100%'}} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
</div> </div>
...@@ -273,20 +318,20 @@ export default class AddRole extends Component { ...@@ -273,20 +318,20 @@ export default class AddRole extends Component {
<div className="column-2"> <div className="column-2">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="Berlaku Hingga"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.endDate} value={this.state.endDate}
error={this.state.errorEndDate} error={this.state.errorEndDate}
helperText={this.state.msgErrorED} helperText={this.state.msgErrorED}
onChange={(e) => this.handleChange(e, 'end_date')} onChange={(e) => this.handleChange(e, 'end_date')}
minDate={this.state.startDate} minDate={this.state.startDate}
KeyboardButtonProps={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
}} }}
style={{padding: 0, margin: 0, width: '100%'}} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
</div> </div>
...@@ -313,53 +358,136 @@ export default class AddRole extends Component { ...@@ -313,53 +358,136 @@ export default class AddRole extends Component {
</div> </div>
</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 : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</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 }}>
<h5>Hak Akses</h5> <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="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"> <div className="column-1">
<Typography style={{fontSize: 12, color: 'white'}}>Otorisasi Modul</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>Otorisasi Modul</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">
<Typography style={{fontSize: 12, color: 'white'}}>Lihat</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>Lihat</Typography>
</div> </div>
<div className="column-2"> <div className="column-2">
<Typography style={{fontSize: 12, color: 'white'}}>Tambah</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>Tambah</Typography>
</div> </div>
<div className="column 3"> <div className="column 3">
<Typography style={{fontSize: 12, color: 'white'}}>Ubah</Typography> <Typography style={{ fontSize: 12, color: 'white' }}>Ubah</Typography>
</div> </div>
</div> </div>
</div> </div>
<div style={{height: '25vh', overflow: 'scroll'}}> <div style={{ height: '25vh', overflow: 'scroll' }}>
{this.state.menuData !== null && this.state.menuData.map((item,index) => { {this.state.application.map((item, index) => {
return (
<div>
<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', justifyContent: 'flex-start', paddingLeft: 8 }}>
{item.sub_menu.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginRight: 2, marginLeft: -22 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>}
<span>
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
</span>
<Typography style={{ fontSize: 12, marginLeft: 5 }}>{item.label}</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px margin-left-10px">
<div className="column-1">
<CustomCheckbox
disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 1)}
onChange={() => this.handleSubItemClick(item, 1)}
/>
</div>
<div className="column-2">
<CustomCheckbox
// disabled
disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 2)}
onChange={() => this.handleSubItemClick(item, 2)}
/>
</div>
<div className="column 3">
<CustomCheckbox
// disabled
disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 3)}
onChange={() => this.handleSubItemClick(item, 3)}
/>
</div>
</div>
</div>
{item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => {
return (
<Collapse in={item.collapse} 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: 30 }}>
<CustomCheckbox
checked={this.handleItemChecked(items)}
onChange={() => this.handleItemClick(items)}
/>
<Typography style={{ fontSize: 12, maxWidth: '100%', marginLeft: 5 }}>{items.label}</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px margin-left-10px">
<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>
)
})}
{this.state.setting.map((item, index) => {
return ( return (
<div> <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', justifyContent: 'flex-start'}}> <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 8 }}>
{item.sub_menu.length > 0 && <span onClick={() => this.setState({selectedIndex: index === this.state.selectedIndex? 0 : index})} style={{marginLeft: 7, marginRight: 2}}> {item.sub_menu.length > 0 && <span onClick={() => this.handleCollapseSetting(item)} style={{ marginRight: 2, marginLeft: -22 }}>
{index === this.state.selectedIndex? <RemoveIcon color={'action'} fontSize={'small'}/> : <AddIcon color={'action'} fontSize={'small'}/>} {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} </span>}
<span> <span>
<CustomCheckbox <CustomCheckbox
checked={this.handleItemChecked(item)} checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)} onChange={() => this.handleItemClick(item)}
/> />
</span> </span>
<Typography style={{fontSize: 12, marginLeft: 5}}>{item.menu_name}</Typography> <Typography style={{ fontSize: 12, marginLeft: 5 }}>{item.label}</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 margin-left-10px">
<div className="column-1"> <div className="column-1">
<CustomCheckbox <CustomCheckbox
disabled={!this.handleItemChecked(item)} disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 1)} checked={this.handleSubItemChecked(item, 1)}
onChange={() => this.handleSubItemClick(item,1)} onChange={() => this.handleSubItemClick(item, 1)}
/> />
</div> </div>
<div className="column-2"> <div className="column-2">
...@@ -367,7 +495,7 @@ export default class AddRole extends Component { ...@@ -367,7 +495,7 @@ export default class AddRole extends Component {
// disabled // disabled
disabled={!this.handleItemChecked(item)} disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 2)} checked={this.handleSubItemChecked(item, 2)}
onChange={() => this.handleSubItemClick(item,2)} onChange={() => this.handleSubItemClick(item, 2)}
/> />
</div> </div>
<div className="column 3"> <div className="column 3">
...@@ -375,42 +503,42 @@ export default class AddRole extends Component { ...@@ -375,42 +503,42 @@ export default class AddRole extends Component {
// disabled // disabled
disabled={!this.handleItemChecked(item)} 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) => { {item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => {
return( return (
<Collapse in={index === this.state.selectedIndex} timeout="auto" unmountOnExit> <Collapse in={item.collapse} timeout="auto" unmountOnExit>
<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', paddingLeft: 50}}> <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingLeft: 30 }}>
<CustomCheckbox <CustomCheckbox
checked={this.handleItemChecked(items)} checked={this.handleItemChecked(items)}
onChange={() => this.handleItemClick(items)} onChange={() => this.handleItemClick(items)}
/> />
<Typography style={{fontSize: 12, maxWidth: '100%', marginLeft: 5}}>{items.menu_name}</Typography> <Typography style={{ fontSize: 12, maxWidth: '100%', marginLeft: 5 }}>{items.label}</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 margin-left-10px">
<div className="column-1"> <div className="column-1">
<CustomCheckbox <CustomCheckbox
disabled={!this.handleItemChecked(items)} disabled={!this.handleItemChecked(items)}
checked={this.handleSubItemChecked(items, 1)} checked={this.handleSubItemChecked(items, 1)}
onChange={() => this.handleSubItemClick(items,1)} onChange={() => this.handleSubItemClick(items, 1)}
/> />
</div> </div>
<div className="column-2"> <div className="column-2">
<CustomCheckbox <CustomCheckbox
disabled={!this.handleItemChecked(items)} disabled={!this.handleItemChecked(items)}
checked={this.handleSubItemChecked(items, 2)} checked={this.handleSubItemChecked(items, 2)}
onChange={() => this.handleSubItemClick(items,2)} onChange={() => this.handleSubItemClick(items, 2)}
/> />
</div> </div>
<div className="column 3"> <div className="column 3">
<CustomCheckbox <CustomCheckbox
disabled={!this.handleItemChecked(items)} disabled={!this.handleItemChecked(items)}
checked={this.handleSubItemChecked(items, 3)} checked={this.handleSubItemChecked(items, 3)}
onChange={() => this.handleSubItemClick(items,3)} onChange={() => this.handleSubItemClick(items, 3)}
/> />
</div> </div>
</div> </div>
...@@ -422,7 +550,7 @@ export default class AddRole extends Component { ...@@ -422,7 +550,7 @@ export default class AddRole extends Component {
) )
})} })}
</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' }}>
...@@ -434,13 +562,13 @@ export default class AddRole extends Component { ...@@ -434,13 +562,13 @@ export default class AddRole extends Component {
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div> </div>
</button> </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 <button
type="button" type="button"
onClick={() => this.validasi()} 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>
......
src/container/Otorisasi/UserRole/EditRole.js
View file @ 84d3c8e0
...@@ -36,6 +36,8 @@ export default class EditRole extends Component { ...@@ -36,6 +36,8 @@ export default class EditRole extends Component {
msgErrorRN: '', msgErrorRN: '',
msgErrorSD: '', msgErrorSD: '',
msgErrorED: '', msgErrorED: '',
application: [],
setting: [],
} }
} }
...@@ -52,7 +54,8 @@ export default class EditRole extends Component { ...@@ -52,7 +54,8 @@ export default class EditRole extends Component {
let data = this.state let data = this.state
let isDate = type !== '' ? true : false let isDate = type !== '' ? true : false
if (isDate && type === 'start_date') { if (isDate && type === 'start_date') {
this.setState({ ...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null }, this.setState({
...data, tempData: { ...this.state.tempData, start_date: format(e, 'yyyy-MM-dd'), end_date: null },
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
errorEndDate: false, errorEndDate: false,
...@@ -61,7 +64,8 @@ export default class EditRole extends Component { ...@@ -61,7 +64,8 @@ export default class EditRole extends Component {
msgErrorED: '', msgErrorED: '',
}) })
} else if (isDate && type === 'end_date') { } else if (isDate && type === 'end_date') {
this.setState({ ...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') }, this.setState({
...data, tempData: { ...this.state.tempData, end_date: format(e, 'yyyy-MM-dd') },
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
errorEndDate: false, errorEndDate: false,
...@@ -70,13 +74,14 @@ export default class EditRole extends Component { ...@@ -70,13 +74,14 @@ export default class EditRole extends Component {
msgErrorED: '', msgErrorED: '',
}) })
} else { } 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 },
errorRoleName: false, errorRoleName: false,
errorStartDate: false, errorStartDate: false,
errorEndDate: false, errorEndDate: false,
msgErrorRN: '', msgErrorRN: '',
msgErrorSD: '', msgErrorSD: '',
msgErrorED: '', msgErrorED: '',
}) })
} }
...@@ -95,12 +100,12 @@ export default class EditRole extends Component { ...@@ -95,12 +100,12 @@ export default class EditRole extends Component {
validasi() { validasi() {
if (R.isEmpty(this.state.tempData.role_name)) { if (R.isEmpty(this.state.tempData.role_name)) {
this.setState({errorRoleName: true, msgErrorRN: 'Role Name tidak boleh kosong'}) this.setState({ errorRoleName: true, msgErrorRN: 'Role Name tidak boleh kosong' })
} else if (R.isNil(this.state.tempData.start_date)) { } else if (R.isNil(this.state.tempData.start_date)) {
this.setState({errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong'}) this.setState({ errorStartDate: true, msgErrorSD: 'Start Date tidak boleh kosong' })
} else if (R.isNil(this.state.tempData.end_date)) { } else if (R.isNil(this.state.tempData.end_date)) {
this.setState({errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong'}) this.setState({ errorEndDate: true, msgErrorED: 'End Date tidak boleh kosong' })
} else if (this.state.privileges.length < 1) { } else if (this.state.privileges.length < 1) {
alert('Hak Akses belum di pilih !!') alert('Hak Akses belum di pilih !!')
} else { } else {
this.updateRole() this.updateRole()
...@@ -129,11 +134,36 @@ export default class EditRole extends Component { ...@@ -129,11 +134,36 @@ export default class EditRole extends Component {
}) })
} }
parseChildren(val) {
let data = Object.assign([], val)
data = data.sort((a, b) => a.menu_id - b.menu_id).map((i) => {
return {
menu_id: i.menu_id,
label: i.menu_name,
sub_menu: this.parseChildren(i.sub_menu),
collapse: false
}
})
return data
}
getMenu() { getMenu() {
api.create().getMenu().then((response) => { api.create().getMenu().then((response) => {
if (response.data.status === 'success') { if (response.data.status === 'success') {
console.log(response.data.data) let app = null
this.setState({ menuData: response.data.data }) let set = null
response.data.data.map((item) => {
if (item.menu_name === "Application") {
app = this.parseChildren(item.sub_menu)
return app
} else {
set = this.parseChildren(item.sub_menu)
return set
}
})
console.log(app)
this.setState({ application: app, setting: set, isLoad: true }, () => console.log(this.state.application))
// this.setState({ menuData: response.data.data })
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
...@@ -192,6 +222,20 @@ export default class EditRole extends Component { ...@@ -192,6 +222,20 @@ export default class EditRole extends Component {
this.setState({ privileges }) this.setState({ privileges })
} }
handleCollapse(item) {
let arr = this.state.application
let index = arr.findIndex((val) => val.label === item.label)
arr[index].collapse = !arr[index].collapse
this.setState({ ...this.state.application, application: arr })
}
handleCollapseSetting(item) {
let arr = this.state.setting
let index = arr.findIndex((val) => val.label === item.label)
arr[index].collapse = !arr[index].collapse
this.setState({ ...this.state.setting, setting: arr })
}
handleDate(item) { handleDate(item) {
let value = format(item, 'dd MMMM yyyy') let value = format(item, 'dd MMMM yyyy')
return value return value
...@@ -200,8 +244,8 @@ export default class EditRole extends Component { ...@@ -200,8 +244,8 @@ export default class EditRole extends Component {
render() { render() {
return ( return (
<div className="test app-popup-show"> <div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content-middle background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x main-color" style={{ 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' }}>Ubah Data</span>
...@@ -213,7 +257,7 @@ export default class EditRole extends Component { ...@@ -213,7 +257,7 @@ export default class EditRole extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<img src={Images.close}/> <img src={Images.close} />
</button> </button>
</div> </div>
</div> </div>
...@@ -347,13 +391,96 @@ export default class EditRole extends Component { ...@@ -347,13 +391,96 @@ export default class EditRole extends Component {
</div> </div>
<div style={{ height: '25vh', overflow: 'scroll' }}> <div style={{ height: '25vh', overflow: 'scroll' }}>
{this.state.menuData !== null && this.state.menuData.map((item, index) => { {this.state.application.map((item, index) => {
return (
<div>
<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', justifyContent: 'flex-start', paddingLeft: 8 }}>
{item.sub_menu.length > 0 && <span onClick={() => this.handleCollapse(item)} style={{ marginRight: 2, marginLeft: -22 }}>
{item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>}
<span>
<CustomCheckbox
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
</span>
<Typography style={{ fontSize: 12, marginLeft: 5 }}>{item.label}</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px margin-left-10px">
<div className="column-1">
<CustomCheckbox
disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 1)}
onChange={() => this.handleSubItemClick(item, 1)}
/>
</div>
<div className="column-2">
<CustomCheckbox
// disabled
disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 2)}
onChange={() => this.handleSubItemClick(item, 2)}
/>
</div>
<div className="column 3">
<CustomCheckbox
// disabled
disabled={!this.handleItemChecked(item)}
checked={this.handleSubItemChecked(item, 3)}
onChange={() => this.handleSubItemClick(item, 3)}
/>
</div>
</div>
</div>
{item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => {
return (
<Collapse in={item.collapse} 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: 30 }}>
<CustomCheckbox
checked={this.handleItemChecked(items)}
onChange={() => this.handleItemClick(items)}
/>
<Typography style={{ fontSize: 12, maxWidth: '100%', marginLeft: 5 }}>{items.label}</Typography>
</div>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px margin-left-10px">
<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>
)
})}
{this.state.setting.map((item, index) => {
return ( return (
<div> <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', justifyContent: 'flex-start' }}> <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', paddingLeft: 8 }}>
{item.sub_menu.length > 0 && <span onClick={() => this.setState({ selectedIndex: index === this.state.selectedIndex ? 0 : index })} style={{ marginLeft: 7, marginRight: 2 }}> {item.sub_menu.length > 0 && <span onClick={() => this.handleCollapseSetting(item)} style={{ marginRight: 2, marginLeft: -22 }}>
{index === this.state.selectedIndex ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />} {item.collapse ? <RemoveIcon color={'action'} fontSize={'small'} /> : <AddIcon color={'action'} fontSize={'small'} />}
</span>} </span>}
<span> <span>
<CustomCheckbox <CustomCheckbox
...@@ -361,9 +488,9 @@ export default class EditRole extends Component { ...@@ -361,9 +488,9 @@ export default class EditRole extends Component {
onChange={() => this.handleItemClick(item)} onChange={() => this.handleItemClick(item)}
/> />
</span> </span>
<Typography style={{ fontSize: 12, marginLeft: 5 }}>{item.menu_name}</Typography> <Typography style={{ fontSize: 12, marginLeft: 5 }}>{item.label}</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 margin-left-10px">
<div className="column-1"> <div className="column-1">
<CustomCheckbox <CustomCheckbox
disabled={!this.handleItemChecked(item)} disabled={!this.handleItemChecked(item)}
...@@ -391,16 +518,16 @@ export default class EditRole extends Component { ...@@ -391,16 +518,16 @@ export default class EditRole extends Component {
</div> </div>
{item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => { {item.sub_menu.length > 0 && item.sub_menu.map((items, indexs) => {
return ( return (
<Collapse in={index === this.state.selectedIndex} timeout="auto" unmountOnExit> <Collapse in={item.collapse} timeout="auto" unmountOnExit>
<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', paddingLeft: 50 }}> <div className="column-1" style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', paddingLeft: 30 }}>
<CustomCheckbox <CustomCheckbox
checked={this.handleItemChecked(items)} checked={this.handleItemChecked(items)}
onChange={() => this.handleItemClick(items)} onChange={() => this.handleItemClick(items)}
/> />
<Typography style={{ fontSize: 12, maxWidth: '100%', marginLeft: 5 }}>{items.menu_name}</Typography> <Typography style={{ fontSize: 12, maxWidth: '100%', marginLeft: 5 }}>{items.label}</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 margin-left-10px">
<div className="column-1"> <div className="column-1">
<CustomCheckbox <CustomCheckbox
disabled={!this.handleItemChecked(items)} disabled={!this.handleItemChecked(items)}
......
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