Skip to content

T
Tia-dev
Commit 1222eb09 authored by Deni Rinaldi's avatar Deni Rinaldi
Browse files
Options

Merge branch 'riri' into 'master' 

Riri

See merge request !152
parents 1a4f1e92 effb3601
Hide whitespace changes
Inline Side-by-side
Showing with 578 additions and 181 deletions
src/container/BudgetTahunan.js
View file @ 1222eb09
...@@ -3,6 +3,7 @@ import { Typography, Paper, TextField, MenuItem } from '@material-ui/core'; ...@@ -3,6 +3,7 @@ import { Typography, Paper, TextField, MenuItem } from '@material-ui/core';
import MUIDataTable from 'mui-datatables'; import MUIDataTable from 'mui-datatables';
import Images from '../assets/Images'; import Images from '../assets/Images';
import BalanceSheet from './BudgetTahunan/BalanceSheet'; import BalanceSheet from './BudgetTahunan/BalanceSheet';
import ProfitLoss from './BudgetTahunan/ProfitLoss';
export default class BudgetTahunan extends Component { export default class BudgetTahunan extends Component {
constructor(props) { constructor(props) {
...@@ -12,7 +13,8 @@ export default class BudgetTahunan extends Component { ...@@ -12,7 +13,8 @@ export default class BudgetTahunan extends Component {
perusahaan: 'TAP Group', perusahaan: 'TAP Group',
revisi: '0', revisi: '0',
visibleBudgetTahunan: true, visibleBudgetTahunan: true,
visibleBS: false visibleBS: false,
visiblePL: false
} }
} }
...@@ -26,6 +28,15 @@ export default class BudgetTahunan extends Component { ...@@ -26,6 +28,15 @@ export default class BudgetTahunan extends Component {
visibleFAM: false, visibleFAM: false,
visibleTP: false visibleTP: false
}) })
} else if (item === 'Profit & Loss') {
this.setState({
visibleBudgetTahunan: false,
visibleBS: false,
visiblePL: true,
visibleCAT: false,
visibleFAM: false,
visibleTP: false
})
} }
} }
...@@ -217,6 +228,9 @@ export default class BudgetTahunan extends Component { ...@@ -217,6 +228,9 @@ export default class BudgetTahunan extends Component {
{this.state.visibleBS && ( {this.state.visibleBS && (
<BalanceSheet /> <BalanceSheet />
)} )}
{this.state.visiblePL && (
<ProfitLoss />
)}
</div > </div >
); );
} }
......
src/container/BudgetTahunan/ProfitLoss.js 0 → 100644
View file @ 1222eb09
import React, { Component } from 'react';
import { Typography, Paper, createMuiTheme, MuiThemeProvider, TableCell, FormControlLabel, TextField, Input } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import NumberFormat from 'react-number-format';
var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptionsFixedColumn();
const style = {
position: "sticky",
left: 0,
background: "white",
zIndex: 101,
};
const style2 = {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
};
export default class ProfitLoss extends Component {
render() {
const columns = [{
name: "Account",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style, top: 0, zIndex: 102, backgroundColor: '#354960', width: 388 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'left' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({ style }),
customBodyRender: (val, tableMeta) => {
return (
<div style={{ width: 388 }}>
{tableMeta.rowIndex == 0 ?
<span style={{ fontSize: 12, fontWeight: 'bold' }}>{val}</span>
:
tableMeta.rowIndex == 1 || tableMeta.rowIndex == 4 || tableMeta.rowIndex == 7 ?
<span style={{ fontSize: 12, marginLeft: 10 }}>{val}</span> :
<span style={{ fontSize: 12, marginLeft: 20 }}>{val}</span>
}
</div>
)
}
}
}, {
name: "Keterangan",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style2, top: 0, zIndex: 102, backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({
style: {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
}
})
}
},{
name: "31 Dec 2020 Actual",
options: {
customHeadRender: (columnMeta) => (
<TableCell key={columnMeta.index} style={{ ...style2, top: 0, zIndex: 102, backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
setCellProps: () => ({
style: {
position: "sticky",
left: 420,
background: "white",
zIndex: 101
}
})
}
}, {
name: "January 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (value, tableMeta, updateValue) => {
return (
<div style={{ textAlign: 'right' }}>
{tableMeta.rowIndex === 2 || tableMeta.rowIndex === 3 ?
<div style={{ flex: 1 }}>
<FormControlLabel
style={{ margin: 0 }}
value={value}
control={
// <Input
// value={this.formatValue(value)}
// style={{}}
// inputProps={{
// style: {
// color: "#5198ea",
// fontSize: 12,
// textAlign: 'right'
// }
// }}
// disableUnderline={true}
// inputStyle={{ color: 'red' }}
// />
<NumberFormat
thousandSeparator={true}
style={{ color: "#5198ea", fontSize: 12, textAlign: 'right', borderColor: 'transparent', margin: 0, width: 96, backgroundColor: 'transparent' }}
type="text"
placeholder=""
value={value}
/>
}
onChange={event => updateValue(event.target.value)}
/>
</div> :
<span style={{ fontSize: 12, textAlign: 'right' }}>{value === "" ? "-" : value}</span>
}
</div>
)
}
}
}, {
name: "February 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "March 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "April 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "May 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "June 2021",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2021 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2022 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}, {
name: "31 Dec 2023 Total",
options: {
customHeadRender: (columnMeta) => (
<TableCell style={{ backgroundColor: '#354960', width: 96 }}>
<Typography style={{ color: 'white', fontSize: 12, fontWeight: 'bold', textAlign: 'center' }}>{columnMeta.name}</Typography>
</TableCell>
),
customBodyRender: (val) => {
return (
<div style={{ width: 96 }}>
{val}
</div>
)
}
}
}
]
const dataTable = [
["Ravenue", "", "11,247,249", "10,702,196"],
["Unit Bisnis/ Brand/ SubCo 1", "", "2,647,647", "2,058,898"],
["Sales Volume","Subco1", "1,464,571", "729,743"],
["Sales Price","Subco1", "1", "6"],
["Unit Bisnis/ Brand/ SubCo 2", "", "-", "-"],
["Sales Volume","Subco2", "-", "-"],
["Sales Price","Subco2", "-", "-"],
["Unit Bisnis/ Brand/ SubCo 3", "", "-", "-"],
["Sales Volume","Subco3", "-", "-"],
["Sales Price","Subco3", "-", "-"],
]
return (
<div style={{ height: this.props.height, backgroundColor: '#f8f8f8', marginBottom: 100, minHeight: 1000 }}>
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Pengajuan Budget Tahunan</Typography>
</div>
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10, paddingBottom: 20 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Budget Tahunan - Profit & Loss</Typography>
</div>
<div style={{ padding: 20 }}>
<div>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>PT. XYZ</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>Periode : 2021</Typography>
<Typography style={{ fontSize: '11px', color: '#4b4b4b' }}>in IDR mn</Typography>
</div>
<div style={{ marginTop: 20, width: '100%' }}>
<MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable
data={dataTable}
columns={columns}
options={options}
/>
</MuiThemeProvider>
</div>
</div>
<div className="grid grid-2x">
<div className="col-1">
<div style={{ backgroundColor: '#019ce5', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Kembali</Typography>
</div>
</div>
<div className="col-2" style={{ display: 'flex', justifyContent: 'flex-end', maxWidth: '100%'}}>
<div style={{ backgroundColor: '#fff', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960', marginRight: 20 }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Batal</Typography>
</div>
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Simpan</Typography>
</div>
</div>
</div>
</Paper>
</div>
</div>
);
}
}
src/container/MasterData/ReportItems.js
View file @ 1222eb09
...@@ -105,7 +105,7 @@ export default class ReportItems extends Component { ...@@ -105,7 +105,7 @@ export default class ReportItems extends Component {
let columns = [ let columns = [
"Data Ke-", "Data Ke-",
{ {
name: "Jenis Laporan", name: "Report Type",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -130,7 +130,7 @@ export default class ReportItems extends Component { ...@@ -130,7 +130,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Perusahaan", name: "Company Name",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -180,7 +180,7 @@ export default class ReportItems extends Component { ...@@ -180,7 +180,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Deskripsi", name: "Description",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -280,7 +280,7 @@ export default class ReportItems extends Component { ...@@ -280,7 +280,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Tipe Data", name: "Data Type",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -330,7 +330,7 @@ export default class ReportItems extends Component { ...@@ -330,7 +330,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Nilai Seharusnya", name: "True Value",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -355,7 +355,7 @@ export default class ReportItems extends Component { ...@@ -355,7 +355,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Kondisi Jika Salah", name: "False Condition",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -380,7 +380,7 @@ export default class ReportItems extends Component { ...@@ -380,7 +380,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Berlaku Mulai", name: "Valid From",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -405,7 +405,7 @@ export default class ReportItems extends Component { ...@@ -405,7 +405,7 @@ export default class ReportItems extends Component {
} }
}, },
{ {
name: "Berakhir Hingga", name: "Valid To",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
let check = null let check = null
...@@ -550,7 +550,7 @@ export default class ReportItems extends Component { ...@@ -550,7 +550,7 @@ export default class ReportItems extends Component {
let url = window.URL.createObjectURL(res); let url = window.URL.createObjectURL(res);
let a = document.createElement('a'); let a = document.createElement('a');
a.href = url; a.href = url;
a.download = 'Item Report.xlsx'; a.download = 'Report Items.xlsx';
a.click(); a.click();
} }
} }
...@@ -621,31 +621,31 @@ export default class ReportItems extends Component { ...@@ -621,31 +621,31 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
} }
}, },
{ {
name: "Jenis Laporan", name: "Report Type",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
} }
}, },
{ {
name: "Perusahaan", name: "Company",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -657,19 +657,19 @@ export default class ReportItems extends Component { ...@@ -657,19 +657,19 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
} }
}, },
{ {
name: "Deskripsi", name: "Description",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -681,7 +681,7 @@ export default class ReportItems extends Component { ...@@ -681,7 +681,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -693,7 +693,7 @@ export default class ReportItems extends Component { ...@@ -693,7 +693,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -705,19 +705,19 @@ export default class ReportItems extends Component { ...@@ -705,19 +705,19 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
} }
}, },
{ {
name: "Tipe Data", name: "Data Type",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -729,7 +729,7 @@ export default class ReportItems extends Component { ...@@ -729,7 +729,7 @@ export default class ReportItems extends Component {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<span style={{ color: tableMeta.rowData[10] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span> <span style={{ color: tableMeta.rowData[10] === "active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
</div > </div >
); );
} }
...@@ -756,7 +756,7 @@ export default class ReportItems extends Component { ...@@ -756,7 +756,7 @@ export default class ReportItems extends Component {
{this.state.itemReport === true ? {this.state.itemReport === true ?
<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', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Item Laporan</label> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - Report Items</label>
<div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}> <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
<img src={Images.searchBlack} style={{ marginRight: 10 }} /> <img src={Images.searchBlack} style={{ marginRight: 10 }} />
<InputBase <InputBase
...@@ -810,7 +810,7 @@ export default class ReportItems extends Component { ...@@ -810,7 +810,7 @@ export default class ReportItems extends Component {
</button> </button>
</a> </a>
<ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" /> <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
<a data-tip={'Visualisasi'} data-for="visualisasi"> <a data-tip={'Visualization'} data-for="visualisasi">
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
...@@ -824,7 +824,7 @@ export default class ReportItems extends Component { ...@@ -824,7 +824,7 @@ export default class ReportItems extends Component {
</button> </button>
</a> </a>
<ReactTooltip border={true} id="visualisasi" place="bottom" type="light" effect="solid" /> <ReactTooltip border={true} id="visualisasi" place="bottom" type="light" effect="solid" />
<a data-tip={'Tambah'} data-for="tambah"> <a data-tip={'Add'} data-for="tambah">
<button <button
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
...@@ -857,49 +857,44 @@ export default class ReportItems extends Component { ...@@ -857,49 +857,44 @@ export default class ReportItems extends Component {
onClickClose={() => this.setState({ visualisasi: false, itemReport: true })} onClickClose={() => this.setState({ visualisasi: false, itemReport: true })}
height={this.props.height} height={this.props.height}
/> />
: :
<div style={{ height: this.props.height }}> <div>
<div style={{ height: 199, width: '100%' }} className={"main-color"} /> <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
<div> <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
<div> </div>
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}> <div style={{ padding: 25 }}>
<label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label> {this.state.dataLoaded && (
</div> <MuiThemeProvider theme={getMuiTheme()}>
<div style={{ padding: 25 }}> <MUIDataTable
{this.state.dataLoaded && ( theme={getMuiTheme()}
<MuiThemeProvider theme={getMuiTheme()}> data={this.state.rows}
<MUIDataTable columns={this.state.cols}
theme={getMuiTheme()} options={options}
data={this.state.rows} />
columns={this.state.cols} </MuiThemeProvider>
options={options} )}
/> </div>
</MuiThemeProvider> <div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
)} <button
</div> type="button"
<div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}> onClick={() => this.setState({ itemReport: true })}
<button style={{ marginRight: 20 }}
type="button" >
onClick={() => this.setState({ itemReport: true })} <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
style={{ marginRight: 20 }} <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
>
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
</div>
</button>
<button
type="button"
onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : this.uploadReportItems()}
style={{}}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div>
</div> </div>
</div> </button>
<button
type="button"
onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : this.uploadReportItems()}
style={{}}
>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
</div>
</button>
</div> </div>
</div>
} }
{this.state.add && ( {this.state.add && (
<CreateReportItems <CreateReportItems
......
src/container/MasterData/formReportItems/CreateReportItems.js
View file @ 1222eb09
import React, { Component } from 'react'; import React, { Component } from 'react';
import { TextField, Typography } from '@material-ui/core'; import { TextField, Typography, Snackbar, withStyles } from '@material-ui/core';
import * as R from 'ramda'; import * as R from 'ramda';
import api from '../../../api'; import api from '../../../api';
import Autocomplete from '@material-ui/lab/Autocomplete'; import Autocomplete from '@material-ui/lab/Autocomplete';
...@@ -7,6 +7,9 @@ import { titleCase } from '../../../library/Utils'; ...@@ -7,6 +7,9 @@ import { titleCase } from '../../../library/Utils';
import format from "date-fns/format"; import format from "date-fns/format";
import { DatePicker } from '@material-ui/pickers'; import { DatePicker } from '@material-ui/pickers';
import Images from '../../../assets/Images'; import Images from '../../../assets/Images';
import MuiAlert from '@material-ui/lab/Alert';
const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
export default class CreateReportItems extends Component { export default class CreateReportItems extends Component {
constructor(props) { constructor(props) {
...@@ -53,7 +56,10 @@ export default class CreateReportItems extends Component { ...@@ -53,7 +56,10 @@ export default class CreateReportItems extends Component {
disabledFormula: true, disabledFormula: true,
disabledCondt: true, disabledCondt: true,
disabledValue: true, disabledValue: true,
options: ['WARNING', 'STOPPER'] options: ['WARNING', 'STOPPER'],
alert: false,
tipeAlert: '',
messageAlert: ''
} }
} }
...@@ -141,17 +147,17 @@ export default class CreateReportItems extends Component { ...@@ -141,17 +147,17 @@ export default class CreateReportItems extends Component {
validasi() { validasi() {
// alert('coba ya') // alert('coba ya')
if (R.isNil(this.state.reportType)) { if (R.isNil(this.state.reportType)) {
this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Jenis Laporan Harus Diisi'}) this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report type cannot be empty.'})
} else if (R.isNil(this.state.company)){ } else if (R.isNil(this.state.company)){
this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Perusahaan Harus Diisi'}) this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company cannot be empty.'})
} else if (R.isEmpty(this.state.order)) { } else if (R.isEmpty(this.state.order)) {
this.setState({ errorOrder: true, msgErrorOrder: 'Order Harus Diisi' }) this.setState({ errorOrder: true, msgErrorOrder: 'Order cannot be empty.' })
} }
else if (R.isEmpty(this.state.description)) { else if (R.isEmpty(this.state.description)) {
this.setState({ errorDesc: true, msgErrorDesc: 'Deskripsi Harus Diisi' }) this.setState({ errorDesc: true, msgErrorDesc: 'Description cannot be empty.' })
} }
else if (R.isNil(this.state.InputType)) { else if (R.isNil(this.state.InputType)) {
this.setState({ errorTipeData: true, msgErrorTipeData: 'Tipe Data Harus Diisi' }) this.setState({ errorTipeData: true, msgErrorTipeData: 'Data type cannot be empty' })
} }
else if (this.state.disabledFormula === false && R.isEmpty(this.state.formula)) { else if (this.state.disabledFormula === false && R.isEmpty(this.state.formula)) {
this.setState({ errorFormula: true, msgErrorFormula: 'Formula Harus Diisi' }) this.setState({ errorFormula: true, msgErrorFormula: 'Formula Harus Diisi' })
...@@ -196,22 +202,28 @@ export default class CreateReportItems extends Component { ...@@ -196,22 +202,28 @@ export default class CreateReportItems extends Component {
getInputType() { getInputType() {
api.create().getInputType().then((response) => { api.create().getInputType().then((response) => {
console.log(response.data) // console.log(response.data)
if (response.data.status === 'success') { if(response.data) {
let data = response.data.data
let inputData = data.map((item) => { if (response.data.status === 'success') {
return { let data = response.data.data
type_report_id: item.type_report_id, let inputData = data.map((item) => {
type_report_name: item.type_report_name return {
} type_report_id: item.type_report_id,
}) type_report_name: item.type_report_name
let defaultProps = { }
options: inputData, })
getOptionLabel: (option) => titleCase(option.type_report_name), let defaultProps = {
}; options: inputData,
this.setState({ listInputType: defaultProps, inputData: response.data.data }) getOptionLabel: (option) => titleCase(option.type_report_name),
};
this.setState({ listInputType: defaultProps, inputData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
// alert(response.data.message)
}
} else { } else {
alert(response.data.message) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
} }
}) })
} }
...@@ -219,21 +231,30 @@ export default class CreateReportItems extends Component { ...@@ -219,21 +231,30 @@ export default class CreateReportItems extends Component {
getPerusahaan() { getPerusahaan() {
api.create().getPerusahaanActive().then((response) => { api.create().getPerusahaanActive().then((response) => {
// console.log(response) // console.log(response)
if (response.data.status === 'success') { if (response.data) {
let data = response.data.data if (response.data.status === 'success') {
let companyData = data.map((item) => { let data = response.data.data
return { let companyData = data.map((item) => {
company_id: item.company_id, return {
company_name: item.company_name company_id: item.company_id,
} company_name: item.company_name
}) }
let defaultProps = { })
options: companyData, companyData.push({
getOptionLabel: (option) => titleCase(option.company_name), company_id: 0,
}; company_name: 'Default'
this.setState({ listCompany: defaultProps, companyData: response.data.data }) })
let typeProps = {
options: companyData.sort((a, b) => a.company_id - b.company_id),
getOptionLabel: (option) => option.company_name,
};
this.setState({ listCompany: typeProps, companyData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
// alert(response.data.message)
}
} else { } else {
alert(response.data.message) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
} }
}) })
} }
...@@ -241,21 +262,26 @@ export default class CreateReportItems extends Component { ...@@ -241,21 +262,26 @@ export default class CreateReportItems extends Component {
getReportType() { getReportType() {
api.create().getReportType().then((response) => { api.create().getReportType().then((response) => {
// console.log(response) // console.log(response)
if (response.data.status === 'success') { if (response.data) {
let data = response.data.data if (response.data.status === 'success') {
let reportTypeData = data.map((item) => { let data = response.data.data
return { let reportTypeData = data.map((item) => {
report_id: item.report_id, return {
report_name: item.report_name, report_id: item.report_id,
} report_name: item.report_name,
}) }
let defaultProps = { })
options: reportTypeData, let defaultProps = {
getOptionLabel: (option) => titleCase(option.report_name), options: reportTypeData,
}; getOptionLabel: (option) => titleCase(option.report_name),
this.setState({ listReportType: defaultProps, reportTypeData: response.data.data }) };
this.setState({ listReportType: defaultProps, reportTypeData: response.data.data })
} else {
// alert(response.data.message)
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
}
} else { } else {
alert(response.data.message) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
} }
}) })
} }
...@@ -267,22 +293,28 @@ export default class CreateReportItems extends Component { ...@@ -267,22 +293,28 @@ export default class CreateReportItems extends Component {
"company_id": this.state.company.company_id "company_id": this.state.company.company_id
} }
api.create().getReportParent(payload).then((response) => { api.create().getReportParent(payload).then((response) => {
console.log(response) // console.log(response)
if (response.data.status === 'success') { if (response.data) {
let data = response.data.data
let parentData = data.map((item) => { if (response.data.status === 'success') {
return { let data = response.data.data
item_report_id: item.item_report_id, let parentData = data.map((item) => {
description: item.description return {
} item_report_id: item.item_report_id,
}) description: item.description
let defaultProps = { }
options: parentData, })
getOptionLabel: (option) => titleCase(option.description), let defaultProps = {
}; options: parentData,
this.setState({ listParent: defaultProps, parentData: response.data.data }) getOptionLabel: (option) => titleCase(option.description),
};
this.setState({ listParent: defaultProps, parentData: response.data.data })
} else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
// alert(response.data.message)
}
} else { } else {
alert(response.data.message) this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
} }
}) })
} }
...@@ -314,7 +346,7 @@ export default class CreateReportItems extends Component { ...@@ -314,7 +346,7 @@ export default class CreateReportItems extends Component {
<div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}> <div className="popup-panel grid grid-2x main-color" style={{ height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
<div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}> <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
<div className="popup-title"> <div className="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Tambah Data</span> <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Add Data</span>
</div> </div>
</div> </div>
<div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}> <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
...@@ -327,6 +359,11 @@ export default class CreateReportItems extends Component { ...@@ -327,6 +359,11 @@ export default class CreateReportItems extends Component {
</button> </button>
</div> </div>
</div> </div>
<Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
<Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
{this.state.messageAlert}
</Alert>
</Snackbar>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}> <div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingLeft: 20, paddingRight: 20 }}>
<div className="column-1"> <div className="column-1">
...@@ -362,7 +399,7 @@ export default class CreateReportItems extends Component { ...@@ -362,7 +399,7 @@ export default class CreateReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Jenis Laporan" label="Report Type"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -390,7 +427,7 @@ export default class CreateReportItems extends Component { ...@@ -390,7 +427,7 @@ export default class CreateReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Perusahaan" label="Company"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -444,7 +481,7 @@ export default class CreateReportItems extends Component { ...@@ -444,7 +481,7 @@ export default class CreateReportItems extends Component {
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="description" id="description"
label="Deskripsi" label="Description"
name="description" name="description"
value={this.state.description} value={this.state.description}
error={this.state.errorDesc} error={this.state.errorDesc}
...@@ -587,7 +624,7 @@ export default class CreateReportItems extends Component { ...@@ -587,7 +624,7 @@ export default class CreateReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Tipe Data" label="Data Type"
error={this.state.errorTipeData} error={this.state.errorTipeData}
helperText={this.state.msgErrorTipeData} helperText={this.state.msgErrorTipeData}
InputLabelProps={{ InputLabelProps={{
...@@ -642,7 +679,7 @@ export default class CreateReportItems extends Component { ...@@ -642,7 +679,7 @@ export default class CreateReportItems extends Component {
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="realVal" id="realVal"
label="Nilai Seharusnya" label="True Value"
name="realVal" name="realVal"
disabled={this.state.disabledValue} disabled={this.state.disabledValue}
value={this.state.realVal} value={this.state.realVal}
...@@ -679,7 +716,7 @@ export default class CreateReportItems extends Component { ...@@ -679,7 +716,7 @@ export default class CreateReportItems extends Component {
<TextField {...params} <TextField {...params}
error={this.state.errorCondition} error={this.state.errorCondition}
helperText={this.state.msgErrorCondition} helperText={this.state.msgErrorCondition}
label="Kondisi Jika Salah" label="False Condition"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -700,7 +737,7 @@ export default class CreateReportItems extends Component { ...@@ -700,7 +737,7 @@ export default class CreateReportItems extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Valid From"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.startDate == "" ? null : this.state.startDate} value={this.state.startDate == "" ? null : this.state.startDate}
error={this.state.errorStartDate} error={this.state.errorStartDate}
...@@ -732,7 +769,7 @@ export default class CreateReportItems extends Component { ...@@ -732,7 +769,7 @@ export default class CreateReportItems extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="Valid To"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.endDate == "" ? null : this.state.endDate} value={this.state.endDate == "" ? null : this.state.endDate}
error={this.state.errorEndDate} error={this.state.errorEndDate}
...@@ -767,7 +804,7 @@ export default class CreateReportItems extends Component { ...@@ -767,7 +804,7 @@ export default class CreateReportItems extends Component {
<div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ backgroundColor: '#e8e8e8', padding: 10, borderRadius: 5 }}>
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
value={'Aktif'} defaultValue={"active"}
id="status" id="status"
label="Status" label="Status"
disabled disabled
...@@ -793,10 +830,10 @@ export default class CreateReportItems extends Component { ...@@ -793,10 +830,10 @@ export default class CreateReportItems extends Component {
<div className="column-1"> <div className="column-1">
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11 }}>Dibuat :</Typography> <Typography style={{ fontSize: 11 }}>Created By :</Typography>
</div> </div>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ fontSize: 11 }}>Diubah :</Typography> <Typography style={{ fontSize: 11 }}>Updated By :</Typography>
</div> </div>
</div> </div>
</div> </div>
...@@ -809,7 +846,7 @@ export default class CreateReportItems extends Component { ...@@ -809,7 +846,7 @@ export default class CreateReportItems extends Component {
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
</div> </div>
</button> </button>
</div> </div>
...@@ -819,7 +856,7 @@ export default class CreateReportItems extends Component { ...@@ -819,7 +856,7 @@ export default class CreateReportItems extends Component {
onClick={() => this.validasi()} onClick={() => this.validasi()}
> >
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
</div> </div>
</button> </button>
</div> </div>
......
src/container/MasterData/formReportItems/EditReportItems.js
View file @ 1222eb09
...@@ -128,15 +128,15 @@ export default class EditReportItems extends Component { ...@@ -128,15 +128,15 @@ export default class EditReportItems extends Component {
validasi() { validasi() {
// alert('coba ya') // alert('coba ya')
if (R.isNil(this.state.reportType)){ if (R.isNil(this.state.reportType)){
this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Jenis Laporan Harus Diisi'}) this.setState({errorJenisLaporan: true, msgErrorJenisLaporan: 'Report type cannot be empty'})
} else if (R.isNil(this.state.company)){ } else if (R.isNil(this.state.company)){
this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Perusahaan Harus Diisi'}) this.setState({ errorPerusahaan: true, msgErrorPerusahaan: 'Company cannot be empty'})
} else if (R.isEmpty(this.state.tempData.order)) { } else if (R.isEmpty(this.state.tempData.order)) {
this.setState({ errorOrder: true, msgErrorOrder: 'Order Harus Diisi' }) this.setState({ errorOrder: true, msgErrorOrder: 'Order cannot be empty.' })
} else if (R.isEmpty(this.state.tempData.description)) { } else if (R.isEmpty(this.state.tempData.description)) {
this.setState({ errorDesc: true, msgErrorDesc: 'Deskripsi Harus Diisi' }) this.setState({ errorDesc: true, msgErrorDesc: 'Description cannot be empty.' })
} else if (R.isNil(this.state.InputType)) { } else if (R.isNil(this.state.InputType)) {
this.setState({ errorTipeData: true, msgErrorTipeData: 'Tipe Data Harus Diisi' }) this.setState({ errorTipeData: true, msgErrorTipeData: 'Data type cannot be empty' })
} else if ((this.state.InputType.type_report_name === 'Formula' && R.isEmpty(this.state.tempData.formula)) || (this.state.InputType.type_report_name === 'Validation' && R.isEmpty(this.state.tempData.formula))) { } else if ((this.state.InputType.type_report_name === 'Formula' && R.isEmpty(this.state.tempData.formula)) || (this.state.InputType.type_report_name === 'Validation' && R.isEmpty(this.state.tempData.formula))) {
this.setState({ errorFormula: true, msgErrorFormula: 'Formula Harus Diisi' }) this.setState({ errorFormula: true, msgErrorFormula: 'Formula Harus Diisi' })
} else if (this.state.InputType.type_report_name === 'Validation' && R.isEmpty(this.state.tempData.condition_it_should_be)) { } else if (this.state.InputType.type_report_name === 'Validation' && R.isEmpty(this.state.tempData.condition_it_should_be)) {
...@@ -179,8 +179,14 @@ export default class EditReportItems extends Component { ...@@ -179,8 +179,14 @@ export default class EditReportItems extends Component {
api.create().getDetailReportItems(this.props.data[1]).then((response) => { api.create().getDetailReportItems(this.props.data[1]).then((response) => {
if (response.data) { if (response.data) {
if (response.data.status === 'success') { if (response.data.status === 'success') {
this.setState({ tempData: response.data.data }, () => this.getInputType(), this.getPerusahaan(), this.getReportType(),) let data = response.data.data
console.log(response.data.data) this.setState({
tempData: response.data.data,
getCompanyID: data.company_id
}, () => this.getInputType(),
this.getPerusahaan(),
this.getReportType(),)
console.log(response.data.data)
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
} }
...@@ -230,13 +236,17 @@ export default class EditReportItems extends Component { ...@@ -230,13 +236,17 @@ export default class EditReportItems extends Component {
company_name: item.company_name company_name: item.company_name
} }
}) })
companyData.push({
company_id: 0,
company_name: 'Default'
})
let index = companyData.sort((a, b) => a.company_id - b.company_id).findIndex((val) => val.company_id == this.state.getCompanyID)
let defaultProps = { let defaultProps = {
options: companyData, options: companyData,
getOptionLabel: (option) => titleCase(option.company_name), getOptionLabel: (option) => option.company_name,
}; };
// let index = companyData.findIndex((val) => val.company_id === this.state.tempData.company_id)
let index = companyData.findIndex((val) => val.company_id === this.state.tempData.company_id) this.setState({ listCompany: defaultProps, companyData: response.data.data, company: index === -1 ? null : companyData[index] }, () => this.getParent())
this.setState({ listCompany: defaultProps, company: index === -1 ? null : companyData[index] }, () => this.getParent())
} else { } else {
this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' })
} }
...@@ -384,7 +394,7 @@ export default class EditReportItems extends Component { ...@@ -384,7 +394,7 @@ export default class EditReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Jenis Laporan" label="Report Type"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -411,7 +421,7 @@ export default class EditReportItems extends Component { ...@@ -411,7 +421,7 @@ export default class EditReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Perusahaan" label="Company"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -464,7 +474,7 @@ export default class EditReportItems extends Component { ...@@ -464,7 +474,7 @@ export default class EditReportItems extends Component {
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="description" id="description"
label="Deskripsi" label="Description"
name="description" name="description"
error={this.state.errorDesc} error={this.state.errorDesc}
helperText={this.state.msgErrorDesc} helperText={this.state.msgErrorDesc}
...@@ -581,7 +591,7 @@ export default class EditReportItems extends Component { ...@@ -581,7 +591,7 @@ export default class EditReportItems extends Component {
debug debug
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Tipe Data" label="Data Type"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -633,7 +643,7 @@ export default class EditReportItems extends Component { ...@@ -633,7 +643,7 @@ export default class EditReportItems extends Component {
<TextField <TextField
style={{ width: '100%' }} style={{ width: '100%' }}
id="condition_it_should_be" id="condition_it_should_be"
label="Nilai Seharusnya" label="True Value"
error={this.state.errorRV} error={this.state.errorRV}
helperText={this.state.msgErrorRV} helperText={this.state.msgErrorRV}
disabled={this.state.InputType == null ? true : (this.state.InputType.type_report_name === 'Validation' ? false : true)} disabled={this.state.InputType == null ? true : (this.state.InputType.type_report_name === 'Validation' ? false : true)}
...@@ -668,7 +678,7 @@ export default class EditReportItems extends Component { ...@@ -668,7 +678,7 @@ export default class EditReportItems extends Component {
options={this.state.options} options={this.state.options}
renderInput={(params) => renderInput={(params) =>
<TextField {...params} <TextField {...params}
label="Kondisi Jika Salah" label="False Condition"
InputLabelProps={{ InputLabelProps={{
style: { style: {
fontSize: 11, fontSize: 11,
...@@ -690,7 +700,7 @@ export default class EditReportItems extends Component { ...@@ -690,7 +700,7 @@ export default class EditReportItems extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="startDate" id="startDate"
label="Berlaku Mulai" label="Valid From"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData === null ? null : this.state.tempData.start_date} value={this.state.tempData === null ? null : this.state.tempData.start_date}
error={this.state.errorStartDate} error={this.state.errorStartDate}
...@@ -699,6 +709,19 @@ export default class EditReportItems extends Component { ...@@ -699,6 +709,19 @@ export default class EditReportItems extends Component {
KeyboardButtonProps={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
}} }}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontFamily: 'Nunito Sans, sans-serif',
}
}}
style={{ padding: 0, margin: 0, width: '100%' }} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
</div> </div>
...@@ -708,7 +731,7 @@ export default class EditReportItems extends Component { ...@@ -708,7 +731,7 @@ export default class EditReportItems extends Component {
<DatePicker <DatePicker
margin="normal" margin="normal"
id="endDate" id="endDate"
label="Berlaku Hingga" label="Valid To"
format="dd MMMM yyyy" format="dd MMMM yyyy"
value={this.state.tempData === null ? null : this.state.tempData.end_date} value={this.state.tempData === null ? null : this.state.tempData.end_date}
error={this.state.errorEndDate} error={this.state.errorEndDate}
...@@ -718,6 +741,19 @@ export default class EditReportItems extends Component { ...@@ -718,6 +741,19 @@ export default class EditReportItems extends Component {
KeyboardButtonProps={{ KeyboardButtonProps={{
'aria-label': 'change date', 'aria-label': 'change date',
}} }}
inputProps={{
style: {
fontSize: 11,
fontFamily: 'Nunito Sans, sans-serif',
}
}}
InputLabelProps={{
style: {
fontSize: 11,
color: '#7e8085',
fontFamily: 'Nunito Sans, sans-serif',
}
}}
style={{ padding: 0, margin: 0, width: '100%' }} style={{ padding: 0, margin: 0, width: '100%' }}
/> />
...@@ -750,18 +786,14 @@ export default class EditReportItems extends Component { ...@@ -750,18 +786,14 @@ export default class EditReportItems extends Component {
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-2x grid-mobile-none gap-15px" style={{ paddingBottom: 20, paddingLeft: 20, paddingRight: 20 }}> <div className="margin-top-10px" style={{ padding: 20}}>
<div className="column-1"> <div style={{ display: 'flex' }}>
<div className="margin-top-10px" style={{ padding: 10, borderRadius: 5 }}> <Typography style={{ fontSize: 11, width: '13%' }}>Created By</Typography>
<div style={{ display: 'flex' }}> <Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.created}</Typography>
<Typography style={{ fontSize: 11, width: '20%' }}>Dibuat</Typography> </div>
<Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.created}</Typography> <div style={{ display: 'flex' }}>
</div> <Typography style={{ fontSize: 11, width: '13%' }}>Updated By</Typography>
<div style={{ display: 'flex' }}> <Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.updated}</Typography>
<Typography style={{ fontSize: 11, width: '20%' }}>Diubah</Typography>
<Typography style={{ fontSize: 11 }}>: {this.state.tempData === null ? "" : this.state.tempData.updated}</Typography>
</div>
</div>
</div> </div>
</div> </div>
...@@ -772,14 +804,14 @@ export default class EditReportItems extends Component { ...@@ -772,14 +804,14 @@ export default class EditReportItems extends Component {
onClick={() => this.props.onClickClose()} onClick={() => this.props.onClickClose()}
> >
<div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#354960', fontSize: 11 }}>Batal</span> <span style={{ color: '#354960', fontSize: 11 }}>Cancel</span>
</div> </div>
</button> </button>
</div> </div>
<div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}> <div className="column-2" style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
<button onClick={() => this.validasi()}> <button onClick={() => this.validasi()}>
<div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}> <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
<span style={{ color: '#fff', fontSize: 11 }}>Simpan</span> <span style={{ color: '#fff', fontSize: 11 }}>Save</span>
</div> </div>
</button> </button>
</div> </div>
......
src/container/MasterData/formReportItems/VisualReportItems.js
View file @ 1222eb09
...@@ -198,7 +198,7 @@ export default class VisualReportItems extends Component { ...@@ -198,7 +198,7 @@ export default class VisualReportItems extends Component {
return ( return (
<div> <div>
<button type="button" onClick={() => this.collapse(item.id)}>{collapseIcon ? (this.state.arrayCollapse.includes(item.id) ? <AddIcon /> : <RemoveIcon />) : null}</button> <button type="button" onClick={() => this.collapse(item.id)}>{collapseIcon ? (this.state.arrayCollapse.includes(item.id) ? <AddIcon /> : <RemoveIcon />) : null}</button>
<label style={{ marginLeft: collapseIcon ? 10 : 0 }}>{item.report_name}</label> <label style={{ marginLeft: collapseIcon ? 10 : 0 }}>{item.description}</label>
</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