progress indicators, bug fixes, after a while

resources/views/reports/index.blade.php

@@ -0,0 +1,147 @@
+@extends('layouts.master')
+  @section('page_title')
+      @if(isset($page_title))
+          {{ $page_title }}
+      @endif
+  @endsection
+@section('css')
+<link href="{!! url('public/assets/vendors/tabulator/css/bootstrap/tabulator_bootstrap.css') !!}" type="text/css" rel="stylesheet">
+@endsection
+@section('content')
+  <div class="">
+      <div class="page-title">
+        <div class="title_left">
+          <div class="title_left">
+            <ol class="breadcrumb">
+              <li><a href="{!! url('dashboard') !!}">Dashboard</a></li>
+              <!-- <li class=""><a href=""> Reports</a></li> -->
+              <li class="active">Client Payments</li>
+            </ol>
+          </div>
+        </div>
+
+        <div class="title_right">
+          <div class="row">
+            <form method="GET" action="{!! url('clientpaymentreports') !!}">
+              <div class="col-md-5 col-sm-5 col-xs-12 form-group">
+                <div style="margin-top:1px; margin-right:-90px;" class="top_search">
+                </div>
+              </div>
+              <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search" style="margin-top: -2px;">
+                <div class="input-group">
+                  <input type="text" name="keyword" class="form-control" id="keywordField" placeholder="Keyword here...">
+                  <span class="input-group-btn">
+                    <button type="submit" class="btn btn-primary" style="color: #fff;" type="button">Go!</button>
+                  </span>
+                </div>
+              </div>
+            </form>
+          </div>          
+        </div>
+      </div>
+
+      <div class="clearfix"></div>
+      <div class="row">
+        @include('commons.notifications')
+        <div class="col-md-12 col-sm-12 col-xs-12">
+        <div class="x_panel">
+          <div class="x_title">
+            <h2> Reports </h2>
+            <div class="clearfix"></div>
+          </div>
+
+          <div class="x_content">
+            <div>
+              <button id="payment-reports-download-xlsx" class="btn btn-success btn-sm"><i class="fa fa-file-excel-o"></i> Download XLSX</button>
+              <button id="payment-reports-download-pdf" class="btn btn-danger btn-sm"><i class="fa fa-file-pdf-o"></i> Download PDF</button>
+              </div>
+            <div id="paymentReportsTable"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+</div>
+
+@endsection
+
+@section('javascript')
+<script src="{!! url('public/assets/vendors/tabulator/js/tabulator.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/xlsx.full.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.min.js') !!}"></script>
+<script type="text/javascript" src="{!! url('public/assets/vendors/tabulator/js/jspdf.plugin.autotable.js') !!}"></script>
+
+<script type="text/javascript">
+  $(document).ready(function(){
+    function link(cell, formatterParams){
+      var url = cell.getValue();
+      var rowID = cell.getData().id
+      //return "<a href='"+ base_url + "/clientpaymentreports/"+rowID+"' class='btn btn-link'>"+url+"</a>";
+      //return '<a href="'+ base_url + '"/clients/"'+rowID+'" class="btn btn-link">'+ url +'</a>';
+    }
+    var table = new Tabulator("#paymentReportsTable", {
+        ajaxURL: "clientpaymentreports/all",
+        paginationSize: 15,
+        layout: "fitColumns",
+        pagination: "remote",
+        selectable: false,
+        printAsHtml: true,
+        ajaxLoaderLoading: $('#logo_spinner').html(),
+        columns: [
+            {
+                title: "Client",
+                field: "clientName",
+                sorter: "string",
+            },
+            {
+                title: "Invoice Number",
+                field: "invoice_number",
+                sorter: "string",
+            },
+            {
+                title: "Services",
+                field: "services",
+                sorter: "string",
+            },
+            {
+                title: "Status",
+                field: "invoice_status",
+                sorter: "string",
+            },            
+            {
+                title: "Invoice Date",
+                field: "invoice_date",
+                sorter: "date",
+            },
+            {
+                title: "Date Added",
+                field: "created_at",
+                sorter: "date",
+            }
+        ],
+        rowClick:function(e, row){
+        var userID = row.getData().id;
+        //$('#userEditModal').modal('show');
+        },
+    });
+    document.getElementById("payment-reports-download-xlsx").addEventListener("click", function(){
+      table.download("xlsx", "payment-reports.xlsx", {sheetName:"Sheet 1"});
+    });
+        //trigger download of data.pdf file
+    document.getElementById("payment-reports-download-pdf").addEventListener("click", function(){
+      table.download("pdf", "payment-reports-list.pdf", {
+          orientation:"portrait", //set page orientation to portrait
+          title:"Click Mobile ERP - Client Payment Reports", //add title to report
+      });
+    }); 
+    
+    $('#keywordField').on('keyup', function(){
+      console.log('up');
+      var keyword = $(this).val();
+      table.setData("clientpaymentreports/all?keyword=" + keyword);
+
+    });
+    
+});
+
+</script>
+@endsection