Skip to content

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

Merge branch 'rifka' into 'master' 

add modal apprv matrix

See merge request !35
parents 8febeda9 71ce9818
Show whitespace changes
Inline Side-by-side
Showing with 639 additions and 218 deletions
src/container/ApprovalMatrix.js deleted 100644 → 0
View file @ 8febeda9
import React, { Component } from 'react';
import { Typography } from '@material-ui/core';
import { Container, Row, Col } from "react-bootstrap";
import { makeStyles, createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import TextField from "@material-ui/core/TextField";
import Images from '../assets/Images';
import MUIDataTable from "mui-datatables";
import Modal from '@material-ui/core/Modal';
var ct = require("../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
function rand() {
return Math.round(Math.random() * 20) - 10;
}
function getModalStyle() {
const top = 50 + rand();
const left = 50 + rand();
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: 'absolute',
width: 400,
backgroundColor: theme.palette.background.paper,
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
// class ApprovalMatrix extends Component {
// render() {
export default function ApprovalMatrix() {
const classess = useStyles();
const [modalStyle] = React.useState(getModalStyle);
const [open, setOpen] = React.useState(false);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const showModal = (
<div className="" style={{ marginTop: 100 }}>
<div className="popup-content background-white border-radius">
<div className="popup-panel grid grid-2x">
<div className="col-1" style={{ width: '140%' }}>
<div className="popup-title">
Test
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit" }}>
<button
type="button"
className="btn btn-circle btn-grey"
onClick={() => null}
>
<i className="fa fa-lg fa-times" />
</button>
</div>
</div>
{/* <div>
CONTENT
</div> */}
</div>
</div>
);
const columns = [{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => null}
>
<img src={Images.editCopy} />
</button>
</div >
);
}
}
}, "ID", "Tipe Persetujuan", "Order", "Nama Pemberi Persetujuan", "Operator", "Status"]
const data = [
["", "1", "Yearly", "1", "John Doe", "-", "Aktif"],
["", "2", "Yearly", "2", "John Doe", "-", "Aktif"],
["", "3", "Yearly", "2", "John Doe", "AND", "Aktif"],
["", "4", "Yearly", "2", "John Doe", "AND", "Non Aktif"],
["", "5", "Yearly", "3", "John Doe", "-", "Non Aktif"],
]
const options = {
filter: false,
sort: true,
responsive: "scroll",
print: false,
download: false,
selectableRows: false,
viewColumns: false,
rowsPerPage: 5,
search: false
}
return (
<Container fluid style={{ height: '100vh', padding: 0 }}>
<div style={{ height: '200px', width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}>
<div style={{ }}>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25 }}>
<Typography style={{ paddingTop: 8, paddingBottom: 7, fontSize: '16px', color: 'white' }}>Master Data - Approval Matrix</Typography>
<form style={{ }}>
<TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
</form>
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
padding: 0
}}
onClick={() => null}
>
<img src={Images.template} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.upload} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.download} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.visualisasi} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={handleOpen}
>
<img src={Images.add} />
</button>
</div >
<Modal
open={open}
onClose={handleClose}
aria-labelledby="simple-modal-title"
aria-describedby="simple-modal-description"
>
{showModal}
</Modal>
</div>
</div>
<div style={{ padding: 20, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
</Container>
);
// }
}
// export default ApprovalMatrix;
src/container/ApprovalMatrix/ApprovalMatrix.js 0 → 100644
View file @ 6ae20bb0
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/TextField";
import Images from '../../assets/Images';
import MUIDataTable from "mui-datatables";
import CreateApprovalMatrix from "./CreateApprovalMatrix";
import EditApprovalMatrix from "./EditApprovalMatrix";
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();
export default class ApprovalMatrix extends Component {
constructor(props) {
super(props)
this.state = {
visibleCreate: false,
visibleEdit: false
}
}
componentDidMount() {
}
render() {
const columns = [{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => null}
>
<img src={Images.editCopy} onClick={() => this.setState({ visibleEdit: true })} />
</button>
</div >
);
}
}
}, "ID", "Tipe Persetujuan", "Order", "Nama Pemberi Persetujuan", "Operator", "Status"]
const data = [
["", "1", "Yearly", "1", "John Doe", "-", "Aktif"],
["", "2", "Yearly", "2", "John Doe", "-", "Aktif"],
["", "3", "Yearly", "2", "John Doe", "AND", "Aktif"],
["", "4", "Yearly", "2", "John Doe", "AND", "Non Aktif"],
["", "5", "Yearly", "3", "John Doe", "-", "Non Aktif"],
]
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 }}>Master Data - Approval Matrix</label>
<form style={{ }}>
<TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
</form>
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
padding: 0
}}
onClick={() => null}
>
<img src={Images.template} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.upload} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.download} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
onClick={() => null}
>
<img src={Images.visualisasi} />
</button>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 16,
padding:0
}}
>
<img src={Images.add} onClick={() => this.setState({ visibleCreate: true })} />
</button>
</div >
</div>
<div style={{ padding: 25, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
{this.state.visibleCreate && (
<CreateApprovalMatrix
onClickClose={() => this.setState({ visibleCreate: false })}
/>
)}
{this.state.visibleEdit && (
<EditApprovalMatrix
onClickClose={() => this.setState({ visibleEdit: false })}
/>
)}
</div>
);
}
}
src/container/ApprovalMatrix/CreateApprovalMatrix.js 0 → 100644
View file @ 6ae20bb0
import React, { Component } from 'react';
import { TextField } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem';
const type = [
{
value: 'KPI',
label: 'KPI',
},
{
value: 'Gatau',
label: 'Gatau',
},
];
const approve_by = [
{
value: '1',
label: 'John Doe',
},
{
value: '2',
label: 'John Doe lagi',
},
];
const operator = [
{
value: '1',
label: '-',
},
{
value: '2',
label: 'AND',
},
{
value: '3',
label: 'OR',
},
];
export default class CreateApprovalMatrix extends Component {
render() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Tambah Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="border-bottom" style={{ padding: 20 }}>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%', height: '90%' }}
id="id"
variant="filled"
label="ID"
// value={this.state.periode}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}>
<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>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="order"
label="Order"
// value={this.state.periode}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="approve-by"
select
label="Pemberi Persetujuan"
// value={this.state.periode}
onChange={(e) => null}
>
{approve_by.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="operator"
select
label="Operator"
// value={this.state.periode}
onChange={(e) => null}
>
{operator.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
</div>
<div className="column-2">
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="start-period"
label="Berlaku Mulai"
// value={this.state.periode}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="end-period"
label="Berlaku Hingga"
// value={this.state.periode}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="status"
variant="filled"
label="Aktif"
// value={this.state.periode}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}>
<TextField
style={{ width: '100%' }}
id="max-value"
label="Max Value"
// value={this.state.periode}
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div>
<div className="">
<span style={{ fontSize: 11, fontWeight: 600 }}>Dibuat<span style={{ marginLeft: 20}}> : Admin - 21 Jul 2020, 18:45</span></span>
</div>
<div className="">
<span style={{ fontSize: 11, fontWeight: 'bold' }}>Diubah<span style={{ marginLeft: 17}}> : Admin - 21 Jul 2020, 18:45</span></span>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div 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>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
</div>
);
}
}
src/container/ApprovalMatrix/EditApprovalMatrix.js 0 → 100644
View file @ 6ae20bb0
import React, { Component } from 'react';
import { TextField } from '@material-ui/core';
import MenuItem from '@material-ui/core/MenuItem';
const type = [
{
value: 'KPI',
label: 'KPI',
},
{
value: 'Gatau',
label: 'Gatau',
},
];
const approve_by = [
{
value: '1',
label: 'John Doe',
},
{
value: '2',
label: 'John Doe lagi',
},
];
const operator = [
{
value: '1',
label: '-',
},
{
value: '2',
label: 'AND',
},
{
value: '3',
label: 'OR',
},
];
export default class EditApprovalMatrix extends Component {
render() {
return (
<div className="test app-popup-show" style={{ paddingTop: 100 }}>
<div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
<div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Edit Data</span>
</div>
</div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
<button
type="button"
className="btn btn-circle btn-white"
onClick={() => this.props.onClickClose()}
>
<i className="fa fa-lg fa-times" style={{ color: 'white' }} />
</button>
</div>
</div>
<div className="border-bottom" style={{ padding: 20 }}>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%', height: '90%' }}
id="id"
variant="filled"
label="ID"
value="1"
>
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}>
<TextField
style={{ width: '100%' }}
id="type"
select
label="Tipe Persetujuan"
value="KPI"
onChange={(e) => null}
>
{type.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="order"
variant="standard"
label="Order"
value="1"
>
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="approve-by"
select
label="Pemberi Persetujuan"
value="1"
onChange={(e) => null}
>
{approve_by.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="operator"
select
label="Operator"
value="1"
onChange={(e) => null}
>
{operator.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
</div>
<div className="column-2">
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="start-period"
label="Berlaku Mulai"
value="31 Desember 2020"
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="end-period"
label="Berlaku Hingga"
value="31 Desember 2020"
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
</div>
<div className="grid grid-2x grid-mobile-none gap-15px">
<div className="column-1">
<div className="margin-bottom-20px">
<TextField
style={{ width: '100%' }}
id="status"
variant="filled"
label="Aktif"
value="Aktif"
>
{/* {periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))} */}
</TextField>
</div>
</div>
<div className="column-2">
<div className="margin-bottom-20px" style={{ marginTop: 8 }}>
<TextField
style={{ width: '100%' }}
id="max-value"
label="Max Value"
value="10"
>
</TextField>
</div>
</div>
</div>
<div className="">
<span style={{ fontSize: 11, fontWeight: 600 }}>Dibuat<span style={{ marginLeft: 20}}> : Admin - 21 Jul 2020, 18:45</span></span>
</div>
<div className="">
<span style={{ fontSize: 11, fontWeight: 'bold' }}>Diubah<span style={{ marginLeft: 17}}> : Admin - 21 Jul 2020, 18:45</span></span>
</div>
</div>
<div className="border-top grid grid-2x" style={{ height: 56, backgroundColor: '#f5f5f5', paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1" style={{ alignSelf: 'center' }}>
<div 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>
<div className="column-2" style={{display: 'flex', justifyContent: 'flex-end', alignItems: 'center'}}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor:"pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</div>
</div>
</div>
</div>
);
}
}
src/library/Array.js
View file @ 6ae20bb0
......@@ -103,7 +103,7 @@ const arraySide = [
{
img: '',
label: 'Approval Matrix',
path: 'approval',
path: 'approval-matrix',
subItem: null
}
]
......
src/router/homeRoutes.js
View file @ 6ae20bb0
......@@ -2,7 +2,7 @@ import screen404 from '../container/Screen404'
import Beranda from '../container/Beranda'
import UserRole from '../container/Otorisasi/UserRole'
import User from '../container/Otorisasi/User'
import ApprovalMatrix from '../container/ApprovalMatrix'
import ApprovalMatrix from '../container/ApprovalMatrix/ApprovalMatrix'
import BudgetTahunan from '../container/BudgetTahunan';
import HomePage from '../container/HomePage';
import BalanceSheet from '../container/BudgetTahunan/BalanceSheet';
......@@ -21,7 +21,7 @@ const routes = [
main: UserRole
},
{
path: "/home/approval",
path: "/home/approval-matrix",
main: ApprovalMatrix
},
{
......
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