From 09a2fe36e8d1f825d07e6cdd24ebd1673718998c Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Thu, 14 Jun 2018 11:26:12 +0800
Subject: [PATCH] make booking number and status clickable

---
 resources/assets/js/pages/home.vue | 46 +++++++++++++++++++++++-------
 1 file changed, 35 insertions(+), 11 deletions(-)

diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 13a7c6f6..77959fe2 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -127,19 +127,37 @@
     <el-row :gutter="20" >
       <div>
         <el-table :data="bookingData"> 
-          <el-table-column label="No." width="106" prop="booking_no"/>
+           <el-table-column
+              label="No."
+              width="106">
+              <el-button type="text" slot-scope="scope" @click="viewStatus('{{scope.row.booking_no}}')"> {{scope.row.booking_no}}</el-button>
+               
+          
+            </el-table-column>
           <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" width="74" prop="rate"/>
-          <el-table-column label="Amount" prop="amount" justify="center" width="110" sortable />
+          <el-table-column label="Amount" prop="amount" justify="center" width="110"/>
           <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" prop="status" label="Status"/>
+          <!-- <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="No."
+              width="106">
+              <template slot-scope="scope">
+                <el-popover trigger="hover" placement="top">
+                  <p>{{ scope.row.status_desc }}</p>
+                  <div slot="reference" class="name-wrapper">
+                    <el-tag size="medium">{{ scope.row.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" sortable/>
+          <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="200" filter-placement="bottom-end" >
           <template slot-scope="scope">
@@ -159,7 +177,11 @@
 
   </el-main>
 </template>
-
+<style>
+  .el-tag{
+    cursor: pointer;
+  }
+</style>
 <script>
 import Form from 'vform'
 import LoginWithGithub from '~/components/LoginWithGithub'
@@ -186,13 +208,14 @@ export default {
       dialogFormVisible1: false,
       formLabelWidth: '0px',
       bookingData: [{
-        date: 'Order Number :',
+        date: '12/1/2018',
         booking_no: '001',
-        rate: '123',
-        amount: 'amount',
-        transfer_amount: '123',
-        status: 'timeout',
-        timeout: 'timeout'
+        rate: '1.23',
+        amount: 'RM 1000',
+        transfer_amount: 'RMB 10000',
+        status: '(1/6)',
+        status_desc: 'Waiting admin to confirm',
+        timeout: '56:00:00'
       }]
     }
   },
@@ -261,5 +284,6 @@ export default {
         })
     }
   }
+
 }
 </script>