Skip to content

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

update

parent af423aa5
Hide whitespace changes
Inline Side-by-side
Showing with 1171 additions and 63 deletions
src/api/index.js
View file @ 172e2721
...@@ -68,6 +68,7 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/') ...@@ -68,6 +68,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 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}`)
...@@ -97,6 +98,7 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/') ...@@ -97,6 +98,7 @@ const create = (baseURL = 'https://trftia.eksad.com/tia-reporting-dev/public/')
verification, verification,
getRole, getRole,
getDetailRole, getDetailRole,
searchRole,
addRole, addRole,
editRole, editRole,
deleteRole, deleteRole,
......
src/container/Otorisasi/User.js
View file @ 172e2721
...@@ -104,3 +104,191 @@ export default class User extends Component { ...@@ -104,3 +104,191 @@ export default class User extends Component {
); );
} }
} }
import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
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 api from "../../api";
import { titleCase } from "../../library/Utils";
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
export default class UserRole extends Component {
constructor(props) {
super(props)
this.state = {
listRole: [],
indexData: {},
add: false,
edit: false
}
}
componentDidMount() {
this.getRole()
}
closeEdit() {
this.setState({edit: false})
}
closeAdd() {
this.setState({add: false})
}
getRole() {
api.create().getRole().then((response) => {
// console.log(response)
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]
})
console.log(listData)
this.setState({listRole: listData})
// this.setState({listRole: response.data.data}, () => {
// console.log(this.state.listRole)
// })
} else {
alert(response.data.message)
}
console.log(response.data.data)
})
}
render() {
const columns = [{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
}}
// onClick={() => console.log(tableMeta.rowData[1])}
onClick={() => this.setState({edit: true, indexData: tableMeta.rowData[1]})}
>
<img src={Images.editCopy} />
</button>
</div >
);
}
}
}, {
name: "ID",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 50 }}>
{val}
</div >
);
}
}
}, {
name: "Nama Lengkap",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 200 }}>
{titleCase(val)}
</div >
);
}
}
}, {
name: "Email",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 150 }}>
{titleCase(val)}
</div >
);
}
}
}, {
name: "Role",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 100 }}>
{titleCase(val)}
</div >
);
}
}
}, {
name: "Perusahaan",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex'}}>
{val}
</div >
);
}
}
}, "Status"]
const data = [
["1", "1", "Juki Kudet", "Juki@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "2", "Kuji Mama", "Loro@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "3", "Sutaru", "Jaka@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "4", "Tatang Katro", "ikup@gmail.com)", "Admin", "Kepo", "Aktif"],
["1", "5", "Firman", "Sudir@gmail.com)", "Admin", "Kepo", "Aktif"],
]
return (
<div style={{ height: this.props.height }}>
{/* <Row> */}
<div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
<div>
<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>
<div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
<div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5, flexDirection: 'row', display: 'flex'}}>
<SearchIcon/>
<input type="text" placeholder={'Search Role'} style={{flexGrow: 1, marginLeft: 10}}/>
</div>
</div>
{/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
<div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
<img src={Images.add} onClick={() => this.setState({add: true})}/>
</div>
</div>
<div style={{ padding: 25 }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
{this.state.add && (
<AddRole
onClickClose={this.closeAdd.bind(this)}
data={this.state.indexData}
/>
)}
{this.state.edit && (
<EditRole
onClickClose={this.closeEdit.bind(this)}
data={this.state.indexData}
/>
)}
</div>
);
}
}
src/container/Otorisasi/User/AddUser.js 0 → 100644
View file @ 172e2721
import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
import api from '../../../api';
const CustomCheckbox = withStyles({
root: {
color: '#51c6ea',
'&$checked': {
color: '#51c6ea',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default class AddUser extends Component {
constructor(props) {
super(props)
this.state = {
paramsId: this.props.data,
tempData: null,
menuData: null,
privileges: [],
checked: false
}
}
handleChecked() {
this.setState({checked: !this.state.checked})
}
componentDidMount() {
this.getMenu()
}
handleChange(e) {
let data = this.state
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
}
updateRole() {
let payload = {
"role_id": 40,
"role_name": "admin-tia",
"start_date": "2020-01-01",
"end_date": "2020-12-31",
"privileges": [
{
"menu_id": 17,
"button_id": [1, 2, 3]
}
]
}
}
getMenu() {
api.create().getMenu().then((response) => {
if (response.data.status == 'success') {
this.setState({menuData: response.data.data})
} 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 (
<div className="test app-popup-show">
<div className="popup-content 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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="id"
label="ID"
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.role_id}
onChange={(e) => null}
>
{/* {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%' , marginTop: 7}}
id="userRole"
name="role_name"
label="User Role"
value={this.state.tempData == null? '' : this.state.tempData.role_name}
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%'}}
id="startDate"
label="Berlaku Mulai"
name="start_date"
value={this.state.tempData == null? '' : this.state.tempData.start_date}
defaultValue="Default Value"
onChange={(e) => this.handleChange(e)}
// helperText="Some important text"
/>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%'}}
id="endDate"
label="Berlaku Hingga"
name="end_date"
value={this.state.tempData == null? '' : this.state.tempData.end_date}
defaultValue="Default Value"
onChange={(e) => this.handleChange(e)}
// 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%' }}
id="status"
label="Status"
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.status}
>
{/* {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>
<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>
<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>
</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>
</div>
</div>
</div>
</div>
);
}
}
src/container/Otorisasi/User/EditUser.js 0 → 100644
View file @ 172e2721
import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
import api from '../../../api';
const CustomCheckbox = withStyles({
root: {
color: '#51c6ea',
'&$checked': {
color: '#51c6ea',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default class EditUser extends Component {
constructor(props) {
super(props)
this.state = {
paramsId: this.props.data,
tempData: null,
menuData: null,
privileges: [],
checked: false
}
}
handleChecked() {
this.setState({checked: !this.state.checked})
}
componentDidMount() {
this.getDetailRole()
this.getMenu()
}
handleChange(e) {
let data = this.state
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
}
getDetailRole() {
api.create().getDetailRole(this.state.paramsId).then((response) => {
if (response.data.status == 'success') {
this.setState({tempData: response.data.data, privileges: response.data.data.privileges})
} else {
alert(response.data.message)
}
})
}
updateRole() {
let payload = {
"role_id": 40,
"role_name": "admin-tia",
"start_date": "2020-01-01",
"end_date": "2020-12-31",
"privileges": [
{
"menu_id": 17,
"button_id": [1, 2, 3]
}
]
}
}
getMenu() {
api.create().getMenu().then((response) => {
if (response.data.status == 'success') {
this.setState({menuData: response.data.data})
} 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 (
<div className="test app-popup-show">
<div className="popup-content 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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="id"
label="ID"
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.role_id}
onChange={(e) => null}
>
{/* {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%' , marginTop: 7}}
id="userRole"
name="role_name"
label="User Role"
value={this.state.tempData == null? '' : this.state.tempData.role_name}
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%'}}
id="startDate"
label="Berlaku Mulai"
name="start_date"
value={this.state.tempData == null? '' : this.state.tempData.start_date}
defaultValue="Default Value"
onChange={(e) => this.handleChange(e)}
// helperText="Some important text"
/>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%'}}
id="endDate"
label="Berlaku Hingga"
name="end_date"
value={this.state.tempData == null? '' : this.state.tempData.end_date}
defaultValue="Default Value"
onChange={(e) => this.handleChange(e)}
// 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%' }}
id="status"
label="Status"
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.status}
>
{/* {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>
<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>
<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>
</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>
</div>
</div>
</div>
</div>
);
}
}
src/container/Otorisasi/UserRole.js
View file @ 172e2721
import React, { Component } from "react"; import React, { Component, memo } from "react";
import { Container, Row, Col } from "react-bootstrap"; import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search'; import SearchIcon from '@material-ui/icons/Search';
...@@ -8,19 +8,22 @@ import AddRole from './UserRole/AddRole'; ...@@ -8,19 +8,22 @@ import AddRole from './UserRole/AddRole';
import EditRole from './UserRole/EditRole' import EditRole from './UserRole/EditRole'
import api from "../../api"; import api from "../../api";
import { titleCase } from "../../library/Utils"; import { titleCase } from "../../library/Utils";
import InputAdornment from '@material-ui/core/InputAdornment';
import TextField from '@material-ui/core/TextField';
import AccountCircle from '@material-ui/icons/AccountCircle';
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
export default class UserRole extends Component { class UserRole extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
listRole: [], listRole: [],
indexData: {}, indexData: {},
add: false, add: false,
edit: false edit: false,
search: ''
} }
} }
...@@ -44,7 +47,7 @@ export default class UserRole extends Component { ...@@ -44,7 +47,7 @@ export default class UserRole extends Component {
let listData = data.map((item,index) => { let listData = data.map((item,index) => {
return [index, item.role_id, item.role_name, item.access, item.status] return [index, item.role_id, item.role_name, item.access, item.status]
}) })
console.log(listData) // console.log(listData)
this.setState({listRole: listData}) this.setState({listRole: listData})
// this.setState({listRole: response.data.data}, () => { // this.setState({listRole: response.data.data}, () => {
// console.log(this.state.listRole) // console.log(this.state.listRole)
...@@ -53,10 +56,30 @@ export default class UserRole extends Component { ...@@ -53,10 +56,30 @@ export default class UserRole extends Component {
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
console.log(response.data.data) // console.log(response.data.data)
}) })
} }
searchRole() {
let payload = {
"keyword": this.state.search
}
api.create().searchRole(payload).then((response) => {
// console.log(response.data.data)
})
}
_handleKeyDown(e) {
if (e.key === 'Enter') {
// console.log('do validate');
}
}
handleChange(e) {
let data = this.state
window.requestIdleCallback((e) => this.setState({...data, [e.target.name]: e.target.value}))
}
render() { render() {
const columns = [{ const columns = [{
name: "Action", name: "Action",
...@@ -128,9 +151,32 @@ export default class UserRole extends Component { ...@@ -128,9 +151,32 @@ export default class UserRole extends Component {
<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={{ color: 'white', width: '20%', alignSelf: 'center'}}>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, flexDirection: 'row', display: 'flex'}}> <div style={{width: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5}}>
<SearchIcon/> {/* <SearchIcon/> */}
<input type="text" placeholder={'Search Role'} style={{flexGrow: 1, marginLeft: 10}}/> <TextField
// className={classes.margin}
id="input-with-icon-textfield"
// label="TextField"
name="search"
value={this.state.search}
placeholder={'Search Role'}
onChange={(e) => {
// let { search } = this.state;
// search = [...search];
// search.push(e.target.value);
// search[0] = search;
this.setState({ search: e.target.value });
}}
style={{width: '100%', borderBottomWidth: 0, borderBottomColor: 'red'}}
InputProps={{
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
}}
/>
</div> </div>
</div> </div>
{/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */} {/* <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label> */}
...@@ -164,3 +210,5 @@ export default class UserRole extends Component { ...@@ -164,3 +210,5 @@ export default class UserRole extends Component {
); );
} }
} }
export default memo(UserRole);
\ No newline at end of file
src/container/Otorisasi/UserRole/AddRole.js
View file @ 172e2721
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField } from '@material-ui/core'; import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
import api from '../../../api';
const CustomCheckbox = withStyles({
root: {
color: '#51c6ea',
'&$checked': {
color: '#51c6ea',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default class AddRole extends Component { export default class AddRole extends Component {
constructor(props) {
super(props)
this.state = {
paramsId: this.props.data,
tempData: null,
menuData: null,
privileges: [],
checked: false
}
}
handleChecked() {
this.setState({checked: !this.state.checked})
}
componentDidMount() {
this.getMenu()
}
handleChange(e) {
let data = this.state
this.setState({...data, tempData: {...this.state.tempData, [e.target.name] : e.target.value}})
}
updateRole() {
let payload = {
"role_id": 40,
"role_name": "admin-tia",
"start_date": "2020-01-01",
"end_date": "2020-12-31",
"privileges": [
{
"menu_id": 17,
"button_id": [1, 2, 3]
}
]
}
}
getMenu() {
api.create().getMenu().then((response) => {
if (response.data.status == 'success') {
this.setState({menuData: response.data.data})
} 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() { render() {
return ( return (
<div className="test app-popup-show" style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}> <div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}> <div className="popup-content 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" 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' }}>Create Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Ubah 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' }}>
...@@ -23,16 +137,17 @@ export default class AddRole extends Component { ...@@ -23,16 +137,17 @@ export default class AddRole extends Component {
</div> </div>
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="border-bottom grid grid-2x grid-mobile-none gap-15px" style={{ padding: 20 }}>
<div className="column-1"> <div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="periode" id="id"
select label="ID"
label="Berlaku Mulai" disabled
// value={this.state.periode} // id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.role_id}
onChange={(e) => null} onChange={(e) => null}
> >
{/* {periode.map((option) => ( {/* {periode.map((option) => (
...@@ -45,14 +160,64 @@ export default class AddRole extends Component { ...@@ -45,14 +160,64 @@ export default class AddRole extends Component {
</div> </div>
<div className="column-2"> <div className="column-2">
<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}
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%'}}
id="startDate"
label="Berlaku Mulai"
name="start_date"
value={this.state.tempData == null? '' : this.state.tempData.start_date}
defaultValue="Default Value"
onChange={(e) => this.handleChange(e)}
// helperText="Some important text"
/>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%'}}
id="endDate"
label="Berlaku Hingga"
name="end_date"
value={this.state.tempData == null? '' : this.state.tempData.end_date}
defaultValue="Default Value"
onChange={(e) => this.handleChange(e)}
// helperText="Some important text"
/>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1">
<div className="margin-bottom-20px"> <div className="margin-bottom-20px">
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="unit" id="status"
select label="Status"
label="Unit Bisnis" disabled
// value={this.state.periode} // id="outlined-read-only-input"
onChange={(e) => null} variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.status}
> >
{/* {periode.map((option) => ( {/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}> <MenuItem key={option.value} value={option.value}>
...@@ -63,7 +228,70 @@ export default class AddRole extends Component { ...@@ -63,7 +228,70 @@ export default class AddRole extends Component {
</div> </div>
</div> </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>
<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>
<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="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 style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
......
src/container/Otorisasi/UserRole/EditRole.js
View file @ 172e2721
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField, Divider, Typography, Checkbox } from '@material-ui/core'; import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-ui/core';
import api from '../../../api'; import api from '../../../api';
const CustomCheckbox = withStyles({
root: {
color: '#51c6ea',
'&$checked': {
color: '#51c6ea',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default class EditRole extends Component { export default class EditRole extends Component {
constructor(props) { constructor(props) {
...@@ -91,7 +101,7 @@ export default class EditRole extends Component { ...@@ -91,7 +101,7 @@ export default class EditRole extends Component {
value = false value = false
} else { } else {
let arrayButton = this.state.privileges[indexID].button_id let arrayButton = this.state.privileges[indexID].button_id
console.log(arrayButton) // console.log(arrayButton)
let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index) let indexButtonID = this.state.privileges[indexID].button_id.findIndex((val) => val == index)
// console.log(indexButtonID) // console.log(indexButtonID)
if (indexButtonID == -1) { if (indexButtonID == -1) {
...@@ -252,47 +262,46 @@ export default class EditRole extends Component { ...@@ -252,47 +262,46 @@ export default class EditRole extends Component {
</div> </div>
</div> </div>
</div> </div>
{this.state.menuData !== null && this.state.menuData.map((item,index) => { <div style={{height: '25vh', overflow: 'scroll'}}>
return ( {this.state.menuData !== null && this.state.menuData.map((item,index) => {
<div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px"> return (
<div className="column-1" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}> <div className="grid grid-2x grid-mobile-none gap-15px padding-left-10px padding-right-10px">
<Checkbox <div className="column-1" style={{display: 'flex', flexDirection: 'row', alignItems: 'center'}}>
checked={this.handleItemChecked(item)} <CustomCheckbox
onChange={() => this.handleItemClick(item)} checked={this.handleItemChecked(item)}
inputProps={{ 'aria-label': 'primary checkbox' }} 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">
<Checkbox
// disabled={}
checked={this.handleSubItemChecked(item, 1)}
onChange={() => this.handleSubItemClick(item,1)}
inputProps={{ 'aria-label': 'primary checkbox' }}
/>
</div>
<div className="column-2">
<Checkbox
// disabled
checked={this.handleSubItemChecked(item, 2)}
onChange={() => this.handleSubItemClick(item,2)}
inputProps={{ 'aria-label': 'primary checkbox' }}
/> />
<Typography style={{fontSize: 12}}>{item.menu_name}</Typography>
</div> </div>
<div className="column 3"> <div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<Checkbox <div className="column-1">
// disabled <CustomCheckbox
checked={this.handleSubItemChecked(item, 3)} // disabled={}
onChange={() => this.handleSubItemClick(item,3)} checked={this.handleSubItemChecked(item, 1)}
inputProps={{ 'aria-label': 'primary checkbox' }} onChange={() => this.handleSubItemClick(item,1)}
/> />
</div>
<div className="column-2">
<CustomCheckbox
// disabled
checked={this.handleSubItemChecked(item, 2)}
onChange={() => this.handleSubItemClick(item,2)}
/>
</div>
<div className="column 3">
<CustomCheckbox
// disabled
checked={this.handleSubItemChecked(item, 3)}
onChange={() => this.handleSubItemClick(item,3)}
/>
</div>
</div> </div>
</div> </div>
</div> )
) })}
})} </div>
</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' }}>
......
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