From a2b58b6d10759f92fb6af2697d79b6cbf9b83fca Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Thu, 14 Jun 2018 10:45:21 +0800
Subject: [PATCH] updated table structure

---
 .../js/pages/bookings/uploadUserBankSlip.vue  |  14 ++-
 resources/assets/js/pages/home.vue            | 104 ++++++------------
 2 files changed, 42 insertions(+), 76 deletions(-)

diff --git a/resources/assets/js/pages/bookings/uploadUserBankSlip.vue b/resources/assets/js/pages/bookings/uploadUserBankSlip.vue
index 1015544f..733f0998 100644
--- a/resources/assets/js/pages/bookings/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/bookings/uploadUserBankSlip.vue
@@ -34,7 +34,7 @@
     </el-form> -->
 
     <div align="center">
-      <el-button type="submit">Submit</el-button>
+      <el-button type="submit" @click="submitUserSlip">Submit</el-button>
       <router-link :to="{ name: 'home' }" class="small ml-auto my-auto">
         Upload Later
       </router-link>
@@ -69,6 +69,15 @@ export default {
       this.dialogImageUrl = file.url
       this.dialogVisible = true
     },
+    submitUserSlip(){
+      this.$message({
+        showClose: true,
+        message: 'Your bankinslip has been submitted, please wait admin to approve.',
+        type: 'success',
+        duration: 5000,
+      });
+      this.$router.push({ name: 'home' })
+    },
     handleTimeExpire () {
       alert('Time is up!')
     },
@@ -76,9 +85,6 @@ export default {
       this.start = true
     },
 
-    uploadLater(){
-
-    }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 8ced4af5..13a7c6f6 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -107,7 +107,7 @@
     <el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" fullscreen="true" center>
 
       <!-- Table_booking_confirmation -->
-      <el-table :data="tableData1" align="center">
+      <el-table align="center">
         <el-table-column prop="data1" align="right" width="200"/>
         <el-table-column prop="data2" align="left" width="200"/>
       </el-table>
@@ -126,25 +126,31 @@
     <!-- Booking Table -->
     <el-row :gutter="20" >
       <div>
-        <el-table>
-          <el-table-column label="Order No" sortable width="106"/>
-          <el-table-column label="Date" sortable width="92"/>
+        <el-table :data="bookingData"> 
+          <el-table-column label="No." width="106" prop="booking_no"/>
+          <el-table-column label="Date" prop="date" width="120" sortable/>
           <!-- <el-table-column  label="Term" :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler">
         </el-table-column> -->
-          <el-table-column label="Rate" sortable width="74"/>
-          <el-table-column label="Amount" sortable justify="center" width="98"/>
-          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount (RMB / USD)" width="133"/>
-          <el-table-column label="ETA" sortable width="92"/>
+          <el-table-column label="Rate" width="74" prop="rate"/>
+          <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable />
+          <el-table-column :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" label="Transfer Amount" prop="transfer_amount" width="150"/>
+          <!-- <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" label="Status"/>
-          <el-table-column label="Balance Amount (RMB/USD)" sortable width="100"/>
-          <el-table-column label="Time Left" sortable/>
-          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag" label="Tag"
-                           width="82" filter-placement="bottom-end">
-            <template slot-scope="scope">
-              <el-tag :type="scope.row.tag === 'Home' ? 'primary' : 'success'" disable-transitions>{{ scope.row.tag }}</el-tag>
-            </template>
+          <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="Balance" prop="transfer_amount" sortable width="100"/> -->
+          <el-table-column prop="timeout" label="Bankin Timeout" sortable/>
+          <el-table-column :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]" :filter-method="filterTag" label=""
+                           width="200" filter-placement="bottom-end" >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              @click="handleEdit(scope.$index, scope.row)">Update</el-button>
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)">Cancel</el-button>
+          </template>
           </el-table-column>
         </el-table>
       </div>
@@ -176,69 +182,23 @@ export default {
         label2: 'MYR'
       }],
       value: 'RMB',
-      value2: '',
-      input: '',
       dialogFormVisible: false,
       dialogFormVisible1: false,
       formLabelWidth: '0px',
-      tableData1: [{
-        data1: 'Order Number :',
-        data2: '001'
-      }, {
-        data1: 'Date :',
-        data2: '25/5/2018'
-      }, {
-        data1: 'Customer Marking :',
-        data2: 'CIEF/150ECE'
-      }, {
-        data1: '',
-        data2: ''
-      }, {
-        data1: 'Payment Method :',
-        data2: 'Cash/Bank Transfer'
-      }, {
-        data1: '',
-        data2: ''
-      }, {
-        data1: 'CNY/RMB :',
-        data2: 'CNY 120,500.00'
-      }, {
-        data1: '+ Service Charge :',
-        data2: 'CNY 20.00'
-      }, {
-        data1: '/ RATE :',
-        data2: '1.63'
-      }, {
-        data1: '',
-        data2: 'MYR 73,848.04'
-      }, {
-        data1: '+ GST 6% :',
-        data2: 'MYR 4,430.88'
-      }, {
-        data1: '',
-        data2: 'MYR 78,278.92'
-      }, {
-        data1: '',
-        data2: ''
-      }, {
-        data1: 'China Beneficiary Acc :',
-        data2: ''
-      }, {
-        data1: '',
-        data2: 'PENDING'
-      }, {
-        data1: '',
-        data2: ''
-      }, {
-        data1: 'Bank In Amount :',
-        data2: 'MYR 78,278.92'
-      }, {
-        data1: '',
-        data2: ''
+      bookingData: [{
+        date: 'Order Number :',
+        booking_no: '001',
+        rate: '123',
+        amount: 'amount',
+        transfer_amount: '123',
+        status: 'timeout',
+        timeout: 'timeout'
       }]
     }
   },
   methods: {
+    // TODO fetch booking data on load 
+
     formatter (row, column) {
       return row.address
     },