Skip to content

T
Tia-dev
Commit ef0e5e82 authored by Dida Adams Arizona's avatar Dida Adams Arizona
Browse files
Options

Merge branch 'rifka' into 'master' 

add preview and visual approval matrix

See merge request !50
parents 79d5557d b56ef21c
Show whitespace changes
Inline Side-by-side
Showing with 333 additions and 87 deletions
src/container/ApprovalMatrix/ApprovalMatrix.js
View file @ ef0e5e82
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,14 +84,26 @@ export default class ApprovalMatrix extends Component { ...@@ -54,14 +84,26 @@ 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={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5 }}>
<img src={Images.searchBlack} style={{ marginRight: 10 }} />
<InputBase
style={{ width: '100%' }}
placeholder="Search"
value={this.state.search}
onChange={(e) => this.handleInputChange(e)}
inputProps={{ 'aria-label': 'naked' }}
/>
</div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<button <button
style={{ style={{
...@@ -108,7 +150,7 @@ export default class ApprovalMatrix extends Component { ...@@ -108,7 +150,7 @@ export default class ApprovalMatrix extends Component {
}} }}
onClick={() => null} onClick={() => null}
> >
<img src={Images.visualisasi} /> <img src={Images.visualisasi} onClick={() => this.setState({ visibleVisual: true, visibleAM: false })} />
</button> </button>
<button <button
style={{ style={{
...@@ -133,6 +175,9 @@ export default class ApprovalMatrix extends Component { ...@@ -133,6 +175,9 @@ export default class ApprovalMatrix extends Component {
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
</div> </div>
</div>
: false
}
{this.state.visibleCreate && ( {this.state.visibleCreate && (
<CreateApprovalMatrix <CreateApprovalMatrix
onClickClose={() => this.setState({ visibleCreate: false })} onClickClose={() => this.setState({ visibleCreate: false })}
...@@ -143,6 +188,11 @@ export default class ApprovalMatrix extends Component { ...@@ -143,6 +188,11 @@ export default class ApprovalMatrix extends Component {
onClickClose={() => this.setState({ visibleEdit: false })} 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 @ ef0e5e82
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 @ ef0e5e82
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