PfpdPencarian

import React from "react";
import axios from "axios";
import "devextreme/dist/css/dx.common.css";
import { connect } from "react-redux";
import pfpdbrowsefake from "./pfpdbrowsefake";
import { HashRouter as Router, withRouter, Link } from "react-router-dom";
import DataGrid, {
  Column,
  FilterRow,
  ColumnChooser,
  Pager,
  Paging,
  Export,
  HeaderFilter,
} from "devextreme-react/data-grid";

import {
  Card,
  Row,
  Spin,
  Button,
  Icon,
  Breadcrumb,
  Menu,
  Dropdown,
  Drawer,
  Tabs,
  Alert,
} from "antd";

import _ from "lodash";
import moment from "moment";

import { setLogin } from "../../../appRedux/reducers/auth";

import {
  setInput,
  resetInput,
  setMultiInput,
} from "../../../appRedux/reducers/core";

import {
  getBrowsePFPD,
  getDokumenPabeanPFPD,
  getDokumenPabeanDashboardPFPD,
  getMaxSeriBarangPFPD,
  getCekPeriksaMerahPFPD,
  getListBarangPFPD,
  getListDokapPFPD,
  getListBarangPFPD2,
  getNPDPFPD,
  getReferensiDokumen,
  setLoading,
  resetDokumenPabeanFPD,
  resetSave,
} from "../../../appRedux/reducers/pfpd";

import { tgl } from "../../../appRedux/constant_list";

import ReactTable from "react-table";

import { getDokumen } from "../../../appRedux/reducers/dokumen";

import "react-table/react-table.css";

import StickyToolRight from "../../../components/StickyToolRight";

import IdentitasPerusahaan from "../PfpdDataHeader/IdentitasPerusahaan";

let timeout; // Timeout

const menu = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer">
        Today
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer">
        Yesterday
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer">
        Last 7 Days
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer">
        Last 30 Days
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer">
        This Month
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer">
        Last Month
      </a>
    </Menu.Item>
  </Menu>
);

const { TabPane } = Tabs;

class PfpdPencarian extends React.Component {
  constructor() {
    super();

    this.state = {
      formLayout: "",
      current: "",
      date: "",
      data: [],
      isLoad: false,
      sidebarLeft: false,
      click: 0,
      clickedOnce: false,
      showRedirect: false,
    };
  }

  componentDidMount() {
    const a = this.props.getNPDPFPD(this.props.input.idHeader);
    // this.props.resetDokumenPabeanFPD()
    this.getDataBrowse();
    this.props.resetSave();
    // this.props.getBrowsePFPD()
    console.log("bb", a);
    this.props.resetInput();
    if (
      localStorage.getItem("Data") != null &&
      localStorage.getItem("Data2") != null
    ) {
      localStorage.removeItem("Data");
      localStorage.removeItem("Data2");
    } else if (localStorage.getItem("Data2") != null) {
      localStorage.removeItem("Data2");
    } else {
      console.log("no");
    }
  }

  componentDidUpdate(prevState) {
    if (prevState.sidebarLeft !== this.state.sidebarLeft) {
      if (this.state.sidebarLeft === true) {
        timeout = setTimeout(() => {
          console.log("[debug] @componentDidUpdate TRUE");
        }, 3000);
      } else if (this.state.sidebarLeft === false) {
        clearTimeout(timeout);
        console.log("[debug] @componentDidUpdate FALSE");
      }
    }
  }

  onSelectionChanged = (data) => {
    // this.props.history.push("pfpd-data-header");
    console.log("Dua Kali");
    this.props.resetInput();
    this.onClick(data.data);
  };

  onClick = (data) => {
    console.log("dua kali");
    console.log(data);
    var idHeader = data.idHeader;
    console.log("cc", idHeader);
    try {
      var newinput = {
        idHeader: data.idHeader,
        kodeJalur: data.kodeJalur,
        nomorDaftar: data.nomorDaftar,
        kodeDokumen: data.kodeDokumen,
        tanggalDaftar: moment(data.tanggalDaftar, "DD-MM-YYYY"),
      };
    } catch (e) {
      console.log(e);
    }
    this.props.setMultiInput(newinput);
    this.props.getListDokapPFPD(idHeader);
    this.props.getDokumenPabeanPFPD(idHeader);
    this.props.history.push("pfpd-data-header");
  };

  onCheck = (data) => {
    // this.state.clickedOnce = undefined;
    setTimeout(() => {
      this.setState({
        showRedirect: true,
        click: 0,
        isLoad: false,
      });
    }, 5000);
    console.log("single click");
    console.log(data);
    var idHeader = data.idHeader;
    console.log("cc", idHeader);
    try {
      var newinput = {
        idHeader: data.idHeader,
        kodeJalur: data.kodeJalur,
        kodeDokumen: data.kodeDokumen,
        nomorDaftar: data.nomorDaftar,
        tanggalDaftar: moment(data.tanggalDaftar, "DD-MM-YYYY"),
      };
    } catch (e) {
      console.log(e);
    }
    this.props.setMultiInput(newinput);
    this.props.getListDokapPFPD(idHeader);
    this.props.getDokumenPabeanPFPD(idHeader);
  };
  onOptionChanged = (e) => {
    switch (e.fullName) {
      case "columns[1].filterValue":
        this.props.setInput("kodeDokumen", e.value);
        break;

      case "columns[2].filterValue":
        this.props.setInput("nomorAju", e.value);
        break;

      case "columns[3].filterValue":
        this.props.setInput("nomorDaftar", e.value);
        break;

      case "columns[4].filterValue":
        this.props.setInput("tanggalDaftar", e.value);
        break;

      case "columns[5].filterValue":
        this.props.setInput("namaEntitasUsaha", e.value);
        break;

      case "columns[6].filterValue":
        this.props.setInput("namaEntitasPpjk", e.value);
        break;

      case "columns[7].filterValue":
        this.props.setInput("umur", e.value);
        break;

      case "columns[8].filterValue":
        this.props.setInput("kodeJalur", e.value);
        break;

      case "columns[9].filterValue":
        this.props.setInput("status", e.value);
        break;

      default:
        break;
    }

    console.log(e);

    this.getDataBrowse();
  };
  triggers = (data) => {
    // let a = {...this.state.click}
    this.setState({
      click: this.state.click + 1,
    });
    console.log("sekali", this.state.click);
    let timer = 100;
    if (this.state.click == "1") {
      setTimeout(() => {
        this.setState({
          isLoad: true,
        });
      }, timer);
      setTimeout(() => {
        this.props.resetInput();
        this.onCheck(data.data);
        this.setState({
          sidebarLeft: true,
        });
      }, 250);
    } else if (this.state.click == "2") {
      this.setState({
        isLoad: true,
      });

      console.log("Dua Kali");
      this.props.resetInput();
      this.onClick(data.data);
    }
  };

  onClose = () => {
    // this.props.resetInput()
    this.setState({
      sidebarLeft: false,
    });
    // this.props.history.push("pfpd-data-header");
  };
  onRedirect = () => {
    this.props.history.push("pfpd-data-header");
  };
  getDataBrowse = () => {
    // const nip = this.props.nip
    const nipData = "198912242010121002";
    // const nipData = "196908161996032002"
    // const kodeKantor = this.props.kodeKantor
    // const kodeKantor ="160200"
    const kodeKantor = "040300";
    //!TestingSKA
    // https://api.beacukai.go.id/Pfpd/pemeriksaan-dokumen/browse/?operatorUmur=%3E&nip=196908161996032002&kodeKantor=160200
    //!Testing BC2.0
    //!Testing FTZ5
    this.setState({
      isLoad: true,
    });
    axios({
      method: "GET",
      url:
        process.env.REACT_APP_PFPD +
        "/pemeriksaan-dokumen/browse/?operatorUmur=>&page=0&nip=" +
        nipData +
        "&size=20&kodeKantor=" +
        kodeKantor,

      headers: {
        "beacukai-api-key": process.env.REACT_APP_SECRET_KEY_PFPD,
      },
    })
      .then((res) => {
        let resn = res.data;
        console.log("res", res);
        this.setState({
          data: resn,
          isLoad: false,
        });
      })
      .catch((err) => {
        this.setState({
          isLoad: false,
        });
        console.log(err);
      });
  };
  handleReset = () => {
    this.props.resetInput();
  };

  render() {
    let newData = this.state.data.data;
    // console.log('[debug] data', this.state.sidebarLeft);

    let bc = this.props.nip;
    console.log("nip?", bc);
    let kodeKantor = this.props.kodeKantor;
    console.log("kk", kodeKantor);
    const renderGridCell = (data) => {
      console.log("apa", data.data.kodeJalur);
      let warna = data.data.kodeJalur;
      if (warna === "K") {
        return (
          <div
            style={{
              width: 40,
              height: 20,
              backgroundColor: "yellow",
              color: "black",
              textAlign: "center",
              margin: "auto",
            }}
          >
            {warna}
          </div>
        );
      } else if (warna === "H") {
        return (
          <div
            style={{
              margin: "auto",
              width: 40,
              height: 20,
              backgroundColor: "green",
              color: "white",
              textAlign: "center",
            }}
          >
            {warna}
          </div>
        );
      } else if (warna === "M") {
        return (
          <div
            style={{
              margin: "auto",
              width: 40,
              height: 20,
              backgroundColor: "red",
              color: "white",
              textAlign: "center",
            }}
          >
            {warna}
          </div>
        );
      }
    };
    //console.log(this.props.pfpd)
    // console.log('data', this.data.idHeader)
    return (
      <div id="dashboard-content">
        <StickyToolRight />
        <div className="kt-subheader kt-grid__item" id="kt_subheader">
          <div className="kt-subheader__main">
            <Breadcrumb>
              <Breadcrumb.Item>
                <Link to="/pfpd-dashboard">PFPD</Link>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                <Link to="/pfpd-pencarian">Pencarian</Link>
              </Breadcrumb.Item>
            </Breadcrumb>
          </div>
          <div className="kt-subheader__main">
            <Dropdown overlay={menu} placement="bottomCenter">
              <Button>Hari Ini : {this.state.date}</Button>
            </Dropdown>

            <Menu mode="horizontal">
              <Menu.Item>
                <Link to="/pfpd-dashboard">
                  <Icon type="dashboard" />
                  Dashboard
                </Link>
              </Menu.Item>

              <Menu.Item style={{ fontWeight: "bold" }}>
                <Icon type="unordered-list" />
                Pencarian
              </Menu.Item>

              <Menu.Item>
                <Link to="/pfpd-laporan">
                  <Icon type="solution" />
                  Laporan
                </Link>
              </Menu.Item>
            </Menu>
          </div>
        </div>
        <Row>
          <Card
            title={
              <div>
                <Icon
                  type="unordered-list"
                  style={{
                    marginRight: 20,
                  }}
                />
                Daftar Pemberitahuan Pabean
              </div>
            }
          >
            <Alert
              message="Catatan"
              description="Gunakan 1 Klik pada Row untuk Preview,  Gunakan 2 Klik untuk Periksa Dokumen"
              // description="Gunakan 2 Klik pada Row untuk langsung memeriksa"
              type="info"
              showIcon
              style={{ width: 400 }}
              closable
            />
            <Drawer
              title="Data Header"
              // placement={this.state.placement}
              closable={true}
              onClose={this.onClose}
              visible={this.state.sidebarLeft}
              width={480}
            >
              <Tabs type="card" tabPosition="top">
                <TabPane
                  tab={
                    <span>
                      <i
                        class="fa fa-building"
                        aria-hidden="true"
                        style={{ marginRight: 15 }}
                      ></i>
                      Identitas Perusahaan
                    </span>
                  }
                  key="66"
                >
                  <IdentitasPerusahaan />
                  {this.state.showRedirect ? (
                    <div className="mt-4 text-center">
                      <button
                        className="btn btn-primary"
                        onClick={this.onRedirect}
                      >
                        <i
                          className="fas fa-eye"
                          style={{ marginRight: 10 }}
                        ></i>
                        Periksa Dokumen
                      </button>
                    </div>
                  ) : null}
                </TabPane>
                <TabPane
                  tab={
                    <span>
                      <i
                        class="fa fa-user"
                        aria-hidden="true"
                        style={{ marginRight: 15 }}
                      ></i>
                      Data Pengawas
                    </span>
                  }
                  key="76"
                >
                  <table class="table">
                    <thead>
                      <tr>
                        <th scope="col">Fungsi Tugas</th>
                        <th scope="col">NIP</th>
                        <th scope="col">Nama</th>
                        <th scope="col">Waktu Tunjuk</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <th scope="row">PFPB Periksa Barang</th>
                        <td>19839889202973</td>
                        <td>JUNAIDI A.</td>
                        <td>2020-04-21 09:45:50</td>
                      </tr>
                    </tbody>
                  </table>
                </TabPane>
              </Tabs>
            </Drawer>
            <Spin spinning={this.state.isLoad}>
              <div class="tbl">
                <div
                  class="text-right pl-2 pb-2"
                  style={
                    {
                      // marginRight : 100
                    }
                  }
                >
                  <button class="btn btn-secondary" onClick={this.handleReset}>
                    Reload Data
                  </button>
                </div>
                <DataGrid
                  id={"gridContainer"}
                  onRowDblClick={this.onSelectionChanged}
                  onRowClick={this.triggers}
                  keyExpr={"idHeader"}
                  dataSource={newData}
                  allowColumnReordering={true}
                  allowColumnResizing={true}
                  hoverStateEnabled={true}
                  showColumnLines={true}
                  columnAutoWidth={true}
                  showBorders={true}
                  selection={{ mode: "single" }}
                >
                  <Export
                    enabled={true}
                    fileName={"Daftar Pemberitahuan Pabean"}
                  />
                  <ColumnChooser enabled={true} />
                  <FilterRow visible={true} />
                  <HeaderFilter visible={true} />
                  <Paging defaultPageSize={10} />
                  <Pager
                    showPageSizeSelector={true}
                    allowedPageSizes={[5, 10, 20]}
                    showInfo={true}
                  />

                  {/*
                      <Column
                      caption={'AKSI'}
                      dataField={'idHeader'}
                      type={'buttons'}
                      buttons={[{
                        icon: 'search',
                        hint: 'Lihat',
                        text: 'Lihat'
                      }]}
                      />
                    */}

                  <Column
                    dataField={"kodeDokumen"}
                    caption={"JENIS PEMBERITAHUAN"}
                    dataType={"string"}
                    // filterOperations={[]}
                    // filterValue={this.props.input.kodeDokumen}
                    allowFiltering={true}
                    allowSorting={false}
                  >
                    <HeaderFilter visible={true} />
                  </Column>
                  <Column
                    dataField={"nomorAju"}
                    caption={"NOMOR AJU"}
                    dataType={"string"}
                    // filterValue={this.props.input.nomorAju}
                    // filterOperations={[]}
                    allowFiltering={true}
                    allowSorting={false}
                  />
                  <Column
                    dataField={"nomorDaftar"}
                    caption={"NOMOR DAFTAR"}
                    dataType={"string"}
                    // filterValue={this.props.input.nomorDaftar}
                    // filterOperations={[]}
                    allowFiltering={true}
                    allowSorting={false}
                  />

                  <Column
                    dataField={"tanggalDaftar"}
                    dataType={"date"}
                    format="dd-MM-yyyy"
                    // filterValue={
                    //   this.props.input.tanggalDaftar
                    //     ? this.props.input.tanggalDaftar
                    //     : null
                    // }
                    // filterOperations={[]}
                    caption={"TANGGAL DAFTAR"}
                    allowFiltering={true}
                    allowSorting={false}
                  />
                  <Column
                    dataField={"namaEntitasUsaha"}
                    // filterValue={this.props.input.namaEntitasUsaha}
                    caption={"PENGUSAHA"}
                    // filterOperations={[]}
                    dataType={"string"}
                    allowFiltering={true}
                    allowSorting={false}
                  />
                  <Column
                    dataField={"namaEntitasPpjk"}
                    // filterValue={this.props.input.namaEntitasPpjk}
                    caption={"PPJK"}
                    // filterOperations={[]}
                    dataType={"string"}
                    allowFiltering={true}
                    allowSorting={false}
                  />
                  <Column
                    dataField={"umur"}
                    selectedFilterOperation={this.props.input.operatorUmur}
                    // filterValue={this.props.input.umur}
                    caption={"UMUR"}
                    dataType={"number"}
                    allowFiltering={true}
                    allowSorting={false}
                  />
                  <Column
                    dataField={"kodeJalur"}
                    // filterValue={this.props.input.kodeJalur}
                    caption={"JALUR"}
                    style={{ color: "red" }}
                    cellRender={renderGridCell}
                    // filterOperations={[]}
                    dataType={"string"}
                    allowFiltering={true}
                    allowSorting={false}
                  />
                  <Column
                    dataField={"status"}
                    // filterValue={this.props.input.status}
                    caption={"STATUS"}
                    // filterOperations={[]}
                    dataType={"string"}
                    customizeText={(cellInfo) => {
                      return cellInfo.value ? cellInfo.value[0].namaProses : "";
                    }}
                    allowFiltering={true}
                    allowSorting={false}
                  />
                </DataGrid>
              </div>
            </Spin>
          </Card>
        </Row>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    isLoad: state.pfpd.pfpdLoading,
    npd: state.pfpd.npdData.data || {},
    listDokumen: state.pfpd.listReferensi.data || {},
    pfpd: state.pfpd,
    // data: state.pfpd.browse.data.listData,
    input: state.core.input || {},
    nip: state.auth.user.nip || {},
    kodeKantor: state.auth.user.kodeKantor || {},
  };
};
const mapDispatchToProps = {
  getNPDPFPD,
  setInput,
  setLoading,
  getDokumen,
  getBrowsePFPD,
  getDokumenPabeanPFPD,
  getDokumenPabeanDashboardPFPD,
  getMaxSeriBarangPFPD,
  getCekPeriksaMerahPFPD,
  getListBarangPFPD,
  getListBarangPFPD2,
  getListDokapPFPD,
  resetInput,
  setMultiInput,
  setLogin,
  getReferensiDokumen,
  resetDokumenPabeanFPD,
  resetSave,
};

export default withRouter(
  connect(mapStateToProps, mapDispatchToProps)(PfpdPencarian)
);