295 lines
12 KiB
PHP
295 lines
12 KiB
PHP
@extends('layouts.vertical', ['page_title' => 'Datatables'])
|
|
|
|
@section('css')
|
|
<link href="{{ asset('assets/libs/datatables/datatables.min.css') }}" rel="stylesheet" type="text/css" />
|
|
<link href="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet"
|
|
type="text/css" />
|
|
<link href="{{ URL::asset('assets/libs/flatpickr/flatpickr.min.css') }}" rel="stylesheet" type="text/css" />
|
|
<style>
|
|
.card-box {
|
|
background-color: #fff;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 0.75rem 6rem rgba(56, 65, 74, 0.03);
|
|
margin-bottom: 24px;
|
|
border-radius: 0.25rem;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<div class="container-fluid">
|
|
|
|
<div class="row align-items-center mb-3">
|
|
<div class="col-md-6 p-2">
|
|
<h4 class="page-title">{{ $title }} Management</h4>
|
|
</div>
|
|
|
|
<div class="col-md-6 p-2 text-end">
|
|
@if (isset($buttons))
|
|
@foreach ($buttons as $button)
|
|
<a href="{{ $button['link'] }}"
|
|
class="btn btn-{{ $button['title'] == 'Add New' ? 'success' : 'dark' }} waves-effect waves-light me-2"
|
|
id="btn-{{ strtolower(str_replace(' ', '-', $button['title'])) }}">
|
|
{{ $button['title'] }}
|
|
</a>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@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-box">
|
|
|
|
|
|
<div class="responsive-table-plugin">
|
|
<div class="table-rep-plugin">
|
|
<div class="table-responsive" data-pattern="priority-columns">
|
|
<table id="basic-datatable" class="table dt-responsive nowrap">
|
|
<thead>
|
|
<tr>
|
|
@foreach ($fields as $code => $field)
|
|
<th @if(isset($field['buttons'])) data-priority="1" @endif>
|
|
{{ $field['title'] }}
|
|
</th>
|
|
@endforeach
|
|
<th data-priority="1">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div> <!-- end .table-responsive -->
|
|
|
|
</div> <!-- end .table-rep-plugin-->
|
|
</div> <!-- end .responsive-table-plugin-->
|
|
</div> <!-- end card-box -->
|
|
</div> <!-- end col -->
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@section('script')
|
|
<script src="{{ asset('assets/libs/datatables/datatables.min.js') }}"></script>
|
|
<script src="{{ asset('assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
|
|
<script src="{{ asset('assets/libs/flatpickr/flatpickr.min.js') }}"></script>
|
|
|
|
<script type="text/javascript">
|
|
$(document).ready(function() {
|
|
|
|
let state = "";
|
|
let fromDate = "";
|
|
let toDate = "";
|
|
let status = "";
|
|
|
|
const yesterday = new Date();
|
|
yesterday.setDate(yesterday.getDate() - 1);
|
|
|
|
const fromPicker = flatpickr('#fromDate', {
|
|
altInput: true,
|
|
altFormat: "d-m-Y",
|
|
dateFormat: "Y-m-d",
|
|
defaultDate: yesterday
|
|
});
|
|
|
|
const toPicker = flatpickr('#toDate', {
|
|
altInput: true,
|
|
altFormat: "d-m-Y",
|
|
dateFormat: "Y-m-d",
|
|
defaultDate: yesterday
|
|
});
|
|
|
|
$('.daterange-wrapper').hide()
|
|
$('#period').change(function() {
|
|
console.log($('#period').val())
|
|
if ($('#period').val() == 'custom-date') {
|
|
$('.daterange-wrapper').show()
|
|
} else {
|
|
$('.daterange-wrapper').hide()
|
|
let dateval = $('#period').val().split('~')
|
|
$('#startdate').val(dateval[0])
|
|
$('#enddate').val(dateval[1])
|
|
}
|
|
})
|
|
|
|
|
|
$('#dash-daterange').flatpickr({
|
|
altInput: true,
|
|
mode: "range",
|
|
altFormat: "Y-m-d",
|
|
defaultDate: 'today'
|
|
});
|
|
|
|
// let startdate = new Date()
|
|
// startdate.setMonth(startdate.getMonth() - 1)
|
|
// $('#startdate').flatpickr({
|
|
// altFormat: "Y-m-d",
|
|
// defaultDate: startdate
|
|
// });
|
|
|
|
// $('#enddate').flatpickr({
|
|
// altFormat: "Y-m-d",
|
|
// defaultDate: 'today'
|
|
// });
|
|
|
|
// let isfetch = false
|
|
// $('#btn-fetch').click(function() {
|
|
// table.ajax.url('/neblogisticreport/ajaxlist?startdate=' + $('#startdate').val() +
|
|
// '&enddate=' + $('#enddate').val()).load();
|
|
// isfetch = true
|
|
// })
|
|
|
|
// $('#btn-export').click(function() {
|
|
// if (isfetch) {
|
|
// document.location.href = '/neblogisticreport/export?startdate=' + $('#startdate')
|
|
// .val() + '&enddate=' + $('#enddate').val()
|
|
// } else {
|
|
// document.location.href = '/neblogisticreport/export'
|
|
// }
|
|
|
|
// })
|
|
|
|
// $('#btn-export-old').click(function() {
|
|
// if (isfetch) {
|
|
// document.location.href = '/neblogisticreport/exportold?startdate=' + $('#startdate')
|
|
// .val() + '&enddate=' + $('#enddate').val()
|
|
// } else {
|
|
// document.location.href = '/neblogisticreport/exportold'
|
|
// }
|
|
|
|
// })
|
|
|
|
let table = $('#basic-datatable').DataTable({
|
|
"order": [
|
|
[0, "desc"]
|
|
],
|
|
"language": {
|
|
"paginate": {
|
|
"previous": "<i class='mdi mdi-chevron-left'>",
|
|
"next": "<i class='mdi mdi-chevron-right'>"
|
|
}
|
|
},
|
|
"drawCallback": function drawCallback() {
|
|
//$('.dataTables_paginate > .pagination').addStaff('pagination-rounded');
|
|
},
|
|
|
|
fixedHeader: true,
|
|
"pageLength": 200,
|
|
"lengthMenu": [
|
|
[200, 350, 500, 750, 900],
|
|
[200, 350, 500, 750, 900]
|
|
],
|
|
'processing': true,
|
|
'serverSide': true,
|
|
'serverMethod': 'get',
|
|
searchDelay: 2000,
|
|
"order": [
|
|
[1, "asc"]
|
|
],
|
|
'searching': true,
|
|
'info': true,
|
|
|
|
"ajax": {
|
|
url: '/form/loadmore',
|
|
type: 'GET',
|
|
data: function(d) {
|
|
d.lastkey = '';
|
|
d.partition = 'rapport-pulmocare';
|
|
d.alldata = 0;
|
|
d.user_id = '{{ Auth::user()->user_id }}';
|
|
d.form_id = '1713351143-9afc68f4-653f-491a-9e0e-a27d61ed1e07';
|
|
d.team_report = 0;
|
|
},
|
|
dataSrc: 'data'
|
|
},
|
|
columns: [
|
|
@foreach($fields as $code => $field)
|
|
@if($code === 'created_at')
|
|
{
|
|
"data": "created_at",
|
|
"render": function (data, type, row) {
|
|
if (!data) return '';
|
|
const date = new Date(data);
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const year = date.getFullYear();
|
|
return `${day}-${month}-${year}`;
|
|
}
|
|
},
|
|
@elseif($code !== 'actions')
|
|
{ "data": "{{ $code }}" },
|
|
@endif
|
|
@endforeach
|
|
{
|
|
data: null,
|
|
render: function(data, type, row) {
|
|
return '<a href="/neblogisticreport/viewreportbyid?id=' + row.id +
|
|
'&requesttype=edit' +
|
|
'&state=' + encodeURIComponent(state) +
|
|
'&from_date=' + encodeURIComponent(fromDate) +
|
|
'&to_date=' + encodeURIComponent(toDate) +
|
|
'&status=' + encodeURIComponent(status) +
|
|
'" title="Edit" class="btn btn-warning btn-xs waves-effect waves-light">' +
|
|
'<i class="mdi mdi-square-edit-outline"></i></a>' +
|
|
|
|
' <a href="/neblogisticreport/viewreportbyid?id=' + row.id +
|
|
'&requesttype=view' +
|
|
'&state=' + encodeURIComponent(state) +
|
|
'&from_date=' + encodeURIComponent(fromDate) +
|
|
'&to_date=' + encodeURIComponent(toDate) +
|
|
'&status=' + encodeURIComponent(status) +
|
|
'" title="View" class="btn btn-info btn-xs waves-effect waves-light">' +
|
|
'<i class="mdi mdi-eye-outline"></i></a>';
|
|
}
|
|
}
|
|
|
|
],
|
|
"initComplete": function(settings, json) {
|
|
var api = this.api();
|
|
var textBox = $('.dataTables_filter label input');
|
|
textBox.unbind();
|
|
textBox.bind('keyup input', function(e) {
|
|
if (e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox
|
|
.val()) {
|
|
// do nothing ¯\_(ツ)_/¯
|
|
} else if (e.keyCode == 13 || !textBox.val()) {
|
|
api.search(this.value).draw();
|
|
}
|
|
});
|
|
}
|
|
}); //Buttons examples
|
|
|
|
|
|
|
|
$('#applyFilter').on('click', function() {
|
|
table.draw();
|
|
state = $('#depotStateFilter').val();
|
|
fromDate = $('#fromDate').val();
|
|
toDate = $('#toDate').val();
|
|
status = $('#nebstatusFilter').val();
|
|
let exportUrl =
|
|
`/neblogisticreport/export?state=${encodeURIComponent(state)}&from_date=${fromDate}&to_date=${toDate}&status=${status}`;
|
|
$('#btn-export').attr('href', exportUrl);
|
|
|
|
let exportUrlForOld =
|
|
`/neblogisticreport/exportold?state=${encodeURIComponent(state)}&from_date=${fromDate}&to_date=${toDate}&status=${status}`;
|
|
$('#btn-export-old').attr('href', exportUrlForOld);
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|