From 9f42cb406374ec29455809ca7475d06558ef3467 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Sun, 21 Aug 2022 03:30:29 +0800
Subject: [PATCH] fix fx delete, update in cart

---
 src/components/bid-record/BidRecordList.vue |  16 +-
 src/components/cart/CartListNew.vue         | 483 +++++++++++++++++++-
 src/components/cart/TheCart.vue             |  16 +-
 src/components/result/ResultDetail.vue      |   8 +-
 4 files changed, 490 insertions(+), 33 deletions(-)

diff --git a/src/components/bid-record/BidRecordList.vue b/src/components/bid-record/BidRecordList.vue
index 026246d..6ce7030 100644
--- a/src/components/bid-record/BidRecordList.vue
+++ b/src/components/bid-record/BidRecordList.vue
@@ -36,6 +36,7 @@
                     <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>
@@ -43,21 +44,23 @@
                   <tr v-for="(item, index) in bid.lelongbid" v-bind:key="item">
                     <td>{{ index + 1 }}</td>
                     <td>
-                      {{ item.norujukan }}<br /><small
-                        ><a
+                      <small>{{ item.norujukan }}</small>
+                      <br />
+                      <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>{{ item.berat }}g</td>
                     <td>RM{{ item.hargabida }}</td>
                   </tr>
                   <tr style="text-transform: uppercase">
                     <th colspan="3">Jumlah</th>
+                    <th>xxxg</th>
                     <th>RMxxxxx</th>
                   </tr>
                 </tbody>
@@ -118,8 +121,9 @@
                   <td>RM{{ marhun.hargaasas }}</td>
                 </tr>
                 <tr style="text-transform: uppercase">
-                  <th colspan="5">Jumlah</th>
-                  <th>RM{{ theData.hargaasas }}</th>
+                  <th colspan="3">Jumlah</th>
+                  <th>{{theData.berat}}g</th>
+                  <th colspan="2"></th>
                 </tr>
               </tbody>
             </table>
diff --git a/src/components/cart/CartListNew.vue b/src/components/cart/CartListNew.vue
index 0b7955b..520ed5f 100644
--- a/src/components/cart/CartListNew.vue
+++ b/src/components/cart/CartListNew.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">
@@ -12,8 +12,12 @@
       <div class="col-10">
         <div class="card">
           <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">
+          <div v-if="isSuccess" class="accordion" id="accordionExample">
+            <div
+              v-for="item in listItems"
+              v-bind:key="item"
+              class="accordion-item"
+            >
               <h2 class="accordion-header" id="headingOne">
                 <button
                   class="accordion-button"
@@ -38,6 +42,7 @@
                       <tr>
                         <th>Bil</th>
                         <th>No Rujukan</th>
+                        <th>Berat</th>
                         <th>Harga Asas</th>
                         <th>Harga Bida</th>
                         <th>Tindakan</th>
@@ -50,21 +55,43 @@
                       >
                         <td>{{ index + 1 }}</td>
                         <td>
-                          {{ surat.norujukan }}<br /><small>{{
-                            surat.marhun
-                          }}</small>
+                          <small>{{ surat.norujukan }}</small>
+                          <br />
+                          <a
+                            href="#"
+                            data-bs-toggle="modal"
+                            data-bs-target="#marhunModal"
+                            v-on:click="openModal(surat)"
+                          >
+                            {{ surat.marhun }}
+                          </a>
                         </td>
+                        <td>{{ surat.berat }}g</td>
                         <td>RM{{ surat.hargaasas }}</td>
                         <td>RM{{ surat.hargabida }}</td>
                         <td>
-                          <button class="btn me-1 ms-1 btn-warning">Ubah</button
-                          ><button class="btn me-1 ms-1 btn-danger">
-                            Padam
+                          <button
+                            class="btn me-1 ms-1 btn-warning"
+                            data-bs-toggle="modal"
+                            data-bs-target="#editModal"
+                            v-on:click="openModal(surat)"
+                          >
+                            Ubah Bidaan
+                          </button>
+                          <button
+                            class="btn me-1 ms-1 btn-danger"
+                            data-bs-toggle="modal"
+                            data-bs-target="#deleteModal"
+                            v-on:click="openModal(surat)"
+                          >
+                            Padam Surat
                           </button>
                         </td>
                       </tr>
                       <tr style="text-transform: uppercase">
-                        <th colspan="3">JUMLAH</th>
+                        <th colspan="2">JUMLAH</th>
+                        <th>xxxg</th>
+                        <th></th>
                         <th>RMxxxxxx</th>
                         <td></td>
                       </tr>
@@ -96,17 +123,375 @@
         </div>
       </div>
     </div>
+    <!-- MARHUN MODAL -->
+    <div
+      class="modal fade"
+      id="marhunModal"
+      tabindex="-1"
+      aria-labelledby="marhunModalLabel"
+      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="marhunModalLabel">
+              {{ theSurat.norujukan }}
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+
+          <div class="modal-body">
+            <div class="row m-2">
+              <div class="col">
+                <!-- <p>Marhun: {{ theSurat.marhun }}</p>
+                <p>Jumlah Berat: {{ theSurat.berat }}g</p> -->
+                <table class="table table-bordered">
+                  <tbody>
+                    <tr class="table-light">
+                      <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>
+                    <tr
+                      v-for="(data, index) in theSurat.lelongbidmarhun"
+                      v-bind:key="data"
+                    >
+                      <td>{{ index + 1 }}</td>
+                      <td>{{ data.marhun }}</td>
+                      <td>{{ data.karat }}</td>
+                      <td>{{ data.berat }}g</td>
+                      <td>{{ data.nota }}</td>
+                      <td>RM{{ data.hargaasas }}</td>
+                    </tr>
+                    <tr style="text-transform: uppercase">
+                      <th colspan="3">Jumlah</th>
+                      <th>{{ theSurat.berat }}g</th>
+                      <th></th>
+                      <th>RM{{ theSurat.hargaasas }}</th>
+                    </tr>
+                  </tbody>
+                </table>
+                <!-- <div class="row justify-content-center">
+                  <div class="col-3">
+                    <label class="col-form-label text-end"
+                      >Jumlah Harga Asas</label
+                    >
+                  </div>
+                  <div class="col-4">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text">RM</span>
+                      <div
+                        style="background-color: #e9ecef; padding-bottom: 0px"
+                        class="form-control text-start justify-content-start"
+                        disabled
+                      >
+                        {{ theSurat.hargaasas }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row justify-content-center mb-3">
+                  <div class="col-3">
+                    <label class="col-form-label">Tambahan Harga Bida</label>
+                  </div>
+                  <div class="col-4">
+                    <div class="input-group">
+                      <span class="input-group-text">RM</span>
+                      <input
+                        type="text"
+                        id="tambahanbida"
+                        class="form-control"
+                        @keyup="calcTotal()"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-7">
+                    <div style="font-size: 15px" class="fst-italic text-danger">
+                      <div class="text-end">
+                        *Minimum tambahan harga bida adalah RM1.
+                      </div>
+                      <div class="text-end">
+                        *Gandaan ringgit sahaja dibenarkan.
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row justify-content-center">
+                  <div class="col-3">
+                    <label class="col-form-label">Jumlah Harga Bida</label>
+                  </div>
+                  <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>
+                  </div>
+                </div> -->
+              </div>
+            </div>
+            <div class="row justify-content-center">
+              <div class="col-3">
+                <label class="col-form-label">Jumlah Harga Bida</label>
+              </div>
+              <div class="col-4">
+                <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"
+                  />
+                </div>
+              </div>
+            </div>
+            <button
+              class="btn me-1 ms-1 btn-warning"
+              data-bs-toggle="modal"
+              data-bs-target="#editModal"
+              v-on:click="openModal(theSurat)"
+            >
+              Ubah Bidaan
+            </button>
+            <button
+              class="btn me-1 ms-1 btn-danger"
+              data-bs-toggle="modal"
+              data-bs-target="#deleteModal"
+              v-on:click="openModal(theSurat)"
+            >
+              Padam Surat
+            </button>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="submit"
+              class="btn btn-secondary"
+              data-bs-dismiss="modal"
+            >
+              Kembali
+            </button>
+            <!-- <button type="submit" class="btn btn-success" @click="updateItem()">
+              Terima
+            </button> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- EDIT MODAL -->
+    <div
+      class="modal fade"
+      id="editModal"
+      tabindex="-1"
+      aria-labelledby="editModalLabel"
+      aria-hidden="true"
+      data-bs-backdrop="static"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="editModalLabel">
+              {{ theSurat.norujukan }}
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              ref="editClose"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+
+          <div class="modal-body">
+            <div class="row m-2">
+              <div class="col">
+                <div class="row justify-content-center">
+                  <div class="col-6">
+                    <label class="col-form-label text-end"
+                      >Jumlah Harga Asas</label
+                    >
+                  </div>
+                  <div class="col-6">
+                    <div class="input-group mb-3">
+                      <span class="input-group-text">RM</span>
+                      <div
+                        style="background-color: #e9ecef; padding-bottom: 0px"
+                        class="form-control text-start justify-content-start"
+                        disabled
+                      >
+                        {{ theSurat.hargaasas }}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="row justify-content-center mb-3">
+                  <div class="col-6">
+                    <label class="col-form-label">Tambahan Harga Bida</label>
+                  </div>
+                  <div class="col-6">
+                    <div class="input-group">
+                      <span class="input-group-text">RM</span>
+                      <input
+                        type="text"
+                        class="form-control"
+                        v-model="tambahanBidaan"
+                        v-on:keyup="calcTotal()"
+                      />
+                    </div>
+                  </div>
+                  <div class="col-12" v-if="v$.tambahanBidaan.$error">
+                    <div style="font-size: 15px" class="fst-italic text-danger">
+                      <div class="text-end">
+                        *Minimum tambahan harga bida adalah RM1.
+                      </div>
+                      <div class="text-end">
+                        *Gandaan ringgit sahaja dibenarkan.
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <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>
+                      <input
+                        type="text"
+                        class="form-control"
+                        v-model="jumlahBidaan"
+                        disabled
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              type="submit"
+              class="btn btn-danger me-2"
+              data-bs-dismiss="modal"
+            >
+              Batal
+            </button>
+            <button
+              type="submit"
+              class="btn btn-success"
+              @click="updateItem(theSurat)"
+            >
+              Terima
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- DELETE MODAL -->
+    <div
+      class="modal fade"
+      id="deleteModal"
+      tabindex="-1"
+      aria-labelledby="deleteModalLabel"
+      aria-hidden="true"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button
+              type="button"
+              class="btn-close"
+              ref="deleteClose"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+
+          <div class="modal-body">
+            <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
+            <h5>ADAKAH ANDA PASTI?</h5>
+            <p>Padam item dalam troli.</p>
+
+            <table class="table table-bordered">
+              <tbody>
+                <tr class="bg-light">
+                  <th>SAG</th>
+                  <th>Harga Bida</th>
+                </tr>
+                <tr>
+                  <td>{{ theSurat.norujukan }}</td>
+                  <td>RM{{ theSurat.hargabida }}</td>
+                </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
+              type="submit"
+              class="btn btn-secondary me-2"
+              data-bs-dismiss="modal"
+            >
+              Kembali
+            </button>
+            <button
+              type="submit"
+              class="btn btn-danger"
+              @click="deleteItem(theSurat)"
+            >
+              Padam
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
+import useVuelidate from "@vuelidate/core";
+import { required, integer, numeric, minValue } from "@vuelidate/validators";
+
 export default {
+  emits: ["reloadComponent"],
   data() {
     return {
-      loading: false,
-      success: false,
-      items: "",
+      v$: useVuelidate(),
+      isLoading: false,
+      isSuccess: false,
+      listItems: "",
+      theSurat: "",
+      tambahanBidaan: "",
+      jumlahBidaan: "",
+      hargaAsas: "",
+      formDelete: {
+        userId: "",
+        lelongBidId: "",
+      },
+      formEdit: {
+        userId: localStorage.getItem("id"),
+        lelongBidId: "",
+        hargabida: "",
+      },
+    };
+  },
+  validations() {
+    return {
+      tambahanBidaan: { required, numeric, integer, minValue: minValue(1) },
     };
   },
   mounted: function () {
@@ -114,7 +499,7 @@ export default {
   },
   methods: {
     listCart() {
-      this.loading = true;
+      this.isLoading = true;
       axios
         .get("/cartByCawangan/" + localStorage.getItem("id"), {
           headers: {
@@ -122,12 +507,12 @@ export default {
           },
         })
         .then((response) => {
-          this.loading = false;
+          this.isLoading = false;
           if (response.data.success == true) {
-            this.success = true;
-            this.items = response.data.cart;
-          } else {
-            this.success = false;
+            this.isSuccess = true;
+            this.listItems = response.data.cart;
+          } else if (response.data.success == false) {
+            this.isSuccess = false;
           }
           console.log(response);
         })
@@ -135,6 +520,66 @@ export default {
           console.log(error);
         });
     },
+    openModal(value) {
+      this.theSurat = value;
+      this.tambahanBidaan = value.hargabida - value.hargaasas;
+      this.jumlahBidaan = value.hargabida;
+      this.hargaAsas = value.hargaasas;
+    },
+    deleteItem(value) {
+      this.formDelete.userId = localStorage.getItem("id");
+      this.formDelete.lelongBidId = value.id;
+      this.$refs.deleteClose.click();
+      this.isLoading = true;
+      axios
+        .post("/deleteItem", this.formDelete, {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.isLoading = false;
+          if (response.data.success == true) {
+            this.$emit("reloadComponent");
+          } else if (response.data.success == false) {
+            alert(response.data.message);
+            this.$emit("reloadComponent");
+          }
+        })
+        .catch((error) => {
+          this.isLoading = false;
+          console.log(error);
+        });
+    },
+    calcTotal() {
+      this.jumlahBidaan =
+        parseFloat(this.hargaAsas) + parseFloat(this.tambahanBidaan);
+    },
+    updateItem(value) {
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        this.$refs.editClose.click();
+        this.isLoading = true;
+        this.formEdit.lelongBidId = value.id;
+        this.formEdit.hargabida = this.jumlahBidaan;
+        axios
+          .post("/updateItem", this.formEdit, {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          })
+          .then((response) => {
+            console.log(response);
+            this.isLoading = false;
+            this.$emit("reloadComponent");
+          })
+          .catch((error) => {
+            console.log(error);
+            this.isLoading = false;
+          });
+      } else {
+      }
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/cart/TheCart.vue b/src/components/cart/TheCart.vue
index 67e2587..9f76a4f 100644
--- a/src/components/cart/TheCart.vue
+++ b/src/components/cart/TheCart.vue
@@ -1,14 +1,20 @@
 <template>
   <the-template>
     <!-- <base-card> -->
-      <button v-on:click="toggleReloadComponent()" class="badge btn-secondary m-2">
-        Reload <i class="bi bi-arrow-clockwise"></i>
-      </button>
-      <!-- <cart-list
+    <button
+      v-on:click="toggleReloadComponent()"
+      class="badge btn-secondary m-2"
+    >
+      Reload <i class="bi bi-arrow-clockwise"></i>
+    </button>
+    <!-- <cart-list
         v-bind:key="componentKey"
         v-on:reloadComponent="toggleReloadComponent"
       ></cart-list> -->
-      <cart-list-new v-bind:key="componentKey"></cart-list-new>
+    <cart-list-new
+      v-bind:key="componentKey"
+      v-on:reloadComponent="toggleReloadComponent"
+    ></cart-list-new>
     <!-- </base-card> -->
   </the-template>
 </template>
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 60087cf..aeee67d 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -76,13 +76,15 @@
                           >
                             <td>{{ index + 1 }}</td>
                             <td>
-                              {{ data.norujukan }}<br /><small><a
+                              <small>{{ data.norujukan }}</small>
+                              <br />
+                              <a
                                 href="#"
                                 data-bs-toggle="modal"
                                 data-bs-target="#exampleModal"
                                 v-on:click="marhunModal(data)"
-                                >{{ data.marhun }}</a
-                              ></small>
+                                >{{ data.marhun }}
+                              </a>
                             </td>
                             <td>RM {{ data.total_payment }}</td>
                             <td