From e3624621ee2cc18c137f115371c2ff4dd190823e Mon Sep 17 00:00:00 2001
From: lonetrinity <psychixkilax@com>
Date: Mon, 15 Oct 2018 12:11:23 +0800
Subject: [PATCH 1/3] fix/homeBookingForm

---
 resources/assets/js/pages/home.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 7a4474ec..2056bbd4 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -150,9 +150,14 @@
           </el-form-item>
           <el-form-item prop="order_no">
             <el-input v-model="bookingForm.order_no" placeholder="Order No. (Optional)" style="width: 80%" required="true" />
-          </el-form-item>
-            <el-form-item prop="account_name">
-              <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Name" style="width: 80%" required="true" />
+          </el-form-item>  
+            <br>
+          <div align=center>
+            <h7>China's Supplier Details</h7>
+          </div>
+            <br>
+          <el-form-item prop="account_name">
+              <el-input v-model="bookingForm.account_name" placeholder="Account Name" style="width: 80%" required="true" />
             </el-form-item>
             <el-form-item prop="account_num">
               <el-input v-model="bookingForm.account_num" type="text" placeholder="Account Number" style="width: 80%"/>
@@ -172,6 +177,7 @@
           </div>
         </el-form>
       </el-dialog>
+      
     <!-- Form_popup-end -->
 
     <!-- Booking_confirmation_popup -->

From 5270884c41290895c7cba26055f18d454f5dc9c7 Mon Sep 17 00:00:00 2001
From: lonetrinity <psychixkilax@com>
Date: Mon, 15 Oct 2018 15:41:29 +0800
Subject: [PATCH 2/3] fix/userBankSlipLoadingSpinner

---
 package.json                                  |  1 +
 .../js/pages/booking/uploadUserBankSlip.vue   | 86 +++++++++++--------
 resources/assets/js/pages/home.vue            | 57 ++++++++++++
 3 files changed, 110 insertions(+), 34 deletions(-)

diff --git a/package.json b/package.json
index 51237498..9f03aaa8 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "bootstrap": "^4.0.0",
     "canvas2image": "^1.0.5",
     "element-ui": "^2.4.4",
+    "epic-spinners": "^1.0.3",
     "image-compressor.js": "^1.1.4",
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 98af2687..6c2c2af1 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -47,40 +47,52 @@
 				</vue-countdown>
 			</div>
 		</div>
-		<!-- upload image -->
-		<div class="row upload">
-			<div class="col">
-				<!-- <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false" :on-preview="handlePictureCardPreview"
-				    :on-remove="handleRemove" :on-error="uploadError" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" list-type="picture-card"
-				    align="center">
-					<i class="el-icon-plus" />
-				</el-upload>
-				<el-dialog :visible.sync="dialogVisible">
-					<img :src="dialogImageUrl" width="100%" alt="">
-				</el-dialog> -->
-				<el-upload 
-					class="avatar-uploader"
-					ref="upload"
-					action="'/api/booking/' + booking_id + '/upload-user-bankslip'"
-					:auto-upload="false"
-					:show-file-list="false"
-					:on-success="handleUploadSuccess" 
-					:on-change="beforeFileUpload"
-					algin="center">
-					<img v-if="imageUrl" :src="imageUrl" class="avatar">
-					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
-				</el-upload>
-				<!-- <el-upload
-					class="upload-demo"
-					ref="upload"
-					action="https://jsonplaceholder.typicode.com/posts/"
-					:auto-upload="false">
-					<el-button slot="trigger" size="small" type="primary">select file</el-button>
-					<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
-					<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
-				</el-upload> -->
+	<div style="position: relative;">
+		<div v-show="isLoading" style=" position: absolute; height: 100%; width: 100%; background-color: rgba(255, 255,255,0.8); z-index: 99; " >
+			<div class="row align-items-center justify-content-center" style="height: 100%;">
+				<div class="col">
+					<breeding-rhombus-spinner
+						:animation-duration="1000"
+						:size="60"
+						:color="'#ff1d5e'" style="margin: auto; " />
+						<p style="text-align:center; margin-top:30px; text-weight:bold;">Please wait, uploading bankslip...</p>
+				</div>
 			</div>
 		</div>
+	<!-- upload image -->
+	<div class="row upload">
+		<div class="col">
+			<!-- <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :show-file-list="false" :on-preview="handlePictureCardPreview"
+				:on-remove="handleRemove" :on-error="uploadError" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf" list-type="picture-card"
+				align="center">
+				<i class="el-icon-plus" />
+			</el-upload>
+			<el-dialog :visible.sync="dialogVisible">
+				<img :src="dialogImageUrl" width="100%" alt="">
+			</el-dialog> -->
+			<el-upload 
+				class="avatar-uploader"
+				ref="upload"
+				action="'/api/booking/' + booking_id + '/upload-user-bankslip'"
+				:auto-upload="false"
+				:show-file-list="false"
+				:on-success="handleUploadSuccess" 
+				:on-change="beforeFileUpload"
+				algin="center">
+				<img v-if="imageUrl" :src="imageUrl" class="avatar">
+				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
+			</el-upload>
+			<!-- <el-upload
+				class="upload-demo"
+				ref="upload"
+				action="https://jsonplaceholder.typicode.com/posts/"
+				:auto-upload="false">
+				<el-button slot="trigger" size="small" type="primary">select file</el-button>
+				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">upload to server</el-button>
+				<div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
+			</el-upload> -->
+		</div>
+	</div>	
 	
 	<!-- upload image end -->
 	<div class="row bankinAmount">
@@ -98,7 +110,8 @@
 				</el-form-item>	
 			</el-form>
 		</div>
-		</div>
+	</div>
+	</div>
 	</el-main>
 </template>
 <style>
@@ -172,6 +185,7 @@
 	import X2ProgressTrack from '~/components/X2ProgressTrack'
 	import axios from 'axios'
 	import ImageCompressor from 'image-compressor.js';
+	import { BreedingRhombusSpinner } from 'epic-spinners';
 
 	export default {
 		middleware: ['auth'],
@@ -179,7 +193,8 @@
 		components: {
 			'vue-countdown': VueCountdown,
 			'progress-track': ProgressTrack,
-			'x2-progress-track': X2ProgressTrack
+			'x2-progress-track': X2ProgressTrack,
+			BreedingRhombusSpinner
 		},
 		data() {
 			return {
@@ -189,6 +204,7 @@
 				},
 				start: false,
 				loading: false,
+				isLoading: false,
 				dialogImageUrl: '',
 				imageUrl: null,
 				dialogVisible: false,
@@ -309,6 +325,7 @@
 			},
 
 			beforeFileUpload(file) {
+				this.isLoading = true;
 				//const isJPG = file.type === 'image/jpeg';
 				const isLt2M = file.size / 1024 / 1024 < 2;
 				var vm = this;
@@ -342,6 +359,7 @@
 					reader = new FileReader();
 				reader.readAsDataURL(file); 
 				reader.onloadend = function() {
+					vm.isLoading = false;
 					vm.imageUrl = reader.result;
 					vm.user_slip_form.slip_image = reader.result;
 				}
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 2056bbd4..38813603 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -396,6 +396,63 @@
       </div>
     </el-row><br><br>
   </el-tab-pane>
+  <el-tab-pane label="Cancelled Booking">
+  <el-row :gutter="20">
+      <div>
+        <el-table :data="bookingTable">
+          <el-table-column label="Ref No." width="100" >
+            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
+          </el-table-column>
+          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
+          <el-table-column label="Marking" width="120" prop="marking" />
+          <el-table-column :filters="[{text: 'X1 cash', value: 'x1_cash'}, {text: 'X1 ba', value: 'x1_ba'}, {text: 'X1 cheque', value: 'x1_cheque'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
+          <el-table-column label="Rate" width="100" prop="rate" sortable/>
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable/>
+          <el-table-column label="Transfer Amount" prop="transfer_amount" width="170" sortable/>
+          <!-- <el-table-column label="ETA" sortable width="100"/> -->
+          <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
+        </el-table-column> -->
+          <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
+          <el-table-column label="Status" width="106" >
+            <template slot-scope="scope">
+              <el-popover trigger="click" placement="top">
+                <p>{{ scope.row.status_desc }}</p>
+                <div slot="reference" class="name-wrapper">
+                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
+                </div>
+              </el-popover>       
+            </template>
+          </el-table-column>
+          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
+          <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
+          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+                           label="" width="180" filter-placement="bottom-end">
+            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> View Status </el-button>
+            
+             
+            <!-- <template slot-scope="scope">
+              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
+              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
+            </template> -->
+          </el-table-column>
+          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
+                          label="" width="180" filter-placement="bottom-end">
+          <!-- <el-button slot-scope="scope" type="text" @click="(event) => { cancelBooking(scope.row.id) }"> Cancel Booking </el-button> -->
+          </el-table-column>
+        </el-table>
+        <div align="right">
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
+        Previous
+      </el-button>
+      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
+      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
+        Next
+      </el-button>
+    </div>
+      </div>
+    </el-row><br><br>
+    </el-tab-pane>
 </el-tabs>
 
     <!-- Booking Table-end -->

From d9717afdbc5d722cca2e0771d16204b50f2ba7bb Mon Sep 17 00:00:00 2001
From: lonetrinity <psychixkilax@com>
Date: Mon, 15 Oct 2018 15:45:55 +0800
Subject: [PATCH 3/3] fix/spinners

---
 resources/assets/js/pages/home.vue | 58 +-----------------------------
 1 file changed, 1 insertion(+), 57 deletions(-)

diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 38813603..2641a64c 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -396,63 +396,7 @@
       </div>
     </el-row><br><br>
   </el-tab-pane>
-  <el-tab-pane label="Cancelled Booking">
-  <el-row :gutter="20">
-      <div>
-        <el-table :data="bookingTable">
-          <el-table-column label="Ref No." width="100" >
-            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Update</el-button>
-            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> {{ scope.row.id }}</el-button>
-          </el-table-column>
-          <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
-          <el-table-column label="Marking" width="120" prop="marking" />
-          <el-table-column :filters="[{text: 'X1 cash', value: 'x1_cash'}, {text: 'X1 ba', value: 'x1_ba'}, {text: 'X1 cheque', value: 'x1_cheque'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
-          <el-table-column label="Rate" width="100" prop="rate" sortable/>
-          <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable/>
-          <el-table-column label="Transfer Amount" prop="transfer_amount" width="170" sortable/>
-          <!-- <el-table-column label="ETA" sortable width="100"/> -->
-          <!-- <el-table-column label="Payment Method" :filters="[{text: 'Cash', value: 'Cash'}, {text: 'Cheque', value: 'Cheque'}, {text: 'BA', value: 'BA'}]" :filter-method="filterHandler">
-        </el-table-column> -->
-          <!-- <el-table-column :filters="[{text: '(1/6)', value: '(1/6) Order Done'}, {text: '(2/6)', value: '(2/6) Waiting for Upload Bank in Slip'}, {text: '(3/6)', value: '(3/6) Order Confirmation'}, {text: '(4/6)', value: '(4/6) Processing Transfer'}, {text: '(5/6)', value: '(5/6) Waiting for Upload PO'}, {text: '(6/6)', value: '(6/6) Order Complete'}]" :filter-method="filterHandler" prop="status" label="Status"/> -->
-          <el-table-column label="Status" width="106" >
-            <template slot-scope="scope">
-              <el-popover trigger="click" placement="top">
-                <p>{{ scope.row.status_desc }}</p>
-                <div slot="reference" class="name-wrapper">
-                  <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
-                </div>
-              </el-popover>       
-            </template>
-          </el-table-column>
-          <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
-          <!-- <el-table-column prop="timeout" label="Bankin Timeout" /> -->
-          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
-                           label="" width="180" filter-placement="bottom-end">
-            <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id, scope.row.term) }"> View Status </el-button>
-            
-             
-            <!-- <template slot-scope="scope">
-              <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
-              <el-button size="mini" type="danger" @click="BookingStatus(scope.$index, scope.row)">Cancel</el-button>
-            </template> -->
-          </el-table-column>
-          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag"
-                          label="" width="180" filter-placement="bottom-end">
-          <!-- <el-button slot-scope="scope" type="text" @click="(event) => { cancelBooking(scope.row.id) }"> Cancel Booking </el-button> -->
-          </el-table-column>
-        </el-table>
-        <div align="right">
-      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
-        Previous
-      </el-button>
-      <span>Page {{pagination.current_page}} of {{pagination.last_page}}</span>
-      <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.next_page_url)" :disabled="!pagination.next_page_url">
-        Next
-      </el-button>
-    </div>
-      </div>
-    </el-row><br><br>
-    </el-tab-pane>
+  
 </el-tabs>
 
     <!-- Booking Table-end -->