From 9d5ee76dab2076da854dd525accd16738d6bf3c4 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Tue, 27 Dec 2022 06:02:59 +0800
Subject: [PATCH] Add payment cdm function

---
 src/components/list/ListItem.vue       |   8 +-
 src/components/pay/ListReceipt.vue     | 180 ++++++++++++++++++++
 src/components/pay/ReceiptImage.vue    |  55 ++++++
 src/components/pay/ThePayCdm.vue       | 225 +++++++++++++++++++++++++
 src/components/result/ResultDetail.vue | 178 +++++++++++--------
 src/components/result/ResultMain.vue   |  16 +-
 src/router/index.js                    |   6 +
 7 files changed, 589 insertions(+), 79 deletions(-)
 create mode 100644 src/components/pay/ListReceipt.vue
 create mode 100644 src/components/pay/ReceiptImage.vue
 create mode 100644 src/components/pay/ThePayCdm.vue

diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index 86437de..4f2ef85 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -459,16 +459,14 @@
             Tambah Ke Troli
           </button> -->
           <Button
-            class="p-button-sm p-button-text"
+            class="p-button-sm p-button-danger m-1"
             label="Kembali"
             data-bs-dismiss="modal"
-            icon="pi pi-times"
-            iconPos="right"
           />
           <Button
-            class="p-button-sm"
+            class="p-button-sm p-button-success m-1"
             label="Tambah Ke Troli"
-            icon="pi pi-check"
+            icon="pi pi-plus-circle"
             iconPos="right"
             :loading="isLoadingButton"
             @click="addToCart()"
diff --git a/src/components/pay/ListReceipt.vue b/src/components/pay/ListReceipt.vue
new file mode 100644
index 0000000..403aa85
--- /dev/null
+++ b/src/components/pay/ListReceipt.vue
@@ -0,0 +1,180 @@
+<template>
+  <div v-if="isLoading" class="fadein animation-duration-400">
+    <div
+      class="flex align-items-center justify-content-center container-height"
+    >
+      <div class="spinner-border" role="status">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  </div>
+  <div v-else class="fadein animation-duration-400">
+    <div v-if="isSuccess">
+      <div class="p-message p-component p-message-info" role="alert">
+        <div class="p-message-wrapper">
+          <span class="blink p-message-icon pi pi pi-info-circle"></span>
+          <div class="p-message-text">
+            Gambar sedang disemak oleh bahagian pengurusan. Sila tunggu sebentar.
+          </div>
+        </div>
+      </div>
+      <div class="overflow-x-auto">
+        <table class="table table-bordered text-center table-hover">
+          <tbody>
+            <tr>
+              <th>#</th>
+              <th>ID Gambar</th>
+              <th>Masa Muat Naik</th>
+              <th>Gambar</th>
+              <th>Tindakan</th>
+            </tr>
+            <tr v-for="(receipt, index) in listReceipts" v-bind:key="receipt">
+              <td>{{ index + 1 }}</td>
+              <td>{{ receipt.id }}</td>
+              <td>{{ receipt.masa_upload }}</td>
+              <td>
+                <receipt-image v-bind:fileResitId="receipt.id"></receipt-image>
+              </td>
+              <td>
+                <button
+                  class="btn m-1 btn-danger"
+                  @click="openPhotoModal(receipt)"
+                >
+                  Padam
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <Dialog
+        header="Padam Gambar"
+        v-model:visible="isDisplayPhoto"
+        :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+        :style="{ width: '50vw' }"
+        :modal="true"
+      >
+        <div class="text-center m-2">
+          <h1><i class="bi bi-exclamation-triangle text-warning"></i></h1>
+          <h5>ADAKAH ANDA PASTI UNTUK PADAM GAMBAR INI?</h5>
+          ID Gambar: {{ selectPhoto.id }}
+          <p class="text-danger text-sm mt-3">
+            <i>*Tindakan ini tidak dapat dikembalikan</i>
+          </p>
+        </div>
+        <template #footer>
+          <Button
+            class="p-button-sm p-button-secondary"
+            label="Batal"
+            @click="closePhotoModal()"
+          />
+          <Button
+            class="p-button-sm p-button-danger"
+            label="Padam"
+            @click="deletePhotoResit(selectPhoto)"
+          />
+        </template>
+      </Dialog>
+    </div>
+    <div v-else>Tiada Gambar Yang Dimuat Naik</div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import ReceiptImage from "./ReceiptImage.vue";
+
+export default {
+  emits: ["reloadComponent"],
+
+  mounted: function () {
+    this.listReceipt();
+    // this.getInvoice();
+  },
+  components: {
+    "receipt-image": ReceiptImage,
+  },
+  data() {
+    return {
+      isLoading: false,
+      isSuccess: false,
+      listReceipts: "",
+      isDisplayPhoto: false,
+      selectPhoto: "",
+      fileresit_id: "",
+    };
+  },
+  methods: {
+    listReceipt() {
+      this.isLoading = true;
+      axios
+        .get("/listPhotoResit", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            user_id: localStorage.getItem("id"),
+            lelong_id: 4,
+          },
+        })
+        .then((response) => {
+          //   console.log("listReceipt", response);
+          this.isLoading = false;
+          if (response.data.success == true) {
+            this.isSuccess = true;
+            this.listReceipts = response.data.file_resit;
+          } else {
+            this.isSuccess = false;
+          }
+        })
+        .catch((error) => {
+          this.isLoading = false;
+          console.log(error);
+        });
+    },
+    openPhotoModal(value) {
+      this.isDisplayPhoto = true;
+      this.selectPhoto = value;
+      this.fileresit_id = value.id;
+      console.log(this.fileresit_id);
+    },
+    closePhotoModal() {
+      this.isDisplayPhoto = false;
+      this.selectPhoto = "";
+      this.fileresit_id = "";
+    },
+    deletePhotoResit(e) {
+      axios
+        .post(
+          "/deletePhotoResit",
+          { fileresit_id: this.fileresit_id },
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          }
+        )
+        .then((response) => {
+          if (response.data.success == true) {
+            this.isDisplayPhoto = false;
+            this.$swal.fire({
+              icon: "success",
+              title: "Surat Berjaya Dipadam",
+              confirmButtonColor: "#344871",
+              confirmButtonText: "OK",
+              allowOutsideClick: false,
+              allowEscapeKey: false,
+            });
+            this.$emit("reloadComponent");
+          } else {
+            console.log(response);
+          }
+        })
+        .catch((error) => {
+          this.isLoading = false;
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/pay/ReceiptImage.vue b/src/components/pay/ReceiptImage.vue
new file mode 100644
index 0000000..bb2dd44
--- /dev/null
+++ b/src/components/pay/ReceiptImage.vue
@@ -0,0 +1,55 @@
+<template>
+  <div v-if="isLoading" class="inline-block">
+    <Skeleton height="10rem" width="20rem"></Skeleton>
+  </div>
+  <Image v-else :src="dataUrl" alt="Gambar Marhun" width="250" preview>
+    <template #indicator> Lihat Gambar </template>
+  </Image>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+  props: {
+    fileResitId: "",
+  },
+  data() {
+    return {
+      image: "",
+      isLoading: false,
+      componentKey: 0,
+    };
+  },
+  computed: {
+    dataUrl() {
+      return "data:image/png;base64, " + this.image;
+    },
+  },
+  mounted: function () {
+    this.showPhotoResit();
+  },
+  methods: {
+    showPhotoResit() {
+      this.isLoading = true;
+      axios
+        .get("/showPhotoResit", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            fileresit_id: this.fileResitId,
+          },
+        })
+        .then((response) => {
+          this.isLoading = false;
+          this.image = response.data;
+        })
+        .catch((error) => {
+          console.log(error);
+          this.isLoading = false;
+        });
+    },
+  },
+};
+</script>
diff --git a/src/components/pay/ThePayCdm.vue b/src/components/pay/ThePayCdm.vue
new file mode 100644
index 0000000..3a528e6
--- /dev/null
+++ b/src/components/pay/ThePayCdm.vue
@@ -0,0 +1,225 @@
+<template>
+  <the-template>
+    <div v-if="isLoading" class="fadein animation-duration-400">
+      <div
+        class="flex align-items-center justify-content-center container-height"
+      >
+        <div class="spinner-border" role="status">
+          <span class="visually-hidden">Loading...</span>
+        </div>
+      </div>
+    </div>
+    <div v-else class="fadein animation-duration-400">
+      <div v-if="isSuccess">
+        <Card>
+          <template #title>
+            <div class="flex">
+              <Button
+                class="
+                  p-button-sm
+                  button-custom
+                  p-button-secondary p-button-outlined
+                  align-self-center
+                  mr-2
+                "
+                icon="pi pi-arrow-left"
+                v-on:click="clickCancelButton()"
+              />
+              <div class="font-normal">Pembayaran Bidaan Menggunakan CDM</div>
+            </div>
+            <div class="font-normal text-base">
+              Tarikh Lelong : {{ tarikhLelong }}
+            </div>
+          </template>
+          <template #content>
+            <!-- <select-outlet
+              v-bind:namaCawangan="lists"
+              v-bind:lelongIdProps="lelongId"
+            ></select-outlet> -->
+            <div class="font-medium p-0">No Account Bank: 10291029109209</div>
+            <span class="text-xs fst-italic text-danger">
+              *Sila buat bayaran menggunakan nombor akaun ini sahaja dan muat
+              naik gambar resit dibawah.</span
+            >
+
+            <div class="overflow-x-auto">
+              <table class="mt-5 table text-center table-bordered">
+                <tbody>
+                  <tr class="table-light">
+                    <td>Bil</td>
+                    <td style="min-width: 240px">Cawangan</td>
+                    <td style="min-width: 120px">Jumlah Harga Bida</td>
+                  </tr>
+                  <tr>
+                    <td>*</td>
+                    <td>KOTA BHARU 2</td>
+                    <td>RMXXXX</td>
+                  </tr>
+                  <tr>
+                    <td>*</td>
+                    <td>WAKAF BHARU</td>
+                    <td>RMXXXX</td>
+                  </tr>
+                  <tr class="uppercase text-danger">
+                    <th colspan="2">Jumlah Yang Perlu Di Bank-In</th>
+                    <th>RMXXXXX</th>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <Button
+              class="p-button-sm mb-3"
+              label="Muat Naik Resit"
+              icon="pi pi-plus-circle"
+              iconPos="right"
+              @click="openModalFileUpload()"
+            />
+            <list-receipt
+              v-bind:key="componentKey"
+              v-on:reloadComponent="toggleReloadComponent"
+            ></list-receipt>
+
+            <Dialog
+              header="Muat Naik Resit Baharu"
+              v-model:visible="isDisplayFileUpload"
+              :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
+              :style="{ width: '50vw' }"
+              :modal="true"
+            >
+              <div class="text-center m-2">
+                <input type="file" />
+              </div>
+              <template #footer>
+                <Button
+                  class="p-button-sm p-button-danger"
+                  label="Batal"
+                  @click="closeModalFileUpload()"
+                />
+                <Button
+                  class="p-button-sm p-button-success"
+                  label="Simpan"
+                  icon="pi pi-check"
+                  iconPos="right"
+                  @click="openModalFileUpload()"
+                />
+              </template>
+            </Dialog>
+          </template>
+        </Card>
+      </div>
+      <div v-else>
+        <div
+          class="
+            flex
+            align-items-center
+            justify-content-center
+            container-height
+          "
+        >
+          <div class="grid justify-content-center">
+            <div class="col-12 mb-4 text-center">
+              <i class="pi pi-book text-8xl text-400"></i>
+            </div>
+            <div class="col-12 text-center">
+              <span class="text-400">Tiada Data.</span>
+            </div>
+            <div class="col-12 text-center">
+              <span class="text-400"
+                >Sila rujuk halaman
+                <router-link v-bind:to="{ name: 'result' }"
+                  >Keputusan</router-link
+                >
+                untuk maklumat rekod bidaan menang.</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </the-template>
+</template>
+
+<script>
+import axios from "axios";
+import ListReceipt from "./ListReceipt.vue";
+
+export default {
+  components: {
+    "list-receipt": ListReceipt,
+  },
+  data() {
+    return {
+      lists: [],
+      tarikhLelong: "",
+      lelongId: "",
+      isLoading: false,
+      isSuccess: false,
+      isDisplayFileUpload: false,
+      componentKey: 0,
+    };
+  },
+  created() {
+    this.lelongId = this.$route.params.lelongId;
+  },
+  mounted: function () {
+    this.liveData();
+    // this.getInvoice();
+  },
+  methods: {
+    liveData() {
+      this.isLoading = true;
+      axios
+        .get(
+          "/bayarBaki/" +
+            localStorage.getItem("id") +
+            // "/1" ,
+            "/" +
+            this.lelongId,
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          }
+        )
+        .then((response) => {
+          // console.log("liveData", response);
+          this.isLoading = false;
+          if (response.data.success == true) {
+            this.isSuccess = true;
+            this.lists = response.data.data;
+            this.tarikhLelong = response.data.tarikh_lelong;
+          } else {
+          }
+        })
+        .catch((error) => {
+          this.isLoading = false;
+          console.log(error);
+        });
+    },
+    openModalFileUpload() {
+      this.isDisplayFileUpload = true;
+    },
+    closeModalFileUpload() {
+      this.isDisplayFileUpload = false;
+    },
+    clickCancelButton() {
+      this.$router.push({
+        name: "detail",
+        params: {
+          lelongId: this.lelongId,
+          statusPayment: null,
+        },
+      });
+    },
+    toggleReloadComponent() {
+      this.componentKey += 1;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.container-height {
+  min-height: 70vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 78eab4b..4f668c6 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -11,46 +11,64 @@
     <div v-else class="fadein animation-duration-400">
       <div v-if="isSuccess">
         <div class="row">
-          <Toolbar class="toolbar-custom">
-            <template #start>
-              <Button
-                class="
-                  p-button-sm
-                  button-custom
-                  p-button-secondary p-button-outlined
-                  mr-2
-                "
-                icon="pi pi-arrow-left"
-                v-on:click="clickBackButton()"
-              />
-              <div
-                class="font-normal"
-                style="font-size: 1.5rem; font-weight: 700"
-              >
-                Keputusan Tarikh Lelongan: {{ tarikhLelong }}
-              </div>
-            </template>
-
-            <template #end>
-              <!-- <Button
-                label="Resit Bayaran"
-                icon="pi pi-list"
-                iconPos="right"
-                class="p-button-sm p-button-outlined mr-2"
-              /> -->
-              <Button
-                label="Pembayaran"
-                icon="pi pi-money-bill"
-                iconPos="right"
-                class="p-button-sm"
-                :disabled="disabled == 1"
-                v-on:click="clickPayButton(lelongId)"
-              />
-            </template>
-          </Toolbar>
           <Card>
-            <!-- <template #title>
-        </template> -->
+            <template #title>
+              <!-- <div class="row"> -->
+              <div class="grid justify-content-between">
+                <div class="flex">
+                  <Button
+                    class="
+                      p-button-sm
+                      button-custom
+                      p-button-secondary p-button-outlined
+                      align-self-center
+                      mr-2
+                    "
+                    icon="pi pi-arrow-left"
+                    v-on:click="clickBackButton()"
+                  />
+                  <div
+                    class="font-normal"
+                    style="font-size: 1.5rem; font-weight: 700"
+                  >
+                    Keputusan Tarikh Lelongan: {{ tarikhLelong }}
+                  </div>
+                </div>
+                <div class="">
+                  <!-- <Button
+                    label="Bayar CDM"
+                    icon="pi pi-money-bill"
+                    iconPos="right"
+                    class="p-button-sm p-button-help mr-2"
+                    :disabled="disabled == 1"
+                    v-on:click="clickPayCdmButton(lelongId)"
+                  /> -->
+                  <Button
+                    label="Bayar FPX"
+                    icon="pi pi-dollar"
+                    iconPos="right"
+                    class="p-button-sm"
+                    :disabled="disabled == 1"
+                    v-on:click="clickPayButton(lelongId)"
+                  />
+                </div>
+              </div>
+              <div class="row" v-if="disabled != 1">
+                <div
+                  class="
+                    text-xs
+                    align-self-center
+                    fst-italic
+                    fw-lighter
+                    text-danger
+                    lg:text-right
+                  "
+                >
+                  *Sila klik butang diatas untuk lakukan bayaran.
+                </div>
+              </div>
+              <!-- </div> -->
+            </template>
             <template #content>
               <Accordion :multiple="true">
                 <AccordionTab v-for="list in lists" v-bind:key="list">
@@ -75,10 +93,12 @@
                     class="p-button-sm mb-3"
                     v-on:click="downloadPdf(list.kodcaw)"
                     v-if="list.status_payment_cawangan == 1"
-                    v-tooltip="'Muat Turun'"
                   />
                   <div class="overflow-x-auto">
-                    <table class="table text-center table-bordered">
+                    <table
+                      ref="content"
+                      class="table text-center table-bordered"
+                    >
                       <tbody>
                         <tr class="table-light">
                           <td>Bil</td>
@@ -261,13 +281,11 @@
                   </div>
                 </div>
                 <div class="modal-footer">
-                  <button
-                    type="button"
-                    class="btn btn-secondary"
+                  <Button
+                    class="p-button-sm"
+                    label="Kembali"
                     data-bs-dismiss="modal"
-                  >
-                    Kembali
-                  </button>
+                  />
                 </div>
               </div>
             </div>
@@ -308,6 +326,21 @@
         :breakpoints="{ '960px': '75vw', '640px': '90vw' }"
         :style="{ width: '50vw' }"
         :modal="true"
+        :show-layout="false"
+        :float-layout="true"
+        :enable-download="true"
+        :preview-modal="true"
+        :paginate-elements-by-height="1400"
+        filename="hee hee"
+        :pdf-quality="2"
+        :manual-pagination="false"
+        pdf-format="a4"
+        pdf-orientation="landscape"
+        pdf-content-width="800px"
+        @progress="onProgress($event)"
+        @hasStartedGeneration="hasStartedGeneration()"
+        @hasGenerated="hasGenerated($event)"
+        ref="html2Pdf"
       >
         <div class="text-center">
           <p id="hakbarang">SURAT KETERANGAN KEPEMILIKAN BARANG</p>
@@ -343,7 +376,7 @@
           </table>
         </div>
         <template #footer>
-          <Button label="Muat Turun" @click="muatTurunPdf()" />
+          <!-- <Button label="Muat Turun" @click="muatTurunPdf()" /> -->
         </template>
       </Dialog>
     </div>
@@ -354,6 +387,7 @@
 import jsPDF from "jspdf";
 import "jspdf-autotable";
 import html2canvas from "html2canvas";
+import VueHtml2pdf from "vue-html2pdf";
 import axios from "axios";
 import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
 
@@ -420,6 +454,9 @@ export default {
     clickPayButton(value) {
       this.$router.push({ name: "pay", params: { lelongId: value } });
     },
+    clickPayCdmButton(value) {
+      this.$router.push({ name: "pay-cdm", params: { lelongId: value } });
+    },
     clickBackButton() {
       this.$router.push({ name: "result" });
     },
@@ -449,6 +486,32 @@ export default {
         });
     },
     muatTurunPdf() {
+      // var doc = new jsPDF();
+
+      // doc.html(document.body, {
+      //   callback: function (doc) {
+      //     doc.save();
+      //   },
+      //   x: 1,
+      //   y: 1,
+      // });
+
+      // const doc = new jsPDF();
+      // const html = this.$refs.content.innerHTML;
+
+      // doc.html(html, 15, 15, {
+      //   width: 150,
+      // });
+
+      // doc.save("output.pdf");
+
+      this.$refs.html2Pdf.generatePdf();
+
+      // var imgData = canvas.toDataURL("image/png");
+      // var doc = new jsPDF("p", "mm");
+      // doc.addImage(imgData, "PNG", 10, 10);
+      // doc.save("sample-file.pdf");
+
       // const doc = new jsPDF();
       // doc.autoTable({ html: "#hak-barang" });
       // const html = this.$refs.hakbarang.innerHTML;
@@ -480,26 +543,7 @@ export default {
   background: #fff !important;
 }
 
-.button-custom {
-  height: 20px;
-  width: 10px !important;
-}
-
 .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/result/ResultMain.vue b/src/components/result/ResultMain.vue
index 9de6728..7752cf4 100644
--- a/src/components/result/ResultMain.vue
+++ b/src/components/result/ResultMain.vue
@@ -19,7 +19,7 @@
             <div class="font-normal">Bidaan Yang Berjaya</div>
             <div class="text-xs align-self-center fst-italic fw-lighter text-danger">
               *Pembayaran hendaklah diselesaikan SEGERA dan barang lelongan
-              mesti DITUNTUT di cawangan terlibat SEBELUM jam 4.00 petang
+              mesti DITUNTUT di cawangan terlibat SEBELUM jam 4.00 petang hari lelongan.
             </div>
           </div>
         </template>
@@ -57,12 +57,14 @@
                     ></Tag>
                   </td>
                   <td v-else-if="data.status == null">
-                    <Tag
-                      value="Belum Selesai"
-                      icon="pi pi-times"
-                      class="p-tag-rounded"
-                      severity="danger"
-                    ></Tag>
+                    <div class="blink">
+                      <Tag
+                        value="Belum Selesai"
+                        icon="pi pi-times"
+                        class="p-tag-rounded"
+                        severity="danger"
+                      ></Tag>
+                    </div>
                   </td>
                   <!-- <td>
                     <span class="text-primary underline cursor-pointer"
diff --git a/src/router/index.js b/src/router/index.js
index 541a9fc..68ac13c 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -131,6 +131,7 @@ import TheList from "../components/list/TheList.vue";
 import ResultDetail from "../components/result/ResultDetail.vue";
 import ResultReceipt from "../components/result/ResultReceipt.vue"
 import ThePay from "../components/pay/ThePay.vue";
+import ThePayCdm from "../components/pay/ThePayCdm.vue";
 import ThePolicy from "../components/policy/ThePolicy.vue"
 
 import {
@@ -213,6 +214,11 @@ const routes = [
     name: "pay",
     component: ThePay,
   },
+  {
+    path: "/pay-cdm",
+    name: "pay-cdm",
+    component: ThePayCdm,
+  },
   {
     path: "/policy",
     name: "policy",