From 761e40d76c1ff5c3e05ceaefa56d98441034678e Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Tue, 13 Dec 2022 07:57:06 +0800
Subject: [PATCH] Fix bid-record, add th to every table

---
 src/components/bid-record/BidRecordList.vue | 112 +++++++-------------
 src/components/cart/CartListNew.vue         |   2 -
 src/components/home/CurrentKaratDetail.vue  |   6 +-
 src/components/home/LelongNextDetail.vue    |   8 +-
 src/components/home/LelongTodayDetail.vue   |  12 +--
 src/components/list/ListItem.vue            |  11 +-
 6 files changed, 56 insertions(+), 95 deletions(-)

diff --git a/src/components/bid-record/BidRecordList.vue b/src/components/bid-record/BidRecordList.vue
index 2d195a5..d0bd59d 100644
--- a/src/components/bid-record/BidRecordList.vue
+++ b/src/components/bid-record/BidRecordList.vue
@@ -19,7 +19,18 @@
             <Accordion :multiple="true">
               <AccordionTab v-for="bid in listBid" v-bind:key="bid">
                 <template #header>
-                  <span>{{ bid.caw_name }}</span>
+                  <div class="flex justify-content-between w-100">
+                    <div class="align-self-center" style="margin: 5px">
+                      {{ bid.caw_name }}
+                    </div>
+                    <div class="style-info">
+                      Jumlah RM{{
+                        bid.total_bidaan
+                          ?.toString()
+                          .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                      }}
+                    </div>
+                  </div>
                 </template>
                 <div class="overflow-x-auto">
                   <table class="table text-center table-bordered table-hover">
@@ -74,70 +85,6 @@
           </template>
         </Card>
       </div>
-      <!-- <div 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"
-            >
-              {{ 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">Berat</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>
-                      <a
-                        href="#"
-                        data-bs-toggle="modal"
-                        data-bs-target="#marhunModal"
-                        v-on:click="marhunModal(item)"
-                        >{{ item.norujukan }}</a
-                      >
-                    </td>
-                    <td>{{ item.masa_bidaan }}</td>
-                    <td>{{ item.berat }}g</td>
-                    <td>
-                      RM{{
-                        item.hargabida
-                          ?.toString()
-                          .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
-                      }}
-                    </td>
-                  </tr>
-                  <tr style="text-transform: uppercase">
-                    <th colspan="3">Jumlah</th>
-                    <th>xxxg</th>
-                    <th>RMxxxxx</th>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div> -->
     </div>
     <div v-else>
       <div
@@ -203,17 +150,20 @@
                   v-bind:norujukan="theData.norujukan"
                   v-bind:filemarhun_id="theData.filemarhun[0].id"
                 ></item-master-image-modal>
+                <p v-else style="text-align: center; width: 100%">
+                  Image Unavailable
+                </p>
               </div>
               <div class="col-12 text-center lg:col-6">
                 <div class="overflow-x-auto">
                   <table class="table table-bordered">
                     <tbody>
                       <tr class="table-light">
-                        <td>Bil</td>
-                        <td style="min-width: 115px">Jenis Marhun</td>
-                        <td style="min-width: 42px">Karat</td>
-                        <td style="min-width: 42px">Berat</td>
-                        <td style="min-width: 102px">Harga Asas</td>
+                        <th>Bil</th>
+                        <th style="min-width: 115px">Jenis Marhun</th>
+                        <th style="min-width: 42px">Karat</th>
+                        <th style="min-width: 42px">Berat</th>
+                        <th style="min-width: 102px">Harga Asas</th>
                       </tr>
                       <tr
                         v-for="(marhun, index) in theData.lelongbidmarhun"
@@ -278,12 +228,12 @@
 
 <script>
 import axios from "axios";
-import ItemMasterImageModal from "../list/ItemMasterImageModal.vue"
+import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
 
 export default {
   name: "BidDetail",
   components: {
-    "item-master-image-modal": ItemMasterImageModal,
+    "item-master-image-modal": ItemMasterImageModal
   },
   data() {
     return {
@@ -307,7 +257,7 @@ export default {
       var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
       var yyyy = today.getFullYear();
 
-      today = yyyy + "-" + mm + "-" + dd;
+      today = dd + "-" + mm + "-" + yyyy;
       this.date = today;
     },
     bidRecord() {
@@ -316,7 +266,7 @@ export default {
         .get("/bidRecordByCawangan/" + localStorage.getItem("id"), {
           headers: {
             Authorization: "Bearer " + localStorage.getItem("token"),
-          }
+          },
         })
         .then((response) => {
           console.log(response);
@@ -346,4 +296,18 @@ export default {
 .container-height {
   min-height: 70vh;
 }
+
+.style-info {
+  background: #e4f8f0;
+  border: solid #1ea97c;
+  border-width: 0px;
+  color: #1ea97c;
+  font-size: 1rem;
+  align-items: center;
+  display: flex;
+  padding: 0.4rem 0.9rem;
+  margin: 0;
+  border-radius: 6px;
+  font-weight: 400;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/cart/CartListNew.vue b/src/components/cart/CartListNew.vue
index ee7a7e8..35dc99e 100644
--- a/src/components/cart/CartListNew.vue
+++ b/src/components/cart/CartListNew.vue
@@ -299,8 +299,6 @@
               class="p-button-sm"
               label="Kembali"
               data-bs-dismiss="modal"
-              icon="pi pi-angle-right"
-              iconPos="right"
             />
           </div>
         </div>
diff --git a/src/components/home/CurrentKaratDetail.vue b/src/components/home/CurrentKaratDetail.vue
index 7a95618..3f1a82d 100644
--- a/src/components/home/CurrentKaratDetail.vue
+++ b/src/components/home/CurrentKaratDetail.vue
@@ -14,9 +14,9 @@
         <table class="table table-bordered table-hover">
           <tbody>
             <tr class="table-light">
-              <td>Bil</td>
-              <td>Karat</td>
-              <td style="min-width: 100px">Harga</td>
+              <th>Bil</th>
+              <th>Karat</th>
+              <th style="min-width: 100px">Harga</th>
             </tr>
             <tr v-for="(data, index) in listKarat" v-bind:key="data.id">
               <td>{{ index + 1 }}</td>
diff --git a/src/components/home/LelongNextDetail.vue b/src/components/home/LelongNextDetail.vue
index 0126fb1..7682814 100644
--- a/src/components/home/LelongNextDetail.vue
+++ b/src/components/home/LelongNextDetail.vue
@@ -14,14 +14,14 @@
       >
         <tbody>
           <tr class="table-light">
-            <td>Bil</td>
-            <td style="min-width: 200px">Cawangan</td>
-            <td style="min-width: 120px">Tarikh</td>
+            <th>Bil</th>
+            <th style="min-width: 200px">Cawangan</th>
+            <th style="min-width: 120px" class="text-center">Tarikh</th>
           </tr>
           <tr v-for="(data, index) in response" :key="data.id">
             <td>{{ index + 1 }}</td>
             <td>{{ data.caw_name }}</td>
-            <td>{{ data.tarikh_lelong }}</td>
+            <td class="text-center">{{ data.tarikh_lelong }}</td>
           </tr>
         </tbody>
       </table>
diff --git a/src/components/home/LelongTodayDetail.vue b/src/components/home/LelongTodayDetail.vue
index bd16ffb..d11e4cb 100644
--- a/src/components/home/LelongTodayDetail.vue
+++ b/src/components/home/LelongTodayDetail.vue
@@ -12,16 +12,16 @@
         <table class="table table-sm table-bordered table-hover">
           <tbody>
             <tr class="table-light">
-              <td>Bil</td>
-              <td style="min-width: 200px">Cawangan</td>
-              <td style="min-width: 120px">Masa Mula</td>
-              <td style="min-width: 120px">Masa Tamat</td>
+              <th>Bil</th>
+              <th style="min-width: 200px">Cawangan</th>
+              <th style="min-width: 120px" class="text-center">Masa Mula</th>
+              <th style="min-width: 120px" class="text-center">Masa Tamat</th>
             </tr>
             <tr v-for="(item, index) in response" :key="item.id">
               <td>{{ index + 1 }}</td>
               <td>{{ item.caw_name }}</td>
-              <td>{{ item.masamula_lelong }}</td>
-              <td>{{ item.masatamat_lelong }}</td>
+              <td class="text-center">{{ item.masamula_lelong }}</td>
+              <td class="text-center">{{ item.masatamat_lelong }}</td>
             </tr>
           </tbody>
         </table>
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index 7734e57..f3fc204 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -212,7 +212,6 @@
                   display: flex;
                   justify-content: center;
                   align-items: center;
-                  border: 1px solid rgba(0, 0, 0, 0.125);
                   min-width: 300px;
                   max-width: 300px;
                 "
@@ -225,11 +224,11 @@
                 <table class="table table-bordered">
                   <tbody>
                     <tr class="table-light">
-                      <td>Bil</td>
-                      <td style="min-width: 115px">Jenis Marhun</td>
-                      <td style="min-width: 42px">Karat</td>
-                      <td style="min-width: 42px">Berat</td>
-                      <td style="min-width: 102px">Harga Asas</td>
+                      <th>Bil</th>
+                      <th style="min-width: 115px">Jenis Marhun</th>
+                      <th style="min-width: 42px">Karat</th>
+                      <th style="min-width: 42px">Berat</th>
+                      <th style="min-width: 102px">Harga Asas</th>
                     </tr>
                     <tr v-for="(marhun, index) in marhuns" :key="marhun.id">
                       <td>{{ index + 1 }}</td>