Skip to content

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

Checkbox ui download

parent 797fde78
Hide 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 {
truelyApprover: false,
approver: null,
isAdmin: false,
selectAllReport: [],
selectReport: [],
isCheckAll: false
}
......
src/container/MonthlyReport/MonthlyReport.js
View file @ 50bb71c2
......@@ -29,6 +29,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
const Alert = withStyles({
})((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 {
constructor(props) {
super(props)
......@@ -78,7 +88,9 @@ export default class MonthlyReport extends Component {
monthHome: null,
listApprover: null,
approver: null,
isAdmin: false
isAdmin: false,
selectReport: [],
isCheckAll: false
}
this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this);
......@@ -2157,6 +2169,45 @@ export default class MonthlyReport extends Component {
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() {
const columns = ["#", "Report Type",
{
......@@ -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: "",
options: { display: false }
......@@ -2632,6 +2698,38 @@ export default class MonthlyReport extends Component {
</div>
<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()}>
<MUIDataTable
data={this.state.dataTable}
......
src/container/OperatingIndicator/OperatingIndicator.js
View file @ 50bb71c2
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 Images from '../../assets/Images';
import OperatingIndicatorDetail from './OperatingIndicatorDetail'
......@@ -20,6 +20,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
const Alert = withStyles({
})((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 {
constructor(props) {
super(props)
......@@ -48,7 +58,9 @@ export default class OperatingIndicator extends Component {
buttonDelete: true,
lastPeriod: '',
latestPeriode: '',
statusDetail: ''
statusDetail: '',
selectReport: [],
isCheckAll: false
}
this.fileHandler = this.fileHandler.bind(this);
}
......@@ -377,9 +389,9 @@ export default class OperatingIndicator extends Component {
})
} else if (String(item[1]).toLocaleLowerCase().includes("rolling outlook")) {
let quarter =String(item[1]).toLocaleLowerCase().includes('q1') ? "q1" :
String(item[1]).toLocaleLowerCase().includes('q2') ? "q2" :
String(item[1]).toLocaleLowerCase().includes('q3') ? "q3" : null
let quarter = String(item[1]).toLocaleLowerCase().includes('q1') ? "q1" :
String(item[1]).toLocaleLowerCase().includes('q2') ? "q2" :
String(item[1]).toLocaleLowerCase().includes('q3') ? "q3" : null
this.setState({
statusDetail: String(item[2]).toLocaleLowerCase(),
dataDetail: { ...this.state.dataReport[index], periode: this.state.periode.periode, operatingIndID: this.state.operatingIndID, company: this.state.company, status: item[2] },
......@@ -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() {
const columns = ["#", "Report Type",
// {
......@@ -551,10 +603,10 @@ export default class OperatingIndicator extends Component {
borderColor: 'transparent'
}}
onClick={() =>
tableMeta.rowData[4] ?
this.clickDetail(tableMeta.rowData, tableMeta.rowData[1], tableMeta.rowData[3], tableMeta.rowData[2])
:
null
tableMeta.rowData[4] ?
this.clickDetail(tableMeta.rowData, tableMeta.rowData[1], tableMeta.rowData[3], tableMeta.rowData[2])
:
null
}
>
<Typography style={{ color: tableMeta.rowData[4] ? '#5198ea' : 'GrayText', fontSize: 12, }}>Detail</Typography>
......@@ -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: "",
options: { display: false }
......@@ -653,6 +720,38 @@ export default class OperatingIndicator extends Component {
/>
</div>
<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()}>
<MUIDataTable
data={this.state.dataTable}
......
src/container/OutlookPA/OutlookPA.js
View file @ 50bb71c2
......@@ -25,6 +25,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
const Alert = withStyles({
})((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 {
constructor(props) {
super(props)
......@@ -71,7 +81,9 @@ export default class OutlookPA extends Component {
dbPL: [],
listApprover: null,
approver: null,
isAdmin: false
isAdmin: false,
selectReport: [],
isCheckAll: false
}
this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this);
......@@ -1393,6 +1405,45 @@ export default class OutlookPA extends Component {
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() {
const handleMaxDate = () => {
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 {
);
}
}
}, {
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: "",
options: { display: false }
......@@ -1776,6 +1842,38 @@ export default class OutlookPA extends Component {
</div>
<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()}>
<MUIDataTable
data={this.state.dataTable}
......
src/container/RollingOutlook/RollingOutlook.js
View file @ 50bb71c2
......@@ -25,6 +25,16 @@ const getMuiTheme = () => createMuiTheme(ct.customTable());
const Alert = withStyles({
})((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 {
constructor(props) {
super(props)
......@@ -77,7 +87,9 @@ export default class RollingOutlook extends Component {
quarter: null,
listApprover: null,
approver: null,
isAdmin: false
isAdmin: false,
selectReport: [],
isCheckAll: false
}
this.myRef = React.createRef()
this.fileHandler = this.fileHandler.bind(this);
......@@ -1431,6 +1443,45 @@ export default class RollingOutlook extends Component {
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() {
const handleMaxDate = () => {
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 {
);
}
}
}, {
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: "",
options: { display: false }
......@@ -1802,6 +1868,38 @@ export default class RollingOutlook extends Component {
</div>
<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()}>
<MUIDataTable
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