From 631472be50e7fe0e58980ace8db89491a5096139 Mon Sep 17 00:00:00 2001
From: Jack Goh <jackgoh0@gmail.com>
Date: Wed, 27 Jun 2018 15:47:47 +0800
Subject: [PATCH] comeplted upload china slip frontend

---
 .../admin/booking/uploadChinaBankslip.vue     | 118 ++++++++++--------
 1 file changed, 69 insertions(+), 49 deletions(-)

diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index c0345ad9..b2d169a1 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -195,44 +195,39 @@
     <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <span>Supplier Form</span>
+          <span>Upload China Bankslip</span>
           <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
         <el-row :gutter="12" style="text-align:center">
           <el-col :span="20" style="text-align:center">
 
-            <el-form ref="supplierBookingForm" :model="supplierBookingForm" :rules="rules">
+            <el-form ref="chinaSlipForm" :model="chinaSlipForm" :rules="rules">
               <div align="center">
 
                 <!-- upload image -->
-                <el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-                          list-type="picture-card" align="center">
-                  <i class="el-icon-plus" />
+                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove"
+                  :file-list="fileList2" list-type="picture">
+                  <el-button size="small" type="primary">Click to upload</el-button>
+                  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3mb</div>
                 </el-upload>
                 <el-dialog :visible.sync="dialogVisible">
                   <img :src="dialogImageUrl" width="100%" alt="">
                 </el-dialog>
                 <br>
                 <!-- upload image end -->
-                
-                <el-form-item prop="supplier">
-                  <el-select prop="supplier" v-model="supplierBookingForm.supplier" placeholder="Choose Supplier">
-                    <el-option v-for="item in supplier_options" :key="item.value" :label="item.label" :value="item.value">
-                    </el-option>
-                  </el-select>
+                <el-form-item prop="date">
+                  <el-date-picker v-model="chinaSlipForm.date" type="date" placeholder="Pick a day" :picker-options="pickerOptions1">
+                  </el-date-picker>
+                </el-form-item>
+                <el-form-item prop="amount">
+                  <el-input v-model="chinaSlipForm.amount" type="text" placeholder="Amount" style="width: 80%" />
                 </el-form-item>
 
-                <el-form-item prop="rate">
-                  <el-input v-model="supplierBookingForm.rate" type="text" placeholder="Rate" style="width: 80%" />
-                </el-form-item>
-                <el-form-item prop="rebate">
-                  <el-input v-model="supplierBookingForm.rebate" type="text" placeholder="Rebate" style="width: 80%" />
-                </el-form-item>
-                <el-form-item prop="transfer_amount">
-                  <el-input v-model="supplierBookingForm.transfer_amount" type="text" placeholder="Payment Amount" style="width: 80%" />
+                <el-form-item prop="details">
+                  <el-input v-model="chinaSlipForm.details" type="text" placeholder="Details" style="width: 80%" />
                 </el-form-item>
                 <el-form-item>
-                  <el-button :loading="loading_btn" type="primary" @click="generateReport('supplierBookingForm')">Generate Report</el-button>
+                  <el-button :loading="loading_btn" type="primary" @click="submitcChinaSlip('chinaSlipForm')">Submit</el-button>
                 </el-form-item>
               </div>
             </el-form>
@@ -267,36 +262,53 @@
         },
         supplier: null,
         supplier_options: null,
-        supplierBookingForm: {
-          supplier: null,
+        chinaSlipForm: {
           amount: null,
-          rebate: null,
-          rate: null,
-          transfer_amount: null,
+          date: null,
+          details: null,
         },
-        value: '',
         rules: {
-          supplier: [{
+          amount: [{
             required: true,
             message: 'Please input amount',
             trigger: 'change'
           }],
-          rebate: [{
+          date: [{
             required: true,
             message: 'Please input bank name',
             trigger: 'change'
           }],
-          rate: [{
+          details: [{
             required: true,
             message: 'Please input account name',
             trigger: 'change'
-          }],
-          payment_amount: [{
-            required: true,
-            message: 'Please input branch',
-            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() {
@@ -335,7 +347,7 @@
 
     },
     methods: {
-      generateReport(formName) {
+      submitcChinaSlip(formName) {
         this.loading_btn = true
 
         this.$refs[formName].validate((valid) => {
@@ -350,23 +362,25 @@
             }
 
             axios.post('/api/supplier-booking', newReport)
-            .then((response) => {
-              this.loading_btn = false
-              
-              this.$router.push({
-                name: 'booking.admin.supplier.report',
-                params: {id: this.$route.params.id }
+              .then((response) => {
+                this.loading_btn = false
+
+                this.$router.push({
+                  name: 'booking.admin.supplier.report',
+                  params: {
+                    id: this.$route.params.id
+                  }
+                })
+                // redirect to supplier report 
+
               })
-              // redirect to supplier report 
+              .catch((error) => {
+                this.loading_btn = false
+                console.log(error)
 
-            })
-            .catch((error) => {
-              this.loading_btn = false
-              console.log(error)
+                // TODO : Show error message 
 
-              // TODO : Show error message 
-
-            })
+              })
 
           } else {
             this.loading_btn = false
@@ -374,6 +388,12 @@
         })
 
       },
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePreview(file) {
+        console.log(file);
+      }
     }
   }
 </script>
\ No newline at end of file