User.js

import React, { Component } from "react";
import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
import SearchIcon from '@material-ui/icons/Search';
import Images from "../../assets/Images";
import MUIDataTable from "mui-datatables";
import AddUser from './User/AddUser';
import EditUser from './User/EditUser'
import api from "../../api";
import { titleCase } from "../../library/Utils";
import { InputAdornment, Snackbar, InputBase } from "@material-ui/core";
import MuiAlert from '@material-ui/lab/Alert';
import UploadFile from "../../library/Upload";
import { withStyles } from '@material-ui/core/styles';
import { ExcelRenderer } from 'react-excel-renderer';
import ReactTooltip from "react-tooltip";
import PopUpFailedSave from "../../library/PopUpFailedSave";

var ct = require("../../library/CustomTable");
const getMuiTheme = () => createMuiTheme(ct.customTable());
const options = ct.customOptions();

const Alert = withStyles({
})((props) => <MuiAlert elevation={6} variant="filled" {...props} />);

export default class UserRole extends Component {
  constructor(props) {
    super(props)
    this.state = {
      listUser: [],
      indexData: {},
      add: false,
      edit: false,
      visibleUser: true,
      buttonError: false,
      alert: false,
      tipeAlert: '',
      messageAlert: ''
    }
  }

  componentDidMount() {
    this.getUser()
  }

  closeEdit() {
    this.setState({ edit: false })
  }

  closeAdd() {
    this.setState({ add: false })
  }

  getUser() {
    api.create().getUser().then((response) => {
      if (response.data) {
        if (response.ok) {
            if (response.data.status === 'success') {
                let data = response.data.data
                let listData = data.sort((a, b) => a.user_id - b.user_id).map((item, index) => {
                  return [index, item.user_id, item.fullname === null ? '-' : item.fullname, item.email, item.role_name, item.totalCompany, item.status]
                })
                this.setState({ listUser: listData })
            } else {
                this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
            }
        } else {
            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })    
        }
      } else {
        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
      }
    })
  }

  searchUser() {
    let payload = {
      "keyword": this.state.search
    }
    api.create().searchUser(payload).then((response) => {
      if (response.data) {
        if (response.ok) {
            if (response.data.status === 'success') {
                let data = response.data.data
                let listData = data.sort((a, b) => a.user_id - b.user_id).map((item, index) => {
                  return [index, item.user_id, item.fullname == null ? '-' : item.fullname, item.email, item.role_name, item.totalCompany, item.status]
                })
                this.setState({ listUser: listData })
              } else {                
                  this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
              }
        } else {
            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' })    
        }
      } else {
        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' })
      }
    })
  }

  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(3)
        let payload = []
        console.log(isi)
        isi.map((item, index) => {
          if (item.length > 0) {
            payload.push({
              id: index + 1,
              fullname: item[0],
              email: item[1],
              role: item[2],
              start_date: item[3],
              end_date: item[4],
            })
          }
        })
        let body = {
          user: payload
        }
        this.setState({ payload: body, rows: []})
        api.create().checkUploadUser(body).then(response => {
          console.log(response);
          if (response.data) {
            if (response.data.status === "success") {
                let dataRow = response.data.data.map((item, index) => {
                  return [
                    index + 1,
                    item.fullname,
                    item.email,
                    item.role,
                    item.start_date,
                    item.end_date,
                    item.error
                  ]
                })
    
                let columns = [
                  "Data Ke-",
                  "Full Name",
                  {
                    name: "Email",
                    options: {
                      customBodyRender: (val, tableMeta) => {
                        console.log(tableMeta)
                        let check = null
                        if (tableMeta.rowData[6] != null) {
                          check = tableMeta.rowData[6].findIndex((val) => val.field.includes('email'))
                          if (check > -1) {
                            this.setState({ buttonError: true })
                          }
                        }
                        return (
                          <div style={{ display: 'flex' }}>
                            {tableMeta.rowData[6] != null && check > -1 ?
                              <a data-tip={tableMeta.rowData[6][check].message} data-for="email">
                                <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
                              </a> :
                              <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
                            }
                            <ReactTooltip border={true} id="email" place="bottom" type="light" effect="solid" />
                          </div >
                        );
                      }
                    }
                  },
                  {
                    name: "Role",
                    options: {
                      customBodyRender: (val, tableMeta) => {
                        let check = null
                        if (tableMeta.rowData[6] != null) {
                          check = tableMeta.rowData[6].findIndex((val) => val.field.includes('role'))
                          if (check > -1) {
                            this.setState({ buttonError: true })
                          }
                        }
                        return (
                          <div style={{ display: 'flex' }}>
                            {tableMeta.rowData[6] != null && check > -1 ?
                              <a data-tip={tableMeta.rowData[6][check].message} data-for="role">
                                <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
                              </a> :
                              <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
                            }
                            <ReactTooltip border={true} id="role" place="bottom" type="light" effect="solid" />
                          </div >
                        );
                      }
                    }
                  },
                  {
                    name: "Berlaku Mulai",
                    options: {
                      customBodyRender: (val, tableMeta) => {
                        let check = null
                        if (tableMeta.rowData[6] != null) {
                          check = tableMeta.rowData[6].findIndex((val) => val.field.includes('start_date'))
                          if (check > -1) {
                            this.setState({ buttonError: true })
                          }
                        }
                        return (
                          <div style={{ display: 'flex' }}>
                            {tableMeta.rowData[6] != null && check > -1 ?
                              <a data-tip={tableMeta.rowData[6][check].message} data-for="startdate">
                                <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
                              </a> :
                              <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
                            }
                            <ReactTooltip border={true} id="startdate" place="bottom" type="light" effect="solid" />
                          </div >
                        );
                      }
                    }
                  },
                  {
                    name: "Berakhir Hingga",
                    options: {
                      customBodyRender: (val, tableMeta) => {
                        let check = null
                        if (tableMeta.rowData[6] != null) {
                          check = tableMeta.rowData[6].findIndex((val) => val.field.includes('end_date'))
                          if (check > -1) {
                            this.setState({ buttonError: true })
                          }
                        }
                        return (
                          <div style={{ display: 'flex' }}>
                            {tableMeta.rowData[6] != null && check > -1 ?
                              <a data-tip={tableMeta.rowData[6][check].message} data-for="enddate">
                                <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
                              </a> :
                              <span style={{ color: check != null && check > -1 ? "red" : 'black' }}>{val}</span>
                            }
                            <ReactTooltip border={true} id="enddate" place="bottom" type="light" effect="solid" />
                          </div >
                        );
                      }
                    }
                  },
                  {
                    name: "",
                    options: {
                      display: false
                    }
                  }
                ]
    
                this.setState({
                  dataLoaded: true,
                  cols: columns,
                  rows: dataRow
                });
              }
          }
        })
      }
    });
  }

  downloadFile = async () => {
    let res = await fetch(
      "https://tia.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://tia.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 = 'User.xlsx';
      a.click();
    }
  }

  _handleKeyDown(e) {
    if (e.key === 'Enter') {
      if (this.state.search.length > 0) {
        this.searchUser()
      } else {
        this.getUser()
      }
    }
  }

  uploadUser() {
    api.create().uploadUser(this.state.payload).then(response => {
      if (response.data) {
        if (response.ok) {
            if (response.data.status === "success") {
                console.log(response)
                alert(response.data.message)
                this.getUser()
                this.setState({ visibleUser: true })
              } else {
                  this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'warning' }) 
              }
        } else {
            this.setState({ alert: true, messageAlert: response.data.message, tipeAlert: 'error' }) 
        }
      } else {
        this.setState({ alert: true, messageAlert: response.problem, tipeAlert: 'error' }) 
      }
    })
  }

  closeAlert() {
    this.setState({ alert: false })
  }

  render() {
    const columns = [{
      name: "Action",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex' }}>
              {/* {tableMeta.rowData[6] === "Active" ? */}
                <button
                  style={{
                    backgroundColor: 'transparent',
                    cursor: 'pointer',
                    borderColor: 'transparent',
                  }}
                  // onClick={() => console.log(tableMeta.rowData[1])}
                  onClick={() => this.setState({ edit: true, indexData: tableMeta.rowData[1] })}
                >
                  <img src={Images.editCopy} />
                </button>
                {/* :
                null
              } */}
            </div >
          );
        }
      }
    }, {
      name: "ID",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex' }}>
              <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
            </div >
          );
        }
      }
    }, {
      name: "Full Name",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex' }}>
              <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
            </div >
          );
        }
      }
    }, {
      name: "Email",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex' }}>
              <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
            </div >
          );
        }
      }
    }, {
      name: "Role",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex' }}>
              <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
            </div >
          );
        }
      }
    }, {
      name: "Company",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex' }}>
              <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
            </div >
          );
        }
      }
    }, {
      name: "Status",
      options: {
        customBodyRender: (val, tableMeta) => {
          return (
            <div style={{ display: 'flex' }}>
              <span style={{ color: tableMeta.rowData[6] === "Active" ? "#656565" : 'rgba(0, 0, 0, 0.25)' }}>{titleCase(val)}</span>
            </div >
          );
        }
      }
    }]
    return (
      <div style={{ height: this.props.height }}>
        {/* <Row> */}
        <div className={"main-color"} style={{ height: 195, width: '100%' }} />
        <Snackbar open={this.state.alert} autoHideDuration={6000} onClose={() => this.closeAlert()}>
            <Alert onClose={() => this.closeAlert()} severity={this.state.tipeAlert}>
                {this.state.messageAlert}
            </Alert>
        </Snackbar>
        {this.state.visibleUser ? <div>
          <div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-between', paddingRight: 25, paddingLeft: 25, marginTop: -118 }}>
            <label style={{ color: 'white', fontSize: 16, alignSelf: 'center', width: '20%', }}>Master Data - User</label>
            {/* <div style={{ width: '60%', justifyContent: 'center', display: 'flex', borderWidth: 2, alignItems: 'center' }}>
              <div style={{ width: '50%', backgroundColor: 'white', padding: 10, borderRadius: 7.5 }}>
                <TextField
                  id="input-with-icon-textfield"
                  name="search"
                  value={this.state.search}
                  placeholder={'Search'}
                  onChange={(e) => {
                    this.setState({ search: e.target.value }, () => {
                      if (this.state.search.length > 0) {
                        this.searchUser()
                      } else {
                        this.getUser()
                      }
                    });
                  }}
                  onKeyDown={(e) => this._handleKeyDown(e)}
                  style={{ width: '100%', borderBottomWidth: 0, borderBottomColor: 'red' }}
                  InputProps={{
                    style: { fontFamily: 'nunito', borderBottomColor: 'white' },
                    startAdornment: (
                      <InputAdornment position="start">
                        <SearchIcon />
                      </InputAdornment>
                    ),
                  }}
                />
              </div>
            </div> */}
            <div style={{ color: 'white', width: '50%', height: 37, display: 'flex', backgroundColor: 'white', borderWidth: 2, alignItems: 'center', borderRadius: 6, paddingLeft: 5, paddingRight: 5, alignSelf: 'center' }}>
              <img src={Images.searchBlack} style={{ marginRight: 10 }} />
              <InputBase
                style={{ width: '100%' }}
                placeholder="Search"
                value={this.state.search}
                onChange={(e) => {
                  this.setState({ search: e.target.value }, () => {
                    if (this.state.search.length > 0) {
                      this.searchUser()
                    } else {
                      this.getUser()
                    }
                  });
                }}
                inputProps={{ 'aria-label': 'naked' }}
              />
            </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' }}>
              <a data-tip={'Download Template'} data-for="template">
                <button
                  style={{
                    backgroundColor: 'transparent',
                    cursor: 'pointer',
                    borderColor: 'transparent',
                    margin: 5
                  }}
                  onClick={() => this.downloadFile()}
                >
                  <img src={Images.template} />
                </button>
              </a>
              <ReactTooltip border={true} id="template" place="bottom" type="light" effect="solid" />
              <a data-tip={'Upload'} data-for="upload">
                <button
                  style={{
                    backgroundColor: 'transparent',
                    cursor: 'pointer',
                    borderColor: 'transparent',
                    margin: 5
                  }}
                  onClick={() => this.setState({ visibleUpload: true })}
                >
                  <img src={Images.upload} />
                </button>
              </a>
              <ReactTooltip border={true} id="upload" place="bottom" type="light" effect="solid" />
              <a data-tip={'Download'} data-for="download">
                <button
                  style={{
                    backgroundColor: 'transparent',
                    cursor: 'pointer',
                    borderColor: 'transparent',
                    margin: 5
                  }}
                  onClick={() => this.downloadDataTables()}
                >
                  <img src={Images.download} />
                </button>
              </a>
              <ReactTooltip border={true} id="download" place="bottom" type="light" effect="solid" />
              <a data-tip={'Create'} data-for="create">
                <button
                  style={{
                    backgroundColor: 'transparent',
                    cursor: 'pointer',
                    borderColor: 'transparent',
                    margin: 5
                  }}
                  onClick={() => this.setState({ add: true })}
                >
                  <img src={Images.add} />
                </button>
              </a>
              <ReactTooltip border={true} id="create" place="bottom" type="light" effect="solid" />
            </div>
          </div>
          <div style={{ padding: 25 }}>
            <MuiThemeProvider theme={getMuiTheme()}>
              <MUIDataTable
                data={this.state.listUser}
                columns={columns}
                options={options}
              />
            </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>
              <button
                type="button"
                onClick={() => this.state.buttonError ? this.setState({ popupError: true }) : this.uploadUser()}
                style={{}}
              >
                <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>
              </button>
            </div>
          </div>
        }
        {this.state.add && (
          <AddUser
            onClickClose={this.closeAdd.bind(this)}
            refresh={this.getUser.bind(this)}
            data={this.state.indexData}
          />
        )}
        {this.state.edit && (
          <EditUser
            onClickClose={this.closeEdit.bind(this)}
            refresh={this.getUser.bind(this)}
            data={this.state.indexData}
          />
        )}
        {this.state.popupError && (
          <PopUpFailedSave onClickClose={() => this.setState({ popupError: false })} />
        )}
        {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 main-color" style={{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 })}
                  >
                    <img src={Images.close} />
                  </button>
                </div>
              </div>
              <UploadFile
                type={this.state.uploadStatus}
                percentage={this.state.percentage}
                result={this.state.result}
                acceptedFiles={["xlsx"]}
                onHandle={(dt) => {
                  this.fileHandler(dt)
                  this.setState({ uploadStatus: 'idle', percentage: '0' })
                }}
                onUpload={() => this.setState({ visibleUpload: false, visibleUser: false })}
              />
            </div>
          </div>
        )}
      </div>
    );
  }
}