From caee0760483eb018e7669b3501885cef69cdcca3 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Tue, 30 Aug 2022 08:47:45 +0800
Subject: [PATCH] add thousand separator, fix footer

---
 src/components/bid-record/BidRecordList.vue | 17 ++++++++++++++---
 src/components/cart/CartListNew.vue         | 21 ++++++++-------------
 src/components/layouts/TheHeader.vue        |  2 +-
 src/components/layouts/TheTemplate.vue      |  2 +-
 src/components/list/ListItem.vue            |  6 +++---
 5 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/bid-record/BidRecordList.vue b/src/components/bid-record/BidRecordList.vue
index 53278b4..edc4102 100644
--- a/src/components/bid-record/BidRecordList.vue
+++ b/src/components/bid-record/BidRecordList.vue
@@ -54,7 +54,7 @@
                     </td>
                     <td>{{ item.masa_bidaan }}</td>
                     <td>{{ item.berat }}g</td>
-                    <td>RM{{ item.hargabida }}</td>
+                    <td>RM{{ item.hargabida?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
                   </tr>
                   <tr style="text-transform: uppercase">
                     <th colspan="3">Jumlah</th>
@@ -127,15 +127,26 @@
                       <td>{{ marhun.marhun }}</td>
                       <td>{{ marhun.karat }}</td>
                       <td>{{ marhun.berat }}g</td>
-                      <td>RM{{ marhun.hargaasas }}</td>
+                      <td>RM{{ marhun.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
                     </tr>
                     <tr style="text-transform: uppercase">
                       <th colspan="3">Jumlah</th>
                       <th>{{ theData.berat }}g</th>
-                      <th>RM{{ theData.hargaasas }}</th>
+                      <th>RM{{ theData.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</th>
                     </tr>
                   </tbody>
                 </table>
+                <div class="row justify-content-center">
+                  <div class="col-6">
+                    <label class="col-form-label">Jumlah Harga Bida</label>
+                  </div>
+                  <div class="col-6">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text">RM</span>
+                      <span class="form-control input-group-text">{{theData.hargabida?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ''}}</span>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
diff --git a/src/components/cart/CartListNew.vue b/src/components/cart/CartListNew.vue
index 1f7f657..45b1321 100644
--- a/src/components/cart/CartListNew.vue
+++ b/src/components/cart/CartListNew.vue
@@ -65,8 +65,8 @@
                           </a>
                         </td>
                         <td>{{ surat.berat }}g</td>
-                        <td>RM{{ surat.hargaasas }}</td>
-                        <td>RM{{ surat.hargabida }}</td>
+                        <td>RM{{ surat.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
+                        <td>RM{{ surat.hargabida?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
                         <td>
                           <button
                             class="btn me-1 ms-1 btn-warning"
@@ -194,12 +194,12 @@
                       <td>{{ data.marhun }}</td>
                       <td>{{ data.karat }}</td>
                       <td>{{ data.berat }}g</td>
-                      <td>RM{{ data.hargaasas }}</td>
+                      <td>RM{{ data.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
                     </tr>
                     <tr style="text-transform: uppercase">
                       <th colspan="3">Jumlah</th>
                       <th>{{ theSurat.berat }}g</th>
-                      <th>RM{{ theSurat.hargaasas }}</th>
+                      <th>RM{{ theSurat.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</th>
                     </tr>
                   </tbody>
                 </table>
@@ -266,12 +266,7 @@
                   <div class="col-6">
                     <div class="input-group mb-3">
                       <span class="input-group-text">RM</span>
-                      <input
-                        type="text"
-                        class="form-control"
-                        disabled
-                        v-bind:value="theSurat.hargabida"
-                      />
+                      <span class="form-control input-group-text">{{theSurat.hargabida?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ''}}</span>
                     </div>
                   </div>
                 </div>
@@ -350,7 +345,7 @@
                         class="form-control text-start justify-content-start"
                         disabled
                       >
-                        {{ theSurat.hargaasas }}
+                        {{ theSurat.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}
                       </div>
                     </div>
                   </div>
@@ -413,7 +408,7 @@
               class="btn btn-success"
               @click="updateItem(theSurat)"
             >
-              Terima
+              Ubah
             </button>
           </div>
         </div>
@@ -454,7 +449,7 @@
                 </tr>
                 <tr>
                   <td>{{ theSurat.norujukan }}</td>
-                  <td>RM{{ theSurat.hargabida }}</td>
+                  <td>RM{{ theSurat.hargabida?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
                 </tr>
               </tbody>
             </table>
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index 126e923..e24becb 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -41,7 +41,7 @@
           data-bs-toggle="dropdown"
           aria-expanded="false"
         >
-          <i class="bi bi-person-circle me-1"></i>{{ username }}!
+          <i class="bi bi-person-circle me-1"></i>{{ username }}
         </div>
         <ul class="dropdown-menu">
           <li>
diff --git a/src/components/layouts/TheTemplate.vue b/src/components/layouts/TheTemplate.vue
index fd816e9..98c0007 100644
--- a/src/components/layouts/TheTemplate.vue
+++ b/src/components/layouts/TheTemplate.vue
@@ -28,7 +28,7 @@ export default {
 .content-page {
   position: relative;
   /* overflow: hidden; */
-  padding: 0 0 70px;
+  padding: 0 0 100px;
   min-height: 100vh;
 }
 
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index 461f96c..dcbb38b 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -55,7 +55,7 @@
                       <!-- <li class="old_price">{{ sag.marhun }}</li> -->
                       <li class="old_price">{{ sag.berat }}g</li>
                       <li class="old_price">
-                        <b>RM{{ sag.hargaasas }}</b>
+                        <b>RM{{ sag.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</b>
                       </li>
                     </ul>
                     <div class="cp_img">
@@ -139,7 +139,7 @@
                     <td>{{ marhun.marhun_desc }}</td>
                     <td>{{ marhun.karat }}</td>
                     <td>{{ marhun.berat }}g</td>
-                    <td>RM{{ marhun.hargaasas }}</td>
+                    <td>RM{{ marhun.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
                   </tr>
                   <tr style="text-transform: uppercase">
                     <th colspan="3">Jumlah</th>
@@ -162,7 +162,7 @@
                       class="form-control text-start justify-content-start"
                       disabled
                     >
-                      {{ norujukan.hargaasas }}
+                      {{ norujukan.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ''}}
                     </div>
                   </div>
                 </div>