From b8290eec889c3b673b16fac7643ade31e57c53b4 Mon Sep 17 00:00:00 2001
From: Amir <amirhassan.hamzan@gmail.com>
Date: Tue, 24 Jan 2023 15:54:57 +0800
Subject: [PATCH] Limit user upload image to 7

---
 src/components/pay/ReceiptImage.vue    |  2 +-
 src/components/result/ResultDetail.vue | 87 +++++++++++++-------------
 2 files changed, 44 insertions(+), 45 deletions(-)

diff --git a/src/components/pay/ReceiptImage.vue b/src/components/pay/ReceiptImage.vue
index 9acd4db..1e2c055 100644
--- a/src/components/pay/ReceiptImage.vue
+++ b/src/components/pay/ReceiptImage.vue
@@ -2,7 +2,7 @@
   <div v-if="isLoading" class="spinner-border" role="status">
     <span class="visually-hidden">Loading...</span>
   </div>
-  <Image v-else :src="dataUrl" alt="Gambar Marhun" width="250" preview>
+  <Image v-else :src="dataUrl" alt="Gambar Marhun" width="100" preview>
     <template #indicator> Lihat Gambar </template>
   </Image>
 </template>
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 9cdb53b..61f8fb5 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -13,7 +13,6 @@
         <div class="row">
           <Card>
             <template #title>
-              <!-- <div class="row"> -->
               <div class="grid justify-content-between">
                 <div class="flex">
                   <Button
@@ -67,7 +66,6 @@
                   *Sila klik butang diatas untuk lakukan bayaran.
                 </div>
               </div>
-              <!-- </div> -->
             </template>
             <template #content>
               <Accordion :multiple="true">
@@ -133,14 +131,13 @@
                         list.status_payment_cawangan.payment_method_opt == 2
                       "
                     >
-                      <div class="">
+                      <div>
                         <div class="row">
-                          <div class="col-3">Cara Bayaran</div>
-                          <div class="col-5 form-control">FPX</div>
+                          <div>Cara Bayaran: FPX</div>
                         </div>
                         <div class="row">
-                          <div class="col-3">Masa Bayaran</div>
-                          <div class="col-5 form-control">
+                          <div>
+                            Masa Bayaran:
                             {{ list.status_payment_cawangan.resit.pay_time }}
                           </div>
                         </div>
@@ -152,35 +149,36 @@
                         list.status_payment_cawangan.payment_method_opt == 1
                       "
                     >
-                      <div class="">
+                      <div>
                         <div class="row">
-                          <div class="col-3">Cara Bayaran</div>
-                          <div class="col-5 form-control">
-                            TUNAI DI CAWANGAN
-                          </div>
+                          <div>Cara Bayaran: TUNAI DI CAWANGAN</div>
                         </div>
                         <div class="row">
-                          <div class="col-3">Masa Bayaran</div>
-                          <div class="col-5 form-control">
+                          <div>
+                            Masa Bayaran:
                             {{ list.status_payment_cawangan.resit.pay_time }}
                           </div>
                         </div>
                       </div>
                     </div>
                     <div
-                      class="m-2"
+                      class="mt-2 mb-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="row mb-3">
+                          <div>Cara Bayaran: CDM</div>
                         </div>
-                        <div v-if="list.status_payment_cawangan.status == 9">
+                        <div
+                          v-if="
+                            list.status_payment_cawangan.status == 9 &&
+                            list.status_payment_cawangan.file_resit.length < 7
+                          "
+                        >
                           <Button
-                            class="p-button-sm mb-3"
+                            class="p-button-sm mb-1"
                             label="Muat Naik Resit"
                             icon="pi pi-plus-circle"
                             iconPos="right"
@@ -217,29 +215,30 @@
                             </template>
                           </Dialog>
                         </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.masa_upload }}</td>
-                              </tr>
-                            </tbody>
-                          </table>
+                        <div class="card">
+                          <div class="card-header">Gambar Resit</div>
+                          <div
+                            class="
+                              card-body
+                              d-flex
+                              overflow-x-auto
+                              align-items-center
+                            "
+                          >
+                            <div
+                              class="m-2"
+                              v-for="receipt in list.status_payment_cawangan
+                                .file_resit"
+                              v-bind:key="receipt"
+                            >
+                              <div class="row text-center">
+                                <receipt-image
+                                  v-bind:fileResitId="receipt.id"
+                                ></receipt-image>
+                                <div>{{ receipt.masa_upload }}</div>
+                              </div>
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>