From 9432cdaaadcc020e83e90078c8c2dc558749bb2f Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Wed, 27 Jun 2018 18:28:58 +0800
Subject: [PATCH] updated upload invoice UI

---
 .../js/pages/admin/booking/completed.vue      | 165 +++++++
 .../js/pages/admin/booking/uploadInvoice.vue  | 404 ++++++++++++++++--
 resources/assets/js/router/routes.js          |   3 +-
 3 files changed, 539 insertions(+), 33 deletions(-)
 create mode 100644 resources/assets/js/pages/admin/booking/completed.vue

diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
new file mode 100644
index 00000000..42585d3c
--- /dev/null
+++ b/resources/assets/js/pages/admin/booking/completed.vue
@@ -0,0 +1,165 @@
+<template>
+  <el-main>
+    <progress-track v-model="status"/>
+
+    <div align="center">
+      <h4 style="margin-top:5%;">Order Completed</h4>
+      <br>
+    </div>
+
+    <!-- upload card -->
+    <br>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Purchase Order</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Invoice</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>China Bank Slip</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a target=" _blank" href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <br>
+
+    <!-- order details -->
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Details</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+          <el-col :span="12">
+            <el-table :data="bookingConfirmTable2" :show-header="false" align="center">
+              <el-table-column prop="data1" align="right" width="200" />
+              <el-table-column prop="data2" align="left" width="200" />
+            </el-table>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+    <br>
+
+    <el-row justify="center" align="center">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>Order Bankin Slip</span>
+          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+        </div>
+        <el-row :gutter="12">
+          <el-col :span="22" style="text-align:center">
+            <img src="http://via.placeholder.com/600x400" class="image">
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-row>
+  </el-main>
+</template>
+<style>
+    .booking-details {
+        font-weight: bold;
+    }
+</style>
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown'
+import ProgressTrack from '~/components/ProgressTrack'
+
+export default {
+  components: {
+    'progress-track': ProgressTrack
+  },
+  data () {
+    return {
+      status: 6,
+      bookingConfirmTable: [{
+        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: ''
+      }],
+      bookingConfirmTable2: [{
+        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: ''
+      }]
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index 37196cb3..7a02b347 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -1,13 +1,20 @@
 <template>
   <el-main>
-    <progress-track v-model="status"/>
+    <progress-track v-model="status" />
 
     <div align="center">
-      <h4 style="margin-top:5%;">Transfer In Progress</h4>
+      <h4 style="margin-top:5%;"></h4>
       <br>
-      <h5> ETA :  3 days 14 Hours </h5>
+      <div v-if="po_status">
+        <h4>Upload Invoice</h4>
+      </div>
+      <div v-else>
+        <h4>Waiting for User to Upload Purchase Order </h4>
+        <br>
+        <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+      </div>
       <br>
-      <el-button type="primary" @click="$router.go(-1)">Go Back</el-button>
+      <!-- <el-button type="primary" @click="$router.go(-1)">Go Back</el-button> -->
     </div>
     <br>
     <el-row justify="center" align="center">
@@ -16,7 +23,165 @@
           <span>Order Details</span>
           <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
-        <el-row :gutter="12">
+        <div class="el-row" style="margin-left: -6px; margin-right: -6px;">
+          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_2_column_9" width="200">
+                    <col name="el-table_2_column_10" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Order Number :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.id }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Date :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.created_at }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Customer Marking :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">CIEF/150ECE</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell">Term :</div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell">{{ booking_details.term }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_2_column_9 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_2_column_10 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+          <div class="el-col el-col-12" style="padding-left: 6px; padding-right: 6px;">
+            <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" align="center">
+              <div class="hidden-columns">
+                <div></div>
+                <div></div>
+              </div>
+              <!---->
+              <div class="el-table__body-wrapper is-scrolling-none">
+                <table class="el-table__body" style="width: 400px;" cellspacing="0" cellpadding="0" border="0">
+                  <colgroup>
+                    <col name="el-table_3_column_11" width="200">
+                    <col name="el-table_3_column_12" width="200">
+                  </colgroup>
+                  <tbody>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">CNY/RMB :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.amount }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ Service Charge :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">CNY {{ booking_details.service_charge }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">/ RATE :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">{{ booking_details.rate }}</div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR {{ booking_details.bia }}</div>
+                      </td>
+                    </tr>
+                    <!-- <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell">+ GST 6% :</div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">MYR 4,430.88</div>
+                      </td>
+                    </tr> -->
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell">
+                          <b>MYR {{ booking_details.bia }}</b>
+                        </div>
+                      </td>
+                    </tr>
+                    <tr class="el-table__row">
+                      <td class="el-table_3_column_11 is-right ">
+                        <div class="cell"></div>
+                      </td>
+                      <td class="el-table_3_column_12 is-left ">
+                        <div class="cell"></div>
+                      </td>
+                    </tr>
+                    <!---->
+                  </tbody>
+                </table>
+                <!---->
+                <!---->
+              </div>
+              <!---->
+              <!---->
+              <!---->
+              <!---->
+              <div class="el-table__column-resize-proxy" style="display: none;"></div>
+            </div>
+          </div>
+        </div>
+        <!-- <el-row :gutter="12">
           <el-col :span="12">
             <el-table :data="bookingConfirmTable" :show-header="false" align="center">
               <el-table-column prop="data1" align="right" width="200" />
@@ -29,23 +194,56 @@
               <el-table-column prop="data2" align="left" width="200" />
             </el-table>
           </el-col>
-        </el-row>
+        </el-row> -->
       </el-card>
     </el-row>
     <br>
 
-    <el-row justify="center" align="center">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>BankinSlip</span>
-          <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
-        </div>
-        <el-row :gutter="12">
-          <el-col :span="22" style="text-align:center">
-            <img src="http://via.placeholder.com/600x400" class="image">
-          </el-col>
-        </el-row>
-      </el-card>
+    <el-row :gutter="12" justify="center" align="center">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Upload Invoice</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+
+          <!-- upload image -->
+          <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview"
+                     :on-remove="handleRemove"
+                     class="upload-demo"
+                     drag
+                     multiple>
+            <i class="el-icon-upload"/>
+            <div class="el-upload__text">Drop file here or
+              <em>click to upload</em>
+            </div>
+            <div slot="tip" class="el-upload__tip">jpg/png/pdf files with a size less than 3mb</div>
+          </el-upload>
+
+          <br>
+
+          <div class="bottom clearfix" style="text-align:right;">
+            <el-button :loading="loading" type="primary" @click="uploadPo">Submit</el-button>
+          </div>
+          <!-- upload image end -->
+
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>Customer Purchase Order</span>
+            <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
+          </div>
+          <el-row :gutter="12" type="flex">
+            <el-col :span="12">
+              <a href="https://placeholder.com">
+                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">
+              </a>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
     </el-row>
   </el-main>
 </template>
@@ -55,20 +253,162 @@
   }
 </style>
 <script>
-import VueCountdown from '@dmaksimovic/vue-countdown'
-import ProgressTrack from '~/components/AdminProgressTrack'
+  import ProgressTrack from '~/components/AdminProgressTrack'
+  import axios from 'axios'
 
-export default {
-  components: {
-    'progress-track': ProgressTrack
-  },
-  data () {
-    return {
-      status: 4
+  export default {
+    components: {
+      'progress-track': ProgressTrack
+    },
+    data() {
+      return {
+        status: 6,
+        loading_btn: false,
+        po_status: null,
+        booking_id: this.$route.params.id,
+        booking_details: {
+          id: null,
+          amount: null,
+          bia: null,
+          user_bankslip_path: null,
+        },
+        supplier: null,
+        supplier_options: null,
+        chinaSlipForm: {
+          actual_transfer_amount: null,
+          date: null,
+          details: null,
+        },
+        rules: {
+          actual_transfer_amount: [{
+            required: true,
+            message: 'Please input amount',
+            trigger: 'change'
+          }],
+          date: [{
+            required: true,
+            message: 'Please input bank name',
+            trigger: 'change'
+          }],
+          details: [{
+            required: true,
+            message: 'Please input details',
+            trigger: 'change'
+          }]
+        },
+        pickerOptions1: {
+          disabledDate(time) {
+            return time.getTime() > Date.now();
+          },
+          shortcuts: [{
+            text: 'Today',
+            onClick(picker) {
+              picker.$emit('pick', new Date());
+            }
+          }, {
+            text: 'Yesterday',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              picker.$emit('pick', date);
+            }
+          }, {
+            text: 'A week ago',
+            onClick(picker) {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              picker.$emit('pick', date);
+            }
+          }]
+        }
+      }
+    },
+    beforeCreate() {
+      const loading = this.$loading({
+        lock: true,
+        text: 'Please wait..',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+      })
+
+      axios
+        .get('/api/admin/booking/' + this.$route.params.id)
+        .then((response) => {
+          loading.close()
+          this.booking_details = response.data
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+
+      axios
+        .get('/api/setting-supplier/')
+        .then((response) => {
+          loading.close()
+          this.supplier_options = response.data
+        }).catch((error) => {
+          loading.close()
+          console.log(error)
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+
+    },
+    methods: {
+      submitChinaSlip(formName) {
+        this.loading_btn = true
+
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            let newChinaSlip = {
+              date: this.chinaSlipForm.date,
+              actual_transfer_amount: this.chinaSlipForm.actual_transfer_amount,
+              details: this.chinaSlipForm.details,
+            }
+
+            axios.patch('/api/booking/' + this.booking_id + '/update-china-bankslip', newChinaSlip)
+              .then((response) => {
+                this.$message({
+                  showClose: true,
+                  message: 'Your bankinslip has been submitted, please wait admin to approve.',
+                  type: 'success',
+                  duration: 5000
+                })
+
+                console.log(response)
+                this.$router.push({
+                  name: 'home'
+                })
+              })
+              .catch((error) => {
+                this.loading = false
+                this.$message({
+                  showClose: true,
+                  message: 'Please upload your bankin slip first.',
+                  type: 'warning',
+                  duration: 10000
+                })
+                console.log(error)
+                this.loading_btn = false
+              })
+
+          } else {
+            this.loading_btn = false
+          }
+        })
+
+
+      },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePreview(file) {
+        console.log(file);
+      }
     }
-  },
-  methods: {
-
   }
-}
-</script>
+</script>
\ No newline at end of file
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index e6b8f8de..9af1c989 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -30,6 +30,7 @@ const Supplier = () => import('~/pages/admin/booking/supplierBooking').then(m =>
 const SupplierReport = () => import('~/pages/admin/booking/supplierReport').then(m => m.default || m)
 const UploadCNSlip = () => import('~/pages/admin/booking/uploadChinaBankslip').then(m => m.default || m)
 const UploadInvoice = () => import('~/pages/admin/booking/uploadInvoice').then(m => m.default || m)
+const adminCompleted = () => import('~/pages/admin/booking/completed').then(m => m.default || m)
 // const Completed = () => import('~/pages/booking/uploadUserBankSlip').then(m => m.default || m)
 
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
@@ -75,7 +76,7 @@ export default [
   { path: '/booking/:id/supplier-report', name: 'booking.admin.supplier.report', component: SupplierReport },
   { path: '/booking/:id/upload-cn-bankslip', name: 'booking.admin.cnslip', component: UploadCNSlip },
   { path: '/booking/:id/upload-invoice', name: 'booking.admin.invoice', component: UploadInvoice },
-  // { path: '/booking/:id/complete', name: 'booking.complete', component: Completed },
+  { path: '/booking/:id/admin/complete', name: 'booking.admin.complete', component: adminCompleted },
 
   { path: '/admin', name: 'admin.home', component: AdminHome },
   { path: '*', name: 'notfound', component: NotFound }