topPriorityCustomer.js

class TopPriorityCustomer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataCustomers: {},
      priority_customers: [],
      value: "",
      copied: false,
      customerDetail: {},
      isOpen: false,
      selectedFile: null
    };
  }

  componentDidMount() {
    setTimeout(() => {
      this.getUser();
    }, 500);
  }

  getUser = async () => {
    let userData = JSON.parse(localStorage.getItem("userData"));
    this.getTopPriorityCustomer(userData.id_sto);
  };

  getTopPriorityCustomer = id_sto => {
    axios.get(apiRoutes + "dashboard_priority/" + id_sto).then(
      res => {
        this.setState({
          dataCustomers: res.data,
          priority_customers: res.data.priority_customers_with_pagination
        });
        console.log(this.state.dataCustomers);
      },
      error => {
        let status = error.response.status;
        console.log(status);
      }
    );
  };

  createTopPriorityCustomer = Customer => {
    let data = {
      id_sto: this.state.dataCustomers.id_sto,
      no_internet: parseFloat(Customer.no_internet),
      no_referensi: parseFloat(Customer.no_referensi),
      nama: Customer.nama,
      alamat: Customer.alamat,
      no_hp: parseFloat(Customer.no_hp)
    };

    axios.post(apiRoutes + `create_customer_priority`, data).then(
      res => {
        let { priority_customers } = this.state;
        priority_customers.push(res.data);
        this.setState({
          priority_customers
        });
        console.log(this.state.priority_customers);
      },
      error => {
        let status = error.response.status;
        console.log(status);
      }
    );
    setTimeout(() => {
      window.location.reload();
    }, 300);
  };

  updateTopPriorityCustomer = data => {
    // console.clear();
    // console.log("update", data);
    axios.put(apiRoutes + `edit_customer_priority/` + data.id, data).then(
      res => {
        let { priority_customers } = this.state;
        priority_customers.push(res.data);
        this.setState({
          priority_customers
        });
      },
      error => {
        let status = error.response.status;
        console.log(status);
      }
    );
  };

  handleChange = e => {
    let files = e.target.files[0];
    // console.log(files);

    this.setState({
      selectedFile: files
    });
  };

  handleUpload = (e) => {
    let file = this.state.selectedFile;

    let formData = new FormData();
    formData.append('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',file);

    const config = { headers: {'Content-Type': 'multipart/form-data' }}
    axios.post(apiRoutes + `import_excel`, formData, config).then(
      res => {
        console.log(res.data);
      },
      error => {
        let status = error.response.status;
        console.log(status);
      }
    );
  };

  render() {

    const columns_top_priority_customers = [
      {
        dataField: "no",
        text: "NO",
        formatter: firstColumnData
      },
      {
        dataField: "no_internet",
        text: "NO.INET"
      },
      {
        dataField: "nama",
        text: "NAMA"
      },
      {
        dataField: "alamat",
        text: "ALAMAT"
      },
      {
        dataField: "no_hp",
        text: "NO.HP"
      },
      {
        dataField: "status",
        text: "STATUS",
        formatter: statusFormatter,
        formatExtraData: {
          LOS: "isLOS paddingSize",
          ONLINE: "isOnline paddingSize",
          "-UNDEFINED": "isLOS paddingSize"
        }
      },
      {
        dataField: "action",
        text: "Action",
        formatter: actionData
      }
    ];

    let no_inet = "";
    this.state.priority_customers.map(
      (item, key) => (no_inet += item.format_no_internet + "\n")
    );

    const options = {
      timeout: 5000,
      position: positions.BOTTOM_CENTER
    };

    const rowEvents = {
      onClick: (e, row, rowIndex) => {
        this.setState({
          customerDetail: row
        });
      }
    };

    // console.log('test',this.state.customerDetail);
    return (
      // <TopPriorityCustomersProvider value={this.state.dataCustomers}>
      <Provider template={AlertTemplate} {...options}>
        <div>
          <Header />
          <div className="content-wrapper">
            <section className="content">
              <div className="row">
                <div className="col">
                  <div className="row">
                    <div className="col">
                      <div
                        className="btn-group"
                        role="group"
                        aria-label="Basic example"
                      >
                        <div className="input-group">
                          <div className="custom-file">
                            <input
                              type="file"
                              className="custom-file-input"
                              id="inputGroupFile04"
                              aria-describedby="inputGroupFileAddon04"
                              onChange={this.handleChange}
                              multiple
                            />
                            <label
                              className="custom-file-label"
                              htmlFor="inputGroupFile04"
                            >
                              Choose file
                            </label>
                          </div>
                          <div className="input-group-append">
                            <button
                              className="btn btn-outline-secondary"
                              type="button"
                              id="inputGroupFileAddon04"
                              onClick={this.handleUpload}
                            >
                              Import Status
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div className="row" style={{ marginTop: "20px" }}>
                    <div className="col dashboard">
                      {this.state && this.state.priority_customers.length > 0 && (
                        <div
                          className="panel panel-default section-table-one"
                          id="border-red"
                        >
                          {/* Default panel contents */}
                          <div
                            className="panel-body wrapper-heading-one"
                            id="border-bottom-red"
                          >
                            <div className="row">
                              <div className="col">
                                <div className="wrapper-box-red">
                                  <div className="box-red" />
                                </div>
                              </div>
                              <div className="col-md-11 wrapper-title">
                                <h5>TOP PRIORITY CUSTOMER</h5>
                              </div>
                            </div>
                          </div>
                          <div className="panel-body">
                            <div className="row">
                              <div className="col">
                                <h5>
                                  Total pelanggan :{" "}
                                  <b>
                                    {
                                      this.state.dataCustomers
                                        .priority_customers_count
                                    }
                                  </b>
                                </h5>
                              </div>
                              <div className="col">
                                <h5>
                                  Pelanggan gangguan:{" "}
                                  <b className="red-count">
                                    {
                                      this.state.dataCustomers
                                        .offline_priority_pustomers_count
                                    }
                                  </b>
                                </h5>
                              </div>
                            </div>
                          </div>
                          <ToolkitProvider
                            keyField="no"
                            data={this.state.priority_customers}
                            columns={columns_top_priority_customers}
                          >
                            {props => (
                              <div>
                                <br />
                                <BootstrapTable
                                  hover
                                  id={
                                    this.state.dataCustomers
                                      .offline_priority_pustomers_count > 0
                                      ? "display-table"
                                      : "display-none"
                                  }
                                  rowEvents={rowEvents}
                                  pagination={paginationFactory(options)}
                                  {...props.baseProps}
                                />
                              </div>
                            )}
                          </ToolkitProvider>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </section>
          </div>
          <Footer />
        </div>
      </Provider>
      // </TopPriorityCustomersProvider>
    );
  }
}

export default withRouter(TopPriorityCustomer);