From ccb0210bd05c7fbf808cc4ffffa29d54f9c3bc1e Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Tue, 24 Jan 2023 11:37:11 +0800
Subject: [PATCH] Read photo receipts in ResultDetail component

---
 src/components/pay/ThePay.vue          |  27 ++++-
 src/components/result/ResultDetail.vue | 149 +++++++++++++++++++------
 2 files changed, 138 insertions(+), 38 deletions(-)

diff --git a/src/components/pay/ThePay.vue b/src/components/pay/ThePay.vue
index 4e5ff66..a858ac2 100644
--- a/src/components/pay/ThePay.vue
+++ b/src/components/pay/ThePay.vue
@@ -13,7 +13,22 @@
       <div v-if="isSuccess">
         <Card>
           <template #title>
-            <div class="font-normal">Pembayaran Bidaan Menggunakan FPX</div>
+            <div class="font-normal">
+              <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()"
+                />
+                Pembayaran Bidaan
+              </div>
+            </div>
             <div class="font-normal text-base">
               Tarikh Lelong : {{ tarikhLelong }}
             </div>
@@ -134,7 +149,15 @@ export default {
           console.log(error);
         });
     },
-    
+    clickCancelButton() {
+      this.$router.push({
+        name: "detail",
+        params: {
+          lelongId: this.lelongId,
+          statusPayment: null,
+        },
+      });
+    },
     clickBackButton() {
       this.statusComponent -= 1;
     },
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index b625fc6..3d75105 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -35,16 +35,16 @@
                   </div>
                 </div>
                 <div class="">
-                  <Button
+                  <!-- <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"
+                    label="Pembayaran"
                     icon="pi pi-dollar"
                     iconPos="right"
                     class="p-button-sm"
@@ -61,7 +61,7 @@
                     fst-italic
                     fw-lighter
                     text-danger
-                    lg:text-right
+                    md:text-right
                   "
                 >
                   *Sila klik butang diatas untuk lakukan bayaran.
@@ -76,6 +76,33 @@
                     <div class="flex justify-content-between w-100">
                       <div class="align-self-center" style="margin: 5px">
                         {{ list.cawangan }}
+                        <span
+                          v-if="list.status_payment_cawangan.status === null"
+                        >
+                          <Tag
+                            value="Belum Bayar"
+                            icon="pi pi-times"
+                            severity="danger"
+                          ></Tag>
+                        </span>
+                        <span
+                          v-else-if="list.status_payment_cawangan.status == 9"
+                        >
+                          <Tag
+                            value="Tunggu Pengesahan"
+                            icon="pi pi-stopwatch"
+                            severity="warning"
+                          ></Tag>
+                        </span>
+                        <span
+                          v-else-if="list.status_payment_cawangan.status == 1"
+                        >
+                          <Tag
+                            value="Selesai Bayar"
+                            icon="pi pi-check"
+                            severity="success"
+                          ></Tag>
+                        </span>
                       </div>
                       <div class="style-info">
                         Jumlah RM{{
@@ -92,8 +119,87 @@
                     iconPos="right"
                     class="p-button-sm mb-3"
                     v-on:click="downloadPdf(list.kodcaw)"
-                    v-if="list.status_payment_cawangan == 1"
+                    v-if="list.status_payment_cawangan.status == 1"
                   />
+                  <div v-if="list.status_payment_cawangan.status == 1 || list.status_payment_cawangan.status == 9">
+                    <div
+                      class="m-2"
+                      v-if="
+                        list.status_payment_cawangan.payment_method_opt == 2
+                      "
+                    >
+                      <div class="">
+                        <div class="row">
+                          <div class="col-3">Cara Bayaran</div>
+                          <div class="col-5 form-control">FPX</div>
+                        </div>
+                        <div class="row">
+                          <div class="col-3">Masa Bayaran</div>
+                          <div class="col-5 form-control">
+                            {{ list.status_payment_cawangan.resit.pay_time }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="m-2"
+                      v-else-if="
+                        list.status_payment_cawangan.payment_method_opt == 1
+                      "
+                    >
+                      <div class="">
+                        <div class="row">
+                          <div class="col-3">Cara Bayaran</div>
+                          <div class="col-5 form-control">
+                            TUNAI DI CAWANGAN
+                          </div>
+                        </div>
+                        <div class="row">
+                          <div class="col-3">Masa Bayaran</div>
+                          <div class="col-5 form-control">
+                            {{ list.status_payment_cawangan.resit.pay_time }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      class="m-2"
+                      v-else-if="
+                        list.status_payment_cawangan.payment_method_opt == 3
+                      "
+                    >
+                      <div class="">
+                        <div class="row mb-1">
+                          <div class="col-3">Cara Bayaran</div>
+                          <div class="col-5 form-control">CDM</div>
+                        </div>
+                        <div class="overflow-x-auto">
+                        <table class="table text-center table-bordered">
+                          <tbody>
+                            <tr class="table-light">
+                              <td>Bil</td>
+                              <td style="min-width: 180px">Gambar</td>
+                              <td style="min-width: 180px">Masa Muat Naik</td>
+                            </tr>
+                            <tr
+                              v-for="(receipt, index) in list
+                                .status_payment_cawangan.file_resit"
+                              v-bind:key="receipt"
+                            >
+                              <td>{{ index + 1 }}</td>
+                              <td>
+                                <receipt-image
+                                  v-bind:fileResitId="receipt.id"
+                                ></receipt-image>
+                              </td>
+                              <td>{{receipt.created_at}}</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                   <div class="overflow-x-auto">
                     <table
                       ref="content"
@@ -104,7 +210,6 @@
                           <td>Bil</td>
                           <td style="min-width: 180px">No Rujukan</td>
                           <td style="min-width: 180px">Harga Bidaan</td>
-                          <td style="min-width: 220px">Status Bayaran</td>
                         </tr>
                         <tr v-for="(data, index) in list.sag" :key="data">
                           <td>{{ index + 1 }}</td>
@@ -126,35 +231,6 @@
                                 .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                             }}
                           </td>
-                          <td
-                            v-if="
-                              data.status_payment === null ||
-                              data.status_payment == 0
-                            "
-                          >
-                            <Tag
-                              value="Belum Bayar"
-                              icon="pi pi-times"
-                              class="p-tag-rounded"
-                              severity="danger"
-                            ></Tag>
-                          </td>
-                          <td v-if="data.status_payment === 2">
-                            <Tag
-                              value="Tunggu Pengesahan"
-                              icon="pi pi-stopwatch"
-                              class="p-tag-rounded"
-                              severity="warning"
-                            ></Tag>
-                          </td>
-                          <td v-if="data.status_payment === 1">
-                            <Tag
-                              value="Selesai"
-                              icon="pi pi-check"
-                              class="p-tag-rounded"
-                              severity="success"
-                            ></Tag>
-                          </td>
                         </tr>
                         <tr style="text-transform: uppercase">
                           <td colspan="2">Jumlah</td>
@@ -165,7 +241,6 @@
                                 .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
                             }}
                           </td>
-                          <td class="table-light"></td>
                         </tr>
                       </tbody>
                     </table>
@@ -390,10 +465,12 @@ import html2canvas from "html2canvas";
 import VueHtml2pdf from "vue-html2pdf";
 import axios from "axios";
 import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
+import ReceiptImage from "../pay/ReceiptImage.vue"
 
 export default {
   components: {
     "item-master-image-modal": ItemMasterImageModal,
+    "receipt-image": ReceiptImage,
   },
   data() {
     return {