UI Download MB

src/container/BudgetTahunan/BudgetTahunan.js

@@ -27,6 +27,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 BudgetTahunan extends Component {
     constructor(props) {
         super(props)
@@ -79,7 +89,10 @@ export default class BudgetTahunan extends Component {
             listApprover: null,
             truelyApprover: false,
             approver: null,
-            isAdmin: false
+            isAdmin: false,
+            selectAllReport: [],
+            selectReport: [],
+            isCheckAll: false
         }
         this.myRef = React.createRef()
         this.fileHandler = this.fileHandler.bind(this);
@@ -2341,6 +2354,53 @@ export default class BudgetTahunan extends Component {
         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() {
         const handleMaxDate = () => {
             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 {
                         );
                     }
                 }
+            }, {
+                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 }
@@ -2690,6 +2765,38 @@ export default class BudgetTahunan 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}