Skip to content

T
Tia-dev
Commit 81961ca8 authored by EKSAD's avatar EKSAD
Browse files
Options

Merge branch 'master' of http://103.44.149.204/d.arizona/tia-dev into riri

parents f035e50d 34a1f518
Show whitespace changes
Inline Side-by-side
Showing with 754 additions and 239 deletions
src/api/index.js
View file @ 81961ca8
...@@ -110,6 +110,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -110,6 +110,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
const searchAM = (body) => api.post('/approval_matrix/search_approval_matrix', body) const searchAM = (body) => api.post('/approval_matrix/search_approval_matrix', body)
const createAM = (body) => api.post('/approval_matrix/create_approval_matrix', body) const createAM = (body) => api.post('/approval_matrix/create_approval_matrix', body)
const updateAM = (body) => api.post('/approval_matrix/update_approval_matrix', body) const updateAM = (body) => api.post('/approval_matrix/update_approval_matrix', body)
const updateVAM = (body) => api.post('/approval_matrix/visual_approval_matrix', body)
const checkUploadAM = (body) => api.post('/approval_matrix/check_import_approval_matrix', body)
const uploadAM = (body) => api.post('/approval_matrix/check_import_approval_matrix', body)
//User //User
const getUser = () => api.get('user/get_all_user') const getUser = () => api.get('user/get_all_user')
...@@ -189,6 +192,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') => ...@@ -189,6 +192,9 @@ const create = (baseURL = 'https://tia.eksad.com/tia-reporting-dev/public/') =>
searchAM, searchAM,
createAM, createAM,
updateAM, updateAM,
updateVAM,
checkUploadAM,
uploadAM,
getUser, getUser,
getDetailUser, getDetailUser,
searchUser, searchUser,
......
src/assets/Images.js
View file @ 81961ca8
...@@ -35,6 +35,7 @@ const Images = { ...@@ -35,6 +35,7 @@ const Images = {
berhasil: require('./berhasil.svg'), berhasil: require('./berhasil.svg'),
up: require('./up.svg'), up: require('./up.svg'),
down: require('./down.svg'), down: require('./down.svg'),
close: require('./close.svg'),
//Image //Image
triputra: require('./triputra.png'), triputra: require('./triputra.png'),
......
src/assets/close.svg 0 → 100644
View file @ 81961ca8
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16">
<defs>
<path id="gi74onwb9a" d="M.898.157l-.74.74c-.212.211-.209.546 0 .754l14.19 14.193c.21.209.546.208.754 0l.74-.74c.212-.212.209-.547 0-.755L1.653.156C1.547.052 1.412 0 1.275 0 1.14 0 1.002.052.898.157z"/>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0H24V24H0z" transform="translate(-4 -4)"/>
<g transform="translate(-4 -4) translate(4 4)">
<path stroke="#FFF" stroke-linecap="round" stroke-width="2" d="M1.143 1.143L14.857 14.857M14.857 1.143L1.143 14.857"/>
</g>
</g>
</svg>
src/assets/sass/app.css
View file @ 81961ca8
...@@ -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/ApprovalMatrix/ApprovalMatrix.js
View file @ 81961ca8
...@@ -5,10 +5,12 @@ import { TextField, InputBase } from "@material-ui/core"; ...@@ -5,10 +5,12 @@ import { TextField, InputBase } from "@material-ui/core";
import { ExcelRenderer } from 'react-excel-renderer'; import { ExcelRenderer } from 'react-excel-renderer';
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
import ReactTooltip from 'react-tooltip';
import UploadFile from "../../library/Upload"; import UploadFile from "../../library/Upload";
import CreateApprovalMatrix from "./CreateApprovalMatrix"; import CreateApprovalMatrix from "./CreateApprovalMatrix";
import EditApprovalMatrix from "./EditApprovalMatrix"; import EditApprovalMatrix from "./EditApprovalMatrix";
import VisualisasiAM from "./VisualisasiAM"; import VisualisasiAM from "./VisualisasiAM";
import PopUpFailedSave from "../../library/PopUpFailedSave";
import api from "../../api"; import api from "../../api";
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
...@@ -30,7 +32,8 @@ export default class ApprovalMatrix extends Component { ...@@ -30,7 +32,8 @@ export default class ApprovalMatrix extends Component {
search: "", search: "",
cols: null, cols: null,
rows: null, rows: null,
dataLoaded: false dataLoaded: false,
popupError: false
} }
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
} }
...@@ -39,29 +42,223 @@ export default class ApprovalMatrix extends Component { ...@@ -39,29 +42,223 @@ export default class ApprovalMatrix extends Component {
let fileObj = event let fileObj = event
ExcelRenderer(fileObj, (err, resp) => { ExcelRenderer(fileObj, (err, resp) => {
if (err) { if (err) {
// console.log(err); console.log(err);
} }
else { else {
let judul = resp.rows[0] let judul = resp.rows[2]
let isi = resp.rows.slice(1) let isi = resp.rows.slice(3)
// let body = isi.map((item) => { let payload = []
// return { isi.map((item, index) => {
// item if (item.length > 0) {
// ] payload.push({
// }) // id: index + 1,
// console.log(JSON.stringify(isi)); approval_type_name: item[0],
orders: item[1],
fullname: item[2],
operator_type_name: item[3],
start_date: item[4],
end_date: item[5],
})
}
})
let body = {
approval_matrix: payload
}
this.setState({ payload: body, buttonError: false })
api.create().checkUploadAM(body).then(response => {
console.log(response.data)
if (response.data.status === "success") {
let dataRow = response.data.data.map((item, index) => {
return [
index + 1,
item.approval_type_name,
item.orders,
item.fullname,
item.operator_type_name,
item.start_date,
item.end_date,
item.error
]
})
let columns = [
"ID",
{
name: "Tipe Persetujuan",
options: {
customBodyRender: (val, tableMeta) => {
// console.log(tableMeta)
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('approval_type_name'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="typename">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="typename" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Order",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('orders'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="order">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="order" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Nama Pemberi Persetujuan",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('fullname'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="fullname">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="fullname" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Operator",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('operator_type_name'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="operatorname">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="operatorname" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Berlaku Mulai",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('start_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="startdate">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="startdate" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "Berakhir Hingga",
options: {
customBodyRender: (val, tableMeta) => {
let check = null
if (tableMeta.rowData[7] != null) {
check = tableMeta.rowData[7].findIndex((val) => val.field.includes('end_date'))
if (check > -1) {
this.setState({ buttonError: true })
}
}
return (
<div style={{ display: 'flex' }}>
{tableMeta.rowData[7] != null && check > -1 ?
<a data-tip={tableMeta.rowData[7][check].message} data-for="enddate">
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
</a> :
<span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
}
<ReactTooltip border={true} id="enddate" place="bottom" type="light" effect="solid" />
</div >
);
}
}
},
{
name: "",
options: {
display: false
}
}
]
// console.log(dataRow);
this.setState({ this.setState({
dataLoaded: true, dataLoaded: true,
cols: judul, cols: columns,
rows: isi rows: dataRow
}); });
} }
// console.log(response);
})
}
}); });
} }
componentDidMount() { componentDidMount() {
this.getData() this.getData()
console.log(this.props.height)
} }
getData() { getData() {
...@@ -137,12 +334,24 @@ export default class ApprovalMatrix extends Component { ...@@ -137,12 +334,24 @@ export default class ApprovalMatrix extends Component {
}) })
} }
updateVAM = (payload) => {
this.setState({ visibleVisual: false, visibleAM: true })
api.create().updateVAM(payload).then(response => {
// console.log(response.data)
if (response.data.status == 'success') {
this.getData()
} else {
alert(response.data.message)
}
})
}
downloadFile = async () => { downloadFile = async () => {
let res = await fetch( let res = await fetch(
"https://tia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=ApprovalMatrixTemplate&&fileType=xlsx" "https://tia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=ApprovalMatrixTemplate&&fileType=xlsx"
) )
res = await res.blob() res = await res.blob()
console.log(res) // console.log(res)
if (res.size > 0) { if (res.size > 0) {
let url = window.URL.createObjectURL(res); let url = window.URL.createObjectURL(res);
let a = document.createElement('a'); let a = document.createElement('a');
...@@ -153,19 +362,28 @@ export default class ApprovalMatrix extends Component { ...@@ -153,19 +362,28 @@ export default class ApprovalMatrix extends Component {
} }
downloadDataTable = async () => { downloadDataTable = async () => {
alert('link belum ada') // alert('link belum ada')
// let res = await fetch( let res = await fetch(
// "https://tia.eksad.com/tia-reporting-dev/public/business_unit/export_business_unit" "https://tia.eksad.com/tia-reporting-dev/public/approval_matrix/export_approval_matrix"
// ) )
// res = await res.blob() res = await res.blob()
// console.log(res) // console.log(res)
// if (res.size > 0) { if (res.size > 0) {
// let url = window.URL.createObjectURL(res); let url = window.URL.createObjectURL(res);
// let a = document.createElement('a'); let a = document.createElement('a');
// a.href = url; a.href = url;
// a.download = 'Business Unit.xlsx'; a.download = 'Approval Matrix.xlsx';
// a.click(); a.click();
// } }
}
uploadAM() {
api.create().uploadAM(this.state.payload).then(response => {
console.log(response.data)
// console.log(this.state.payload)
this.getData()
this.setState({ visibleAM: true })
})
} }
render() { render() {
...@@ -373,6 +591,7 @@ export default class ApprovalMatrix extends Component { ...@@ -373,6 +591,7 @@ export default class ApprovalMatrix extends Component {
<VisualisasiAM <VisualisasiAM
onClickClose={() => this.setState({ visibleVisual: false, visibleAM: true })} onClickClose={() => this.setState({ visibleVisual: false, visibleAM: true })}
height= {this.props.height} height= {this.props.height}
updateVAM={this.updateVAM.bind(this)}
/> />
: :
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
...@@ -398,15 +617,21 @@ export default class ApprovalMatrix extends Component { ...@@ -398,15 +617,21 @@ export default class ApprovalMatrix extends Component {
<button <button
type="button" type="button"
onClick={() => this.setState({ visibleAM: true })} onClick={() => this.setState({ visibleAM: true })}
style={{ marginRight: 20}} style={{ marginRight: 20 }}
> >
<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' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div> </div>
</button> </button>
<button
type="button"
onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : this.uploadAM()}
style={{}}
>
<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>
</button>
</div> </div>
</div> </div>
</div> </div>
...@@ -428,6 +653,9 @@ export default class ApprovalMatrix extends Component { ...@@ -428,6 +653,9 @@ export default class ApprovalMatrix extends Component {
updateAM={this.updateAM.bind(this)} updateAM={this.updateAM.bind(this)}
/> />
)} )}
{this.state.popupError && (
<PopUpFailedSave onClickClose={()=> this.setState({ popupError: false })} />
)}
{this.state.visibleUpload && ( {this.state.visibleUpload && (
<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 background-white border-radius" style={{ borderRadius: 8 }}>
...@@ -443,7 +671,7 @@ export default class ApprovalMatrix extends Component { ...@@ -443,7 +671,7 @@ export default class ApprovalMatrix extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })} onClick={() => this.setState({ visibleUpload: false })}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/ApprovalMatrix/CreateApprovalMatrix.js
View file @ 81961ca8
...@@ -6,6 +6,7 @@ import * as R from 'ramda' ...@@ -6,6 +6,7 @@ import * as R from 'ramda'
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 api from "../../api"; import api from "../../api";
import Images from '../../assets/Images';
export default class CreateApprovalMatrix extends Component { export default class CreateApprovalMatrix extends Component {
constructor(props) { constructor(props) {
...@@ -22,7 +23,9 @@ export default class CreateApprovalMatrix extends Component { ...@@ -22,7 +23,9 @@ export default class CreateApprovalMatrix extends Component {
endDate: '', endDate: '',
userData: [], userData: [],
value: null, value: null,
date: new Date() date: new Date(),
errorOrder: false,
msgErrOrder: '',
} }
} }
...@@ -105,22 +108,34 @@ export default class CreateApprovalMatrix extends Component { ...@@ -105,22 +108,34 @@ export default class CreateApprovalMatrix 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({ startDate: format(e, 'yyyy-MM-dd') }, () => { this.setState({ startDate: format(e, 'yyyy-MM-dd'),
errorOrder: false,
msgErrOrder: '',
// }, () => {
// console.log(this.state.startDate) // console.log(this.state.startDate)
}) })
} else if (isDate && type == 'end_date') { } else if (isDate && type == 'end_date') {
this.setState({ endDate: format(e, 'yyyy-MM-dd') }, () => { this.setState({ endDate: format(e, 'yyyy-MM-dd'),
errorOrder: false,
msgErrOrder: '',
// }, () => {
// console.log(this.state.endDate) // console.log(this.state.endDate)
}) })
} 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}})
this.setState({
errorOrder: false,
msgErrOrder: '',
})
} }
} }
validasi() { validasi() {
if (R.isNil(this.state.typeId)) return alert("Tipe Persetujuan is Required."); if (R.isNil(this.state.typeId)) return alert("Tipe Persetujuan is Required.");
if (R.isEmpty(this.state.order)) return alert("Order is Required."); if (R.isEmpty(this.state.order)) {
this.setState({ errorOrder: true, msgErrOrder: 'Order is Required.'})
}
if (R.isNil(this.state.userId)) return alert("Pemberi Persetujuan is Required."); if (R.isNil(this.state.userId)) return alert("Pemberi Persetujuan is Required.");
if (R.isNil(this.state.operatorId)) return alert("Operator is Required."); if (R.isNil(this.state.operatorId)) return alert("Operator is Required.");
if (!R.isEmpty(this.state.startDate) && !R.isEmpty(this.state.endDate) && (this.state.startDate > this.state.endDate)) return alert("Masa Berlaku Tidak Boleh Kurang Dari Tanggal Mulai"); if (!R.isEmpty(this.state.startDate) && !R.isEmpty(this.state.endDate) && (this.state.startDate > this.state.endDate)) return alert("Masa Berlaku Tidak Boleh Kurang Dari Tanggal Mulai");
...@@ -156,7 +171,7 @@ export default class CreateApprovalMatrix extends Component { ...@@ -156,7 +171,7 @@ export default class CreateApprovalMatrix extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
...@@ -224,6 +239,8 @@ export default class CreateApprovalMatrix extends Component { ...@@ -224,6 +239,8 @@ export default class CreateApprovalMatrix extends Component {
id="order" id="order"
label="Order" label="Order"
value={this.state.order} value={this.state.order}
error={this.state.errorOrder}
helperText={this.state.msgErrOrder}
onChange={(e) => this.setState({ order: e.target.value })} onChange={(e) => this.setState({ order: e.target.value })}
inputProps={{ inputProps={{
style: { style: {
......
src/container/ApprovalMatrix/EditApprovalMatrix.js
View file @ 81961ca8
...@@ -5,6 +5,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete'; ...@@ -5,6 +5,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
import * as R from 'ramda' import * as R from 'ramda'
import format from "date-fns/format"; import format from "date-fns/format";
import api from "../../api"; import api from "../../api";
import Images from '../../assets/Images';
const operator = [ const operator = [
{ {
...@@ -189,7 +190,7 @@ export default class EditApprovalMatrix extends Component { ...@@ -189,7 +190,7 @@ export default class EditApprovalMatrix extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/ApprovalMatrix/VisualisasiAM.js
View file @ 81961ca8
...@@ -47,13 +47,13 @@ export default class VisualisasiAM extends Component { ...@@ -47,13 +47,13 @@ export default class VisualisasiAM extends Component {
api.create().getTypeAM().then((response) => { api.create().getTypeAM().then((response) => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
// console.log(data)
let typeData = data.map((item) => { let typeData = data.map((item) => {
return { return {
approval_type_id: item.approval_type_id, approval_type_id: item.approval_type_id,
approval_type_name: item.approval_type_name approval_type_name: item.approval_type_name
} }
}) })
// console.log(userData)
let typeProps = { let typeProps = {
options: typeData, options: typeData,
getOptionLabel: (option) => option.approval_type_name, getOptionLabel: (option) => option.approval_type_name,
...@@ -73,7 +73,7 @@ export default class VisualisasiAM extends Component { ...@@ -73,7 +73,7 @@ export default class VisualisasiAM extends Component {
api.create().searchAM(body).then(response => { api.create().searchAM(body).then(response => {
if (response.data.status == 'success') { if (response.data.status == 'success') {
let data = response.data.data let data = response.data.data
console.log(data) // console.log(data)
let listVisual = [] let listVisual = []
data.map((item, index) => { data.map((item, index) => {
let indexId = listVisual.findIndex((val) => val.orderId == item.orders) let indexId = listVisual.findIndex((val) => val.orderId == item.orders)
...@@ -82,13 +82,15 @@ export default class VisualisasiAM extends Component { ...@@ -82,13 +82,15 @@ export default class VisualisasiAM extends Component {
orderId: item.orders, orderId: item.orders,
data: [item] data: [item]
}) })
console.log(listVisual); // console.log(listVisual);
} else { } else {
listVisual[indexId].data.push(item) listVisual[indexId].data.push(item)
// console.log('listVisual');
// console.log(listVisual);
} }
}) })
this.setState({ listApproval: listVisual}) this.setState({ listApproval: listVisual})
console.log(listVisual); // console.log(listVisual);
} else { } else {
alert(response.data.message) alert(response.data.message)
} }
...@@ -100,33 +102,43 @@ export default class VisualisasiAM extends Component { ...@@ -100,33 +102,43 @@ export default class VisualisasiAM extends Component {
let orderIdFrom = listApproval[fromIndex].orderId let orderIdFrom = listApproval[fromIndex].orderId
listApproval[fromIndex].orderId = listApproval[toIndex].orderId listApproval[fromIndex].orderId = listApproval[toIndex].orderId
listApproval[toIndex].orderId = orderIdFrom listApproval[toIndex].orderId = orderIdFrom
that.setState({listEdit: listApproval}) that.setState({listEdit: listApproval}, () => console.log(this.state.listEdit))
} }
handleSave() { handleSave() {
let data = [] let data = []
if (this.state.listEdit.length == 0) {
this.state.listApproval.map((item,index) => {
item.data.map((items,index) => {
data.push({
approval_matrix_id: items.approval_matrix_id,
approval_type_id: items.approval_type_id,
operator_type_id: items.operator_type_id,
orders: item.orderId,
user_id: items.user_id
})
})
})
} else {
this.state.listEdit.map((item,index) => { this.state.listEdit.map((item,index) => {
item.data.map((items,index) => { item.data.map((items,index) => {
data.push({ data.push({
approval_matrix_id: items.approval_matrix_id, approval_matrix_id: items.approval_matrix_id,
approval_type_id: items.approval_type_id, approval_type_id: items.approval_type_id,
approval_type_name: items.approval_type_name,
created: items.created,
end_date: items.end_date,
fullname: items.fullname,
operator_type_id: items.operator_type_id, operator_type_id: items.operator_type_id,
operator_type_name: items.operator_type_name,
orders: item.orderId, orders: item.orderId,
start_date: items.start_date,
status: items.status,
updated: items.updated,
user_id: items.user_id user_id: items.user_id
}) })
}) })
}) })
}
setTimeout(() => { setTimeout(() => {
this.setState({listOriginal: data}) let payload = {
approval_type_id: data[0].approval_type_id,
approval_matrix_detail : data
}
this.setState({listOriginal: payload})
this.props.updateVAM(this.state.listOriginal)
}, 500); }, 500);
} }
......
src/container/MasterData/Parameter/CreateParameter.js
View file @ 81961ca8
...@@ -5,6 +5,7 @@ import api from '../../../api'; ...@@ -5,6 +5,7 @@ import api from '../../../api';
import { DatePicker } from '@material-ui/pickers'; import { DatePicker } from '@material-ui/pickers';
import { format } from 'date-fns'; import { format } from 'date-fns';
import * as R from 'ramda' import * as R from 'ramda'
import Images from '../../../assets/Images';
export default class CreateParameter extends Component { export default class CreateParameter extends Component {
constructor(props) { constructor(props) {
...@@ -377,7 +378,7 @@ export default class CreateParameter extends Component { ...@@ -377,7 +378,7 @@ export default class CreateParameter extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
...@@ -697,7 +698,7 @@ export default class CreateParameter extends Component { ...@@ -697,7 +698,7 @@ export default class CreateParameter extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/MasterData/Parameter/Parameter.js
View file @ 81961ca8
...@@ -777,7 +777,7 @@ export default class Parameter extends Component { ...@@ -777,7 +777,7 @@ export default class Parameter extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })} onClick={() => this.setState({ visibleUpload: false })}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/MasterData/Perusahaan/CreatePerusahaan.js
View file @ 81961ca8
...@@ -5,6 +5,7 @@ import { DateTimePicker, KeyboardDatePicker, DatePicker } from "@material-ui/pic ...@@ -5,6 +5,7 @@ import { DateTimePicker, KeyboardDatePicker, DatePicker } from "@material-ui/pic
import format from "date-fns/format"; import format from "date-fns/format";
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
import api from '../../../api'; import api from '../../../api';
import Images from '../../../assets/Images';
export default class CreatePerusahaan extends Component { export default class CreatePerusahaan extends Component {
constructor(props) { constructor(props) {
...@@ -123,7 +124,7 @@ export default class CreatePerusahaan extends Component { ...@@ -123,7 +124,7 @@ export default class CreatePerusahaan extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/MasterData/Perusahaan/EditPerusahaan.js
View file @ 81961ca8
...@@ -5,6 +5,7 @@ import * as R from 'ramda' ...@@ -5,6 +5,7 @@ import * as R from 'ramda'
import api from '../../../api' import api from '../../../api'
import Autocomplete from '@material-ui/lab/Autocomplete' import Autocomplete from '@material-ui/lab/Autocomplete'
import { format } from 'date-fns' import { format } from 'date-fns'
import Images from '../../../assets/Images'
export default class EditPerusahaan extends Component { export default class EditPerusahaan extends Component {
constructor(props) { constructor(props) {
...@@ -177,7 +178,7 @@ export default class EditPerusahaan extends Component { ...@@ -177,7 +178,7 @@ export default class EditPerusahaan extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/MasterData/Perusahaan/Perusahaan.js
View file @ 81961ca8
...@@ -607,7 +607,7 @@ export default class Perusahaan extends Component { ...@@ -607,7 +607,7 @@ export default class Perusahaan extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })} onClick={() => this.setState({ visibleUpload: false })}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/MasterData/Perusahaan/VisualPerusahaan.js
View file @ 81961ca8
...@@ -109,6 +109,11 @@ export default class VisualPerusahaan extends Component { ...@@ -109,6 +109,11 @@ export default class VisualPerusahaan 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%', fontSize: 16, paddingTop: 8 }}>Hirarki Perusahaan</label> <label style={{ color: 'white', width: '20%', fontSize: 16, paddingTop: 8 }}>Hirarki Perusahaan</label>
</div> </div>
<div style={{ display: 'flex', paddingRight: 25, paddingLeft: 25 }}>
<label style={{ color: '#51c6ea', width: '20%', fontSize: 11 }}>Master Data / Perusahaan /
<span style={{ color: 'white', width: '20%', fontSize: 11 }}> Visualisasi</span>
</label>
</div>
<div style={{ padding: 25, width: '100%' }}> <div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}> <div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}>
<Nestable <Nestable
...@@ -118,42 +123,6 @@ export default class VisualPerusahaan extends Component { ...@@ -118,42 +123,6 @@ export default class VisualPerusahaan extends Component {
ref={el => this.refNestable = el} ref={el => this.refNestable = el}
onChange={(e) => this.setState({items: e}, () => console.log(JSON.stringify(e)))} onChange={(e) => this.setState({items: e}, () => console.log(JSON.stringify(e)))}
/> />
{/* <TreeView
defaultCollapseIcon={<ExpandMoreIcon />}
defaultExpandIcon={<ChevronRightIcon />}
>
<TreeItem nodeId="1" label="Triputra Investindo Arya">
<TreeItem nodeId="2" label="TAP Group" >
<TreeItem nodeId="3" label="Gawi Bandep Sawit" />
<TreeItem nodeId="4" label="Etam Buana Lestari" />
</TreeItem>
<TreeItem nodeId="11" label="Puninar Group">
<TreeItem nodeId="21" label="TAP Group" >
<TreeItem nodeId="31" label="Gawi Bandep Sawit" />
<TreeItem nodeId="41" label="Etam Buana Lestari" />
</TreeItem>
</TreeItem>
<TreeItem nodeId="12" label="Daya Group">
<TreeItem nodeId="22" label="TAP Group" >
<TreeItem nodeId="32" label="Gawi Bandep Sawit" />
<TreeItem nodeId="42" label="Etam Buana Lestari" />
</TreeItem>
</TreeItem>
</TreeItem>
<TreeItem nodeId="5" label="Documents">
<TreeItem nodeId="10" label="OSS" />
<TreeItem nodeId="6" label="Material-UI">
<TreeItem nodeId="7" label="src">
<TreeItem nodeId="8" label="index.js" />
<TreeItem nodeId="9" label="tree-view.js" />
</TreeItem>
</TreeItem>
</TreeItem>
</TreeView> */}
</div> </div>
</div> </div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}> <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
......
src/container/MasterData/ReportItems.js
View file @ 81961ca8
...@@ -877,7 +877,7 @@ export default class ReportItems extends Component { ...@@ -877,7 +877,7 @@ export default class ReportItems extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })} onClick={() => this.setState({ visibleUpload: false })}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/MasterData/UnitBisnis.js
View file @ 81961ca8
...@@ -504,7 +504,7 @@ export default class UnitBisnis extends Component { ...@@ -504,7 +504,7 @@ export default class UnitBisnis extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })} onClick={() => this.setState({ visibleUpload: false })}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/MasterData/formReportItems/CreateReportItems.js
View file @ 81961ca8
...@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete'; ...@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../../../library/Utils'; import { titleCase } from '../../../library/Utils';
import format from "date-fns/format"; import format from "date-fns/format";
import { DatePicker } from '@material-ui/pickers'; import { DatePicker } from '@material-ui/pickers';
import Images from '../../../assets/Images';
export default class CreateReportItems extends Component { export default class CreateReportItems extends Component {
constructor(props) { constructor(props) {
...@@ -284,7 +285,7 @@ export default class CreateReportItems extends Component { ...@@ -284,7 +285,7 @@ export default class CreateReportItems extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/MasterData/formReportItems/EditReportItems.js
View file @ 81961ca8
...@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete'; ...@@ -6,6 +6,7 @@ import Autocomplete from '@material-ui/lab/Autocomplete';
import api from '../../../api'; import api from '../../../api';
import * as R from 'ramda' import * as R from 'ramda'
import { titleCase } from '../../../library/Utils'; import { titleCase } from '../../../library/Utils';
import Images from '../../../assets/Images';
export default class EditReportItems extends Component { export default class EditReportItems extends Component {
constructor(props) { constructor(props) {
...@@ -289,7 +290,7 @@ export default class EditReportItems extends Component { ...@@ -289,7 +290,7 @@ export default class EditReportItems extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/MasterData/formUnitBisnis/CreateUnitBisnis.js
View file @ 81961ca8
...@@ -3,6 +3,7 @@ import { TextField, Typography } from '@material-ui/core'; ...@@ -3,6 +3,7 @@ import { TextField, Typography } from '@material-ui/core';
import * as R from 'ramda' import * as R from 'ramda'
import { DateTimePicker, KeyboardDatePicker, DatePicker } from "@material-ui/pickers"; import { DateTimePicker, KeyboardDatePicker, DatePicker } from "@material-ui/pickers";
import format from "date-fns/format"; import format from "date-fns/format";
import Images from '../../../assets/Images';
export default class CreateUnitBisnis extends Component { export default class CreateUnitBisnis extends Component {
constructor(props) { constructor(props) {
...@@ -118,7 +119,7 @@ export default class CreateUnitBisnis extends Component { ...@@ -118,7 +119,7 @@ export default class CreateUnitBisnis extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
...@@ -306,7 +307,7 @@ export default class CreateUnitBisnis extends Component { ...@@ -306,7 +307,7 @@ export default class CreateUnitBisnis extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/Otorisasi/User.js
View file @ 81961ca8
...@@ -550,7 +550,7 @@ export default class UserRole extends Component { ...@@ -550,7 +550,7 @@ export default class UserRole extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.setState({ visibleUpload: false })} onClick={() => this.setState({ visibleUpload: false })}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/Otorisasi/User/AddUser.js
View file @ 81961ca8
...@@ -9,6 +9,7 @@ import RemoveIcon from '@material-ui/icons/Remove'; ...@@ -9,6 +9,7 @@ import RemoveIcon from '@material-ui/icons/Remove';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import { DatePicker } from '@material-ui/pickers'; import { DatePicker } from '@material-ui/pickers';
import * as R from 'ramda' import * as R from 'ramda'
import Images from '../../../assets/Images';
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
...@@ -274,7 +275,7 @@ export default class AddUser extends Component { ...@@ -274,7 +275,7 @@ export default class AddUser extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/Otorisasi/User/EditUser.js
View file @ 81961ca8
...@@ -8,6 +8,7 @@ import format from "date-fns/format"; ...@@ -8,6 +8,7 @@ import format from "date-fns/format";
import RemoveIcon from '@material-ui/icons/Remove'; import RemoveIcon from '@material-ui/icons/Remove';
import AddIcon from '@material-ui/icons/Add'; import AddIcon from '@material-ui/icons/Add';
import * as R from 'ramda' import * as R from 'ramda'
import Images from '../../../assets/Images';
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
...@@ -310,7 +311,7 @@ export default class EditUser extends Component { ...@@ -310,7 +311,7 @@ export default class EditUser extends Component {
className="btn btn-circle btn-white" className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close}/>
</button> </button>
</div> </div>
</div> </div>
......
src/container/Otorisasi/UserRole/AddRole.js
View file @ 81961ca8
...@@ -3,10 +3,11 @@ import { TextField, Divider, Typography, Checkbox, withStyles, Collapse } from ' ...@@ -3,10 +3,11 @@ 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'
import Images from '../../../assets/Images';
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
...@@ -17,7 +18,7 @@ const CustomCheckbox = withStyles({ ...@@ -17,7 +18,7 @@ const CustomCheckbox = withStyles({
padding: 5 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 {
...@@ -40,11 +41,13 @@ export default class AddRole extends Component { ...@@ -40,11 +41,13 @@ 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() {
...@@ -53,9 +56,10 @@ export default class AddRole extends Component { ...@@ -53,9 +56,10 @@ export default class AddRole extends Component {
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,
...@@ -64,7 +68,8 @@ export default class AddRole extends Component { ...@@ -64,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,
...@@ -73,7 +78,8 @@ export default class AddRole extends Component { ...@@ -73,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,
...@@ -87,11 +93,11 @@ export default class AddRole extends Component { ...@@ -87,11 +93,11 @@ export default class AddRole extends Component {
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 {
...@@ -120,10 +126,36 @@ export default class AddRole extends Component { ...@@ -120,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)
} }
...@@ -132,7 +164,7 @@ export default class AddRole extends Component { ...@@ -132,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) {
...@@ -141,12 +173,12 @@ export default class AddRole extends Component { ...@@ -141,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) {
...@@ -162,7 +194,7 @@ export default class AddRole extends Component { ...@@ -162,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) {
...@@ -173,13 +205,13 @@ export default class AddRole extends Component { ...@@ -173,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) {
...@@ -187,11 +219,25 @@ export default class AddRole extends Component { ...@@ -187,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>
...@@ -203,7 +249,7 @@ export default class AddRole extends Component { ...@@ -203,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()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close} />
</button> </button>
</div> </div>
</div> </div>
...@@ -233,7 +279,7 @@ export default class AddRole extends Component { ...@@ -233,7 +279,7 @@ 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"
...@@ -264,7 +310,7 @@ export default class AddRole extends Component { ...@@ -264,7 +310,7 @@ export default class AddRole extends Component {
'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>
...@@ -285,7 +331,7 @@ export default class AddRole extends Component { ...@@ -285,7 +331,7 @@ export default class AddRole extends Component {
'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>
...@@ -312,38 +358,38 @@ export default class AddRole extends Component { ...@@ -312,38 +358,38 @@ 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 ( 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.handleCollapse(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
...@@ -351,14 +397,14 @@ export default class AddRole extends Component { ...@@ -351,14 +397,14 @@ export default class AddRole 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)}
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">
...@@ -366,7 +412,7 @@ export default class AddRole extends Component { ...@@ -366,7 +412,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">
...@@ -374,42 +420,125 @@ export default class AddRole extends Component { ...@@ -374,42 +420,125 @@ 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">
<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 (
<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.handleCollapseSetting(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"> <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>
...@@ -435,7 +564,7 @@ export default class AddRole extends Component { ...@@ -435,7 +564,7 @@ export default class AddRole extends Component {
</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()}
......
src/container/Otorisasi/UserRole/EditRole.js
View file @ 81961ca8
...@@ -6,6 +6,7 @@ import RemoveIcon from '@material-ui/icons/Remove'; ...@@ -6,6 +6,7 @@ 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 * as R from 'ramda' import * as R from 'ramda'
import Images from '../../../assets/Images';
const CustomCheckbox = withStyles({ const CustomCheckbox = withStyles({
root: { root: {
color: '#51c6ea', color: '#51c6ea',
...@@ -35,6 +36,8 @@ export default class EditRole extends Component { ...@@ -35,6 +36,8 @@ export default class EditRole extends Component {
msgErrorRN: '', msgErrorRN: '',
msgErrorSD: '', msgErrorSD: '',
msgErrorED: '', msgErrorED: '',
application: [],
setting: [],
} }
} }
...@@ -51,7 +54,8 @@ export default class EditRole extends Component { ...@@ -51,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,
...@@ -60,7 +64,8 @@ export default class EditRole extends Component { ...@@ -60,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,
...@@ -69,7 +74,8 @@ export default class EditRole extends Component { ...@@ -69,7 +74,8 @@ 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,
...@@ -94,11 +100,11 @@ export default class EditRole extends Component { ...@@ -94,11 +100,11 @@ 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 {
...@@ -128,10 +134,36 @@ export default class EditRole extends Component { ...@@ -128,10 +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') {
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)
} }
...@@ -190,6 +222,20 @@ export default class EditRole extends Component { ...@@ -190,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
...@@ -198,8 +244,8 @@ export default class EditRole extends Component { ...@@ -198,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>
...@@ -211,7 +257,7 @@ export default class EditRole extends Component { ...@@ -211,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()}
> >
<i className="fa fa-lg fa-times" style={{ color: 'white' }} /> <img src={Images.close} />
</button> </button>
</div> </div>
</div> </div>
...@@ -345,13 +391,13 @@ export default class EditRole extends Component { ...@@ -345,13 +391,13 @@ 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 ( 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.handleCollapse(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
...@@ -359,9 +405,9 @@ export default class EditRole extends Component { ...@@ -359,9 +405,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)}
...@@ -389,16 +435,99 @@ export default class EditRole extends Component { ...@@ -389,16 +435,99 @@ 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">
<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 (
<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.handleCollapseSetting(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"> <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