Skip to content

T
Tia-dev
Commit 50bb71c2 authored by Riri Novita's avatar Riri Novita
Browse files
Options

Checkbox ui download

parent 797fde78
Show whitespace changes
Inline Side-by-side
Showing with 405 additions and 13 deletions
src/container/BudgetTahunan/BudgetTahunan.js
View file @ 50bb71c2
...@@ -90,7 +90,6 @@ export default class BudgetTahunan extends Component { ...@@ -90,7 +90,6 @@ export default class BudgetTahunan extends Component {
truelyApprover: false, truelyApprover: false,
approver: null, approver: null,
isAdmin: false, isAdmin: false,
selectAllReport: [],
selectReport: [], selectReport: [],
isCheckAll: false isCheckAll: false
} }
......
src/container/MonthlyReport/MonthlyReport.js
View file @ 50bb71c2
...@@ -29,6 +29,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable()); ...@@ -29,6 +29,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
const Alert = withStyles({ const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />); })((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
const CustomCheckbox = withStyles({
root: {
color: '#5198ea',
'&$checked': {
color: '#5198ea',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default class MonthlyReport extends Component { export default class MonthlyReport extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -78,7 +88,9 @@ export default class MonthlyReport extends Component { ...@@ -78,7 +88,9 @@ export default class MonthlyReport extends Component {
monthHome: null, monthHome: null,
listApprover: null, listApprover: null,
approver: null, approver: null,
isAdmin: false isAdmin: false,
selectReport: [],
isCheckAll: false
} }
this.myRef = React.createRef() this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
...@@ -2157,6 +2169,45 @@ export default class MonthlyReport extends Component { ...@@ -2157,6 +2169,45 @@ export default class MonthlyReport extends Component {
this.setState({ visibleApproveSuperadmin: true }) this.setState({ visibleApproveSuperadmin: true })
} }
handleSelectAll(data) {
console.log(data);
if (this.state.isCheckAll) {
let checkAll = []
this.setState({ selectReport: checkAll, isCheckAll: false })
console.log(checkAll);
} else {
let checkAll = this.state.selectReport
data.map((item) => {
// console.log(item[4]);
if (!this.state.selectReport.includes(item[4])) {
checkAll.push(item[4])
}
})
this.setState({ selectReport: checkAll, isCheckAll: true })
console.log(checkAll);
}
}
handleItemChecked(item) {
let indexID = this.state.selectReport.findIndex((val) => val === item.rowData[4])
return indexID === -1 ? false : true
}
handleItemClick(item) {
console.log(item);
let indexID = this.state.selectReport.findIndex((val) => val === item.rowData[4])
let selectReport = this.state.selectReport
if (indexID === -1) {
selectReport.push(item.rowData[4])
} else {
selectReport.splice(indexID, 1)
}
console.log(selectReport)
let isCheckAll = selectReport.length === this.state.dataTable.length
this.setState({ selectReport, isCheckAll })
}
render() { render() {
const columns = ["#", "Report Type", const columns = ["#", "Report Type",
{ {
...@@ -2253,6 +2304,21 @@ export default class MonthlyReport extends Component { ...@@ -2253,6 +2304,21 @@ export default class MonthlyReport extends Component {
); );
} }
} }
}, {
name: "Download",
options: {
customBodyRender: (val, tableMeta) => {
// console.log(tableMeta);
return (
<div style={{ display: 'flex' }}>
<CustomCheckbox
checked={this.handleItemChecked(tableMeta)}
onChange={() => this.handleItemClick(tableMeta)}
/>
</div >
);
}
}
}, { }, {
name: "", name: "",
options: { display: false } options: { display: false }
...@@ -2632,6 +2698,38 @@ export default class MonthlyReport extends Component { ...@@ -2632,6 +2698,38 @@ export default class MonthlyReport extends Component {
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '24px 5px' }}>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => this.handleSelectAll(this.state.dataTable)}
>
<div style={{ backgroundColor: '#fff', width: 100, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Check All</Typography>
</div>
</button>
<button
type="button"
disabled={this.state.buttonError}
onClick={() => this.handleDownloadReport()}
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
outline: 'none',
}}
>
<div style={{ backgroundColor: '#354960', width: 100, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Download</Typography>
</div>
</button>
</div>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={this.state.dataTable} data={this.state.dataTable}
......
src/container/OperatingIndicator/OperatingIndicator.js
View file @ 50bb71c2
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel, createMuiTheme, withStyles, MuiThemeProvider } from '@material-ui/core'; import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel, createMuiTheme, withStyles, Checkbox, MuiThemeProvider } 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 OperatingIndicatorDetail from './OperatingIndicatorDetail' import OperatingIndicatorDetail from './OperatingIndicatorDetail'
...@@ -20,6 +20,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable()); ...@@ -20,6 +20,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
const Alert = withStyles({ const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />); })((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
const CustomCheckbox = withStyles({
root: {
color: '#5198ea',
'&$checked': {
color: '#5198ea',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default class OperatingIndicator extends Component { export default class OperatingIndicator extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -48,7 +58,9 @@ export default class OperatingIndicator extends Component { ...@@ -48,7 +58,9 @@ export default class OperatingIndicator extends Component {
buttonDelete: true, buttonDelete: true,
lastPeriod: '', lastPeriod: '',
latestPeriode: '', latestPeriode: '',
statusDetail: '' statusDetail: '',
selectReport: [],
isCheckAll: false
} }
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
} }
...@@ -377,7 +389,7 @@ export default class OperatingIndicator extends Component { ...@@ -377,7 +389,7 @@ export default class OperatingIndicator extends Component {
}) })
} else if (String(item[1]).toLocaleLowerCase().includes("rolling outlook")) { } else if (String(item[1]).toLocaleLowerCase().includes("rolling outlook")) {
let quarter =String(item[1]).toLocaleLowerCase().includes('q1') ? "q1" : let quarter = String(item[1]).toLocaleLowerCase().includes('q1') ? "q1" :
String(item[1]).toLocaleLowerCase().includes('q2') ? "q2" : String(item[1]).toLocaleLowerCase().includes('q2') ? "q2" :
String(item[1]).toLocaleLowerCase().includes('q3') ? "q3" : null String(item[1]).toLocaleLowerCase().includes('q3') ? "q3" : null
this.setState({ this.setState({
...@@ -475,6 +487,46 @@ export default class OperatingIndicator extends Component { ...@@ -475,6 +487,46 @@ export default class OperatingIndicator extends Component {
}) })
} }
handleSelectAll(data) {
console.log(data);
if (this.state.isCheckAll) {
let checkAll = []
this.setState({ selectReport: checkAll, isCheckAll: false })
console.log(checkAll);
} else {
let checkAll = this.state.selectReport
data.map((item) => {
// console.log(item[4]);
if (!this.state.selectReport.includes(item[3])) {
checkAll.push(item[3])
}
})
this.setState({ selectReport: checkAll, isCheckAll: true })
console.log(checkAll);
}
}
handleItemChecked(item) {
let indexID = this.state.selectReport.findIndex((val) => val === item.rowData[3])
return indexID === -1 ? false : true
}
handleItemClick(item) {
console.log(item);
let indexID = this.state.selectReport.findIndex((val) => val === item.rowData[3])
let selectReport = this.state.selectReport
if (indexID === -1) {
selectReport.push(item.rowData[3])
} else {
selectReport.splice(indexID, 1)
}
console.log(selectReport)
let isCheckAll = selectReport.length === this.state.dataTable.length
this.setState({ selectReport, isCheckAll })
}
render() { render() {
const columns = ["#", "Report Type", const columns = ["#", "Report Type",
// { // {
...@@ -563,6 +615,21 @@ export default class OperatingIndicator extends Component { ...@@ -563,6 +615,21 @@ export default class OperatingIndicator extends Component {
); );
} }
} }
}, {
name: "Download",
options: {
customBodyRender: (val, tableMeta) => {
// console.log(tableMeta);
return (
<div style={{ display: 'flex' }}>
<CustomCheckbox
checked={this.handleItemChecked(tableMeta)}
onChange={() => this.handleItemClick(tableMeta)}
/>
</div >
);
}
}
}, { }, {
name: "", name: "",
options: { display: false } options: { display: false }
...@@ -653,6 +720,38 @@ export default class OperatingIndicator extends Component { ...@@ -653,6 +720,38 @@ export default class OperatingIndicator extends Component {
/> />
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '20px 15px' }}>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => this.handleSelectAll(this.state.dataTable)}
>
<div style={{ backgroundColor: '#fff', width: 100, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Check All</Typography>
</div>
</button>
<button
type="button"
disabled={this.state.buttonError}
onClick={() => this.handleDownloadReport()}
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
outline: 'none',
}}
>
<div style={{ backgroundColor: '#354960', width: 100, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Download</Typography>
</div>
</button>
</div>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={this.state.dataTable} data={this.state.dataTable}
......
src/container/OutlookPA/OutlookPA.js
View file @ 50bb71c2
...@@ -25,6 +25,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable()); ...@@ -25,6 +25,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
const Alert = withStyles({ const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />); })((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
const CustomCheckbox = withStyles({
root: {
color: '#5198ea',
'&$checked': {
color: '#5198ea',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default class OutlookPA extends Component { export default class OutlookPA extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -71,7 +81,9 @@ export default class OutlookPA extends Component { ...@@ -71,7 +81,9 @@ export default class OutlookPA extends Component {
dbPL: [], dbPL: [],
listApprover: null, listApprover: null,
approver: null, approver: null,
isAdmin: false isAdmin: false,
selectReport: [],
isCheckAll: false
} }
this.myRef = React.createRef() this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
...@@ -1393,6 +1405,45 @@ export default class OutlookPA extends Component { ...@@ -1393,6 +1405,45 @@ export default class OutlookPA extends Component {
this.setState({ visibleApproveSuperadmin: true }) this.setState({ visibleApproveSuperadmin: true })
} }
handleSelectAll(data) {
console.log(data);
if (this.state.isCheckAll) {
let checkAll = []
this.setState({ selectReport: checkAll, isCheckAll: false })
console.log(checkAll);
} else {
let checkAll = this.state.selectReport
data.map((item) => {
// console.log(item[4]);
if (!this.state.selectReport.includes(item[4])) {
checkAll.push(item[4])
}
})
this.setState({ selectReport: checkAll, isCheckAll: true })
console.log(checkAll);
}
}
handleItemChecked(item) {
let indexID = this.state.selectReport.findIndex((val) => val === item.rowData[4])
return indexID === -1 ? false : true
}
handleItemClick(item) {
console.log(item);
let indexID = this.state.selectReport.findIndex((val) => val === item.rowData[4])
let selectReport = this.state.selectReport
if (indexID === -1) {
selectReport.push(item.rowData[4])
} else {
selectReport.splice(indexID, 1)
}
console.log(selectReport)
let isCheckAll = selectReport.length === this.state.dataTable.length
this.setState({ selectReport, isCheckAll })
}
render() { render() {
const handleMaxDate = () => { const handleMaxDate = () => {
let handleDate = Number(moment(this.state.maxDateRevision).format('YYYYMMDD')) - Number(moment(this.state.minDateRevision).format('YYYYMMDD')) let handleDate = Number(moment(this.state.maxDateRevision).format('YYYYMMDD')) - Number(moment(this.state.minDateRevision).format('YYYYMMDD'))
...@@ -1489,6 +1540,21 @@ export default class OutlookPA extends Component { ...@@ -1489,6 +1540,21 @@ export default class OutlookPA extends Component {
); );
} }
} }
}, {
name: "Download",
options: {
customBodyRender: (val, tableMeta) => {
// console.log(tableMeta);
return (
<div style={{ display: 'flex' }}>
<CustomCheckbox
checked={this.handleItemChecked(tableMeta)}
onChange={() => this.handleItemClick(tableMeta)}
/>
</div >
);
}
}
}, { }, {
name: "", name: "",
options: { display: false } options: { display: false }
...@@ -1776,6 +1842,38 @@ export default class OutlookPA extends Component { ...@@ -1776,6 +1842,38 @@ export default class OutlookPA extends Component {
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '20px 15px' }}>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => this.handleSelectAll(this.state.dataTable)}
>
<div style={{ backgroundColor: '#fff', width: 100, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Check All</Typography>
</div>
</button>
<button
type="button"
disabled={this.state.buttonError}
onClick={() => this.handleDownloadReport()}
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
outline: 'none',
}}
>
<div style={{ backgroundColor: '#354960', width: 100, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Download</Typography>
</div>
</button>
</div>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={this.state.dataTable} data={this.state.dataTable}
......
src/container/RollingOutlook/RollingOutlook.js
View file @ 50bb71c2
...@@ -25,6 +25,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable()); ...@@ -25,6 +25,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
const Alert = withStyles({ const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />); })((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
const CustomCheckbox = withStyles({
root: {
color: '#5198ea',
'&$checked': {
color: '#5198ea',
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
export default class RollingOutlook extends Component { export default class RollingOutlook extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -77,7 +87,9 @@ export default class RollingOutlook extends Component { ...@@ -77,7 +87,9 @@ export default class RollingOutlook extends Component {
quarter: null, quarter: null,
listApprover: null, listApprover: null,
approver: null, approver: null,
isAdmin: false isAdmin: false,
selectReport: [],
isCheckAll: false
} }
this.myRef = React.createRef() this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
...@@ -1431,6 +1443,45 @@ export default class RollingOutlook extends Component { ...@@ -1431,6 +1443,45 @@ export default class RollingOutlook extends Component {
this.setState({ visibleApproveSuperadmin: true }) this.setState({ visibleApproveSuperadmin: true })
} }
handleSelectAll(data) {
console.log(data);
if (this.state.isCheckAll) {
let checkAll = []
this.setState({ selectReport: checkAll, isCheckAll: false })
console.log(checkAll);
} else {
let checkAll = this.state.selectReport
data.map((item) => {
// console.log(item[4]);
if (!this.state.selectReport.includes(item[4])) {
checkAll.push(item[4])
}
})
this.setState({ selectReport: checkAll, isCheckAll: true })
console.log(checkAll);
}
}
handleItemChecked(item) {
let indexID = this.state.selectReport.findIndex((val) => val === item.rowData[4])
return indexID === -1 ? false : true
}
handleItemClick(item) {
console.log(item);
let indexID = this.state.selectReport.findIndex((val) => val === item.rowData[4])
let selectReport = this.state.selectReport
if (indexID === -1) {
selectReport.push(item.rowData[4])
} else {
selectReport.splice(indexID, 1)
}
console.log(selectReport)
let isCheckAll = selectReport.length === this.state.dataTable.length
this.setState({ selectReport, isCheckAll })
}
render() { render() {
const handleMaxDate = () => { const handleMaxDate = () => {
let handleDate = Number(moment(this.state.maxDateRevision).format('YYYYMMDD')) - Number(moment(this.state.minDateRevision).format('YYYYMMDD')) let handleDate = Number(moment(this.state.maxDateRevision).format('YYYYMMDD')) - Number(moment(this.state.minDateRevision).format('YYYYMMDD'))
...@@ -1527,6 +1578,21 @@ export default class RollingOutlook extends Component { ...@@ -1527,6 +1578,21 @@ export default class RollingOutlook extends Component {
); );
} }
} }
}, {
name: "Download",
options: {
customBodyRender: (val, tableMeta) => {
// console.log(tableMeta);
return (
<div style={{ display: 'flex' }}>
<CustomCheckbox
checked={this.handleItemChecked(tableMeta)}
onChange={() => this.handleItemClick(tableMeta)}
/>
</div >
);
}
}
}, { }, {
name: "", name: "",
options: { display: false } options: { display: false }
...@@ -1802,6 +1868,38 @@ export default class RollingOutlook extends Component { ...@@ -1802,6 +1868,38 @@ export default class RollingOutlook extends Component {
</div> </div>
<div style={{ marginTop: 20 }}> <div style={{ marginTop: 20 }}>
<div style={{ display: 'flex', justifyContent: 'flex-end', margin: '20px 15px' }}>
<button
className="button"
type="button"
style={{
backgroundColor: 'transparent',
cursor: 'pointer',
borderColor: 'transparent',
outline: 'none',
marginRight: 20
}}
onClick={() => this.handleSelectAll(this.state.dataTable)}
>
<div style={{ backgroundColor: '#fff', width: 100, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center', border: 'solid 1px #354960' }}>
<Typography style={{ fontSize: '11px', color: '#354960', textAlign: 'center' }}>Check All</Typography>
</div>
</button>
<button
type="button"
disabled={this.state.buttonError}
onClick={() => this.handleDownloadReport()}
style={{
backgroundColor: 'transparent',
borderColor: 'transparent',
outline: 'none',
}}
>
<div style={{ backgroundColor: '#354960', width: 100, height: 25, borderRadius: 3, justifyContent: 'center', display: 'flex', alignItems: 'center' }}>
<Typography style={{ fontSize: '11px', color: '#fff', textAlign: 'center' }}>Download</Typography>
</div>
</button>
</div>
<MuiThemeProvider theme={getMuiTheme()}> <MuiThemeProvider theme={getMuiTheme()}>
<MUIDataTable <MUIDataTable
data={this.state.dataTable} data={this.state.dataTable}
......
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