Skip to content

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

update modal appr matrix

parent 987e37b0
Show whitespace changes
Inline Side-by-side
Showing with 639 additions and 218 deletions
src/container/ApprovalMatrix.js deleted 100644 → 0
View file @ 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';
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 @ f0abe878
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 @ f0abe878
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 @ f0abe878
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 @ f0abe878
......@@ -103,7 +103,7 @@ const arraySide = [
{
img: '',
label: 'Approval Matrix',
path: 'approval',
path: 'approval-matrix',
subItem: null
}
]
......
src/router/homeRoutes.js
View file @ f0abe878
......@@ -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