From df0e02b2445d32fe095b10fcb040a709f46d5457 Mon Sep 17 00:00:00 2001
From: Edmond Teh <edmondtm@gmail.com>
Date: Tue, 25 Aug 2020 13:17:43 +0800
Subject: [PATCH] conditionally show legacy and new invoice

---
 .../assets/js/pages/booking/uploadPo.vue      | 223 +++++++++---------
 1 file changed, 116 insertions(+), 107 deletions(-)

diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 482bd3cc..2237d763 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -1,122 +1,127 @@
 <template>
   <el-main>
-    <x2-progress-track v-if="(trackerConfig.term == 'x2_cash' || trackerConfig.term == 'x2_cheque' || trackerConfig.term == 'x2_ba')" v-model="trackerConfig" />
-    <progress-track v-else v-model="trackerConfig" />
-    <h1>Transfer Completed</h1>
-    <h2> Please upload your purchase order </h2>
-    <!-- upload card -->
-    <div class="row">
-      <div class="col">
-        <div class="card">
-          <div class="card-header">Upload PO
-            <a href="/CIEF-X-Plan-PO-Format-15.0.xlsm" target="_blank">(Download Po Format)</a>
-          </div>
-          <!-- upload image -->
-          <div class="card-body">
-
-            <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :auto-upload="false" :on-change="beforeFileUpload" :on-exceed="handleExceed" :on-preview="handlePreview" :on-remove="handleRemove" :on-error="uploadError" class="upload-demo  uploadAreaOne" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" drag multiple>
-              <i class="el-icon-upload" />
-              <div class="el-upload__text">Drop file here or
-                <em>click to upload</em>
-              </div>
-              <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
-            </el-upload>
-            <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :file-list="fileList" multiple class="upload-demo uploadAreaTwo" >
-              <el-button size="small" type="primary">Click to upload</el-button>
-              <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
-            </el-upload>
-
-            <div class="bottom clearfix" style="text-align:right;">
-              <el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
+    <div v-if="isLegacy" id="legacy-invoice">
+      <x2-progress-track v-if="(trackerConfig.term == 'x2_cash' || trackerConfig.term == 'x2_cheque' || trackerConfig.term == 'x2_ba')" v-model="trackerConfig" />
+      <progress-track v-else v-model="trackerConfig" />
+      <h1>Transfer Completed</h1>
+      <h2> Please upload your purchase order </h2>
+      <!-- upload card -->
+      <div class="row">
+        <div class="col">
+          <div class="card">
+            <div class="card-header">Upload PO
+              <a href="/CIEF-X-Plan-PO-Format-15.0.xlsm" target="_blank">(Download Po Format)</a>
+            </div>
+            <!-- upload image -->
+            <div class="card-body">
+
+              <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :auto-upload="false" :on-change="beforeFileUpload" :on-exceed="handleExceed" :on-preview="handlePreview" :on-remove="handleRemove" :on-error="uploadError" class="upload-demo  uploadAreaOne" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" drag multiple>
+                <i class="el-icon-upload" />
+                <div class="el-upload__text">Drop file here or
+                  <em>click to upload</em>
+                </div>
+                <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
+              </el-upload>
+              <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :file-list="fileList" multiple class="upload-demo uploadAreaTwo" >
+                <el-button size="small" type="primary">Click to upload</el-button>
+                <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 500kb</div>
+              </el-upload>
+
+              <div class="bottom clearfix" style="text-align:right;">
+                <el-button :loading="loading_btn" type="primary" @click="uploadPo">Submit</el-button>
+              </div>
+              <!-- upload image end -->
+            </div>
+          </div>
+        </div>
+        <div class="col">
+          <div class="card">
+            <div class="card-header">China Bank Slip</div>
+            <div class="card-body">
+              <a :href="getURL(booking_details.china_bankslip_path)" target="_blank" >
+                <img v-if="isImage(booking_details.china_bankslip_path)" :src="booking_details.china_bankslip_path" class="image">
+                <p v-else>Download</p>
+              </a>
             </div>
-            <!-- upload image end -->
           </div>
         </div>
       </div>
-      <div class="col">
-        <div class="card">
-          <div class="card-header">China Bank Slip</div>
+      <!-- order details -->
+      <div class="card">
+        <div class="card-header">Order Details</div>
+        <div class="card-body">
+          <div class="row">
+            <div class="col">
+              <table class="table table-striped">
+                <tbody>
+                  <tr>
+                    <td>Ref No :</td>
+                    <td>{{ booking_details.id }}</td>
+                  </tr>
+                  <tr>
+                    <td>Date :</td>
+                    <td>{{ booking_details.created_at }}</td>
+                  </tr>
+                  <tr>
+                    <td>Customer Marking :</td>
+                    <td>{{ booking_details.marking }}</td>
+                  </tr>
+                  <tr>
+                    <td>Term: </td>
+                    <td>{{ booking_details.term }}</td>
+                  </tr>
+                  <tr>
+                    <td>Beneficiary Account : </td>
+                    <td>{{ booking_details.account_name }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div class="col">
+              <table class="table table-striped">
+                <tbody>
+                  <tr>
+                    <td>CNY/RMB :</td>
+                    <td>CNY {{ booking_details.amount }}</td>
+                  </tr>
+                  <tr>
+                    <td>+ Service Charge :</td>
+                    <td>CNY {{ booking_details.service_charge }}</td>
+                  </tr>
+                  <tr>
+                    <td>RATE :</td>
+                    <td>{{ booking_details.rate }}</td>
+                  </tr>
+                  <tr>
+                    <td/>
+                    <td>
+                      <b>MYR {{ booking_details.bia }}</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Beneficiary Account Number : </td>
+                    <td>{{ booking_details.account_num }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card">
+        <div class="card-header">Order Bankin Slip</div>
+        <div class="row">
           <div class="card-body">
-            <a :href="getURL(booking_details.china_bankslip_path)" target="_blank" >
-              <img v-if="isImage(booking_details.china_bankslip_path)" :src="booking_details.china_bankslip_path" class="image">
+            <a :href="getURL(booking_details.user_bankslip_path)" target="_blank" >
+              <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
               <p v-else>Download</p>
             </a>
           </div>
         </div>
       </div>
     </div>
-    <!-- order details -->
-    <div class="card">
-      <div class="card-header">Order Details</div>
-      <div class="card-body">
-        <div class="row">
-          <div class="col">
-            <table class="table table-striped">
-              <tbody>
-                <tr>
-                  <td>Ref No :</td>
-                  <td>{{ booking_details.id }}</td>
-                </tr>
-                <tr>
-                  <td>Date :</td>
-                  <td>{{ booking_details.created_at }}</td>
-                </tr>
-                <tr>
-                  <td>Customer Marking :</td>
-                  <td>{{ booking_details.marking }}</td>
-                </tr>
-                <tr>
-                  <td>Term: </td>
-                  <td>{{ booking_details.term }}</td>
-                </tr>
-                <tr>
-                  <td>Beneficiary Account : </td>
-                  <td>{{ booking_details.account_name }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-          <div class="col">
-            <table class="table table-striped">
-              <tbody>
-                <tr>
-                  <td>CNY/RMB :</td>
-                  <td>CNY {{ booking_details.amount }}</td>
-                </tr>
-                <tr>
-                  <td>+ Service Charge :</td>
-                  <td>CNY {{ booking_details.service_charge }}</td>
-                </tr>
-                <tr>
-                  <td>RATE :</td>
-                  <td>{{ booking_details.rate }}</td>
-                </tr>
-                <tr>
-                  <td/>
-                  <td>
-                    <b>MYR {{ booking_details.bia }}</b>
-                  </td>
-                </tr>
-                <tr>
-                  <td>Beneficiary Account Number : </td>
-                  <td>{{ booking_details.account_num }}</td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="card">
-      <div class="card-header">Order Bankin Slip</div>
-      <div class="row">
-        <div class="card-body">
-          <a :href="getURL(booking_details.user_bankslip_path)" target="_blank" >
-            <img v-if="isImage(booking_details.user_bankslip_path)" :src="booking_details.user_bankslip_path" class="image">
-            <p v-else>Download</p>
-          </a>
-        </div>
-      </div>
+    <div v-else id="new-invoice">
+      <h3>This is new invoice</h3>
     </div>
   </el-main>
 </template>
@@ -209,6 +214,11 @@ export default {
       }
     }
   },
+  computed: {
+    isLegacy: function () {
+      return this.booking_details.user_po_path && this.booking_details.user_po_path.length > 0
+    }
+  },
   beforeCreate () {
     const loading = this.$loading({
       lock: true,
@@ -232,7 +242,6 @@ export default {
         })
       })
   },
-
   methods: {
     uploadPo () {
       this.loading_btn = true