Styjun

I want to make an invoice system with laravel using vuejs by api. Firstly show all product and when i click add to cart it added.

Here is the screenshot:

Now i want to send input fill data to order_masters table and including last inserted ID cart data send order_details table.

but i cant not pass the whole data. sometime pass customer information but not cart data.

N. B: I am using vuejs, vform and API

My component code is given below:

<template>
<div class="row">
 <div class="col-md-7">
 <div class="col-md-11">
 <input type="hidden" v-model="field">
 <input type="search" v-model="query" class="form-control form-control-sm mb-3" placeholder="Search Here">
 </div>
 <div class="row justify-content-center">
 <div v-show="products.length" v-for="(product, id) in products" :key="id" class="card col-xl-3 col-md-3 col-sm-3 mb-5 mr-5 float-left" style="background-color:lightgray">
 <div class="card-body">
 <h5 class="card-title">product.name</h5>
 <p class="card-text"><input type="text" v-model="product.qty" class="form-control form-control-sm mb-2"></p>
 <strong class="">
 product.price TK
 </strong>
 <button class="btn btn-sm btn-primary float-right" @click="addToCart(product)">
 <i class="fas fa-plus"></i>
 </button>
 </div>
 </div>
 </div>
 <div v-show="!products.length" class="alert alert-danger text-center" role="alert">
 <strong>Opps! No Data Found!</strong>
 </div>
 <pagination v-if="pagination.last_page > 1" :pagination="pagination" :offset="5" @paginate="query === ''? showProduct(): searchProduct()"></pagination>
 </div>

 <div class="col-md-5 float-righ">
 <form @submit.prevent="store" @keydown="form.onKeydown($event)">
 <alert-error :form="form"></alert-error>
 <div class="row mb-2">
 <label for="" class="col-md-3 font-weight-bold">Name</label>
 <div class="col-md-9">
 <input type="text" v-model="form.name" name="name" class="form-control form-control-sm" :class=" 'is-invalid': form.errors.has('name') ">
 <has-error :form="form" field="name"></has-error>
 </div>
 </div>
 <div class="row mb-2">
 <label for="" class="col-md-3 font-weight-bold">Phone</label>
 <div class="col-md-9">
 <input type="text" v-model="form.phone" name="phone" class="form-control form-control-sm" :class=" 'is-invalid': form.errors.has('phone') ">
 <has-error :form="form" field="phone"></has-error>
 </div>
 </div>
 <div class="row mb-2">
 <label for="" class="col-md-3 font-weight-bold">Address</label>
 <div class="col-md-9">
 <input type="text" v-model="form.address" name="address" class="form-control form-control-sm" :class=" 'is-invalid': form.errors.has('address') " >
 <has-error :form="form" field="address"></has-error>
 </div>
 </div>
 <div class="mb-5">
 <input type="button" class="btn btn-sm btn-danger float-left" @click="clearCart" value="Clear" />
 <button type="submit" :disabled="form.busy" class="btn btn-sm btn-success float-right" @click="store">Checkout</button>
 </div>
 <table class="table table-sm table-bordered table-striped">
 <thead class="text-center">
 <tr>
 <th>ID</th>
 <th>Name</th>
 <th>Qty</th>
 <th>Price</th>
 <th>L/T</th>
 <th>Action</th>
 </tr>
 </thead> 
 <tbody>
 <tr v-for="(cart, i) in carts" :key="i">
 <td class="text-center"><input type="hidden" name="pro_id[]" v-model="form.pro_id"> cart.id</td>
 <td>cart.name </td>
 <td class="text-right" name="qty"><input type="hidden" name="qty[]" v-model="form.qty">cart.qty</td>
 <td class="text-right" name="unit_price"><input type="hidden" name="pro_id[]" v-model="form.price">cart.price</td>
 <td class="text-right">cart.price*cart.qty</td>
 <td class="text-center"><button type="button" @click="removeProduct(i)" class="btn btn-sm btn-danger">x</button></td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
 <td colspan="4" class="text-right font-weight-bold">Total =</td>
 <td class="text-right"> total/-</td>
 </tr>
 </tfoot>
 </table>

 </form>
 </div>
 <vue-progress-bar></vue-progress-bar>
 <vue-snotify></vue-snotify>
</div>

<script>
export default 
data()
 return
 field: 'name',
 query: '',
 form: new Form(
 'name': '',
 'phone': '',
 'address':'',
 'pro_id' : [],
 'qty' : [],
 'unit_price' : []
 ),
 products:[],
 carts:[],
 pagination:
 current_page: 1
 
 
,
methods:
 store()
 var data = 
 carts: this.carts,
 
 this.$Progress.start()
 this.form.busy = true
 this.form.post('api/pos', data)
 .then( res => 
 this.form.reset()
 this.form.clear()
 this.$Progress.finish()
 console.log(data)
 )
 .catch( e => 
 this.$Progress.fail()
 console.log(e)
 )

 
 

</script>

Here is API Controller Function:

public function store(Request $request)

 $carts = json_decode($request->getContent('data'), true);

 $this->validate($request,[
 'name' => 'required',
 'phone' => 'required',
 'address' => 'required'
 ]);

 $order = new OrderMaster;
 $order->name = $request->name;
 $order->phone = $request->phone;
 $order->address = $request->address;
 $order->save();

 $order_id = DB::getPdo()->lastInsertId();

 foreach ($carts as $cart) 

 OrderDetails::create([
 'order_id' => $order_id,
 'product_id' => ?,
 'qty' => ?,
 'unite_price' => ?,
 ]);
 

First, you're calling form.post wrong. Second parameter is not additional data, but config options for axios.request call.

In order to send carts array you should add it to the form itself:

form: new Form(
 'name': '',
 'phone': '',
 'address':'',
 'pro_id' : [],
 'qty' : [],
 'unit_price' : [],
 'carts' : [], // <-- added
),

Then, replace usage of carts with form.carts in your template (and methods).

Now, carts will be sent to the server along with other data.

And lastly, you don't need to use json_decode at all.

//...
$data = $this->validate($request, [
 'name' => 'required',
 'phone' => 'required',
 'address' => 'required',
 'carts' => 'required|array',
 'carts.*.name' => 'string',
 'carts.*.id' => 'integer',
 'carts.*.qty' => 'integer',
 'carts.*.price' => 'numeric',
]);

Then, you can use $data as a source of data.

foreach ($data['carts'] as $cart) 
 OrderDetails::create([
 'order_id' => $order_id,
 'product_id' => $cart['id'],
 'qty' => $cart['qty'],
 'unite_price' => $cart['price'],
 ]);

I had been done it in other way. Not using vform i used axios. but i want to done it using vform.

return
 field: 'name',
 query: '',
 form:
 'name': '',
 'phone': '',
 'address':''
 ,
 products:[],
 carts:[],
 pagination:
 current_page: 1
 
 
store()
 let client = 
 cli: this.form
 
 let data = 
 carts: this.carts
 

 this.$Progress.start()
 axios.post('api/pos', data, client)
 .then( res => 
 this.$Progress.finish()
 console.log(res)
 )
 .catch( e => 
 this.$Progress.fail()
 console.log(e)
 )

 

Controller:

$carts = json_decode($request->getContent('client','data'), true);

 $customer = $carts['client'];
 $pro_info = $carts['data'];

 foreach ($customer as $cus) 
 $order = new OrderMaster;
 $order->name = $cus['name'];
 $order->phone = $cus['phone'];
 $order->address = $cus['address'];
 $order->save();

 

 $order_id = DB::getPdo()->lastInsertId();

 foreach ($pro_info as $cart) 
 foreach ($cart as $c) 
 OrderDetails::create([
 'order_id' => $order_id,
 'product_id' => $c['id'],
 'qty' => $c['qty'],
 'unit_price' => $c['price'],
 ]);