From b622d81d940b170b40d067dfa5185dc30fb6ff1e Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Wed, 13 Jun 2018 18:27:36 +0800
Subject: [PATCH] added prevent user from book if amount is empty fixed some
 variable duplication added getcalculationvalue function

---
 resources/assets/js/middleware/auth.js      |   8 +-
 resources/assets/js/pages/auth/login.vue    |  16 +-
 resources/assets/js/pages/auth/register.vue |   5 +-
 resources/assets/js/pages/home.vue          | 521 ++++++++++----------
 resources/assets/js/pages/upload.vue        | 108 ++--
 5 files changed, 329 insertions(+), 329 deletions(-)

diff --git a/resources/assets/js/middleware/auth.js b/resources/assets/js/middleware/auth.js
index 1302a8b7..138da317 100644
--- a/resources/assets/js/middleware/auth.js
+++ b/resources/assets/js/middleware/auth.js
@@ -3,11 +3,9 @@ import store from '~/store'
 export default async (to, from, next) => {
   if (!store.getters['auth/check']) {
     next({ name: 'login' })
-  } 
-  else if (store.getters['auth/user'].role == "admin"){
-    next({ name : 'admin.home' })
-  }
-  else {
+  } else if (store.getters['auth/user'].role == 'admin') {
+    next({ name: 'admin.home' })
+  } else {
     next()
   }
 }
diff --git a/resources/assets/js/pages/auth/login.vue b/resources/assets/js/pages/auth/login.vue
index 8af30930..fe8b159c 100644
--- a/resources/assets/js/pages/auth/login.vue
+++ b/resources/assets/js/pages/auth/login.vue
@@ -81,11 +81,11 @@ export default {
   methods: {
     async login () {
       const loading = this.$loading({
-          lock: true,
-          text: 'Logging in',
-          spinner: 'el-icon-loading',
-          background: 'rgba(0, 0, 0, 0.7)'
-        });
+        lock: true,
+        text: 'Logging in',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
 
       // Submit the form.
       const { data } = await this.form.post('/api/login')
@@ -100,11 +100,11 @@ export default {
       await this.$store.dispatch('auth/fetchUser')
 
       // Redirect home.
-      if(store.getters['auth/user'].role === 'admin'){
-        loading.close();
+      if (store.getters['auth/user'].role === 'admin') {
+        loading.close()
         this.$router.push({ name: 'admin.home' })
       }
-      loading.close();
+      loading.close()
       this.$router.push({ name: 'home' })
     }
   }
diff --git a/resources/assets/js/pages/auth/register.vue b/resources/assets/js/pages/auth/register.vue
index be69fc71..9792e4ec 100644
--- a/resources/assets/js/pages/auth/register.vue
+++ b/resources/assets/js/pages/auth/register.vue
@@ -96,10 +96,9 @@ export default {
       await this.$store.dispatch('auth/updateUser', { user: data })
 
       // Redirect home.
-      if(store.getters['auth/user'].role === 'admin'){
+      if (store.getters['auth/user'].role === 'admin') {
         this.$router.push({ name: 'admin.home' })
-      }
-      else{
+      } else {
         this.$router.push({ name: 'home' })
       }
     }
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 69b59a57..58567b36 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -2,285 +2,294 @@
 
   <el-main>
 
-<!-- Input-Amount -->
+    <!-- Input-Amount -->
     <el-row :gutter="20" type="flex" justify="center" align="middle">
-        <el-col :span="8"><div class="grid-content bg-purple" align="left"><el-input placeholder="Amount" v-model="Booking.amount"></el-input></div></el-col>
-        <el-col :span="10"><div class="grid-content bg-purple" align="center"> <el-select v-model="value" placeholder="MYR">
-              <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"></el-option>
-              <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2"></el-option>
-              </el-select></div></el-col>      
+      <el-col :span="20">
+        <div class="grid-content bg-purple" align="center">
+          I need :
+          <el-select v-model="value" placeholder="RMB">
+            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"/>
+            <el-option v-for="item in options2" :key="item.value2" :label="item.label2" :value="item.value2"/>
+          </el-select>
+        </div>
+      </el-col>
     </el-row>
-<!-- Input-Amount-end -->
+    <br>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col :xs="18" :sm="18" :md="8" :lg="8" :xl="8"><div class="grid-content bg-purple" align="left"><el-input type="number" v-model="booking.amount" placeholder="Amount"/></div></el-col>
+    </el-row>
+    <!-- Input-Amount-end -->
     <hr>
-<!-- Rate-Display -->
-<br>
-<el-row :gutter="20" type="flex" justify="center" align="middle">
-  <el-col><div class="grid-content bg-purple" align="right"></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="left"></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">Cheque</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">BA</div></el-col>
-</el-row>
+    <!-- Rate-Display -->
+    <br>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col><div class="grid-content bg-purple" align="right"/></el-col>
+      <el-col><div class="grid-content bg-purple" align="left"/></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">Cash/Bank Transfer</div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">Cheque</div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">BA</div></el-col>
+    </el-row>
 
-<el-row :gutter="20" type="flex" justify="center" align="middle">
-  <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle></i></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="left">X1 :</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
-</el-row>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div></el-col>
+      <el-col><div class="grid-content bg-purple" align="left">X1 :</div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
+    </el-row>
 
-<el-row :gutter="20" type="flex" justify="center" align="middle">
-  <el-col><div class="grid-content bg-purple"></div></el-col>
-  <el-col><div class="grid-content bg-purple"></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_cash')">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_cheque')">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x1_ba')">Book</el-button></div></el-col>
-</el-row>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col><div class="grid-content bg-purple"/></el-col>
+      <el-col><div class="grid-content bg-purple"/></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">
+      <el-button type="text" @click="acceptTerm('x1_cash')">Book</el-button></div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">
+      <el-button type="text" @click="acceptTerm('x1_cheque')">Book</el-button></div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">
+      <el-button type="text" @click="acceptTerm('x1_ba')">Book</el-button></div></el-col>
+    </el-row>
 
-<br>
-<el-row :gutter="20" type="flex" justify="center" align="middle">
-  <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle></i></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="left">X2 :</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
-</el-row>
+    <br>
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col><div class="grid-content bg-purple" align="right"><i type="button" class="el-icon-question" circle/></div></el-col>
+      <el-col><div class="grid-content bg-purple" align="left">X2 :</div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">1.56</div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">1.64</div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">1.62</div></el-col>
+    </el-row>
 
-<el-row :gutter="20" type="flex" justify="center" align="middle">
-  <el-col><div class="grid-content bg-purple"></div></el-col>
-  <el-col><div class="grid-content bg-purple"></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x2_cash')">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="dialogFormVisible = true, acceptTerm('x2_cheque')">Book</el-button></div></el-col>
-  <el-col><div class="grid-content bg-purple" align="center">
-    <el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button></div></el-col>
-</el-row>
-<!-- Rate-Display-end -->
+    <el-row :gutter="20" type="flex" justify="center" align="middle">
+      <el-col><div class="grid-content bg-purple"/></el-col>
+      <el-col><div class="grid-content bg-purple"/></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">
+      <el-button type="text" @click="acceptTerm('x2_cash')">Book</el-button></div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">
+      <el-button type="text" @click="acceptTerm('x2_cheque')">Book</el-button></div></el-col>
+      <el-col><div class="grid-content bg-purple" align="center">
+      <el-button type="text" @click="acceptTerm('x2_ba')">Book</el-button></div></el-col>
+    </el-row>
+    <!-- Rate-Display-end -->
 
-<!-- Form_popup -->
-<el-dialog title="Booking" :visible.sync="dialogFormVisible" center fullscreen:true>
-  <el-form><div align="center">
-    <el-form-item>
-      <el-input type="text" placeholder="China Beneficiary Account" style="width: 80%" v-model="Booking.account_name"></el-input>
-    </el-form-item>
-    <el-form-item>
-      <el-input type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%" v-model="Booking.bank_name"></el-input>
-    </el-form-item>
-    <el-form-item>
-      <el-input type="text" placeholder="Branch / 分行/支行" style="width: 80%" v-model="Booking.bank_branch"></el-input>
-    </el-form-item>
-    <el-form-item>
-      <el-input type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%" v-model="Booking.account_num"></el-input>
-    </el-form-item></div>
-  </el-form>
-  <span slot="footer" class="dialog-footer">
-    <el-button @click="dialogFormVisible = false">Cancel</el-button>
-    <el-button type="submit" @click="createBooking">Book Now</el-button>
-  </span>
-</el-dialog>
-<!-- Form_popup-end -->
+    <!-- Form_popup -->
+    <el-dialog :visible.sync="dialogFormVisible" title="Booking" fullscreen="true" center>
+      <el-form><div align="center">
+        <el-form-item>
+          <el-input v-model="booking.account_name" type="text" placeholder="China Beneficiary Account" style="width: 80%"/>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="booking.bank_name" type="text" placeholder="Bank Name / AliPay / WechatPay" style="width: 80%"/>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="booking.bank_branch" type="text" placeholder="Branch / 分行/支行" style="width: 80%"/>
+        </el-form-item>
+        <el-form-item>
+          <el-input v-model="booking.account_num" type="text" placeholder="Account Number / AliPay_ID / WechatPay_ID" style="width: 80%"/>
+      </el-form-item></div>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">Cancel</el-button>
+        <el-button type="submit" @click="getCalculationValue">Book Now</el-button>
+        <!--<el-button type="submit" @click="createBooking">Book Now</el-button>-->
+      </span>
+    </el-dialog>
+    <!-- Form_popup-end -->
 
-<!-- Booking_confirmation_popup -->
-<el-dialog title="Booking Confirmation" :visible.sync="dialogFormVisible1" center fullscreen:true>
+    <!-- Booking_confirmation_popup -->
+    <el-dialog :visible.sync="dialogFormVisible1" title="Booking Confirmation" fullscreen="true" center>
 
-<!-- Table_booking_confirmation -->
-<el-table :data="tableData1" align="center">
-        <el-table-column prop="data1" align="right" width="200"></el-table-column>
-        <el-table-column prop="data2" align="left" width="200"></el-table-column>
-</el-table>
-<!-- Table_booking_confirmation-end -->  
- 
-  <span slot="footer" class="dialog-footer">
-    <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
-    <el-button type="primary" @click="dialogFormVisible1 = false">Confirm</el-button>
-  </span>
-</el-dialog>
-<!-- Booking_confirmation_popup -->
-
-  <br><br>
-  <hr>
-
-<!-- Booking Table -->
-  <el-row :gutter="20" >
-    <div>
-      <el-table>
-        <el-table-column  label="Order No" sortable width="106">
-        </el-table-column>
-        <el-table-column  label="Date" sortable width="92">
-        </el-table-column>
-        <!-- <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>
-                <el-table-column label="Amount" sortable justify="center" width="98"> 
-        </el-table-column>
-                        <el-table-column label="Transfer Amount (RMB / USD)" :filters="[{text: 'RMB', value: 'RMB'}, {text: 'USD', value: 'USD'}]" :filter-method="filterHandler" width="133">
-        </el-table-column>
-                       <el-table-column label="ETA" sortable width="92">
-        </el-table-column>
-                       <!-- <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 label="Status" :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">
-        </el-table-column>
-                         <el-table-column label="Balance Amount (RMB/USD)" sortable width="100">
-        </el-table-column>
-                         <el-table-column label="Time Left" sortable>
-        </el-table-column>
-        <el-table-column label="Tag" width="82" :filters="[{ text: 'Success', value: 'Success' }, { text: 'Pending', value: 'Pending' }]"
-          :filter-method="filterTag" 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>
+      <!-- Table_booking_confirmation -->
+      <el-table :data="tableData1" align="center">
+        <el-table-column prop="data1" align="right" width="200"/>
+        <el-table-column prop="data2" align="left" width="200"/>
       </el-table>
+      <!-- Table_booking_confirmation-end -->
+
+      <span slot="footer" class="dialog-footer">
+        <!-- <el-button @click="dialogFormVisible = false">Cancel</el-button> -->
+        <el-button type="primary" @click="dialogFormVisible1 = false">Confirm</el-button>
+      </span>
+    </el-dialog>
+    <!-- Booking_confirmation_popup -->
+
+    <br><br>
+    <hr>
+
+    <!-- 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-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="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>
+        </el-table>
       </div>
     </el-row>
-<!-- Booking Table-end -->
+    <!-- Booking Table-end -->
 
   </el-main>
 </template>
 
-
-
 <script>
 import Form from 'vform'
 import LoginWithGithub from '~/components/LoginWithGithub'
 import store from '~/store'
 import axios from 'axios'
 
-  export default {
-    middleware: ['auth'],
+export default {
+  middleware: ['auth'],
 
-    data () {
-      return {
-        Booking: {amount:'', account_name:'', bank_name:'', bank_branch:'', account_num:''},
-        term: '',
-        options1: [{
-          value: 'RMB',
-          label: 'RMB to MYR'
-        }],
-        options2: [{
-          value2: 'MYR',
-          label2: 'MYR to RMB'
-        }],
-        value: '',
-        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: ''
-        }],
-      };
+  data () {
+    return {
+      booking: {amount: '', account_name: '', bank_name: '', bank_branch: '', account_num: ''},
+      term: '',
+      options1: [{
+        value: 'RMB',
+        label: 'RMB'
+      }],
+      options2: [{
+        value2: 'MYR',
+        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: ''
+      }]
+    }
+  },
+  methods: {
+    formatter (row, column) {
+      return row.address
     },
-    methods: {
-      formatter(row, column) {
-        return row.address;
-      },
-      filterTag(value, row) {
-        return row.tag === value;
-      },
-      filterHandler(value, row, column) {
-        const property = column['property'];
-        return row[property] === value;
-      },
-      acceptTerm: function(newterm){
-        this.term = newterm
-      },
-      createBooking : function(){
-        this.dialogFormVisible1 = true
-  
-        let newBooking = {
-          amount: this.Booking.amount,
-          account_name: this.Booking.account_name,
-          bank_name: this.Booking.bank_name,
-          bank_branch: this.Booking.bank_branch,
-          account_num: this.Booking.account_num,
-          term: this.term
-        }
-        console.log(newBooking);
-        axios.post('api/booking', newBooking)
-          .then((response) => {
-            console.log(response);
-            
-            //this code to insert the input data into the database (success)
-            // this.Booking.amount = amount;
-            // this.Booking.account_name = account_name;
-            // this.Booking.bank_name = bank_name;
-            // this.Booking.branch = bank_branch;
-            // this.Booking.account_num = account_num;
-            // this.term = term;
-            
-          })
-          .catch((error) => {
-            console.log(error);
-          });
-        },
-        BookingList(){
-          axios.get('api/booking')
-          .then((response) => {
-            console.log(response);
-            this.list = response.data;
-          })
-        }
-  },    
+    filterTag (value, row) {
+      return row.tag === value
+    },
+    filterHandler (value, row, column) {
+      const property = column['property']
+      return row[property] === value
+    },
+    acceptTerm: function (newterm) {
+      if (this.booking.amount == ''){
+        this.$message({
+          message: 'Please input amount',
+          type: 'warning'
+        });
+        return;
+      }
+      this.dialogFormVisible = true
+      this.term = newterm
+    },
+    getCalculationValue () {
+      this.dialogFormVisible = false
+      this.dialogFormVisible1 = true
+    },
+    createBooking: function () {
+      // this.dialogFormVisible1 = true
+
+      let newBooking = {
+        amount: this.booking.amount,
+        account_name: this.booking.account_name,
+        bank_name: this.booking.bank_name,
+        bank_branch: this.booking.bank_branch,
+        account_num: this.booking.account_num,
+        term: this.term
+      }
+      console.log(newBooking)
+      axios.post('api/booking', newBooking)
+        .then((response) => {
+          console.log(response)
+
+          // this code to insert the input data into the database (success)
+          // this.Booking.amount = amount;
+          // this.Booking.account_name = account_name;
+          // this.Booking.bank_name = bank_name;
+          // this.Booking.branch = bank_branch;
+          // this.Booking.account_num = account_num;
+          // this.term = term;
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    BookingList () {
+      axios.get('api/booking')
+        .then((response) => {
+          console.log(response)
+          this.list = response.data
+        })
+    }
+  }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/resources/assets/js/pages/upload.vue b/resources/assets/js/pages/upload.vue
index 9b391033..1371285e 100644
--- a/resources/assets/js/pages/upload.vue
+++ b/resources/assets/js/pages/upload.vue
@@ -1,84 +1,78 @@
 <template>
-    <el-main>
-        <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
-        <div align="center">
-            <h3>Your order has been book</h3>
-            <h3>Please upload the bank slip</h3>
-        </div>
+  <el-main>
+    <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
+    <div align="center">
+      <h3>Your order has been book</h3>
+      <h3>Please upload the bank slip</h3>
+    </div>
 
     <div align="center">
-        Time Left :
-        <vue-countdown label="Time Left :" v-on:time-expire="handleTimeExpire" :seconds="3600" v-bind:auto-start="false" ref="countdown"></vue-countdown>
+      Time Left :
+      <vue-countdown ref="countdown" :seconds="3600" :auto-start="false" label="Time Left :" @time-expire="handleTimeExpire"/>
 
-        <!-- <button v-on:click="startTimer">Start timer</button> -->
+      <!-- <button v-on:click="startTimer">Start timer</button> -->
     </div><br>
 
-
-<!-- upload image -->
-        <el-upload
-            list-type="picture-card"
-            :on-preview="handlePictureCardPreview"
-            :on-remove="handleRemove" align="center">
-            <i class="el-icon-plus"></i>
-        </el-upload>
+    <!-- upload image -->
+    <el-upload
+      :on-preview="handlePictureCardPreview"
+      :on-remove="handleRemove"
+      list-type="picture-card" align="center">
+      <i class="el-icon-plus"/>
+    </el-upload>
     <el-dialog :visible.sync="dialogVisible">
-        <img width="100%" :src="dialogImageUrl" alt="">
+      <img :src="dialogImageUrl" width="100%" alt="">
     </el-dialog><br>
-<!-- upload image end -->
+    <!-- upload image end -->
 
     <!-- <el-form label-width="300px">
         <el-form-item label="Amount (RM) :"> -->
     <div align="center">
-        Amount (RM) : <el-input placeholder="Enter Amount" style="width: 20%"></el-input><br><br>
+      Amount (RM) : <el-input placeholder="Enter Amount" style="width: 20%"/><br><br>
     </div>
-        <!-- </el-form-item>
+    <!-- </el-form-item>
     </el-form> -->
 
     <div align="center">
-        <el-button type="submit">Submit</el-button>
-        <el-button type="text">Upload Later</el-button>
+      <el-button type="submit">Submit</el-button>
+      <el-button type="text">Upload Later</el-button>
     </div>
 
-    </el-main>
+  </el-main>
 </template>
 
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown';
+import VueCountdown from '@dmaksimovic/vue-countdown'
 
-  export default {
-      name: 'my-component',
-    data() {
-      return {
-        start: false,
-        dialogImageUrl: '',
-        dialogVisible: false
-      };
+export default {
+  name: 'MyComponent',
+  components: {
+    'vue-countdown': VueCountdown
+  },
+  data () {
+    return {
+      start: false,
+      dialogImageUrl: '',
+      dialogVisible: false
+    }
+  },
+  mounted () {
+    this.$refs.countdown.start()
+  },
+  methods: {
+    handleRemove (file, fileList) {
+      console.log(file, fileList)
     },
-    mounted() {
-        this.$refs.countdown.start();
+    handlePictureCardPreview (file) {
+      this.dialogImageUrl = file.url
+      this.dialogVisible = true
     },
-    components: {
-        'vue-countdown': VueCountdown
+    handleTimeExpire () {
+      alert('Time is up!')
     },
-    methods: {
-      handleRemove(file, fileList) {
-        console.log(file, fileList);
-      },
-      handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      },
-      handleTimeExpire () {
-            alert('Time is up!');
-        },
-        startTimer () {
-            this.start = true;
-        }
+    startTimer () {
+      this.start = true
     }
   }
-</script>  
-        
-        
-        
-        
-    
+}
+</script>