Skip to content

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

Merge branch 'riri' into 'master' 

operating indicator

See merge request !291
parents f2d49c8a e0370295
Show whitespace changes
Inline Side-by-side
Showing with 498 additions and 180 deletions
src/container/MasterData/formReportItems/VisualReportItems.js
View file @ 6e7f33ef
......@@ -325,12 +325,12 @@ export default class VisualReportItems extends Component {
</div>
</div>
</div>
<div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}>
<div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor: "pointer" }}>
{/* <div className="row" style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 15, paddingLeft: 15, paddingBottom: 25 }}> */}
{/* <div onClick={() => this.props.onClickClose()} style={{ width: 102, height: 30, marginLeft: 25, backgroundColor: 'dodgerblue', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center', cursor: "pointer" }}>
<span style={{ color: '#fff', fontSize: 11 }}>Back</span>
</div>
</div> */}
{this.props.buttonEdit && (
<div className="row" style={{ float: 'right', marginRight: 25 }}>
<div className="row" style={{ float: 'right', marginRight: 25, paddingRight: 15, paddingLeft: 15, paddingBottom: 25}}>
<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 }}>Cancel</span>
</div>
......@@ -341,7 +341,7 @@ export default class VisualReportItems extends Component {
</button>
</div>
)}
</div>
{/* </div> */}
</div>
</div>
</div>
......
src/container/OperatingIndicator.js 0 → 100644
View file @ 6e7f33ef
import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import Images from '../assets/Images';
import BalanceSheet from './BudgetTahunan/BalanceSheet';
import api from '../api';
import Autocomplete from '@material-ui/lab/Autocomplete';
import { titleCase } from '../library/Utils';
import ProfitLoss from './BudgetTahunan/ProfitLoss';
import TaxPlanning from './BudgetTahunan/TaxPlanning';
import FixedAssetsMovement from './BudgetTahunan/FixedAssetsMovement';
import CorporateAnnualTarget from './BudgetTahunan/CorporateAnnualTarget';
import { ExcelRenderer } from 'react-excel-renderer';
import UploadFile from "../library/Upload";
import { format } from 'date-fns';
export default class OperatingIndicator extends Component {
constructor(props) {
super(props)
this.state = {
perusahaan: 'TAP Group',
listRevision: null,
revision: null,
visibleOperatingIndicator: true,
visibleMB: false,
listPeriode: null,
periode: null,
listCompany: null,
company: null,
report_id: null,
listAttachment: [],
visibleUpload: false
}
this.fileHandler = this.fileHandler.bind(this);
}
componentDidMount() {
this.getCompanyActive()
}
getReportAttachment() {
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"revision": this.state.revision.revision,
}
api.create().getMasterBudgetAtt(payload).then(response => {
if (response.data) {
if (response.data.status === "success") {
this.setState({ listAttachment: response.data.data })
}
}
// console.log(response);
})
}
getReport() {
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode,
"report_type": "Operating Indicator",
}
api.create().getReportTypeBody(payload).then(response => {
// console.log(response);
if (response.data) {
if (response.data.status === "success") {
let dataTable = response.data.data.map((item, index) => {
return [
item.number,
item.report_name,
item.revision,
item.current_status,
item.report_id,
item.is_can_upload,
item.revision
]
})
// console.log(dataTable);
this.setState({ dataTable })
}
}
})
}
getCompanyActive() {
api.create().getPerusahaanActive().then((response) => {
if (response.data.status === 'success') {
let data = response.data.data
let companyData = data.map((item) => {
return {
company_id: item.company_id,
company_name: item.company_name,
}
})
let defaultProps = {
options: companyData,
getOptionLabel: (option) => titleCase(option.company_name),
};
this.setState({ listCompany: defaultProps, company: companyData[0] }, () => {
this.getPeriode()
})
} else {
alert(response.data.message)
}
})
}
getPeriode() {
api.create().getPeriodeTransaction().then(response => {
let dateNow = new Date
let year = format(dateNow, 'yyyy')
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
let periodeData = data.map((item) => {
return {
periode: item,
}
})
let defaultProps = {
options: periodeData,
getOptionLabel: (option) => option.periode,
};
let index = data.sort((a, b) => a - b).findIndex((val) => val == year)
this.setState({ listPeriode: defaultProps, periode: index == -1 ? periodeData[0] : periodeData[index] }, () => {
this.getRevision()
})
}
}
})
}
getRevision() {
let payload = {
"company_id": this.state.company.company_id,
"periode": this.state.periode.periode
}
api.create().getRevision(payload).then(response => {
console.log(response);
if (response.data) {
if (response.data.status === "success") {
let data = response.data.data
let revisionData = data.map((item) => {
return {
revision: item,
}
})
let defaultProps = {
options: revisionData,
getOptionLabel: (option) => option.revision,
};
this.setState({ listRevision: defaultProps, revision: revisionData[0] }, () => {
this.getReport()
this.getReportAttachment()
})
}
}
})
}
clickDetail(item, id) {
this.setState({ report_id: id })
if (item === 'Master Budget') {
this.setState({
visibleOperatingIndicator: false,
visibleMB: true,
})
}
}
handleChange(value, tableMeta) {
let data = this.state.dataTable
data[tableMeta.rowIndex][tableMeta.columnIndex] = value
}
fileHandler = (event) => {
let fileObj = event
ExcelRenderer(fileObj, (err, resp) => {
// console.log(resp)
if (err) {
console.log(err);
}
else {
const formData = new FormData();
formData.append("revision", Number(this.state.revision.revision));
formData.append("companyId", this.state.company.company_id);
formData.append("periode", Number(this.state.periode.periode));
formData.append("file", event);
this.setState({ formData })
}
})
}
uploadAttachment(formData) {
api.create().uploadAttachment(formData).then(response => {
if (response.data) {
if (response.data.status === "success") {
this.setState({ visibleUpload: false }, () => {
this.getReport()
this.getReportAttachment()
})
}
}
// console.log(response)
})
}
render() {
const columns = ["#", "Jenis Laporan",
{
name: "Revision",
options: {
customBodyRender: (val, tableMeta, updateValue) => {
var list = [];
for (var i = 0; i <= tableMeta.rowData[6]; i++) {
list.push(i);
}
return (
<div style={{ display: 'flex' }}>
<FormControlLabel
style={{ margin: 0 }}
value={val}
control={
<Select
value={val}
onChange={event => {
// console.log(event.target)
updateValue(event.target.value)
this.handleChange(event.target.value, tableMeta)
}}
autoWidth
>
{list.map((item, index) =>
<MenuItem key={index} value={item}>{item}</MenuItem>
)}
</Select>
}
/>
</div >
);
}
}
}, {
name: "Status",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
{val === "submitted" || val === "approved" ?
<img src={Images.ceklis} style={{ width: 31, height: 24 }} /> :
val === "revision" ?
<span>Revisi</span> :
null
}
</div >
);
}
}
},
{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: tableMeta.rowData[5] ? 'pointer' : null,
borderColor: 'transparent'
}}
onClick={() =>
tableMeta.rowData[5] ? this.clickDetail(tableMeta.rowData[1], tableMeta.rowData[4]) : null
}
>
<Typography style={{ color: tableMeta.rowData[5] ? '#5198ea' : 'GrayText', fontSize: 12, }}>Detail</Typography>
</button>
</div >
);
}
}
}, {
name: "",
options: { display: false }
}, {
name: "",
options: { display: false }
}]
const dataTable = [
["1", "Balance Sheet", "done"],
["2", "Profit & Loss", ""],
["3", "CAT", "done"],
["4", "Fixed Assets Movement", ""],
["5", "Tax Planning", "done"],
["6", "Balance Sheet", "done"],
["7", "Profit & Loss", ""],
["8", "CAT", "done"],
["9", "Fixed Assets Movement", ""],
["10", "Tax Planning", "done"],
["11", "Balance Sheet", "done"],
["12", "Profit & Loss", "done"],
["13", "CAT", "done"],
["14", "Fixed Assets Movement", "done"],
["15", "Tax Planning", "done"],
]
const options = {
filter: false,
sort: false,
responsive: "scroll",
print: false,
download: false,
selectableRows: false,
viewColumns: false,
rowsPerPage: 5,
rowsPerPageOptions: [5, 25, 100],
search: false
}
const periode = [
{ value: '2021', label: '2021' },
{ value: '2020', label: '2020' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const perusahaan = [
{ value: 'TAP Group', label: 'TAP Group' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const revisi = [
{ value: '0', label: '0' },
{ value: '1', label: '1' },
]
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
{this.state.visibleOperatingIndicator && (
<div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Operating Indicator</Typography>
</div>
<div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Operating Indicator</Typography>
</div>
<div style={{ padding: 20 }}>
<div>
<Autocomplete
{...this.state.listPeriode}
id="periode"
onChange={(event, newInputValue) => this.setState({ periode: newInputValue }, () => {
this.getReport()
this.getReportAttachment()
})}
debug
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Periode" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.periode}
/>
</div>
<div style={{ marginTop: 20 }}>
<Autocomplete
{...this.state.listCompany}
id="company"
onChange={(event, newInputValue) => this.setState({ company: newInputValue }, () => {
this.getReport()
this.getReportAttachment()
})}
debug
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Company" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.company}
/>
</div>
<div style={{ marginTop: 20 }}>
<Autocomplete
{...this.state.listRevision}
id="revision"
onChange={(event, newInputValue) => this.setState({ revision: newInputValue }, () => {
this.getReport()
this.getReportAttachment()
})}
debug
disableClearable
style={{ width: 250 }}
renderInput={(params) => <TextField {...params} label="Revision" margin="normal" style={{ marginTop: 7 }} />}
value={this.state.revision}
/>
</div>
<div style={{ marginTop: 20 }}>
<MUIDataTable
data={this.state.dataTable}
columns={columns}
options={options}
/>
</div>
<div style={{ display: 'flex', marginTop: 20 }}>
<div style={{ width: '50%' }}>
<Typography style={{ fontSize: '16px', color: '#4b4b4b', fontWeight: 'bold' }}>Attachment: </Typography>
</div>
<div style={{ width: '50%' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none'
}}
onClick={() => this.setState({ visibleUpload: true })}
>
<Typography style={{ fontSize: '16px', color: '#5198ea' }}>Upload File</Typography>
</button>
</div>
</div>
<div style={{ display: 'flex', marginTop: 10 }}>
<div style={{ width: '50%', paddingLeft: 20 }}>
{this.state.listAttachment.length > 0 ?
this.state.listAttachment.map((item) => {
return (
<Typography style={{ fontSize: '16px', color: '#4b4b4b' }}>{item.attachment_name}</Typography>
)
})
: null
}
</div>
<div style={{ width: '50%' }}>
{this.state.listAttachment.length > 0 ?
this.state.listAttachment.map((item) => {
return (
<Typography style={{ fontSize: '16px', color: '#ff3939' }}>Delete</Typography>
)
})
: null
}
</div>
</div>
</div>
<div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Submit</Typography>
</div>
</div>
</Paper>
</div>
</div>
)}
{this.state.visibleUpload && (
<div className="test app-popup-show">
<div className="popup-content background-white border-radius" style={{ borderRadius: 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="popup-title">
<span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</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.setState({ visibleUpload: false })}
>
<img src={Images.close} />
</button>
</div>
</div>
<UploadFile
type={this.state.uploadStatus}
percentage={this.state.percentage}
result={this.state.result}
acceptedFiles={["xlsx"]}
onHandle={(dt) => {
this.fileHandler(dt)
this.setState({ uploadStatus: 'idle', percentage: '0' })
}}
onUpload={() => this.uploadAttachment(this.state.formData)}
/>
</div>
</div>
)}
</div >
);
}
}
src/container/OperatingIndicator/OperatingIndicator.js deleted 100644 → 0
View file @ f2d49c8a
import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem } from '@material-ui/core';
import MUIDataTable from 'mui-datatables';
import Images from '../../assets/Images';
import BalanceSheet from '../BudgetTahunan/BalanceSheet';
export default class BudgetTahunan extends Component {
constructor(props) {
super(props)
this.state = {
periode: '2020',
perusahaan: 'TAP Group',
revisi: '0',
visibleBudgetTahunan: true,
visibleBalanceSheet: false
}
}
render() {
const columns = ["#", "Jenis Laporan",
{
name: "Status",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
{val == 'done' ?
<img src={Images.ceklis} style={{ width: 31, height: 24 }} /> :
null
}
</div >
);
}
}
},
{
name: "Action",
options: {
customBodyRender: (val, tableMeta) => {
return (
<div style={{ display: 'flex' }}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent'
}}
onClick={() => this.setState({ visibleBudgetTahunan: false, visibleBalanceSheet: true })}
>
<Typography style={{ color: '#5198ea', fontSize: 12, }}>Detail</Typography>
</button>
</div >
);
}
}
}]
const dataTable = [
["1", "Balance Sheet", "done"],
["2", "Profit & Loss", ""],
["3", "CAT", "done"],
["4", "Fixed Assets Movement", ""],
["5", "Tax Planning", "done"],
["6", "Balance Sheet", "done"],
["7", "Profit & Loss", ""],
["8", "CAT", "done"],
["9", "Fixed Assets Movement", ""],
["10", "Tax Planning", "done"],
["11", "Balance Sheet", "done"],
["12", "Profit & Loss", "done"],
["13", "CAT", "done"],
["14", "Fixed Assets Movement", "done"],
["15", "Tax Planning", "done"],
]
const options = {
filter: false,
sort: false,
responsive: "scroll",
print: false,
download: false,
selectableRows: false,
viewColumns: false,
rowsPerPage: 5,
rowsPerPageOptions: [5, 25, 100],
search: false
}
const periode = [
{ value: '2020', label: '2020' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const perusahaan = [
{ value: 'TAP Group', label: 'TAP Group' },
{ value: '2019', label: '2019' },
{ value: '2018', label: '2018' },
{ value: '2017', label: '2017' },
{ value: '2016', label: '2016' },
]
const revisi = [
{ value: '0', label: '0' },
{ value: '1', label: '1' },
]
return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8' }}>
{this.state.visibleBudgetTahunan && (
<div>
<div className={"main-color"} style={{ height: 78, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '16px', color: 'white' }}>Operating Indicator</Typography>
</div>
<div style={{ padding: 20, width: '100%' }}>
<Paper style={{ paddingTop: 10 }}>
<div style={{ borderBottom: 'solid 1px #c4c4c4' }} >
<Typography style={{ fontSize: '12px', color: '#4b4b4b', margin: 10 }}>Operating Indicator</Typography>
</div>
<div style={{ padding: 20 }}>
<div>
<TextField
style={{ width: 250, }}
id="periode"
select
label="Periode"
value={this.state.periode}
onChange={(e) => this.setState({ periode: e.target.value })}
>
{periode.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
<div style={{ marginTop: 20 }}>
<TextField
style={{ width: 250, }}
id="perusahaan"
select
label="Perusahaan"
value={this.state.perusahaan}
onChange={(e) => this.setState({ perusahaan: e.target.value })}
>
{perusahaan.map((option) => (
<MenuItem key={option.value} value={option.value}>
{option.label}
</MenuItem>
))}
</TextField>
</div>
<div style={{ marginTop: 20 }}>
<MUIDataTable
data={dataTable}
columns={columns}
options={options}
/>
</div>
</div>
<div style={{ borderTop: 'solid 1px #c4c4c4', padding: 10, backgroundColor: '#f5f5f5', width: '100%', display: 'flex', justifyContent: 'flex-end' }} >
<div style={{ backgroundColor: '#354960', width: 105, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Submit</Typography>
</div>
</div>
</Paper>
</div>
</div>
)}
{this.state.visibleBalanceSheet && (
<BalanceSheet />
)}
</div >
);
}
}
src/library/Array.js
View file @ 6e7f33ef
......@@ -33,7 +33,7 @@ const arraySide = [
},
{
img: Images.operatingindicator,
label: 'Operating Indicator',
label: 'operating-indicator',
path: 'beranda',
subItem: null
},
......
src/router/homeRoutes.js
View file @ 6e7f33ef
......@@ -12,7 +12,7 @@ import ReportItems from '../container/MasterData/ReportItems'
import DashboardCAT from '../container/Laporan/DashboardCAT'
import BudgetTahunan from '../container/BudgetTahunan';
import RollingOutlook from '../container/RollingOutlook';
import OperatingIndicator from '../container/OperatingIndicator/OperatingIndicator'
import OperatingIndicator from '../container/OperatingIndicator'
import MonthlyReport from '../container/MonthlyReport';
import DocumentManagement from '../container/DocumentManagement/DocumentManagement';
......
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