Commit 09184899 authored by Dida Adams Arizona's avatar Dida Adams Arizona

Merge branch 'rifka' into 'master'

update layout approval matrix

See merge request !30
parents c0a03722 987e37b0
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';
class ApprovalMatrix extends Component {
render() {
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: {
......@@ -36,7 +106,7 @@ class ApprovalMatrix extends Component {
]
const options = {
filter: false,
sort: false,
sort: true,
responsive: "scroll",
print: false,
download: false,
......@@ -47,11 +117,12 @@ class ApprovalMatrix extends Component {
}
return (
<div style={{ flex: 1 }}>
<div style={{ height: 150, width: '100%', backgroundColor: '#354960', padding: 24, paddingTop: 30 }}>
<div style={{ display: 'flex' }}>
<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={{ marginLeft: 110 }}>
<form style={{ }}>
<TextField id="" label="" variant="outlined" size="small" placeholder="Search" style={{ width: 423, backgroundColor: 'white', borderRadius: 6 }}/>
</form>
<div style={{ display: 'flex' }}>
......@@ -60,7 +131,6 @@ class ApprovalMatrix extends Component {
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
marginLeft: 82,
padding: 0
}}
onClick={() => null}
......@@ -111,26 +181,35 @@ class ApprovalMatrix extends Component {
marginLeft: 16,
padding:0
}}
onClick={() => null}
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={{ flex: 1, padding: 20, width: '100%' }}>
<div>
<div style={{ padding: 20, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={data}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
</div>
</Container>
);
}
// }
}
export default ApprovalMatrix;
\ No newline at end of file
// export default 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