From 32278095bff04cd70a0c9d2bbd4263a697ec0d5b Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Fri, 20 Jul 2018 18:04:30 +0800
Subject: [PATCH] beautified user home page added order number and payment for
 field in user booking

---
 ...o_n_paymentfor_field_to_bookings_table.php |  33 +
 resources/assets/js/pages/home.vue            | 598 ++++++++++--------
 2 files changed, 354 insertions(+), 277 deletions(-)
 create mode 100644 database/migrations/2018_07_20_175339_add_orderno_n_paymentfor_field_to_bookings_table.php

diff --git a/database/migrations/2018_07_20_175339_add_orderno_n_paymentfor_field_to_bookings_table.php b/database/migrations/2018_07_20_175339_add_orderno_n_paymentfor_field_to_bookings_table.php
new file mode 100644
index 00000000..18a24a7e
--- /dev/null
+++ b/database/migrations/2018_07_20_175339_add_orderno_n_paymentfor_field_to_bookings_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddOrdernoNPaymentforFieldToBookingsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            $table->string('order_no')->nullable();
+            $table->string('payment_for');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('bookings', function (Blueprint $table) {
+            //
+        });
+    }
+}
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index 04154d47..4f0d23a0 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -139,6 +139,14 @@
     <el-dialog :visible.sync="dialogFormVisible" :fullscreen="true" title="Booking" center>
       <el-form ref="bookingForm" :model="bookingForm" :rules="rules">
         <div align="center">
+          <el-form-item prop="order_no">
+            <el-input v-model="bookingForm.order_no" placeholder="Order No." style="width: 80%" required="true" />
+          </el-form-item>
+          <el-form-item prop="payment_for">
+            <el-select v-model="bookingForm.payment_for" placeholder="Payment For" style="width: 80%" required="true">
+              <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value" />
+            </el-select>
+          </el-form-item>
           <el-form-item prop="account_name">
             <el-input v-model="bookingForm.account_name" placeholder="China Beneficiary Account" style="width: 80%" required="true" />
           </el-form-item>
@@ -213,9 +221,12 @@
     <br>
     <hr>
     <div align="right">
-<el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button></div>
-<p class="mobile-view"> Scroll left or right to navigate the table  <i class="fas fa-arrows-alt-h"></i> </p>
-<!-- Booking Table -->
+      <el-button :loading="loading_btn" type="primary" size="mini" @click="RefreshBooking()">Refresh</el-button>
+    </div>
+    <p class="mobile-view"> Scroll left or right to navigate the table
+      <i class="fas fa-arrows-alt-h"></i>
+    </p>
+    <!-- Booking Table -->
     <el-row :gutter="20">
       <div>
         <el-table :data="bookingTable">
@@ -224,11 +235,12 @@
             <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> {{ scope.row.id }}</el-button>
           </el-table-column>
           <el-table-column label="DateTime" prop="created_at" width="180" sortable/>
-          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term" prop="term" width="100"/> -->
+          <el-table-column :filters="[{text: 'X1', value: 'X1'}, {text: 'X2', value: 'X2'}]" :filter-method="filterHandler" label="Term"
+            prop="term" width="100" /> -->
           <el-table-column label="Rate" width="74" prop="rate" />
           <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="170" />
+            prop="transfer_amount" width="170" />
           <!-- <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> -->
@@ -246,7 +258,7 @@
           <!-- <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">
+            label="" width="180" filter-placement="bottom-end">
             <el-button slot-scope="scope" type="text" @click="(event) => { BookingStatus(scope.row.status, scope.row.id) }"> View Status </el-button>
             <!-- <template slot-scope="scope">
               <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">View Status</el-button>
@@ -255,7 +267,9 @@
           </el-table-column>
         </el-table>
       </div>
-    </el-row><br><br>
+    </el-row>
+    <br>
+    <br>
     <div align="right">
       <el-button type="primary" size="mini" @click="fetchPaginateBooking(pagination.prev_page_url)" :disabled="!pagination.prev_page_url">
         Previous
@@ -273,6 +287,7 @@
   .el-tag {
     cursor: pointer;
   }
+
   @media only screen and (min-width: 768px) {
     .mobile-view {
       display: none;
@@ -280,302 +295,331 @@
   }
 </style>
 <script>
-import Form from 'vform'
-import LoginWithGithub from '~/components/LoginWithGithub'
-import store from '~/store'
-import axios from 'axios'
+  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 {
-      confirmForm: new Form({
+    data() {
+      return {
+        confirmForm: new Form({
+          term: '',
+          amount: ''
+        }),
+        rate: {
+          x1_ba: null,
+          x1_cheque: null,
+          x1_cash: null,
+          x2_ba: null,
+          x2_cash: null,
+          x2_cheque: null,
+        },
+        loading: false,
+        loading_btn: false,
+        status: '',
+        booking: {
+          amount: '',
+          rate: ''
+        },
+        bookingForm: {
+          // amount: '',
+          account_name: '',
+          bank_name: '',
+          bank_branch: '',
+          account_num: ''
+        },
+        rules: {
+          order_no: [{
+            required: true,
+            message: 'Please input order number',
+            trigger: 'change'
+          }],
+          payment_for: [{
+            required: true,
+            message: 'Please input payment for',
+            trigger: 'change'
+          }],
+          amount: [{
+            required: true,
+            message: 'Please input amount',
+            trigger: 'change'
+          }],
+          bank_name: [{
+            required: true,
+            message: 'Please input bank name',
+            trigger: 'change'
+          }],
+          account_name: [{
+            required: true,
+            message: 'Please input account name',
+            trigger: 'change'
+          }],
+          bank_branch: [{
+            required: true,
+            message: 'Please input branch',
+            trigger: 'change'
+          }],
+          account_num: [{
+            required: true,
+            message: 'Please input account number',
+            trigger: 'change'
+          }]
+        },
         term: '',
-        amount: ''
-      }),
-      rate: {
-        x1_ba: null,
-        x1_cheque: null,
-        x1_cash: null,
-        x2_ba: null,
-        x2_cash: null,
-        x2_cheque: null,
-      },
-      loading: false,
-      loading_btn: false,
-      status: '',
-      booking: {
-        amount: '',
-        rate: ''
-      },
-      bookingForm: {
-        // amount: '',
-        account_name: '',
-        bank_name: '',
-        bank_branch: '',
-        account_num: ''
-      },
-      rules: {
-        amount: [{
-          required: true,
-          message: 'Please input amount',
-          trigger: 'change'
-        } ],
-        bank_name: [{
-          required: true,
-          message: 'Please input bank name',
-          trigger: 'change'
-        } ],
-        account_name: [{
-          required: true,
-          message: 'Please input account name',
-          trigger: 'change'
+        options1: [{
+          value: 'RMB',
+          label: 'RMB'
         }],
-        bank_branch: [{
-          required: true,
-          message: 'Please input branch',
-          trigger: 'change'
+        options2: [{
+          value2: 'MYR',
+          label2: 'MYR'
+        }],
+        options3: [{
+          value: 'Full Payment',
+          label: 'Full Payment'
         }],
-        account_num: [{
-          required: true,
-          message: 'Please input account number',
-          trigger: 'change'
-        }]
-      },
-      term: '',
-      options1: [{
         value: 'RMB',
-        label: 'RMB'
-      }],
-      options2: [{
-        value2: 'MYR',
-        label2: 'MYR'
-      }],
-      value: 'RMB',
-      dialogFormVisible: false,
-      dialogFormVisible1: false,
-      formLabelWidth: '0px',
-      bookingTable: [
-      ],
-      url: 'api/booking',
-      pagination: [],
-      bookingConfirmTable: {
-        date: 'undefined',
-        marking: 'undefined',
-        payment_method: 'undefined',
-        amount: 'undefined',
-        service_charge: 'undefined',
-        rate: 'undefined',
-        bankin_amount: 'undefined',
-        china_beneficiary: 'undefined',
-        status: 2
+        dialogFormVisible: false,
+        dialogFormVisible1: false,
+        formLabelWidth: '0px',
+        bookingTable: [],
+        url: 'api/booking',
+        pagination: [],
+        bookingConfirmTable: {
+          date: 'undefined',
+          marking: 'undefined',
+          payment_method: 'undefined',
+          amount: 'undefined',
+          service_charge: 'undefined',
+          rate: 'undefined',
+          bankin_amount: 'undefined',
+          china_beneficiary: 'undefined',
+          status: 2
+        }
       }
-    }
-  },
-  mounted () {
-    this.getBooking()
-    this.RefreshBooking()
-    this.getRate()
-  },
-  methods: {
-    getRate(){
-      let $this = this
-      axios.get(this.url).then(response => {
-        this.bookingTable = response.data.data
-
-        $this.makePagination(response.data)
-      })
     },
-    getBooking() {
-      let $this = this
-      axios.get('api/rate').then(response => {
-        this.rate = response.data
-        console.log(this.rate)
-      })
-    },
-    RefreshBooking() {
-      let $this = this
-      this.loading_btn = true
-      axios.get(this.url).then(response => {
-        this.loading_btn = false;
-        this.bookingTable = response.data
-      })
-    },
-
-    
-    makePagination(data){
-      let pagination =  {
-        current_page: data.current_page,
-        last_page: data.last_page,
-        next_page_url: data.next_page_url,
-        prev_page_url: data.prev_page_url
-      }
-      this.pagination = pagination
-    },
-    fetchPaginateBooking(url) {
-      this.url = url
+    mounted() {
       this.getBooking()
+      this.RefreshBooking()
+      this.getRate()
     },
-    // TODO fetch booking data on load
-    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) {
-      if (this.booking.amount == '') {
-        this.$message({
-          message: 'Please input amount',
-          type: 'warning'
+    methods: {
+      getRate() {
+        let $this = this
+        axios.get(this.url).then(response => {
+          this.bookingTable = response.data.data
+
+          $this.makePagination(response.data)
         })
-        return
-      }
-      this.dialogFormVisible = true
-      this.term = newterm
-    },
-    // Get calculation before submitting booking
-    getCalculationValue (formName) {
-      this.loading = true
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          let newConfirmation = {
-            amount: this.booking.amount,
-            term: this.term
-          }
-          axios.post('api/booking/calculation', newConfirmation)
-            .then((response) => {
-              this.loading = false
-              console.log(response)
-              this.bookingConfirmTable.date = response.data.date
-              this.bookingConfirmTable.marking = response.data.marking
-              this.bookingConfirmTable.payment_method = response.data.payment_method
-              this.bookingConfirmTable.amount = response.data.amount
-              this.bookingConfirmTable.service_charge = response.data.service_charge
-              this.bookingConfirmTable.rate = response.data.rate
-              this.bookingConfirmTable.bankin_amount = response.data.bankin_amount
-              this.bookingConfirmTable.account_name = this.bookingForm.account_name
-              this.dialogFormVisible = false
-              this.dialogFormVisible1 = true
-            })
-            .catch((error) => {
-              this.$message({
+      },
+      getBooking() {
+        let $this = this
+        axios.get('api/rate').then(response => {
+          this.rate = response.data
+          console.log(this.rate)
+        })
+      },
+      RefreshBooking() {
+        let $this = this
+        this.loading_btn = true
+        axios.get(this.url).then(response => {
+          this.loading_btn = false;
+          this.bookingTable = response.data
+        })
+      },
+
+
+      makePagination(data) {
+        let pagination = {
+          current_page: data.current_page,
+          last_page: data.last_page,
+          next_page_url: data.next_page_url,
+          prev_page_url: data.prev_page_url
+        }
+        this.pagination = pagination
+      },
+      fetchPaginateBooking(url) {
+        this.url = url
+        this.getBooking()
+      },
+      // TODO fetch booking data on load
+      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) {
+        if (this.booking.amount == '') {
+          this.$message({
+            message: 'Please input amount',
+            type: 'warning'
+          })
+          return
+        }
+        this.dialogFormVisible = true
+        this.term = newterm
+      },
+      // Get calculation before submitting booking
+      getCalculationValue(formName) {
+        this.loading = true
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let newConfirmation = {
+              amount: this.booking.amount,
+              term: this.term
+            }
+            axios.post('api/booking/calculation', newConfirmation)
+              .then((response) => {
+                this.loading = false
+                console.log(response)
+                this.bookingConfirmTable.date = response.data.date
+                this.bookingConfirmTable.marking = response.data.marking
+                this.bookingConfirmTable.payment_method = response.data.payment_method
+                this.bookingConfirmTable.amount = response.data.amount
+                this.bookingConfirmTable.service_charge = response.data.service_charge
+                this.bookingConfirmTable.rate = response.data.rate
+                this.bookingConfirmTable.bankin_amount = response.data.bankin_amount
+                this.bookingConfirmTable.account_name = this.bookingForm.account_name
+                this.dialogFormVisible = false
+                this.dialogFormVisible1 = true
+              })
+              .catch((error) => {
+                this.$message({
                   showClose: true,
                   message: error.response.data.message,
                   type: 'error',
                   duration: 10000
-              });
-              this.loading = false
-              console.log(error)
-            })
-        } else {
-          this.loading = false
-          this.$message({
-                showClose: true,
-                message: 'Please fill the booking form in full.',
-                type: 'error',
-                duration: 10000
+                });
+                this.loading = false
+                console.log(error)
               })
-        }
-      })
-    },
-    createBooking: function () {
-      this.loading = true,
-      this.dialogFormVisible1 = true
-          let newBooking = {
-            account_name: this.bookingForm.account_name,
-            account_num: this.bookingForm.account_num,
-            bank_name: this.bookingForm.bank_name,
-            bank_branch: this.bookingForm.bank_branch,
-            amount: this.booking.amount,
-            term: this.term
+          } else {
+            this.loading = false
+            this.$message({
+              showClose: true,
+              message: 'Please fill the booking form in full.',
+              type: 'error',
+              duration: 10000
+            })
           }
+        })
+      },
+      createBooking: function () {
+        this.loading = true,
+          this.dialogFormVisible1 = true
+        let newBooking = {
+          account_name: this.bookingForm.account_name,
+          account_num: this.bookingForm.account_num,
+          bank_name: this.bookingForm.bank_name,
+          bank_branch: this.bookingForm.bank_branch,
+          amount: this.booking.amount,
+          term: this.term
+        }
 
-          console.log(newBooking)
-          axios.post('api/booking', newBooking)
-            .then((response) => {
-              this.loading = false
-              // push with return id
-              this.$router.push({
-                name: 'booking.user.upload',
-                params: {id: response.data.id }
-              })
-
-              // pass variable to another router
+        console.log(newBooking)
+        axios.post('api/booking', newBooking)
+          .then((response) => {
+            this.loading = false
+            // push with return id
+            this.$router.push({
+              name: 'booking.user.upload',
+              params: {
+                id: response.data.id
+              }
             })
-            .catch((error) => {
-              console.log(error)
-              this.loading = false
-              this.$message({
-                showClose: true,
-                message: 'Internal server issues. Please contact support',
-                type: 'error',
-                duration: 10000
-              })
-             
+
+            // pass variable to another router
+          })
+          .catch((error) => {
+            console.log(error)
+            this.loading = false
+            this.$message({
+              showClose: true,
+              message: 'Internal server issues. Please contact support',
+              type: 'error',
+              duration: 10000
             })
-    },
-    BookingStatus (status, booking_id) {
-      console.log(status)
-      // TODO : Get booking status from server
-      this.status = status
 
-      switch (this.status) {
-        case 1:
-          this.$router.push({
-            name: 'booking.user.upload',
-            params: {id: booking_id }
           })
-          break
-        case 2:
-          this.$router.push({
-            name: 'booking.user.upload',
-            params: {id: booking_id }
-          })
-          break
-        case 3:
-          this.$router.push({
-            name: 'booking.user.confirmation',
-            params: {id: booking_id }
-          })
-          break
-        case 4:
-          this.$router.push({
-            name: 'booking.user.transfer',
-            params: {id: booking_id }
-          })
-          break
+      },
+      BookingStatus(status, booking_id) {
+        console.log(status)
+        // TODO : Get booking status from server
+        this.status = status
 
-        case 5:
-          this.$router.push({
-            name: 'booking.user.uploadpo',
-            params: {id: booking_id }
-          })
-          break
+        switch (this.status) {
+          case 1:
+            this.$router.push({
+              name: 'booking.user.upload',
+              params: {
+                id: booking_id
+              }
+            })
+            break
+          case 2:
+            this.$router.push({
+              name: 'booking.user.upload',
+              params: {
+                id: booking_id
+              }
+            })
+            break
+          case 3:
+            this.$router.push({
+              name: 'booking.user.confirmation',
+              params: {
+                id: booking_id
+              }
+            })
+            break
+          case 4:
+            this.$router.push({
+              name: 'booking.user.transfer',
+              params: {
+                id: booking_id
+              }
+            })
+            break
 
-        case 6:
-          this.$router.push({
-            name: 'booking.user.po',
-            params: {id: booking_id }
-          })
-          break
+          case 5:
+            this.$router.push({
+              name: 'booking.user.uploadpo',
+              params: {
+                id: booking_id
+              }
+            })
+            break
 
-        case 7:
-          this.$router.push({
-            name: 'booking.user.complete',
-            params: {id: booking_id }
-          })
-          break
+          case 6:
+            this.$router.push({
+              name: 'booking.user.po',
+              params: {
+                id: booking_id
+              }
+            })
+            break
 
-        default:
-          break
+          case 7:
+            this.$router.push({
+              name: 'booking.user.complete',
+              params: {
+                id: booking_id
+              }
+            })
+            break
+
+          default:
+            break
+        }
       }
     }
   }
-}
-</script>
+</script>
\ No newline at end of file