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
Hide whitespace changes
Inline Side-by-side
Showing with 465 additions and 160 deletions
package-lock.json
View file @ 82cecfd4
......@@ -1163,6 +1163,34 @@
"resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
"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": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
......@@ -1420,6 +1448,26 @@
"@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": {
"version": "4.10.0",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.10.0.tgz",
......@@ -1942,6 +1990,14 @@
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
"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": {
"version": "6.14.0",
"resolved": "https://registry.npmjs.org/@types/testing-library__dom/-/testing-library__dom-6.14.0.tgz",
......@@ -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": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
......@@ -6542,9 +6603,9 @@
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
},
"fsevents": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.2.tgz",
"integrity": "sha512-R4wDiBwZ0KzpgOWetKDug1FZcYhqYnUYKtfZYt4mD5SBz76q0KR4Q9o7GIPamsVPGmW3EYPPJ0dOOjvx32ldZA==",
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz",
"integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==",
"optional": true
},
"fstream": {
......@@ -9304,6 +9365,11 @@
"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": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
......@@ -11983,6 +12049,14 @@
"webpack-dev-server": "3.10.3",
"webpack-manifest-plugin": "2.2.0",
"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": {
......@@ -12543,6 +12617,14 @@
"resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
"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": {
"version": "2.6.3",
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.3.tgz",
......
package.json
View file @ 82cecfd4
......@@ -4,14 +4,19 @@
"homepage": "http://localhost:8080/tia-web/",
"private": true,
"dependencies": {
"@date-io/date-fns": "^1.3.13",
"@date-io/moment": "^2.8.0",
"@material-ui/core": "^4.11.0",
"@material-ui/icons": "^4.9.1",
"@material-ui/pickers": "^3.2.10",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"apisauce": "^1.1.2",
"bootstrap": "^4.5.2",
"date-fns": "^2.15.0",
"font-awesome": "^4.7.0",
"moment": "^2.27.0",
"mui-datatables": "^3.3.1",
"node-sass": "^4.14.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/')
//Role
const getRole = () => api.get('role/get_all_role')
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 editRole = (body) => api.post('role/update_role', body)
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';
import InboxIcon from '@material-ui/icons/MoveToInbox';
import MailIcon from '@material-ui/icons/Mail';
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 {
BrowserRouter as Router,
......@@ -270,23 +273,25 @@ export default function MiniDrawer() {
<div className={classes.content} style={{ justifyContent: 'space-between', padding: 0, backgroundColor: '#f8f8f8' }}>
<div>
<div className={classes.toolbar} />
<Switch>
{HomeRoutes.map((route, index) => (
// You can render a <Route> in as many places
// as you want in your app. It will render along
// with any other <Route>s that also match the URL.
// So, a sidebar or breadcrumbs or anything else
// that requires you to render multiple things
// in multiple places at the same URL is nothing
// more than multiple <Route>s.
<Route
key={index}
path={route.path}
// exact={route.exact}
children={<route.main height={height} />}
/>
))}
</Switch>
<MuiPickersUtilsProvider locale={localeID} utils={DateFnsUtils}>
<Switch>
{HomeRoutes.map((route, index) => (
// You can render a <Route> in as many places
// as you want in your app. It will render along
// with any other <Route>s that also match the URL.
// So, a sidebar or breadcrumbs or anything else
// that requires you to render multiple things
// in multiple places at the same URL is nothing
// more than multiple <Route>s.
<Route
key={index}
path={route.path}
// exact={route.exact}
children={<route.main height={height} />}
/>
))}
</Switch>
</MuiPickersUtilsProvider>
<Footer>
<Typography style={{ fontSize: '12px' }}>© EKSAD Technology. All rights reserved.</Typography>
</Footer>
......
src/container/Otorisasi/UserRole.js
View file @ 82cecfd4
......@@ -65,19 +65,34 @@ class UserRole extends Component {
"keyword": this.state.search
}
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) {
if (e.key === 'Enter') {
// console.log('do validate');
if (this.state.search.length > 0) {
this.searchRole()
} else {
this.getRole()
}
}
}
handleChange(e) {
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() {
......@@ -96,7 +111,13 @@ class UserRole extends Component {
// onClick={() => console.log(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>
</div >
);
......@@ -107,8 +128,8 @@ class UserRole extends Component {
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 50 }}>
{val}
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div >
);
}
......@@ -118,8 +139,8 @@ class UserRole extends Component {
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex', width: 250 }}>
{titleCase(val)}
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
</div >
);
}
......@@ -129,13 +150,24 @@ class UserRole extends Component {
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex'}}>
{val + ' Modul'}
<div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[4] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val + ' Modul'}</span>
</div >
);
}
}
}, {
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 >
);
}
}
}, "Status"]
}]
const data = [
["1", "1", "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 {
<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>
<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: '50%', backgroundColor:'white', padding: 10, borderRadius: 7.5}}>
{/* <SearchIcon/> */}
......@@ -165,11 +197,18 @@ class UserRole extends Component {
// search = [...search];
// search.push(e.target.value);
// 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'}}
InputProps={{
style: { fontFamily: 'nunito', borderBottomColor: 'white'},
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
......@@ -197,12 +236,14 @@ class UserRole extends Component {
{this.state.add && (
<AddRole
onClickClose={this.closeAdd.bind(this)}
refresh={this.getRole.bind(this)}
data={this.state.indexData}
/>
)}
{this.state.edit && (
<EditRole
onClickClose={this.closeEdit.bind(this)}
refresh={this.getRole.bind(this)}
data={this.state.indexData}
/>
)}
......
src/container/Otorisasi/UserRole/AddRole.js
View file @ 82cecfd4
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 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({
root: {
......@@ -8,6 +13,7 @@ const CustomCheckbox = withStyles({
'&$checked': {
color: '#51c6ea',
},
padding: 5
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
......@@ -21,7 +27,12 @@ export default class AddRole extends Component {
tempData: null,
menuData: null,
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 {
this.getMenu()
}
handleChange(e) {
handleChange(e, type) {
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() {
// let startDate = format(this.state.tempData.start_date, 'yyyy-MM-dd')
// let endDate = format(this.state.tempData.end_date, 'yyyy-MM-dd')
let payload = {
"role_id": 40,
"role_name": "admin-tia",
"start_date": "2020-01-01",
"end_date": "2020-12-31",
"privileges": [
{
"menu_id": 17,
"button_id": [1, 2, 3]
}
]
"role_name": this.state.roleName,
"start_date": this.state.startDate,
"end_date": this.state.endDate,
"privileges": this.state.privileges
}
// 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() {
......@@ -113,9 +137,17 @@ export default class AddRole extends Component {
button_id.splice(indexButtonID,1)
}
privileges[indexID].button_id = button_id
if (button_id.length == 0) {
privileges.splice(indexID,1)
}
this.setState({privileges})
}
handleDate(item) {
let value = format(item, 'dd MMMM yyyy')
return value
}
render() {
return (
<div className="test app-popup-show">
......@@ -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="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<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 className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
......@@ -147,7 +179,7 @@ export default class AddRole extends Component {
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.role_id}
value={'-'}
onChange={(e) => null}
>
{/* {periode.map((option) => (
......@@ -164,10 +196,10 @@ export default class AddRole extends Component {
<TextField
style={{ width: '100%' , marginTop: 7}}
id="userRole"
name="role_name"
name="roleName"
label="User Role"
value={this.state.tempData == null? '' : this.state.tempData.role_name}
onChange={(e) => this.handleChange(e)}
value={this.state.roleName}
onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value"
// helperText="Some important text"
/>
......@@ -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="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%'}}
<DatePicker
margin="normal"
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"
format="dd MMMM yyyy"
value={this.state.startDate}
onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{padding: 0, margin: 0, width: '100%'}}
/>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%'}}
<DatePicker
margin="normal"
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"
format="dd MMMM yyyy"
value={this.state.endDate}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{padding: 0, margin: 0, width: '100%'}}
/>
</div>
</div>
......@@ -217,7 +255,7 @@ export default class AddRole extends Component {
disabled
// id="outlined-read-only-input"
variant="filled"
value={this.state.tempData == null? '' : this.state.tempData.status}
value={'Aktif'}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
......@@ -229,8 +267,8 @@ export default class AddRole extends Component {
</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>
<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> */}
</div>
<Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}>
......@@ -255,37 +293,84 @@ export default class AddRole extends Component {
<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">
<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'}}>
{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
// disabled={}
checked={this.handleSubItemChecked(item, 1)}
onChange={() => this.handleSubItemClick(item,1)}
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
</span>
<Typography style={{fontSize: 12, marginLeft: 5}}>{item.menu_name}</Typography>
</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 className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<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={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>
)
})}
......@@ -294,12 +379,12 @@ export default class AddRole extends Component {
</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' }}>
<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>
</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' }}>
<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>
</div>
</div>
......
src/container/Otorisasi/UserRole/EditRole.js
View file @ 82cecfd4
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 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({
root: {
color: '#51c6ea',
'&$checked': {
color: '#51c6ea',
},
padding: 5
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
......@@ -21,7 +25,9 @@ export default class EditRole extends Component {
tempData: null,
menuData: null,
privileges: [],
checked: false
checked: false,
selectedIndex: 0,
date: new Date()
}
}
......@@ -34,15 +40,28 @@ export default class EditRole extends Component {
this.getMenu()
}
handleChange(e) {
handleChange(e, type) {
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, 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}})
}
}
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})
console.log(response.data.data.start_date)
} else {
alert(response.data.message)
}
......@@ -51,18 +70,25 @@ export default class EditRole extends Component {
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 = {
"role_id": 40,
"role_name": "admin-tia",
"start_date": "2020-01-01",
"end_date": "2020-12-31",
"privileges": [
{
"menu_id": 17,
"button_id": [1, 2, 3]
}
]
"role_id": this.state.tempData.role_id,
"role_name": this.state.tempData.role_name,
"start_date": this.state.tempData.start_date,
"end_date": this.state.tempData.end_date,
"privileges": this.state.privileges
}
// 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() {
......@@ -124,9 +150,17 @@ export default class EditRole extends Component {
button_id.splice(indexButtonID,1)
}
privileges[indexID].button_id = button_id
if (button_id.length == 0) {
privileges.splice(indexID,1)
}
this.setState({privileges})
}
handleDate(item) {
let value = format(item, 'dd MMMM yyyy')
return value
}
render() {
return (
<div className="test app-popup-show">
......@@ -178,7 +212,7 @@ export default class EditRole extends Component {
name="role_name"
label="User Role"
value={this.state.tempData == null? '' : this.state.tempData.role_name}
onChange={(e) => this.handleChange(e)}
onChange={(e) => this.handleChange(e, '')}
// defaultValue="Default Value"
// helperText="Some important text"
/>
......@@ -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="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%'}}
<DatePicker
margin="normal"
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"
format="dd MMMM yyyy"
value={this.state.tempData == null? null : this.state.tempData.start_date}
onChange={(e) => this.handleChange(e, 'start_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{padding: 0, margin: 0, width: '100%'}}
/>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%'}}
<DatePicker
margin="normal"
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"
format="dd MMMM yyyy"
value={this.state.tempData == null? null : this.state.tempData.end_date}
onChange={(e) => this.handleChange(e, 'end_date')}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
style={{padding: 0, margin: 0, width: '100%'}}
/>
</div>
</div>
......@@ -240,8 +280,8 @@ export default class EditRole extends Component {
</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>
<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 == null? '-' : this.state.tempData.updated)}`}</Typography>
</div>
<Divider style={{margin: 20}}/>
<div style={{paddingLeft: 20, paddingRight: 20}}>
......@@ -266,37 +306,84 @@ export default class EditRole extends Component {
<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">
<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'}}>
{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
// disabled
checked={this.handleSubItemChecked(item, 2)}
onChange={() => this.handleSubItemClick(item,2)}
checked={this.handleItemChecked(item)}
onChange={() => this.handleItemClick(item)}
/>
</span>
<Typography style={{fontSize: 12, marginLeft: 5}}>{item.menu_name}</Typography>
</div>
<div className="column 3">
<CustomCheckbox
// disabled
checked={this.handleSubItemChecked(item, 3)}
onChange={() => this.handleSubItemClick(item,3)}
/>
<div className="column-2 grid grid-3x content-center grid-mobile-none gap-15px">
<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={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>
)
})}
......@@ -305,12 +392,12 @@ export default class EditRole extends Component {
</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' }}>
<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>
</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' }}>
<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>
</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