KoolReport's Forum

Official Support Area, Q&As, Discussions, Suggestions and Bug reports.
Forum's Guidelines

To Render Laravel Koolreport Blade in CoreUI Vue Js #749

Open iRiyada opened this topic on on Mar 18, 2019 - 2 comments

iRiyada commented on Mar 18, 2019

we have created reports using Koolreports in Laravel . We would like to render the reports using Vue Js Core UI. We are using version 3.1.0 koolreport pro. Please guide us on how to render our reports using Vue Js Core UI.

KoolReport commented on Mar 18, 2019

Could you please post some of your code.

iRiyada commented on Mar 18, 2019

NoTaskUserReport.php

<?php
namespace App\Reports;
use \koolreport\processes\Group;


class NoTaskUserReport extends \koolreport\KoolReport
{   use \koolreport\clients\jQuery;
    use \koolreport\clients\Bootstrap;
    use \koolreport\clients\FontAwesome;


    public function settings()
    {
        return array(
            "dataSources" => array(
                "mysql" => array(
                    'host' => 'localhost',
                    'username' => 'myTask360',
                    'password' => '123',
                    'dbname' => 'mytask360',
                    'charset' => 'utf8',
                    'class' => "\koolreport\datasources\MySQLDataSource",
                ),
            )
        );

    }

    function setup()
    {

      
            
            $this->src('mysql')
            ->query("select 	s.name 'Supervision Name',
            u.name 'User Name',
            0 'Task Count'
     from users u, supervision s where
         s.code = u.supervision and
         s.code in (1,2,3,4,5) and
             u.isactive = 1 and              (u.expiry_date is null or current_date() <=u.expiry_date) and  not exists ( select 1 from easycases c, projects p where
             c.project_id = p.id and
             p.project_type in (1,2,3,4,5) and  c.assign_to = u.id and
             c.istype = 1 and
             c.legend not in (3,5)
           )
     order by s.code, u.name")
            ->pipe($this->dataStore('user_details'));
            
           
    }




}


NoTaskUserReport.view.php


<?php
use \koolreport\widgets\koolphp\Table;
use \koolreport\processes\CalculatedColumn;
use \koolreport\inputs\Select2;
use \koolreport\datagrid\DataTables;
use \koolreport\sparklines;
use \koolreport\inputs\DateTimePicker;

?>
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
    <meta charset="utf-8">
    <title >My Report</title>
    </head>
<style>
table{
          width:100%;
          table-layout: fixed ;         
          
      }

.color
{
    border: 1px solid black;
}

.insideBorder
{
    border: 10px solid white;
}
.line{
    width: 1320px;
    border-bottom: 1px solid black;
    position: absolute;
}
.cssHeader
{
    background-color:#e9ffe8;
    text-align: right;
}
.cssItem
{
    background-color:#fdffe8;
}
.container {width:900px;
    margin:5 5;
    padding:10px 10px;
    border:1px solid #ccc;
    background:#fff;
     }
.header img {
    float: left;
    width: 100px;
    height: 100px;
    background: #555;
}
#myDIV {
    margin:10px 10px 0px 300px;
}
</style>
<body>


  <div align=left  class="container">
    <div align=center  class="header" style="color:#2F459A">
        <img src="/images/logo1.png" alt="logo" />
        <h2>Report of List of Users without any Assigned Tasks in hands</h2><h4>Date: <script>document.write(new Date().toLocaleDateString()); </script></h4>

    </div>
     <br>
    <hr>
    <div id="button1" style="float:right">
    <button  onclick="myFunction()" style="float:right" ><i class="fa fa-angle-down fa-2x"></i></button>
    </div>
        <?php  $new=$this->dataStore('user_details')->process(new CalculatedColumn(array(
        "id"=>"{#}+1")));?>
           
           <div id="myDIV">
          <br>
          <form class="form-inline" method="post">
             <div class="row">
              <div class="form-group">
              <strong>الوحدة الإدارية</strong>   
                  
                   <?php
                     select2::create(array(
                "multiple"=>true,
                "name"=>"الوحدةالإدارية",
                 "placeholder"=>"select ",
                 "dataStore"=>$this->src("mysql")->query("select distinct name FROM supervision"),
                 "attributes"=>array(
                    "class"=>"form-control"
                                    ),
                    "clientEvents"=>array(
                    "change"=>"function(){
                        
                        console.log($(this).val());
                    }"
                )
            ));
            ?>
            
            <button onclick="clear()"><i class="fas fa-window-close"></i></button>
            
               
                </div>
                
            </div>  
          </form>
          
        </div>      
        <hr>

       <?php
            DataTables::create(array(
           "dataSource" => $new,
           "name"=>"example",
           "columns" => array(
             "id" => array(     
                 "label" => "#",
                     
                             ),
             "Supervision Name" => array(
     
                 "label" => "الوحدة الإدارية",    
                
             ),
             
             "User Name" => array(
     
                 "label" => "اسم الموظف",                 
     
                             ),
             
             "Task Count" => array(
     
                 "label" => "عدد المهام"  ,
                 
             ),
             ),
     
           "cssClass" => array(
               "table" => "table table-striped table-bordered color  ",
               "th" => "cssHeader insideBorder ",
               "tr" => "cssItem color",
               "td" => "insideBorder"
               
           ),
          "options"=>array(
           "columnDefs"=>array(
                array("width"=> 20, "targets"=> 0 ),
                array("width"=> 100, "targets"=> 1 ),
                array("width"=> 100, "targets"=> 2 ),
                array("width"=> 20, "targets"=> 3 ),
               
                           

            ),
            //"searching"=>true,
            //"paging"=>true,

            "orders"=>array(
            array(0,"desc")
        )
        )
    
       ));?>
    </div>
    <script type="text/javascript">
  KoolReport.load.onDone(function() {
  
    var table= $('#example').DataTable( {
            destroy: true,
            
                      
		    "buttons": [
                {
              extend: 'print',
              text: '<i class="fa fa-print"></i>',
              titleAttr: 'print'
           },
         
                
            ],
            initComplete: function () {
                
            this.api().column([1]).every( function () {


                   //var selectField = 'title'+i;
                    var column = this;
                    var title = $(column.header()).text().replace(/[\s()]+/gi, '');
                    console.log(title);   
                    var select = $('#'+title)
           
                    
                        .on( 'change', function () {
                            // var val = $.fn.dataTable.util.escapeRegex(
                            //     $(this).val()
                            // );
     
                            var data = $.map( $(this).select2('data'), function( value, key ) {
                            return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
                                 });
                      
                                //if no data selected use ""
                                if (data.length === 0) {
                                    data = [""];
                                }

                      //join array into string with regex or (|)
                      var val = data.join('|');
                                                  column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );
                       
                                        
                } );
            }
       });
       table.buttons().container().appendTo( $('#button1') );

  }); 
  function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
function clear()
    {
        $('الوحدةالإدارية').val(null).trigger("change");
    }

 </script>
</body>
</html>
--------------------------

NoTaskUserReportController.php

<?php

namespace App\Http\Controllers;

use App\Reports\NoTaskUserReport;

class NoTaskUserReportController extends Controller {

public function __construct()
{
    $this->middleware("guest");
}
public function index()
{
    $report = new NoTaskUserReport;
    $report->run();
    return view("NoTaskUserReport",["report"=>$report]);
}

}

NoTaskUserReport.blade.php `

{{$report->render()}};


Build Your Excellent Data Report

Let KoolReport help you to make great reports. It's free & open-source released under MIT license.

Download KoolReport View demo
None yet

None