SHARE
TWEET

topPriorityCustomer.js

rendystdy Jun 27th, 2019 (edited) 73 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. class TopPriorityCustomer extends Component {
  2.   constructor(props) {
  3.     super(props);
  4.     this.state = {
  5.       dataCustomers: {},
  6.       priority_customers: [],
  7.       value: "",
  8.       copied: false,
  9.       customerDetail: {},
  10.       isOpen: false,
  11.       selectedFile: null
  12.     };
  13.   }
  14.  
  15.   componentDidMount() {
  16.     setTimeout(() => {
  17.       this.getUser();
  18.     }, 500);
  19.   }
  20.  
  21.   getUser = async () => {
  22.     let userData = JSON.parse(localStorage.getItem("userData"));
  23.     this.getTopPriorityCustomer(userData.id_sto);
  24.   };
  25.  
  26.   getTopPriorityCustomer = id_sto => {
  27.     axios.get(apiRoutes + "dashboard_priority/" + id_sto).then(
  28.       res => {
  29.         this.setState({
  30.           dataCustomers: res.data,
  31.           priority_customers: res.data.priority_customers_with_pagination
  32.         });
  33.         console.log(this.state.dataCustomers);
  34.       },
  35.       error => {
  36.         let status = error.response.status;
  37.         console.log(status);
  38.       }
  39.     );
  40.   };
  41.  
  42.   createTopPriorityCustomer = Customer => {
  43.     let data = {
  44.       id_sto: this.state.dataCustomers.id_sto,
  45.       no_internet: parseFloat(Customer.no_internet),
  46.       no_referensi: parseFloat(Customer.no_referensi),
  47.       nama: Customer.nama,
  48.       alamat: Customer.alamat,
  49.       no_hp: parseFloat(Customer.no_hp)
  50.     };
  51.  
  52.     axios.post(apiRoutes + `create_customer_priority`, data).then(
  53.       res => {
  54.         let { priority_customers } = this.state;
  55.         priority_customers.push(res.data);
  56.         this.setState({
  57.           priority_customers
  58.         });
  59.         console.log(this.state.priority_customers);
  60.       },
  61.       error => {
  62.         let status = error.response.status;
  63.         console.log(status);
  64.       }
  65.     );
  66.     setTimeout(() => {
  67.       window.location.reload();
  68.     }, 300);
  69.   };
  70.  
  71.   updateTopPriorityCustomer = data => {
  72.     // console.clear();
  73.     // console.log("update", data);
  74.     axios.put(apiRoutes + `edit_customer_priority/` + data.id, data).then(
  75.       res => {  
  76.         let { priority_customers } = this.state;
  77.         priority_customers.push(res.data);
  78.         this.setState({
  79.           priority_customers
  80.         });
  81.       },
  82.       error => {
  83.         let status = error.response.status;
  84.         console.log(status);
  85.       }
  86.     );
  87.   };
  88.  
  89.   handleChange = e => {
  90.     let files = e.target.files[0];
  91.     // console.log(files);
  92.  
  93.     this.setState({
  94.       selectedFile: files
  95.     });
  96.   };
  97.  
  98.   handleUpload = (e) => {
  99.     let file = this.state.selectedFile;
  100.  
  101.     let formData = new FormData();
  102.     formData.append('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',file);
  103.  
  104.     const config = { headers: {'Content-Type': 'multipart/form-data' }}
  105.     axios.post(apiRoutes + `import_excel`, formData, config).then(
  106.       res => {
  107.         console.log(res.data);
  108.       },
  109.       error => {
  110.         let status = error.response.status;
  111.         console.log(status);
  112.       }
  113.     );
  114.   };
  115.  
  116.   render() {
  117.    
  118.     const columns_top_priority_customers = [
  119.       {
  120.         dataField: "no",
  121.         text: "NO",
  122.         formatter: firstColumnData
  123.       },
  124.       {
  125.         dataField: "no_internet",
  126.         text: "NO.INET"
  127.       },
  128.       {
  129.         dataField: "nama",
  130.         text: "NAMA"
  131.       },
  132.       {
  133.         dataField: "alamat",
  134.         text: "ALAMAT"
  135.       },
  136.       {
  137.         dataField: "no_hp",
  138.         text: "NO.HP"
  139.       },
  140.       {
  141.         dataField: "status",
  142.         text: "STATUS",
  143.         formatter: statusFormatter,
  144.         formatExtraData: {
  145.           LOS: "isLOS paddingSize",
  146.           ONLINE: "isOnline paddingSize",
  147.           "-UNDEFINED": "isLOS paddingSize"
  148.         }
  149.       },
  150.       {
  151.         dataField: "action",
  152.         text: "Action",
  153.         formatter: actionData
  154.       }
  155.     ];
  156.  
  157.     let no_inet = "";
  158.     this.state.priority_customers.map(
  159.       (item, key) => (no_inet += item.format_no_internet + "\n")
  160.     );
  161.  
  162.     const options = {
  163.       timeout: 5000,
  164.       position: positions.BOTTOM_CENTER
  165.     };
  166.  
  167.     const rowEvents = {
  168.       onClick: (e, row, rowIndex) => {
  169.         this.setState({
  170.           customerDetail: row
  171.         });
  172.       }
  173.     };
  174.  
  175.     // console.log('test',this.state.customerDetail);
  176.     return (
  177.       // <TopPriorityCustomersProvider value={this.state.dataCustomers}>
  178.       <Provider template={AlertTemplate} {...options}>
  179.         <div>
  180.           <Header />
  181.           <div className="content-wrapper">
  182.             <section className="content">
  183.               <div className="row">
  184.                 <div className="col">
  185.                   <div className="row">
  186.                     <div className="col">
  187.                       <div
  188.                         className="btn-group"
  189.                         role="group"
  190.                         aria-label="Basic example"
  191.                       >
  192.                         <div className="input-group">
  193.                           <div className="custom-file">
  194.                             <input
  195.                               type="file"
  196.                               className="custom-file-input"
  197.                               id="inputGroupFile04"
  198.                               aria-describedby="inputGroupFileAddon04"
  199.                               onChange={this.handleChange}
  200.                               multiple
  201.                             />
  202.                             <label
  203.                               className="custom-file-label"
  204.                               htmlFor="inputGroupFile04"
  205.                             >
  206.                               Choose file
  207.                             </label>
  208.                           </div>
  209.                           <div className="input-group-append">
  210.                             <button
  211.                               className="btn btn-outline-secondary"
  212.                               type="button"
  213.                               id="inputGroupFileAddon04"
  214.                               onClick={this.handleUpload}
  215.                             >
  216.                               Import Status
  217.                             </button>
  218.                           </div>
  219.                         </div>
  220.                       </div>
  221.                     </div>
  222.                   </div>
  223.                   <div className="row" style={{ marginTop: "20px" }}>
  224.                     <div className="col dashboard">
  225.                       {this.state && this.state.priority_customers.length > 0 && (
  226.                         <div
  227.                           className="panel panel-default section-table-one"
  228.                           id="border-red"
  229.                         >
  230.                           {/* Default panel contents */}
  231.                           <div
  232.                             className="panel-body wrapper-heading-one"
  233.                             id="border-bottom-red"
  234.                           >
  235.                             <div className="row">
  236.                               <div className="col">
  237.                                 <div className="wrapper-box-red">
  238.                                   <div className="box-red" />
  239.                                 </div>
  240.                               </div>
  241.                               <div className="col-md-11 wrapper-title">
  242.                                 <h5>TOP PRIORITY CUSTOMER</h5>
  243.                               </div>
  244.                             </div>
  245.                           </div>
  246.                           <div className="panel-body">
  247.                             <div className="row">
  248.                               <div className="col">
  249.                                 <h5>
  250.                                   Total pelanggan :{" "}
  251.                                   <b>
  252.                                     {
  253.                                       this.state.dataCustomers
  254.                                         .priority_customers_count
  255.                                     }
  256.                                   </b>
  257.                                 </h5>
  258.                               </div>
  259.                               <div className="col">
  260.                                 <h5>
  261.                                   Pelanggan gangguan:{" "}
  262.                                   <b className="red-count">
  263.                                     {
  264.                                       this.state.dataCustomers
  265.                                         .offline_priority_pustomers_count
  266.                                     }
  267.                                   </b>
  268.                                 </h5>
  269.                               </div>
  270.                             </div>
  271.                           </div>
  272.                           <ToolkitProvider
  273.                             keyField="no"
  274.                             data={this.state.priority_customers}
  275.                             columns={columns_top_priority_customers}
  276.                           >
  277.                             {props => (
  278.                               <div>
  279.                                 <br />
  280.                                 <BootstrapTable
  281.                                   hover
  282.                                   id={
  283.                                     this.state.dataCustomers
  284.                                       .offline_priority_pustomers_count > 0
  285.                                       ? "display-table"
  286.                                       : "display-none"
  287.                                   }
  288.                                   rowEvents={rowEvents}
  289.                                   pagination={paginationFactory(options)}
  290.                                   {...props.baseProps}
  291.                                 />
  292.                               </div>
  293.                             )}
  294.                           </ToolkitProvider>
  295.                         </div>
  296.                       )}
  297.                     </div>
  298.                   </div>
  299.                 </div>
  300.               </div>
  301.             </section>
  302.           </div>
  303.           <Footer />
  304.         </div>
  305.       </Provider>
  306.       // </TopPriorityCustomersProvider>
  307.     );
  308.   }
  309. }
  310.  
  311. export default withRouter(TopPriorityCustomer);
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top