opInd list

src/container/OprIndicator/OperatingIndicator.js

 import React, { Component } from 'react';
-import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel, createMuiTheme, MuiThemeProvider } from '@material-ui/core';
+import { Typography, Paper, TextField, MenuItem, Select, FormControlLabel, createMuiTheme, withStyles, MuiThemeProvider } from '@material-ui/core';
 import MUIDataTable from 'mui-datatables';
 import Images from '../../assets/Images';
 import OperatingIndicatorDetail from './OperatingIndicatorDetail'
 import api from '../../api';
 import Autocomplete from '@material-ui/lab/Autocomplete';
+import MuiAlert from '@material-ui/lab/Alert';
 import { titleCase } from '../../library/Utils';
 import { ExcelRenderer } from 'react-excel-renderer';
 import UploadFile from "../../library/Upload";
@@ -14,6 +15,9 @@ import Constant from '../../library/Constant';
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 
+const Alert = withStyles({
+})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);
+
 export default class OperatingIndicator extends Component {
     constructor(props) {
         super(props)
@@ -30,7 +34,10 @@ export default class OperatingIndicator extends Component {
             report_id: null,
             listAttachment: [],
             visibleUpload: false,
-            operatingIndID: null
+            operatingIndID: null,
+            alert: false,
+            tipeAlert: '',
+            messageAlert: ''
         }
         this.fileHandler = this.fileHandler.bind(this);
     }
@@ -69,17 +76,15 @@ export default class OperatingIndicator extends Component {
                         return [
                             item.number,
                             item.report_name,
-                            // item.revision,
                             item.current_status,
                             item.report_id,
-                            item.is_can_upload,
-                            // item.revision
+                            item.is_can_upload
                         ]
                     })
                     // console.log(dataTable);
                     this.setState({ dataTable, dataReport: response.data.data})
                 }
-            }
+            } 
         })
     }
 
@@ -268,7 +273,7 @@ export default class OperatingIndicator extends Component {
     }
 
     render() {
-        const columns = ["#", "Jenis Laporan",
+        const columns = ["#", "Report Type",
             // {
             //     name: "Revision",
             //     options: {
@@ -329,14 +334,14 @@ export default class OperatingIndicator extends Component {
                                 <button
                                     style={{
                                         backgroundColor: 'transparent',
-                                        cursor: tableMeta.rowData[5] ? 'pointer' : null,
+                                        cursor: tableMeta.rowData[4] ? 'pointer' : null,
                                         borderColor: 'transparent'
                                     }}
                                     onClick={() =>
-                                        tableMeta.rowData[4] ? this.clickDetail(tableMeta.rowData) : null
+                                        tableMeta.rowData[4] ? this.clickDetail(tableMeta.rowData, tableMeta.rowData[1], tableMeta.rowData[3], tableMeta.rowData[2]) : null
                                     }
                                 >
-                                    <Typography style={{ color: tableMeta.rowData[5] ? '#5198ea' : 'GrayText', fontSize: 12, }}>Detail</Typography>
+                                    <Typography style={{ color: tableMeta.rowData[4] ? '#5198ea' : 'GrayText', fontSize: 12, }}>Detail</Typography>
                                 </button>
                             </div >
                         );
@@ -357,7 +362,8 @@ export default class OperatingIndicator extends Component {
             download: false,
             selectableRows: false,
             viewColumns: false,
-            rowsPerPage: 5,
+            rowsPerPage: 50,
+            pagination: false,
             rowsPerPageOptions: [5, 25, 100],
             search: false
         }
@@ -402,10 +408,11 @@ export default class OperatingIndicator extends Component {
                                                 this.getOperatingID()
                                                 // this.getReportAttachment()
                                             })}
-                                            debug
+                                            // debug
+                                            clearOnEscape
                                             disableClearable
                                             style={{ width: 250 }}
-                                            renderInput={(params) => <TextField {...params} label="Periode" margin="normal" style={{ marginTop: 7 }} />}
+                                            renderInput={(params) => <TextField {...params} label="Period" margin="normal" style={{ marginTop: 7 }} />}
                                             value={this.state.periode}
                                         />
                                     </div>
@@ -418,7 +425,7 @@ export default class OperatingIndicator extends Component {
                                                 this.getOperatingID()
                                                 // this.getReportAttachment()
                                             })}
-                                            debug
+                                            clearOnEscape
                                             disableClearable
                                             style={{ width: 250 }}
                                             renderInput={(params) =>