JavaScript Data Table Search.

Step#01:

<template>

<div class="row">

   <div class="item-show-limit col-md-8">
     <span>Show</span>
       <select name="per_page" class="per_page"     @change="changePerPage" v-model="perPage">

           <option value="10">10</option>

           <option value="20">20</option>
           <option value="30">30</option>
          <option value="40">40</option>
           <option value="50">50</option>
        </select>
     <span>Entries</span>
 </div>    <div class="col-md-4">
    <div class="m-input-icon m-input-icon--left">
           <input type="text" class="form-control m-input" placeholder="Search..." id="inputSearch"><span class="m-input-icon__icon m-input-icon__icon--left"><span><i class="la la-search"></i></span> </span>
      </div>
   </div>
</div>
</template>


Step#02:
methods: {

changePerPage(){
    var vm = this;
    vm.index(1,vm.perPage);
},

datatables(){
    $(document).ready(function () {
        $("#inputSearch").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#dataTable tr").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
  },

}

created(){

_this.datatables();

}

How to use components in v-html in laravel & vue js.

Example:-


Ex:#1
<span v-html="value.qty"></span>

Ex:#2
v-html=" country.name +' ('+ country.calling_code +')' "

Laravel Simple CRUD with best Example.

Route:-

Route::resource('user','User\UserController',['parameters'=> ['user'=>'id']]);


UserController:-

------------------------------Index---------------------------------------------------------------------------
public function index()
    {
        return view('backend.user.manage_user');
    }

-----------------------------Insert--------------------------------------------------------------------------
public function store(Request $request)
    {
        $input                           = $request->all();
        $input['password']       = Hash::make($input['password']);
        $input['created_by']    = Auth::user()->id;
        $input['modified_by'] = Auth::user()->id;
        $imageData                =$request->file('photo');

        if($imageData){

            $fileName = md5(str_random(30).time().'_'.$request->file('photo')).'.'.$request->file('photo')->getClientOriginalExtension();
            $request->file('photo')->move('uploads/userPhoto/',$fileName);
            $FilePath= url('/'). "/uploads/userPhoto/".$fileName;
            $input['photo'] = $FilePath;
        }

        try {
            User::create($input);
            $bug = 0;
        } catch (\Exception $e) {
            $bug = $e->errorInfo[1];
        }
        if ($bug == 0) {
            return redirect('user')->with('successMsg', 'User Inserted Successfully.');
        }elseif ($bug == 1062) {
            return redirect('user')->with('errorMsg', 'User is Found Duplicate');
        }
        else {
            return redirect()->back()->with('errorMsg', 'Something Error Found !, Please try again.');
        }
    }

-----------------------------Edit-----------------------------------------------------------------------------
public function edit($id)
    {
        $editModeData = User::FindOrFail($id);
        $roleList = $this->commonRepositories->selectRoleList();
        return view('backend.user.add_user',compact('editModeData','roleList'));
    }

----------------------------Update--------------------------------------------------------------------------
public function update(Request $request, $id)
    {
        $data = User::findOrFail($id);

        $input                           = $request->all();
        $image                         =$request->file('photo');
        $input['created_by']     = Auth::user()->id;
        $input['modified_by']  = Auth::user()->id;


        if($image){
            $imgName= md5(str_random(30).time().'_'.$request->file('photo')).'.'.$request->file('photo')->getClientOriginalExtension();

            $request->file('photo')->move('uploads/userPhoto/',$imgName);
            if(file_exists('uploads/userPhoto/'.$data->photo) AND !empty($data->photo)){
                unlink('uploads/userPhoto/'.$data->photo);
            }
            $FilePath = url('/'). "/uploads/userPhoto/".$imgName;
            $input['photo']= $FilePath;
        }

        if(isset($request->password)){
            $input['password'] = Hash::make($input['password']);
        }

        try {
            $data->update($input);
            $bug = 0;
        } catch (\Exception $e) {
            $bug = $e->errorInfo[1];
        }
        if ($bug == 0) {
            return redirect('user')->with('successMsg', 'User Updated Successfully.');
        }elseif ($bug == 1062) {
            return redirect('user')->with('errorMsg', 'User is Found Duplicate');
        }
        else {
            return redirect()->back()->with('errorMsg', 'Something Error Found !, Please try again.');
        }
    }


-------------------------Delete-------------------------------------------------------------------------------
public function destroy($id)
    {
        $data = User::FindOrFail($id);
        if(file_exists('uploads/userPhoto/'.$data->photo) AND !empty($data->photo)){
            unlink('uploads/userPhoto/'.$data->photo);
        }

        try{

            $data->delete();
            $bug = 0;
        }
        catch(\Exception $e){
            $bug = $e->errorInfo[1];
        }

        if($bug==0){
            echo "success";
        }else{
            echo 'error';
        }
    }

Laravel and VueJS select depending of another select

HTML

<select class="form-control" data-selectField="sales_invoices_customer_id" id="sales_invoices_customer_id" v-model="form.sales_invoices_customer_id" @change="loadSalesMan()"  >
   <option v-for="(cvalue,cindex) in customer_lists" :value="cvalue.id" > {{cvalue.sales_customer_name}}</option>
</select>

<select disabled class="form-control" data-selectField="sales_man_id" id="sales_man_id" v-model="form.sales_man_id" >
  <option v-for="(value,index) in sales_man_lists" :value="value.id" > {{value.sales_man_name}}</option>
</select>

Vue Js:

data:function(){
     return{
        sales_man_lists: {},

     form:{
          sales_invoices_customer_id: '',
          sales_man_id: '',
      },

    };

 methods:{

loadSalesMan(){
     var _this = this;
     var id= this.form.sales_invoices_customer_id;

     axios.get(base_url+"sales-invoice/"+id+"/sales-man-list").then((response) => {

      if(response.data.length > 0){
          console.log(response.data);
           this.sales_man_lists = response.data;
     document.getElementById("sales_man_id ").disabled = false;

           setTimeout(function () {

      var Select2= {init:function() {$(".select2").select2( {placeholder:            "Please select an option"})}};
      jQuery(document).ready(function() {Select2.init()});

     },100);

       }
    });
  },
},

 mounted(){
      var _this = this;

        $('#addComponent').on('change', '.select2', function (e) {
          var selectedType = $(this),
          curerntVal = !!selectedType.val(),
          dataIndex = $(e.currentTarget).attr('data-selectField');
          if(dataIndex == 'sales_invoices_customer_id'){
              _this.form.sales_invoices_customer_id = selectedType.val();
              _this.loadSalesMan();
          }else if(dataIndex == 'sales_man_id'){
              _this.form.sales_man_id = selectedType.val();
             
      });

},

Database:

Route:

 Route::get('sales-invoice/{id}/sales-man-list','Sales\SalesInvoiceController@getSalesManList');


Controller :

public function getSalesManList($customer_id){

   $salesManDetails = CustomerShopsSalesMan::where('customer_shops_id',$customer_id)->get();
   return $salesManDetails;
}

Dynamic table rowspan in vue.js

<template >
     <tr v-for="(item, i) in list"> 
       <td
         :rowspan="item.same_num"
         v-if="!i? true:item[i-1].date==item[i].date? '':true"
         class="text-center"
         v-text="item.date"
       ></td>
     </tr>
   </template>

Laravel from_date & to_date report generate.

HTML

<div class="content-wrapper">
    <!-- Main content -->
    <section class="content">
      <div class="row">
        <!-- left column -->
        <div class="col-md-12">
          <!-- general form elements -->
          <div class="box box-primary boxbg">
<div class="box-header with-border">
<div class="box-tools pull-right">
<button class="btn btn-success" id="show"><i class="fa fa-angle-down" aria-hidden="true"></i>  </button>
<button style="display: none" class="btn btn-success" id="hidden"><i class="fa fa-angle-up" aria-hidden="true"></i> </button>
</div>
<h4>Filter</h4>
            </div>
       
<div id="searchBox" class="box-body">
<div class="col-sm-12 col-md-12">
<div class="col-sm-5 col-md-5">
<label class="col-sm-3 col-md-4 control-label">From Date</label>
<div class="col-sm-8 col-md-8">
<input type="text" class="form-control dateFiled" placeholder="Select From Date" id="from_date">
</div>
</div>
<div class="col-sm-5 col-md-5">
<label class="col-sm-3 col-md-4 control-label">To Date</label>
<div class="col-sm-8 col-md-8">
<input type="text" class="form-control dateFiled" placeholder="Select To Date" id="to_date">
</div>
</div>
<div class="col-sm-1 col-md-1">
<input type="button" id="filter" class="btn btn-primary btn-sm" value="Filter">
</div>
</div>
</div>


          </div>
        </div><!--/.col (left) -->

      </div>   <!-- /.row -->
 
  <div class="row">
        <div class="col-xs-12">
          <div class="boxbg">
            <div class="box-body">
<h4 align="center"><?php echo $page_title;?></h4>

            <table class="table table-bordered">
                <thead>
<tr>
<th width="60%">Account</th>
<th width="20%">Debit</th>
<th width="20%">Credit</th>
</tr>
                </thead>
                <tbody id="reportTable">
                </tbody>                 
            </table>

            </div>
          </div>
        </div>
      </div> 
 
    </section><!-- /.content -->
  </div><!-- /.content-wrapper -->


JS

<script type="text/javascript">

jQuery(function(){

$( "#show" ).click(function() {
$( "#hidden" ).toggle();
$( "#show" ).toggle();
$( "#searchBox" ).slideToggle(800);
});

$( "#hidden" ).click(function() {
$( "#hidden" ).toggle();
$( "#show" ).toggle();
$( "#searchBox" ).slideToggle(800);
});


$('#filter').on('click', function(){
var from_date = $('#from_date').val();
var to_date = $('#to_date').val();

$.ajax({
url : "<?php echo base_url();?>accounts/report/TrialBalance",
type : "POST",
dataType : "JSON",
data : {
"from_date" : from_date,
"to_date" : to_date,
},
success : function(response){
var tableFormat = "";
var totalDebit = 0;
var totalCredit = 0;
$.each(response, function(key, value){
// console.log(value);

tableFormat += "<tr>";
tableFormat += "<td>"+value.title+"</td>";



if(value.balance == 'debit' || value.total_debit > '0.00'){
var totalAmount = value.total_debit - value.total_credit;

if(totalAmount < 0) {
tableFormat += "<td>0.00</td>";
tableFormat += "<td>"+Math.abs(totalAmount).toFixed(2)+"</td>";
totalCredit += Math.abs(totalAmount);
}else{
tableFormat += "<td>"+Math.abs(totalAmount).toFixed(2)+"</td>";
tableFormat += "<td>0.00</td>";
totalDebit += Math.abs(totalAmount);
}

}else if(value.balance == 'credit' || value.total_credit > '0.00'){
var totalAmount = value.total_credit - value.total_debit;

if(totalAmount < 0) {
tableFormat += "<td>"+Math.abs(totalAmount).toFixed(2)+"</td>";
tableFormat += "<td>0.00</td>";
totalDebit += Math.abs(totalAmount);
}else{
tableFormat += "<td>0.00</td>";
tableFormat += "<td>"+Math.abs(totalAmount).toFixed(2)+"</td>";
totalCredit += Math.abs(totalAmount);
}

}


// tableFormat += "<td>"+totalAmount+"</td>";
// tableFormat += "<td>0.00</td>";

tableFormat += "</tr>";

})

tableFormat += "<tr style='background:#eaeaea'><td>Total</td><td>"+totalDebit+"</td><td>"+totalCredit+"</td></tr>";



$('#reportTable').html(tableFormat);

}
})
})

});

</script>

How do Vue JS - Bootstrap Datepicker ?

Vue JS - Bootstrap Datepicker

HTML

<div class="m-form__group m-form__group">
    <label class="m-label m-label--single">From Date:</label>
    <div class="input-group date">
   <input type="text" class="form-control  datepicker " v-model="form.from_date" id="from_date" />
        <div class="input-group-append">
         <span class="input-group-text">
            <i class="la la-calendar-check-o"></i>
         </span>
       </div>
     </div>
</div>

 JS
      mounted(){
            var _this = this;
            $(document).on("focus", ".datepicker", function () {
                $(this).datepicker({
                    format: 'dd/mm/yyyy',
                    todayHighlight: true,
                    clearBtn: true,
                }).on('changeDate', function (ev) {

                    $(this).datepicker('hide');
                    var dateField = $(this).attr('id');

                    if (ev.date == undefined) {
                        if (dateField == 'from_date') {
                            _this.form.from_date = '';
                        }
                    } else {
                        if (dateField == 'from_date') {
                            _this.form.from_date = moment(ev.date).format('YYYY-MM-DD');
                        }
                    }
                });
            });
        },