topPriorityCustomer.js

import React, { Component } from "react";

// import library
import "../css/custom.css";
import { withRouter } from "react-router-dom";
import apiRoutes from "../routes/api";
import axios from "axios";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import ToolkitProvider from "react-bootstrap-table2-toolkit";
import { positions, Provider } from "react-alert";
import AlertTemplate from "react-alert-template-basic";

// import components
import Header from "../components/Header";
import TopWidget from "../components/TopWidget";
import Footer from "../components/Footer";
import ButtonCopyToClipboard from "../components/ButtonCopyToClipboard";
import AddPriorityCustomer from "../components/AddPriorityCustomer";
import EditPriorityCustomer from "../components/EditPriorityCustomer";

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 => {
    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];
    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() {
    function statusFormatter(cell, row, rowIndex, formatExtraData) {
      let status = "";
      if (cell === "LOS") {
        status = "LOS";
      } else if (cell === "ONLINE") {
        status = "Online";
      } else {
        status = "Undefined";
        return (
          <div
            style={{
              marginTop: -5,
              height: 27,
              width: 70,
              borderRadius: 10.5,
              backgroundColor: "orange",
              fontSize: "11px",
              color: "white",
              justifyContent: "center",
              alignItems: "center",
              display: "flex"
            }}
          >
            {status}
          </div>
        );
      }
      return <span className={formatExtraData[cell]}>{status}</span>;
    }

    function firstColumnData(cell, row, rowIndex) {
      return <span>{rowIndex + 1}</span>;
    }

    function actionData(cell, row, rowIndex) {
      return (
        <span>
          <a href="/top_priority_customer">
            <i className="fas fa-phone-square icon-phone" />
          </a>{" "}
          |{" "}
          <a href="/top_priority_customer">
            <i className="fas fa-cog icon-gear" />
          </a>{" "}
        </span>
      );
    }

    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">
            <TopWidget
              totalPelangganPrioritas={
                this.state.dataCustomers.priority_customers_count
              }
              totalPelangganPrioritasOffline={
                this.state.dataCustomers.offline_priority_pustomers_count
              }
              totalTeknisi={this.state.dataCustomers.technician_count}
            />
            <section className="content">
              <div className="row">
                <div className="col">
                  <div className="row">
                    <div className="col">
                      <ButtonCopyToClipboard no_inet={no_inet} />
                      <h5 style={{ marginTop: "15px", marginBottom: "-5px" }}>
                        {this.state.dataCustomers.last_updated_at
                          ? `Last Updated ${
                              this.state.dataCustomers.last_updated_at
                            }`
                          : null}
                      </h5>
                    </div>
                    <div className="col">
                      <div
                        className="btn-group"
                        role="group"
                        aria-label="Basic example"
                      >
                        <AddPriorityCustomer
                          createTopPriorityCustomer={
                            this.createTopPriorityCustomer
                          }
                          isOpen={this.state.isOpen}
                          id_sto={this.state.dataCustomers.id_sto}
                        />
                        <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);