293 lines
10 KiB
PHP
293 lines
10 KiB
PHP
@extends('layouts.vertical', ['page_title' => 'Datatables'])
|
|
|
|
@section('css')
|
|
<meta name="csrf-token" content="{{ csrf_token() }}" />
|
|
<style type="text/css">
|
|
.ag-theme-alpine {
|
|
--ag-header-column-separator-display: block;
|
|
--ag-header-column-separator-height: 20%;
|
|
--ag-header-column-separator-width: 1px;
|
|
--ag-header-column-separator-color: rgb(0, 0, 0);
|
|
}
|
|
#myGrid {
|
|
height: calc(100vh - 200px);
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div id="pageloader">
|
|
<img src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif" alt="processing..." />
|
|
</div>
|
|
<!-- Start Content-->
|
|
<div class="container-fluid">
|
|
|
|
<!-- start page title -->
|
|
|
|
<!-- end page title -->
|
|
@if (session()->has('message'))
|
|
<div class="alert alert-success">
|
|
{{ session()->get('message') }}
|
|
</div>
|
|
@endif
|
|
@if (session()->has('error'))
|
|
<div class="alert alert-danger">
|
|
{{ session()->get('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div class="row justify-content-between">
|
|
<div class="col-auto filter-section">
|
|
<h4 class="page-title">Detailing Contest Report</h4>
|
|
</div>
|
|
<div class="col-auto">
|
|
<div class="text-lg-end my-1 my-lg-0">
|
|
<button id="btn-export" class="btn btn-sm btn-primary" style="margin-bottom: 5px; font-weight: bold"> Export to Excel </button>
|
|
</div>
|
|
</div><!-- end col-->
|
|
</div> <!-- end row -->
|
|
</div>
|
|
</div> <!-- end card -->
|
|
</div> <!-- end col-->
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<div id="myGrid" style="" class="ag-theme-alpine"></div>
|
|
</div> <!-- end card body-->
|
|
</div> <!-- end card -->
|
|
</div><!-- end col-->
|
|
</div>
|
|
<!-- end row-->
|
|
</div> <!-- container -->
|
|
|
|
|
|
|
|
<style type="text/css">
|
|
#pageloader {
|
|
background: rgba( 255, 255, 255, 0.8 );
|
|
display: none;
|
|
height: 100%;
|
|
position: fixed;
|
|
width: 100%;
|
|
z-index: 9999;
|
|
}
|
|
|
|
#pageloader img {
|
|
left: 50%;
|
|
margin-left: -32px;
|
|
margin-top: -32px;
|
|
position: absolute;
|
|
top: 50%;
|
|
}
|
|
|
|
.img-thumbnail {
|
|
max-width: 100px
|
|
}
|
|
|
|
.filter-section .form-select {
|
|
max-width: 150px
|
|
}
|
|
|
|
.filter-section .form-control {
|
|
max-width: 120px
|
|
}
|
|
|
|
.header-cell {
|
|
background-color: #a6e1ec;
|
|
text-align: center;
|
|
}
|
|
|
|
.quarters-cell {
|
|
background-color: #5bc0de;
|
|
}
|
|
|
|
.row-header {}
|
|
|
|
.cell-span {
|
|
background-color: #f4f7f8;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<!-- third party js -->
|
|
<script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.0/xlsx.full.min.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var cellClassRules = {
|
|
'header-cell': 'data.section === "big-title"',
|
|
'quarters-cell': 'data.section === "quarters"',
|
|
};
|
|
|
|
function rowSpan(params) {
|
|
return 20;
|
|
}
|
|
|
|
const columnDefs = [{
|
|
headerName: 'Name',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'name',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Employee Code',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'employee_code',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Email',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'email',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Designation',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'designation',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Zone',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'Zone',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Region',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'Region',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Area',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'Area',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Territory',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'Territory',
|
|
width: 170,
|
|
},
|
|
|
|
{
|
|
headerName: 'Marks',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'marks',
|
|
width: 170,
|
|
},
|
|
{
|
|
headerName: 'Total',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: 'total',
|
|
width: 170,
|
|
},
|
|
|
|
@foreach($parameters as $param)
|
|
{
|
|
headerName: '{{$param->title}}',
|
|
filter: 'agTextColumnFilter',
|
|
floatingFilter: true,
|
|
field: '{{$param->id}}',
|
|
width: 170,
|
|
},
|
|
@endforeach
|
|
|
|
{ headerName: 'Level 2 Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_2_user_name', width: 170, },
|
|
{ headerName: 'Level 2 Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_2_user_email', width: 170, },
|
|
{ headerName: 'Level 2 Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_2_user_employee_code', width: 170, },
|
|
|
|
{ headerName: 'Level 3 Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_3_user_name', width: 170, },
|
|
{ headerName: 'Level 3 Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_3_user_email', width: 170, },
|
|
{ headerName: 'Level 3 Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_3_user_employee_code', width: 170, },
|
|
|
|
{ headerName: 'Level 4 Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_4_user_name', width: 170, },
|
|
{ headerName: 'Level 4 Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_4_user_email', width: 170, },
|
|
{ headerName: 'Level 4 Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_4_user_employee_code', width: 170, },
|
|
|
|
{ headerName: 'Level 5 Name', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_5_user_name', width: 170, },
|
|
{ headerName: 'Level 5 Email', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_5_user_email', width: 170, },
|
|
{ headerName: 'Level 5 Code', filter: 'agTextColumnFilter', floatingFilter: true, field: 'level_5_user_employee_code', width: 170, },
|
|
|
|
];
|
|
|
|
const rowData = [];
|
|
|
|
$('#btn-export').on('click', function() {
|
|
gridOptions.api.exportDataAsCsv();
|
|
});
|
|
|
|
const gridOptions = {
|
|
columnDefs: columnDefs,
|
|
pagination: true,
|
|
|
|
// sets 10 rows per page (default is 100)
|
|
paginationPageSize: 50,
|
|
defaultColDef: {
|
|
resizable: true,
|
|
sortable: true,
|
|
},
|
|
rowData: rowData,
|
|
domLayout: 'normal',
|
|
};
|
|
|
|
const gridDiv = document.querySelector('#myGrid');
|
|
new agGrid.Grid(gridDiv, gridOptions);
|
|
|
|
let final_data = {!! json_encode($users) !!}
|
|
gridOptions.api.setRowData(final_data);
|
|
|
|
//$("#pageloader").fadeIn();
|
|
// $.ajax({
|
|
// type: "GET",
|
|
// url: '/report/ajaxbdedoctorscans',
|
|
// processData: false,
|
|
// contentType: false,
|
|
// success: function(data) {
|
|
// //console.log(data)
|
|
// // gridOptions.api.setRowData(data.doctors);
|
|
// // $("#pageloader").fadeOut();
|
|
// gridOptions.api.setRowData(data.jsondata);
|
|
// $("#pageloader").fadeOut();
|
|
// final_data = final_data.concat(data.jsondata)
|
|
|
|
// for (var i=0; i<data.total; i+=5000) {
|
|
// if(i > 0) {
|
|
// $.ajax({
|
|
// type: "GET",
|
|
// async: false,
|
|
// url: '/report/ajaxbdedoctorscansfiles?type=nextpage&fileno=' + (i/5000),
|
|
// processData: false,
|
|
// contentType: false,
|
|
// success: function(data) {
|
|
// final_data = final_data.concat(data)
|
|
// },
|
|
// });
|
|
// }
|
|
// }
|
|
// gridOptions.api.setRowData(final_data);
|
|
// },
|
|
// });
|
|
</script>
|
|
@endsection
|