unitBisnis

src/container/MasterData/UnitBisnis.js

@@ -5,6 +5,7 @@ import SearchIcon from '@material-ui/icons/Search';
 import Images from "../../assets/Images";
 import MUIDataTable from "mui-datatables";
 import CreateUnitBisnis from "./formUnitBisnis/CreateUnitBisnis";
+import { TextField, InputBase } from "@material-ui/core";
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
@@ -14,7 +15,9 @@ export default class UnitBisnis extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            visibleCreate: false
+            visibleCreate: false,
+            visibleEdit: false,
+            data: []
         }
     }
 
@@ -24,7 +27,7 @@ export default class UnitBisnis extends Component {
     render() {
 
         console.log(this.props.height)
-        const columns = ["#", "Nama Perusahaan", "Revisi", "Status", {
+        const columns = [{
             name: "Action",
             options: {
                 customBodyRender: (val, tableMeta) => {
@@ -36,17 +39,7 @@ export default class UnitBisnis extends Component {
                                     cursor: 'pointer',
                                     borderColor: 'transparent'
                                 }}
-                                onClick={() => null}
-                            >
-                                <img src={Images.editCopy2} />
-                            </button>
-                            <button
-                                style={{
-                                    backgroundColor: 'transparent',
-                                    cursor: 'pointer',
-                                    borderColor: 'transparent'
-                                }}
-                                onClick={() => null}
+                                onClick={() => this.setState({ visibleEdit: true, data: tableMeta.rowData })}
                             >
                                 <img src={Images.editCopy} />
                             </button>
@@ -54,13 +47,46 @@ export default class UnitBisnis extends Component {
                     );
                 }
             }
+        }, {
+            name: "ID",
+            options: {
+                customBodyRender: (val, tableMeta) => {
+                    return (
+                        <div style={{ display: 'flex' }}>
+                            <span style={{ color: tableMeta.rowData[3] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
+                        </div >
+                    );
+                }
+            }
+        }, {
+            name: "Unit Bisnis",
+            options: {
+                customBodyRender: (val, tableMeta) => {
+                    return (
+                        <div style={{ display: 'flex' }}>
+                            <span style={{ color: tableMeta.rowData[3] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
+                        </div >
+                    );
+                }
+            }
+        }, {
+            name: "Status",
+            options: {
+                customBodyRender: (val, tableMeta) => {
+                    return (
+                        <div style={{ display: 'flex' }}>
+                            <span style={{ color: tableMeta.rowData[3] === "Aktif" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{val}</span>
+                        </div >
+                    );
+                }
+            }
         }]
         const data = [
-            ["1", "TRIPUTRA AGRO PERSADA", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
-            ["2", "DAYA GROUP", "Laporan Bulanan - September 2020", "1 (20 Oktober 2020)", "Belum Disetujui"],
-            ["3", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
-            ["4", "DHARMA GROUP", "Laporan Bulanan - September 2020", "0 (20 Oktober 2020)", "Belum Disetujui"],
-            ["5", "PUNINAR INFINITE RAYA", "Budget Tahunan 2021", "0 (20 Oktober 2020)", "Belum Disetujui"],
+            ["", "1", "Agribisnis", "Aktif"],
+            ["", "2", "Manufacturing", "Aktif"],
+            ["", "3", "Trading", "Aktif"],
+            ["", "4", "Service", "Non Aktif"],
+            ["", "-", "-", "-"],
         ]
         return (
             <div style={{ height: this.props.height }}>
@@ -68,10 +94,29 @@ export default class UnitBisnis extends Component {
                 <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
                 <div>
                     <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
-                        <label style={{ color: 'white', width: '20%' }}>Master Data - Unit Bisnis</label>
-                        <label style={{ color: 'white', width: '60%', justifyContent: 'center', display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center' }}>Search</label>
-                        <div style={{ width: '20%', justifyContent: 'flex-end', display: 'flex' }}>
-                            <img src={Images.add} onClick={() => this.setState({ visibleCreate: true })} />
+                        <label style={{ color: 'white', fontSize: 16, alignSelf: 'center' }}>Master Data - Unit Bisnis</label>
+                        <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5 }}>
+                            <img src={Images.searchBlack} style={{ marginRight: 10 }} />
+                            <InputBase
+                                style={{ width: '100%' }}
+                                placeholder="Search"
+                                inputProps={{ 'aria-label': 'naked' }}
+                            />
+                        </div>
+                        <div style={{ width: '20%', justifyContent: 'space-around', display: 'flex' }}>
+                            <img src={Images.template} />
+                            <img src={Images.upload} />
+                            <img src={Images.download} />
+                            <button
+                                style={{
+                                    backgroundColor: 'transparent',
+                                    cursor: 'pointer',
+                                    borderColor: 'transparent'
+                                }}
+                                onClick={() => this.setState({ visibleCreate: true })}
+                            >
+                                <img src={Images.add} />
+                            </button>
                         </div>
                     </div>
                     <div style={{ padding: 25 }}>
@@ -91,6 +136,14 @@ export default class UnitBisnis extends Component {
                         onClickClose={() => this.setState({ visibleCreate: false })}
                     />
                 )}
+
+                {this.state.visibleEdit && (
+                    <CreateUnitBisnis
+                        type={"edit"}
+                        onClickClose={() => this.setState({ visibleEdit: false })}
+                        data={this.state.data}
+                    />
+                )}
             </div>
         );
     }