Skip to content

T
Tia-dev
Commit 9cfbbf39 authored by rifkaki's avatar rifkaki
Browse files
Options

home

parent 3ef2d52d
Show whitespace changes
Inline Side-by-side
Showing with 167 additions and 63 deletions
src/container/HomePage.js
View file @ 9cfbbf39
...@@ -26,6 +26,7 @@ class HomePage extends Component { ...@@ -26,6 +26,7 @@ class HomePage extends Component {
], ],
isApprover: true, isApprover: true,
listSubcoMB: [], listSubcoMB: [],
listSubcoMR: [],
valueSubmit: 0, valueSubmit: 0,
listdmb: [], listdmb: [],
dataTableMB: [], dataTableMB: [],
...@@ -69,22 +70,37 @@ class HomePage extends Component { ...@@ -69,22 +70,37 @@ class HomePage extends Component {
getListUserSubco() { getListUserSubco() {
api.create().getDashboardUser().then(response => { api.create().getDashboardUser().then(response => {
// console.log(response); console.log(response);
let valueSubmit = 0 let valueSubmit = 0
let valueSubmitMR = 0
let dataMB = []
let dataMR = []
if (response.data) { if (response.data) {
if (response.data.status === "success") { if (response.data.status === "success") {
response.data.data.map((item, index) => { response.data.data.map((item, index) => {
if (item.is_submit === true) { if (item.is_submit === true && item.type === "master_budget") {
valueSubmit += 1 valueSubmit += 1
} else if (item.is_submit === true && item.type === "monthly_report") {
valueSubmitMR += 1
}
if ( item.type === "master_budget" ) {
dataMB.push(item)
} else {
dataMR.push(item)
} }
}) })
this.setState({ this.setState({
listSubcoMB: response.data.data, listSubcoMB: dataMB,
listSubcoMR: dataMR,
valueSubmit, valueSubmit,
valueSubmitMR,
loading: false loading: false
}) })
} }
} }
console.log(this.state.listSubcoMB)
console.log(this.state.listSubcoMR)
}) })
} }
...@@ -92,13 +108,25 @@ class HomePage extends Component { ...@@ -92,13 +108,25 @@ class HomePage extends Component {
let listDashboard = [] let listDashboard = []
let rawData = [] let rawData = []
api.create().getDashboard().then((response) => { api.create().getDashboard().then((response) => {
// console.log(response); console.log(response);
if (String(response.data.status).toLocaleLowerCase() == 'success') { if (String(response.data.status).toLocaleLowerCase() == 'success') {
let data = response.data.data let data = response.data.data
data.map((item, index) => { data.map((item, index) => {
let statusConvert = item.status == 'approval_review'? 'Waiting For Review' : item.status == 'approval_proccess'? 'Waiting For Approval' : titleCase(item.status) let statusConvert = item.status == 'approval_review'? 'Waiting For Review' : item.status == 'approval_proccess'? 'Waiting For Approval' : titleCase(item.status)
if (this.state.isApproverMB && this.state.isApproverMR){
listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert])
rawData.push(item)
} else if (this.state.isApproverMB) {
if (String(item.type_report).toLocaleLowerCase().includes("master")){
listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert]) listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert])
rawData.push(item) rawData.push(item)
}
} else if (this.state.isApproverMR) {
if (String(item.type_report).toLocaleLowerCase().includes("monthly")){
listDashboard.push([index + 1, item.approval_id, item.company_name, `${item.type_report} - ${item.periode}`, item.revision, item.status, statusConvert])
rawData.push(item)
}
}
}) })
this.setState({ listDashboard, rawData }) this.setState({ listDashboard, rawData })
} }
...@@ -107,6 +135,10 @@ class HomePage extends Component { ...@@ -107,6 +135,10 @@ class HomePage extends Component {
getApprMat() { getApprMat() {
this.setState({loading: true}) this.setState({loading: true})
let isApproverMR = false
let isApproverMB = false
// let isApproverMRTabel = false
// let isApproverMBTabel = false
api.create().getAM().then((response) => { api.create().getAM().then((response) => {
console.log(response); console.log(response);
let actAMActive = [] let actAMActive = []
...@@ -117,11 +149,35 @@ class HomePage extends Component { ...@@ -117,11 +149,35 @@ class HomePage extends Component {
} }
}) })
let userId = localStorage.getItem(Constant.USER) let userId = localStorage.getItem(Constant.USER)
console.log(userId);
let indexId = actAMActive.findIndex((val) => val.user_id == userId) let indexId = actAMActive.findIndex((val) => val.user_id == userId)
actAMActive.map((item, index) => {
if (item.approval_type_name === "MONTHLY_REPORT"){
isApproverMR = true
} else if (item.approval_type_name === "MASTER_BUDGET"){
isApproverMB = true
}
})
if (indexId === -1) { if (indexId === -1) {
this.setState({ isApprover: false }) this.setState({ isApprover: false })
this.getListUserSubco() this.getListUserSubco()
} }
// else if (isApproverMR){
// if (isApproverMBTabel === false){
// this.setState({ isApproverMRTabel: true, isApproverMBList: true })
// } else {
// this.setState({ isApproverMRTabel: true })
// }
// }
// else if (isApproverMB){
// if (isApproverMRTabel === false){
// this.setState({ isApproverMBTabel: true, isApproverMRList: true })
// } else {
// this.setState({ isApproverMBTabel: true })
// }
// }
this.setState({ isApproverMB, isApproverMR})
this.getDashboardMB() this.getDashboardMB()
// console.log(actAM) // console.log(actAM)
this.setState({loading: false}) this.setState({loading: false})
...@@ -130,7 +186,7 @@ class HomePage extends Component { ...@@ -130,7 +186,7 @@ class HomePage extends Component {
getDashboardMB() { getDashboardMB() {
api.create().getDashboardMB().then((response) => { api.create().getDashboardMB().then((response) => {
// console.log(response) console.log(response)
if (String(response.data.status).toLocaleLowerCase() == 'success') { if (String(response.data.status).toLocaleLowerCase() == 'success') {
let data = response.data.data let data = response.data.data
let listdmb = data.sort((a, b) => a.company_id - b.company_id).map((item, index) => { let listdmb = data.sort((a, b) => a.company_id - b.company_id).map((item, index) => {
...@@ -156,11 +212,11 @@ class HomePage extends Component { ...@@ -156,11 +212,11 @@ class HomePage extends Component {
name: "Action", name: "Action",
options: { options: {
customBodyRender: (val, tableMeta) => { customBodyRender: (val, tableMeta) => {
// console.log(tableMeta); console.log(tableMeta);
return ( return (
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Link to={{ <Link to={{
pathname: `/home/master-budget/`, pathname: this.state.isApproverMB ? `/home/master-budget/` : `/home/monthly-report/`,
state: { state: {
userType: 'approver', userType: 'approver',
rawData: this.state.rawData[tableMeta.rowIndex] rawData: this.state.rawData[tableMeta.rowIndex]
...@@ -241,6 +297,9 @@ class HomePage extends Component { ...@@ -241,6 +297,9 @@ class HomePage extends Component {
/> />
</div> </div>
); );
let bulan = new Date().toLocaleString('default', { month: 'long'})
let tahun = new Date().getFullYear()
return ( return (
<div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}> <div style={{ flex: 1, backgroundColor: '#f8f8f8', minHeight: this.props.height }}>
{this.state.loading && loadingComponent} {this.state.loading && loadingComponent}
...@@ -249,12 +308,14 @@ class HomePage extends Component { ...@@ -249,12 +308,14 @@ class HomePage extends Component {
<div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}> <div className={"main-color"} style={{ height: 78, flex: 1, display: 'flex', alignItems: 'center', paddingLeft: 20 }}>
<Typography style={{ fontSize: '24px', color: 'white' }}>{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}</Typography> <Typography style={{ fontSize: '24px', color: 'white' }}>{this.state.userData === null ? '' : `Welcome, ${this.state.userData.fullname} !`}</Typography>
</div> </div>
<div>
<div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ flex: 1, padding: 20, width: '100%' }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Waiting Your Approval</Typography> <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Waiting Your Approval</Typography>
</div> </div>
</div> </div>
<div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ flex: 1, padding: 20, width: '100%' }}>
<div> <div>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
...@@ -277,6 +338,7 @@ class HomePage extends Component { ...@@ -277,6 +338,7 @@ class HomePage extends Component {
</MuiThemeProvider> </MuiThemeProvider>
</div> </div>
</div> </div>
</div>
{/* <div style={{ marginTop: 20 }}> {/* <div style={{ marginTop: 20 }}>
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Status Laporan</Typography> <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Status Laporan</Typography>
<div style={{ marginTop: 10, display: 'flex' }}> <div style={{ marginTop: 10, display: 'flex' }}>
...@@ -417,6 +479,7 @@ class HomePage extends Component { ...@@ -417,6 +479,7 @@ class HomePage extends Component {
<Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Complete</Typography> <Typography style={{ color: '#656565', fontSize: '16px', fontWeight: 'bold' }}>Tasks to be Complete</Typography>
</div> </div>
</div> </div>
<div style={{ display: 'inline-flex' }}>
<div style={{ flex: 1, padding: 20, width: '100%' }}> <div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ width: 450, padding: 20, borderRadius: 10 }}> <Paper style={{ width: 450, padding: 20, borderRadius: 10 }}>
<Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Master Budget ${this.state.valueSubmit}/${this.state.listSubcoMB.length}`}</Typography> <Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Master Budget ${this.state.valueSubmit}/${this.state.listSubcoMB.length}`}</Typography>
...@@ -454,6 +517,47 @@ class HomePage extends Component { ...@@ -454,6 +517,47 @@ class HomePage extends Component {
})} })}
</Paper> </Paper>
</div> </div>
{/* : this.state.isApproverMRList === true || this.state.isApprover === false ? */}
<div style={{ flex: 1, padding: 20, width: '100%' }}>
<Paper style={{ width: 450, padding: 20, borderRadius: 10 }}>
<Typography style={{ fontWeight: 'bold', textDecorationLine: 'underline' }}>{`Monthly Report ${this.state.valueSubmitMR}/${this.state.listSubcoMR.length} - ${bulan} ${tahun}`}</Typography>
{this.state.listSubcoMR.map((item, index) => {
return (
<div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, paddingLeft: 10 }}>
<div style={{ display: 'flex' }}>
<img src={item.is_submit === true ? Images.dotDone : item.is_overdue === true ? Images.dotOverdue : Images.dotOpen} />
<Link to={{
pathname: `/home/master-budget/`,
state: {
userType: 'user',
rawData: item
}
}}>
<button
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
margin: 5,
outline: 'none'
}}>
<Typography style={{ marginLeft: 10, color: '#5198ea', fontSize: 13 }}>{item.company_name}</Typography>
</button>
</Link>
</div>
{item.is_overdue && (
<div style={{ backgroundColor: '#f65a4c', paddingRight: 5, paddingLeft: 5, borderRadius: 5, alignSelf: 'center' }}>
<Typography style={{ fontSize: 11, color: '#fff' }}>Overdue</Typography>
</div>
)}
</div>
)
})}
</Paper>
</div>
{/* : null
} */}
</div>
</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