Merge branch 'didam' into 'master'

update didim

See merge request !71

package-lock.json

@@ -12135,6 +12135,22 @@
         "prop-types": "^15.7.2"
       }
     },
+    "react-tooltip": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.8.tgz",
+      "integrity": "sha512-pDWa0/khTAgIfldp95tHgyuYyBhWNlfaU2LF9ubAKxpoqNe15uyf+uLlnhK/Lstb6FU8E8/SL28Wp6oEO9xw3g==",
+      "requires": {
+        "prop-types": "^15.7.2",
+        "uuid": "^7.0.3"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz",
+          "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg=="
+        }
+      }
+    },
     "react-transition-group": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",

src/container/Login.js

@@ -75,7 +75,9 @@ class Login extends Component {
   }
     api.create().login(payload).then((response) => {
       if (response.data.status === 'success') {
+        console.log(response.data.data)
         localStorage.setItem(Constant.TOKEN, response.data.data.token)
+        localStorage.setItem(Constant.USER, response.data.data.user_id)
         if (this.state.rememberMe) {
           localStorage.setItem(Constant.EMAIL, this.state.email)
           localStorage.setItem(Constant.PASSWORD, this.state.password)

src/container/Otorisasi/User.js

@@ -9,11 +9,81 @@ import EditUser from './User/EditUser'
 import api from "../../api";
 import { titleCase } from "../../library/Utils";
 import { InputAdornment, TextField } from "@material-ui/core";
+import UploadFile from "../../library/Upload";
+import { ExcelRenderer } from 'react-excel-renderer';
 
 var ct = require("../../library/CustomTable");
 const getMuiTheme = () => createMuiTheme(ct.customTable());
 const options = ct.customOptions();
 
+const tesss = [{
+  name: "Data Ke-",
+  options: {
+    customBodyRender: (val, tableMeta) => {
+      return (
+        <div style={{ display: 'flex' }}>
+          {tableMeta.rowIndex + 1}
+        </div >
+      );
+    }
+  }
+}, {
+  name: "Nama Lengkap",
+  options: {
+    customBodyRender: (val, tableMeta) => {
+      return (
+        <div style={{ display: 'flex', width: 50 }}>
+          {titleCase(val)}
+        </div >
+      );
+    }
+  }
+}, {
+  name: "Email",
+  options: {
+    customBodyRender: (val, tableMeta) => {
+      return (
+        <div style={{ display: 'flex', width: 200 }}>
+          {val}
+        </div >
+      );
+    }
+  }
+}, {
+  name: "Role",
+  options: {
+    customBodyRender: (val, tableMeta) => {
+      return (
+        <div style={{ display: 'flex', width: 150 }}>
+          {titleCase(val)}
+        </div >
+      );
+    }
+  }
+}, {
+  name: "Berlaku Mulai",
+  options: {
+    customBodyRender: (val, tableMeta) => {
+      return (
+        <div style={{ display: 'flex', width: 100 }}>
+          {titleCase(val)}
+        </div >
+      );
+    }
+  }
+}, {
+  name: "Berakhir Hingga",
+  options: {
+    customBodyRender: (val, tableMeta) => {
+      return (
+        <div style={{ display: 'flex'}}>
+          {val}
+        </div >
+      );
+    }
+  }
+}]
+
 export default class UserRole extends Component {
   constructor(props) {
     super(props)
@@ -21,7 +91,8 @@ export default class UserRole extends Component {
       listUser: [],
       indexData: {},
       add: false,
-      edit: false
+      edit: false,
+      visibleUser: true
     }
   }
 
@@ -75,6 +146,58 @@ export default class UserRole extends Component {
     }) 
   }
 
+  fileHandler = (event) => {
+    let fileObj = event
+    ExcelRenderer(fileObj, (err, resp) => {
+        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: tesss,
+                rows: isi
+            });
+        }
+    });
+  }
+
+  downloadFile = async () => {
+    let res = await fetch(
+        "https://trftia.eksad.com/tia-reporting-dev/public/attachment/download_file?fileName=UserTemplate&&fileType=xlsx"
+    )
+    res = await res.blob()
+    console.log(res)
+    if (res.size > 0) {
+        let url = window.URL.createObjectURL(res);
+        let a = document.createElement('a');
+        a.href = url;
+        a.download = 'User Template.xlsx';
+        a.click();
+    }
+  }
+
+  downloadDataTables = async () => {
+    let res = await fetch ("https://trftia.eksad.com/tia-reporting-dev/public/user/export_user")
+    res = await res.blob()
+    console.log(res)
+    if (res.size > 0) {
+        let url = window.URL.createObjectURL(res);
+        let a = document.createElement('a');
+        a.href = url;
+        a.download = 'Data User.xlsx';
+        a.click();
+    }
+  }
+
   _handleKeyDown(e) {
     if (e.key === 'Enter') {
       if (this.state.search.length > 0) {
@@ -163,18 +286,11 @@ export default class UserRole extends Component {
         }
       }
     }, "Status"]
-    const data = [
-      ["1", "1", "Juki Kudet", "Juki@gmail.com)", "Admin", "Kepo", "Aktif"],
-      ["1", "2", "Kuji Mama", "Loro@gmail.com)", "Admin", "Kepo", "Aktif"],
-      ["1", "3", "Sutaru", "Jaka@gmail.com)", "Admin", "Kepo", "Aktif"],
-      ["1", "4", "Tatang Katro", "ikup@gmail.com)", "Admin", "Kepo", "Aktif"],
-      ["1", "5", "Firman", "Sudir@gmail.com)", "Admin", "Kepo", "Aktif"],
-    ]
     return (
       <div style={{ height: this.props.height }}>
         {/* <Row> */}
         <div style={{ height: 199, backgroundColor: '#354960', width: '100%' }} />
-        <div>
+        {this.state.visibleUser ? <div>
           <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -150 }}>
             <label style={{ fontFamily: 'nunito', color: 'white', width: '20%', alignSelf: 'center', fontSize: 18}}>Master Data - User</label>
             <div style={{width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
@@ -208,10 +324,59 @@ export default class UserRole extends Component {
             </div>
             {/* <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.template}/>
-              <img src={Images.upload} style={{marginLeft: 20}}/>
-              <img src={Images.download} style={{marginLeft: 20}}/>
-              <img src={Images.add} onClick={() => this.setState({add: true})} style={{marginLeft: 20}}/>
+              <button
+                  style={{
+                      backgroundColor: 'transparent',
+                      cursor: 'pointer',
+                      borderColor: 'transparent',
+                      margin: 5
+                  }}
+                  onClick={() => this.downloadFile()}
+              >
+                <img src={Images.template}/>
+              </button>
+              <button
+                  style={{
+                      backgroundColor: 'transparent',
+                      cursor: 'pointer',
+                      borderColor: 'transparent',
+                      marginTop: 5,
+                      marginBottom: 5,
+                      marginRight: 5,
+                      marginLeft: 20
+                  }}
+                  onClick={() => this.setState({ visibleUpload: true })}
+              >
+                <img src={Images.upload}/>
+              </button>
+              <button
+                  style={{
+                      backgroundColor: 'transparent',
+                      cursor: 'pointer',
+                      borderColor: 'transparent',
+                      marginTop: 5,
+                      marginBottom: 5,
+                      marginRight: 5,
+                      marginLeft: 20
+                  }}
+                  onClick={() => this.downloadDataTables()}
+              >
+                <img src={Images.download}/>
+              </button>
+              <button
+                  style={{
+                      backgroundColor: 'transparent',
+                      cursor: 'pointer',
+                      borderColor: 'transparent',
+                      marginTop: 5,
+                      marginBottom: 5,
+                      marginRight: 5,
+                      marginLeft: 20
+                  }}
+                  onClick={() => this.setState({add: true})}
+              >
+                <img src={Images.add}/>
+              </button>
             </div>
           </div>
           <div style={{ padding: 25 }}>
@@ -223,7 +388,39 @@ export default class UserRole extends Component {
               />
             </MuiThemeProvider>
           </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={options}
+              />
+            </MuiThemeProvider>
+          )}
+        </div>
+        <div style={{ display: 'flex', width: '100%', placeContent: 'flex-end', padding: 20 }}>
+          <button
+              type="button"
+              onClick={() => this.setState({ visibleUser: 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.add && (
           <AddUser 
             onClickClose={this.closeAdd.bind(this)}
@@ -236,6 +433,39 @@ export default class UserRole extends Component {
             data={this.state.indexData}
           />
         )}
+        {this.state.visibleUpload && (
+            <div className="test app-popup-show">
+                <div className="popup-content background-white border-radius" style={{ borderRadius: 8 }}>
+                    <div className="popup-panel grid grid-2x" style={{ backgroundColor: '#51c6ea', height: 64, borderTopRightRadius: 8, borderTopLeftRadius: 8 }}>
+                        <div className="col-1" style={{ maxWidth: "inherit", display: 'flex', alignItems: 'center' }}>
+                            <div className="popup-title">
+                                <span style={{ color: '#fff', fontSize: 16, fontWeight: 'bold' }}>Upload File</span>
+                            </div>
+                        </div>
+                        <div className="col-2 content-right" style={{ maxWidth: "inherit", alignSelf: 'center' }}>
+                            <button
+                                type="button"
+                                className="btn btn-circle btn-white"
+                                onClick={() => this.setState({ visibleUpload: false })}
+                            >
+                                <i className="fa fa-lg fa-times" style={{ color: 'white' }} />
+                            </button>
+                        </div>
+                    </div>
+                    <UploadFile
+                        type={this.state.uploadStatus}
+                        percentage={this.state.percentage}
+                        result={this.state.result}
+                        acceptedFiles={["pdf"]}
+                        onHandle={(dt) => {
+                            this.fileHandler(dt)
+                            this.setState({ uploadStatus: 'idle', percentage: '0' })
+                        }}
+                        onUpload={() => this.setState({ visibleUpload: false, visibleUser: false })}
+                    />
+                </div>
+            </div>
+        )}
       </div>
     );
   }

src/container/Otorisasi/User/AddUser.js

@@ -3,6 +3,8 @@ import { TextField, Divider, Typography, Checkbox, withStyles } from '@material-
 import api from '../../../api';
 import Autocomplete from '@material-ui/lab/Autocomplete';
 import { titleCase } from '../../../library/Utils';
+import localeID from "date-fns/locale/id"
+import format from "date-fns/format";
 
 const CustomCheckbox = withStyles({
     root: {
@@ -29,7 +31,8 @@ export default class AddUser extends Component {
             startDate: null,
             endDate: null,
             company: [],
-            listRole: null
+            listRole: null,
+            date: new Date(),
         }
     }
 
@@ -247,7 +250,7 @@ export default class AddUser extends Component {
                         </div>
                     </div>
                     <div style={{flexDirection:'column', display: 'flex', paddingLeft: 20, paddingRight: 20 }}>
-                        <Typography style={{fontSize: 12}}>{`Dibuat  : ${this.state.tempData == null? '' : this.state.tempData.created}`}</Typography>
+                        <Typography style={{fontSize: 12}}>{`Dibuat  : ${format(this.state.date, 'dd MMMM yyyy', {locale: localeID})}`}</Typography>
                         {/* <Typography style={{fontSize: 12}}>{`Diubah: ${this.state.tempData == null? '' : this.state.tempData.updated}`}</Typography> */}
                     </div>
                     <Divider style={{margin: 20}}/>

src/library/Constant.js

 const Constant = {
     TOKEN: null,
-    USER: null,
+    USER: 0,
     EMAIL: 'TOKEN',
     PASSWORD: 'PASSWORD'