From 212f4f8638df64d5fbc204daddc02dcf79a880ff Mon Sep 17 00:00:00 2001
From: omair saleh <uldvstar@gmail.com>
Date: Tue, 22 Sep 2020 10:22:58 +0800
Subject: [PATCH] show booking details, bank slip, and china bankslip in the po
 step for both admin and user

---
 .../js/pages/admin/booking/uploadInvoice.vue  | 376 +++++++++---------
 .../assets/js/pages/booking/uploadPo.vue      | 160 ++++----
 2 files changed, 266 insertions(+), 270 deletions(-)

diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index cd29d071..1fa5e7f1 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -2,7 +2,9 @@
   <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" />
-
+    <div v-if="!isLegacy">
+      <new-invoice :booking_details="booking_details" :booking_id="booking_id.toString()"/>
+    </div>
     <div v-if="isLegacy" id="old-invoice">
       <div align="center">
         <h4 style="margin-top:5%" />
@@ -74,202 +76,198 @@
         </el-col>
       </el-row>
       <br>
-      <el-row justify="center" align="center">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Order Details</span>
-            <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-          <div class="el-row" style="margin-left: -6px margin-right: -6px">
-            <div class="el-col el-col-12" style="padding-left: 6px padding-right: 6px">
-              <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+    </div>
+    <br>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <div class="el-row" style="margin-left: -6px margin-right: -6px">
+          <div class="el-col el-col-12" style="padding-left: 6px padding-right: 6px">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
 
-                <div class="el-table__body-wrapper is-scrolling-none">
-                  <table class="el-table__body" style="width: 400px" cellspacing="0" cellpadding="0" border="0">
-                    <colgroup>
-                      <col name="el-table_2_column_9" width="210">
-                      <col name="el-table_2_column_10" width="210">
-                    </colgroup>
-                    <tbody>
-                      <tr class="el-table__row">
-                        <td class="el-table_2_column_9 is-right ">
-                          <div class="cell">Ref No :</div>
-                        </td>
-                        <td class="el-table_2_column_10 is-left ">
-                          <div class="cell">{{ booking_details.id }}</div>
-                        </td>
-                      </tr>
-                      <tr class="el-table__row">
-                        <td class="el-table_2_column_9 is-right ">
-                          <div class="cell">Date :</div>
-                        </td>
-                        <td class="el-table_2_column_10 is-left ">
-                          <div class="cell">{{ booking_details.created_at }}</div>
-                        </td>
-                      </tr>
-                      <tr class="el-table__row">
-                        <td class="el-table_2_column_9 is-right ">
-                          <div class="cell">Customer Marking :</div>
-                        </td>
-                        <td class="el-table_2_column_10 is-left ">
-                          <div class="cell">{{ booking_details.marking }}</div>
-                        </td>
-                      </tr>
-                      <tr class="el-table__row">
-                        <td class="el-table_2_column_9 is-right ">
-                          <div class="cell">Term :</div>
-                        </td>
-                        <td class="el-table_2_column_10 is-left ">
-                          <div class="cell">{{ booking_details.term }}</div>
-                        </td>
-                      </tr>
-                      <tr class="el-table__row">
-                        <td class="el-table_2_column_9 is-right ">
-                          <div class="cell">Beneficiary Account : </div>
-                        </td>
-                        <td class="el-table_2_column_10 is-left ">
-                          <div class="cell">{{ booking_details.account_name }}</div>
-                        </td>
-                      </tr>
-                      <tr class="el-table__row">
-                        <td class="el-table_2_column_9 is-right ">
-                          <div class="cell">Beneficiary Account Number : </div>
-                        </td>
-                        <td class="el-table_2_column_10 is-left ">
-                          <div class="cell">{{ booking_details.account_num }}</div>
-                        </td>
-                      </tr>
-                      <!---->
-                    </tbody>
-                  </table>
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_2_column_9" width="210">
+                    <col name="el-table_2_column_10" width="210">
+                  </colgroup>
+                  <tbody>
+                  <tr class="el-table__row">
+                    <td class="el-table_2_column_9 is-right ">
+                      <div class="cell">Ref No :</div>
+                    </td>
+                    <td class="el-table_2_column_10 is-left ">
+                      <div class="cell">{{ booking_details.id }}</div>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td class="el-table_2_column_9 is-right ">
+                      <div class="cell">Date :</div>
+                    </td>
+                    <td class="el-table_2_column_10 is-left ">
+                      <div class="cell">{{ booking_details.created_at }}</div>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td class="el-table_2_column_9 is-right ">
+                      <div class="cell">Customer Marking :</div>
+                    </td>
+                    <td class="el-table_2_column_10 is-left ">
+                      <div class="cell">{{ booking_details.marking }}</div>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td class="el-table_2_column_9 is-right ">
+                      <div class="cell">Term :</div>
+                    </td>
+                    <td class="el-table_2_column_10 is-left ">
+                      <div class="cell">{{ booking_details.term }}</div>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td class="el-table_2_column_9 is-right ">
+                      <div class="cell">Beneficiary Account : </div>
+                    </td>
+                    <td class="el-table_2_column_10 is-left ">
+                      <div class="cell">{{ booking_details.account_name }}</div>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td class="el-table_2_column_9 is-right ">
+                      <div class="cell">Beneficiary Account Number : </div>
+                    </td>
+                    <td class="el-table_2_column_10 is-left ">
+                      <div class="cell">{{ booking_details.account_num }}</div>
+                    </td>
+                  </tr>
                   <!---->
-                  <!---->
-                </div>
-                <div class="el-table__column-resize-proxy" style="display: none" />
-              </div>
-            </div>
-            <div class="el-col el-col-12" style="padding-left: 6px padding-right: 6px">
-              <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
-                <div class="hidden-columns">
-                  <div />
-                  <div />
-                </div>
+                  </tbody>
+                </table>
+                <!---->
                 <!---->
-                <div class="el-table__body-wrapper is-scrolling-none">
-                  <table class="el-table__body" style="width: 400px" cellspacing="0" cellpadding="0" border="0">
-                    <colgroup>
-                      <col name="el-table_3_column_11" width="200">
-                      <col name="el-table_3_column_12" width="200">
-                    </colgroup>
-                    <tbody>
-                      <tr class="el-table__row">
-                        <td class="el-table_3_column_11 is-right ">
-                          <div class="cell">CNY/RMB :</div>
-                        </td>
-                        <td class="el-table_3_column_12 is-left ">
-                          <div class="cell">CNY {{ booking_details.amount }}</div>
-                        </td>
-                      </tr>
-                      <tr class="el-table__row">
-                        <td class="el-table_3_column_11 is-right ">
-                          <div class="cell">+ Service Charge :</div>
-                        </td>
-                        <td class="el-table_3_column_12 is-left ">
-                          <div class="cell">CNY {{ booking_details.service_charge }}</div>
-                        </td>
-                      </tr>
-                      <tr class="el-table__row">
-                        <td class="el-table_3_column_11 is-right ">
-                          <div class="cell">/ RATE :</div>
-                        </td>
-                        <td class="el-table_3_column_12 is-left ">
-                          <div class="cell">{{ booking_details.rate }}</div>
-                        </td>
-                      </tr>
-                      <tr class="el-table__row">
-                        <td class="el-table_3_column_11 is-right ">
-                          <div class="cell"/>
-                        </td>
-                        <td class="el-table_3_column_12 is-left ">
-                          <div class="cell">MYR {{ booking_details.bia }}</div>
-                        </td>
-                      </tr>
-                      <!-- <tr class="el-table__row">
-                        <td class="el-table_3_column_11 is-right ">
-                          <div class="cell">+ GST 6% :</div>
-                        </td>
-                        <td class="el-table_3_column_12 is-left ">
-                          <div class="cell">MYR 4,430.88</div>
-                        </td>
-                      </tr> -->
-                      <tr class="el-table__row">
-                        <td class="el-table_3_column_11 is-right ">
-                          <div class="cell" />
-                        </td>
-                        <td class="el-table_3_column_12 is-left ">
-                          <div class="cell">
-                            <b>MYR {{ booking_details.bia }}</b>
-                          </div>
-                        </td>
-                      </tr>
-                      <tr class="el-table__row">
-                        <td class="el-table_3_column_11 is-right ">
-                          <div class="cell" />
-                        </td>
-                        <td class="el-table_3_column_12 is-left ">
-                          <div class="cell" />
-                        </td>
-                      </tr>
-                      <!---->
-                    </tbody>
-                  </table>
-                  <!---->
-                  <!---->
-                </div>
-                <div class="el-table__column-resize-proxy" style="display: none" />
               </div>
+              <div class="el-table__column-resize-proxy" style="display: none" />
             </div>
           </div>
-        </el-card>
-      </el-row>
-      <br>
+          <div class="el-col el-col-12" style="padding-left: 6px padding-right: 6px">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+              <div class="hidden-columns">
+                <div />
+                <div />
+              </div>
+              <!---->
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_3_column_11" width="200">
+                    <col name="el-table_3_column_12" width="200">
+                  </colgroup>
+                  <tbody>
+                  <tr class="el-table__row">
+                    <td class="el-table_3_column_11 is-right ">
+                      <div class="cell">CNY/RMB :</div>
+                    </td>
+                    <td class="el-table_3_column_12 is-left ">
+                      <div class="cell">CNY {{ booking_details.amount }}</div>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td class="el-table_3_column_11 is-right ">
+                      <div class="cell">+ Service Charge :</div>
+                    </td>
+                    <td class="el-table_3_column_12 is-left ">
+                      <div class="cell">CNY {{ booking_details.service_charge }}</div>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td class="el-table_3_column_11 is-right ">
+                      <div class="cell">/ RATE :</div>
+                    </td>
+                    <td class="el-table_3_column_12 is-left ">
+                      <div class="cell">{{ booking_details.rate }}</div>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td class="el-table_3_column_11 is-right ">
+                      <div class="cell"/>
+                    </td>
+                    <td class="el-table_3_column_12 is-left ">
+                      <div class="cell">MYR {{ booking_details.bia }}</div>
+                    </td>
+                  </tr>
+                  <!-- <tr class="el-table__row">
+                    <td class="el-table_3_column_11 is-right ">
+                      <div class="cell">+ GST 6% :</div>
+                    </td>
+                    <td class="el-table_3_column_12 is-left ">
+                      <div class="cell">MYR 4,430.88</div>
+                    </td>
+                  </tr> -->
+                  <tr class="el-table__row">
+                    <td class="el-table_3_column_11 is-right ">
+                      <div class="cell" />
+                    </td>
+                    <td class="el-table_3_column_12 is-left ">
+                      <div class="cell">
+                        <b>MYR {{ booking_details.bia }}</b>
+                      </div>
+                    </td>
+                  </tr>
+                  <tr class="el-table__row">
+                    <td class="el-table_3_column_11 is-right ">
+                      <div class="cell" />
+                    </td>
+                    <td class="el-table_3_column_12 is-left ">
+                      <div class="cell" />
+                    </td>
+                  </tr>
+                  <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <div class="el-table__column-resize-proxy" style="display: none" />
+            </div>
+          </div>
+        </div>
+      </el-card>
+    </el-row>
+    <br>
 
-      <el-row justify="center" align="center">
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>Supplier Report</span>
-            <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-          <el-row :gutter="12" style="text-align:center">
-            <el-col :span="20" style="text-align:center">
-              <canvas v-insert-message="supplier_booking" id="myCanvas" ref="myCanvas" />
-              <br>
-              <el-button type="text" @click="downloadReport()">Download Now</el-button>
-            </el-col>
-          </el-row>
-        </el-card>
-        <br>
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>User BankinSlip</span>
-            <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
-          </div>
-          <el-row :gutter="12">
-            <el-col :span="22" style="text-align:center">
-              <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>
-            </el-col>
-          </el-row>
-        </el-card>
-        <br>
-      </el-row>
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Supplier Report</span>
+          <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12" style="text-align:center">
+          <el-col :span="20" style="text-align:center">
+            <canvas v-insert-message="supplier_booking" id="myCanvas" ref="myCanvas" />
+            <br>
+            <el-button type="text" @click="downloadReport()">Download Now</el-button>
+          </el-col>
+        </el-row>
+      </el-card>
       <br>
-    </div>
-    <div v-else>
-      <new-invoice :booking_details="booking_details" :booking_id="booking_id.toString()"/>
-    </div>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>User BankinSlip</span>
+          <!-- <el-button style="float: right padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <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>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
   </el-main>
 </template>
 <style>
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index 08d27ccd..61cacbcd 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -2,6 +2,9 @@
   <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" />
+    <div v-if="!isLegacy" id="new-invoice">
+      <new-invoice :booking_details="booking_details" :booking_id="booking_id.toString()"/>
+    </div>
     <div v-if="isLegacy" id="legacy-invoice">
       <h1>Transfer Completed</h1>
       <h2> Please upload your purchase order </h2>
@@ -34,94 +37,89 @@
             </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>
-          </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">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>
-      <div class="card">
-        <div class="card-header">Order Bankin Slip</div>
+    </div>
+    <!-- order details -->
+    <div class="card">
+      <div class="card-header">Order Details</div>
+      <div class="card-body">
         <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 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 v-else id="new-invoice">
-      <new-invoice :booking_details="booking_details" :booking_id="booking_id.toString()"/>
+    <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>
   </el-main>
 </template>