From 5b8df709142529b2d435a1544122bbf39f46afe8 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Wed, 25 May 2022 09:37:55 +0800
Subject: [PATCH] add validation, ui cart & list

---
 src/components/Cart.vue         | 199 ++++++++------------------------
 src/components/Navbar.vue       |   2 +-
 src/components/Pay.vue          |   2 +-
 src/components/Profile.vue      |   4 +-
 src/components/list/Senarai.vue | 143 +++++++----------------
 src/store/modules/auth.js       |  20 ++++
 6 files changed, 115 insertions(+), 255 deletions(-)
 create mode 100644 src/store/modules/auth.js

diff --git a/src/components/Cart.vue b/src/components/Cart.vue
index 31dc3d1..8015dfc 100644
--- a/src/components/Cart.vue
+++ b/src/components/Cart.vue
@@ -1,7 +1,4 @@
 <template>
-  <!-- <div class="top-0 fixed w-full">
-  </div> -->
-
   <Navbar />
   <div
     v-if="loading"
@@ -18,7 +15,7 @@
         style="margin: 5px"
         onclick="history.back()"
       >
-        Back <i class="bi bi-backspace-fill"></i>
+        Kembali <i class="bi bi-backspace-fill"></i>
       </button>
       <div class="wrapper wrapper-content animated fadeInRight">
         <h1>Cart <i class="bi bi-cart-fill"></i></h1>
@@ -37,7 +34,6 @@
                             style="width: 145.82px; text-align: center"
                           >
                             Harga Asas
-                            <!-- {{ countDown }} -->
                           </td>
                           <td
                             width="120"
@@ -64,21 +60,12 @@
                     <table class="table shoping-cart-table">
                       <tbody>
                         <tr>
-                          <!-- <td width="90">
-                        <div class="cart-product-imitation"></div>
-                      </td> -->
                           <td class="desc">
                             <h3 class="text-primary">
                               {{ senaraiCart.datalelongbid.norujukan }}
                             </h3>
-                            <!-- <p class="small">
-                          It is a long established fact that a reader will be
-                          distracted by the readable content of a page when
-                          looking at its layout. The point of using Lorem Ipsum
-                          is
-                        </p> -->
+                           
                             <dl class="small m-b-none">
-                              <!-- <dt>Maklumat SAG</dt> -->
                               <p>
                                 Marhun:
                                 {{ senaraiCart.datalelongbid.marhun }}
@@ -96,10 +83,6 @@
                             </dl>
 
                             <div class="m-t-sm">
-                              <!-- <a href="#" class="text-muted"
-                            ><i class="fa fa-gift"></i> Add gift package</a
-                          >
-                          | -->
                               <button
                                 class="btn btn-outline-danger"
                                 data-bs-toggle="modal"
@@ -108,7 +91,6 @@
                               >
                                 Hapus
                               </button>
-                              <!-- <p>{{ senaraiCart.datalelongbid.lelongbidmarhun }}</p> -->
                             </div>
                           </td>
 
@@ -117,7 +99,6 @@
                             style="width: 145.82px; text-align: center"
                           >
                             RM{{ senaraiCart.datalelongbid.hargaasas }}
-                            <!-- <s class="small text-muted">$230,00</s> -->
                           </td>
                           <td
                             width="30"
@@ -129,12 +110,6 @@
                             width="120"
                             style="width: 145.82px; text-align: center"
                           >
-                            <!-- <input
-                          type="text"
-                          class="form-control"
-                          placeholder="+100.00"
-                          disabled
-                        /> -->
                             <button
                               class="btn btn-outline-warning"
                               data-bs-toggle="modal"
@@ -149,22 +124,6 @@
                     </table>
                   </div>
                 </div>
-               
-                <!-- <div class="ibox-footer">
-                  <table class="table shoping-cart-table">
-                    <thead>
-                      <tr>
-                        <td>Jumlah Bidaan</td>
-                        <td
-                          width="80"
-                          style="width: 145.82px; text-align: center"
-                        >
-                          RM9009009
-                        </td>
-                      </tr>
-                    </thead>
-                  </table>
-                </div> -->
               </div>
             </div>
           </div>
@@ -200,7 +159,6 @@
                 </span>
                 <div class="m-t-sm">
                   <div class="btn-group">
-                    <!-- <a href="#" class="btn btn-white btn-sm"> Batal</a> -->
                     <button
                       data-bs-toggle="modal"
                       data-bs-target="#payModal"
@@ -212,35 +170,6 @@
                 </div>
               </div>
             </div>
-            <!-- <div class="ibox" style="border: solid 0.5px">
-              <div class="ibox-content">
-                <p class="font-bold">Masa Tamat Lelongan</p>
-                <hr />
-                <div> -->
-            <!-- <a href="#" class="product-name"> Product 1</a> -->
-            <!-- <div class="small m-t-xs">
-                    <div class="d-flex justify-content-between">
-                      <p class="mb-0">Ar-Rahn Kota Bharu 2</p>
-                      <p class="mb-0">00:15:29</p>
-                    </div>
-                  </div>
-                  <hr />
-                  <div class="small m-t-xs">
-                    <div class="d-flex justify-content-between">
-                      <p class="mb-0">Ar-Rahn Rantau Panjang</p>
-                      <p class="mb-0">00:20:29</p>
-                    </div>
-                  </div>
-                  <hr />
-                  <div class="small m-t-xs">
-                    <div class="d-flex justify-content-between">
-                      <p class="mb-0">Ar-Rahn OneStop</p>
-                      <p class="mb-0">00:15:29</p>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div> -->
           </div>
         </div>
       </div>
@@ -264,6 +193,7 @@
             <button
               type="button"
               class="btn-close"
+              ref="ubahClose"
               data-bs-dismiss="modal"
               aria-label="Close"
             ></button>
@@ -272,20 +202,9 @@
           <div class="modal-body">
             <div class="row m-2">
               <div class="col">
-                <!-- <h5>No Rujukan: {{ test.norujukan }}</h5> -->
                 <p>Marhun: {{ test.marhun }}</p>
                 <p>Jumlah Berat: {{ test.berat }}g</p>
                 <table class="table table-bordered">
-                  <!-- <thead>
-                    <tr>
-                      <th scope="col">No</th>
-                      <th scope="col">Jenis Marhun</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 class="table-light">
                       <th scope="col">No</th>
@@ -306,7 +225,7 @@
                   </tbody>
                 </table>
                 <div class="row justify-content-center">
-                  <div class="col-5">
+                  <div class="col-3">
                     <label class="col-form-label text-end"
                       >Jumlah Harga Asas</label
                     >
@@ -314,11 +233,6 @@
                   <div class="col-4">
                     <div class="input-group mb-3">
                       <span class="input-group-text">RM</span>
-                      <!-- <input
-                        type="text"
-                        class="form-control"
-                        disabled
-                      /> -->
                       <div
                         style="background-color: #e9ecef"
                         class="form-control text-start justify-content-start"
@@ -330,7 +244,7 @@
                   </div>
                 </div>
                 <div class="row justify-content-center">
-                  <div class="col-5">
+                  <div class="col-3">
                     <label class="col-form-label">Tambahan Harga Bida</label>
                   </div>
                   <div class="col-4">
@@ -341,19 +255,25 @@
                         type="text"
                         id="tambahanbida"
                         class="form-control"
-                        @change="calcTotal(tambahan)"
+                        @change="calcTotal()"
                       />
                       <div
-                        style="font-size: 10px"
+                        style="font-size: 13px"
                         class="fst-italic text-danger"
+                        v-if="v$.tambahan.$error"
                       >
-                        *Minimum tambahan harga bida adalah RM1
+                        <div class="text-start">
+                          *Minimum tambahan harga bida adalah RM1.
+                        </div>
+                        <div class="text-start">
+                          *Gandaan ringgit sahaja dibenarkan.
+                        </div>
                       </div>
                     </div>
                   </div>
                 </div>
                 <div class="row justify-content-center">
-                  <div class="col-5">
+                  <div class="col-3">
                     <label class="col-form-label">Jumlah Harga Bida</label>
                   </div>
                   <div class="col-4">
@@ -368,27 +288,6 @@
                     </div>
                   </div>
                 </div>
-                <!-- <div class="row">
-                  <div class="input-group mb-3">
-                    <label class="col-form-label me-2"
-                      >Tambahan Harga Bida</label
-                    >
-                    <span class="input-group-text">RM</span>
-                    <input type="text" id="tambahanbida" class="form-control" />
-                  </div>
-                </div>
-
-                <div class="row">
-                  <div class="input-group mb-3">
-                    <label class="col-form-label me-2">Jumlah Harga Bida</label>
-                    <span class="input-group-text">RM</span>
-                    <input
-                      type="text"
-                      class="form-control"
-                      v-model="formEdit.hargabida"
-                    />
-                  </div>
-                </div> -->
               </div>
             </div>
           </div>
@@ -424,6 +323,7 @@
             <button
               type="button"
               class="btn-close"
+              ref="padamClose"
               data-bs-dismiss="modal"
               aria-label="Close"
             ></button>
@@ -514,9 +414,6 @@
                 </tr>
               </tbody>
             </table>
-            <!-- <p class="text-danger text-sm mt-3">
-              <i>*Tindakan ini tidak dapat dikembalikan</i>
-            </p> -->
           </div>
           <div class="modal-footer">
             <button
@@ -548,6 +445,8 @@
 import Navbar from "./Navbar.vue";
 import Footer from "./Footer.vue";
 import axios from "axios";
+import useVuelidate from "@vuelidate/core";
+import { required, integer, numeric, minValue } from "@vuelidate/validators";
 
 export default {
   name: "Cart",
@@ -555,15 +454,18 @@ export default {
     Navbar,
     Footer,
   },
+  // setup() {
+  //   return {  };
+  // },
   data() {
     return {
+      v$: useVuelidate(),
       loading: false,
       senaraiCarts: [],
       tambahan: "",
       test: "",
       test2: [],
-      // dataLelongBids: [],
-      // lelongBidMarhuns: [],
+      abc: "",
       data: "",
       formEdit: {
         id: "",
@@ -576,7 +478,11 @@ export default {
         user_id: "8",
         lelong_id: "20",
       },
-      // jumlah_sag: "",
+    };
+  },
+  validations() {
+    return {
+      tambahan: { required, numeric, integer, minValue: minValue(1) },
     };
   },
   computed: {
@@ -587,44 +493,29 @@ export default {
       let total = 0;
       this.senaraiCarts.forEach((val) => {
         total += parseFloat(val.hargabida);
-        //or if you pass float numbers , use parseFloat()
       });
       return total.toFixed(2);
-      // console.log(basket_total);
     },
   },
   mounted: function () {
     this.listCart();
   },
   methods: {
-    validate: function () {},
     listCart() {
       this.loading = true;
       axios
         .get("/cart/" + localStorage.getItem("id"))
         .then((response) => {
-          // let ref = this;
           this.senaraiCarts = response.data;
-
-          // this.senaraiCarts.forEach(function (senaraiCarts, index, arr) {
-          //   ref.dataLelongBids.push(arr[index].datalelongbid);
-          // });
-
-          // this.dataLelongBids.forEach(function (dataLelongBids, index, arr2) {
-          //   ref.lelongBidMarhuns.push(arr2[index].lelongbidmarhun);
-          // });
-          // console.log(this.lelongBidMarhuns);
           this.loading = false;
         })
         .catch((error) => {
           console.log(error);
         });
     },
-    calcTotal(value) {
+    calcTotal() {
       this.formEdit.hargabida =
         parseFloat(this.tambahan) + parseFloat(this.test.hargaasas);
-      // console.log(this.norujukan);
-      // console.log(value);
     },
     editModal(data) {
       this.data = data;
@@ -636,19 +527,24 @@ export default {
       console.log(this.data.hargabida);
     },
     updateItem() {
-      axios
-        .post("/updateItem", this.formEdit, {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          console.log(response);
-          location.reload();
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        axios
+          .post("/updateItem", this.formEdit, {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          })
+          .then((response) => {
+            console.log(response);
+            this.$refs.ubahClose.click();
+            location.reload();
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      } else {
+      }
     },
     deleteModal(data) {
       this.data = data;
@@ -664,6 +560,7 @@ export default {
         })
         .then((response) => {
           console.log(response);
+          this.$refs.padamClose.click();
           location.reload();
         })
         .catch((error) => {
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 354f160..e879285 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -62,7 +62,7 @@ export default {
   // },
   data() {
     return {
-      cart: localStorage.getItem("cart"),
+      // cart: localStorage.getItem("cart"),
     };
   },
   methods: {
diff --git a/src/components/Pay.vue b/src/components/Pay.vue
index 51f9d22..de8b5e3 100644
--- a/src/components/Pay.vue
+++ b/src/components/Pay.vue
@@ -20,7 +20,7 @@
       style="margin: 5px"
       onclick="history.back()"
     >
-      Back <i class="bi bi-backspace-fill"></i>
+      Kembali <i class="bi bi-backspace-fill"></i>
     </button>
     <div class="wrapper wrapper-content animated fadeInRight">
       <h1>Bayar <i class="bi bi-credit-card-2-back-fill"></i></h1>
diff --git a/src/components/Profile.vue b/src/components/Profile.vue
index 7900d28..4c1cade 100644
--- a/src/components/Profile.vue
+++ b/src/components/Profile.vue
@@ -7,7 +7,7 @@
     <div class="spinner-border" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>
-  </div>
+  </div> 
 
   <div v-else class="container">
     <button
@@ -15,7 +15,7 @@
       style="margin: 5px"
       onclick="history.back()"
     >
-      Back <i class="bi bi-backspace-fill"></i>
+      Kembali <i class="bi bi-backspace-fill"></i>
     </button>
     <h1>Profil <i class="bi bi-person-video"></i></h1>
     <div class="card">
diff --git a/src/components/list/Senarai.vue b/src/components/list/Senarai.vue
index ba279fe..96d95bb 100644
--- a/src/components/list/Senarai.vue
+++ b/src/components/list/Senarai.vue
@@ -13,7 +13,7 @@
       style="margin: 5px"
       onclick="history.back()"
     >
-      Back <i class="bi bi-backspace-fill"></i>
+      Kembali <i class="bi bi-backspace-fill"></i>
     </button>
     <h1>Senarai <i class="bi bi-card-list"></i></h1>
 
@@ -86,7 +86,6 @@
               <p class="font-bold">Info</p>
               <hr />
               <div>
-                <!-- <a href="#" class="product-name"> Product 1</a> -->
                 <div class="small m-t-xs">
                   <div class="d-flex justify-content-between">
                     <p class="mb-0">Cawangan</p>
@@ -114,34 +113,8 @@
                     <p class="mb-0">{{ lelong_details.masatamat_lelong }}</p>
                   </div>
                 </div>
-
-                <!-- <div class="small m-t-xs">
-                  Masa Tamat Lelongan: 00:15:29
-                </div> -->
-                <!-- <div class="m-t text-righ">
-                  <a href="#" class="btn btn-xs btn-outline btn-primary"
-                    >Info <i class="fa fa-long-arrow-right"></i>
-                  </a>
-                </div> -->
               </div>
               <hr />
-              <input
-                type="text"
-                class="form-control"
-                v-model="v$.cuba.$model"
-              />
-              <!-- <hr /> -->
-              <!-- <div>
-                <a href="#" class="product-name"> Product 2</a>
-                <div class="small m-t-xs">
-                  Many desktop publishing packages and web page editors now.
-                </div>
-                <div class="m-t text-righ">
-                  <a href="#" class="btn btn-xs btn-outline btn-primary"
-                    >Info <i class="fa fa-long-arrow-right"></i>
-                  </a>
-                </div>
-              </div> -->
             </div>
           </div>
         </form>
@@ -158,7 +131,6 @@
       data-bs-backdrop="static"
       data-bs-keyboard="false"
     >
-      <!-- <form @submit.prevent="validate"> -->
       <div class="modal-dialog modal-lg modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
@@ -168,6 +140,7 @@
             <button
               type="button"
               class="btn-close"
+              ref="tambahClose"
               data-bs-dismiss="modal"
               aria-label="Close"
             ></button>
@@ -175,24 +148,10 @@
 
           <div class="modal-body">
             <div class="row m-2">
-              <!-- <div class="col-2 border"></div> -->
               <div class="col">
-                <!-- <h5>Harga Asas: RM{{ norujukan.hargaasas }}</h5> -->
                 <p>Marhun: {{ norujukan.marhun }}</p>
                 <p>Jumlah Berat: {{ norujukan.berat }}g</p>
                 <table class="table table-bordered">
-                  <!-- <thead class="table-light">
-                    <tr>
-                      <th scope="col">No</th>
-                      <th scope="col">Jenis Marhun</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 >
-                  </tbody> -->
                   <tbody>
                     <tr class="table-light">
                       <th scope="col">No</th>
@@ -221,11 +180,6 @@
                   <div class="col-4">
                     <div class="input-group mb-3">
                       <span class="input-group-text">RM</span>
-                      <!-- <input
-                        type="text"
-                        class="form-control"
-                        disabled
-                      /> -->
                       <div
                         style="background-color: #e9ecef"
                         class="form-control text-start justify-content-start"
@@ -244,24 +198,23 @@
                     <div class="input-group mb-3">
                       <span class="input-group-text">RM</span>
                       <input
-                        v-model="form.test"
+                        v-model="tambahan"
                         type="text"
                         id="tambahanbida"
                         class="form-control"
                         @change="calcTotal()"
                       />
                       <div
-                        style="font-size: 10px"
+                        style="font-size: 13px"
                         class="fst-italic text-danger"
+                        v-if="v$.tambahan.$error"
                       >
-                        *Minimum tambahan harga bida adalah RM1
-                      </div>
-                      <div
-                        class="invalid-feedback"
-                        id="feedback-1"
-                        v-if="errors[0]"
-                      >
-                        {{ errors[0].message }}
+                        <div class="text-start">
+                          *Minimum tambahan harga bida adalah RM1.
+                        </div>
+                        <div class="text-start">
+                          *Gandaan ringgit sahaja dibenarkan.
+                        </div>
                       </div>
                     </div>
                   </div>
@@ -306,13 +259,12 @@
 
 <script>
 import axios from "axios";
-import useVuelidate from "@vuelidate/core";
 import Senarai from "../list/Senarai.vue";
-import { required, minLength, maxLength, between } from "@vuelidate/validators";
+import useVuelidate from "@vuelidate/core";
+import { required, integer, numeric, minValue } from "@vuelidate/validators";
+
 export default {
   components: {
-    // Navbar,
-    // Footer,
     Senarai,
   },
   data() {
@@ -327,22 +279,20 @@ export default {
       norujukan: "",
       marhuns: "",
       componentKey: 0,
+      tambahan: "",
       form: {
         user_id: localStorage.getItem("id"),
         lelongbid_id: "",
-        test: "",
         hargabida: "",
       },
       myModal: null,
       cuba: "",
-      // hargabida2: 2 + " this.form.test",
     };
   },
-  validations: {
-    cuba: {
-      required,
-      minLength: minLength(3),
-    },
+  validations() {
+    return {
+      tambahan: { required, numeric, integer, minValue: minValue(1) },
+    };
   },
   computed: {
     numberSag() {
@@ -366,56 +316,49 @@ export default {
         })
         .then((response) => {
           this.lelong_details = response.data[0];
-          // console.log(this.lelong_details);
           this.response = response.data[0].lelongbid;
           this.sags = this.response;
           this.loading = false;
-          // this.form.hargabida = this.form.test + 1;
         })
         .catch((error) => {
           console.log(error);
           this.lelong_details = [null];
-          // this.loading = false;
         });
     },
     clickModal(norujukan) {
       this.norujukan = norujukan;
       this.marhuns = this.norujukan.lelongbidmarhun;
       this.form.lelongbid_id = this.norujukan.id;
-      this.form.test = 1;
+      this.tambahan = 1;
       this.form.hargabida =
-        parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
+        parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
     },
     calcTotal() {
       this.form.hargabida =
-        parseFloat(this.form.test) + parseFloat(this.norujukan.hargaasas);
-      // console.log(this.norujukan);
-      // console.log(value);
+        parseFloat(this.tambahan) + parseFloat(this.norujukan.hargaasas);
     },
-    // forceRerender() {
-    //   this.componentKey += 1;
-    // },
-    addToCart() {
-      axios
-        .post("/addToCart", this.form, {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          console.log(response);
-          // this.Senarai.forceRerender();
-          //   this.componentKey += 1;
-          //   $ref.foo.forceRerender();
 
-          location.reload();
-          // this.liveData();
-          // this.myModal._isShown == false;
-          // call Cart component to refresh
-        })
-        .catch((error) => {
-          console.log(error);
-        });
+    addToCart() {
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        axios
+          .post("/addToCart", this.form, {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          })
+          .then((response) => {
+            console.log(response);
+            this.$refs.tambahClose.click();
+
+            location.reload();
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+      } else {
+        // alert("Failed");
+      }
     },
   },
 };
diff --git a/src/store/modules/auth.js b/src/store/modules/auth.js
new file mode 100644
index 0000000..e2e8ce1
--- /dev/null
+++ b/src/store/modules/auth.js
@@ -0,0 +1,20 @@
+const state = {
+    token:String,
+};
+
+const getters = {};
+
+const actions = {
+    fetchProfile() {
+        this.state.token = localStorage.getItem("token");
+    },
+};
+
+const mutations = {};
+
+export default {
+    state,
+    getters,
+    actions,
+    mutations
+}
\ No newline at end of file