add detail offers status

faris-isa · May 17, 2021 · 7ac043f · 7ac043f
1 parent 1d4483f
commit 7ac043f
Show file tree

Hide file tree

Showing 3 changed files with 139 additions and 5 deletions.
diff --git a/src/views/offers/Offers.js b/src/views/offers/Offers.js
@@ -18,6 +18,23 @@ import TableOffers from './components/TableOffers';
 const Offers = () => {
   const [data, setData] = useState([]);
   const [load, setLoad] = useState(true);
+
+  //info
+  const [isload, setIsload] = useState(true);
+  const [statusinfo, setStatusinfo] = useState(false);
+  const [info, setInfo] = useState({
+    created_at: "",
+    updated_at: "",
+    purchase: [{
+      pivot: {
+        created_at: "",
+        purchased_at: "",
+        done_at: "",
+      }
+    }]
+  });
+
+  //headers
   const token = JSON.parse(sessionStorage.getItem("token"));
   let config = {
     headers : { Authorization: `Bearer ${token}` }
@@ -37,13 +54,25 @@ const Offers = () => {
     getOffers();
   }, [setData]);
 
+  const handlerStat = (id) => {
+    setStatusinfo(!statusinfo);
+    if (Number.isInteger(id)){
+      axiosConfig.get(`/offers/${id}`, config).then((res) => {
+        setInfo(res.data);
+        setIsload(false);
+      })
+    } else {
+      setIsload(true);
+    }
+};
+
   return (
     <>
       <CCard>
           <CardHeader title="Daftar Penawaran" type="tambah" link="/penawaran/tambah"/>
           {/* <CardHeader title="Penawaran"/> */}
         <CCardBody>
-          <TableOffers offers={data} load={load}/>
+          <TableOffers offers={data} load={load} info={handlerStat} statusinfo={statusinfo} loadstatus={isload} infodata={info}/>
         </CCardBody>
       </CCard>
     </>

diff --git a/src/views/offers/OffersAcc.js b/src/views/offers/OffersAcc.js
@@ -10,7 +10,6 @@ import {
 import Swal from 'sweetalert2';
 import axiosConfig from '../../api/axios';
 import TableStat from './components/TableStat';
-import { TheHeaderDropdownMssg } from 'src/containers';
 
 const OffersAcc = () => {
   const FileDownload = require('js-file-download');
@@ -110,7 +109,7 @@ const OffersAcc = () => {
               try {
                 setLoad(true);
                 const fd = {status: "decline", status_offpur: "selesai"};
-                axiosConfig.patch(`/offers/status/${id}`, fd, config)
+                axiosConfig.post(`/offer-status/${id}`, fd, config)
                 .then(res => {
                   const data = res.data;
                   if (data.status === 201){

diff --git a/src/views/offers/components/TableOffers.js b/src/views/offers/components/TableOffers.js
@@ -1,10 +1,15 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import {
   CButton,
   CDataTable,
+  CModal,
+  CModalBody,
+  CModalHeader,
+  CModalFooter,
 } from '@coreui/react';
 import CIcon from '@coreui/icons-react';
+import Loadwait from '../../.components/Loading';
 
 const fields = [
     // {key: '#', _style: {width: '5%'} },
@@ -15,9 +20,77 @@ const fields = [
 
 
 const TableOffers = (props) => {
-  const { offers, load } = props;
+  const { offers, load, info, statusinfo, loadstatus, infodata } = props;
+
+  // const cleanTheDate = (dateStr) => {
+  //   return dateStr.replace(/T/, ' ').replace(/\..+/, '');
+  // }
+
+  var d = new Date(infodata.created_at);
+  var e = new Date(infodata.updated_at);
+
+  const status = (status) => {
+    if (status === "accept"){
+      return "Disetujui";
+    } else if (status === "decline"){
+      return "Ditolak";
+    } else {
+      return "Belum Diputuskan";
+    }
+  }
+
+  const dibeli = (status) => {
+    if (status === "not decided"){
+      return "-";
+    }  else {
+      return e.toLocaleString('en-US', { timeZone: 'Asia/Jakarta' });
+    }
+  }
+
+  const daftarBeli = (status) => {
+    if (status === "accept"){
+      var f = new Date(infodata.purchase[0].pivot.created_at);
+      return f.toLocaleString('en-US', { timeZone: 'Asia/Jakarta' })
+    }  else {
+      return '-';
+    }
+  }
+
+  const terbeli = (status) => {
+    if (status === "accept"){
+      return infodata.purchase[0].pivot.purchased_at;
+    }  else {
+      return '-';
+    }
+  }
+
+  const statusTransaksi = (status) => {
+    if (status === "accept"){
+      if( infodata.purchase[0].pivot.status === "pembelian"){
+        return "Pembelian";
+      } else {
+        return "Selesai - " + infodata.purchase[0].pivot.done_at;
+      }
+    } else if (status === "not decided"){
+      return "Penawaran";
+    } else {
+      return "Selesai"
+    }
+  }
+
+  let data = {
+    "Nama pelanggan" : infodata.nama_pembeli,
+    "Penawaran dibuat" : d.toLocaleString('en-US', { timeZone: 'Asia/Jakarta' }),
+    "Penawaran disetujui / ditolak" :  status(infodata.status)+ ' - ' + dibeli(infodata.status),
+    "Pembelian produk didaftarkan" : daftarBeli(infodata.status),
+    "Produk didaftarkan" : terbeli(infodata.status),
+    "Status Transaksi" : statusTransaksi(infodata.status)
+  }
+
+  const details = data ? Object.entries(data) : <></>
 
   return (
+    <>
         <CDataTable
             items={offers}
             fields={fields}
@@ -43,11 +116,44 @@ const TableOffers = (props) => {
                           {/* {item.id} */}
                       </CButton>
                     </Link>
+                    <CButton color="success" className="mr-1" size="sm" onClick={(e) => info(item.id)}>
+                          <CIcon name="cil-info"/>
+                          <h6>Status Info</h6>
+                      </CButton>
                 </td>
                 )
 
             }}
         />
+        <CModal size="xl" show={statusinfo} onClose={info}>
+                    <CModalHeader>Status Penawaran</CModalHeader>
+                    <CModalBody>
+                    { (loadstatus === true) ? <Loadwait /> :
+                      <table>
+                        {
+                          details.map(([key, value], index) => {
+                            return (
+                              <tbody  key={index.toString()}>
+                                <tr>
+                                  <td>{`${key}`}</td>
+                                  <td> : </td>
+                                  <td><strong>{value}</strong></td>
+                                </tr>
+                              </tbody>
+                            )
+                          })
+                        }
+                        </table>
+                    }
+                    </CModalBody>
+                    <CModalFooter>
+                      <CButton
+                        color="secondary"
+                        onClick={info}
+                      >Cancel</CButton>
+                    </CModalFooter>
+                  </CModal>
+    </>
   )
 }