From 64bfad8f09bc1fac6525b70fa47e33e1c02e2a50 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Tue, 11 Oct 2022 04:41:20 +0800
Subject: [PATCH] fix list

---
 src/components/cart/CartListNew.vue |  56 +++--
 src/components/list/ListItem.vue    | 378 +++++++++++++++++++---------
 src/components/list/TheList.vue     |   2 +-
 3 files changed, 302 insertions(+), 134 deletions(-)

diff --git a/src/components/cart/CartListNew.vue b/src/components/cart/CartListNew.vue
index 882f11d..3556949 100644
--- a/src/components/cart/CartListNew.vue
+++ b/src/components/cart/CartListNew.vue
@@ -980,11 +980,15 @@ export default {
             this.$emit("reloadComponent");
           } else if (response.data.success == false) {
             console.log(response);
-            this.$toast.add({
-              severity: "error",
-              summary: "Error",
-              detail: "Please refresh page to get latest data.",
-              life: 3000,
+            this.$swal.fire({
+              toast: true,
+              icon: "error",
+              title: "Gagal! Sila refresh page semula.",
+              animation: false,
+              position: "bottom",
+              showConfirmButton: false,
+              timer: 5000,
+              timerProgressBar: true,
             });
             this.$emit("reloadComponent");
           }
@@ -1032,11 +1036,15 @@ export default {
           })
           .catch((error) => {
             console.log(error);
-            this.$toast.add({
-              severity: "error",
-              summary: "Error",
-              detail: "Please refresh page to get latest data.",
-              life: 3000,
+            this.$swal.fire({
+              toast: true,
+              icon: "error",
+              title: "Gagal! Sila refresh page semula.",
+              animation: false,
+              position: "bottom",
+              showConfirmButton: false,
+              timer: 5000,
+              timerProgressBar: true,
             });
             this.isLoadingUbah = false;
           });
@@ -1076,11 +1084,15 @@ export default {
               } else {
                 this.isLoadingDaftar = false;
                 console.log(response);
-                this.$toast.add({
-                  severity: "error",
-                  summary: "Error",
-                  detail: "Please refresh page to get latest data.",
-                  life: 3000,
+                this.$swal.fire({
+                  toast: true,
+                  icon: "error",
+                  title: "Gagal! Sila refresh page semula.",
+                  animation: false,
+                  position: "bottom",
+                  showConfirmButton: false,
+                  timer: 5000,
+                  timerProgressBar: true,
                 });
               }
             })
@@ -1088,11 +1100,15 @@ export default {
               // this.$refs.daftarBidaanClose.click();
               // this.loading = false;
               console.log(error);
-              this.$toast.add({
-                severity: "error",
-                summary: "Error",
-                detail: "Please refresh page to get latest data.",
-                life: 3000,
+              this.$swal.fire({
+                toast: true,
+                icon: "error",
+                title: "Gagal! Sila refresh page semula.",
+                animation: false,
+                position: "bottom",
+                showConfirmButton: false,
+                timer: 5000,
+                timerProgressBar: true,
               });
             });
         } else {
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index ba068fe..5850bcd 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     v-if="loading"
-    class="container"
+    class="row fadein animation-duration-400"
     style="
       min-height: 70vh;
-      min-width: 70vh;
+      min-width: 90vh;
       display: grid;
       place-items: center;
     "
@@ -14,87 +14,75 @@
     </div>
   </div>
 
-  <div v-else class="row">
+  <div v-else class="fadein animation-duration-400">
     <div v-if="this.status">
-      <div class="">
-        <div class="container">
-          <div class="text-center">
-            <InlineMessage class="m-1" severity="info">
-              Jumlah Surat: {{ numberSag }}
-            </InlineMessage>
-            <InlineMessage class="m-1" severity="info">
-              Masa Mula Lelong: {{ lelong_details.masamula_lelong }}
-            </InlineMessage>
-            <InlineMessage class="m-1" severity="info">
-              Masa Tamat Lelong: {{ lelong_details.masatamat_lelong }}
-            </InlineMessage>
-          </div>
-          <div class="row clearfix">
-            <div v-for="sag in sags" :key="sag.id" class="col-12 lg:col-4">
-              <!-- <div class="card card-body"> -->
-              <Card>
-                <template #content>
-                  <div class="">
-                    <div
-                      class="mb-3 product-image"
-                      style="border: 1px solid rgba(0, 0, 0, 0.125)"
-                    >
-                      -gambar marhun-
-                    </div>
-                    <div class="">
-                      <div class="product_details">
-                        <div class="grid text-center">
-                          <div class="col-12">
-                            <h6 class="text-primary">
-                              {{ sag.norujukan }}
-                            </h6>
-                          </div>
-                          <div class="col-12">
-                            <p>{{ sag.berat }}g</p>
-                          </div>
-                        </div>
-                        <!-- <ul class="product_price list-unstyled">
-                          <li class="old_price">{{ sag.berat }}g</li>
-                          <li class="old_price">
-                            <b
-                              >RM{{
-                                sag.hargaasas
-                                  ?.toString()
-                                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
-                              }}</b
-                            >
-                          </li>
-                        </ul> -->
-                        <div class="flex justify-content-between">
-                          <div class="text-2xl font-bold">
-                            RM{{
-                              sag.hargaasas
-                                ?.toString()
-                                .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
-                            }}
-                          </div>
-
-                          <Button
-                            data-bs-toggle="modal"
-                            data-bs-target="#bidaModal"
-                            @click="clickModal(sag)"
-                            icon="pi pi-plus p-button-sm"
-                            class="p-button-rounded"
-                          />
-                        </div>
+      <!-- <div class="text-center">
+        <InlineMessage class="m-1" severity="info">
+          Jumlah Surat: {{ numberSag }}
+        </InlineMessage>
+        <InlineMessage class="m-1" severity="info">
+          Masa Mula Lelong: {{ lelong_details.masamula_lelong }}
+        </InlineMessage>
+        <InlineMessage class="m-1" severity="info">
+          Masa Tamat Lelong: {{ lelong_details.masatamat_lelong }}
+        </InlineMessage>
+      </div> -->
+      <div class="row justify-content-center">
+        <div
+          v-for="sag in sags"
+          :key="sag.id"
+          class="col-10 sm:col-8 md:col-6 lg:col-4"
+        >
+          <Card>
+            <template #content>
+              <div class="overflow-x-auto">
+                <div class="flex justify-content-center">
+                  <div
+                    class="flex align-items-center"
+                    style="
+                      border: 1px solid rgba(0, 0, 0, 0.125);
+                      height: 250px;
+                      width: 250px;
+                      min-height: 250px;
+                      min-width: 250px;
+                    "
+                  ></div>
+                </div>
+                <div class="">
+                  <div class="product_details">
+                    <div class="grid text-center">
+                      <div class="col-12 mt-2 pb-0 text-primary">
+                        {{ sag.norujukan }}
                       </div>
+                      <div class="col-12 pt-0">{{ sag.berat }}g</div>
+                    </div>
+                    <div class="flex justify-content-between">
+                      <div class="text-2xl align-self-center font-bold">
+                        RM{{
+                          sag.hargaasas
+                            ?.toString()
+                            .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                        }}
+                      </div>
+
+                      <Button
+                        data-bs-toggle="modal"
+                        data-bs-target="#bidaModal"
+                        @click="clickModal(sag)"
+                        icon="pi pi-plus p-button-sm"
+                        class="p-button-rounded p-custom-button"
+                      />
                     </div>
                   </div>
-                </template>
-              </Card>
-            </div>
-            <!-- </div> -->
-          </div>
+                </div>
+              </div>
+            </template>
+          </Card>
         </div>
       </div>
     </div>
     <div v-else>
-      <div class="container">
+      <div class="row">
         <Message severity="info" :closable="false"
           >Sila isi ruangan pilih cawangan di atas.
         </Message>
@@ -108,21 +96,7 @@
                   <div class="flex justify-content-center mt-3">
                     <Skeleton width="10rem"></Skeleton>
                   </div>
-                  <div class="flex justify-content-between mt-3">
-                    <Skeleton width="4rem" height="2rem"></Skeleton>
-                    <Skeleton width="4rem" height="2rem"></Skeleton>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="col-12 p-3 lg:col-4">
-            <div class="card p-2">
-              <div class="field">
-                <div class="custom-skeleton">
-                  <div class="flex mb-3"></div>
-                  <Skeleton width="100%" height="150px"></Skeleton>
-                  <div class="flex justify-content-center mt-3">
+                  <div class="flex justify-content-center mt-1">
                     <Skeleton width="10rem"></Skeleton>
                   </div>
                   <div class="flex justify-content-between mt-3">
@@ -142,6 +116,29 @@
                   <div class="flex justify-content-center mt-3">
                     <Skeleton width="10rem"></Skeleton>
                   </div>
+                  <div class="flex justify-content-center mt-1">
+                    <Skeleton width="10rem"></Skeleton>
+                  </div>
+                  <div class="flex justify-content-between mt-3">
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 p-3 lg:col-4">
+            <div class="card p-2">
+              <div class="field">
+                <div class="custom-skeleton">
+                  <div class="flex mb-3"></div>
+                  <Skeleton width="100%" height="150px"></Skeleton>
+                  <div class="flex justify-content-center mt-3">
+                    <Skeleton width="10rem"></Skeleton>
+                  </div>
+                  <div class="flex justify-content-center mt-1">
+                    <Skeleton width="10rem"></Skeleton>
+                  </div>
                   <div class="flex justify-content-between mt-3">
                     <Skeleton width="4rem" height="2rem"></Skeleton>
                     <Skeleton width="4rem" height="2rem"></Skeleton>
@@ -181,7 +178,129 @@
         </div>
 
         <div class="modal-body">
-          <div class="row m-2">
+          <div class="grid">
+            <div
+              class="col-12 lg:col-6"
+              style="
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                border: 1px solid rgba(0, 0, 0, 0.125);
+                min-height: 300px;
+                min-width: 300px;
+                max-height: 600px;
+                max-width: 600px;
+              "
+            >
+              -gambar marhun-
+            </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>
+                    </tr>
+                    <tr v-for="(marhun, index) in marhuns" :key="marhun.id">
+                      <td>{{ index + 1 }}</td>
+                      <td>{{ marhun.marhun_desc }}</td>
+                      <td>{{ marhun.karat }}</td>
+                      <td>{{ marhun.berat }}g</td>
+                      <td>
+                        RM{{
+                          marhun.hargaasas
+                            ?.toString()
+                            .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                        }}
+                      </td>
+                    </tr>
+                    <tr style="text-transform: uppercase">
+                      <td colspan="3">Jumlah</td>
+                      <td>{{ norujukan.berat }}g</td>
+                      <td class="disabled-bg"></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+              <div class="row justify-content-center">
+                <div class="col-6">
+                  <label class="col-form-label text-end"
+                    >Jumlah Harga Asas (A)</label
+                  >
+                </div>
+                <div class="col-6">
+                  <div class="input-group mb-3">
+                    <span class="input-group-text">RM</span>
+                    <div
+                      style="background-color: #e9ecef"
+                      class="form-control text-start justify-content-start"
+                      disabled
+                    >
+                      {{
+                        norujukan.hargaasas
+                          ?.toString()
+                          .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                      }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="row justify-content-center">
+                <div class="col-6">
+                  <label class="col-form-label text-end">Jumlah Harga Bida (B)</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="form.hargabida"
+                      @keyup="calcDiff()"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div class="row justify-content-center mb-3">
+                <div class="col-6">
+                  <label class="col-form-label text-end">Beza (B-A)</label>
+                </div>
+                <div class="col-6">
+                  <div class="input-group">
+                    <span class="input-group-text">RM</span>
+                    <input
+                      v-model="tambahan"
+                      type="text"
+                      id="tambahanbida"
+                      class="form-control"
+                      disabled
+                    />
+                  </div>
+                </div>
+                <div class="row justify-content-end">
+                  <div class="col-7">
+                    <div
+                      style="font-size: 13px"
+                      class="fst-italic text-danger"
+                      v-if="v$.tambahan.$error"
+                    >
+                      <div class="text-end">
+                        *Minimum beza harga adalah RM1.
+                      </div>
+                      <div class="text-end">
+                        *Gandaan ringgit sahaja dibenarkan.
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- <div class="row m-2">
             <div
               class="col"
               style="
@@ -196,8 +315,6 @@
               -gambar marhun-
             </div>
             <div class="col">
-              <!-- <p>Marhun: {{ norujukan.marhun }}</p> -->
-              <!-- <p>Jumlah Berat: {{ norujukan.berat }}g</p> -->
               <table class="table table-bordered">
                 <tbody>
                   <tr class="table-light">
@@ -300,10 +417,10 @@
                 </div>
               </div>
             </div>
-          </div>
+          </div> -->
         </div>
         <div class="modal-footer">
-          <button
+          <!-- <button
             type="submit"
             class="btn btn-danger me-2"
             data-bs-dismiss="modal"
@@ -312,7 +429,22 @@
           </button>
           <button type="submit" class="btn btn-success" @click="addToCart()">
             Tambah Ke Troli
-          </button>
+          </button> -->
+          <Button
+            class="p-button-sm p-button-text"
+            label="Kembali"
+            data-bs-dismiss="modal"
+            icon="pi pi-times"
+            iconPos="right"
+          />
+          <Button
+            class="p-button-sm"
+            label="Tambah Ke Troli"
+            icon="pi pi-check"
+            iconPos="right"
+            :loading="isLoadingButton"
+            @click="addToCart()"
+          />
         </div>
       </div>
     </div>
@@ -322,7 +454,6 @@
 
 <script>
 import axios from "axios";
-// import Senarai from "../list/Senarai.vue";
 import useVuelidate from "@vuelidate/core";
 import { required, integer, numeric, minValue } from "@vuelidate/validators";
 import { mapGetters, mapActions } from "vuex";
@@ -338,6 +469,7 @@ export default {
       layout: "grid",
       status: false,
       v$: useVuelidate(),
+      isLoadingButton: false,
       loading: false,
       tambahabError: false,
       errors: [],
@@ -435,8 +567,7 @@ export default {
     addToCart() {
       this.v$.$validate();
       if (!this.v$.$error) {
-        this.$refs.tambahClose.click();
-        this.loading = true;
+        this.isLoadingButton = true;
         axios
           .post("/addToCart", this.form, {
             headers: {
@@ -444,24 +575,49 @@ export default {
             },
           })
           .then((response) => {
-            console.log(response);
-            this.loading = false;
-            this.$emit("reloadComponent");
+            this.isLoadingButton = false;
+            if (response.data.success == true) {
+              this.$refs.tambahClose.click();
+              this.$emit("reloadComponent");
+              this.$swal.fire({
+                toast: true,
+                icon: "success",
+                title: "Berjaya Tambah Ke Troli",
+                animation: false,
+                position: "bottom",
+                showConfirmButton: false,
+                timer: 5000,
+                timerProgressBar: true,
+              });
+            } else {
+              console.log(response);
+              this.$swal.fire({
+                toast: true,
+                icon: "error",
+                title: "Gagal! Sila refresh page semula.",
+                animation: false,
+                position: "bottom",
+                showConfirmButton: false,
+                timer: 5000,
+                timerProgressBar: true,
+              });
+            }
+            // location.reload();
+          })
+          .catch((error) => {
+            // this.loading = false;
+            this.isLoadingButton = false;
+            console.log(error);
             this.$swal.fire({
               toast: true,
-              icon: "success",
-              title: "Berjaya Tambah Ke Troli",
+              icon: "error",
+              title: "Gagal! Sila refresh page semula.",
               animation: false,
               position: "bottom",
               showConfirmButton: false,
               timer: 5000,
               timerProgressBar: true,
             });
-            // location.reload();
-          })
-          .catch((error) => {
-            this.loading = false;
-            console.log(error);
           });
       } else {
         // alert("Failed");
@@ -477,10 +633,6 @@ export default {
   background-color: rgb(233, 236, 239);
 }
 
-::v-deep(.p-dataview .p-dataview-content) {
-  background: none;
-}
-
 .product-image {
   min-height: 200px;
   min-width: 200px;
diff --git a/src/components/list/TheList.vue b/src/components/list/TheList.vue
index 7aca62a..5fe6da2 100644
--- a/src/components/list/TheList.vue
+++ b/src/components/list/TheList.vue
@@ -20,7 +20,7 @@
       "
     >
       <div v-if="isSuccess">
-        <div class="container">
+        <div class="row">
           <div class="input-group mb-3">
             <span class="input-group-text" id="basic-addon3">Cawangan</span>
             <select class="form-select" @change="pilihCawangan($event)">