Skip to content

T
Tia-dev
Commit 19845f45 authored by Riri Novita's avatar Riri Novita
Browse files
Options

UI Download MB

parent 00b58a81
Show whitespace changes
Inline Side-by-side
Showing with 109 additions and 2 deletions
src/container/BudgetTahunan/BudgetTahunan.js
View file @ 19845f45
...@@ -27,6 +27,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable()); ...@@ -27,6 +27,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 BudgetTahunan extends Component { export default class BudgetTahunan extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -79,7 +89,10 @@ export default class BudgetTahunan extends Component { ...@@ -79,7 +89,10 @@ export default class BudgetTahunan extends Component {
listApprover: null, listApprover: null,
truelyApprover: false, truelyApprover: false,
approver: null, approver: null,
isAdmin: false isAdmin: false,
selectAllReport: [],
selectReport: [],
isCheckAll: false
} }
this.myRef = React.createRef() this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this); this.fileHandler = this.fileHandler.bind(this);
...@@ -2341,6 +2354,53 @@ export default class BudgetTahunan extends Component { ...@@ -2341,6 +2354,53 @@ export default class BudgetTahunan extends Component {
this.setState({ visibleApproveSuperadmin: true }) this.setState({ visibleApproveSuperadmin: true })
} }
handleSelectAll(data) {
console.log(this.state.isCheckAll);
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 })
}
handleDownloadReport() {
if (this.state.selectReport.length > 0) {
alert("Coming Soon!")
} else {
alert("Anda harus memilih report yang ingin di download terlebih dahulu!")
}
}
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'))
...@@ -2437,6 +2497,21 @@ export default class BudgetTahunan extends Component { ...@@ -2437,6 +2497,21 @@ export default class BudgetTahunan 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 }
...@@ -2690,6 +2765,38 @@ export default class BudgetTahunan extends Component { ...@@ -2690,6 +2765,38 @@ export default class BudgetTahunan 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}
......
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