Skip to content

T
Tia-dev
Commit b56ef21c authored by Rifka Kurnia Irfiana's avatar Rifka Kurnia Irfiana
Browse files
Options

add preview and visual approval matrix

parent 79d5557d
Hide whitespace changes
Inline Side-by-side
Showing with 333 additions and 87 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ b56ef21c
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap"; import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles'; import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField"; import { TextField, InputBase } from "@material-ui/core";
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import MUIDataTable from "mui-datatables"; import MUIDataTable from "mui-datatables";
import CreateApprovalMatrix from "./CreateApprovalMatrix"; import CreateApprovalMatrix from "./CreateApprovalMatrix";
import EditApprovalMatrix from "./EditApprovalMatrix"; import EditApprovalMatrix from "./EditApprovalMatrix";
import PreviewAM from "./PreviewAM";
import VisualisasiAM from "./VisualisasiAM";
var ct = require("../../library/CustomTable"); var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable()); const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions(); const options = ct.customOptions();
const type = [
{
value: 'KPI',
label: 'KPI',
},
{
value: 'Gatau',
label: 'Gatau',
},
];
export default class ApprovalMatrix extends Component { export default class ApprovalMatrix extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
visibleAM: true,
visibleCreate: false, visibleCreate: false,
visibleEdit: false visibleEdit: false,
visibleVisual: false,
search: "",
} }
} }
componentDidMount() { componentDidMount() {
} }
handleInputChange = (e) => {
// Immediately update the state
this.setState({
search: e.target.value
})
// Execute the debounced onChange method
this.onChangeDebounced(e)
}
onChangeDebounced = (e) => {
// Delayed logic goes here
}
render() { render() {
const columns = [{ const columns = [{
name: "Action", name: "Action",
...@@ -54,95 +84,115 @@ export default class ApprovalMatrix extends Component { ...@@ -54,95 +84,115 @@ export default class ApprovalMatrix extends Component {
] ]
return ( return (
<div>
{this.state.visibleAM === true ?
<div style={{ height: this.props.height }}> <div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} /> <div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div> <div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<label style={{ color: 'white', width: '20%', fontSize: 16 }}>Master Data - Approval Matrix</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', paddingTop: 8 }}>Master Data - Approval Matrix</label>
<form style={{ }}> {/* <form style={{ }}>
<TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/> <TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
</form> </form> */}
<div style={{ display: 'flex' }}> <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5 }}>
<button <img src={Images.searchBlack} style={{ marginRight: 10 }} />
style={{ <InputBase
backgroundColor: 'transparent', style={{ width: '100%' }}
cursor: 'pointer', placeholder="Search"
borderColor: 'transparent', value={this.state.search}
padding: 0 onChange={(e) => this.handleInputChange(e)}
}} inputProps={{ 'aria-label': 'naked' }}
onClick={() => null} />
> </div>
<img src={Images.template} /> <div style={{ display: 'flex' }}>
</button> <button
<button style={{
style={{ backgroundColor: 'transparent',
backgroundColor: 'transparent', cursor: 'pointer',
cursor: 'pointer', borderColor: 'transparent',
borderColor: 'transparent', padding: 0
marginLeft: 16, }}
padding:0 onClick={() => null}
}} >
onClick={() => null} <img src={Images.template} />
> </button>
<img src={Images.upload} /> <button
</button> style={{
<button backgroundColor: 'transparent',
style={{ cursor: 'pointer',
backgroundColor: 'transparent', borderColor: 'transparent',
cursor: 'pointer', marginLeft: 16,
borderColor: 'transparent', padding:0
marginLeft: 16, }}
padding:0 onClick={() => null}
}} >
onClick={() => null} <img src={Images.upload} />
> </button>
<img src={Images.download} /> <button
</button> style={{
<button backgroundColor: 'transparent',
style={{ cursor: 'pointer',
backgroundColor: 'transparent', borderColor: 'transparent',
cursor: 'pointer', marginLeft: 16,
borderColor: 'transparent', padding:0
marginLeft: 16, }}
padding:0 onClick={() => null}
}} >
onClick={() => null} <img src={Images.download} />
> </button>
<img src={Images.visualisasi} /> <button
</button> style={{
<button backgroundColor: 'transparent',
style={{ cursor: 'pointer',
backgroundColor: 'transparent', borderColor: 'transparent',
cursor: 'pointer', marginLeft: 16,
borderColor: 'transparent', padding:0
marginLeft: 16, }}
padding:0 onClick={() => null}
}} >
> <img src={Images.visualisasi} onClick={() => this.setState({ visibleVisual: true, visibleAM: false })} />
<img src={Images.add} onClick={() => this.setState({ visibleCreate: true })} /> </button>
</button> <button
</div > style={{
</div> backgroundColor: 'transparent',
<div style={{ padding: 25, width: '100%' }}> cursor: 'pointer',
<MuiThemeProvider theme={getMuiTheme()}> borderColor: 'transparent',
<MUIDataTable marginLeft: 16,
data={data} padding:0
columns={columns} }}
options={options} >
/> <img src={Images.add} onClick={() => this.setState({ visibleCreate: true })} />
</MuiThemeProvider> </button>
</div >
</div>
<div style={{ padding: 25, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div> </div>
</div> </div>
{this.state.visibleCreate && ( : false
<CreateApprovalMatrix }
onClickClose={() => this.setState({ visibleCreate: false })} {this.state.visibleCreate && (
/> <CreateApprovalMatrix
)} onClickClose={() => this.setState({ visibleCreate: false })}
{this.state.visibleEdit && ( />
<EditApprovalMatrix )}
onClickClose={() => this.setState({ visibleEdit: false })} {this.state.visibleEdit && (
/> <EditApprovalMatrix
)} onClickClose={() => this.setState({ visibleEdit: false })}
/>
)}
{this.state.visibleVisual && (
<VisualisasiAM
onClickClose={() => this.setState({ visibleVisual: false })}
/>
)}
</div> </div>
); );
} }
......
src/container/ApprovalMatrix/PreviewAM.js 0 → 100644
View file @ b56ef21c
import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import MUIDataTable from "mui-datatables";
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
export default class PreviewAM extends Component {
render() {
const columns = ["ID", "Tipe Persetujuan", "Order", "Nama Pemberi Persetujuan", "Operator", "Berlaku Mulai", "Berlaku Hingga"]
const data = [
["1", "Yearly", "1", "John Doe", "-", "2020-01-01", "2020-12-31"],
["2", "Yearly", "2", "John Doe", "-", "2020-01-01", "2020-12-31"],
["3", "Yearly", "2", "John Doe", "AND", "2020-01-01", "2020-12-31"],
["4", "Yearly", "2", "John Doe", "AND", "2020-01-01", "2020-12-31"],
["5", "Yearly", "3", "John Doe", "-", "2020-01-01", "2020-12-31"],
]
return (
<div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div>
<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 }}>Preview Data</label>
</div>
<div style={{ padding: 25, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
<div className="row" style={{ alignSelf: 'center', float: 'right', marginRight: 25 }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
</div>
<div style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
);
}
}
src/container/ApprovalMatrix/VisualisasiAM.js 0 → 100644
View file @ b56ef21c
import React, { Component } from 'react';
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import { TextField } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem';
import ApprovalMatrix from "./ApprovalMatrix";
const type = [
{
value: 'KPI',
label: 'KPI',
},
{
value: 'Gatau',
label: 'Gatau',
},
];
export default class PreviewAM extends Component {
constructor(props) {
super(props)
this.state = {
visibleAM: false,
visibleVisual: true
}
}
componentDidMount() {
}
render() {
return (
<div>
{this.state.visibleVisual === true ?
<div style={{ height: this.props.height }}>
<div style={{ height: 199, width: '100%', backgroundColor: '#354960' }} />
<div>
<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 }}>Visualisasi Data</label>
</div>
<div style={{ padding: 25, width: '100%' }}>
<div style={{ width: '100%', padding: 25, backgroundColor: 'white', borderRadius: 6, border: 'solid 1px #c4c4c4'}}>
<label style={{ color: '#4b4b4b', fontSize: '16px', fontWeight: 'bold' }}>Hirarki Persetujuan</label>
<div className="" style={{ width: 250, marginTop: 8, marginBottom: 28 }}>
<TextField
style={{ width: '100%' }}
id="type"
select
label="Tipe Persetujuan"
// value={this.state.periode}
onChange={(e) => null}
>
{type.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>1. John Doe</label>
</div>
</div>
<div className="column-2">
</div>
<div className="column-3">
</div>
<div className="column-4">
</div>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>2. Barbara Rosa</label>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Aneesa Hassan</label>
</div>
</div>
<div className="column-3">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>AND</label>
</div>
</div>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>3. Cole Park</label>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>Levison Robin</label>
</div>
</div>
<div className="column-3">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>OR</label>
</div>
</div>
</div>
<div className="grid grid-4x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<label style={{ color: '#4b4b4b', fontSize: '14px' }}>4. Madison Price</label>
</div>
</div>
<div className="column-2">
</div>
<div className="column-3">
</div>
</div>
</div>
</div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
<div onClick={() => this.setState({ visibleVisual: false, visibleAM: true })} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Kembali</span>
</div>
<div className="row" style={{ float: 'right', marginRight: 25 }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#354960', fontSize: 11 }} >Batal</span>
</div>
<div style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
</div>
: false
}
{this.state.visibleAM && (
<ApprovalMatrix
onClickClose={() => this.setState({ visibleAM: false })}
/>
)}
</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