From 64ea240a69e30c4aafba6ef628cdd2c33c1d9cd8 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Sat, 20 Aug 2022 22:27:14 +0800
Subject: [PATCH] sort bid record, cart by cawangan

---
 src/components/bid-record/BidRecordList.vue | 186 ++++++++++++++++----
 src/components/bid-record/TheBidRecord.vue  |  15 +-
 src/components/cart/CartListNew.vue         |   2 +-
 src/components/home/ResultNotification.vue  |  69 ++++++++
 src/components/home/TheHome.vue             |  36 +---
 src/components/result/ResultDetail.vue      |  94 +++++++++-
 src/components/result/ResultMain.vue        |   4 +-
 7 files changed, 329 insertions(+), 77 deletions(-)
 create mode 100644 src/components/home/ResultNotification.vue

diff --git a/src/components/bid-record/BidRecordList.vue b/src/components/bid-record/BidRecordList.vue
index f802be7..026246d 100644
--- a/src/components/bid-record/BidRecordList.vue
+++ b/src/components/bid-record/BidRecordList.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="loading"
+    v-if="isLoading"
     style="min-height: 70vh; display: grid; place-items: center"
   >
     <div class="spinner-border" role="status">
@@ -9,30 +9,131 @@
   </div>
   <div v-else class="">
     <div class="container">
-      <div>
-        <table class="table table-bordered table-hover">
-          <thead>
-            <tr>
-              <th scope="col">Bil</th>
-              <th scope="col">Cawangan</th>
-              <th scope="col">No Rujukan</th>
-              <th scope="col">Harga Bida</th>
-              <th scope="col">Tarikh/Masa Bidaan</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr
-              v-for="(data, index) in listBid.slice().reverse()"
-              v-bind:key="data.id"
+      <div v-if="isSuccess" class="accordion" id="accordionExample">
+        <div v-for="bid in listBid" v-bind:key="bid" class="accordion-item">
+          <h2 class="accordion-header" id="headingOne">
+            <button
+              class="accordion-button"
+              type="button"
+              data-bs-toggle="collapse"
+              data-bs-target="#collapseOne"
+              aria-expanded="true"
+              aria-controls="collapseOne"
             >
-              <th scope="row">{{ index + 1 }}</th>
-              <td>{{ data.caw_name }}</td>
-              <td>{{ data.norujukan }}</td>
-              <td>RM{{ data.hargabida }}</td>
-              <td>{{ data.masa_bidaan }}</td>
-            </tr>
-          </tbody>
-        </table>
+              {{ bid.caw_name }}
+            </button>
+          </h2>
+          <div
+            id="collapseOne"
+            class="accordion-collapse collapse show"
+            aria-labelledby="headingOne"
+            data-bs-parent="#accordionExample"
+          >
+            <div class="accordion-body">
+              <table class="table table-bordered table-hover">
+                <thead>
+                  <tr>
+                    <th scope="col">Bil</th>
+                    <th scope="col">No Rujukan</th>
+                    <th scope="col">Tarikh/Masa Bidaan</th>
+                    <th scope="col">Harga Bida</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(item, index) in bid.lelongbid" v-bind:key="item">
+                    <td>{{ index + 1 }}</td>
+                    <td>
+                      {{ item.norujukan }}<br /><small
+                        ><a
+                          href="#"
+                          data-bs-toggle="modal"
+                          data-bs-target="#exampleModal"
+                          v-on:click="marhunModal(item)"
+                          >{{ item.marhun }}</a
+                        ></small
+                      >
+                    </td>
+                    <td>{{ item.masa_bidaan }}</td>
+                    <td>RM{{ item.hargabida }}</td>
+                  </tr>
+                  <tr style="text-transform: uppercase">
+                    <th colspan="3">Jumlah</th>
+                    <th>RMxxxxx</th>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-else>
+        <p>Tiada Data</p>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="exampleModal"
+      tabindex="-1"
+      aria-labelledby="exampleModalLabel"
+      aria-hidden="true"
+      data-bs-backdrop="static"
+    >
+      <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="exampleModalLabel">
+              {{ theData.norujukan }}
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <table class="table table-bordered">
+              <thead>
+                <tr>
+                  <th scope="col">Bil</th>
+                  <th scope="col">Jenis</th>
+                  <th scope="col">Karat</th>
+                  <th scope="col">Berat</th>
+                  <th scope="col">Nota</th>
+                  <th scope="col">Harga Asas</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="(marhun, index) in theData.lelongbidmarhun"
+                  v-bind:key="marhun"
+                >
+                  <td>{{ index + 1 }}</td>
+                  <td>{{ marhun.marhun }}</td>
+                  <td>{{ marhun.karat }}</td>
+                  <td>{{ marhun.berat }}g</td>
+                  <td>{{ marhun.nota }}</td>
+                  <td>RM{{ marhun.hargaasas }}</td>
+                </tr>
+                <tr style="text-transform: uppercase">
+                  <th colspan="5">Jumlah</th>
+                  <th>RM{{ theData.hargaasas }}</th>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="button"
+              class="btn btn-secondary"
+              data-bs-dismiss="modal"
+            >
+              Kembali
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -46,38 +147,47 @@ export default {
   data() {
     return {
       listBid: [],
-      loading: false,
-      userId: localStorage.getItem("id"),
+      isLoading: false,
+      isSuccess: false,
+      theData: "",
+      date: "",
+      // userId: localStorage.getItem("id"),
     };
   },
   mounted: function () {
-    this.liveData();
+    this.bidRecord();
   },
   methods: {
-    liveData() {
-      this.loading = true;
+    bidRecord() {
+      this.isLoading = true;
       axios
-        .get("/bidder/bidrecord", {
+        .get("/bidRecordByCawangan/" + localStorage.getItem("id"), {
           headers: {
             Authorization: "Bearer " + localStorage.getItem("token"),
           },
           params: {
-            user_id: this.userId,
-            lelong_id: localStorage.getItem("lelong_id"),
+            lelongId: localStorage.getItem("lelong_id"),
           },
         })
         .then((response) => {
-          const n = 716298462.79;
-          const formatted = n.toLocaleString("en-MY");
-          console.log(formatted);
-          this.listBid = response.data;
-          console.log(this.listBid);
-          this.loading = false;
+          if (response.data.success == true) {
+            this.isLoading = false;
+            this.isSuccess = true;
+            this.listBid = response.data.lelongbidder;
+            console.log(response.data);
+          } else {
+            this.isLoading = false;
+            this.isSuccess = false;
+          }
         })
         .catch((error) => {
           console.log(error);
         });
     },
+    marhunModal(value) {
+      this.theData = value;
+      console.log(value);
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/bid-record/TheBidRecord.vue b/src/components/bid-record/TheBidRecord.vue
index 87e411e..d9f0488 100644
--- a/src/components/bid-record/TheBidRecord.vue
+++ b/src/components/bid-record/TheBidRecord.vue
@@ -10,7 +10,7 @@
             >
               Reload <i class="bi bi-arrow-clockwise"></i>
             </button>
-            <h5>REKOD BIDAAN HARI INI</h5>
+            <h5>REKOD BIDAAN HARI INI :  {{date}}</h5>
             <bid-record-list v-bind:key="statusComponent"></bid-record-list>
           </base-card>
         </div>
@@ -29,12 +29,25 @@ export default {
   data() {
     return {
       statusComponent: 0,
+      date: "",
     };
   },
+  mounted: function () {
+    this.getDate();
+  },
   methods: {
     reloadComponent() {
       this.statusComponent += 1;
     },
+    getDate() {
+      var today = new Date();
+      var dd = String(today.getDate()).padStart(2, "0");
+      var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
+      var yyyy = today.getFullYear();
+
+      today = yyyy + "-" + mm + "-" + dd;
+      this.date = today;
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/cart/CartListNew.vue b/src/components/cart/CartListNew.vue
index 5b6e45b..0b7955b 100644
--- a/src/components/cart/CartListNew.vue
+++ b/src/components/cart/CartListNew.vue
@@ -11,7 +11,7 @@
     <div class="row">
       <div class="col-10">
         <div class="card">
-          <div class="card-header">SENARAI TROLI</div>
+          <div class="card-header"><h5>SENARAI TROLI</h5></div>
           <div v-if="success" class="accordion" id="accordionExample">
             <div v-for="item in items" v-bind:key="item" class="accordion-item">
               <h2 class="accordion-header" id="headingOne">
diff --git a/src/components/home/ResultNotification.vue b/src/components/home/ResultNotification.vue
new file mode 100644
index 0000000..0e3fd31
--- /dev/null
+++ b/src/components/home/ResultNotification.vue
@@ -0,0 +1,69 @@
+<template>
+  <base-card
+    ><div>
+      <h4 class="text-success">Tahniah! Bidaan anda menang.</h4>
+      <h5 class="text-success">
+        Sila lihat butiran dihalaman
+        <span
+          ><router-link v-bind:to="{ name: 'result' }"
+            >keputusan</router-link
+          ></span
+        >
+      </h5>
+      <p class="fst-italic">
+        <small>*Bayaran mesti diselesaikan sebelum 3:30pm.</small>
+      </p>
+    </div></base-card
+  >
+</template>
+
+<script>
+import axios from "axios";
+import lelongId from "@/store/modules/lelongId";
+
+export default {
+  data() {
+    return {
+      // form: {
+      //   lelong_id: 4,
+      //   user_id: 9
+      // }
+      lelongId: 0,
+    };
+  },
+  mounted: function () {
+    // this.resultStatus();
+  },
+  methods: {
+    resultStatus() {
+      // console.log(localStorage.getItem("lelong_id"));
+      if (localStorage.getItem("lelong_id" == null)) {
+        this.lelongId = 0;
+      } else {
+        this.lelongId = localStorage.getItem("lelong_id");
+      }
+
+      this.loading = true;
+      axios
+        .get(
+          "/resultStatus/" + localStorage.getItem("id") + "/" + this.lelongId,
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          }
+        )
+        .then((response) => {
+          console.log(response);
+          if (response.data.success == true) {
+          } else {
+          }
+        })
+        .catch((error) => {
+          // this.loading = false;
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/home/TheHome.vue b/src/components/home/TheHome.vue
index 7e9c012..2fcc558 100644
--- a/src/components/home/TheHome.vue
+++ b/src/components/home/TheHome.vue
@@ -1,9 +1,14 @@
 <template>
   <the-template>
     <div class="container">
+      <div class="row mb-3 justify-content-center">
+        <div class="col-8">
+          <result-notification></result-notification>
+        </div>
+      </div>
       <div class="row">
         <div class="col-md-8">
-          <h4>Lelongan Hari Ini: {{date}}</h4>
+          <h4>Lelongan Hari Ini: {{ date }}</h4>
           <base-card>
             <lelong-today></lelong-today>
           </base-card>
@@ -16,13 +21,6 @@
           <div class="col">
             <h4 class="ps-3">Emas Semasa</h4>
             <current-karat></current-karat>
-            <!-- <div class="grid-container">
-              <div v-for="data in karat" v-bind:key="data.id" class="card">
-                <p>{{ data.karat }}</p>
-                <p>{{ data.keterangan }}</p>
-                <p>RM{{ data.harga }}</p>
-              </div>
-            </div> -->
           </div>
         </div>
       </div>
@@ -35,43 +33,27 @@ import axios from "axios";
 import LelongToday from "./LelongToday.vue";
 import LelongNext from "./LelongNext.vue";
 import CurrentKarat from "./CurrentKarat.vue";
+import ResultNotification from "./ResultNotification.vue";
 
 export default {
   components: {
     "lelong-today": LelongToday,
     "lelong-next": LelongNext,
     "current-karat": CurrentKarat,
+    "result-notification": ResultNotification,
   },
   name: "Karat",
   data() {
     return {
       karat: Array,
       loading: false,
-      date: ""
+      date: "",
     };
   },
   created() {
-    this.getKarat();
     this.getDate();
   },
   methods: {
-    async getKarat() {
-      this.loading = true;
-      await axios
-        .get("/karat", {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          this.karat = response.data;
-          this.loading = false;
-          console.log(response);
-        })
-        .catch((error) => {
-          console.log(error);
-        });
-    },
     getDate() {
       var today = new Date();
       var dd = String(today.getDate()).padStart(2, "0");
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 1471b8c..60087cf 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -23,11 +23,16 @@
                 v-if="!statusPayment"
                 v-on:click="clickPayButton(lelongId)"
                 class="btn btn-primary m-3 me-0"
-                >Bayar</button
               >
+                Bayar
+              </button>
             </div>
             <div class="d-flex justify-content-end">
-              <router-link v-bind:to="{name: 'receipt'}" class="btn btn-outline-primary m-2 me-0">Resit Bayaran</router-link>
+              <router-link
+                v-bind:to="{ name: 'receipt' }"
+                class="btn btn-outline-primary m-2 me-0"
+                >Resit Bayaran</router-link
+              >
             </div>
             <div>
               <div class="accordion" id="accordionExample">
@@ -61,8 +66,7 @@
                             <th scope="col">Bil</th>
                             <th scope="col">No Rujukan</th>
                             <th scope="col">Harga Bidaan</th>
-                            <th scope="col">Marhun</th>
-                            <th scope="col">Status</th>
+                            <th scope="col">Status Bayaran</th>
                           </tr>
                         </thead>
                         <tbody>
@@ -71,9 +75,16 @@
                             v-bind:key="data"
                           >
                             <td>{{ index + 1 }}</td>
-                            <td>{{ data.norujukan }}</td>
+                            <td>
+                              {{ data.norujukan }}<br /><small><a
+                                href="#"
+                                data-bs-toggle="modal"
+                                data-bs-target="#exampleModal"
+                                v-on:click="marhunModal(data)"
+                                >{{ data.marhun }}</a
+                              ></small>
+                            </td>
                             <td>RM {{ data.total_payment }}</td>
-                            <td>{{ data.marhun }}</td>
                             <td
                               class="m-1 badge rounded-pill bg-danger"
                               v-if="
@@ -116,6 +127,70 @@
             </div>
           </div>
         </div>
+        <div
+          class="modal fade"
+          id="exampleModal"
+          tabindex="-1"
+          aria-labelledby="exampleModalLabel"
+          aria-hidden="true"
+          data-bs-backdrop="static"
+        >
+          <div class="modal-dialog modal-lg modal-dialog-centered">
+            <div class="modal-content">
+              <div class="modal-header">
+                <!-- <h5 class="modal-title" id="exampleModalLabel">
+                  {{ theData.norujukan }}
+                </h5> -->
+                <button
+                  type="button"
+                  class="btn-close"
+                  data-bs-dismiss="modal"
+                  aria-label="Close"
+                ></button>
+              </div>
+              <div class="modal-body">
+                <table class="table table-bordered">
+                  <thead>
+                    <tr>
+                      <th scope="col">Bil</th>
+                      <th scope="col">Jenis</th>
+                      <th scope="col">Karat</th>
+                      <th scope="col">Berat</th>
+                      <th scope="col">Nota</th>
+                      <th scope="col">Harga Asas</th>
+                    </tr>
+                  </thead>
+                  <!-- <tbody>
+                    <tr
+                      v-for="(marhun, index) in theData.lelongbidmarhun"
+                      v-bind:key="marhun"
+                    >
+                      <td>{{ index + 1 }}</td>
+                      <td>{{ marhun.marhun }}</td>
+                      <td>{{ marhun.karat }}</td>
+                      <td>{{ marhun.berat }}g</td>
+                      <td>{{ marhun.nota }}</td>
+                      <td>RM{{ marhun.hargaasas }}</td>
+                    </tr>
+                    <tr style="text-transform: uppercase">
+                      <th colspan="5">Jumlah</th>
+                      <th>RM{{ theData.hargaasas }}</th>
+                    </tr>
+                  </tbody> -->
+                </table>
+              </div>
+              <div class="modal-footer">
+                <button
+                  type="button"
+                  class="btn btn-secondary"
+                  data-bs-dismiss="modal"
+                >
+                  Kembali
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </base-card>
   </the-template>
@@ -173,8 +248,11 @@ export default {
         });
     },
     clickPayButton(value) {
-      this.$router.push({ name: "pay", params: { lelongId: value} });
-    }
+      this.$router.push({ name: "pay", params: { lelongId: value } });
+    },
+    marhunModal(value) {
+      console.log(value);
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/result/ResultMain.vue b/src/components/result/ResultMain.vue
index e63625a..e72480b 100644
--- a/src/components/result/ResultMain.vue
+++ b/src/components/result/ResultMain.vue
@@ -14,7 +14,7 @@
           <th scope="col">Bil</th>
           <th scope="col">Tarikh</th>
           <th scope="col">Jumlah</th>
-          <th scope="col">Status</th>
+          <th scope="col">Status Bayaran</th>
           <th scope="col">Penyata</th>
         </tr>
       </thead>
@@ -67,7 +67,7 @@ export default {
     getLelong() {
       this.loading = true;
       axios
-        .get("/result-lelong", {
+        .get("/resultLelong", {
           headers: {
             Authorization: "Bearer " + localStorage.getItem("token"),
           },