preview unit bisnis

src/container/MasterData/UnitBisnis.js

@@ -13,6 +13,7 @@ import api from "../../api";
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
+const options2 = ct.customOptions2();
 
 export default class UnitBisnis extends Component {
     constructor(props) {
@@ -22,7 +23,12 @@ export default class UnitBisnis extends Component {
             visibleEdit: false,
             dataTable: [],
             listData: [],
-            data: []
+            data: [],
+            search: "",
+            visibleUnitBisnis: true,
+            cols: null,
+            rows: null,
+            dataLoaded: false
         }
         this.fileHandler = this.fileHandler.bind(this);
     }
@@ -30,16 +36,24 @@ export default class UnitBisnis extends Component {
     fileHandler = (event) => {
         let fileObj = event
         ExcelRenderer(fileObj, (err, resp) => {
-            // console.log(resp);
-            // if (err) {
-            //     console.log(err);
-            // }
-            // else {
-            //     this.setState({
-            //         cols: resp.cols,
-            //         rows: resp.rows
-            //     });
-            // }
+            if (err) {
+                console.log(err);
+            }
+            else {
+                let judul = resp.rows[0]
+                let isi = resp.rows.slice(1)
+                // let body = isi.map((item) => {
+                //     return {
+                //         item
+                //     ]
+                // })
+                console.log(JSON.stringify(isi));
+                this.setState({
+                    dataLoaded: true,
+                    cols: judul,
+                    rows: isi
+                });
+            }
         });
     }
 
@@ -74,7 +88,20 @@ export default class UnitBisnis extends Component {
                 visibleCreate: true
             })
         }
+    }
+
+    handleInputChange = (e) => {
+        // Immediately update the state
+        this.setState({
+            search: e.target.value
+        })
+
+        // Execute the debounced onChange method
+        this.onChangeDebounced(e)
+    }
 
+    onChangeDebounced = (e) => {
+        // Delayed logic goes here
     }
 
     render() {
@@ -143,7 +170,9 @@ export default class UnitBisnis extends Component {
         return (
             <div style={{ height: this.props.height }}>
                 {/* <Row> */}
+
                 <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
+                {this.state.visibleUnitBisnis === true ?
                     <div>
                         <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
                             <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Master Data - Unit Bisnis</label>
@@ -152,6 +181,8 @@ export default class UnitBisnis extends Component {
                                 <InputBase
                                     style={{ width: '100%' }}
                                     placeholder="Search"
+                                    value={this.state.search}
+                                    onChange={(e) => this.handleInputChange(e)}
                                     inputProps={{ 'aria-label': 'naked' }}
                                 />
                             </div>
@@ -192,6 +223,40 @@ export default class UnitBisnis extends Component {
 
                         </div>
                     </div>
+                    :
+                    <div>
+                        <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
+                            <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Preview Data</label>
+                        </div>
+                        <div style={{ padding: 25 }}>
+                            {this.state.dataLoaded && (
+                                <MuiThemeProvider theme={getMuiTheme()}>
+                                    <MUIDataTable
+                                        theme={getMuiTheme()}
+                                        data={this.state.rows}
+                                        columns={this.state.cols}
+                                        options={options2}
+                                    />
+                                </MuiThemeProvider>
+                            )}
+                        </div>
+                        <div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
+                            <button
+                                type="button"
+                                onClick={() => this.setState({ visibleUnitBisnis: true })}
+                                style={{ marginRight: 20}}
+                            >
+                                <div style={{ width: 102, height: 30, border: 'solid 1px #354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                                    <span style={{ color: '#354960', fontSize: 11 }}>Batal</span>
+                                </div>
+                            </button>
+                            <div style={{ width: 102, height: 30, backgroundColor: '#354960', borderRadius: 5, alignItems: 'center', display: 'flex', justifyContent: 'center' }}>
+                                <span style={{ color: '#fff', fontSize: 11 }}>Simpan</span>
+                            </div>
+                        </div>
+                    </div>
+                }
+
                 {this.state.visibleCreate && (
                     <CreateUnitBisnis
                         onClickClose={() => this.setState({ visibleCreate: false })}
@@ -233,7 +298,7 @@ export default class UnitBisnis extends Component {
                                     this.fileHandler(dt)
                                     this.setState({ uploadStatus: 'idle', percentage: '0' })
                                 }}
-                                onUpload={() => this.setState({ visibleUpload: false })}
+                                onUpload={() => this.setState({ visibleUpload: false, visibleUnitBisnis: false })}
                             />
                         </div>
                     </div>

src/library/CustomTable.js

@@ -320,6 +320,20 @@ exports.customOptions = function () {
   }
 }
 
+exports.customOptions2 = function () {
+  return {
+    // selectableRows: false,
+    selectableRows: 'none',
+    filterType: 'multiselect',
+    responsive: 'scrollMaxHeight',
+    rowsPerPage: 5,
+    rowsPerPageOptions: [5, 10, 20, 50],
+    print: false,
+    download: false,
+    elevation: 5,
+  }
+}
+
 exports.customOptionsFixedColumn = function () {
   return {
     // selectableRows: false,