Merge branch 'master' of gitlab.com:CIEFWorldwideSdnBhd/exchange into fix/user-responsive-page

.gitignore

@@ -15,4 +15,5 @@ Homestead.yaml
 npm-debug.log
 yarn-error.log
 .env
-
+vendor/composer/autoload_static.php
+package-lock.json

app/Booking.php

@@ -32,8 +32,8 @@ class Booking extends Model
         return $this->belongsTo('app\User');
     }
 
-    public function bookingSupplier(){
-        return $this->belongsTo('app\BookingSupplier ');
+    public function supplierBooking(){
+        return $this->hasOne(SupplierBooking::class);
     }
 
     public function chinaBankSlip(){

app/Http/Controllers/BookingController.php

@@ -22,6 +22,7 @@ class BookingController extends Controller
 		$user = Auth::user();
         $bookings = Booking::select('id', 'created_at', 'status', 'rate', 'term', 'amount', 'bia', 'verification_status')
                                     ->where('user_id', $user->id)
+                                    ->orderby('updated_at','desc')
                                     ->paginate(10);
 
 
@@ -77,7 +78,8 @@ class BookingController extends Controller
 	public function adminIndex(){
 		$user = Auth::user(); 
 		$bookings = Booking::select('id', 'created_at', 'admin_status', 'rate', 'term', 'amount', 'bia', 'verification_status')
-		->get();
+        ->orderby('updated_at','desc')
+        ->get();
 
 			// reformat to fit frontend structure 
 			foreach ($bookings as $booking) {
@@ -524,6 +526,16 @@ class BookingController extends Controller
         $term = $request->input('term');
         $china_beneficiary = $request->input('china_beneficiary');
         $rates = Rate::orderby('updated_at','desc')->first();
+
+        $creditLimit = SettingCredit::orderby('updated_at','desc')->first();
+
+		if (!$creditLimit){
+			return response()->json("Credit limit not set, please contact admin", 405);
+		}
+
+        if($amount > $creditLimit->rmb_credit_limit){
+            return response()->json(["message" => "Exceed credit limit, please contact our sales team for larger quantitiy"], 400);
+        }
  
         // TODO : get marking 
         $marking = "123X";

app/Http/Controllers/BookingSupplierController.php

@@ -29,20 +29,24 @@ class BookingSupplierController extends Controller
 
     public function show($id)
     {
-        $bookingsupplier = SupplierBooking::has('supplier-booking')->findOrFail($id);
+        $booking = Booking::where('id', $id)->first();
 
-        $response = [
-            'supplier-booking' => $bookingsupplier
-        ];
+        if (!$booking){
+            return response()->json(['message' => 'Booking not found'], 404);
+        }
 
-        return response()->json($response, 200);
+        $supplier_booking = $booking->supplierBooking()->first();
+        $dt = new \DateTime($supplier_booking->created_at); 
+        $supplier_booking->date = $dt->format('j F Y'); 
+        
+
+        return response()->json($supplier_booking ,200);
     }
 
     // Only for single booking 
     // TODO : Multiple booking
     public function store(Request $request)
     {
-
         $transfer_amount = $request->input("transfer_amount");
         $supplier_id = $request->input("supplier_id");
         $booking_id = $request->input("booking_id");
@@ -62,7 +66,7 @@ class BookingSupplierController extends Controller
         $booking = Booking::find($booking_id);
 
         // update existing booking supplier if exist 
-        $bookingsupplier = SupplierBooking::where('book_id', $booking_id)->first();
+        $bookingsupplier = SupplierBooking::where('booking_id', $booking_id)->first();
 
         if (!$bookingsupplier){
             $bookingsupplier = new SupplierBooking();
@@ -73,19 +77,19 @@ class BookingSupplierController extends Controller
         $bookingsupplier->payment_method = $request->input('payment_method');
         $bookingsupplier->transfer_amount = $transfer_amount;
         $bookingsupplier->rate = $rate;
+        $bookingsupplier->billing_amount = $billing; 
+        $bookingsupplier->salestax_amount = $sales_tax;
         $bookingsupplier->rebate = $rebate;       
         $bookingsupplier->amountInRMB = $amountInRMB;
         $bookingsupplier->rmbBankAmount = $rmbBankAmount;
-        $bookingsupplier->book_id = $booking->id;
+        $bookingsupplier->booking_id = $booking->id;
         $bookingsupplier->save();
 
         // update booking status 
 		$booking->status = 4;
 		$booking->admin_status = 4; 
         $booking->save();
-        
-        // TODO : generate a jpg version of report and save the path 
-
+    
         return response()->json($bookingsupplier, 201);
     }
 
@@ -111,6 +115,7 @@ class BookingSupplierController extends Controller
         $bookingsupplier->rmbBankAmount = $rmbBankAmount;
         $bookingsupplier->save();
 
+        /* For multiple booking */
         // $supplierbookingitems = $request->input("supplierbookingitem");      
         // foreach ($bookings as $booking)
         //  {

app/Http/Controllers/RateController.php

@@ -35,7 +35,7 @@ class RateController extends Controller
 
     public function show()
     {
-        $rate = DB::table('rates')->latest()->first();
+        $rate = Rate::latest()->first();
 
         return response()->json($rate, 200);
     }

app/Http/Kernel.php

@@ -39,7 +39,7 @@ class Kernel extends HttpKernel
         ],
 
         'api' => [
-            'throttle:60,1',
+            // 'throttle:60,1',
             'bindings',
         ],
     ];

app/Marking.php

@@ -7,4 +7,9 @@ use Illuminate\Database\Eloquent\Model;
 class Marking extends Model
 {
     protected $fillable = ['email','marking'];
+
+    public function user()
+    {
+        return $this->belongsTo('app\User');
+    }
 }

app/Rate.php

@@ -7,4 +7,5 @@ use Illuminate\Database\Eloquent\Model;
 class Rate extends Model
 {
     protected $fillable = ['x1_cash','x1_cheque','x1_ba','x2_cash','x2_cheque','x2_ba'];
+    protected $hidden = ['id'];
 }

app/SupplierBooking.php

@@ -16,7 +16,7 @@ class SupplierBooking extends Model
     }
 
     public function booking(){
-        return $this->hasOne('App\Booking');
+        return $this->belongTo('App\Booking');
     }
 
     public function supplierBookingTtem()

app/User.php

@@ -102,4 +102,8 @@ class User extends Authenticatable implements JWTSubject
         return $this->hasMany(Booking::class);
     }
 
+    public function marking(){
+        return $this->hasOne(Booking::class);
+    }
+
 }

database/.gitignore

@@ -1 +0,0 @@
-*.sqlite

database/migrations/2014_10_12_000000_create_users_table.php

@@ -29,7 +29,7 @@ class CreateUsersTable extends Migration
      * @return void
      */
     public function down()
-    {
-        
+    {   
+        Schema::drop('users');
     }
 }

database/migrations/2018_04_25_085705_create_rates_table.php

@@ -32,6 +32,6 @@ class CreateRatesTable extends Migration
      */
     public function down()
     {
-
+        Schema::dropIfExists('rates');
     }
 }

database/migrations/2018_05_15_075453_create_bookings_table.php

@@ -41,8 +41,14 @@ class CreateBookingsTable extends Migration
      * @return void
      */
     public function down()
-    {
+    {   
+        Schema::table('bookings', function(Blueprint $table)
+        {
+            $table->dropForeign('bookings_rate_id_foreign');
+            $table->dropColumn('rate_id');
+        });
 
+        Schema::dropIfExists('bookings');
         
     }
 }

database/migrations/2018_05_15_090646_change_user_id_in_bookings_table.php

@@ -29,6 +29,10 @@ class ChangeUserIdInBookingsTable extends Migration
      */
     public function down()
     {
-
+        Schema::table('bookings', function(Blueprint $table)
+        {
+            $table->dropForeign('bookings_user_id_foreign');
+            $table->dropColumn('user_id');
+        });
     }
 }

database/migrations/2018_05_22_032509_add_bookings_table.php

@@ -28,11 +28,7 @@ class AddBookingsTable extends Migration
             $table->string('usd_book_swift_code')->default(' ');
             $table->string('usd_book_cnap')->default(' ');
             $table->string('usd_book_bank_branch')->default(' ');
-            $table->boolean('verification_status')->default('1'); // Results in a default value of 1.
-
-   //         $table->foreign('status_id')
-   //             ->references('id')->on('status')
-   //             ->onDelete('cascade');
+            $table->boolean('verification_status')->default('1'); 
         });
     }
 
@@ -43,8 +39,6 @@ class AddBookingsTable extends Migration
      */
     public function down()
     {
-        Schema::table('bookings', function (Blueprint $table) {
-            //
-        });
+
     }
 }

database/migrations/2018_05_22_032509_make_nullable_field_bookings_table.php

@@ -28,11 +28,7 @@ class MakeNullableFieldBookingsTable extends Migration
             $table->string('usd_book_swift_code')->nullable()->change();
             $table->string('usd_book_cnap')->nullable()->change();
             $table->string('usd_book_bank_branch')->nullable()->change();
-            $table->boolean('verification_status')->nullable()->change(); // Results in a default value of 1.
-
-   //         $table->foreign('status_id')
-   //             ->references('id')->on('status')
-   //             ->onDelete('cascade');
+            $table->boolean('verification_status')->nullable()->change();
         });
     }
 

database/migrations/2018_05_24_082214_create_user_bank_slips_table.php

@@ -34,6 +34,11 @@ class CreateUserBankSlipsTable extends Migration
      */
     public function down()
     {
+        Schema::table('user_bank_slips', function(Blueprint $table)
+        {
+            $table->dropForeign('user_bank_slips_book_id_foreign');
+        });
+
         Schema::dropIfExists('user_bank_slips');
     }
 }

database/migrations/2018_05_28_085925_create_purchase_orders_table.php

@@ -30,6 +30,11 @@ class CreatePurchaseOrdersTable extends Migration
      */
     public function down()
     {
+        Schema::table('purchase_orders', function(Blueprint $table)
+        {
+            $table->dropForeign('purchase_orders_booking_id_foreign');
+            $table->dropColumn('booking_id');
+        });
         Schema::dropIfExists('purchase_orders');
     }
 }

database/migrations/2018_06_19_144347_create_marking_table.php

@@ -28,6 +28,6 @@ class CreateMarkingTable extends Migration
      */
     public function down()
     {
-        Schema::dropIfExists('marking');
+        Schema::dropIfExists('markings');
     }
 }

database/migrations/2018_06_21_040652_create_invoice_table.php

@@ -30,6 +30,12 @@ class CreateInvoiceTable extends Migration
      */
     public function down()
     {
+        Schema::table('invoices', function(Blueprint $table)
+        {
+            $table->dropForeign('invoices_booking_id_foreign');
+            $table->dropColumn('booking_id');
+        });
+
         Schema::dropIfExists('invoices');
     }
 }

database/migrations/2018_06_27_081455_add_bookingid_foreignkey_to_chinabankslip_table.php

@@ -27,6 +27,10 @@ class AddBookingidForeignkeyToChinabankslipTable extends Migration
      */
     public function down()
     {
-        //
+        Schema::table('china_bank_slips', function(Blueprint $table)
+        {
+            $table->dropForeign('china_bank_slips_booking_id_foreign');
+            $table->dropColumn('booking_id');
+        });
     }
 }

database/migrations/2018_07_02_104306_rename_booking_foreignkey_from_supplierbooking_table.php

@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RenameBookingForeignkeyFromSupplierbookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('supplier_bookings', function($table)
+        {
+            $table->dropForeign(['book_id']);
+            $table->dropColumn('book_id');
+            $table->integer('booking_id')->unsigned();
+            $table->foreign('booking_id')->references('id')->on('bookings');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}

database/migrations/2018_07_03_014020_add_billing_field_to_supplierbooking_table.php

@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddBillingFieldToSupplierbookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('supplier_bookings', function($table)
+        {
+            $table->double('billing_amount');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}

database/migrations/2018_07_03_014343_add_salestax_field_to_supplierbooking_table.php

@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class AddSalestaxFieldToSupplierbookingTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('supplier_bookings', function($table)
+        {
+            $table->double('salestax_amount');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}

package.json

@@ -20,21 +20,23 @@
     "@xkeshi/vue-countdown": "^0.6.0",
     "axios": "^0.18.0",
     "bootstrap": "^4.0.0",
+    "canvas2image": "^1.0.5",
     "element-ui": "^2.3.9",
     "jquery": "^3.3.1",
     "js-cookie": "^2.2.0",
     "npm": "^6.0.1",
     "popper.js": "^1.14.1",
     "sweetalert2": "^7.15.1",
+    "vee-validate": "^2.1.0-beta.5",
     "vform": "^1.0.0",
     "vue": "^2.5.16",
+    "vue-axios": "^2.1.1",
     "vue-i18n": "^7.6.0",
     "vue-loader": "14.2.2",
     "vue-meta": "^1.4.4",
     "vue-router": "^3.0.1",
     "vuex": "^3.0.1",
-    "vuex-router-sync": "^5.0.0",
-    "webpack": "^3.11.0"
+    "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
     "@vue/cli-plugin-eslint": "^3.0.0-beta.6",

resources/assets/js/app.js

@@ -10,6 +10,9 @@ import locale from 'element-ui/lib/locale/lang/en'
 import '~/plugins'
 import '~/components'
 
+import VeeValidate from 'vee-validate';
+Vue.use(VeeValidate);
+
 Vue.config.productionTip = false
 
 Vue.use(ElementUI, { locale })

resources/assets/js/components/LocaleDropdown.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
   <ul class="nav navbar-nav">
-    <li class="nav-item dropdown">
+    <!-- <li class="nav-item dropdown">
       <a class="nav-link dropdown-toggle" href="#" role="button"
         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         {{ locales[locale] }}
@@ -12,7 +12,7 @@
           {{ value }}
         </a>
       </div>
-    </li>
+    </li> -->
     <ul class="navbar-nav mr-auto">
     <li v-if="(user && role == 'admin')" class="nav-item">
       <el-popover placement="top" width="300" v-model="UpdateRatePopoverVisible">
@@ -27,9 +27,9 @@
           <a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
         </el-popover>
       </li></ul>
-      <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.complete-order' }" class="nav-link">{{ $t('Complete Order') }}</router-link></li>
+      <!-- <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.complete' }" class="nav-link">{{ $t('Complete Order') }}</router-link></li> -->
       <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.transaction-history' }" class="nav-link">{{ $t('Transaction History') }}</router-link></li>
-      <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.upload-supplier-bank-slip' }" class="nav-link">{{ $t('Upload Supplier Bank Slip to System') }}</router-link></li>
+      <!-- <li v-if="(user && role == 'admin')" class="nav-item"><router-link :to="{ name: 'admin.upload-supplier-bank-slip' }" class="nav-link">{{ $t('Upload Supplier Bank Slip to System') }}</router-link></li> -->
    
   </ul>
 

resources/assets/js/pages/admin/booking/completed.vue

@@ -20,7 +20,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.user_po_path">
                 <img v-bind:src="booking_details.user_po_path" class="image">
               </a>
             </el-col>
@@ -36,7 +36,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.china_bankslip_path">
                 <img v-bind:src="booking_details.china_bankslip_path" class="image">
               </a>
             </el-col>
@@ -50,8 +50,10 @@
             <!-- <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">     
+            <el-col :span="12">
+              <a target="_blank" :href="booking_details.invoice_path">     
                 <img v-bind:src="booking_details.invoice_path" class="image">
+              </a>
             </el-col>
           </el-row>
         </el-card>
@@ -262,7 +264,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -273,6 +277,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'

resources/assets/js/pages/admin/booking/supplierBooking.vue

@@ -353,11 +353,16 @@
               console.log(error)
 
               // TODO : Show error message 
-
             })
 
           } else {
             this.loading_btn = false
+            this.$message({
+                  showClose: true,
+                  message: 'Please fill the supplier form',
+                  type: 'error',
+                  duration: 10000
+                })
           }
         })
 

resources/assets/js/pages/admin/booking/supplierReport.vue

@@ -200,12 +200,14 @@
         </div>
         <el-row :gutter="12" style="text-align:center">
           <el-col :span="20" style="text-align:center">
-
-          
+            <canvas id="myCanvas" ref="myCanvas" v-insert-message="supplier_booking"></canvas>
+            <img id="banklogo" src="/banklogo.png" style="display: none"/>
+            <br>
+            <el-button @click="downloadReport()" type="text">Download Now</el-button>
           </el-col>
         </el-row>
       </el-card>
-    <br>
+      <br>
       <el-card class="box-card">
         <div slot="header" class="clearfix">
           <span>User BankinSlip</span>
@@ -213,15 +215,17 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
-   <br>
+      <br>
       <el-card class="box-card">
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <el-button :loading="loading_btn" @click="$router.go(-1)" type="primary">Edit</el-button>
+            <el-button :loading="loading_btn" @click="goToSupplierBooking" type="primary">Edit</el-button>
             <el-button :loading="loading_btn" @click="completeReport" type="success">Done</el-button>
           </el-col>
         </el-row>
@@ -233,10 +237,22 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 150px;
+    display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
   import axios from 'axios'
+  import Canvas2Image from 'canvas2image'
 
   export default {
     components: {
@@ -252,9 +268,11 @@
           bia: null,
           user_bankslip_path: null,
         },
+        supplier_booking:{
+        },
         supplier: null,
         supplier_options: null,
-      
+        exampleContent: "This is TEXT"
 
       }
     },
@@ -279,43 +297,239 @@
           })
         })
 
-    
+      axios
+        .get('/api/supplier-booking/' + this.$route.params.id)
+        .then((response) => {
+          loading.close()
+          this.supplier_booking = response.data
+        }).catch((error) => {
+          console.log(error)
+          loading.close()
+          this.$router.push({
+            name: 'notfound'
+          })
+        })
+
+
 
     },
     methods: {
-      completeReport(){
+      downloadReport(){
+        let canvas = document.getElementById('myCanvas')
+     var dataString = canvas.toDataURL("image/png");
+     console.log(dataString)
+      var link = document.createElement("a");
+      link.download = 'image';
+      link.href = dataString;
+      link.click();
+      },
+      goToSupplierBooking(){
+          this.$router.push({
+            name: 'booking.admin.supplier',
+            params: this.$route.params.id
+          })
+      },
+      completeReport() {
         // TODO : send request to change status
         this.loading_btn = true
         axios
-        .post('/api/booking/' + this.$route.params.id + '/confirm-supplier')
-        .then((response) => {
-          this.loading_btn = false
-          this.$message({
-            showClose: true,
-            message: 'Success, please comeback after getting china bankslip',
-            type: 'success',
-            duration: 5000
+          .post('/api/booking/' + this.$route.params.id + '/confirm-supplier')
+          .then((response) => {
+            this.loading_btn = false
+            this.$message({
+              showClose: true,
+              message: 'Success, please comeback after getting china bankslip',
+              type: 'success',
+              duration: 5000
+            })
+            this.$router.push({
+              name: 'home'
+            })
+            //this.booking_details = response.data
+          }).catch((error) => {
+            this.loading_btn = false
+            console.log(error)
+            this.$message({
+              showClose: true,
+              message: 'Suceess',
+              type: 'success',
+              duration: 5000
+            })
           })
-          this.$router.push({
-            name: 'home'
-          })
-          //this.booking_details = response.data
-        }).catch((error) => {
-           this.loading_btn = false
-          console.log(error)
-          this.$message({
-            showClose: true,
-            message: 'Suceess',
-            type: 'success',
-            duration: 5000
-          })
-        })
-     this.$router.push({
+        this.$router.push({
           name: 'booking.admin.cnslip',
-          params: {id: this.$route.params.id }
+          params: {
+            id: this.$route.params.id
+          }
         })
       }
 
+    },
+    directives: {
+      insertMessage: function (canvasElement, binding) {
+        ////////////////// variable //////////////////////////
+        var canvasWidth = 450;
+        var rowHeight = [20, 40, 60, 80, 100, 120, 140, 170, 190, 210, 230, 250, 270, 290, 310, 330, 350, 390, 410,
+          470, 490, 510, 610, 630
+        ]
+        const canvasHeight = rowHeight[rowHeight.length - 1];
+
+        var column1X = 220;
+        var column2X = 320;
+        var column3X = 420;
+
+        ///////////////////Canvast Init////////////////////
+        var canvas = document.getElementById("myCanvas");
+        canvas.width = canvasWidth;
+        canvas.height = canvasHeight;
+        // Get canvas context
+        var ctx = canvasElement.getContext("2d");
+        // Clear the canvas
+        ctx.clearRect(0, 0, 300, 150);
+
+        ctx.fillStyle = "#FFFFFF";
+        ctx.fillRect(0, 0, canvasWidth, rowHeight[0]);
+        for (var i = 1; i < rowHeight.length; i++) {
+          if (i % 2 == 1)
+            ctx.fillStyle = "#A9D08E";
+          else
+            ctx.fillStyle = "#FFFFFF";
+          ctx.fillRect(0, rowHeight[i - 1], canvasWidth, rowHeight[i]);
+        }
+        ///////////// fillup with text////////////////
+        //// config canvas
+        ctx.fillStyle = "#000000";
+        ctx.font = "13px Arial";
+        ctx.textAlign = "right";
+        //// Row 1
+        ctx.fillText("Payment Voucher :", column1X, rowHeight[1] - 5);
+        ctx.fillText(binding.value.id, column3X, rowHeight[1] - 5);
+        //// Row 2
+        ctx.fillText("Date :", column1X, rowHeight[2] - 5);
+        ctx.fillText(binding.value.date, column3X, rowHeight[2] - 5);
+        //// Row 3
+        ctx.fillText("Marking :", column1X, rowHeight[3] - 5);
+        ctx.font = "bold 14px Arial";
+        ctx.fillStyle = "#0070D5";
+        ctx.fillText("CIEF/605HOS", column3X, rowHeight[3] - 5);
+        ctx.fillStyle = "#000000";
+        ctx.font = "13px Arial";
+        //// Row 4
+        ctx.fillText("Payment For(Order No.) :", column1X, rowHeight[4] - 5);
+        ctx.fillText(binding.value.id, column3X, rowHeight[4] - 5);
+        //// Row 4
+        ctx.fillText("Payment For :", column1X, rowHeight[5] - 5);
+        ctx.fillText("Full Payment", column3X, rowHeight[5] - 5);
+        //// Row 5
+        ctx.fillText("Payment Method :", column1X, rowHeight[6] - 5);
+        ctx.fillText(binding.value.payment_method, column3X, rowHeight[6] - 5);
+        //// Row 6
+        ctx.fillText("Remark :", column1X, rowHeight[7] - 10);
+        //// Row 7
+        // Empty
+        //// Row 8
+        ctx.fillText("MYR/RM :", column1X, rowHeight[9] - 5);
+        ctx.fillText("MYR", column2X, rowHeight[9] - 5);
+        ctx.font = "bold 14px Arial";
+        ctx.fillText(binding.value.transfer_amount, column3X, rowHeight[9] - 5);
+        ctx.font = "13px Arial";
+        //// Row 8
+        ctx.fillText("* RATE :", column1X, rowHeight[10] - 5);
+        ctx.fillText(binding.value.rate, column3X, rowHeight[10] - 5);
+        //// Row 9
+        // Empty
+        //// Row 10
+        ctx.font = "bold 14px Arial";
+        ctx.fillText("CNY", column2X, rowHeight[12] - 5);
+        ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[12] - 5);
+        ctx.font = "13px Arial";
+        //line
+        ctx.beginPath();
+        ctx.lineWidth = 1;
+        ctx.moveTo(column1X + 30, rowHeight[11]);
+        ctx.lineTo(column3X + 20, rowHeight[11]);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.lineWidth = 2;
+        ctx.moveTo(column1X + 30, rowHeight[12]);
+        ctx.lineTo(column3X + 20, rowHeight[12]);
+        ctx.stroke();
+        //// Row 11
+        ctx.fillText("MYR/RM :", column1X, rowHeight[14] - 5);
+        ctx.fillText("MYR", column2X, rowHeight[14] - 5);
+        ctx.fillText("4830.68", column3X, rowHeight[14] - 5);
+        //// Row 12
+        ctx.fillText("Billing(1.0%) :", column1X, rowHeight[15] - 5);
+        ctx.fillText("MYR", column2X, rowHeight[15] - 5);
+        ctx.fillText(binding.value.billing_amount, column3X, rowHeight[15] - 5);
+        //// Row 13
+        ctx.fillText("+ SALES TAX (10%) :", column1X, rowHeight[16] - 5);
+        ctx.fillText("MYR", column2X, rowHeight[16] - 5);
+        ctx.fillText(binding.value.salestax_amount, column3X, rowHeight[16] - 5);
+        //// Row 14
+        ctx.fillText("+ GST 6% :", column1X, rowHeight[17] - 15);
+        ctx.fillText("MYR", column2X, rowHeight[17] - 15);
+        ctx.fillText("289.84", column3X, rowHeight[17] - 15);
+        //// Row 15
+        ctx.font = "bold 14px Arial";
+        ctx.fillText("Customer Bank In Amount :", column1X, rowHeight[18] - 5);
+        ctx.fillStyle = "#0070D5";
+        ctx.fillText("MYR", column2X, rowHeight[18] - 5);
+        ctx.fillText(binding.value.amountInRMB, column3X, rowHeight[18] - 5);
+        ctx.fillStyle = "#000000";
+        ctx.font = "13px Arial";
+        //line
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(column1X + 30, rowHeight[17]);
+        ctx.lineTo(column3X + 20, rowHeight[17]);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(column1X + 30, rowHeight[18] + 1);
+        ctx.lineTo(column3X + 20, rowHeight[18] + 1);
+        ctx.stroke();
+        ctx.beginPath();
+        ctx.moveTo(column1X + 30, rowHeight[18] - 2);
+        ctx.lineTo(column3X + 20, rowHeight[18] - 2);
+        ctx.stroke();
+        //// Row 16
+        ctx.fillText("Rebate :", column1X, rowHeight[19] - 25);
+        ctx.fillText("CNY", column2X, rowHeight[19] - 25);
+        ctx.fillText("224.68", column3X, rowHeight[19] - 25);
+        //// Row 16
+        ctx.font = "bold 14px Arial";
+        ctx.fillText("Bank In to Account Below :", column1X, rowHeight[20] - 5);
+        ctx.font = "bold italic 15px Arial";
+        ctx.fillStyle = "#0070D5";
+        ctx.fillText("CNY", column2X, rowHeight[20] - 5);
+        ctx.fillText("7692.17", column3X - 20, rowHeight[20] - 5);
+        ctx.fillStyle = "#000000";
+        ctx.font = "13px Arial";
+        //// Row 17
+        //// Row 18
+        //// Row 19
+        var img = new Image();
+        img.src = "/banklogo.png";
+        img.crossOrigin = "anonymous";
+        var maxwidth = 70;
+        var ratio = maxwidth / img.width;
+        var offset = ((rowHeight[22] - rowHeight[21]) / 2) - (img.height * ratio / 2);
+        var y = rowHeight[21] + offset; // to make it always center
+
+        img.onload=function(){
+		      ctx.drawImage(img, 50, 530, 80, 50);
+	      };
+
+        // text
+        ctx.font = "bold 14px Arial";
+        ctx.textAlign = "center";
+        ctx.fillText("China beneficiary Account", column2X - 40, rowHeight[22] - 80);
+        ctx.fillText("户名 : 奕继椿", column2X - 40, rowHeight[22] - 60);
+        ctx.fillText("6226 1906 8014 3314", column2X - 40, rowHeight[22] - 40);
+        ctx.fillText("民生银行 深川红荔支行", column2X - 40, rowHeight[22] - 20);
+        ctx.font = "13px Arial";
+
+      }
     }
   }
 </script>

resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue

@@ -208,7 +208,7 @@
                 <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
                   :on-remove="handleRemove" :multiple="false" 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>
+                  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3 MB</div>
                 </el-upload>
 
                 <br>
@@ -358,23 +358,26 @@
                 })
               })
               .catch((error) => {
-                this.loading = false
+                console.log(error)
+                this.loading_btn = 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
+            this.$message({
+                  showClose: true,
+                  message: 'Please upload your bankin slip first.',
+                  type: 'warning',
+                  duration: 10000
+                })
           }
         })
-
-
       },
       handleRemove(file, fileList) {
         console.log(file, fileList);

resources/assets/js/pages/admin/booking/uploadInvoice.vue

@@ -5,7 +5,7 @@
     <div align="center">
       <h4 style="margin-top:5%;"></h4>
       <br>
-      <div v-if="booking_details.user_po_path !== null">
+      <div v-if="booking_details.user_po_path">
         <h4>Upload Invoice</h4>
       </div>
       <div v-else>
@@ -181,7 +181,7 @@
     </el-row>
     <br>
 
-    <el-row v-if="booking_details.user_po_path !== null" :gutter="12" justify="center" align="center">
+    <el-row v-if="booking_details.user_po_path" :gutter="12" justify="center" align="center">
       <el-col :span="12">
         <el-card  class="box-card">
           <div slot="header" class="clearfix">
@@ -219,7 +219,9 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
+              <a target="_blank" :href="booking_details.user_po_path">
                 <img v-bind:src="booking_details.user_po_path" class="image">
+              </a>
             </el-col>
           </el-row>
         </el-card>
@@ -231,6 +233,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'
@@ -250,7 +263,6 @@
           amount: null,
           bia: null,
           user_bankslip_path: null,
-          user_po_path: null,
         },
         supplier: null,
         supplier_options: null,
@@ -316,6 +328,7 @@
         .then((response) => {
           loading.close()
           this.booking_details = response.data
+          console.log(this.booking_details)
         }).catch((error) => {
           console.log(error)
           loading.close()
@@ -356,6 +369,9 @@
       },
       handlePreview(file) {
         console.log(file);
+      },
+      handleExceed(file){
+        console.log(file)
       }
     }
   }

resources/assets/js/pages/admin/booking/verification.vue

@@ -201,16 +201,20 @@
           <!-- <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">
+          <a target="_blank" :href="booking_details.user_bankslip_path">
             <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </el-col>
+          </a>
+          <!--<el-col :span="22" style="text-align:center">
+            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+          </el-col>-->
+
         </el-row>
       </el-card>
 
       <el-card class="box-card">
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <el-button :loading="loading_btn" @click="approveUserSlip" type="success">Aprrove</el-button>
+            <el-button :loading="loading_btn" @click="approveUserSlip" type="success">Approve</el-button>
             <el-button :loading="loading_btn" @click="rejectDialogVisible = true" type="danger">Reject</el-button>
           </el-col>
         </el-row>
@@ -239,6 +243,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    margin-left: auto;
+    margin-right: auto;
+    width: 150px;
+    display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
   import ProgressTrack from '~/components/AdminProgressTrack'

resources/assets/js/pages/booking/confirmation.vue

@@ -137,7 +137,7 @@
     <el-row justify="center" align="center">
       <el-card class="box-card">
         <div slot="header" class="clearfix">
-          <span>BankinSlip</span>
+          <span>Banking Slip</span>
           <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
         <el-row :gutter="12">

resources/assets/js/pages/booking/po.vue

@@ -20,7 +20,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.user_po_path">
                 <img v-bind:src="booking_details.user_po_path" class="image">
               </a>
             </el-col>
@@ -36,7 +36,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a target=" _blank" href="#">
+              <a target=" _blank" :href="booking_details.china_bankslip_path">
                 <img v-bind:src="booking_details.china_bankslip_path" class="image">
               </a>
             </el-col>
@@ -51,7 +51,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">     
-                <img width="100%" height="100%" src="http://via.placeholder.com/700x800">   
+                <img width="100%" height="100%" src="http://via.placeholder.com/900x1615">   
             </el-col>
           </el-row>
         </el-card>
@@ -262,7 +262,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -273,6 +275,17 @@
   .booking-details {
     font-weight: bold;
   }
+  .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+  .image:hover {
+    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+  }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'

resources/assets/js/pages/booking/uploadPo.vue

@@ -48,7 +48,7 @@
           </div>
           <el-row :gutter="12" type="flex">
             <el-col :span="12">
-              <a href="https://placeholder.com">
+              <a target="_blank" :href="booking_details.china_bankslip_path">
                 <img v-bind:src="booking_details.china_bankslip_path" class="image">
               </a>
             </el-col>
@@ -231,7 +231,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="booking_details.user_bankslip_path">
+              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -242,6 +244,17 @@
     .booking-details {
         font-weight: bold;
     }
+    .image {
+      border: 1px solid #ddd;
+      border-radius: 4px;
+      margin-left: auto;
+      margin-right: auto;
+      width: 150px;
+      display: block;
+  }
+    .image:hover {
+      box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
+    }
 </style>
 <script>
 import VueCountdown from '@dmaksimovic/vue-countdown'

resources/assets/js/pages/home.vue

@@ -57,13 +57,13 @@
         <div class="grid-content bg-purple" align="left">X1 :</div>
       </el-col>
       <el-col>
-        <div class="grid-content bg-purple" align="center">1.70</div>
+        <div class="grid-content bg-purple" align="center">{{ rate.x1_cash }}</div>
       </el-col>
       <el-col>
-        <div class="grid-content bg-purple" align="center">1.64</div>
+        <div class="grid-content bg-purple" align="center">{{ rate.x1_cheque }}</div>
       </el-col>
       <el-col>
-        <div class="grid-content bg-purple" align="center">1.62</div>
+        <div class="grid-content bg-purple" align="center">{{ rate.x1_ba }}</div>
       </el-col>
     </el-row>
 
@@ -104,13 +104,13 @@
         <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>
+        <div class="grid-content bg-purple" align="center">{{ rate.x2_cash }}</div>
       </el-col>
       <el-col>
-        <div class="grid-content bg-purple" align="center">1.64</div>
+        <div class="grid-content bg-purple" align="center">{{ rate.x2_cheque }}</div>
       </el-col>
       <el-col>
-        <div class="grid-content bg-purple" align="center">1.62</div>
+        <div class="grid-content bg-purple" align="center">{{ rate.x2_ba }}</div>
       </el-col>
     </el-row>
 
@@ -309,6 +309,14 @@ export default {
         term: '',
         amount: ''
       }),
+      rate: {
+        x1_ba: null,
+        x1_cheque: null,
+        x1_cash: null,
+        x2_ba: null,
+        x2_cash: null,
+        x2_cheque: null,
+      },
       loading: false,
       status: '',
       booking: {
@@ -382,9 +390,10 @@ export default {
   mounted () {
     this.getBooking()
     this.RefreshBooking()
+    this.getRate()
   },
   methods: {
-    getBooking() {
+    getRate(){
       let $this = this
       axios.get(this.url).then(response => {
         this.bookingTable = response.data.data
@@ -392,6 +401,13 @@ export default {
         $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
       axios.get(this.url).then(response => {
@@ -458,49 +474,61 @@ export default {
               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
+              })
         }
       })
     },
     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
+          }
 
-      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 }
+              })
 
-      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
-        })
-        .catch((error) => {
-          this.loading = false
-          this.$message({
-            showClose: true,
-            message: 'Internal server issues. Please contact support',
-            type: 'error',
-            duration: 10000
-          })
-          console.log(error)
-        })
+              // 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)

resources/assets/js/pages/settings/admin-china-bank.vue

@@ -1,114 +1,263 @@
 <template>
 <div>
-  <span align="center"><h4>CIEF China Bank Details</h4></span><br>
-    <el-table :data="tableData" border style="width: 100%">
-      <el-table-column prop="comp_name" label="Company Name" width="90px"></el-table-column>
-      <el-table-column prop="bank_name" label="Bank Name"></el-table-column>
-      <el-table-column prop="bank_acc_no" label="Bank Account No" width="115px"></el-table-column>
-      <el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
-      <el-table-column prop="swift_code" label="SWIFT Code"></el-table-column>
-      <el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
-      <el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
-      <el-table-column label="Action">
-          <template slot-scope="scope">
-              <el-button type="text" size="small" @click="EditDatadialogVisible = true">Edit</el-button>
-              <el-button type="text" size="small" @click="DeleteAdddialogVisible = true">Delete</el-button>
-          </template>
-      </el-table-column>
-    </el-table><br>
-    <div align="right">
-      <el-button type="primary" icon="el-icon-plus" @click="AddDatadialogVisible = true">Add New Data</el-button>
-    </div>
-    <!-- popup add new data -->
-      <el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
-          <el-form :label-position="right" label-width="150px">
-            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Account No"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Address"><el-input></el-input></el-form-item>
-            <el-form-item label="SWIFT Code"><el-input></el-input></el-form-item>
-            <el-form-item label="CNAP"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Branch"><el-input></el-input></el-form-item>
-          </el-form>
-        <div align="center">
-            <el-button @click="AddDatadialogVisible = false">Cancel</el-button>
-            <el-button type="primary" @click="AddDatadialogVisible = false; DoneAddDatadialogVisible = true">OK</el-button>
-        </div>
-        <span slot="footer" class="dialog-footer">
-            * Please key in the data in Chinese
-        </span>
-      </el-dialog>
-      <el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
-        <span>Data Added Successfully</span><br><br>
-        <div align="center">
-            <el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
-        </div>
-      </el-dialog>
-    <!-- popup add new data end -->
-    <!-- popup edit data -->
-      <el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
-          <el-form :label-position="right" label-width="150px">
-            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Account No"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Address"><el-input></el-input></el-form-item>
-            <el-form-item label="SWIFT Code"><el-input></el-input></el-form-item>
-            <el-form-item label="CNAP"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Branch"><el-input></el-input></el-form-item>
-          </el-form>
-        <div align="center">
-            <el-button @click="EditDatadialogVisible = false">Cancel</el-button>
-            <el-button type="primary" @click="EditDatadialogVisible = false; DoneUpdateDatadialogVisible = true">Submit</el-button>
-        </div>
-        <span slot="footer" class="dialog-footer">
-            * Please key in the data in Chinese
-        </span>
-      </el-dialog>
-      <el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
-        <span>Data Updated Successfully</span><br><br>
-        <div align="center">
-            <el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
-        </div>
-      </el-dialog>
-    <!-- popup edit data end -->
-    <!-- popup delete -->
-      <el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
-        <span>Data Deleted</span><br><br>
-        <div align="center">
-            <el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
-        </div>
-      </el-dialog>
-    <!-- popup delete end -->
+	<span align="center"><h4>CIEF China Bank Details</h4></span><br>
+		<el-table :data="tableData" border style="width: 100%">
+			<el-table-column prop="company_name" label="Company Name" width="90px"></el-table-column>
+			<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
+			<el-table-column prop="acc_no" label="Bank Account No" width="115px"></el-table-column>
+			<el-table-column prop="bank_address" label="Bank Address" width="111px"></el-table-column>
+			<el-table-column prop="swift" label="SWIFT Code"></el-table-column>
+			<el-table-column prop="cnap" label="CNAP" width="80px"></el-table-column>
+			<el-table-column prop="bank_branch" label="Bank Branch"></el-table-column>
+			<el-table-column label="Action">
+				<template slot-scope="scope">
+					<el-button type="text" size="small" @click="PopOutEditBeneficiaries(scope.$index)">Edit</el-button>
+					<el-button type="text" size="small" @click="DeleteBeneficiaries(tableData[scope.$index].id)">Delete</el-button>
+				</template>
+			</el-table-column>
+		</el-table><br>
+		<div align="right">
+			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddBeneficiaries">Add New Data</el-button>
+		</div>
+		<!-- popup add new data -->
+			<el-dialog title="Add New Data" align="center" :visible.sync="AddDatadialogVisible" width="40%">
+				<el-form label-width="150px">
+					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
+						<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
+						<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
+						<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
+						<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
+						<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
+						<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
+						<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
+						<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
+					</el-form-item>
+				</el-form>
+				<div align="center">
+					<el-button @click="AddDatadialogVisible = false">Cancel</el-button>
+					<el-button type="primary" @click="CreateBeneficiaries">OK</el-button>
+				</div>
+				<span slot="footer" class="dialog-footer">
+					* Please key in the data in Chinese
+				</span>
+			</el-dialog>
+			<el-dialog align="center" :visible.sync="DoneAddDatadialogVisible" width="30%">
+				<span>Data Added Successfully</span><br><br>
+				<div align="center">
+						<el-button type="primary" @click="DoneAddDatadialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup add new data end -->
+		<!-- popup edit data -->
+			<el-dialog title="Edit Data" align="center" :visible.sync="EditDatadialogVisible" width="40%">
+				<el-form label-width="150px">
+					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
+						<el-input v-model="beneficiariesForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Name" :class="{'has-error': errors.has('bank_name') }">
+						<el-input v-model="beneficiariesForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Account No" :class="{'has-error': errors.has('acc_no') }">
+						<el-input v-model="beneficiariesForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Address" :class="{'has-error': errors.has('bank_address') }">
+						<el-input v-model="beneficiariesForm.bank_address" v-validate="'required|max:191'" name="bank_address"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_address')">{{ errors.first('bank_address') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="SWIFT Code" :class="{'has-error': errors.has('swift') }">
+						<el-input v-model="beneficiariesForm.swift" v-validate="'required|max:191'" name="swift"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('swift')">{{ errors.first('swift') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="CNAP" :class="{'has-error': errors.has('cnap') }">
+						<el-input v-model="beneficiariesForm.cnap" v-validate="'required|max:191'" name="cnap" ></el-input>
+						<span class="error-message text-danger" v-if="errors.has('cnap')">{{ errors.first('cnap') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Branch" :class="{'has-error': errors.has('bank_branch') }">
+						<el-input v-model="beneficiariesForm.bank_branch" v-validate="'required|max:191'" name="bank_branch"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_branch')">{{ errors.first('bank_branch') }}<br/></span>
+					</el-form-item>
+				</el-form>
+				<div align="center">
+					<el-button @click="EditDatadialogVisible = false">Cancel</el-button>
+					<el-button type="primary" @click="EditBeneficiaries">Submit</el-button>
+				</div>
+				<span slot="footer" class="dialog-footer">
+					* Please key in the data in Chinese
+				</span>
+			</el-dialog>
+			<el-dialog align="center" :visible.sync="DoneUpdateDatadialogVisible" width="30%">
+				<span>Data Updated Successfully</span><br><br>
+				<div align="center">
+					<el-button type="primary" @click="DoneUpdateDatadialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup edit data end -->
+		<!-- popup delete -->
+			<el-dialog align="center" :visible.sync="DeleteAdddialogVisible" width="30%">
+				<span>Data Deleted</span><br><br>
+				<div align="center">
+					<el-button type="primary" @click="DeleteAdddialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup delete end -->
 </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-            comp_name: 'CIEF Worldwide',
-            bank_name: 'Myabank',
-            bank_acc_no: '6725137521',
-            bank_address: 'Cyberjaya',
-            swift_code: '2376abc',
-            cnap: 'ghi123',
-            bank_branch: 'Klang'
-        }, {
-            comp_name: 'DPulze',
-            bank_name: 'AFFbank',
-            bank_acc_no: '246891247',
-            bank_address: 'Putrajaya',
-            swift_code: 'qwe4567',
-            cnap: '7890po',
-            bank_branch: 'Jawa'
-        }],
-        EditDatadialogVisible: false,
-        DeleteAdddialogVisible: false,
-        AddDatadialogVisible: false,
-        DoneAddDatadialogVisible: false,
-        DoneUpdateDatadialogVisible: false
-      }
-    }
-  }
-</script>
+	var axios = require('axios');
+	var client = axios.create({
+		baseURL: 'http://localhost:8000'
+	});
+
+	export default {
+		data() {
+			return {
+				tableData: [],
+				beneficiariesForm : {
+					company_name : '',
+					bank_name : '',
+					acc_no : '',
+					bank_address : '',
+					swift : '',
+					cnap : '',
+					bank_branch : '',
+				},
+				EditDatadialogVisible: false,
+				DeleteAdddialogVisible: false,
+				AddDatadialogVisible: false,
+				DoneAddDatadialogVisible: false,
+				DoneUpdateDatadialogVisible: false,
+				currentEdit : -1,
+			}
+		},
+		beforeMount(){
+			this.UpdateTableData();
+		},
+		methods: {
+			CreateBeneficiaries : function(){
+				this.AddDatadialogVisible = false;
+				console.log(this.beneficiariesForm);
+				client.post('api/setting-beneficiary', this.beneficiariesForm)
+					.then((response) => {
+						this.DoneAddDatadialogVisible = true;
+						this.ClearBeneficiariesForm();
+						this.UpdateTableData();
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Create Fail',
+							type: 'error',
+							duration: 10000
+						});
+						this.ClearBeneficiariesForm();
+					});
+			},
+			UpdateTableData : function(){
+				client.get('api/setting-beneficiary', this.beneficiariesForm)
+					.then((response) => {
+						this.tableData = response.data;
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Fetch data fail',
+							type: 'error',
+							duration: 10000
+						});
+					})
+			},
+			DeleteBeneficiaries : function(beneficiaries_id){
+				this.DeleteAdddialogVisible = true;
+				client.delete('api/setting-beneficiary/' + beneficiaries_id)
+					.then((response) => {
+						this.UpdateTableData();
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Delete data fail',
+							type: 'error',
+							duration: 10000
+						});
+					});
+			},
+			EditBeneficiaries : function(){
+				this.EditDatadialogVisible = false; 
+				this.DoneUpdateDatadialogVisible = true;
+
+				client.put('api/setting-beneficiary/' + this.currentEdit, this.beneficiariesForm)
+					.then((response) => {
+						this.UpdateTableData();
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Update Fail',
+							type: 'error',
+							duration: 10000
+						});
+					});
+			},
+			PopOutAddBeneficiaries : function(){
+				this.AddDatadialogVisible = true;
+				this.ClearBeneficiariesForm();
+			},
+			PopOutEditBeneficiaries : function(tableDataRow){
+				this.EditDatadialogVisible = true;
+				this.FillupBeneficiariesForm(tableDataRow);
+				this.currentEdit = this.tableData[tableDataRow].id;
+			},
+			ClearBeneficiariesForm : function(){
+				this.beneficiariesForm.company_name = '';
+				this.beneficiariesForm.bank_name = '';
+				this.beneficiariesForm.acc_no = '';
+				this.beneficiariesForm.bank_address = '';
+				this.beneficiariesForm.swift = '';
+				this.beneficiariesForm.cnap = '';
+				this.beneficiariesForm.bank_branch = '';
+			},
+			FillupBeneficiariesForm : function(tableDataRow){
+				this.beneficiariesForm.company_name = this.tableData[tableDataRow].company_name;
+				this.beneficiariesForm.bank_name = this.tableData[tableDataRow].bank_name;
+				this.beneficiariesForm.acc_no = this.tableData[tableDataRow].acc_no;
+				this.beneficiariesForm.bank_address = this.tableData[tableDataRow].bank_address;
+				this.beneficiariesForm.swift = this.tableData[tableDataRow].swift;
+				this.beneficiariesForm.cnap = this.tableData[tableDataRow].cnap;
+				this.beneficiariesForm.bank_branch = this.tableData[tableDataRow].bank_branch;
+			}
+		}
+	}
+</script>
+<style type="text/css">
+	.error-message{
+		position: absolute;
+		left: 0;
+	}
+</style>
+

resources/assets/js/pages/settings/admin-supplier.vue

@@ -1,98 +1,229 @@
 <template>
 <div>
-  <span align="center"><h4>Supplier Details</h4></span><br>
-    <el-table :data="tableData" border style="width: 100%">
-      <el-table-column prop="comp_name" label="Company Name"></el-table-column>
-      <el-table-column prop="reg_no" label="Registration No"></el-table-column>
-      <el-table-column prop="gst_no" label="GST No"></el-table-column>
-      <el-table-column prop="bank_name" label="Bank Name"></el-table-column>
-      <el-table-column prop="account_no" label="Account No"></el-table-column>
-      <el-table-column label="Action">
-          <template slot-scope="scope">
-              <el-button type="text" size="small" @click="EditSupplierdialogVisible = true">Edit</el-button>
-              <el-button type="text" size="small" @click="DeleteSupplierdialogVisible = true">Delete</el-button>
-          </template>
-      </el-table-column>
-    </el-table><br>
-    <div align="right">
-      <el-button type="primary" icon="el-icon-plus" @click="AddNewSupplierdialogVisible = true">Add New Supplier</el-button>
-    </div>
-    <!-- popup add new supplier -->
-      <el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
-          <el-form :label-position="right" label-width="150px">
-            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Registration No"><el-input></el-input></el-form-item>
-            <el-form-item label="GST No"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Account No"><el-input></el-input></el-form-item>
-          </el-form>
-        <div align="center">
-            <el-button @click="AddNewSupplierdialogVisible = false">Cancel</el-button>
-            <el-button type="primary" @click="AddNewSupplierdialogVisible = false; DoneAddSupplierdialogVisible = true">OK</el-button>
-        </div>
-      </el-dialog>
-      <el-dialog align="center" :visible.sync="DoneAddSupplierdialogVisible" width="30%">
-        <span>Supplier Added Successfully</span><br><br>
-        <div align="center">
-            <el-button type="primary" @click="DoneAddSupplierdialogVisible = false">OK</el-button>
-        </div>
-      </el-dialog>
-    <!-- popup add new supplier end -->
-    <!-- popup edit supplier -->
-      <el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible" width="40%">
-          <el-form :label-position="right" label-width="150px">
-            <el-form-item label="Company Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Registration No"><el-input></el-input></el-form-item>
-            <el-form-item label="GST No"><el-input></el-input></el-form-item>
-            <el-form-item label="Bank Name"><el-input></el-input></el-form-item>
-            <el-form-item label="Account No"><el-input></el-input></el-form-item>
-          </el-form>
-        <div align="center">
-            <el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
-            <el-button type="primary" @click="EditSupplierdialogVisible = false; DoneUpdateSupplierdialogVisible = true">OK</el-button>
-        </div>
-      </el-dialog>
-      <el-dialog align="center" :visible.sync="DoneUpdateSupplierdialogVisible" width="30%">
-        <span>Supplier's Details Updated Successfully</span><br><br>
-        <div align="center">
-            <el-button type="primary" @click="DoneUpdateSupplierdialogVisible = false">OK</el-button>
-        </div>
-      </el-dialog>
-    <!-- popup edit supplier end -->
-    <!-- popup delete supplier -->
-      <el-dialog align="center" :visible.sync="DeleteSupplierdialogVisible" width="30%">
-        <span>Supplier's Details Deleted</span><br><br>
-        <div align="center">
-            <el-button type="primary" @click="DeleteSupplierdialogVisible = false">OK</el-button>
-        </div>
-      </el-dialog>
-    <!-- popup delete supplier end -->
+	<span align="center"><h4>Supplier Details</h4></span><br>
+		<el-table :data="tableData" border style="width: 100%">
+			<el-table-column prop="company_name" label="Company Name"></el-table-column>
+			<el-table-column prop="supplier_reg_no" label="Registration No"></el-table-column>
+			<el-table-column prop="gst_no" label="GST No"></el-table-column>
+			<el-table-column prop="bank_name" label="Bank Name"></el-table-column>
+			<el-table-column prop="acc_no" label="Account No"></el-table-column>
+			<el-table-column label="Action">
+				<template slot-scope="scope">
+					<el-button type="text" size="small" @click="PopOutEditSupplier(scope.$index)">Edit</el-button>
+					<el-button type="text" size="small" @click="DeleteSupplier(tableData[scope.$index].id)">Delete</el-button>
+				</template>
+			</el-table-column>
+		</el-table><br>
+		<div align="right">
+			<el-button type="primary" icon="el-icon-plus" @click="PopOutAddSupplier">Add New Supplier</el-button>
+		</div>
+		<!-- popup add new supplier -->
+			<el-dialog title="Add New Supplier" align="center" :visible.sync="AddNewSupplierdialogVisible" width="40%">
+				<el-form  label-width="150px" >
+					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
+						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
+						<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
+						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Name":class="{'has-error': errors.has('bank_name') }">
+						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Account No":class="{'has-error': errors.has('acc_no') }">
+						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+					</el-form-item>
+				</el-form>
+				<div align="center">
+						<el-button @click="AddNewSupplierdialogVisible = false">Cancel</el-button>
+						<el-button type="primary" @click="CreateSupplier">OK</el-button>
+				</div>
+			</el-dialog>
+			<el-dialog align="center" :visible.sync="DoneAddSupplierdialogVisible" width="30%">
+				<span>Supplier Added Successfully</span><br><br>
+				<div align="center">
+						<el-button type="primary" @click="DoneAddSupplierdialogVisible = false;">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup add new supplier end -->
+		<!-- popup edit supplier -->
+			<el-dialog title="Edit Supplier" align="center" :visible.sync="EditSupplierdialogVisible" width="40%">
+					<el-form  label-width="150px" >
+					<el-form-item label="Company Name" :class="{'has-error': errors.has('company_name') }">
+						<el-input v-model="supplierForm.company_name" v-validate="'required|max:191'" name="company_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('company_name')">{{ errors.first('company_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Registration No" :class="{'has-error': errors.has('supplier_reg_no') }">
+						<el-input v-model="supplierForm.supplier_reg_no" v-validate="'required|max:191'" name="supplier_reg_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('supplier_reg_no')">{{ errors.first('supplier_reg_no') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="GST No" :class="{'has-error': errors.has('gst_no') }">
+						<el-input v-model="supplierForm.gst_no" v-validate="'required|max:191'" name="gst_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('gst_no')">{{ errors.first('gst_no') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Bank Name":class="{'has-error': errors.has('bank_name') }">
+						<el-input v-model="supplierForm.bank_name" v-validate="'required|max:191'" name="bank_name"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('bank_name')">{{ errors.first('bank_name') }}<br/></span>
+					</el-form-item>
+					<el-form-item label="Account No":class="{'has-error': errors.has('acc_no') }">
+						<el-input v-model="supplierForm.acc_no" v-validate="'required|max:191'" name="acc_no"></el-input>
+						<span class="error-message text-danger" v-if="errors.has('acc_no')">{{ errors.first('acc_no') }}<br/></span>
+					</el-form-item>
+				</el-form>
+				<div align="center">
+						<el-button @click="EditSupplierdialogVisible = false">Cancel</el-button>
+						<el-button type="primary" @click="EditSupplier">OK</el-button>
+				</div>
+			</el-dialog>
+			<el-dialog align="center" :visible.sync="DoneUpdateSupplierdialogVisible" width="30%">
+				<span>Supplier's Details Updated Successfully</span><br><br>
+				<div align="center">
+						<el-button type="primary" @click="DoneUpdateSupplierdialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup edit supplier end -->
+		<!-- popup delete supplier -->
+			<el-dialog align="center" :visible.sync="DeleteSupplierdialogVisible" width="30%">
+				<span>Supplier's Details Deleted</span><br><br>
+				<div align="center">
+						<el-button type="primary" @click="DeleteSupplierdialogVisible = false">OK</el-button>
+				</div>
+			</el-dialog>
+		<!-- popup delete supplier end -->
 </div>
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        tableData: [{
-          comp_name: 'CIEF',
-          reg_no: '2134241',
-          gst_no: '214',
-          bank_name: 'myabank', 
-          account_no: '1242521', 
-        }, {
-          comp_name: 'iPhone',
-          reg_no: '123214',
-          gst_no: '3532',
-          bank_name: 'adyabank', 
-          account_no: '21421421', 
-        }],
-        AddNewSupplierdialogVisible: false,
-        EditSupplierdialogVisible: false,
-        DoneAddSupplierdialogVisible: false,
-        DoneUpdateSupplierdialogVisible: false,
-        DeleteSupplierdialogVisible: false
-      }
-    }
-  }
-</script>
+var axios = require('axios');
+var client = axios.create({
+	baseURL: 'http://localhost:8000'
+});
+
+	export default {
+		data() {
+			return {
+				tableData: [],
+				supplierForm : {
+					company_name: '',
+					supplier_reg_no: '',
+					gst_no: '',
+					bank_name: '', 
+					acc_no: '', 
+				},
+				AddNewSupplierdialogVisible: false,
+				EditSupplierdialogVisible: false,
+				DoneAddSupplierdialogVisible: false,
+				DoneUpdateSupplierdialogVisible: false,
+				DeleteSupplierdialogVisible: false,
+				currentEdit: -1,
+			}
+		},
+		beforeMount(){
+			this.UpdateTableData();
+		},
+		methods:{
+			CreateSupplier : function(){
+				this.AddNewSupplierdialogVisible = false; 
+				client.post('api/setting-supplier', this.supplierForm)
+				.then((response) => {
+					this.DoneAddSupplierdialogVisible = true;
+					this.UpdateTableData();
+				})
+				.catch((error) => {
+					console.log(error);
+					this.$message({
+						showClose: true,
+						message: 'Create Fail',
+						type: 'error',
+						duration: 10000
+					});
+				});
+			},
+			UpdateTableData : function(){
+				client.get('api/setting-supplier', this.supplierForm)
+					.then((response) => {
+						this.tableData = response.data;
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Fetch data fail',
+							type: 'error',
+							duration: 10000
+						});
+					})
+			},
+			DeleteSupplier : function(supplier_id){
+				this.DeleteSupplierdialogVisible = true;
+				client.delete('api/setting-supplier/' + supplier_id)
+					.then((response) => {
+						this.UpdateTableData();
+					})
+					.catch((error) => {
+						console.log(error);
+						this.$message({
+							showClose: true,
+							message: 'Delete data fail',
+							type: 'error',
+							duration: 10000
+						});
+					})
+			},
+			EditSupplier : function(){
+				this.EditSupplierdialogVisible = false; 
+				this.DoneUpdateSupplierdialogVisible = true;
+
+				client.put('api/setting-supplier/' + this.currentEdit, this.supplierForm)
+				.then((response) => {
+					this.UpdateTableData();
+				})
+				.catch((error) => {
+					console.log(error);
+					this.$message({
+						showClose: true,
+						message: 'Update Fail',
+						type: 'error',
+						duration: 10000
+					});
+				})
+			},
+			PopOutAddSupplier : function(){
+				this.AddNewSupplierdialogVisible = true;
+				this.ClearSupplierForm();
+			},
+			PopOutEditSupplier : function(tableDataRow){
+				this.EditSupplierdialogVisible = true;
+				this.FillupSupplierForm(tableDataRow);
+				this.currentEdit = this.tableData[tableDataRow].id;
+			},
+			ClearSupplierForm : function(){
+				this.supplierForm.company_name = '';
+				this.supplierForm.supplier_reg_no = '';
+				this.supplierForm.gst_no = '';
+				this.supplierForm.bank_name = '';
+				this.supplierForm.acc_no = '';
+			},
+			FillupSupplierForm : function(tableDataRow){
+				this.supplierForm.company_name = this.tableData[tableDataRow].company_name;
+				this.supplierForm.supplier_reg_no = this.tableData[tableDataRow].supplier_reg_no;
+				this.supplierForm.gst_no = this.tableData[tableDataRow].gst_no;
+				this.supplierForm.bank_name = this.tableData[tableDataRow].bank_name;
+				this.supplierForm.acc_no = this.tableData[tableDataRow].acc_no;
+			}
+		}
+	}
+</script>
+<style type="text/css">
+	.error-message{
+		position: absolute;
+		left: 0;
+	}
+</style>

resources/assets/js/router/routes.js

@@ -39,7 +39,7 @@ const TransactionHistory = () => import('~/pages/admin/transaction-history').the
 const UploadSupplierBankSlip = () => import('~/pages/admin/upload-supplier-bank-slip').then(m => m.default || m)
 
 export default [
-  { path: '/', name: 'welcome', component: Welcome },
+  { path: '/', name: 'welcome', component: Login },
   { path: '/login', name: 'login', component: Login },
   { path: '/register', name: 'register', component: Register },
   { path: '/password/reset', name: 'password.request', component: PasswordEmail },

routes/api.php

@@ -21,7 +21,7 @@ Route::middleware('auth:api')->get('/user', function (Request $request) {
 	return $request->user();
 });
 
-
+Route::get('rate', 'RateController@show');
 //Route::middleware('auth:api')->get('/user', function (Request $request) {
 //    return $request->user();
 //});
@@ -44,7 +44,6 @@ Route::group(['middleware' => 'auth:api'], function () {
     Route::post('booking/{book_id}/cancel', 'BookingController@cancel');
    	Route::get('/booking', 'BookingController@index'); 
 	Route::get('/user', 'UserController@show');
-
 	Route::patch('settings/profile', 'Settings\ProfileController@update');
 	Route::patch('settings/password', 'Settings\PasswordController@update');
 });
@@ -56,7 +55,6 @@ Route::group(['middleware' => 'guest:api'], function () {
     Route::post('register', 'Auth\RegisterController@create');
     Route::post('password/email', 'Auth\ForgotPasswordController@sendResetLinkEmail');
     Route::post('password/reset', 'Auth\ResetPasswordController@reset');
-
 	Route::post('oauth/{driver}', 'Auth\OAuthController@redirectToProvider');
 	Route::get('oauth/{driver}/callback', 'Auth\OAuthController@handleProviderCallback')->name('oauth.callback');
 });
@@ -64,14 +62,12 @@ Route::group(['middleware' => 'guest:api'], function () {
 Route::group(['middleware' => ['role:admin']], function() {
 	Route::get('admin/booking/', 'BookingController@adminIndex');
 	Route::get('admin/booking/{id}', 'BookingController@adminShow');
-
 	Route::post('update-rate', 'RateController@store');
 	Route::put('update-rate/{rate}', 'RateController@update');
 	Route::delete('update-rate/{rate}', 'RateController@delete');
 	Route::get('update-rate', 'RateController@index');
 	
-	//show current rate
-	Route::get('rate', 'RateController@show');
+	
 
 	Route::get('setting-credit', 'SettingCreditController@index');
 	Route::get('setting-credit/{credit}', 'SettingCreditController@show');

vendor/composer/autoload_static.php

@@ -4,7 +4,7 @@
 
 namespace Composer\Autoload;
 
-class ComposerStaticInit50cdbea3724e5f1d6267359fe107641a
+class ComposerStaticInit0eb1f3eb0d8144627e65b3e93f0783e4
 {
     public static $files = array (
         '6124b4c8570aa390c21fafd04a26c69f' => __DIR__ . '/..' . '/myclabs/deep-copy/src/DeepCopy/deep_copy.php',
@@ -4767,10 +4767,10 @@ class ComposerStaticInit50cdbea3724e5f1d6267359fe107641a
     public static function getInitializer(ClassLoader $loader)
     {
         return \Closure::bind(function () use ($loader) {
-            $loader->prefixLengthsPsr4 = ComposerStaticInit50cdbea3724e5f1d6267359fe107641a::$prefixLengthsPsr4;
-            $loader->prefixDirsPsr4 = ComposerStaticInit50cdbea3724e5f1d6267359fe107641a::$prefixDirsPsr4;
-            $loader->prefixesPsr0 = ComposerStaticInit50cdbea3724e5f1d6267359fe107641a::$prefixesPsr0;
-            $loader->classMap = ComposerStaticInit50cdbea3724e5f1d6267359fe107641a::$classMap;
+            $loader->prefixLengthsPsr4 = ComposerStaticInit0eb1f3eb0d8144627e65b3e93f0783e4::$prefixLengthsPsr4;
+            $loader->prefixDirsPsr4 = ComposerStaticInit0eb1f3eb0d8144627e65b3e93f0783e4::$prefixDirsPsr4;
+            $loader->prefixesPsr0 = ComposerStaticInit0eb1f3eb0d8144627e65b3e93f0783e4::$prefixesPsr0;
+            $loader->classMap = ComposerStaticInit0eb1f3eb0d8144627e65b3e93f0783e4::$classMap;
 
         }, null, ClassLoader::class);
     }