Skip to content

T
Tia-dev
Commit 28e04b4b authored by faisalhamdi's avatar faisalhamdi
Browse files
Options

update mr fam

parent 5e3c5933
Hide whitespace changes
Inline Side-by-side
Showing with 42 additions and 24 deletions
src/container/MonthlyReport/FixedAssetsMovementMR.js
View file @ 28e04b4b
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input, Tooltip, withStyles, Snackbar } from '@material-ui/core'; import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, Tooltip, withStyles } from '@material-ui/core';
import MUIDataTable from 'mui-datatables'; import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
import api from '../../api'; import api from '../../api';
import PropagateLoader from "react-spinners/PropagateLoader"
import Images from '../../assets/Images'; import Images from '../../assets/Images';
import ReactTooltip from 'react-tooltip'; import ReactTooltip from 'react-tooltip';
import UploadFile from "../../library/Upload";
import { ExcelRenderer } from 'react-excel-renderer';
import { Alert } from '@material-ui/lab';
import * as R from 'ramda'
const LightTooltip = withStyles((theme) => ({ const LightTooltip = withStyles((theme) => ({
tooltip: { tooltip: {
...@@ -24,6 +18,7 @@ var ct = require("../../library/CustomTable"); ...@@ -24,6 +18,7 @@ var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable3()); const getMuiTheme = () => createMuiTheme(ct.customTable3());
const options = ct.customOptionsFixedColumn(); const options = ct.customOptionsFixedColumn();
const style = { const style = {
position: "sticky", position: "sticky",
left: 0, left: 0,
...@@ -33,14 +28,16 @@ const style = { ...@@ -33,14 +28,16 @@ const style = {
const style2 = { const style2 = {
position: "sticky", position: "sticky",
background: "white", background: "white",
zIndex: 100 zIndex: 100,
top: 0
}; };
export default class FixedAssetsMovementMR extends Component { export default class FixedAssetsMovementMR extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
dataTable: [] dataTable: [],
loading: true
} }
} }
...@@ -48,8 +45,7 @@ export default class FixedAssetsMovementMR extends Component { ...@@ -48,8 +45,7 @@ export default class FixedAssetsMovementMR extends Component {
this.getItemHierarki() this.getItemHierarki()
} }
getItemHierarki() { async getItemHierarki() {
this.setState({ loading: true })
let payload = { let payload = {
"report_id": this.props.report_id, "report_id": this.props.report_id,
"revision": Number(this.props.revision), "revision": Number(this.props.revision),
...@@ -143,12 +139,12 @@ export default class FixedAssetsMovementMR extends Component { ...@@ -143,12 +139,12 @@ export default class FixedAssetsMovementMR extends Component {
} }
render() { render() {
let dataTable2 = this.state.dataTable // let dataTable2 = this.state.dataTable
const columns = [{ const columns = [{
name: "Account", name: "Account",
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300 }}> <TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#1c71b8', width: 300, borderRight: '1px #fff solid' }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell> </TableCell>
), ),
...@@ -187,19 +183,19 @@ export default class FixedAssetsMovementMR extends Component { ...@@ -187,19 +183,19 @@ export default class FixedAssetsMovementMR extends Component {
name: `Month To Date (MTD)`, name: `Month To Date (MTD)`,
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<th style={{ ...style2, color: '#fff', backgroundColor: '#07a7d0', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} > <th style={{ ...style2, color: '#fff', backgroundColor: '#1c71b8', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)", padding: 0 }} >
{/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}> {/* <TableCell style={{ ...style2, top: 0, zIndex: 99, backgroundColor: '#1c71b8', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography> <Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell> */} </TableCell> */}
<div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div> <div style={{ borderBottom: "1px #fff solid", backgroundColor: '#1c71b8', justifyContent: 'center', display: 'flex', alignItems: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 45}}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="grid grid-3x" style={{ ...style2, color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', height: 45, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Master Budget (MB)"}</span> <span>{"Master Budget (MB)"}</span>
</div> </div>
<div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0' }}> <div className="column-2" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, borderRight: "1px #fff solid", backgroundColor: '#07a7d0', height: 45, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Rolling Budget (RB)"}</span> <span>{"Rolling Budget (RB)"}</span>
</div> </div>
<div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#37b5e6' }}> <div className="column-3" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, backgroundColor: '#07a7d0', height: 45, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
<span>{"Actual"}</span> <span>{"Actual"}</span>
</div> </div>
</div> </div>
...@@ -252,7 +248,7 @@ export default class FixedAssetsMovementMR extends Component { ...@@ -252,7 +248,7 @@ export default class FixedAssetsMovementMR extends Component {
options: { options: {
customHeadRender: (columnMeta) => ( customHeadRender: (columnMeta) => (
<th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} > <th style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 13, fontWeight: 1, width: 150, borderRight: "1px solid rgb(255, 255, 255)" }} >
<div style={{ borderBottom: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5 }}>{columnMeta.name}</div> <div style={{ borderLeft: "1px #fff solid", textAlign: 'center', fontSize: 12, fontWeight: 'bold', padding: 5, height: 45, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{columnMeta.name}</div>
<div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}> <div className="grid grid-3x" style={{ ...style2, backgroundColor: '#1c71b8', color: '#fff', fontSize: 12, fontWeight: 'bold', position: "sticky" }}>
<div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6' }}> <div className="column-1" style={{ placeSelf: 'center', textAlign: 'center', padding: 5, border: '1px #fff solid', backgroundColor: '#37b5e6' }}>
<div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}> <div style={{ borderBottom: '1px #fff solid', backgroundColor: '#37b5e6' }}>
...@@ -350,10 +346,10 @@ export default class FixedAssetsMovementMR extends Component { ...@@ -350,10 +346,10 @@ export default class FixedAssetsMovementMR extends Component {
} }
} }
] ]
// let data = [ let data = [
// ["Total Assets", { a: "2", b: "3", c: "4" }, "5", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "11" }], ["Total Assets", { a: "2", b: "3", c: "4" }, "5", { a: "6", b: "7", c: "8", d: "9", e: "10", f: "11" }],
// ["Total Assets", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"] ["Total Assets", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"]
// ] ]
return ( return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}> <div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
...@@ -423,13 +419,35 @@ export default class FixedAssetsMovementMR extends Component { ...@@ -423,13 +419,35 @@ export default class FixedAssetsMovementMR extends Component {
<div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}> <div style={{ marginTop: 20, width: this.props.width - (this.props.open === true ? 400 : 150) }}>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={dataTable2} data={data}
columns={columns} columns={columns}
options={options} options={options}
/> />
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
</div> </div>
<div className="grid grid-2x" style={{ marginTop: 20 }}>
<div className="col-1">
<button
type="button"
onClick={() => this.setState({ loading: true }, () => {
setTimeout(() => {
this.props.onClickClose()
}, 100);
})}
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
>
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Back</Typography>
</div>
</button>
</div>
</div>
</Paper> </Paper>
</div> </div>
</div> </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