merge

resources/assets/js/pages/home.vue

@@ -307,7 +307,7 @@
                 <div slot="reference" class="name-wrapper">
                   <el-tag size="medium">{{ scope.row.track_status }}</el-tag>
                 </div>
-              </el-popover>
+              </el-popover>       
             </template>
           </el-table-column>
           <!-- <el-table-column label="Balance" prop="transfer_amount" sortable width="100"/> -->
@@ -315,11 +315,18 @@
           <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">
@@ -527,6 +534,7 @@ export default {
     this.getBooking();
     this.initBooking();
     this.getRate();
+    this.cancelBooking();
     this.getBookingTableComplete();
   },
   methods: {
@@ -567,6 +575,13 @@ export default {
         $this.makePagination(response.data)
       })
     },
+    cancelBooking(id){
+      console.log(id)
+      let $this = this
+      axios.post("api/booking/"+id+"/cancel").then(response => {
+        this.getBooking();
+      })
+    },
     getBookingTableComplete(){
       let $this = this
       axios.get(this.completeBookingurl).then(response => {